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

 

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

 

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.

 

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


VER CURSOS

 

 

 

 

 

 

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.

SUPER DESCUENTO DIVI

 

 

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

SUPER DESCUENTO DIVI

 

 

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