Cómo crear impresionantes menús móviles Divi con Divi Toolbox

¿Está buscando funciones más avanzadas y opciones de diseño para su menú móvil Divi? Aquí hay un tutorial sobre cómo crear menús impresionantes para teléfonos inteligentes y tabletas con el complemento mejor calificado Divi Toolbox.

Join 1540+ subscribers!

Resumen: Divi Toolbox

Calificación del plugin:

Divi Toolbox es un complemento premium de Divi que agrega toneladas de nuevas opciones a Divi. Mi parte favorita son las opciones adicionales masivas para el menú móvil Divi. Es compatible tanto con el menú predeterminado de Divi Theme Customizer como con el módulo de menú (usando el encabezado Theme Builder).

He estado usando Divi Toolbox en mis propios sitios web, así como en los sitios web de mis clientes desde el lanzamiento en 2018 y estoy muy contento con la flexibilidad, la facilidad de uso y el amplio soporte. Divi Toolbox es como una navaja suiza para Divi.

Funciones del menú móvil

  • Contraer submenús de menú móviles anidados
  • Elija entre 20 + hermosas animaciones de menú móvil
  • Elige entre 9 animaciones de iconos de hamburguesas
  • Agregue cualquier contenido que desee en el menú móvil (utilizando los diseños, códigos cortos o widgets de la biblioteca Divi)
  • Establecer un punto de interrupción de menú móvil personalizado
  • Usar un logotipo de menú personalizado en dispositivos móviles
  • Usar menús fijos para móviles
  • Añadir texto (es decir, «MENU») al menú hamburguesa
  • Cambiar el color del tema del navegador móvil
  • … y mucho más.

Y esto es solo la configuración del menú móvil. Divi Toolbox también está repleto de configuraciones para el menú del escritorio, potentes configuraciones globales, personalizaciones de blogs y otras excelentes mejoras móviles como cambiar el recuento de columnas móviles , solo por mencionar algunas cosas.

Precios y licencia

Ingrese el código de descuento DIVIMUNDO15 en el proceso de pago para obtener un 15% de descuento.

Licencia regular:
€ 49

€ 41.65
para uso de por vida en 1 sitio web.

Licencia extendida:
€169.00

€143.65
para uso de por vida en sitios web ilimitados.

Todas las características + actualizaciones automáticas están incluidas. El soporte se proporciona durante 6 meses después de la fecha de compra. No hay una versión gratuita de Divi Toolbox. El plugin está desarrollado por Divi Lover.

Instalación del plugin

  1. Compra Divi Toolbox en Divi Lover
    Introduce el código DIVIMUNDO15 en el proceso de pago para obtener un 15% de descuento
  2. Descarga el archivo ZIP del plugin
  3. Inicie sesión en su panel de WordPress
  4. Vaya a Plugins » Agregar nuevo y haga clic en Cargar complemento
  5. Sube y activa el plugin.

Eso es todo. Ahora debería ver Divi Toolbox en el menú del panel de WordPress.

Instalar Divi Toolbox

Agregue su clave de licencia

  1. Desde su panel de control de WodPress, vaya a Configuración » Activación de Divi Toolbox
  2. Agregue su clave de licencia en el campo Clave de API y haga clic en Guardar cambios

Ahora tienes acceso a actualizaciones automáticas de plugins.

Clave de licencia de Divi Toolbox

La interfaz de usuario de Divi Toolbox

Divi Toolbox tiene dos áreas diferentes donde usted elige su configuración de configuración:

  1. La configuración de Divi Toolbox en el panel de WordPress en Divi » Divi Toolbox
  2. La pestaña Divi Toolbox Customizer en Divi » Theme Customizer » Divi Toolbox

Divi Toolbox no agrega ningún módulo nuevo en Divi. Simplemente mejora y enriquece los módulos y plantillas existentes en Divi a través de estas dos interfaces.

Parte 1: Configuración de Divi Toolbox

Aquí es donde habilita y deshabilita las funciones en Divi Toolbox. Puede elegir entre estas pestañas:

  • Admin
  • Global
  • Encabezado
  • Pie
  • Móvil
  • Blog
  • Módulos

Encontrará la mayoría de las opciones de menú móvil en la pestaña Móvil , pero si desea usar códigos cortos y diseños de biblioteca Divi en su menú móvil, primero deberá habilitar «Código corto de diseños Divi» en la pestaña Administrador .

Además, si desea agregar un botón CTA en su menú móvil (y de escritorio), primero debe habilitar «Agregar botón de menú CTA» en la pestaña Encabezado .

Echemos un vistazo más de cerca bajo el capó a las opciones móviles en Divi Toolbox. ¡Hay tantas opciones que tuve que dividir la captura de pantalla en dos imágenes separadas!

Configuración móvil de Divi Toolbox 1/2

