En este post vamos a ver los diferentes diseños de header (encabezamiento, parte superior de la página web) disposición de logo y elementos de menú que podemos realizar con WordPress y la plantilla Divi. Para poder utilizar todas las funcionalidades que voy a comentar debemos tener por lo menos la versión 2.6 de la plantilla Divi para WordPress.

El diseño del encabezamiento o header será igual en todas las páginas del sitio web.

En este post puedes ver opciones de diseño del footer

 

Ahora 20% de descuento Plantilla DIVI

SUPER DESCUENTO DIVI

 

->PLAN YEARLY ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra +3 plugins.

Este es un plan de renovación anual. Es decir, para seguir disfrutando de las novedades de Elegant Themes debes renovar el plan de año en año. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 89$ + IVA, pero con el descuento del 20% se te quedará en 70 $ + IVA

NOTA: Si al final de un año no renuevas el plan Yearly Access, podrás seguir utilizando perfectamente tu plantilla en las webs que la hayas instalado. Pero, no podrás actualizarlas.

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $70 con el descuento ya aplicado.

DESCUENTO 20% PLAN YEARLY ACCESS

 

 

->PLAN LIFE TIME ACCESS: El plan Yearly Access incluye la plantilla Divi + Plantilla Extra + 3 plugins.

Este plan se paga una única vez. Es decir, NO hay que renovarlo de manera anual. Podrás disfrutar de los recursos de Elegant Themes de por vida. La licencia te permite usar cualquier plantilla o plugin de Elegant Themes en todas las páginas web que quieras. El precio de este plan es de 249$ + IVA, pero con el descuento del 20% se te quedará en 199$ + IVA

NOTA: Si contratas el plan Life Time Access, en 3 años habrías amortizado el coste de renovaciones del plan Yearly Access

Nota: Si compras desde América (México, Colombia, Argentina, etc) no se te aplicará IVA. Es decir, el precio final será de $199 con el descuento ya aplicado.

DESCUENTO 20% PLAN LIFE TIME ACCESS

 

 

DISFRUTA DE TODOS MIS CURSOS PREMIUM POR SOLO 10€/MES


VER CURSOS

 

 

 

ÍNDICE DEL POST

 

1.- Diseño de menú flotante, fijo o sticky (pegajoso) VS Diseño de menú tradicional con WordPress y Divi

2.- Diseño de menú NO Sticky con logo centrado y de grandes dimensiones con Divi

3.- Diseño de menú con logo situado a la izquierda, de la manera tradicional

4.- Diseño de menú con logo centrado situado encima del menú con Divi y WordPress

5.- Diseño de menú con logo en la línea de los elementos del menú con WordPress y Divi

6.- Diseño de menú tipo Hamburguer (Hamburguesa) deslizante con WordPress y la plantilla Divi

7.- Diseño de menú hamburguer (hamburguesa) a pantalla completa (full screen header) con WordPress y Divi

8.- Ocultar navegación hasta que haya desplazamiento

 

 

Con la llegada de DIVI 4.0, además de las opciones de header por defecto que vamos a ver en este post ya es posible crear también headers personalizados con el Divi Builder, gracias a la herramienta denominada el Divi Theme Builder. Después de leer este post, te recomiendo que heches un vistazo a este: ->>>DIVI 4.0

 

 

1.- DISEÑO DE MENÚ FLOTANTE, FIJO O STICKY (PEGAJOSO) VS DISEÑO MENÚ TRADICIONAL CON WORDPRESS Y DIVI

 

La plantilla Divi para WordPress nos permite dos grandes tipos de header o encabezamiento para una página web y/o blog:

 

 

1.1.- Diseño de header Flotante, fijo o sticky (Pegajoso):

 

En este tipo de encabezamiento de página web, el menú queda fijo cuando hacemos scroll hacia abajo.

Es decir, aunque bajemos con la rueda del ratón o con las barras de scroll del navegador, el menú no desaparecerá. El menú y el logo siempre permanecerán visibles.

Este tipo de header está bastante de moda, pues mejora la usabilidad del usuario, ya que éste siempre tiene a mano el menú de navegación de la web, que es “el plano” del sitio a través del cual el usuario se guía para dirigirse a las zonas fundamentales de la web.

 

Añade más de 90 nuevas funcionalidades a la plantilla Divi con el fabuloso plugin: Divi Booster

 

