Lo más destacado del complemento Divi: Divi Mobile

Divi Mobile es un complemento de terceros para Divi que facilita la creación de menús móviles personalizados para los sitios web de Divi. Todas las configuraciones se encuentran en el personalizador de temas, por lo que puede ver una vista previa en vivo de los diseños de su menú móvil. Es un complemento fácil de usar y puede crear casi cualquier tipo de menú que pueda necesitar. En este punto destacado del complemento Divi, analizaremos las características de Divi Mobile para ayudarlo a decidir si lo necesita en su caja de herramientas Divi.

Menú Divi Mobile predeterminado

A modo de comparación, aquí está el menú móvil predeterminado de Divi. El menú cambia automáticamente para mostrar un menú de hamburguesas. Al hacer clic en el menú, se muestra un menú desplegable con todos los enlaces. Esto no se puede ajustar por separado del menú estándar.

Personalizador de temas

Se agrega un nuevo menú al personalizador de temas llamado Divi Mobile. Es azul oscuro con texto verde para que se destaque. Todos los ajustes se realizan dentro de este menú. Estoy usando el paquete de diseño de Asesor financiero.

En una vista móvil, como la vista de tableta en el ejemplo anterior, el menú se establece automáticamente en la configuración predeterminada de Divi Mobile. Incluye un menú de hamburguesas en blanco dentro de un círculo azul oscuro. Estoy flotando sobre el menú Divi Mobile, que ahora ha cambiado de color.

Al hacer clic en el menú de hamburguesas, se abre el menú, que se desliza desde un lado y cubre todo el lado de la pantalla. Abrí el menú en el personalizador de temas para mostrar las pestañas. Aparecerán otros elementos según las selecciones que elija. Veamos los principales ajustes.

Estilo y configuración del menú

Estilo de menú y configuración tiene varias opciones para seleccionar los menús. Las opciones de diseño incluyen el menú que aparece desde el exterior de la pantalla (la vista predeterminada), que se expande desde una forma y la navegación inferior. El estilo de menú de la pantalla exterior agrega animaciones abiertas y estilos completamente abiertos al menú. Cada uno de los tres diseños incluye diferentes opciones.

El ejemplo anterior muestra el mismo menú que el ejemplo anterior, pero he seleccionado Pantalla completa para el estilo del menú. Un modo de vista previa establece qué modo se muestra de forma predeterminada. Me gusta esto porque ilumina el fondo.

La expansión desde una forma cubre toda la pantalla comenzando en la esquina superior derecha. También se puede expandir desde la parte superior como un estiramiento hacia abajo. Esto agrega íconos sobre el fondo y coloca los enlaces fuera del fondo como lo tengo en el ejemplo anterior. Puede ajustar los colores y los iconos en otras configuraciones en otro menú llamado Configuración de estiramiento de círculo.

Bottom Navigation muestra iconos en la parte inferior de la pantalla. Esto se ajusta en otro menú llamado Configuración de navegación inferior.

Al ajustar el punto de interrupción, puede hacer que muestre el menú móvil en el escritorio.

Cabecera personalizada

El encabezado personalizado le brinda un control total sobre el encabezado. La primera sección es Apariencia del encabezado. Agregue un nuevo logotipo, ajuste su tamaño, ajuste el color de fondo, la longitud de la sombra, el radio de desenfoque, el color de la sombra, etc. Agregué un nuevo logotipo y cambié el color de fondo en este ejemplo.

La siguiente sección es Apariencia del encabezado en el desplazamiento. Establezca el menú en fijo, ajuste la altura, el tamaño del logotipo, la posición del icono de la hamburguesa y el color de fondo. Realicé cambios en cada una de estas configuraciones.

Los elementos del encabezado le permiten agregar elementos al encabezado y ajustar su posición, tamaño y color. Moví el logotipo a la derecha y lo puse un poco más bajo de lo normal (puede configurarlo tan bajo como desee para superponer el encabezado o el contenido). También agregué el carrito de compras de WooCommerce, habilité el ícono de búsqueda, lo coloqué a la izquierda, lo cambié a rojo y aumenté su tamaño.

Elija el menú de hamburguesas

Choose Burger Menu te ofrece muchas opciones sobre el ícono del menú de hamburguesas. Ajústelo a la derecha o izquierda, seleccione entre tres iconos (tres líneas, dos líneas o tres puntos), elija estilos de animación y elija la dirección de la animación. Lo coloqué a la izquierda y seleccioné dos líneas.

Burger Menu General le permite ajustar la altura del menú, establecer la distancia del icono de la hamburguesa desde el borde y la parte superior, y ajustar su opacidad de desplazamiento. He cambiado cada uno de estos ajustes en este ejemplo.

