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

 

 

 

 

1.- Página de inicio con una barra de menú transparente e imagen de fondo

 

Una imagen vale más que 1000 palabras.

Vamos a ver dos ejemplos de páginas de inicio con la barra de menú transparente:

 

Página de inicio con barra menú transparente

 

menú transparente en página de inicio o home wordpress

 

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.

 

 

2.- Formas de implementar barra menú transparente con imagen de fondo en WordPress

 

Existen 2 formas fundamentales de implementar una barra de menú transparente con una imagen de fondo en WordPress.

 

 

2.1.- Menú transparente en toda la web (depende de la plantilla)

 

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.

 

En este post puedes ver una mega guía de la plantilla Divi, la mejor 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.

 

En este post puedes ver como se gestiona el menú con WordPress

 

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 este post recorremos las opciones de Divi para visualización del menú y header en dispositivos móviles: Opciones divi móvil

 

En la siguiente imagen puedes ver un ejemplo de página con menú oscuro semitransparente con la plantilla Divi

 

menú semitransparente con wordpress y 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ú.

 

menú semitransparente en blog wordpress

Header semitransparente en una entrada de blog wordpress

 

 

2.2.- Menú transparente en la página de inicio solo (depende del page builder)

 

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.

 

En este post puedes ver todos los tipos o diseños de header de la plantilla Divi

 

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.

 

En este post aprenderás a manejar el Divi Builder, que es el maquetador visual de la plantilla Divi

 

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.

 

 

3.- Cómo poner el menú transparente o semitransparente en todas las páginas del sitio web con DIVI

 

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 transparencia colores con divi

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 este post aprenderás a crear un botón en el menú de la web con WordPress y Divi

 

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”.

 

 

4.- Cómo poner el menú transparente solo en la página de inicio con Divi

 

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

 

página blank page con wordpress y divi

Diseño tipo blank page, eliminar el header y footer de la página

 

 

4.2.- Módulo menú de anchura completa del Divi Builder

 

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:

 

modulo menu anchura completa transparente con divi

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