Muchos usuarios me hacen la pregunta: cómo optimizar la Diseño responsable Divi ?
Quiero decir: "Es la obra de un niño" 😉
Pero pensar en ello, las opciones La responsabilidad de Divi No me mires. Están aquí. Pero un poco escondido...
En este artículo, le sugiero que eche un vistazo a la Diseño responsable en Divi en orden mejor gestiona tus tamaños de pantalla y obtener un sitio web completamente personalizado.
Nota: Desde agosto de 2019, las opciones responsables del tema Divi han sido mejoradas como se muestra en este vídeo:
Y desde noviembre de 2020, nuevas características han perfeccionado el diseño sensible con Divi (ver Artículo aquí), lo discutiremos más adelante en este artículo ...
- 1 – ¿Por qué optimizar el diseño responsable de su sitio web Divi?
- 2 - ¿Cómo puedo evitar el problema de responder con Divi?
- 3 – Gestión de Diseño Responsivo Nativo en Divi
- 4 - Gestionar tamaños de fuentes predeterminados para todo el sitio
- 5 - Vistas responsivas en el constructor Divi
- 6 - Gestión responsable directamente en los módulos Divi
- 7 - Condición de visibilidad de pantalla
- 8 - Separar secciones para cada dispositivo? ¡No recomendado!
- 9 - Manage Divi Native Menu Responsive
- 10 – Opciones para prever la respuesta de Divi
- 11 - Mejorar Divi Breakpoint con Consultas Media
- 12 - ¿Qué es Breakpoint o Stop Point?
- 13 - ¿Qué son los medios de búsqueda?
- 14 - El principio de las consultas de medios de comunicación para una gestión precisa del diseño responsable
- 15 - ¿Cómo identifico los medios de comunicación de preguntas de Divi?
- 16 - Caso concreto: el menú receptivo correcto de Divi
- 17 - En conclusión: Diseño responsable Divi, no es tan complicado!
1 – ¿Por qué optimizar el diseño responsable de su sitio web Divi?
Con más 9.500 millones de dispositivos móviles en el mundo, tendrías que estar loco para no optimizar el diseño sensible de su sitio¿Verdad?
Esta es una buena razón para crear un sitio que es tan legible en tableta y móvil como en escritorio !
Los usuarios están navegando cada vez más desde sus dispositivos móviles, ya sea durante pausas o en 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 crucial que tengan una buena impresión para volver más tarde a visitarlo desde su computadora.
¿Sabes cuántos visitantes de tu sitio provienen de terminales móviles?
Usted puede comprobar esto desde sus datos Google Analytics, ficha Audience ó Mobile > Sinopsis.
Por ejemplo, en 2019, el 12,5% del Divi El tráfico de propinas vino de móviles y tabletas.
Este es un pequeño porcentaje debido al tema: Tutoriales Divi se utilizan principalmente en los escritorios. Eso tiene sentido.
Pero si el tema de su sitio está listo, es muy probable que la mayoría de su tráfico viene de pantallas móviles. Este es a menudo el caso con sitios de noticias o estilos de vida...
Descubre todo recursos en respuesta en el blog oficial de Temas Elegantes.
2 - ¿Cómo puedo evitar el problema de responder con Divi?
Antes de ir más lejos en este artículo donde todo se explica sobre opciones de diseño sensible, me gustaría destacar un punto muy importante: pocos son errores sensibles con Divi si utiliza esta herramienta de la manera correcta.
Lo que quiero decir es que acompaño a muchos usuarios cada año y pude detectar un error común: cambios en los márgenes de manera intemporal.
Por supuesto, el Editor Visual está súper bien hecho, le permite hacer cambios a WYSIWYG (Lo que usted ve es lo que usted obtiene) que le permite modificar su diseño en tiempo real. Pero esto tiene consecuencias: si usted crea un diseño perfecto (capa) para su pantalla, sabe lo que puede no estar en otros tamaños de pantalla. Y ahí es cuando el Errores responsables.
El error actual es "shoot" on margins "a la vista" usando el ratón. Usted entonces piensa que esta es la mejor manera de colocar este o ese elemento en el lugar deseado, pero es un gran error! De esta manera, puede obtener márgenes negativos o márgenes "mad" que plantean un problema en tabletas o smartphone.
Te daré mi pequeño secreto, el que doy a todos mis clientes o estudiantes: Nunca toco los márgenes (márgenes internos o márgenes externos) excepto cuando realmente lo necesito! Y lo más importante, Nunca les disparo con el ratón como se muestra a continuación:
Prefiero pasar por las opciones de cada módulo necesito cambiar los márgenes, a través de la pestaña Ajustes " Estilos " Spacing. Así que amo el márgenes a pixel y elimina el trabajo después.
De esta manera, no tendrá ninguna sorpresa o preocupación sobre otros tamaños de pantalla.
Si utilizas el Constructor Visual de la forma en que lo abono (este de arriba) y todavía encuentras problemas de respuesta, puedes continuar este artículo donde sin duda encontrarás respuestas.
Si, por otro lado, has "drawn" los márgenes con el ratón, ya puedes comprobar si los problemas se resuelven poniendo los márgenes de vuelta a 0px. Esta es la primera pista para explorar...
3 – Gestión de Diseño Responsivo Nativo en Divi
Puede ser necesario aclarar que el tema Divi es un tema de WordPress sensible. Aunque este es el caso para la mayoría de los temas de WordPress hoy.
También es por esta razón que WordPress ha tenido un gran éxito.
Los antiguos sitios HTML de los años 2000 dumping e inapropiado para una pequeña lectura de pantalla. Palabra Prensa y su Temas responsables han ofrecido a los creadores del sitio una solución rápida y simple para adaptarse a todos los tamaños de pantalla.
Sin embargo, hoy hay cientos de tamaños de pantalla en el mercado. Lo cual no fue el caso al principio. Hay pantallas Android, tabletas, iPhones, etc. Y con cada nuevo smartphone puesto en el mercado, descubrimos un nuevo tamaño de pantalla... ¡Otra vez!
Por lo tanto, es probable que el sitio que acaba de realizar con Divi hoy, muestra algunos Errores responsables En unos meses... ¡Sí!
Y tal vez en unos días, cuando tu novio, que utiliza un teléfono inteligente fuera de los maricas, dirás: "el menú de tu sitio es raro en mi teléfono"...
Lo has comprobado. todas las versiones de su sitio con todos los terminales que tenías a mano pero tampoco eres una tienda de teléfonos.
De todos modos. Me conforta en la idea de que un sitio nunca es realmente perfecto... ¡Lo importante es hacerlo evolucionar!
Exacto. Divi nos ofrece muchas opciones responsables en varios lugares, que descubriremos a continuación:
4 - Gestionar tamaños de fuentes predeterminados para todo el sitio
La primera de las cosas que puedes hacer para optimizar Diseño responsable por Divi, es establecer el tamaño de la fuente según el tamaño de las pantallas.
Divi ofrece esta opción en sus opciones de personalización de personalización:
- Vaya a la pestaña Apariencia √≥ Personalizar √≥ Estilos en móvil.
- Establecer la vista de la tableta
- La vista telefónica
- La pestaña "Meta Mobile" solo permite definir el color pero en ningún caso el tamaño de la fuente.
Para móviles y tabletas, puede actuar en:
- Altura de la sección
- Altura de la línea
- Tamaño del cuerpo de texto
- Tamaño de valores
Las opciones paran allí y no permiten definir un tamaño de fuente de acuerdo con las etiquetas H1, H2, H3, etc. Lo manejaremos de manera diferente.
Pero mientras tanto, ya puedes establecer el "default" aquí, en esta pestaña, no cuesta nada
5 - Vistas responsivas en el constructor Divi
Otra característica interesante: la opción simple que ya has notado: Vistas responsivas del Divi Builder.
Cuando activas el Editor Visual en una de tus páginas, puedes controlar la apariencia del diseño según 3 tamaños de pantalla:
- Escritorio
- Tablet
- Móvil
Puede cambiar fácilmente de una vista a otra abriendo el pequeño botón púrpura en la parte inferior de la pantalla y haciendo clic en el icono deseado:
Estas opciones de visualización sólo para comprobar la representación visual en las 3 versiones. Pero aquí no controlarás las diferentes versiones. Te sugiero gestionar este tipo de respuesta directamente desde Módulos Divi Preocupada.
¿Aún no usas a Divi? ¿Dudas? Descubre el tema Divi aquí. !
6 - Gestión responsable directamente en los módulos Divi
A menos que tú desarrollar su sitio en "móvil primero", la versión que se desarrollará primero será la Versión de escritorio. Todas las secciones, líneas y módulos de Divi que insertas en tu diseño serán optimizados para la versión de escritorio.
El Divi CSS Insertó una hoja de estilo para optimizar, por defecto, las versiones móviles.
Por ejemplo, si insertas un línea 4/4 dentro de una sección, pasará automáticamente 2/2 en versión tableta y en 1/1 en versión móvil. Así que de este lado no tienes nada que tratar con Divi.
Sin embargo, donde usted necesita prestar atención particular, es dentro de sus módulos.
Si deseas su sitio se ajusta perfectamente a diferentes tamaños de pantalla, necesitará corregir ciertos elementos a medida que crea su sitio.
Por lo tanto, necesitará editar ciertos elementos para que sean totalmente compatibles en la versión "pequeña pantalla"...
6.1 – Hacer que el texto responda con Divi
El tamaño de los títulos y el cuerpo del texto son elementos que merecen especial atención.
La lectura es un criterio importante para mejorar la experiencia del usuario.
Aquí está cómo cambiar el tamaño de la fuente según el tamaño de la pantalla:
- Edite el módulo que contiene su texto.
- En el ratón sobre el tamaño del texto, verá un pequeño icono móvil
- Haga clic en este icono...
- Los 3 tamaños de pantalla aparecen como una pestaña.
- Seleccione la ficha Tablet o pestaña Teléfono para actuar en este tamaño
- Establecer un valor de píxel según el tamaño de la pantalla.
Importante: este pequeño icono móvil que permite actuar en la respuesta es disponible en la mayoría de las opciones de cada módulo.
Nota, también, que hay otra manera de gestionar estos tamaños de fuente de una vez por todas: establecer el Publish Content module (Módulo de contenido de bolsillo) disponible en el Tema del constructor.
6.2 - Jugar en 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 propósitos. Por ejemplo, usted podría establecer un color de título diferente para cada versión de su sitio!
Esto funciona de la misma manera que fijar el tamaño, excepto que actuará en el color.
En la imagen anterior, puedes ver que he puesto:
- un color negro para títulos en versión de escritorio
- un color rosa para títulos en versión tableta
- un color púrpura para títulos en versión móvil
Tenga en cuenta, sin embargo, que tendrá que tener cuidado de seleccionar el artículo en el que desea actuar. En el ejemplo de esta captura de pantalla, se puede ver que he seleccionado la Título H3 antes de definir su color.
Esto es sólo un ejemplo, pero usted entiende, no habrá más límite en términos de personalización y optimización dependiendo de tamaños de pantalla.
7 - Condición de visibilidad de pantalla
En algunos casos, usted puede decidir mostrar algunos elementos en el móvil y otros en el escritorio ... pero no ambos. ¡Buenas noticias, también es posible!
Este es a menudo el caso con un botón "llamado". Sólo es relevante en el móvil (aunque algunos escritorio puede hacer llamadas).
Divi entonces le permite establecer una condición de visibilidad dependiendo de las pantallas.
- Modificar el módulo para optimizar
- Vaya a la pestaña Avanzadas √≥ Visibilidad
- Compruebe en qué versiones su artículo no debe aparecer en. En el ejemplo anterior, escondí mi botón de llamada en las versiones Tablet y Oficina así que solo está disponible en la versión teléfono.
- Guarda.
El Diseño responsable, no es sólo Optimización visual ¡Oye! También debe tener en cuenta optimización de la experiencia del usuario.
8 - Separar secciones para cada dispositivo? ¡No recomendado!
Con la opción de visibilidad que acabamos de ver, algunos usuarios podrían estar tentados a desarrollar una sección, o incluso una sección. diseño, diferente para cada versión, dentro de la misma página...
¡No hagas esto!
Usted puede utilizar las opciones de visibilidad espaciadamente, como un botón de llamada por ejemplo, pero esto no debe ir más lejos, por varias razones:
- Esto no óptima para SEO Incluso si estas secciones "ocultas" no son visibles para un humano, los robots de Google los verá. Puede que no entiendan por qué el contenido está duplicado.
- Con cada actualización, necesitará modificar todas las versiones de la sección: ¡qué pérdida de tiempo!
- Si usas 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 gestionar Diseño responsable Divi.
Por lo tanto, por todas estas razones, prefiere las opciones nativas Divi en lugar de la duplicación de sus secciones dependiendo del tamaño de las pantallas. Y si esto no es suficiente, que todavía nota errores de respuesta, es que el problema viene de la punto de ruptura y Consultas de medios.
Nota: hace unos años, había publicado un artículo sobre especial preocupación de receptividad con Divi e iOS. Este artículo todavía parece relevante en algunos casos.
Puedes probar Divi gratis: ir a esta página y haga clic en "Pruébalo GRATIS"
9 - Manage Divi Native Menu Responsive
Anteriormente en este artículo, te dije que "Icono móvil" para optimizar la respuesta estaba disponible para la mayoría de las opciones en cada módulo.
Sin embargo, si usted no utiliza el Theme Builder y que usas un site header Divi clásico, con un menú de navegación creado desde el Customizer (menu Apariencia > Personalizar), estas opciones de optimización sensibles no están disponibles.
Como se puede ver en la captura anterior, el tamaño de texto del menú no ofrece opciones para versiones móviles y tabletas. Por defecto, todas las versiones de su sitio tendrán una fuente del mismo tamaño para su menú principal.
Es a menudo por esta razón que los lectores de Divi consejos contactan conmigo diciéndome "Mi menú Divi no es correcto en el móvil". Hey, sí, vamos a tener que cambiar eso con CSS, el famoso Consultas de medios…
10 – Opciones para prever la respuesta de Divi
Desde noviembre de 2020, es más fácil ver cómo será su sitio web en diferentes dispositivos y tamaños de pantalla.
Puede ajustar manualmente el tamaño de la vista previa, cambiar el ancho previsual predeterminado de su teléfono y tableta y cambiar entre presets de dispositivos comunes.
Este vídeo resume las principales características:
Puede cambiar el ancho de vista previsual predeterminado teléfono y Tablet para que cada vez que entre en un modo de vista previa, o cuando cambie entre las opciones de respuesta, el tamaño de la ventana refleja el ancho deseado.
Cambia el tamaño de tus pantallas y simplemente haz clic en el botón « Hacer vista predeterminada » para que la próxima vez que cambie a este modo de visualización, su tamaño de vista previa personalizado será reflejado.
Para más información, consulte el artículo oficial sobre el Sistema de vista previa reactiva Divi.
11 - Mejorar Divi Breakpoint con Consultas Media
Alguna palabra Los temas de prensa permiten definir el puntos de ruptura (el punto de ruptura), que permite realmente adaptar el diseño del sitio a los tamaños de pantalla actuales. Pero Divi no propone esta opción como nativo.
El Divi CSS breakpoint (o Divi Breakpoint) y el Consultas de medios están estrechamente relacionados con Diseño responsable.
Si desea obtener un Sitio de Divi plenamente receptivoTendrás que pasar por estos pasos decisivos.
Aunque Divi administra nativamente casi todo un sitio web sensible – como hemos visto a lo largo de este artículo – es posible que algunos elementos de su diseño aún no estén completamente optimizados para todos los tamaños de la pantalla...
Entonces necesitará añadir algunos CSS para corregir esto. ¡Pero no entres en pánico! ¡Estamos hablando de CSS y no de Javascript u otro lenguaje complicado! Digamos que la continuación de este artículo debe ayudar a los novicios a corregir algunos Errores responsivos con Divi.
12 - ¿Qué es Breakpoint o Stop Point?
Cuando una Palabra El tema de la prensa está codificado para ser sensible, los desarrolladores del tema definen reglas CSS que pueden ser diferentes dependiendo del tamaño de las pantallas.
Por lo tanto, estas reglas de CSS se emiten de forma diferente según el tamaño del píxel. Esto es lo que llamamos Punto de ruptura o Punto de ruptura.
Esto punto de ruptura es por lo tanto la transición de un tamaño de pantalla a otro.
Una vez estos puntos de ruptura se definen, sólo utilizar el Consultas de medios para emitir reglas por tamaño de pantalla.
El tema Divi tendría 6 puntos de descanso (como se explica en esto Artículo oficial) :
- Oficina grande : 1405px y más
- Oficina estándar: entre 1100px y 1405px
- Laptops y tabletas grandes: entre 980px y 1100px
- Tablas: entre 768px y 980px
- Smartphones y tabletas pequeñas: entre 320px y 768px
- Smartphones: entre 320px y 480px
Las preocupaciones responsivas que puede encontrar a veces pueden provenir de uno de estos tamaños. Por ejemplo, la transición entre la versión de la computadora y la versión de la tableta es demasiado temprana o demasiado tarde.
Para empezar con Divi, descubrir todos los artículos para empezar tranquilamente!
13 - ¿Qué son los medios de búsqueda?
El Consultas de medios son consultas multimedia que se pueden utilizar dentro de hojas de estilo CSS para definir reglas que se aplicarán en determinadas condiciones.
El Consultas de medios puede afectar la impresión, contenidos accesibles destinados a daños visuales (braille...), pequeñas pantallas, proyecciones de pantalla grande, proyecciones de televisión, etc.
Pero sobre todo, Consultas de medios servirá marca ciertos tamaños de pantalla, independientemente del destino, utilizando el valor TODOS o SCREEN.
14 - El principio de las consultas de medios de comunicación para una gestión precisa del diseño responsable
Es buena teoría, pero vamos a practicar... Aquí hay 3 tipos de sintaxis Media Consultas que le permitirán actuar en diseño sensible :
14.1 - Diseño responsable hasta cierto tamaño de pantalla
Aquí está la sintaxis para las reglas CSS aplicables hasta cierto tamaño de pantalla:
@media screen and (max-width: 980px) {
Placez votre CSS ici
}En este ejemplo, las reglas CSS que se utilizarán se aplicarán en pantallas que van desde 0px a 980px.
Es el prefijo. max- que indica el valor de tamaño máximo. Desde 981px, las reglas de CSS emitidas aquí ya no funcionarán.
Pequeña variante:
@media all and (max-width: 980px) {
Placez votre CSS ici
}En este fragmento, el valor TODOS reemplazado el valor SCREEN. Esto significa que las reglas se aplicarán a todo tipo de medios (no sólo pantallas). En ambos casos, actuarás en el diseño sensible de su sitio Divi. Valor TODOS será más amplio que el valor SCREEN.
14.2 - Diseño responsable de un cierto tamaño de pantalla
Por el contrario, también se puede utilizar los medios de búsqueda para actuar en el diseño de un cierto tamaño de pantalla. En este caso, aquí está la sintaxis:
@media screen and (min-width: 980px) {
Placez votre CSS ici
}o
@media all and (min-width: 980px) {
Placez votre CSS ici
}Todas las reglas de CSS que emite aquí sólo se aplicarán a pantallas de más de 980px.
Es el prefijo. min- que permite definir el valor mínimo desde el cual las reglas CSS serán tenidas en cuenta por el navegador.
14.3 - Diseño responsable entre dos tamaños de pantalla
Gracias Consultas de mediosTambién es posible emitir reglas CSS para un tamaño de pantalla entre dos valores. Aquí hay un ejemplo de sintaxis:
@media screen and (min-width: 980px) and (max-width: 1100px) {
Placez votre CSS ici
}Las reglas de CSS que colocar aquí sólo se tendrán en cuenta para las pantallas con un tamaño entre 980px y 1100px.
Para ir más lejos con las consultas de medios, recomiendo esto excelente Artículo d.
15 - ¿Cómo identifico los medios de comunicación de preguntas de Divi?
Ahora has entendido que Divi Breakpoints se han definido según ciertos tamaños de pantalla y que Consultas de medios permitir actuar en...
Puede agrupar ciertos tamaños de pantalla y actuar globalmente en el diseño sensible de su sitio Divi, en 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 desea refinar la pantalla de ciertos elementos de su sitio y ser muy preciso en el tamaño de las pantallas, puede utilizar Tamaños de pantalla "Oficial" Identificado anteriormente en este artículo, a saber:
- Oficina grande : 1405px y más
- Oficina estándar: entre 1100px y 1405px
- Laptops y tabletas grandes: entre 980px y 1100px
- Tablas: entre 768px y 980px
- Smartphones y tabletas pequeñas: entre 320px y 768px
- Smartphones: entre 320px y 480px
Aquí hay un Divi Queries Media Dryproof Sheet según 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 sigue siendo sólo la teoría y es mejor inspeccionar su sitio usando un navegador (Firefox o Chrome) para definir qué puntos de ruptura presentan un preocupación por la capacidad de respuesta.
Para entender mejor, propongo un caso concreto...
Quieres personalizar ¿Divi como profesional? Descubre todos los tutoriales!
16 - Caso concreto: el menú receptivo correcto de Divi
La mayoría optimizaciones de diseño sensible puede ser resuelto nativo dentro de los módulos Divi opciones a este efecto, como se explica en este artículo.
Pero algunas partes del sitio pueden no responder positivamente al pasaje de una pantalla a otra. Esto puede deberse al tamaño de su fuente, el tamaño de su logotipo, etc.
Parte del sitio que puede ser delicado es el Header. El encabezado de su sitio puede ser adecuado en móvil y escritorio, pero no en la tableta. Por supuesto, este es un ejemplo entre tantos otros...
Para explicar mejor cómo administrar los diferentes tamaños de pantalla y nivel a ciertos errores, propongo un ejemplo concreto de un bug presente en Divi...
16.1 - El inspector del navegador: su mejor aliado!
Antes de empezar cualquier cosa, sabe que Inspector de su navegador web favorito se convertirá en tu mejor amigo en buscar sitio web más sensible !
Si lees esta frase, crees que hablo chino, ¡no te preocupes! Yo también, hace unos años, no sabía lo que era un "inspector" (excepto Colombo, LOL!).
Así que empecemos desde el principio: tienes un problema de respuesta en su sitio Divi ? Reúnete. su sitio y un navegador web como Firefox o Chrome.
Hacer uno clic derecho en cualquier lugar de la página de su sitio... Las opciones están disponibles para usted:
- Examinar el elemento : para Firefox
- Inspección : para Chrome
¡Genial! El código de la página aparece en una ventana que se parece mucho a esto:
¡Aquí, desde aquí, podemos empezar!
16.2 – Identificar el tamaño de la pantalla que plantea un problema sensible
Con el inspector de su navegador favorito, podrá activar la opción Diseño responsable y comprobar los tamaños de la pantalla en pixel:
- Abra su sitio web en Firefox o Chrome.
- Hacer uno clic derecho, en cualquier lugar de su sitio (donde existe el fallo sensible).
- Haga clic "Revise el elemento" o en "Inspecto" dependiendo de su navegador.
- Haga clic Icono móvil/tablet, situado a la derecha o a la izquierda del menú del inspector.
- Arrastre la ventana para determinar Breakpoint by Divi y elevar el tamaño en pixel.
Este vídeo explicará cómo identificar el tamaño de la pantalla para corregir:
En este video, sin duda notó:
- El menú móvil de Divi llega tan pronto como la pantalla mida menos de 980px.
- Así que el menú normal aparece en 981px.
- Entre 980px y 1160px, el menú está en 2 líneas, el logotipo se superpone, los elementos se superponen.
- Desde 1160px el menú principal de Divi se vuelve correcto.
Con estos elementos identificados, será sencillo corregir la atención al diseño sensible en el menú principal.
Será necesario modificar la regla CSS que "dice" que el menú móvil sólo ocurre en pantallas de menos de 980px. La idea es aumentar este valor para que el menú móvil ocurra tan pronto como las pantallas estén por debajo de 1160px.
16.3 - Corrección responsable con una nueva Querie Media
Para emitir una nueva regla CSS, necesitará una Divi child theme o simplemente utilizar la opción añadir nativo CSS :
- Vaya a la pestaña Apariencias √≥ Personalizar √≥ CSS adicional
- Entra en Media Querie que reescribe la regla básica de Divi CSS. Esta nueva solicitud debe verse así:
/* 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, muestra el menú móvil y esconde el menú normal". Así que, por defecto, más allá de 1160px, se mostrará el menú normal.
Recuerda hacer clic en « Publish » para salvar tus cambios.
Sin embargo, muchas otras opciones podrían haber sido consideradas... Por ejemplo: reducir la fuente del menú y el tamaño del logotipo en las pantallas entre 980px y 1160px (tamaño donde el menú tenía un problema con la capacidad 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 indicativos porque, por supuesto, depende de varios criterios que cambiarán dependiendo de los sitios:
- El tamaño de la policía,
- La policía usó,
- El tamaño del logotipo,
- Y sobre todo, el número de elementos 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: Diseño responsable Divi, no es tan complicado!
Tengo mucha curiosidad: ¿sabías todas estas opciones de Diseño responsable Divi ? ¿Y utiliza Media Queries para corregir ciertas reglas CSS basadas en el tamaño de la pantalla?
En este artículo, se puede ver que es bastante fácil corregir algunos errores sensibles, simplemente con las opciones nativas de Divi. Y si eso no es suficiente, las consultas de medios vendrán a tu rescate...
Finalmente, propongo una lista de lectura en la Gestión de responsabilidades bajo Divi :
- Haga el paralaje posible en la versión móvil!
- Cómo utilizar el CSS personalizado de Divi para la edición receptiva avanzada
- Edición reactiva y de manguera con Divi
- Utilizando las nuevas opciones de altura y anchura de Divi para crear un diseño sensible
- Divi Breakpoint and Media Queries.
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 😉
Bonjour Lycia,
merci encore pour tout ce que vous faites et aussi de répondre à ma question 🙂
Quand je créé un module texte en version Ordi (grande taille écran)
et que je fait ensuite des changements différents sur la version téléphone dans l’onglet Contenu, ensuite
quand je met à jour mon texte sur la version ordi, il ne prends en compte mes changements (texte, image, etc) dans la version tél !
Comme ci il manquait une synchro entre les 2 !
Est-ce parce qu’il ne faut pas toucher à la partie téléphone au niveau du Contenu (dans la boite de dialogue DIVI)
Y a t il une solution de synchronisation ? Faut-il en faire un élément global (même si ça ne servira pas…) autres…
Merci pour la réponse, bonne continuation
7hilippe
Salut 7hil ! Je vois très bien ce que tu veux dire ! La solution est toute simple : tu dois activer le petit icône du téléphone et donner des valeurs différentes pour les tailles d’écran. Visualiser la version téléphone ne te permet pas de donner des valeurs pour cette taille d’écran. Cela est corrigé dans Divi 5, ouf !
Bonjour
Oui sur le papier c’est un jeu. Mais mais ça arrive souvent que quand on modifie en utilisant la fonction par exemple smartphone ça modifie aussi sur la version PC et vice-versa. Notamment avec le menu.
Mecnun
Bonjour
Rien à voir avec le sujet . Lycia mais est-ce que tu pourrais me donner le lien de l’article où tu parles de tous les extensions à télécharger lorsqu’on crée un site ainsi que toutes les premières choses à faire qui sont essentielles stp. Je n’ai pas réussi à le retrouver.
Mecnun
Coucou Mecnun est-ce celui ci : https://la-webeuse.com/extensions-indispensables-wordpress/
Merci
Merci