Cambie el color del tema del navegador móvil y el punto de interrupción del menú móvil. Habilite el estilo de menú móvil personalizado y use un menú separado para dispositivos móviles frente a escritorio. Agregue el logotipo de su sitio web, la barra de búsqueda, los íconos de redes sociales y los widgets al menú de su dispositivo móvil. Use un disparador de menú personalizado para crear un menú de hamburguesas fijo con un fondo agradable y un texto de etiqueta. Cambie el logotipo en el móvil, habilite los iconos personalizados de hamburguesas, cambie el efecto de animación de hamburguesas y contraiga submenús anidados (¡función asesina!).

Configuración móvil de Divi Toolbox 2/2

Cambie el recuento de columnas móviles, habilite el efecto de fondo de paralaje en dispositivos móviles, invierta el orden de apilamiento de columnas en dispositivos móviles, agregue guiones para saltos de línea bonitos en dispositivos móviles o evite que las palabras se rompan en dispositivos móviles.

Parte 2: Divi Toolbox Customizer

Divi Toolbox agrega una nueva pestaña en el Personalizador de temas llamada, sí, lo adivinaste bien, Divi Toolbox. Aquí es donde harás la mayoría de los ajustes de diseño esenciales.

Vaya a Theme Customizer » Divi Toolbox » Mobile para personalizar, por ejemplo:

  • Barra de menús móvil
  • Icono de búsqueda de la barra de menús
  • Icono de hamburguesa
  • Contenedor de menús móvil
  • Animación de menú móvil
  • Enlaces de menú móvil
  • Submenús anidados
  • Botón de llamada a la acción del menú móvil
  • Barra de búsqueda del menú móvil
  • Widgets de menú móvil
  • Iconos sociales del menú móvil

Verá un conjunto diferente de pestañas dependiendo de la configuración que haya habilitado en la configuración de Divi Toolbox. ¡Echemos un vistazo al Personalizador de temas!

Divi Theme Customizer

El personalizador de temas Divi.

Divi Toolbox Personalizador

El personalizador de Divi Toolbox.

Divi Toolbox Personalizador móvil

El personalizador móvil de Divi Toolbox.

Palabras finales

Divi Toolbox es uno de los complementos imprescindibles que uso en todos mis proyectos Divi. Es una manera perfecta de llenar los vacíos en Divi en lo que respecta a la configuración y características de diseño.

Vale la pena el dinero solo por sus funciones de menú móvil. Las otras características son solo una gran ventaja.

Calificación del plugin:

Ingrese el código de descuento DIVIMUNDO15 en el proceso de pago para obtener un 15% de descuento.