El inconveniente que tiene este tipo de header es que disminuye el espacio de visión disponible para la web. Además hoy en día todos tenemos barras, favoritos y otros elementos en el navegador que reducen aún más el espacio de visión disponible para el usuario. Por este motivo es fundamental que la altura que ocupa el sticky menú sea lo menor posible. Luego veremos que la plantilla Divi nos permite incluso eliminar el logo cuando se produce el scroll de sobre la página, disminuyendo de esta manera la altura del sticky menú.

 

Si lo que quieres ver son las opciones de Divi para su header y menú en móviles, mira este post: header y menú en móviles con Divi

 

En la plantilla DIVI para WordPress por defecto está activada la opción de menú sticky o menú pegajoso.

En el siguiente apartado veremos cómo podemos desactivar esta opción.

 

 

Aprende a crear una barra de menú transparente con WordPress y Divi, sus ventajas e inconvenientes.

 

 

1.2.- Diseño de header con menú tradicional (no sticky):

 

En este tipo de menú cuando el usuario hace scroll sobre cualquiera de las páginas del sitio web, el menú desaparece de la vista de éste. Para poder acceder al menú será necesario volver a hacer scroll, pero esta vez hacia arriba. Al llegar a la parte superior de la página el usuario volverá a ver el menú de navegación del sitio web.

SUPER DESCUENTO DIVI

 

Desactivar el menú sticky (Pegajoso) en Divi:

 

Como antes he dicho, por defecto en la plantilla Divi de WordPress viene activado el menú flotante, fijo o sticky (pegajoso).

Para desactivarlo debemos ir a: “Panel de administración > Divi > Opciones del tema”.

En la pestaña “General” tenemos una opción denominada: “Barra de navegación fija”. Aquí debemos poner el selector en “Desactivar”.

A continuación bajaremos a la parte inferior de la página y pulsaremos el botón de “guardar cambios”

 

opción de menú flotante con WordPress

Configurar la opción de menú pagajoso (sticky) con WordPress y Divi

 

 

 

2.- DISEÑO MENÚ NO STICKY CON LOGO CENTRADO Y DE GRANDES DIMENSIONES CON DIVI

 

En determinados tipos de páginas web a los diseñadores les gusta poner un logo de grandes dimensiones en la cabecera o header de las páginas del sitio web.

Para establecer el logo en la parte superior debemos subir un logo de grandes dimensiones. Dependiendo de la proporción puede ser de diferentes dimensiones. Con las proporciones de mi logo las máximas dimensiones posibles son aprox. de 870×261 px.

 

Como poner un logo centrado y grande con WordPress

Logo de grandes dimensiones centrado

 

 

Subir logo

 

Para subir el logo debes ir a: “panel de administración > Divi > Opciones del tema”. Ahora en la pestaña general haremos clic en “Subir” en el apartado “Logo”. A continuación pulsaremos el botón de “Guardar cambios”.

 

 

Poner logo centrado

 

Para poner el logo centrado encima de los elementos del menú iremos a: “panel de administración > Divi > Opciones del tema”.

Ahora iremos a: “Cabecera y navegación > Formato de cabecera”. Aquí elegiremos la opción: “Estilo de cabecera -> Centrado”. A continuación pulsaremos el botón de “Guardar y publicar” de la parte superior.

 

Centrar logo con la plantilla Divi de Elegant Themes

Poner logo centrado en el header

 

 

Poner el logo a máxima dimensión:

 

Para poner el logo al tamaño más grande en Divi iremos a: “panel de administración > Divi > Personalizador de temas”.

Ahora iremos a: “Cabecera y navegación > Barra de menú principal”.

En el apartado: “Menú altura” seleccionaremos el máximo y en “Logo max altura” también seleccionaremos el máximo. A continuación pulsaremos el botón de “Guardar y publicar”.

Nota: si queremos aumentar un poco el margen entre el logo y los ítems de menú tendremos que recudir un poco el tamaño del logo con la opción “Logo max altura”.

 

Poner el logo en máximo tamaño con WordPress

Máximo tamaño para el logo

 

 

Como este tipo de logos ocupan mucha altura y disminuyen mucho el área de visión de la web tenemos dos opciones:

 

i.- Menú NO Sticky: sería necesario utilizar un menú del tipo NO sticky o pegajoso para que al hacer scroll el encabezamiento desaparezca y el campo de visión sea total. En el punto 1.2 puedes ver el proceso para configurar el menú como no pegajoso.

ii.- Menú sticky sin logo: si queremos poner el menú fijo, flotante o sticky (pegajoso) debemos establecer que el logo desaparezca cuando se comience a hacer scroll. De esta manera el menú quedará fijo, pero sin el logo que es lo que ocupa más espacio.

