Imágenes antes del menú de Divi

por | Oct 12, 2017 | CSS, DIVI (Elegant Themes), Tutoriales, Wordpress

Logo-CSS3

En muchas ocasiones me he encontrado con la pregunta de como se podría colocar una imagen antes del menú de DIVI. Salvo que tengáis el fabuloso plugin DIVI Booster, el cual recomiendo por la gran cantidad de opciones que trae para vitaminar DIVI, os comparto unas líneas de código CSS3, con las cuales vamos a lograr este efecto.

De momento, este tutorial valdría para todas aquellas páginas que no tienen el menú de navegación fijo, ya que la imagen permanecería siempre en pantalla al igual que el menú.

La pantalla de partida es la que nos presenta DIVI, el menú arriba, sin posibilidad de momento de colocar ningún elemento por encima, salvo programando (que para eso no estamos aquí).

Yo en este caso he usado una imagen con unas dimensiones de 1920x250px, la cual la colocaré justo encima del menu.

Para ello bastaría con ir al CSS personalizado y colocar las siguientes líneas de código:

#main-header::before
{
content: url(http://localhost/tutoriales/wp-content/uploads/2017/10/encabezado-1.jpg);
display: flex;
justify-content: center;
align-items: center;
}

La url de la imagen, tendréis que cambiarla por la vuestra (obviamente).

El resultado sería este:

Hasta aquí todo bien, pero os preguntaréis, y si quiero poner una imagen diferente en cada página?

Pues lo único que debéis hacer es cambiar el código de arriba y colocarlo en vez de en CSS personalizado en la siguiente opción que encontraréis en las diferentes páginas que creéis.

Solo deberéis cambiar las url´s de las imágenes que queréis que aparezcan en las diferentes páginas.

Bueno, como siempre, espero que este mini tutorial os haya sido de utilidad y comentéis que tal os ha parecido.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
Share This
A %d blogueros les gusta esto: