Responsive Design Divi: ¿Cómo puedo manejar diferentes tamaños de pantalla?

Muchos usuarios me preguntan: ¿cómo optimizar el diseño responsivo de Divi?

Me apetece responder "aunque es una ch orrada" 😉

Pero si lo piensas bien, las opciones de respuesta de Divi no son obvias. Están ahí... pero un poco escondidos...

En este artículo, me propongo dar una visión general del Responsive Design dentro de Divi para gestionar mejor los tamaños de pantalla y conseguir un sitio web totalmente personalizado.

Nota: a partir de agosto de 2019, las opciones responsivas del tema Divi han sido mejoradas como se demuestra en este vídeo:

Y desde noviembre de 2020, se han añadido nuevas características al diseño responsivo con Divi (ver el artículo aquí), hablaremos de ello más adelante en este artículo...

Anuncio: este artículo contiene enlaces de afiliación que reconocerá fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Por qué optimizar el diseño responsivo de su sitio web Divi?

Con más de 9.500 millones de dispositivos móviles en el mundo, habría que estar loco para no optimizar el diseño responsivo de su sitio, ¿no es así?

Esta es una buena razón para crear un sitio que sea tan legible en tabletas y móviles como en el escritorio .

Los usuarios navegan cada vez más desde sus teléfonos móviles, ya sea durante sus descansos o en el transporte público, ¡y esto es muy importante!

Sus visitantes pueden incluso descubrir su sitio a través de una pantalla móvil. Por lo tanto, es fundamental que se lleven una buena impresión para que vuelvan más tarde a visitarlo desde su ordenador.

¿Sabe cuántos de los visitantes de su sitio web proceden de dispositivos móviles?

Puede comprobarlo a partir de sus datos Google AnalyticsHaga clic en la pestaña Audiencia > Móvil > Resumen.

Por ejemplo, en 2019, el 12,5% del tráfico de Divi Tips provino de móviles y tabletas.

Este es un pequeño porcentaje debido al tema: mi Tutoriales de Divi se utilizan principalmente desde los ordenadores de sobremesa. Esto es bastante lógico.

Pero si el tema de su sitio se presta a ello, es muy probable que la mayor parte de su tráfico provenga de pantallas móviles. Esto es lo que ocurre a menudo con los sitios de noticias o de estilo de vida...

Descubra todos los recursos sobre la respuesta en el blog oficial de Elegant Themes.

2 - ¿Cómo evitar los problemas de respuesta con Divi?

Antes de avanzar en este artículo en el que se explica todo lo referente a las opciones de diseño responsive, me gustaría destacar un punto muy MUY importante: los errores responsive son raros con Divi si se utiliza esta herramienta de forma correcta.

Lo que quiero decir con esto es que acompaño a muchos usuarios cada año y he podido detectar un error común: la modificación de los márgenes de forma intempestiva.

Por supuesto, el Constructor Visual es genial, le permite hacer cambios en WYSIWYG (What You See Is What You Get) lo que le permite modificar su diseño en tiempo real. Pero esto tiene consecuencias: si creas un diseño perfecto para tu pantalla, debes saber que puede no serlo en otros tamaños de pantalla. Y es entonces cuando se producen los errores de respuesta.

Un error común es "arrastrar" los márgenes (margen o relleno) "a golpe de ratón". Puede que pienses que esta es la mejor manera de colocar tal o cual elemento en el lugar deseado, pero esto es un gran error. De este modo, se corre el riesgo de obtener márgenes negativos o "locos" que serán un problema en una tableta o un smartphone.

Te contaré mi pequeño secreto, el que doy a todos mis clientes o alumnos: ¡nunca toco los márgenes (internos o externos) excepto cuando realmente los necesito! Y sobre todo, nunca "tirar" de ellos con el ratón como os muestro a continuación:

Prefiero pasar por las opciones de cada módulo que necesito para cambiar los márgenes, a través del Configuración > Estilos > Espaciado. De esta manera, puedo controlar los márgenes al píxel más cercano y me ahorra algo de trabajo después.

De este modo, no tendrás sorpresas ni preocupaciones por otros tamaños de pantalla.