Para establecer que el logo desaparezca cuando se hace scroll debemos ir a: “panel de administración > Divi > Personalizador de temas”.

Ahora iremos a: “Ajustes de navegación fija” y marcaremos el check box: “Ocultar imagen de logotipo”.

Ahora pulsaremos el botón “Guardar y publicar” situado en la parte superior.

 

Ocultar logo en el menú sticky o fijo

Ocultar logo en el menú flotante o pegajoso

 

 

 

Con la llegada de DIVI 4.0, además de las opciones de header por defecto que vamos a ver en este post ya es posible crear también headers personalizados con el Divi Builder, gracias a la herramienta denominada el Divi Theme Builder. Después de leer este post, te recomiendo que heches un vistazo a este: DIVI 4.0

 

 

3.- DISEÑO DE MENÚ CON LOGO SITUADO A LA IZQUIERDA DE LA MANERA TRADICIONAL

 

El tipo de header o encabezamiento que viene configurado por defecto en la plantilla Divi para WordPress es con el logo a la izquierda y los elementos del menú a la derecha.

Este diseño de encabezamiento puede ser flotante o no flotante.

En el apartado 1.2- hemos visto donde están las opciones para configurar un menú flotante o  fijo, también denominado sticky (pegajoso)

Seleccionar el diseño de header tradicional con WordPress y Divi

 

Para seleccionar este tipo de diseño de header debemos ir a: “panel de administración > Divi > Personalizador de temas”

A continuación iremos a “cabecera y navegación > Formato de cabecera”. Aquí seleccionaremos: “Por defecto”.

A continuación pulsa el botón de “Guardar y publicar”

Nota: si no se ve el header correctamente ve a “Cabecera y navegación > Barra de menú principal” y modifica los parámetros de Menú altura y Logo Max altura.

 

distribución de logo habitual en webs

Menú con logo a la izquierda e items de menú a la derecha

 

DESCUENTO DIVI

 

4.- DISEÑO DE MENÚ CON LOGO CENTRADO SITUADO ENCIMA DEL MENÚ CON DIVI Y WORDPRESS.

 

En el apartado 2.- hemos visto como configurar un encabezamiento con el logo centrado y situado por encima de los elementos del menú.

Además en dicho apartado hemos visto cómo poner un logo de grandes dimensiones con la plantilla Divi.

 

Para la parte que nos ocupa en este punto que es solo poner el logo centrado por encima de los elementos del menú en la plantilla WordPress Divi tendremos que:

Ir a: “panel de administración > Divi > Opciones del tema”.

Después iremos a “Cabecera y navegación > Formato de cabecera”. Aquí elegiremos la opción: “Estilo de cabecera -> Centrado”. Ahora haremos clic sobre el botón de “Guardar y publicar” situado en la parte superior.

 

Logo centrado en WordPress y situado por encima del menú

Logo centrado en la cabecera de la web por encima del menú

 

 

 

5.- DISEÑO DE MENÚ CON LOGO EN LA LÍNEA DE LOS ELEMENTOS DEL MENÚ CON WORDPRESS.

 

Otra posible cabecera o header en Divi es poner el logo centrado en encabezamiento pero en línea con los elementos del menú. Es decir, el logo aparecerá en el centro del menú con elementos a la izquierda y derecha.

 

Logo centrado en la linea de menú con WordPress

Logo en línea con los elementos del menú y centrado

 

Para configurar este tipo de cabecera debes ir a: “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Formato de cabecera “. Ahora, en “Estilo de cabecera” debes elegir: “Logotipo centrado en línea”

 

Si quieres hacer el menú tipo sticky (pegajoso) puedes combinarlo haciendo que el logo desaparezca cuando se comience a hacer scroll. Para ello deberás ir a: “panel de administración > Divi > Personalizador de temas > Cabecera y navegación > Ajustes de navegación fija”. Si marcas la opción: “Ocultar imagen del logotipo” esta desaparecerá cuando se comience a hacer scroll.

Con la llegada de DIVI 4.0, además de las opciones de header por defecto que vamos a ver en este post ya es posible crear también headers personalizados con el Divi Builder, gracias a la herramienta denominada el Divi Theme Builder. Después de leer este post, te recomiendo que heches un vistazo a este: DIVI 4.0

 

 

6.- DISEÑO DE MENÚ TIPO HAMBURGUER (HAMBURGUESA) DESLIZANTE CON WORDPRESS Y DIVI (SLIDE –IN HEADER)

 

Los menús tipo h