Hoy en día, gran parte de las visitas que se realizan a páginas web están realizadas a través de dispositivos móviles. Por este motivo, estamos en la obligación de cuidar la visualización de la web en móviles y tabletas.

Cómo seguramente ya sabes, el page builder de Divi nos permite mostrar los diferentes elementos (secciones, filas y módulos) atendiendo al dispositivo en que se mostrará (móviles, tablets y escritorio).

Pero en este caso nos vamos a centrar exclusivamente en una parte fundamental, que es el header y el menú, pero solo en lo que se refiere a la visualización en dispositivos móviles.

Vamos a ver cómo se muestran en móviles los diferentes tipos de header o cabeceras de la plantilla Divi. Veremos que opciones de personalización nos incluye Divi por defecto, cómo hacer un menú colapsable o desplegable con Divi para móviles, cómo hacer el menú flotante en móviles, opciones de personalización del menú o header en móviles con el plugin Divi Booster y Quad Menú.

Con toda esta información podrás crear un header y un menú optimizado para dispositivos móviles con tu plantilla Divi y WordPress.

 


 
 

 

 

 

1.- Diferentes diseños header o cabeceras en móvil con Divi

 

Según el tipo de estilo de cabecera o diseño de header seleccionado en la plantilla Divi, tendremos diferentes diseños de cabecera o header resultantes en el móvil.

Te recuerdo que los estilos de cabecera o header los puedes personalizar en: “Divi > Personalizador de temas > cabecera y navegación > Formato de cabecera”.

En este post tienes toda la info sobre los diferentes tipos de header o cabeceras con la plantilla Divi: Tipos de header con Divi

En el post que te acabo de indicar tienes toda la info sobre los estilos de header en escritorio. Vamos a ver ahora, en este post, cómo se visualiza cada uno de estos diseños en dispositivos móviles:

 

Diseños de header o cabecera en móviles con Divi

Diseños de header en móvil según el estilo de cabecera elegido en Divi

 

i.- Estilo de cabecera por defecto: Como puedes ver en la anterior imagen, el tipo de estilo de cabecera: “Por defecto” en móviles muestra el logo e icono hamburguesa en la misma línea + la lupa de búsqueda.

Nota: la lupa la puedes desactivar desde: “Divi > Personalizador de temas > cabecera y navegación > Elementos de cabecera > Mostrar icono de búsqueda”.

ii.- Estilos centrado y logotipo centrado en línea: Ambos estilos de cabecera o header se muestran en dispositivos móviles de la siguiente manera: logo en la parte superior de la cabecera e icono tipo hamburguesa debajo con la etiqueta: “seleccionar página”.

iii.- Estilos Deslizar y pantalla completa: En ambos estilos, en móviles, queda el logo y el icono tipo hamburguesa en una misma línea (sin ninguna etiqueta de texto). En caso de disponer de la barra de menú secundario, en este tipo de cabeceras no se mostraría en móviles.

 

 

2.- Opciones de personalización por defecto del header / menú en móviles con Divi

 

En la plantilla Divi disponemos de unas pocas opciones específicas de personalización del header o cabecera en dispositivos móviles.

Para verlas iremos a: “Divi > Personalizador de temas > Estilos para dispositivos móviles > Menú para dispositivos móviles”.

 

i.- Ocultar imagen de logotipo: si marcamos esta opción, el logotipo no se mostrará en la cabecera en móviles ni tablets (si se verá en escritorio).

ii.- Color de texto: cambiamos el color del texto de los elementos del menú en móviles y tabletas que se muestran al hacer clic en el icono tipo hamburguesa. También cambiamos el color del propio icono tipo hamburguer, y del texto: “Seleccionar página” en caso de mostrarse.

iii.- Color de fondo: cambiamos el color de fondo de la cabecera y el menú desplegable en móviles y tablets.

 

 

3.- Menú Divi en móviles desplegable o collapse

 

Por defecto el menú en la plantilla Divi muestra en móviles y tablet todos los elementos desplegados (elemento principales y subelementos del menú). Es decir, que los subelementos que dependen de otros, se muestran directamente en dispositivos móviles sin tener que hacer clic en los elementos principales del menú.

Si tienes muchos elementos y subelementos en el menú, es posible que te aparezca un menú en móviles demasiado largo.