Si estás usando el Visual Builder de la forma que recomiendo (la de arriba) y sigues teniendo problemas de respuesta, puedes continuar con este artículo donde seguramente encontrarás respuestas.

Si, por el contrario, has "tirado" de los márgenes con el ratón, ya puedes comprobar si los problemas se solucionan restableciendo los márgenes a 0px. Esta es la primera pista que explora...

3 - Soporte de diseño nativo responsivo en Divi

Quizás sea necesario aclarar que el tema Divi es un tema de WordPress responsivo. Aunque este es el caso de la mayoría de los temas de WordPress hoy en día.

Esta es también la razón por la que WordPress ha tenido tanto éxito.

Los antiguos sitios HTML de la década de 2000 eran obsoletos e inadecuados para la visualización en pantallas pequeñas. WordPress y sus temas responsivos han ofrecido a los creadores de sitios una forma rápida y sencilla de adaptarse a todos los tamaños de pantalla.

Sin embargo, hoy en día hay cientos de tamaños de pantalla en el mercado. Esto no era así al principio. Hay pantallas de Android, tabletas, iPhones, etc. Y con cada nuevo smartphone que sale al mercado, hay un nuevo tamaño de pantalla... ¡Otra vez!

Por lo tanto, es probable que el sitio que acaba de crear con Divi hoy, muestre algunos errores de respuesta en unos meses... ¡Sí!

Y puede que incluso dentro de unos días, cuando tu amigo, que usa un smartphone sin venir a cuento, te diga: "el menú de tu web es raro en mi teléfono"...

Sin embargo, has comprobado todas las versiones de tu página con todos los terminales que tenías a mano, pero tampoco eres una tienda de telefonía 🙂 .

En resumen, refuerza mi idea de que un sitio nunca es realmente perfecto. Esto me confirma en la idea de que un sitio nunca es realmente perfecto... ¡Lo importante es hacerlo evolucionar!

Divi nos ofrece un montón de opciones responsive en varios lugares, que descubriremos a continuación:

4 - Gestionar los tamaños de letra por defecto para todo el sitio

Lo primero que puedes hacer para optimizar el diseño responsivo de Divi es ajustar el tamaño de la fuente al tamaño de la pantalla.

Divi ofrece esta opción en sus opciones de personalización:

1. Vaya a la pestaña Apariencia > Personalizar > Estilos en el móvil.
2. Configurar la vista de la tableta
3. La vista del teléfono
4. La pestaña "menú en el móvil" sólo permite establecer el color pero no el tamaño de la letra.

En el caso de los móviles y las tabletas, puede actuar en :

• La altura de la sección
• La altura de la línea
• El tamaño del cuerpo de texto
• El tamaño de los títulos

Las opciones se detienen ahí y no permiten definir un tamaño de fuente según las etiquetas H1, H2, H3, etc. Lo gestionaremos de forma diferente.

Pero mientras tanto, ya puedes poner el "default" aquí en esta pestaña, no cuesta nada 😉 ... Luego ya afinarás.

5 - Vistas responsivas en el Divi Builder

Otra gran característica es la simple opción que ya has notado: las vistas responsivas del Constructor Divi.

Cuando activas el Constructor Visual en una de tus páginas, puedes controlar la apariencia del diseño según 3 tamaños de pantalla:

• Escritorio
• Tableta
• Móviles

Puede pasar fácilmente de una vista a otra abriendo el pequeño botón púrpura de la parte inferior de la pantalla y haciendo clic en el icono deseado:

Estas opciones de visualización sólo se utilizan para comprobar la representación visual en las 3 versiones. Pero aquí no se controlan realmente las distintas versiones. Le aconsejo que gestionar este tipo de respuesta directamente desde el Módulos Divi preocupado.

¿Aún no usas Divi? ¿No está seguro? Descubra el tema Divi aquí !

6 - Gestión responsiva directamente en los módulos de Divi

A menos que esté desarrollando su sitio para móviles primero, la versión que desarrolle primero será la de escritorio. Todas las secciones, filas y módulos de Divi que insertes en tu diseño estarán optimizados para la versión de escritorio.

El CSS de Divi incluye una hoja de estilo que permite optimizar, por defecto, las versiones móviles.

Por ejemplo, si insertas una línea 4/4 dentro de una sección, cambiará automáticamente a 2/2 en la versión para tabletas y a 1/1 en la versión para móviles. Así que no tienes que gestionar nada con Divi.

Sin embargo, donde hay que prestar especial atención es dentro de los módulos.

Si quiere que su sitio se adapte perfectamente a diferentes tamaños de pantalla, tendrá que corregir algunos elementos a medida que vaya creando su sitio.

Tendrás que editar algunos elementos para que sean totalmente compatibles en la versión de "pantalla pequeña"...

6.1 - Hacer que el texto responda con Divi

El tamaño de los títulos y del cuerpo del texto son elementos que merecen especial atención.

La legibilidad es un criterio importante para mejorar la experiencia del usuario.

Aquí se explica cómo cambiar el tamaño de la fuente para que se ajuste al tamaño de la pantalla:

• Edite el módulo que contiene su texto.
• Cuando pase el ratón por encima del tamaño del texto, verá un pequeño icono de móvil
• Haga clic en este icono...

• Los 3 tamaños de pantalla aparecen como una pestaña.
• Seleccione la pestaña de la tableta o la pestaña del teléfono para actuar en este tamaño
• Establezca un valor de píxeles basado en el tamaño de las pantallas.

Importante: este pequeño icono móvil que permite actuar sobre el responsive está disponible en la mayoría de las opciones de cada módulo.

Tenga en cuenta también que hay otra forma de gestionar estos tamaños de fuente de una vez por todas: establecer el Módulo de publicación de contenidos (Módulo de contenido de la entrada) disponible en el creador de temas.

6.2 - Jugar con los colores según el tamaño de la pantalla

Dado que esta función de respuesta está disponible en casi todas las opciones de cada módulo, también puede utilizarla para otros fines. Por ejemplo, puede establecer un color de título diferente para cada versión de su sitio.

Esto funciona de la misma manera que el ajuste del tamaño, excepto que se actúa sobre el color.

En la captura de pantalla anterior, se puede ver que he definido :

• un color negro para los títulos de escritorio
• un color rosa para los títulos en la versión para tabletas
• un color púrpura para los títulos de los móviles

Tenga en cuenta, sin embargo, que debe tener cuidado al seleccionar el elemento sobre el que desea actuar. En el ejemplo de esta captura de pantalla, puede ver que he seleccionado el Título H3 antes de definir su color.

Esto es sólo un ejemplo, pero como puede ver, no habrá límite en términos de personalización y optimización para diferentes tamaños de pantalla.

7 - Condición de visibilidad según las pantallas

En algunos casos, puede decidir mostrar algunos elementos en el móvil y otros en el escritorio... pero no ambos. Buenas noticias, ¡eso también es posible!

Esto suele ocurrir con un botón de "llamada". Sólo es relevante en el móvil (aunque algunos ordenadores de sobremesa puedan hacer llamadas).

Divi permite entonces definir una condición de visibilidad según las pantallas.

• Editar el módulo a optimizar
• Ir a la Avanzadas > Visibilidad
• Compruebe las versiones en las que su artículo no debe aparecer. En el ejemplo anterior, he ocultado el botón de llamada en las versiones de tableta y de escritorio para que sólo esté disponible en la versión de teléfono.
• Ahorra.

El diseño responsivo no se limita a la optimización visual. También debe tener en cuenta la optimización de la experiencia del usuario.

8 - ¿Secciones separadas para cada dispositivo? No se recomienda.

Con la opción de visibilidad comentada anteriormente, algunos usuarios pueden verse tentados a desarrollar una sección, o incluso un diseñodiferente para cada versión, y esto, dentro de la misma página...

¡Ay, no hagas eso!

Puede utilizar las opciones de visibilidad con moderación, como un botón de llamada por ejemplo, pero no debería ir más allá, por varias razones:

• Esto no es óptimo para el SEO Aunque estas secciones "ocultas" no sean visibles para un humano, los robots de Google las verán. Es posible que no entiendan por qué el contenido está duplicado.
• Cada vez que actualices, tendrás que modificar todas las versiones de las secciones: ¡qué pérdida de tiempo!
• Si utiliza CSS ID para crear enlaces internos dentro de la misma página, ya no funcionarán porque un ID debe ser único.
• Esta es una forma no muy profesional de manejar el diseño responsivo de Divi.

Así que, por todas estas razones, prefiera las opciones nativas de Divi en lugar de duplicar sus secciones en función del tamaño de la pantalla. Y si eso no es suficiente, si todavía está notando errores de respuesta, entonces el problema es con el punto de interrupción y las consultas de los medios de comunicación.

Nota: hace unos años, publiqué un artículo sobre un preocupación específica de responsive con Divi y iOS. Este artículo parece seguir siendo relevante en algunos casos.

Puedes probar Divi de forma gratuita: ir a esta página y haz clic en "PRUEBA GRATUITA

9 - Gestión del menú nativo de Divi responsive

Anteriormente en este artículo, te dije que el "icono móvil" para optimizar el responsive estaba disponible para la mayoría de las opciones de cada módulo.

Sin embargo, si no utiliza el Constructor de temas y se utiliza un Cabecera del sitio Divi clásico, con un menú de navegación creado desde el Personalizador (menú Apariencia > Personalizar), estas opciones de optimización responsiva no están disponibles.

Como puede ver en la captura de pantalla anterior, el tamaño del texto del menú no tiene opciones para las versiones de móvil y tableta. Así, por defecto, todas las versiones de su sitio tendrán el mismo tamaño de fuente para su menú principal.

Esta es a menudo la razón por la que los lectores de Divi Tips me contactan diciendo "mi menú Divi no es correcto en el móvil". Sí, tendrás que modificarlo con CSS, el famoso Consultas sobre medios de comunicación…

10 - Opciones para previsualizar el responsive de Divi

A partir de noviembre de 2020, es más fácil ver cómo se verá su sitio web en diferentes dispositivos y tamaños de pantalla.

Puedes ajustar manualmente el tamaño de la vista previa, cambiar los anchos de vista previa por defecto para tu teléfono y tableta, y cambiar entre los preajustes comunes de los dispositivos. 

Este vídeo resume las principales características:

Puedes cambiar los anchos de vista previa por defecto para las vistas de teléfono y tableta, de modo que cada vez que entres en un modo de vista previa, o cambies entre las opciones de respuesta, el tamaño de la ventana refleje el ancho deseado. 

Cambie el tamaño de sus pantallas y simplemente haga clic en el botón "Hacer la vista por defecto para que la próxima vez que cambie a este modo de vista, se refleje su tamaño de vista previa personalizado.

Para saber más, lea el artículo oficial en el Sistema de vista previa responsiva de Divi.

11 - Mejorar el punto de ruptura de Divi con las consultas de Medias

Algunos temas de WordPress permiten establecer puntos de ruptura, lo que permite adaptar realmente el diseño del sitio a los tamaños de pantalla actuales. Pero Divi no ofrece esta opción de forma nativa.

El punto de ruptura de Divi y las consultas de medios están estrechamente relacionados con el diseño receptivo.

Si quieres un sitio Divi totalmente responsivo, tendrás que seguir estos pasos críticos.

Aunque Divi soporta de forma nativa casi todos los sitios web responsivos -como hemos visto a lo largo de este artículo- es posible que algunos elementos de su diseño no estén todavía totalmente optimizados para todos los tamaños de pantalla...

Entonces tendrás que añadir algo de CSS para corregirlo. Pero que no cunda el pánico. Estamos hablando de CSS y no de Javascript o cualquier otro lenguaje complicado. Digamos que el resto de este artículo debería ayudar a los más novatos a solucionar algunos errores de respuesta con Divi.

12 - ¿Qué es el punto de ruptura?

Cuando un tema de WordPress está codificado para ser responsivo, los desarrolladores del tema definen reglas CSS que pueden ser diferentes según el tamaño de la pantalla.

Por lo tanto, estas reglas CSS se emiten de forma diferente en función del tamaño del píxel. Esto se llama Punto de interrupción o Breakpoint.

Este punto de ruptura es, por tanto, la transición de un tamaño de pantalla a otro.

Una vez definidos estos puntos de ruptura, puede utilizar las Consultas Medias para emitir reglas por tamaño de pantalla.

El tema Divi tendría 6 puntos de ruptura (como se explica en este artículo oficial) :

• Escritorio grande : 1405px y más
• Escritorio estándar: entre 1100px y 1405px
• Portátiles y tabletas grandes: entre 980px y 1100px
• Tabletas : entre 768px y 980px
• Smartphones y tabletas pequeñas: entre 320px y 768px
• Smartphones : entre 320px y 480px

Los problemas de respuesta que a veces puede encontrar pueden provenir de uno de estos tamaños. Por ejemplo, el cambio entre el ordenador y la versión de la tableta es demasiado temprano o demasiado tarde.

Empezando con Divi, descubra todos los artículos para empezar con tranquilidad!

13 - ¿Qué son las consultas de medios?

Las consultas de medios son consultas multimedia que se pueden utilizar dentro de CSS para definir reglas que se aplicarán bajo ciertas condiciones.

Medias Queries puede actuar sobre la impresión, los contenidos accesibles para los discapacitados visuales (Braille...), las pantallas pequeñas, las proyecciones en pantalla grande, las proyecciones en televisión, etc.

Lo más importante es que las Medias Queries se utilizarán para etiquetar determinados tamaños de pantalla, independientemente del destino, utilizando el valor ALL o SCREEN.

14 - El principio Medias Queries para una gestión precisa del Responsive Design

Está muy bien la teoría, pero vayamos a la práctica... Aquí hay 3 tipos de sintaxis de Medias Queries que te permitirán actuar sobre el diseño responsivo:

14.1 - Diseño responsivo hasta un determinado tamaño de pantalla

Esta es la sintaxis de las reglas CSS aplicables hasta un determinado tamaño de pantalla:

@media screen and (max-width: 980px) {
Placez votre CSS ici
}

En este ejemplo, las reglas CSS que se utilizarán serán aplicables en pantallas que van de 0px a 980px.

Es el prefijo max- el que permite designar el valor del tamaño máximo. A partir de 981px, las reglas CSS emitidas aquí ya no funcionarán.

Pequeña variación:

@media all and (max-width: 980px) {
Placez votre CSS ici
}

En este fragmento, el valor ALL ha sustituido al valor SCREEN. Esto significa que las normas se aplicarán a todos los tipos de medios (no sólo a las pantallas). En ambos casos, estarás actuando sobre el diseño responsivo de tu sitio Divi. El valor ALL será más amplio que el valor SCREEN.

14.2 - Diseño responsivo en un determinado tamaño de pantalla

A la inversa, también puede utilizar las Consultas Medias para actuar sobre el diseño a partir de un determinado tamaño de pantalla. En este caso, esta es la sintaxis:

@media screen and (min-width: 980px) {
Placez votre CSS ici
}

o

@media all and (min-width: 980px) {
Placez votre CSS ici
}

Cualquier regla CSS que emita aquí sólo se aplicará a pantallas mayores de 980px.

El prefijo min- es el que permite definir el valor mínimo al que las reglas CSS serán tenidas en cuenta por el navegador.

14.3 - Diseño responsivo entre dos tamaños de pantalla

Gracias a Medias Queries, también es posible emitir reglas CSS para un tamaño de pantalla entre dos valores. He aquí un ejemplo de sintaxis:

@media screen and (min-width: 980px) and (max-width: 1100px) {
Placez votre CSS ici
}

Las reglas CSS que coloques aquí sólo se tendrán en cuenta para pantallas cuyo tamaño esté entre 980px y 1100px.

Para ir más allá con Medias Queries, recomiendo este excelente artículo de Alsacreation.

15 - ¿Cómo identificar las consultas de Medias de Divi?

Ahora ha comprendido que los puntos de ruptura de Divi han sido definidos en función de ciertos tamaños de pantalla y que las Consultas Medias le permiten actuar sobre ellos...

Puedes agrupar ciertos tamaños de pantalla y actuar globalmente en el diseño responsivo de tu sitio Divi, según dos tamaños:

/* Écrans de plus de 980px */
@media all and (min-width: 980px) {
  Placez votre CSS ici
}
 
/* Écrans de moins de 980px */
@media all and (max-width: 979px) {
 Placez votre CSS ici
}

Pero si quiere afinar la visualización de ciertos elementos de su sitio y ser muy preciso en el tamaño de las pantallas, puede utilizar los tamaños de pantalla "oficiales " que se han enumerado anteriormente en este artículo, es decir :

• Escritorio grande : 1405px y más
• Escritorio estándar: entre 1100px y 1405px
• Portátiles y tabletas grandes: entre 980px y 1100px
• Tabletas : entre 768px y 980px
• Smartphones y tabletas pequeñas: entre 320px y 768px
• Smartphones : entre 320px y 480px

Aquí hay una hoja de trucos de las diferentes consultas de Divi Medias de acuerdo con estos tamaños de pantalla:

/* Desktop de plus de 1405px */
@media all and (min-width: 1405px) {
  Placez votre CSS ici
}
 
/* Desktop compris entre 1100px et 1405px */
@media all and (min-width: 1100px) and (max-width: 1404px) {
  Placez votre CSS ici
}
 
/* Ordinateurs portables et grandes tablettes comprises entre 980px et 1100px */
@media all and (min-width: 980px) and (max-width: 1099px) {
  Placez votre CSS ici
}
 
/* Tablettes comprises entre 768px et 980px */
@media all and (min-width: 768px) and (max-width: 979px) {
 Placez votre CSS ici
}
 
/* Smartphones et petites tablettes comprises entre 320px et 768px */
@media all and (min-width: 320px) and (max-width: 767px) {
 Placez votre CSS ici
}
 
/* Petits Smartphones de moins de 480px */
@media all and (max-width: 479px) {
 Placez votre CSS ici
}

Pero esto es sólo teoría y es mejor inspeccionar su sitio con un navegador (Firefox o Chrome) para definir cuáles son los puntos de ruptura que suponen una preocupación para el responsive.

Para entenderlo mejor, propongo un caso concreto...

¿Quieres personalizar Divi como un profesional? Consulta todos los tutoriales.

16 - Caso práctico: arreglar el menú responsivo de Divi

La mayoría de las optimizaciones de diseño responsivo se pueden establecer de forma nativa dentro de los módulos de Divi utilizando las opciones proporcionadas, como se explica en este artículo.

Pero a veces, algunas partes del sitio pueden no reaccionar positivamente al cambio de una pantalla a otra. Esto puede deberse al tamaño de su fuente, al tamaño de su logotipo, etc.

Una parte del sitio que puede ser complicada es la Cabecera. Puede ser que la cabecera de su sitio sea adecuada en el móvil y en el escritorio, pero no en la tableta. Por supuesto, esto es sólo un ejemplo...

Para explicar mejor cómo gestionar los diferentes tamaños de pantalla y solucionar algunos errores, te propongo un ejemplo concreto de un error presente en Divi Tips...

16.1 - El inspector del navegador: ¡tu mejor aliado!

Antes de empezar nada, sepa que el inspector de su navegador web favorito se convertirá en su mejor amigo en la búsqueda de un sitio web más receptivo.

Si al leer esta frase piensas que hablo en chino, ¡no te preocupes! Yo también, hace unos años, no sabía lo que era un "inspector" (excepto Colombo, ¡lol!).

Entonces, empecemos por el principio: ¿tienes un problema de respuesta en tu sitio Divi? Consigue tu sitio y un navegador web como Firefox o Chrome.

Haga clic con el botón derecho del ratón en cualquier parte de la página de su sitio... Tiene opciones:

• Examinar el elemento: para Firefox
• Inspeccionar: para Chrome

¡Genial! El código de la página aparece en una ventana parecida a esta:

A partir de aquí, ¡podemos empezar!

16.2 - Identificar el tamaño de la pantalla que supone un problema para la respuesta

