Diseño personalizado para diferentes páginas de DIVI

Abr 3, 2017 | CSS, Diseño, DIVI (Elegant Themes), Tutoriales

En este tutorial vamos a ver como cambiar ciertos aspectos de páginas individuales en el tema DIVI.

Por defecto, DIVI nos coloca un color de fondo de página, color de fondo del menu, … que es igual para todas las páginas de nuestros proyecto. Pero que pasa si nos interesa que un determinado apartado de nuestra web tenga un color de fondo diferente por ejemplo?

El truco estaría en usar la herramienta para desarrolladores de google Chrome.

Por defecto, WordPress asigna una id de página única para cada una. Sabiendo dicha ID y utilizando el CSS personalizado de DIVI, podremos hacer cambios sobre esa página en concreto.

Para abrir la herramienta para desarrolladores de google, una vez dentro de la página pulsaremos sobre F12, con lo cual se nos abrirá dicha herramienta, y aquí es donde deberemos identificar la Id.

Herramienta desarrolladores Google Chrome

Una vez identificada, podríamos por ejemplo cambiar el color de fondo de dicha página con el siguiente CSS:

.page-id-359 .et_pb_section
{ background-color: blue !important;
}

En este ejemplo, el color de fondo de la página sería azul.

En este otro ejemplo cambiaremos el color de fondo del área del menú:

.page-id-359 .et_menu_container
{ background-color: blue !important;
}

Aquí es donde habría que colocar el código:

CSS Divi

Espero que este mini tutorial os haya sido de utilidad.

Un saludo

Share This
A %d blogueros les gusta esto: