Muchos usuarios me preguntan: ¿cómo optimizar el diseño responsivo de Divi?
Me apetece responder: "es una chorrada" 😉
Pero si lo piensas bien, las opciones responsivas 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í), del que hablaremos más adelante en este artículo...
- 1 - ¿Por qué optimizar el diseño responsivo de su sitio Divi?
- 2 - ¿Cómo evitar los problemas de respuesta con Divi?
- 3 - Soporte de diseño nativo responsivo en Divi
- 4 - Gestionar los tamaños de letra por defecto para todo el sitio
- 5 - Vistas responsivas en el Divi Builder
- 6 - Gestionar la respuesta directamente en los módulos de Divi
- 7 - Condiciones de visibilidad según las pantallas
- 8 - ¿Secciones separadas para cada dispositivo? No se recomienda.
- 9 - Gestión del menú responsivo de Divi
- 10 - Opciones para previsualizar el responsive de Divi
- 11 - Mejorar el punto de ruptura de Divi con las consultas de Medias
- 12 - ¿Qué es el punto de ruptura?
- 13 - ¿Qué son las consultas de medios?
- 14 - El principio de las Media Queries para una gestión precisa del Responsive Design
- 15 - ¿Cómo identificar las consultas de Medias de Divi?
- 16 - Caso práctico: arreglar el menú responsivo de Divi
- 17 - En conclusión: ¡el diseño responsivo de Divi no es tan complicado!
Aviso: 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 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 de móvil. Por lo tanto, es fundamental que se lleven una buena impresión para que vuelvan a visitarlo más tarde desde su ordenador.
¿Sabe qué proporción de los visitantes de su sitio web procede de dispositivos móviles?
Puede comprobarlo a partir de sus datos Google AnalyticsPuede encontrar esta información 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 cambiar 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 para 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 de la pestaña Configuración > Estilos > Espaciado. De esta manera, puedo controlar los márgenes al píxel más cercano y me ahorra trabajo después.
De este modo, no tendrás sorpresas ni preocupaciones por otros tamaños de pantalla.
Si estás utilizando el Visual Builder de la forma que te recomiendo (la de arriba) y sigues teniendo problemas de respuesta, puedes continuar con este artículo donde seguro que encuentras algunas respuestas.
Si, por el contrario, has "tirado" de los márgenes con el ratón, ya puedes comprobar si se solucionan los problemas restableciendo los márgenes a 0px. Esta es la primera vía a explorar...
3 - Soporte de diseño nativo responsivo en Divi
Quizás sea necesario señalar 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 ofrecen 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 de sopetón, te diga: "el menú de tu web es raro en mi teléfono"...
Sí que has comprobado todas las versiones de tu web con todos los terminales que tenías a mano, pero tampoco eres una tienda de telefonía 🙂 .
En resumen, esto refuerza mi idea de que un sitio nunca es realmente perfecto. Esto refuerza mi 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:
- Vaya a la pestaña Apariencia > Personalizar > Estilos en el móvil.
- Configurar la vista de la tableta
- La vista del teléfono
- La pestaña "menú en el móvil" sólo permite configurar el color pero no el tamaño de la letra.
En el caso de los móviles y las tabletas, podrá actuar en :
- La altura de la sección
- La altura de la línea
- El tamaño del cuerpo del 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. Esto se manejará de manera diferente.
Pero mientras tanto, ya puedes poner el "por defecto" aquí, en esta pestaña, no cuesta nada 😉 ... Luego, ya afinarás.
5 - Vistas responsivas en el Divi Builder
Otra característica interesante 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óvil
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 controlarás realmente las distintas versiones. En cambio, 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 - Gestionar la respuesta directamente en los módulos de Divi
A menos que esté desarrollando su sitio en "mobile first", 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 serán optimizados para la versión de escritorio.
El CSS de Divi incluye una hoja de estilo que optimiza las versiones móviles por defecto.
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.
Por lo tanto, tendrá 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 adaptarla 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 según el tamaño de las pantallas.
Importante: este pequeño icono móvil para 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 en la versión móvil
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 establecer su color.
Esto es sólo un ejemplo, pero como puede ver, no habrá límites para la personalización y optimización para los diferentes tamaños de pantalla.
7 - Condiciones 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, ¡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 pueden hacer llamadas).
Divi le permite entonces definir una condición de visibilidad según las pantallas.
- Editar el módulo a optimizar
- Ir a la pestaña Avanzadas > Visibilidad
- Compruebe las versiones en las que no debe aparecer su artículo. En el ejemplo anterior, he ocultado el botón de llamada tanto en la versión de la tableta como en la de escritorio para que sólo esté disponible en la versión del 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 por ejemplo para un botón de llamada, 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. Puede que no entiendan por qué el contenido está duplicado.
- Cada vez que actualices, tendrás que cambiar 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, estos 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, utiliza las opciones nativas de Divi en lugar de duplicar tus secciones para diferentes tamaños de pantalla. Y si eso no es suficiente, si todavía estás notando errores de respuesta, entonces el problema está en el punto de ruptura y en las consultas de medios.
Nota: hace unos años, publiqué un artículo sobre un preocupación específica sobre la respuesta 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 haga clic en "PRUEBA GRATUITA
9 - Gestión del menú responsivo de Divi
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 Con un menú de navegación clásico creado desde el Personalizador (Apariencia > Personalizar menú), 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 a los medios de comunicación...
10 - Opciones para previsualizar el responsive de Divi
Desde 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 establecer 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 de los dispositivos actuales.
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 "Hacer la vista por defecto para que la próxima vez que cambie a esta vista, se refleje el tamaño de la vista previa personalizada.
Para saber más, lea el artículo oficial sobre 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 responsivo.
Si quieres conseguir un sitio Divi totalmente responsivo, tendrás que seguir estos pasos cruciales.
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á 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 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 denomina 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, sólo es necesario utilizar las consultas de medios 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 las versiones de ordenador y 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 utilizarse para la impresión, los contenidos accesibles para los discapacitados visuales (Braille, etc.), 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 de las Media Queries para una gestión precisa del Responsive Design
Todo eso está muy bien en teoría, pero vayamos al grano... Aquí hay 3 tipos de sintaxis de Media Queries que te permitirán actuar en 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.
El prefijo max- se utiliza para indicar el valor del tamaño máximo. A partir de 981px, las reglas CSS indicadas 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 de medios para influir en el diseño en 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.
Este es el prefijo min- que define el valor mínimo en el que las reglas CSS serán tomadas en cuenta por el navegador.
14.3 - Diseño responsivo entre dos tamaños de pantalla
Gracias a las Medias Queries, también es posible emitir reglas CSS para un tamaño de pantalla entre dos valores. He aquí un ejemplo de la 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 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, a saber :
- 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 para 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 lo mejor es inspeccionar su sitio con un navegador (Firefox o Chrome) para definir qué puntos de ruptura son de interés para la respuesta.
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 del 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 móvil y escritorio, pero no en tableta. Por supuesto, esto es sólo un ejemplo...
Para explicar mejor cómo gestionar los diferentes tamaños de pantalla y superar ciertos bugs, te ofrezco un ejemplo concreto de un bug presente en Divi Tips...
16.1 - El inspector del navegador: ¡tu mejor aliado!
Antes de empezar nada, ten en cuenta que el inspector de tu navegador favorito se convertirá en tu mejor amigo en la búsqueda de un sitio web más responsivo.
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 con tu sitio Divi que es responsivo? 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 plantea un problema de respuesta
A través del inspector de su navegador favorito, puede activar el "Diseño receptivo y comprueba los tamaños de pantalla en píxeles:
- Abra su sitio web en Firefox o Chrome.
- Haga clic con el botón derecho del ratón en cualquier parte de su sitio (donde exista el error de respuesta).
- Haga clic en "Revisar elemento " o "Inspeccionar ", dependiendo de su navegador.
- Haga clic en el icono de móvil/tableta, situado a la derecha o a la izquierda del menú del inspector.
- 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, habrás notado :
- 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á sobredimensionado, 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 de diseño responsivo en el menú principal.
Tendremos que modificar la regla CSS que "dice" que el menú móvil sólo interviene 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 - Corregir la respuesta con una nueva consulta de medios
Para emitir una nueva regla CSS, necesitará un Tema infantil Divi o simplemente utilizar la opción de añadir CSS nativo:
- 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 indica: "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 logotipo en pantallas entre 980px y 1160px (tamaño en el que el menú tenía un problema de respuesta).
/* 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 orientativos porque, por supuesto, dependen de varios criterios que cambiarán según el lugar:
- El tamaño de la fuente,
- El tipo de letra utilizado,
- El tamaño del logotipo,
- Lo más importante es 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 estas 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 responsivos, simplemente con las opciones nativas de Divi. Y si eso no es suficiente, Medias Queries vendrá al rescate...
Por último, te ofrezco una lista de lectura sobre la gestión de la respuesta 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.
Super article ! J’ai pu approfondir les méthodes pour rendre mon site responsive ! top merci
Salut Lycia,
Je désespère un peu…tu comprendras ma détresse quand tu verras le site que je tente de faire correctement : http://www.ast-arles.com/ast …je sais que énormément de choses sont à revoir d’après les commentaires de la page FB de Divi Community dont je fais partie…Je me rends compte que je ne maitrise…quasi rien, ne serait ce que la base pour faire en sorte que mon site soit regardable…Bref, je suis en train de bosser tout cela en « confinement » pour que, à la base, le design soit correctement centré, avec les marge etc…sans oublier le côté responsive…pour le design de « base » sur PC « maison », je ne trouve pas de tuto valable (j’ai suivi la formation MAK mais qui ne répond pas à mes questions) mais je me doute maintenant que tout est lié, que ce soit PC, ou tablette etc…Suis je sur le bon tuto ici même? Sinon, si tu as une piste ailleurs je suis preneur..Merci à toi!
Salut David. Pour l’instant je n’ai regardé que la version smartphone et effectivement, il y a de gros soucis… J’irai voir la version desktop. En fait il faudrait savoir si tu as touché des options de marges, padding, dimensions… car c’est le pire à faire ! Plus on met des « valeurs au hasard » plus on a des chances d’avoir des résultats de ce genre. Honnêtement, si j’étais toi, je recommencerais de zéro les pages qui ont de gros soucis, en touchant peu les marges et tailles. Partir de zéro quelque fois c’est mieux que de chercher des heures pour trouver les erreurs… Enfin, la dernière solution : pourquoi ne télécharges-tu pas un layout tout prêt sur ta home page ?
Salut Lycia, tu as raison je vais repartir de zéro……Et je n’ai pas trouvé de layout tout prêt qui corresponde à ce que je voudrais faire sur ma home page…..
Ok ! C’est certainement une bonne idée ! Par contre il y a 1300 layouts disponibles, il y en a bien un qui pourrait correspondre à tes besoins. Mon conseil : il ne faut pas que tu regardes la thématique du layout mais plutôt sa disposition. Tu pourrais utiliser un layout d’agence web pour ton site d’art par exemple ! Il suffit juste d’imaginer ce que ça pourrait donner avec tes propres photos, ton propre teste, ta propre police, etc… et les sections qui ne te conviennent pas, tu les supprimes ! Aller, courage !
C’est ce que je fais, je suis en pleine recherche et motivé!! Merci Lycia!!! Prends bien soin de toi et de ta famille 🙂
Tu auras en exclusivité le super nouveau site que je vais faire 🙂
Super !
Bonjour Lycia,
Je suis actuellement en train de faire la refonte d’un site avec DIVI. Tout le contenu a été réalisé pour l’affichage desktop. Cet affichage est parfait. Néanmoins, un problème m’est survenu : l’affichage responsive (tablette/smartphone) n’est pas « adapté » car j’ai le fond de couleur de mon site qui est apparent à droite. C’est à dire que la taille de l’écran n’est pas « optimisé ». Je te laisse le lien de mon site : https://ehpad-saint-joseph.net
Tu comprendras par toi même lorsque tu le verras (c’est plus simple que par des mots haha).
J’espère que tu pourras me guider pour résoudre mon problème.
Merci d’avance 😉 Bonne journée.
Salut Maxime,
De mon côté, sur iPhone, tout est bon. Tu as trouvé une solution finalement ?
A bientôt
Lycia
Bonjour à tous !
J’ai quasiment fini tout mon site sous divi, mais j’ai quelques soucis de responsive dessus..
Je ne m’y connais pas énormément en code, et j’ai essayer de faire la partie 12 de ce tuto, mais en vain…
Quelqu’un pourrais-t-il m’aider ? 🙂
Salut Dylan, normalement, en utilisant correctement les options Responsives de Divi, tu n’as même pas besoin de toucher au code. La subtilité est de ne pas trop toucher aux marges et aux marges internes. Au plus tu trafique les valeurs, au plus tu peux avoir des soucis.
Bonjour à tous,
Peut on mettre ces lignes de codes dans le css enfant? Si oui, où?
Merci beaucoup!
Salut David, si tu as du CSS à ajouter, tu peux le mettre dans le fichier style.css de ton thème enfant, effectivement, mais c’est bien plus simple et pratique de le faire directement dans ton back-office, à l’onglet Apparence > Personnaliser > CSS personnalisé
Merci Lycia pour ton aide précieuse…et rapide!!
Je vais essayer ça!
David
ouah !!! tout ça c’est bien compliqué!!
j’etais hyper contente d’avoir reussi un tout petit diaporama (oui je sais c’est plus la mode!)! mais mes amis du club aiment bien avoir leurs photos lauréates qui tournent sur la page d’acceuil (il y en 4 )j’ai galéré avec les formats !!! et super contente d »avoir réussi avec smart slider et ensuite lmis le shortcode sur Divi
et alors quel désespor !! sur le mobile ca donne rien
je voulais changer cette section par une image mais non c’est déconseillé !!heureusement que je lis tous les posts et le livre jour et nuit !!!!
alors quoi fais -je ?? eh ben tant pis y aura une plage blanche sur le mobile et je désactive
c’est le mieux non ??
PS je trouve tjs les reponses sur ce site c’est fou même qd elles ne me plaisent pas
bonjour
hier soir ca n’etait pas responsive
ce matin sur mon ecran de tel tout est clean
par contre l’aperçu dans Divi au survol ne marche pas
donc mon post d’avant ne compte pas
merci pour ce site ultra génial et complet
Merci Michèle.
Fais attention car les navigateurs mobiles mettent souvent en cache ton site. Du coup, tu peux croire que ça ne marche pas, alors que ce n’est qu’une question de mise en cache. Si tu as un plugin de cache, pense à le vider lorsque tu fais beaucoup de changement.
Bonjour merci pour ce tuto mais n’étant pas un expert en code je ne sais pas si cela va pouvoir résolutionner mon problème j’ai mis une image en plein écran avec divi et j’aimerai qu’elle remplisse sur tout type d’écran la page en entière (qu’on n’ait pas besoin de scroll ou que mon contenu en dessous soit visible sans scroller)
Sauf que soi mon image est trop grande soit cela me la rogne (je ne pense pas que ce soit du media quieries puisque la taille sera différente en fonction de chaque taille d’écran (15,6 pouces; 23 pouces…)
Merci à vous pour votre aide
Salut Adrien,
J’ai du mal à comprendre. Par exemple, si ton image est en format portrait, il y a de grandes chances que tu sois obligé de scroller. Il n’y a aucune possibilité que ce soit un souci de responsive, je pense. C’est une histoire de format. Du coup, est-ce que j’ai bien compris ta question ?
Oui mon image est en portrait cela doit être la raison, bon et bien tant pis merci en tout cas
Bonjour, j’ai un souci avec le menu en mode tablette ou mobile, je ne sais pas pourquoi, mais le logo se mets au dessus du menu, du coup impossible de cliquer sur les différents sous menu. je le doute que c’est une bêtise, mais je ne trouve pas. http://www.mrib.be
Salut Olivier,
Ton menu est fait avec le thème builder ? On dirait une histoire de taille ou de Z-Index. Tu peux chercher de ce côté-là.
Le menu est fait avec wordpress > Apparence > Menu
Peut-être faut-il réduire la taille du logo ? Mais je pense plutôt que le bouton rouge de droite est peut-être le coupable. Essaye de le déplacer pour voir ?
Tu avais raison, c’est le Z-index, par contre je n’ai pas compris à quoi çà sert. On en parle dans le PDF que tu vends sur le site ?
Salut Olivier. Le z-index sert à donner une valeur de « superposition ». Un peu comme des couches que tu superposes. 0 = en dessous et 9999 et au plus haut de la pile. Tu as finalement trouvé le problème et corrigé ?
Oui, c’est résolu, un grand merci à toi, j’ai également commandé ton pdf a vie, il est super
Super Olivier, je suis ravie et j’espère que mon Ebook va t’aider 🙂
Bonjour,
Impossible pour moi d’avoir le résultat voulue en mode responsive et j’ai donc un affichage juste horrible sur tablette et mobile.
Si possible d’avoir un coup de main 🙂
Mon site : http://www.photographe-elisabeth-mazet.com
Salut Lycia,
super article très bien expliqué. Je me suis servi de ton CSS pour afficher le menu mobile à partir d’une certaine taille.
Je me demandais comment on peut faire pour que ce soit tout le design pour mobile qui apparaisse jusqu’à 980px ?
Passe une top journée.
Stephane.
Stephane, l’article sur les médias que ries devrait t’éclairer
Bonjour
Tout d’abord merci pour toutes les informations cela est d’une grande aide.
J’ai un soucis, j’ai créé un menu avec le Divi builder avec seulement le logo centré, sur destok tout est ok, mais sur tablette et mobile le logo ne ressort pas, j’ai juste la bande de menu vide, je galère depuis plusieurs jours pour essayer de trouver une solution mais impossible.
Pourriez-vous m’aider, pour infos je ne suis pas experte
Merci encore
Salut Sabrina. C’est bizarre, il y a peut-être un conflit ?
Bonjour Lycia !
J’ai un soucis sur mon site avec le menu. J’ai essayé la manip comme expliqué sur la vidéo mais rien à faire, rien ne bouge. Une solution à me proposer pour m’aider ? Merci infiniment !
Salut Julie, c’est quoi le problème ? Tu as le lien de ton site à partager ?
Bonjour Lycia,
Le site que j’ai conçu s’affiche correctement sur mon écran, mais sur d’autres (plus grands), il y a des blocs de textes qui se surperposent… voir qui disparraissent derrière des images ou qui passent au-dessus… Sais-tu d’où ce problème peut provenir ?
Merci beaucoup !
Salut Mathilde, c’est bizarre… As-tu touché à des marges ? Il vaut mieux éviter la plupart du temps…
Salut Lycia, ton site m’a été d’un grand secours pour dénicher des p’tits secrets intéressants, mais le monde n’étant pas parfait, DIVI ne l’est pas non plus! Pour les soucis quand on étirent les marges à la souris, j’ai galéré souvent car divi se fige et il faut recharger la page pour débloquer, j’ai fini par moi même, par le faire via des propriétés. Par contre, pour ce qui est du responsive à l’aide des 3 écrans sur certains paramètres, comme les marges, et bien parfois, ça ne fonctionne pas du tout ! parfois, il ne mémorise pas la valeur que j’attribue, ou au contraire, l’attribue à tout les écrans, ce qui ne convient pas évidement. Il faudrait une mise à jour de Divi avec une réelle mémorisation dans les fichiers CSS. Je ne les modifies pas moi même, car je suppose qu’a chaque enregistrement de page, le CSS est écrasé. Même si ce n’est pas une bonne méthode de cacher, je vais essayer de l’utiliser avec les modules récalcitrants. je tente de réalister mon 1er site avec WP-Divi.
PS: Chez l’hébergeur Infomaniak.com Tu as DIVI gratuitement ! 😉
Bonjour Lycia,
Merci pour ton blog truffé de super conseils, je fais mon site toute seule sous Divi et il m’a aidée à débloquer pas mal de problèmes. Merci mille fois !
Toutefois, il reste un point que je n’arrive toujours pas à saisir : pourquoi certaines modifications CSS réalisées dans le thème enfant ne modifient pas les données du thème parent ? Par exemple, le logo de mon menu n’apparaît pas sur mobile et tablette et quand je clique sur « Inspecter », je vois qu’une fonction .et_hide_mobile_logo est configurée dans le thème parent. Quand j’apporte des modifications dans le thème enfant pour corriger cela, rien ne bouge… le logo ne s’affiche toujours pas. Et pourtant, dans la Divi Toolbox, la case « cacher le logo » est bien décochée…
Sais-tu si cela est récurrent et d’où cela peut provenir ?
Merci de ton éclairage,
Belle journée à toi,
Gwladys
Salut Gladys, il peut y avoir plusieurs raisons : soit ton thème enfant ne fonctionne pas, soit le code que tu ajoutes dans le thème enfant n’appelle pas les bonnes classes. Sinon, as-tu essayé avec « !important » des fois ça règle le problème
Bonjour Lycia, en effet, le problème venait des marges ! Grâce à toi, j’ai tout remis à zéro et j’ai tout recommancé sans y toucher et en me concentrant sur la taille des modules. Merci !!
Super Mathilde !
Tu dois être très très très optimiste ou cacher certaines vérités, chez moi, ça bug à mort surtout le responsive.. je deviens fou avec ça. quand tu écrit une valeur de de marge en desktop, et que tu vas régler les autres vues, le desktop se met alors comme le tablette ou le phone. il faut revenir dessus et recommencer, c’est fréquent, puis tu n’as pas le même résultat dans les navigateurs par rapport à ce que tu as dans l’environnement divi, ça fonctionne pas mal en relatif, mais quand tu veux fixer un menu en place, tout se casse dans tous les sens, parfois même sans pouvoir y remédier.. Régler les marges à la souris, je n’essaye même plus, ça fige le curseur de la souris 9X sur 10 .. et j’en passe.. C’est moi qui suit super con ou Divi ne fonctionne pas vraiment comme on veut??
Salut Alain, tu dois passer par l’icône du téléphone qui se trouve dans chaque module pour régler les marges. Si tu par les icônes du builder en bas à gauche, cela te génère un aperçu mais ce n’est pas là que tu dois saisir les valeurs car effectivement ça change pour toutes les vues. Tu comprends ?
Bonjour Lycia,
Merci pour ton blog que j’ai lu.
Les boutons de navigation à l’intérieur des pages de mon site ne fonctionnent plus au dessus du breakpoint 980px (Desktop) : identifié sous inspection Firefox ou Chrome. Je ne sais pas pourquoi DIVI a inséré un max-width sur le fonctionnement des boutons. Comment contourner cette règle avec un media query CSS ?
Merci.
Au plaisir,
Patrick
Salut Patrick. Alors là tu m’en poses une belle ! Il faudrait regarder. C’est quoi les « boutons » de navigation ? Tu parles des éléments de menu ?
Bonjour Lycia,
Je vois que tu as répondu très rapidement, et moi j’ai laissé passer … dsl …
Mon site pas très compliqué est : https://allosoft.fr et tu peux voir par toi même. Les boutons sont ce qu’il y a de plus classique (En savoir plus, double flèche descendre, Accueil, etc) en pleine page et permettent des raccourcis rapides dans une page surtout en format smartphone. Mais je souhaiterais qu’ils fonctionnent en responsive quelque soit le terminal (desktop, ipad ou terminal). Or lorsque l’on dépasse une largeur d’écran au dessus de 980px (dont la valeur, je pense, est la largeur max Desktop programmée par DIVI), ils deviennent inactifs, et là est ma question de quel media query CSS il faudrait utiliser.
Merci.
Au plaisir,
Patrick
Bonjour Lycia,
Cela fait la 3ème fois que je poste et ma réponse disparaît … je ne sais pas pourquoi.
Regarde mon site allosoft.fr, au delà de 980px de largeur d’écran les boutons de navigations deviennent inactifs.
Je souhaiterais conserver le responsive quelque soit le type de terminal.
Merci.
Au plaisir,
Patrick
Il est manifestement impossible de te répondre sur ce site …
Salut Patrick, j’ai regardé le code. Il y a des valeurs bizarres, et même quand le les désactives, le menu n’est pas visible. Du coup, tu as dû utiliser des options qu’il n’aurait pas fallu, j’imagine. As-tu utilisé le thème Builder pour ton header ? Je serais toi, je referai un header de zéro (tu enregistres l’existant au cas où tu veux revenir en arrière) et tu coches le moins d’option possible dans les options de ton module Menu. Si le problème est toujours là, c’est que ça vient d’autre part. Il faut investiguer 😉
Désolée Patrick, tes messages arrivent très bien, c’est moi qui ai pris beaucoup de retard dans mes réponses. désolée…
Non Patrick, la réponse ne disparaît pas 😉 je ne l’avais juste pas encore validée… Je ne travaille pas sur Astuces Divi 100% de mon temps, malheureusement. J’aimerais pourtant, crois-moi, mais pour ça il faudrait que je rende l’accès à ce site payant ;-( Vous êtes très nombreux à m’envoyer vos demandes d’aide, mais pas toutes peuvent être résolues en quelques lignes… J’ai bien regardé ton site, j’ai pris 10 minutes pour faire cela (gratuitement) et je n’ai pas trouvé de réponses. Il faut que j’investigue davantage mais cela est impossible : je ne vis pas d’amour et d’eau fraiche 😉 Crois-moi que quand je trouve une réponse en moins de 5 minutes, je réponds à vos commentaires et vous donne la solution avec plaisir. Ton code est bizarre, il peut y avoir diverses raisons : as-tu désactivé la visibilité dans les options de ta section/ligne/module. Utilises-tu le menu natif ou le Theme Builder, as-tu ajouté du code personnalisé… Tu comprends bien que je ne peux pas trouver de réponses quand je n’ai que la partie visible de l’iceberg sous les yeux. Comme dit précédemment, je jetterais et je recommencerai, souvent le problème est réglé comme ça. C’est souvent plus rapide que de chercher pendant des heures.. Tiens-moi au courant.
Bonjour Lycia,
Ne te méprends pas et ne culpabilise pas, je ne te fais aucun reproche, c’est déjà très sympa que tu répondes :). C’est que sur AstucesDivi, il est perturbant de ne pas avoir toujours la même visibilité selon l’url que l’on choisit. On pense avoir posté, puis non, puis oui. Encore une fois 1000 excuses :).
J’utilise le Theme Builder, je n’ai pas rajouté de code et j’essaie de toucher le moins de paramètres possible.
Je vais investiguer et je te tiendrai au courant.
Merci encore.
Patrick
Y’a pas de souci Patrick 😉
Pour info, si tu utilises le theme Builder, c’est plus facile. Il suffit de jeter ton Header et de le reconstruire. Si l’erreur est partie, c’est que ça venait des paramètres. Si l’erreur est toujours là, c’est que ça vient d’ailleurs.
Bonjour Lycia,
Comment faire pour que lorsque que la taille de l’écran change tout ne se bascule pas et cause un réel désordre entre les différentes lignes et sections stp ? J’ai compris qu’il existe les breakpoints et media queries mais je n’ai rien compris en pratique.. Merci d’avance.
Bonjour, j’ai besoin d’un renseignement : Je souhaite avoir un logo responsive, en clair que le logo sur la version ordinateur ne sois pas le même que la version mobile.
J’ai tout essayé à mon niveau..
Quelqu’un a une solution ?
Merci
Salut Lara, il n’y a pas de solutions, sauf coder à la main ou utiliser un plugin qui propose cette fonctionnalité.
Bonjour, excusez moi de vous déranger, je vous contacte car je rencontre un problème avec mon menu déroulant hamburger pour la version gsm. Lorsque je suis sur la version ordinateur mon menu principale est classique avec les différentes rubriques étalées de gauche à droite (cela me convient très bien de la sorte), mais une fois sur téléphone pour une question de praticité (j’imagine), celui ci passe en type « hamburger ». Seul hic il n’est entièrement déroulant, que lorsque la page sous lui est suffisamment longue, sans quoi le menu déroulant se bloque en fonction de la longueur de la page +- tôt. Par exemple, sur une page comprenant beaucoup de contenu, je pourrais dérouler mon menu jusqu’à voir la boutique et le panier apparaitre dans la liste, mais si je suis sur la page de « remerciement » très maigre en contenu, je ne pourrais pas atteindre plus de la moitié de ma liste. En espérant, que vous pourrez peut-être m’aider (idéalement sans que je doive me défaire de ces 2 types de menu que je trouve fort bien plaisant pour chacune des versions..). Un grand merci à vous !
J’ajoute un commentaire de plus pour remercier Lycia qui a trouvé la solution au sujet de l’en-tête qui disparait dans le menu apparence-personnaliser. Pour tout ceux qui rencontrent cette problématique, la raison est bien un conflit existant entre une entête globale existant dans le divi thème builder et la création d’une entête dans la section apparence-personnaliser. La solution était donc de supprimer l’en tête dans le divi thème builder, afin de laisser réapparaitre la partie entête dans la section apparence-personnaliser.
Un grand merci pour votre aide !
Salut Arnaud, il n’y a pas vraiment de solution pour régler le problème… il faut bidouiller… soit tu supprimes quelques éléments de ton menu, soit tu ajoutes du contenu pour les pages « maigres ». Sinon, tu pourrais aussi ajouter de la marge en pixel en bas de tes pages uniquement sur la version mobile, ce qui remplacerait le manque de contenu et permettrait à ton menu de se dérouler correctement.
Oui Arnaud… en fait ce n’est pas réellement un conflit, les développeurs ont juste supprimer les options de menu dans Apparence > Personnaliser car c’est l’entête globale qui prend le dessus et donc ces options ne servent plus à rien dans ce cas…
Bonjour,
Avec DIVI, Elegant themes, je rencontre un problème de responsive dont je ne trouve nulle part la solution.
Dans mon header (fond + titre), je crée une section « normal » que je divise en deux colonnes, à gauche le texte et à droite une image png 200*200. Or cette image ne se réduit pas pour les sections tablettes et mobiles.
Le résultat est qu’en mode mobile, l’image (énorme) sort du cadre…
Une indication ?
Par avance, merci.
Bonjour,
Comment modifier la taille par défaut des H1 et H2 dans Divi child pour la version mobile et Desk ?
Merci par avance,
Sophie
Bonjour,
Je n’arrive pas à avoir le même affichage sur tous les types de téléphones…lorsque je fais les modifications pour une catégorie de téléphone par exemple et bien ça n’enregistre pas les autres catégories… Comment faire ?
Merci pour l’aide
Salut Manon, c’est normal, il ne faut pas agir sur les « vue responsive » mais il faut éditer les options responsives de chaque module que tu dois modifier (icône du téléphone au survol de la souris)
Salut Mathieu, normalement, Divi gère nativement le responsive mais si dans l’onglet « Dimension » tu as donné des valeurs en pixel « stictes », c’est normal que l’image ne se réduit pas. Il ne faut jamais toucher à l’onglet « Dimension » que ce soit pour les modules, les lignes ou les sections, sans connaitre les conséquences. Donc ton problème vient peut-être de là ?
Bonjour, tout d’abord je vous remercie pour le partage de vos connaissances, aujourd’hui je vous écris car je ne parviens pas du tout à régler ce point de rupture : entre 768 et 1013px, une partie des liens (dans la partie ‘Nos Derniers Articles’ en bas de la page d’accueil sont invisibles sur format tablette. Je ne connais pas le codage, je copie colle des codes css néanmoins. Mais là, je ne sais pas du tout comment faire, peut être pourrez-vous m’aider ? Je vous remercie par avance !
Bonjour,
Merci pour vos tutos qui me sont très utiles. J’ai fait énormément de progrès grâce à vous sur la taille des textes.
En revanche, je ne parviens pas à modifier le layout de certains encadrés en lecture sur téléphone ce qui me pose problème.
Si toutefois vous avez une astuce, je suis preneur !
Bonne journée
Thierry
Bonsoir Thierry. Regarde dans l’onglet « dimensionnement » tu peux augmenter le pourcentage de 80 à 100% par exemple, ça peut venir de là
Merci Lycia, tellement clair et précis !
Sur ma version mobile j’ai à droite et à gauche un espace blanc qui apparaît quand je bouge vers la droite ou la gauche.
Je ne sais pas comment rendre « fixe » (ou plein écran?) mon site, auriez-vous une piste ?
Merci infiniment
Il doit y avoir un élément dans ta page qui pose souci. Par exemple une vidéo ou un élément embed. Essaye de le supprimer et regarde si le souci disparaît
Il faudrait regarder, effectivement, c’est au cas par cas 😉
merci pour votre explicaton et j’aimerais savoir quel role joue l’unité de mésure vw dans l’adaptation des site au lieu du pixel
Le vw est une mesure en fonction du viewport (en fonction des écrans), un peu comme le %. C’est mieux que le px qui lui reste fixe.
Bonjour, je rencontre un soucis et je ne sais pas si quelqu’un connaîs la solution 🙂
Quand je cherche à modifier les séctions de ma page de manière responsive, dès que je clique sur le format « telephone » l’apperçu remonte tout en haut de la page et je dois modifier la section qui est plus bas à l’aveugle…
Quelqu’un saurait d’où vient de bug ?
HELP ^^
Bonjour, merci pour cet article très bien expliqué.
J’ai tout de même une question concernant les images d’arrière plan. Je m’explique, j’ai créé une section avec une colonne dont le fond est une image. J’ai insérer un module texte caler parfaitement à l’image d’arrière plan. Pour la version mobile aucun souci, mais pour la version bureau je n’ai pas le même rendu. Comment je peux faire pour que mon image soit positionne pareil sur tous mes écrans ? Merci
Bonjour Lycia,
Lorsque j’ajoute du CSS, notamment pour faire varier les break points de mon menu primaire, que l’ajout soit fait dans mon thème enfant ou dans le CSS additionnel de Divi ; cela ne fonctionne pas.
Le fait que le menu soit construit avec le thème builder, peut-il y avoir un lien ?
Cordialement.
Oui, il faut vérifier de s’appuyer sur les bonnes class CSS
C’est impossible, un site web est fluide, les images le sont donc aussi 😉