Utilizando el inspector de su navegador favorito, podrá activar el "Diseño receptivo" y comprueba los tamaños de pantalla en píxeles:

1. Abra su sitio web en Firefox o Chrome.
2. Haga clic con el botón derecho del ratón en cualquier parte de su sitio (donde exista el error de respuesta).
3. Haga clic en "Revisar elemento " o "Inspeccionar ", dependiendo de su navegador.
4. Haga clic en el icono de móvil/tableta, situado a la derecha o a la izquierda del menú del inspector.
5. Arrastre la ventana para determinar el punto de ruptura de Divi y leer el tamaño en píxeles.

Este vídeo explica mejor cómo identificar el tamaño de la pantalla que hay que corregir:

En este vídeo, seguro que te has dado cuenta :

• El menú móvil de Divi llega en cuanto la pantalla es menor de 980px.
• Así que el menú normal aparece a 981px.
• Entre 980px y 1160px, el menú está en 2 líneas, el logo está desproporcionado, los elementos se superponen.
• A partir de 1160px el menú principal de Divi se vuelve correcto.

Con estos elementos identificados, será sencillo corregir el problema del diseño responsivo en el menú principal.

Tendremos que cambiar la regla CSS que "dice" que el menú móvil sólo funciona en pantallas menores de 980px. La idea es aumentar este valor para que el menú móvil intervenga en cuanto las pantallas sean inferiores a 1160px.

16.3 - Fijar el responsive con una nueva Media Query

Para emitir una nueva regla CSS, necesitará un Tema infantil Divi o simplemente utilizar la opción de complemento nativo de CSS:

• Vaya a la pestaña Apariencias > Personalizar > CSS adicional
• Introduzca el Media Query que reescribe la regla CSS básica de Divi. Esta nueva consulta debería tener el siguiente aspecto:

/* Faire apparaitre le menu mobile jusqu'à 1160px */

@media all and (max-width: 1160px) {
 #et_mobile_nav_menu {
 display: block;
 }
 
#top-menu {
 display: none;
 }
}

Esta nueva regla ordena: "hasta 1160px, mostrar el menú móvil y ocultar el menú normal". Así, por defecto, más allá de 1160px, se mostrará el menú normal.

No olvides hacer clic en "Publicar " para guardar los cambios.

Sin embargo, se podrían haber considerado muchas otras opciones... Por ejemplo: reducir el tipo de letra del menú y el tamaño del logo en pantallas entre 980px y 1160px (tamaño en el que el menú presentaba un problema de responsive).

/* Corriger le responsive du menu pour les écrans compris entre 980px et 1160px */

@media all and (min-width: 980px) and (max-width: 1160px){
	
#logo {
    max-height: 40%;
}

#top-menu li a {
    font-size: 14px;
}

#et_search_icon {
    display: none;
}

.et-cart-info {
    display: none;
}
}

Todos estos valores son indicativos porque, por supuesto, dependen de varios criterios que cambiarán según el sitio:

• El tamaño de la fuente,
• El tipo de letra utilizado,
• El tamaño del logotipo,
• Y lo más importante, el número de artículos que componen su menú.

Por lo tanto, la idea no es realmente copiar y pegar los códigos presentes en este artículo, sino adaptarlos según sus necesidades.

17 - En conclusión: ¡el diseño responsivo de Divi no es tan complicado!

Tengo mucha curiosidad: ¿conocías todas esas opciones de Responsive Design Divi? ¿Y utilizas Medias Queries para corregir algunas reglas CSS para los tamaños de pantalla?

En este artículo, has visto que es bastante fácil arreglar algunos errores de respuesta, simplemente con las opciones nativas de Divi. Y si eso no es suficiente, Medias Queries vendrá al rescate...

Por último, propongo una lista de lectura sobre la gestión de responsive en Divi:

• Haz que el parallax sea posible en la versión móvil!
• Cómo utilizar el CSS personalizado de Divi para la edición avanzada de la respuesta
• Edición responsive y hover con Divi
• Uso de las nuevas opciones de altura y anchura de Divi para crear un diseño responsivo
• Consultas sobre el punto de ruptura de Divi y Medias.