Por ejemplo, el menú de mi web, que como puedes ver en la siguiente imagen puede quedar demasiado largo cuando se ve en dispositivos móviles. Además, en la imagen solo se ve un trozo del menú, aún queda más.

 

desplegar menú en móviles con la plantilla divi, menu colapsable

Menú desplegado divi en dispositivos móviles

 

Vamos a añadir un código a Divi para implementar un menú desplegable en móviles. Es decir, un menú que muestre solo las categorías principales y un icono “+” en los elementos del menú que sean desplegables, en dispositivos móviles y tablets. Una vez desplegados, mostrará un icono “x” para volver a plegarlos

El inconveniente de esto es que los elementos principales que tengan subelementos serán solo elementos de apoyo y no podrán ser páginas reales. Esto es debido a que no se podría acceder a dichas páginas, ya que al hacer clic sobre uno de estos elementos se desplegarán otros, pero no podremos acceder a páginas asociadas con estos elementos.

Para convertir tu menú Divi en móvil en un menú desplegable, colapsable o collapsible (inglés) copia y pega el siguiente código en: “Divi > Opciones del tema > Integration”, en el área de texto con la etiqueta: “Agregar código al <body> (bueno para los códigos de seguimiento, tales como Google Analytics)”.

<style type="text/css">
#main-header .et_mobile_menu .menu-item-has-children > a { background-color: transparent; position: relative; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-family: 'ETmodules'; text-align: center; speak: none; font-weight: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; position: absolute; }
#main-header .et_mobile_menu .menu-item-has-children > a:after { font-size: 16px; content: '\4c'; top: 13px; right: 10px; }
#main-header .et_mobile_menu .menu-item-has-children.visible > a:after { content: '\4d'; }
#main-header .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; transition: all 1.5s ease-in-out;}
#main-header .et_mobile_menu .visible > ul.sub-menu { display: block !important; visibility: visible !important; }
</style>

<script type="text/javascript">
(function($) {

function setup_collapsible_submenus() {
var $menu = $('#mobile_menu'),
top_level_link = '#mobile_menu .menu-item-has-children > a';

$menu.find('a').each(function() {
$(this).off('click');

if ( $(this).is(top_level_link) ) {
$(this).attr('href', '#');
}

if ( ! $(this).siblings('.sub-menu').length ) {
$(this).on('click', function(event) {
$(this).parents('.mobile_nav').trigger('click');
});
} else {
$(this).on('click', function(event) {
event.preventDefault();
$(this).parent().toggleClass('visible');
});
}
});
}

$(window).load(function() {
setTimeout(function() {
setup_collapsible_submenus();
}, 700);
});

})(jQuery);
</script>

 

Este código ha sido tomado del blog oficial de Elegant themes

 

 

4.- Header /Menú en móvil, fijo o flotante con Divi

 

Como habrás podido observar, el header o encabezamiento de la web en dispositivos móviles nunca es flotante.

Cuando hablamos de un header flotante me refiero a un encabezamiento o header que permanece fijo y visible en la parte superior mientras hacemos scroll hacia la parte inferior de la web.

En otro post vimos cómo se podía seleccionar que el header o encabezamiento de la web con la plantilla Divi fuera flotante o sticky o no lo fuera-> Diseños de header con Divi

Pero si te fijas, en cualquiera de los casos, el header en dispositivos móviles nunca es flotante o sticky. Esto, en mi opinión, tiene también su lógica. Con el menú flotante en móviles disminuimos la ventana de visualización y no disfrutamos de un menú de navegación a la vista, ya que las opciones del menú están sin desplegar.

En cualquier caso, si quieres que el header en móviles con Divi permanezca flotante al hacer scroll, copia y pega el siguiente código en: “Divi > Opciones del tema > General”, en el área de texto de con la etiqueta: “CSS Personalizado” (Si dispones de un tema hijo, también lo puedes poner en el archivo style.css del Divi hijo)

 

.et_non_fixed_nav ‪#‎main‬-header, .et_non_fixed_nav ‪#‎top‬-header, .et_fixed_nav #main-header, .et_fixed_nav #top-header {
position: fixed !important;
}

 

Este código está sacado de la página Styling the Divi mobile menú

 

 

5.- Cambiar color icono hamburguer en móviles con Divi

 