-->[/et_pb_code][/et_pb_column][/et_pb_row][et_pb_row use_custom_gutter="on" custom_padding_last_edited="on|phone" admin_label="Row - CONTENT" module_class="dvcs_card_featured" _builder_version="4.16" _module_preset="default" background_color="#521d91" use_background_color_gradient="on" background_color_gradient_type="circular" background_color_gradient_direction_radial="top left" background_color_gradient_stops="#4a42ec 0%|#521d91 100%" background_color_gradient_start="#4a42ec" background_color_gradient_end="#521d91" width="90%" max_width="1120px" module_alignment="center" custom_margin="|||||false" custom_margin_tablet="|||||false" custom_margin_phone="|||||false" custom_margin_last_edited="on|desktop" custom_padding="50px|32px|50px|32px|true|true" custom_padding_tablet="" custom_padding_phone="|22px||22px||true" link_option_url="https://diviguiden.se/divi" link_option_url_new_window="on" border_radii="on|8px|8px|8px|8px" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.16" _module_preset="default" custom_padding="|||" global_colors_info="{}" custom_padding__hover="|||"][et_pb_text _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="|||on|||||" text_text_color="#96cbd6" text_font_size="12px" text_orientation="center" background_layout="dark" text_font_size_phone="12px" global_colors_info="{}"]

Enlace de afiliados

[/et_pb_text][et_pb_text admin_label="Text - MAIN" _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="||||||||" header_font="||||||||" header_2_font="|700|||||||" header_2_text_align="center" header_2_text_color="#ffffff" header_2_font_size="37px" max_width="85%" max_width_tablet="95%" max_width_phone="100%" max_width_last_edited="on|phone" custom_margin="-22px||6px|||" custom_margin_tablet="32px||10px" custom_margin_phone="0px||15px|" custom_margin_last_edited="on|desktop" custom_padding="|10px|12px|10px||true" custom_padding_tablet="|32px||32px||true" custom_padding_phone="|0px||0px" custom_padding_last_edited="on|tablet" header_2_font_size_tablet="31px" header_2_font_size_phone="19px" header_2_font_size_last_edited="on|desktop" header_2_line_height_tablet="" header_2_line_height_phone="1.4em" header_2_line_height_last_edited="on|desktop" global_colors_info="{}"]

806 875 clientes ya han desatado el verdadero potencial de WordPress. Descarga Divi y comienza a crear sitios web hermosos hoy.

[/et_pb_text][et_pb_button button_url="https://divimundo.com/divi/" url_new_window="on" button_text="EXPLORA DIVI AHORA" button_alignment="center" admin_label="Button - SIGN UP TODAY" _builder_version="4.18.0" _module_preset="default" button_text_color="#333333" button_bg_color="#F7F8FA" transform_translate_linked__hover="off" custom_margin="0px||0px|" custom_margin_tablet="0px||0px|" custom_margin_phone="0px||0px" custom_margin_last_edited="on|desktop" custom_padding="14px|32px|14px|32px|true|true" custom_css_main_element="font-weight:bold !important;" box_shadow_style="preset3" box_shadow_color="rgba(0,0,0,0)" box_shadow_horizontal_last_edited="off|desktop" global_colors_info="{}" transform_styles__hover_enabled="on" transform_scale__hover_enabled="on" transform_translate__hover_enabled="on" transform_rotate__hover_enabled="on" transform_skew__hover_enabled="on" transform_origin__hover_enabled="on" transform_translate__hover="0px|-1px" box_shadow_color__hover_enabled="on" box_shadow_horizontal__hover_enabled="on" box_shadow_color__hover="rgba(255,74,158,0.2)" box_shadow_horizontal__hover="0px" button_bg_color__hover_enabled="on|hover" button_bg_color__hover="#FFFFFF" button_bg_enable_color__hover="on"][/et_pb_button][et_pb_text admin_label="Text - SECONDARY" _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" text_font="||||||||" text_text_color="rgba(255,255,255,0.75)" text_font_size="18px" header_font="||||||||" text_orientation="center" max_width="850px" custom_margin="40px||32px||false" custom_margin_tablet="32px||32px||true" custom_margin_phone="15px||0px||false" custom_margin_last_edited="on|desktop" text_font_size_tablet="17px" text_text_align="center" global_colors_info="{}"]

Pruebe hoy y obtenga su dinero de vuelta dentro de 30 días si usted no está contento. 100% libre de riesgos.

[/et_pb_text][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" _builder_version="4.17.4" _module_preset="default" background_color="#FFFFFF" custom_margin="||||false|false" global_colors_info="{}"][et_pb_row _builder_version="4.17.4" _module_preset="default" background_color="RGBA(255,255,255,0)" global_colors_info="{}"][et_pb_column type="4_4" _builder_version="4.16" _module_preset="default" global_colors_info="{}"][et_pb_text _builder_version="4.18.0" _module_preset="1397eec0-e19d-4e2f-ac5e-d5b2bde2b06f" header_2_font_size="32px" header_2_font_size_tablet="28px" header_2_font_size_phone="23px" global_colors_info="{}"]

Artículos Relacionados

[/et_pb_text][et_pb_blog posts_number="3" _builder_version="4.18.0" _module_preset="d557fc3a-2152-401e-a7c8-c8666bb17e64" read_more_font="|700||on|||||" read_more_letter_spacing="0.5px" read_more_line_height="3em" global_colors_info="{}" custom_css_title_last_edited="on|phone" custom_css_title_phone="margin-bottom:5px"][/et_pb_blog][et_pb_button button_url="@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjI5MDY2In19@" button_text="Más artículos" button_alignment="center" _builder_version="4.18.0" _dynamic_attributes="button_url" _module_preset="default" button_font="|700|||||||" custom_margin="||60px|||" global_colors_info="{}"][/et_pb_button][et_pb_divider color="#d6d6d6" _builder_version="4.16" _module_preset="default" global_colors_info="{}"][/et_pb_divider][et_pb_comments _builder_version="4.18.0" _module_preset="default" header_level="h6" header_text_color="#7d75d9" custom_button="on" button_font="|700|||||||" button_use_icon="off" hover_enabled="0" custom_css_reply_button="color:#fff !important;" custom_css_message_field="border-radius:10px;" global_colors_info="{}" custom_css_reply_button__hover_enabled="on|hover" custom_css_reply_button__hover="color:#fff !important;" button_text_color="#FFFFFF" sticky_enabled="0"][/et_pb_comments][/et_pb_column][/et_pb_row][/et_pb_section][et_pb_section fb_built="1" admin_label="Section - CTA BACKGROUND OVERLAY" module_class="dvcs-highlighted-overlay" _builder_version="4.16" _module_preset="default" background_color="rgba(78,47,188,0.8)" locked="off" global_colors_info="{}"][/et_pb_section]

Descargo de afiliados

Todo el contenido de DiviMundo es financiado por ustedes, nuestros queridos lectores. Algunos de los enlaces son enlaces de afiliados. Esto significa que si hace clic en el enlace y compra algo, recibiré una comisión de afiliado. Pero nunca te costará más. ¡Gracias por su apoyo!

Victor Duse, fundador de DiviMundo