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 menú de su dispositivo 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ú móvil Divi 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ú, aparece 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 Financial Advisor.

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 sobre el menú de 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. He abierto el menú en el personalizador de temas para mostrar las pestañas. Aparecerán otros elementos en función de las selecciones que elija. Veamos los principales ajustes.

Estilo y configuración del menú

Estilo y configuración del menú 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), la expansión desde una forma y la navegación inferior. El estilo de menú de 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 de menú. Un modo de vista previa establece qué modo se muestra de forma predeterminada. Me gusta esto porque hace que el fondo sea claro.

La expansión desde una forma cubre toda la pantalla comenzando en la esquina superior derecha. También puede expandirse 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 íconos en otras configuraciones en otro menú llamado Configuración de estiramiento circular.

La navegación inferior 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

Encabezado personalizado le da control completo 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. Configure el menú como fijo, ajuste la altura, el tamaño del logotipo, la posición del icono de la hamburguesa y el color de fondo. He realizado 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 configuré un poco más bajo de lo normal (puede configurarlo tan bajo como desee superponer el encabezado o el contenido). También agregué el carrito de compras de WooCommerce, habilité el ícono de búsqueda, los coloqué a la izquierda, los cambié a rojo y aumenté su tamaño.

Elegir menú de hamburguesas

Elegir menú de hamburguesas te ofrece muchas opciones sobre el ícono del menú de hamburguesas. Configure a la derecha o a la 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 ícono de 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 ícono del menú Burger le permiten ajustar el tamaño y el color de las líneas o puntos en el ícono 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 espacio entre líneas. Esta es la posición cerrada. He puesto el color de las líneas en rojo.

He configurado el color del icono abierto en dorado.

Para este, coloqué el ícono del 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.

Burger Menu Background y Burger Menu Background Shadow brindan 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.

Inyectar diseños

Inyectar diseños le permite seleccionar diseños de su biblioteca Divi para inyectar en varias ubicaciones en su encabezado. Coloque diseños sobre el menú, debajo del menú o sobre el encabezado personalizado móvil.

Para este ejemplo, agregué secciones del paquete de diseño que estoy usando para colocar un formulario de contacto sobre el menú y la información de contacto debajo del menú. He hecho el menú a 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 la 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 fuente, cambié la posición desde la parte superior donde aparecen los enlaces y centré los enlaces.

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

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

Apariencia del submenú

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

Esta es la diapositiva de superposición. 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 abrir como el de cerrar. He ajustado la configuración para el icono abierto.

Deja de apilar

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 para evitar que se acumule. 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 la forma en que lo desea. También funciona con los otros diseños y diseños de menú. Esta es una gran 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 use 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