En el apartado 2 de este post vimos que desde “Divi > Personalizador de temas > Estilos para dispositivos móviles > Menú para dispositivos móviles”, opción “Color de texto” personalizábamos el color del texto de los ítems de menú y del icono tipo hamburguesa.

Pero ¿y si queremos que los ítems de menú tengan un color diferente al del botón o icono tipo hamburguesa?

Pues, tendremos que añadir el siguiente código CSS en: “Divi > Opciones del tema > General” y área de texto con etiqueta “CSS Personalizado” (Si tienes un tema hijo también puedes añadir el código en el archivo style.css)

 

/* Personalizar el color del botón desplegable del menú superior */
span.mobile_menu_bar.mobile_menu_bar_toggle::before {
color: #000000;
}

 

NOTA: puedes sustituir el color #000000 utilizado en el ejemplo por el color que quieras
Código tomado de la página: Personalizar el color del botón del menú hamburguesa

 

 

6.- Personalizar menú móvil de Divi con Divi Booster

 

El plugin Divi Booster, aparte de añadir un montón de opciones de personalización generales de la plantilla Divi, también añade una serie de opciones de header para móviles.

El precio del plugin es de 19 $ y lo puedes comprar desde aquí:

COMPRAR DIVI BOOSTER

Nota: tras hacer clic en el enlace, haz clic en el botón azul del lateral derecho “$19 – Buy now”

 

Aquí tienes más info sobre las opciones de personalización que añade el plugin Divi Booster a la plantilla Divi. Desde la página a la que se accede desde el enlace anterior, tienes otros enlaces a otras páginas específicas sobre Divi Booster.

 

Las opciones relativas a la personalización del menú en dispositivos móviles las puedes encontrar en: “Divi > Divi Booster > Header > Mobile Header” y son las siguientes:

 

i.- use an “app style” header layout on mobiles:  con esta opción haremos que la distancia entre logo e icono de hamburguesa con respecto a los extremos laterales de la web, sea constante. Además, cuando se despliega el menú, éste tendrá el ancho completo del dispositivo móvil. De esta manera conseguimos un header más consistente en dispositivos móviles

ii.- Hide the search icono on mobiles: con esta opción podremos ocultar el icono con forma de lupa en dispositivos móviles.

iii.- Add text before menu button (mobiles): con esta opción podremos añadir un texto que aparecerá a la izquierda del icono de menú tipo hamburguesa, excepto en con los estilos de cabecera: centrado y logotipo centrado en línea

 

añadir texto junto icono hamburguesa con divi booster

Texto “MENU” delante del icono hamburguesa para desplegar el menú en móviles con Divi

 

iv.- Mobile menú font size: tamaño de la fuente de texto de los elementos del menú en dispositivo móvil

v.- Hide secondary menú ítems in mobile menú: marcando esta opción eliminaremos del menú en móviles los ítems del menú asignados a la barra de menú secundario de Divi

vi.- Change centered menú “Select page” text: con esta opción podremos modificar el texto que aparece a la izquierda del icono tipo hamburguesa, en dispositivos móviles, cuando tenemos seleccionado el diseño de cabecera tipo “Centrado” o “Logotipo centrado en línea”. Por defecto el texto mostrado es: “Seleccionar página”

vii.- Change centered menú “Select page” background color: con esta opción podremos establecer un color de fondo personalizado al bloque “Seleccionar página” comentado en el apartado vi.

 

 

7.- Menú desplegable o Collapse para móviles con Quad Menú y Divi

 

Si utilizamos el plugin Quad Menú, además de crear un mega menú con WordPress y Divi, podremos disponer de un menú desplegable o collapse para dispositivos móviles.

Te recuerdo que, si utilizas la versión gratuita de Quad Menú y la plantilla Divi, también tendrás que instalar un plugin de integración Quad Menú con Divi.

En este post tienes todos los detalles sobre este interesante plugin y cómo implementarlo junto a la plantilla Divi: Mega menú wordpress con Quad Menu

 

 

Compártelo ya!!

RECIBE GRATIS CURSO WORDPRESS/DIVI Y MÁS:

 1.- CURSO WORDPRESS Y DIVI (22 vídeos)

2.- GUÍA PARA CREAR UNA PÁGINA WEB PROFESIONAL

3.- VÍDEO TRAINING, MIS PLUGINS IMPRESCINDIBLES WORDPRESS

4.- GUÍA TALLER SEO PARA WORDPRESS

Consentimiento

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.