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.
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.
- 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.
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
- Compra Divi Toolbox en Divi Lover
Introduce el código DIVIMUNDO15 en el proceso de pago para obtener un 15% de descuento - Descarga el archivo ZIP del plugin
- Inicie sesión en su panel de WordPress
- Vaya a Plugins » Agregar nuevo y haga clic en Cargar complemento
- Sube y activa el plugin.
Eso es todo. Ahora debería ver Divi Toolbox en el menú del panel de WordPress.
Agregue su clave de licencia
- Desde su panel de control de WodPress, vaya a Configuración » Activación de Divi Toolbox
- 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.
La interfaz de usuario de Divi Toolbox
Divi Toolbox tiene dos áreas diferentes donde usted elige su configuración de configuración:
- La configuración de Divi Toolbox en el panel de WordPress en Divi » Divi Toolbox
- 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!
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!).
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!
El personalizador de temas Divi.
El personalizador de Divi Toolbox.
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.
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]