Los ajustes del icono del menú de hamburguesas le permiten ajustar el tamaño y el color de las líneas o puntos en el icono de la hamburguesa para las posiciones cerrada y abierta. También tiene control sobre la altura de la línea, el radio del borde y el espaciado de línea. Esta es la posición cerrada. Establecí el color de las líneas en rojo.

Establecí el color del icono abierto en dorado.

Para este, coloqué el ícono de menú a la derecha y seleccioné tres líneas. Ajusté los colores, la altura de la línea, el radio del borde y la posición de las tres líneas.

También puede agregar texto. Le brinda control total sobre el texto, incluida la posición horizontal y vertical, el tamaño de fuente, el color y el estilo. Este ejemplo incluye la opción con tres puntos.

El fondo del menú de hamburguesas y la sombra de fondo del menú de hamburguesas proporcionan configuraciones similares a los botones Divi. Incluyen el color, el ancho, la altura, el radio del borde, la longitud horizontal y vertical de la sombra, el radio de desenfoque y el color de desenfoque. He ajustado la mayoría de las configuraciones en este ejemplo, haciendo que el ícono sea un cuadrado en lugar de un círculo.

Diseños de inyección

Inject Layouts le permite seleccionar diseños de su biblioteca Divi para inyectar en varias ubicaciones en su encabezado. Coloque los diseños encima del menú, debajo del menú o encima del encabezado personalizado para dispositivos móviles.

Para este ejemplo, agregué secciones del paquete de diseño que estoy usando para colocar un formulario de contacto encima del menú y la información de contacto debajo del menú. Hice el menú en pantalla completa para que sea más fácil de ver.

Apariencia del menú

La apariencia del menú le permite cambiar el color de fondo, la ubicación del enlace, el tamaño de fuente, la familia, el color, el color de desplazamiento, el lado de la pantalla en el que aparece y el ancho del área del menú. Moví el menú a la izquierda, cambié el fondo, aumenté el tamaño de la fuente, cambié la posición desde la parte superior de donde aparecen los enlaces y centré los enlaces.

Para este, reduje el área del menú, elevé los enlaces, los justifiqué a la derecha y ajusté el color de la fuente.

En este, moví el menú a la derecha, lo hice más ancho, justifiqué el texto a la izquierda, cambié el color e inserté un formulario de contacto debajo del menú.

Apariencia del submenú

Hay varios estilos para mostrar submenús. Este es el estilo anidado de colapso. Dejé la configuración por defecto. También puede ajustar la apariencia, eliminar el borde y cambiar el icono.

Esto es Overlap Slide In. Puede ajustar el tamaño de fuente, el color, la altura, el color de desplazamiento, el área de contenido, etc. He ajustado la mayoría de estas configuraciones para este ejemplo.

Este es el estilo de submenú Lado a lado. Coloca un icono de flecha que apunta a los elementos del submenú. Puede ajustar la altura, la posición, el color, etc. tanto para el icono de apertura como para el de cierre. He ajustado la configuración del icono de abrir.

Detener apilamiento

Uno de los problemas con la inyección de diseños es que los módulos se apilarán. Divi Mobile incluye un módulo Divi que puede agregar al diseño que evitará que se apile. El ejemplo anterior es un diseño con elementos que se apilan.

Simplemente agregue el módulo a la fila. No se necesita nada más.

Las columnas ya no se apilan. Dependiendo de su diseño, es posible que deba ajustar el ancho de su menú para que todo se ajuste a su gusto. También funciona con los otros diseños y disposiciones de menú. Esta es una excelente manera de hacer un mega menú.

Dónde comprar

Divi Mobile está disponible en el sitio web del desarrollador. Hay varias licencias para elegir:

Anual

• 1 sitio £ 12
• 2-5 sitios £ 36
• Ilimitado £ 64

Toda la vida

• 1 sitio £ 40
• Ilimitado £ 196

Incluye 1 año de soporte. Recibirá actualizaciones mientras la licencia esté activada en su sitio web.

Pensamientos finales

Ese es nuestro vistazo al complemento Divi Mobile. Es un complemento excelente para diseñar menús móviles. Solo he arañado la superficie de lo que se puede hacer con él. Es fácil de usar y tiene muchos ajustes para elegir. Me gusta que usa el personalizador de temas para ver los cambios en vivo.

Hubo algunas veces que tuve que guardar y volver a cargar la página para ver los cambios, pero ese podría haber sido mi servidor. Me gustaría ver un botón de reinicio predeterminado para que pueda volver fácilmente a la configuración predeterminada como puede hacerlo con los controles Divi estándar. Sin embargo, esto podría no ser necesario.

Me impresionó lo que podía hacer con Divi Mobile. Si está interesado en un complemento Divi para crear menús móviles personalizados, vale la pena echarle un vistazo a Divi Mobile.

Queremos escuchar de ti. ¿Has probado Divi Mobile? Háganos saber lo que piensa al respecto en los comentarios.

Imagen destacada a través de venimo / shutterstock.com