Habrás visto en muchas páginas web como en la parte superior de la home o página de inicio aparece una imagen a tamaño completo (imagen de fondo) y el menú transparente se muestra totalmente integrado en esa imagen.
Es decir, la barra de menú aparece transparente o semi transparente y deja ver la imagen de fondo detrás de dicha barra de menú.
La imagen de fondo tiene anchura completa y llega hasta la parte superior de la web.
Este efecto está bastante de moda. Provoca que el visitante cuando accede a la página de inicio de la home vea una imagen que le envuelve y sumerge en la web. Lógicamente, mucho más que una imagen cortada e interrumpida con una barra de menú.
DESCUENTOS PLANTILLA DIVI
ÍNDICE MENÚ TRANSPARENTE
- 1.- Página de inicio con una barra de menú transparente e imagen de fondo
- 2.- Formas de implementar barra menú transparente con imagen de fondo en Wordpress
- 3.- Cómo poner el menú transparente o semitransparente en todas las páginas del sitio web con DIVI
- 4.- Cómo poner el menú transparente solo en la página de inicio con Divi
Una imagen vale más que 1000 palabras.
Vamos a ver dos ejemplos de páginas de inicio con la barra de menú transparente:
Cómo habéis visto en los dos ejemplos anteriores:
i.- Integración menú: la integración del menú en la imagen es total. La barra de menú no corta la imagen ni la sensación que transmite dicha imagen.
ii.- Imagen completa: la imagen abarca toda la visualización del navegador y no es interrumpida por nada.
iii.- Limpieza y sencillez: claridad, sencillez, limpieza son algunas de las sensaciones que transmiten este tipo de webs con la barra de menú transparente.
iv.- La imagen: en este tipo de webs es fundamental utilizar una imagen profesional. La imagen es lo que ve el visitante en un primer momento. La imagen debe transmitir una imagen profesional, y por eso debe ser una imagen bien elegida y con un acabado profesional (puede ser de un banco de imágenes).
También es posible poner una barra de menú semitransparente. Este tipo de barra de menú cortará muy levemente la imagen integrándose también muy bien con ella.
Existen 2 formas fundamentales de implementar una barra de menú transparente con una imagen de fondo en WordPress.
Una opción es crear un menú transparente o semitransparente para todo el sitio web.
Poder hacer esto con tu wordpress va a depender de la plantilla que estés utilizando. La plantilla te debe poder permitir personalizar la opacidad de la barra de menú. Además, la imagen que pongas en la parte superior de cada página debe ascender y colocarse detrás de la barra de menú.
Nosotros utilizaremos la plantilla Divi, como no podía ser de otra manera, en mi opinión la mejor plantilla para WordPress.
El pequeño o gran inconveniente que tiene este método para poner un menú transparente en una página web es el siguiente:
El menú transparente aparecerá en todas las páginas del sitio web. Habitualmente se utiliza una imagen de fondo algo oscura para poder contrastar con unos ítems o elementos de menú de color claro.
Siempre que en todas las páginas del sitio web pongamos una imagen algo oscura de cabecera de la página no habrá problema. Pero si no ponemos imagen, el habitual fondo blanco de la web hará que los ítem o elementos de menú no se aprecien.
En las páginas de wordpress lo podemos solucionar poniendo una imagen en la parte superior de cada página. Pero, en las entradas de blog o páginas de categorías del blog no veo solución sencilla.
Este problema se puede solucionar poniendo una barra de menú oscura y semitransparente. En el siguiente ejemplo puedes ver la utilización de una barra de menú oscura, semitransparente y con itmes de menú color blanco con la plantilla Divi.
En la siguiente imagen puedes ver un ejemplo de página con menú oscuro semitransparente con la plantilla Divi
Header o cabecera semitransparente con WordPress y Divi
En la siguiente imagen puedes ver un ejemplo de la web anterior, pero como quedaría en una entrada de blog.
Observa como en el caso de que la barra de menú fuera totalmente transparente, con el fondo blanco no habría posibilidad de que se vieran los ítems de menú.
Header semitransparente en una entrada de blog wordpress
Otra opción diferente a la anterior, que soluciona totalmente la problemática mencionada en el anterior punto, sería la de crear un sitio web con un menú normal y una página de inicio con un menú transparente o semitransparente.
Como podrás imaginar, las plantillas para wordpress no nos permiten crear un tipo de menú para determinadas páginas y otro tipo de menú para otras.
Para implementar esta solución debemos utilizar un diseño de página sin header para la página de inicio, y añadir con un page builder una barra de menú transparente (solo en la página de inicio)
En este caso la home o página de inicio tendrá este menú transparente con su imagen de fondo, pero el resto de las páginas de la web tendrán un menú normal no transparente.
Poder seleccionar un diseño sin heder para la página de inicio va a depender de la plantilla que estés utilizando. La posibilidad de añadir una barra de menú transparente al contenido de la página va a depender del page builder que estés utilizando.
En el caso de la plantilla Divi, podremos hacer ambas cosas. En la página tendrás que elegir un diseño tipo “Blank page” y luego utilizar en el contenido el módulo menú de anchura completa.
Una desventaja de esta opción es que no podremos poner el menú sticky, o flotante. Es decir, que al hacer scroll el menú de navegación se mantenga en la parte superior de la página.
Para personalizar el diseño de la barra de menú con la plantilla Divi, iremos a: “Divi > Personalizador de temas”. A continuación, iremos a: “Cabecera y navegación > Barra de menú Principal”
DESCUENTOS DIVI
Verás un selector denominado: “COLOR DE FONDO”. En este selector tienes varias opciones, de las cuales nos van a interesar dos:
i.- Código Color: En la parte superior izquierda tenemos un campo de texto en el cual debemos introducir el código HTML del color que queremos seleccionar para la barra de menú, como puedes ver en la siguiente imagen.
ii.- Transparencia u opacidad: en la parte derecha puedes ver un selector de opacidad. La mayor transparencia se conseguirá arrastrando el selector hacia abajo, mientras que la menor transparencia (mayor opacidad) se consigue arrastrando el selector hacia arriba.
Selector de opcidad-transparencia de colores con wordpress y Divi
También tienes una etiqueta denominada “COLOR DE TEXTO” en el cual podrás establecer el color que quieres aplicar a los elementos o ítems del menú.
Al aplicar algo de transparencia al menú, si existe una imagen bajo dicho menú, ascenderá y se colocará detrás de la barra de menú. Según el grado de opacidad o transparencia asignada al menú, se apreciará más o menos la imagen de fondo.
En el caso de que estés utilizando la barra de menú secundaria, que es la barra que aparece en al parte superior de la web, puedes hacer lo mismo personalizando la transparencia de dicha barra.
Para ello deberás ir a: “Divi > Personalizador de temas > Cabecera y navegación > Barra de menú Secundario”.
Cómo ya he comentado en el apartado 2.2, otra opción sería la de poner el menú transparente o semitransparente solo en la página de inicio o home.
Vamos a ver cómo hacer esto con la plantilla Divi.
4.1.- Seleccionar el diseño o plantilla Blank Page
Lo primero que haremos, será elegir un diseño tipo “Blank Page” para la página de inicio. Esto supone, que la página de inicio (en este caso) no dispondrá ni del header, ni del footer del resto de la web.
Esto implica, que tendremos que generar el header y el footer con el page builder de la plantilla Divi. Es decir, tendremos que crear el header y el footer con el Divi builder.
Para seleccionar el diseño tipo “Blank Page” para una página en WordPress, accederemos en primer lugar a la página.
A continuación, iremos al bloque: “Atributos de página”. En el selector “Plantilla”, seleccionaremos: “Blank Page” y guardaremos
Diseño tipo blank page, eliminar el header y footer de la página
Una vez eliminado el heder o cabecera por defecto de la web en la página de inicio, utilizaremos el módulo menú de anchura completa para añadir una nueva cabecera.
El módulo Menú de anchura completa irá incluido en una nueva sección de anchura completa en la cual pondremos como fondo la imagen que queremos que se vea tras el menú.
La estructura podría ser la siguiente:
La estructura de la imagen anterior está formada por una sección de anchura completa con la imagen de fondo. En el interior de la sección tenemos 2 módulos: el módulo menú de anchura completa y el módulo título de anchura completa.
El modulo de Divi de título de anchura completa, nos permite añadir el título, el subtítulo y el botón que puedes ver en la imagen anterior (también permite añadir el texto, incluso imágenes).
La estructura utilizada la puedes ver en la siguiente imagen:
Sección de anchura completa ( Módulo menú de anchura completa + Módulo título de anchura completa)
Vamos a ver ahora, que deberemos hacer en cada uno de los elementos antes mencionados:
i.- Sección de achura completa: crearemos una sección de anchura completa y la añadiremos a la parte superior de la página. En la sección pondremos la imagen de fondo que queremos que se vea tras la barra de menú transparente.
Para colocar la imagen de fondo, accederemos a la configuración de la sección y en la pestaña contenido haremos scroll hasta el apartado: Fondo
En el apartado: Fondo, seleccionaremos la pestaña de imagen y subiremos la imagen que queremos utilizar como fondo.
ii.- Menú de anchura completa: en el interior de la sección de anchura completa anterior añadiremos el módulo menú de anchura completa.
En el apartado: “Contenido”, de la configuración del módulo seleccionaremos:
Menú: elegiremos el menú que queremos mostrar
Fondo: seleccionaremos un color y el grado de opacidad (transparencia 100% o semitransparente)
En el apartado: “Diseño”, de la configuración seleccionaremos:
Orientación del texto (Enlaces): seleccionaremos la ubicación de los ítems o elementos del menú
Menú texto: en este apartado personalizaremos el diseño de los ítems o elementos del menú: Fuente de texto, color de texto, tamaño texto, etc.
iii.- Título de anchura completa (Opcional): este módulo nos permitirá añadir título, subtítulo, texto, botones e imágenes.
En el ejemplo hemos añadido un título, un texto y un botón.
Con el relleno personalizado (abajo) podemos ampliar la visibilidad de más altura de imagen (imagen de fondo).
Soy Blogger y formador profesional. Me gustaría que este blog te sirviera para conocer más de cerca el mundo del diseño web y de WordPress. Mi proyecto online es una plataforma de formación online tipo membership site, denominada cursotiendaonline.com donde podrás acceder a todos los cursos por solo 10 €/mes
Hola. Pues mi problema es que cuando quiero dar transparencia a las barra o cabecera de menú principal, esta desaparece completamente al igual que el menú secundario y el texto. He deshabilitado todos los plugins por si existiese algún problema con alguno de ellos pero nada, no se soluciona el problema. Alguien sabría qué podría ser?
Hola Joaquín
Tengo el menú transparente en todas mis páginas y no tengo problema en el blog porque diseñé las entradas para que tuvieran también una cabecera.
El problema me lo encuentro en versión móvil, que al pulsar sobre la hamburguesa el menú es transparente y los textos en blanco (como en el menú de escritorio) y no encuentro opciones para personalizar los colores del menú móvil en Divi.
Muchas gracias
Un saludo
Buenas,
Mira en: «Divi > Personalizador de temas > Estilos para dispositivos móviles > Menú para dispositivos móviles»
un saludo
Justo ahí es donde fui.
El problema está en que si pongo que el fondo del menú es blanco, me pone una barra blanca encima de toda la web, no lo aplica solo sobre el desplegable.
Así que imagino que toca pelearse con el CSS no?
O es algo que se podría solucionar por ejemplo con Divi Booster?
Comprueba si esa barra aparece realmente cuando se visualiza la web en un dispositivo móvil real (no estando logueado en la web) y es solo problemilla de la previsualización.
Nada 🙁 Aparece esa línea blanca en la cabecera
No se que puede ser, pero lo cierto es que a mí no me aparece en las pruebas que he hecho.
¿tienes actualizada la plantilla?
Hola Joaquín,
Muy interesante tu tutorial, pero no consigo ver cómo poner el logotipo ahí, salvo que no sea metido a la fuerza como código html, ¿cómo lo has hecho tú?
Gracias
Aunque si lo metes como título y sólo usas el cuadro de texto…
Buenas,
Normalmente meto el logo debajo del menú con otro módulo diferente (en caso de usar el módulo menú de anchura completa). Pero si quieres que aparezca en el mismo menú, lo único que se me ocurre es escribir el código html de llamada a la imagen en un enlace personalizado del menú (en el texto del menú) a ver si funciona, ya que ese campo acepta algo de html.
Hola Joaquin,
Muy interesantes siempre tu post y demas publicaciones.
Estoy documentandome con la plantilla divi para ofrecer un tutorial en un centro cívico, y me gustaria hacerte una consulta.
por defecto, en las página de entradas del blog en divi, sale el footer básico que trae consigo la plantilla.
Sin embargo, como bien sabes y tu tambien veo que pones en practica, muchas veces es más práctico crear tu propio footer con Secciones DIVI.
También he comprobado, que aunque crees un Footer con secciones de Divi en modo visual, este tipo de secciones no se pueden incluir a la manera que lo hace divi desde el constructor visual en la página de entradas.
Podrías explicarme cual es tu método? o si lo tienen publicado (No lo he encontrado) facilitarme el link.
Muchas gracias!
Dani.
Hola Daniel,
En este momento no hay una opción sencilla para añadir un footer personalizado en las entradas de blog utilizando la plantilla Divi.
Pero si hay métodos (tocando código) para añadir un footer personalizado a toda la web. Mira este post a ver si te sirve de ayuda:
Replace the Default Footer with a Divi Builder Footer Saved in Your Divi Library