¿Cómo puedo cambiar el tamaño de mis imágenes en Divi?

Actualizado el 30/10/2020 | Publicado el 21/6/2018 | 58 comentarios

He aquí un tema espinoso: el tamaño de las imágenes en Divi. De hecho, no es sólo Divi, todos los temas de WordPress utilizan tamaños de imagen específicos y muchos usuarios pueden sentirse frustrados en algún momento.

Cuando doy Formación en Divi y WordPress, hay muchas preguntas que surgen cada vez:

  • ¿por qué mi imagen está recortada - cortada - recortada?
  • ¿por qué mi imagen en formato vertical aparece en formato horizontal?
  • ¿por qué mi imagen está ampliada?

Sé que es bastante molesto. Habrá dos soluciones para remediarlo:

  1. o te pliegas a tu tema y utilizas el formato adecuado para que tu imagen no sea recortada involuntariamente.
  2. o haces algunas modificaciones para que sea el tema que se adapte a tus necesidades.

Seguro que prefieres la segunda solución, ¿no? En este artículo, vamos a tratar todos estos puntos. Aquí está el programa:

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

1. ¿Cómo gestiona WordPress sus imágenes?

En primer lugar, tenemos que entender lo que hace WordPress cuando se sube una imagen a la biblioteca de medios.

Por ejemplo, usted sube una imagen con un tamaño de 1280px * 720px a su biblioteca => este es el tamaño original de su imagen.

Ahora, si miras los archivos de tu sitio, vía FTP (Filezilla), en la carpeta www > wp-content > uploads > year folder > month folder, te darás cuenta de que WordPress ha multiplicado tu imagen en 5, 6, 7 u 8 archivos o incluso más! Esto se denomina "THUMBNAILS" o "VIGNETTES".

¿Aún no usas Divi? He aquí 10 razones para elegir este tema !

vignettes générées lors de l'upload
Se generaron 10 miniaturas durante la carga además de la original - en amarillo: la imagen original - en azul: las imágenes generadas por WordPress - en rosa: las imágenes que necesita Divi

Sin embargo, si vas a la administración de tu WordPress, a la pestaña Ajustes > Medios sólo verás 3 tamaños de miniaturas: tamaño de miniaturas, tamaño medio y tamaño grande.

Estos tres formatos son los formatos estándar que necesita WordPress (por ejemplo, para mostrar las miniaturas de sus medios en la biblioteca).

taille des médias de WordPress
Los tamaños de los medios de WordPress están disponibles en la pestaña Ajustes > Medios

Entonces, ¿de dónde vienen las otras miniaturas generadas? Es el tema, por supuesto. Tu tema también necesita miniaturas para funcionar. Cada tema tiene diferentes visuales por lo que cada tema necesitará diferentes formatos de imagen.

¿Lo sabías? Puede probar Divi de forma gratuita visitando en esta página y haciendo clic en "PRUEBA GRATUITA

2. ¿Cómo maneja Divi sus imágenes?

Como acabamos de ver, WordPress necesita 3 formatos de imagen, pero el Tema DiviEn cuanto a él, necesita 7 formatos adicionales, aquí están:

Formato de imagen n°1: et-pb-post-main-image

module blog de Divi en mode grille
Módulo Blog Divi en modo rejilla

Este es el formato utilizado para las pegatinas del Módulo BLOG en versiones "grid" y "slide". Este formato se establece en 400px * 250px - una proporción de 16:10 (ligeramente diferente de 16:9).

También puede interesarle esto: cómo obtener imágenes cuadradas para los módulos Blog, Galería y Portafolio.

Formato de imagen n°2: et-pb-post-main-image-fullwidth

image à la une en haut d'un article Divi
Imagen destacada en la parte superior de un artículo de Divi

Este es el formato utilizado para el imágenes en el punto de mira que aparecen en la parte superior de cada uno de sus artículosjusto debajo del título. Este formato se establece en 1080px * 675px - todavía una relación de 16:10.

Formato de imagen n°3: et-pb-portfolio-image

module galerie en mode "grille - paysage"
Módulo de la galería en modo "cuadrícula - paisaje".
Modue "Portefeuille" (porfolio / projet) en mode "grille"
Módulo "Portfolio" (cartera / proyecto) en modo "grid

Este es el formato utilizado para el Módulo de Galería y el Módulo de cartera en modo "Rejilla". (Portafolio que está relacionado con el tipo de post personalizado "Proyecto") cuando en la página de miniaturas (con todas las entradas del módulo). Este formato utiliza las dimensiones de 400px * 284px - una relación (más bien bastarda, perdón por la palabra) de 100:71.

Formato de imagen n°4: et-pb-portfolio-module-image

Este formato utiliza las dimensiones 510px * 382px. Más allá de eso, tus imágenes serán recortadas.

Formato de imagen n°5: et-pb-portfolio-image-single

Image à la une des Projet Divi
Imagen destacada de Divi Projects

Este es el formato utilizado para la imagen de portada que aparece en la parte superior de cada uno de sus proyectos (Cartera) sino también para las imágenes de la página de proyecto del módulo de cartera en modo "Pantalla completa".

Este formato utiliza las dimensiones de 1080px * 9999px. Por lo general, ninguna de sus imágenes tendrá esta dimensión, pero esto significa que su imagen sólo se recortará si es superior a 9999px.

En otras palabras, estas imágenes podrán mantener su proporción tanto en vertical como en horizontal. Estas son las únicas imágenes en Divi que no están recortadas.

Formato de imagen n°6: et-pb-gallery-module-image-portrait

Module Galerie en mode "grille - portrait"
Módulo de galería en modo "cuadrícula - retrato"

Este es el formato utilizado para el Módulo de la galería ajustado a "Modo Retrato".. Este formato utiliza las dimensiones de 400px * 516px - una proporción de 100:129.

Formato de imagen #7: et-pb-post-main-image-fullwidth-large

Module Image en pleine largeur
Módulo de imagen de ancho completo

Este es el formato utilizado para el módulo "full-width image" (imagen de ancho completo). Utiliza las dimensiones 2880px * 1800px. Más allá de estas dimensiones, su imagen será recortada.

3. ¿Cómo obtener imágenes correctas manteniendo el tamaño de las imágenes de Divi?

Ahora que hemos revisado los diferentes tamaños de imagen utilizados por el tema Divi, te ayudará a entender qué imágenes utilizar si quieres mantener los tamaños propuestos por Divi...

3.1 Comprender la importancia del RATIO (o INFORME)

Si te fijas bien, lo más importante para conseguir los resultados adecuados para mostrar tus imágenes en WordPress es tener en cuenta la proporción. De hecho, las dimensiones tienen poca importancia y a menudo son las más difíciles de entender. He aquí algunos ejemplos:

La proporción 1:1

Ration 1:1
Imagen de proporción 1:1

Esta relación 1/1 significa que la anchura es equivalente a la altura. Por lo tanto, una imagen de 1000*1000px, una imagen de 750px*750px o incluso una imagen de 500px*500px tendrá siempre la misma proporción.

La proporción 3:2

Ration 3:2
Imagen de proporción 3:2

Esta proporción significa que la anchura equivale a 3/3 y la altura a 2/3. Así, una imagen de 900px de ancho tendrá que tener una altura de 600px para mantener una proporción de 3:2. Lo mismo ocurre con las imágenes de 1800px*1200px, siempre tendrán una proporción 3:2.

La proporción 4:3

Ration 4:3
Imagen de proporción 4:3

Estas imágenes tendrán una anchura de 4 cuartos para una altura de 3 cuartos. Por ejemplo: 1000px*750px o 1600px*1200px etc...

La relación 16:9

Ration 16:9
Imagen con proporción 16:9

Esto funciona como los otros ratios, excepto que seguramente necesitarás una calculadora para hacer este cálculo: [(ancho de una imagen)/16*9 = altura]. Este formato es muy utilizado en vídeo: 1920px * 1080px.

La relación 16:10

Ration 16:10
Imagen con proporción 16:10

Este formato es menos conocido, se aproxima al 16:9 y es el que utiliza Divi, en particular para las "imágenes de portada" de los artículos y las miniaturas del "módulo de blog en modo cuadrícula".

La proporción es nada más y nada menos que matemática y hay un sitio que le permitirá conocer la proporción de sus imágenes simplemente rellenando la anchura y la altura de la misma.

3.2 Cambiar el tamaño de las imágenes antes de subirlas a WordPress

Bueno, creo que esto está cada vez más claro. Sabemos que las dimensiones sólo son importantes porque afectan al peso de las imágenes, pero la proporción es mucho más importante. Así que si quieres mantener los tamaños de imagen de Divi, tendrás que recortar tus imágenes a la proporción adecuada.

Este artículo seguramente le ayudará: descubra cómo evitar las imágenes recortadas en Divi.

Todo lo dicho anteriormente: si quieres que Divi deje de recortar las imágenes en la portada de tus posts, no utilices imágenes con un ratio inadecuado, como las imágenes en formato vertical o las panorámicas, por ejemplo.

En este blog, por ejemplo, no he cambiado el tamaño de las imágenes de la portada, simplemente he adaptado mis visuales. Para ello, redimensiono todas las imágenes de mi portada a 1000*625px (ratio 16:10) pero podría haber utilizado otras dimensiones manteniendo el mismo ratio, por ejemplo: 800*500px o incluso 1200*750px.

Es inevitable cambiar el tamaño de las imágenes antes de subirlas a WordPress:

  • si queremos obtener un peso de imagen adecuado para mejorar el rendimiento de un sitio web
  • si desea adaptar el formato de la imagen a las dimensiones utilizadas por el tema
  • si no quiere que las imágenes mostradas sean recortadas

Para retocar tus imágenes, puedes utilizar programas como Photoshop, Affinity Photo, Affinity Designer, Gimp etc... y te aconsejo que leas esta guía dedicada a la optimización de imágenes para la web.

4. ¿Cómo cambiar el tamaño de las imágenes de Divi para personalizar su sitio?

Por supuesto, dependiendo de su proyecto, es posible que desee cambiar el tamaño de las imágenes en Divi.

¿Quieres que las imágenes de tu portada sean cuadradas para que coincidan con las de Instagram o quieres que sean verticales para que coincidan con las de Pinterest?

Es factible y fácil. Vamos a ver un método que no requiere ninguna codificación especial. Por lo tanto, ¡incluso los principiantes pueden hacerlo!

Consejos: también hay una alternativa para mostrar imágenes en formato Divi.

4.1 - Instalar y activar la extensión Simple Media Sizes

simple media sizes plugin
Extensión del tamaño de la imagen simple

Tamaños de medios simples es una extensión gratuita disponible en el directorio oficial de WordPress, es decir, directamente desde su administración en la pestaña Extensiones > Añadir. Sólo tienes que instalarlo y activarlo.

4.2 - Modificar el tamaño de las imágenes de Divi

Una vez activada la extensión, basta con ir a la pestaña Configuración > Medios para encontrar una agradable sorpresa: han aparecido todos los tamaños de imagen utilizados por Divi.

tailles images Divi
Todos los tamaños de imagen de Divi

Todo lo que tienes que hacer es introducir la nueva anchura o altura de la miniatura que quieres cambiar.

Por ejemplo:

  • si quieres que las imágenes de tu portada sean cuadradas: cambia la miniatura et-pb-post-main-image así como et-pb-post-main-image-fullwidth con dimensiones como 400*400px y 1080*1080px (respectivamente).
  • si quieres que tus imágenes en la portada estén en formato vertical: haz lo mismo con una proporción 3:4 por ejemplo.
  • etc...

Por último, haga clic en el botón azul "actualizar".

4.3 - Regeneración de miniaturas

Ahora tienes un nuevo formato de imagen. Será perfecto para las futuras imágenes que subas a WordPress, pero mientras tanto, para que tus imágenes antiguas (las que ya están en la biblioteca de medios) funcionen, tienes que regenerar las miniaturas.

regénérer les vignettes
Regenerar miniaturas

Es muy sencillo pero puede ser largo si tu biblioteca está muy ocupada. No olvides guardar los cambios.

4.4 - Comprobación del resultado

taille des images de Divi personnalisées pour le module blog
Tamaño de imagen Divi personalizado para el módulo de blog

Este es un ejemplo del Módulo Blog donde las miniaturas han sido modificadas para mostrar las imágenes en formato cuadrado.

No esperes más. Descubra el tema Divi aquí !

5. Tabla resumen del tamaño de las imágenes de Divi

Espero que este artículo te haya ayudado a entender cómo funcionan las imágenes en WordPress, así como los tamaños de las imágenes de Divi.

Si quieres empezar este tipo de modificaciones, te aconsejo encarecidamente que dupliques tu sitio localmente para hacer tus experimentos y así evitar encontrarte con problemas (que no podría ayudarte a resolver simplemente dejando un comentario en este artículo).

Quizás este cuadro resumen le ayude:

Clase de imagen DiviUso de imágenesRatioAnchuraAltura
et-pb-post-main-imageMiniaturas del módulo BLOG en versión cuadrícula y diapositiva16:10400px250px
et-pb-post-main-image-fullwidthImagen destacada (en la parte superior de los artículos)16:101080px675px
et-pb-post-porfolio-imageImágenes del módulo Galería y del módulo Portafolio en versión de rejilla100:71400px284px
et-pb-post-porfolio-module-image - –510px382px
et-pb-post-porfolio-image-singleImagen destacada en PROYECTOS e imágenes de las entradas del módulo Portafolio en versión de pantalla completa- –1080px9999px
et-pb-gallery-module-image-portraitImágenes del módulo Galería en versión Portrait100:129400px516px
et-pb-post-main-image-fullwidth-largeMódulo de imagen de ancho completo- –2880px1800px
modifier la taille des images de Divi - pinterest
Divi tutorial : divi image sizes

2.096 palabras

8

A ti también te debería gustar:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener en su sitio al internauta que pasaría por allí. Descubre el tutorial paso a paso + el vídeo.

Appliquer des masques et des formes sur vos images avec Divi

Aplica máscaras y formas a tus imágenes con Divi

Las máscaras hacen que tus imágenes parezcan más gráficas y dan a tu diseño un aspecto original. ¿Sabías que puedes crearlos fácilmente con el Constructor Visual de Divi? Te muestro cómo en este tutorial y en este vídeo.

58 Commentaires

  1. Romain

    Bonjour,

    Merci pour cet article et pour l’astuce avec Image Media Sizes. Très pratique!
    Malgré tous ces conseils, je bloque sur un point qui me gêne vraiment: dans le module Résumé du Divi Builder, lorsque je positionne le curseur « image width » à 100% dans l’onglet Style/dimensionnement, l’image se cadre parfaitement. J’enregistre, je quitte et lorsque je rouvre le builder, l’ image est gigantesque et dans la prévisualisation de ma page également.
    Si, en revanche, je place le curseur à 99%, aucun problème.

    Auriez-vous une solution ou un début de piste?

    Merci d’avance

  2. Lycia

    Je suppose que c’est un bug, tout simplement. ou une histoire de media queries en fonction de votre résolution d’écran ? Avez-vous essayé depuis un autre navigateur pour voir si ça fait pareil ?

  3. Romain

    Merci pour votre rapidité.
    J’ai testé un autre ordinateur avec un autre navigateur. Même problème! Vous avez certainement raison pour le bug. Je vais essayer de réinstaller WordPress et aller jeter un coup d’œil aux media queries.
    Merci.

  4. Didier

    Bonjour et merci pour ce tuto sur la taille des images.
    Je rencontre néanmoins un problème lors de l’utilisation d’images dans un portefeuille Divi.
    Une fois les projets défini dans mon portefeuille, lorsque je clique sur un des projets, l’image définie dans le projet s’affiche correctement si mon projet utilise la mise en forme par défaut, mais ne s’affiche pas si j’utilise le générateur Divi dans le projet.
    Pensez-vous que cela provienne de la taille de l’image?

    Merci

  5. Lycia

    Bonsoir Didier, je ne sais pas trop… avez-vous un exemple à proposer (une page bonne et une qui bug) ?

  6. Jean-Michel Metzger

    Excellent tuto merci et bon conseil pour « Simple Image Sizes » mais il me reste un doute : Lorsque vous dites de « redimensionner les images avant le telechargement » dans WP, voulez-vous dire qu’il faudrait importer par ftp toutes les dimensions necessaires ?

  7. Gabriel Gobie

    Merci pour cet excellent article, et en français en plus ! Tout les autres tutos du web ne traitent que la partie CSS de la taille des galeries mais aucun ne mentionne le process de régénération des miniatures qui est indispensable.

  8. Lycia

    Merci Gabriel

  9. Lycia

    Bonjour Jean Michel, quand je parle de redimensionner, je parle de retailler (réduire) les images pour qu’elles ne fassent plus que 1000px de large par exemple au lieu de 5400px par exemple. Après vous les televersez sur votre site depuis Media > bibliothèque > ajouter. Je ne parlais donc pas de FTP. Est-ce que j’ai répondu à votre question ?

  10. Jean-Michel Metzger

    Merci pour votre réponse claire. J’hésitais entre les réglages « Simple Image Sizes » et la reduction des image avant televersement.

  11. lulu

    Bonjour
    merci pour cet article , j’ai suivi vos conseils et j’ai téléchargé l’extension mais je me retrouve toujours dans une impasse….
    je souhaite mettre des images en avant pour mes articles. Mais mes images apparaissent trop grandes, j’ai fait les modifications que vous avez suggérées ( modifiez la vignette et-pb-post-main-image ainsi que et-pb-post-main-image-fullwidth avec des dimension comme 400*400px)
    mais toujours pareil ma photo est identique….
    si vous avez une solution… ce serait top !! merci 🙂

  12. Murielle

    Bonjour,

    J’ai suivi votre tutoriel que je trouve très bien fait. Toutefois, cela ne semble pas fonctionner pour les vignettes du portfolio pleine largeur… J’aimerais les avoir carrées mais j’avoue qu’aucune solution trouvée sur internet ne semble marcher.

    Est-ce que votre tutoriel permet aussi de personnaliser les vignettes du portfolio pleine-largeur ?

    Merci à vous pour votre aide

  13. Lycia Diaz

    Bonjour Murielle,
    Si j’avais un conseil à vous donner, ce serait d’installer un WordPress en local avec Mamp / Xampp / FlyWheel. Ainsi vous pourriez tester cela sur un site de test. Quand on fait des modifications de ce genre, c’est pas bon de le faire sur un site en production. Toutefois, cela doit être réalisable, je pense… Avez-vous essayé en local ?

  14. Lycia Diaz

    Bonsoir Lulu.
    C’est difficile de comprendre à distance… Avez-vous un lien, une page qui présenterait ce souci ? Afin que je puisse avoir une idée ?

  15. William - Web Solution

    Super article merci, je suis passé à divi depuis début 2019 et c’est un vrai régale !
    Le before after est vraiment un effet sympa, on ne peut s’empêcher de toucher au curseur, même si il est payant, je pense que c’est un bon investissement si on est pas calé en code ^^
    Bonne journée !

  16. Valentin

    Bonjour,
    Merci pour ce post très intéressant.
    J’aurai bien aimé avoir votre avis sur les images de portfolio qui peuvent être agrandies en cliquant dessus. Comment gérer les deux formats pour éviter le redimensionnement par le site.
    En vous remerciant.
    Valentin

  17. Gilles

    Bonjour

    Merci pour votre article très utile.
    J’ai une question concernant la gestion du module Image intense de Divi
    J’aimerais modifier le Hn de mon texte Overlay Title Part 2
    voici comment se présente le html

    France

    J’aimerais modifier le h2 en h4 par exemple

    Merci pour votre aide

  18. Lycia Diaz

    Bonjour Gilles. Pour modifier cela, vous devrez certainement le coder dans un thème enfant. De plus, il faudrait voir si cela n’impactera pas en mal votre SEO. À vérifier…

  19. Lycia Diaz

    Merci Valentin, je ne saurais pas répondre à ta question. Il faudrait tester mais ça me paraît un peu complexe. Désolée de ne pas pouvoir plus t’aider.

  20. WTF

    followed this tutorial and now my website doesnt load.. thanks for fucking it up!

  21. Lycia Diaz

    Hello « WTF » !!!
    I’m sorry for you but, if you read this post until the end, you will see that I have wrote an important message : « If you want to get into this kind of changes, I strongly advise you to duplicate your site locally to do your experiments to avoid problems (which I can not help you solve simply by leaving a comment on this article) »
    We never do experiments on a website in production ! Everyone knows it !

  22. Domiinque

    Bonjour,
    Très intéressant tout ça. Je voudrais savoir s’il vous savez s’il y a une solution pour avoir un type d’image à la une en fonction de la catégorie de l’article ?
    Je m’explique, J’ai un site avec des posts classiques et d’autre concernant des couvertures de livres.
    J’aimerais en mode grille avoir une image à la taille des couvertures (verticales) mais je sèche….
    Une idée ? ce serait formidable

  23. Lycia Diaz

    Bonjour Dominique,
    Je vois ce que vous voulez dire. Je suppose que cela est possible avec du PHP et une fonction IF du genre, si on est sur cette catégorie, les images de mise en avant doivent avoir telle taille, sinon elles ont telle taille… Mais c’est peut-être un peu trop compliqué pour moi ;-). Un développeur pourrait faire ça facilement… S’il y en a un qui passe par ici…

  24. Romain Olivier

    Merci pour l’astuce ! très utile.

  25. Lycia Diaz

    Merci Romain !

  26. Bertrand

    Bonjour,
    Article très utile mais je n’arrive pas à transformer sur la page produit le format des vignettes qui est carrée (dans la galerie produit) alors que j’ai besoin qu’elles apparaissent en format portrait : pouvez vous me dire si c’est possible et sur quelle classe d’images agir. Merci

  27. Lycia Diaz

    Salut Bertrand, il faut que je regarde ça. Je reviendrai ici pour la réponse.

  28. LC

    Bonjour
    Super tuto, mais j’ai un souci similaire à Bertrand, je ne parviens pas à modifier le format des images au format grille en blog mais spécifiquement pour la page Boutique (sous Divi / Theme builder). Y a-t-il une solution?

  29. Lycia Diaz

    Salut LC,
    Il faudrait que je trouve le temps de tester ça. Car je ne suis pas sûre d’avoir rencontré ce souci. Par exemple, si tu regardes les captures d’écran de ce tuto, tu verras que les images sont au bon format (portrait) et je n’ai pas eu à modifier cela…
    Tu as toujours le souci ?

  30. Vulcain

    Bonjour, merci pour votre tuto.

    J’ai suivi ce que vous indiquiez, j’ai pour ma part mis une taille d’image de 200×200 pour le et-pb-post-main-image-fullwidth, afin d’avoir une image carré et surtout plus petite pour un article en pleine page. J’ai essayé avec une image de 200×200 mais malheureusement, rien n’y fait, les changements ne sont pas pris en compte 🙁
    Auriez-vous une idée ? Merci infiniment

  31. Lycia Diaz

    Bonsoir Vulcain : as-tu regénérer les thumbnails ?

  32. Vulcain

    bonjour,

    je ne l’avais pas fait, mais en utilisant de nouvelles images normalement ça ne pose pas de problème. Je viens de le faire et non malheureusement ça ne change rien 🙁
    J’aimerais juste que les images pour le module BLOG en plein écran soient plus petites (j’ai essayé 400×400).

  33. Lycia Diaz

    En fait la « boîte » qui contient l’image fait appel à une version de ton image par exemple 200×200. Or, la boîte fait 1000px par exemple et élargi ton image en la pixelisant afin qu’elle fasse 1000px de large. Donc dans ton cas, c’est la boîte qu’il faut réduire et non l’image… tu comprends ? Je suppose qu’il faut modifier le fichier qui contient cette « boîte » et le placer dans un thème enfant…

  34. Vulcain

    Bonsoir,
    Merci pour la réponse, oui je comprends mieux maintenant, malheureusement je ne sais pas faire ça tant pis ! Merci

  35. Rez

    OMG thank you for posting the link to the Simple Image Sizes plugin. Tried a bunch of other crap that never worked quite right, but your tutorial and that plugin did the trick.

  36. Lycia Diaz

    You’re welcome Rez ! It’s a pleasure 😉
    Glad to help you…
    Thanks for your comment !

  37. Eddy

    Bonjour, Je découvre divi qui est une révolution ! merci pour votre travail, moi je rencontre un soucis qui n’est pas évoqué dans l’article,
    la déformation des photos, j’ai mis une image 1280X720 ou même en 1080, nickel sur PC en pleine ecran mais quand je réduis la fenêtre ou pire quand je visionne sur mobile
    l’image est redimensionné en 1:1 et elle se déforme !
    Ai je raté quelque chose ?

  38. Lycia Diaz

    Bonsoir Eddy.
    Je n’ai jamais noté ce type de bug, c’est bizarre. As-tu contacté le support d’ElegantThèmes ? Ils peuvent peut-être t’aider ? Car là, comme ça, je ne vois pas ce qu’il pourrait clocher…

  39. Yarko

    Thank you 🙂

  40. Mathilde

    Bonjour,
    Malgré toutes les explications très claires, les images « à la une » sur mon blog continuent d’être floues, et ça me chagrine fortement…
    Voici ce que j’ai essayé de faire : ma photo est bien au ratio 16:10, avec en dimensions 1000 × 625 pixels. Je la téléverse dans WP, et là j’ai Imagify qui essaye de la compresser, mais je restaure l’original, et également WP Optimize qui essaye d’agir, mais je pense avoir réussi à l’empêcher de la compresser. Ma photo fait 738 KB.
    Enfin, dans Simple Media Sizes, j’ai cela :
    Taille et-pb-post-main-image 800×500 rognage : oui
    Taille et-pb-post-main-image-fullwidth 800×500 rognage : oui
    Taille et-pb-post-main-image-fullwidth-large 400×250 rognage : oui
    Du coup je suis vraiment perdue sur l’origine du problème…

  41. Lycia Diaz

    Salut Mathilde,
    Je pense que tu dois modifier la taille de l’image qui affiche l’image à la une. Tu dois mentionner la vraie taille au niveau de la bonne image. Et tu dois régénérer les miniatures. Si tu importes une image de 1000px de large mais qu’elle est affichée à 800px de large, elle sera alors pixelisee.
    J’espère que ces précisions t’auront aidées.

  42. Carole

    Bonjour,
    Auriez-vous un autre plugin a nous conseiller car « Cette extension n’a pas été testée avec plus de trois mises à jour majeures de WordPress. Elle peut ne plus être maintenue ou supportée et peut avoir des problèmes de compatibilité lorsqu’elle est utilisée avec des versions de WordPress plus récentes. » ?
    Merci beaucoup et bonne soirée,

  43. Lycia Diaz

    Ah mince…
    Non, j’ai rien d’autre sous la main…
    En tout cas elle fonctionne puisque je l’utilise…

  44. Emma

    Muchas gracias por tu aportación!
    Para cambiar la proporción y tamaño de las miniaturas se puede añadir en el archivo functions.php del chiltheme este código:

    // Begin custom image size for Gallery Module
    add_filter( ‘et_pb_gallery_image_height’, ‘image_size_h’ );
    add_filter( ‘et_pb_gallery_image_width’, ‘image_size_w’ );

    function image_size_h($height) {return ‘400’;}
    function image_size_w($width) { return ‘400’;}

    add_image_size( ‘custom-image-size’, 400, 400 );
    // End custom image size for Gallery Module

    Salut à tous

  45. Lycia Diaz

    Muchas gracias Emma por tu ayuda 😉

  46. Antoine

    Merci pour cet article très instructif.
    Je ne sais pas si les choses ont changé depuis 2 ans mais je ne vois pas comment customiser les formats d’image Divi dans Réglages > Médias. Je ne vois que les 3 formats WordPress…

  47. Lycia Diaz

    Salut Antoine, comme expliqué dans le tutoriel tu as besoin d’un plugin.

  48. Frank J.

    Thanks for this!

  49. CECILIA

    Hola, gracias por el articulo aunque el complemento que indicas no se actualiza desde hace mucho y no es compatible con nuevas versiones.

  50. Christelle

    Bonjour,

    Avez-vous un autre plugins plus récent ? Car lorsque on va sur le lien, voici ce qui est indiqué :

    Cette extension n’a pas été testée avec plus de trois mises à jour majeures de WordPress. Elle peut ne plus être maintenue ou supportée et peut avoir des problèmes de compatibilité lorsqu’elle est utilisée avec des versions de WordPress plus récentes.

    Donc j’aimerais bien utiliser autre chose.

    Merci par avance et merci aussi pour vos supers tutos !

    Amicalement

    Christelle

  51. Lycia Diaz

    Salut Christelle, le plugin fonctionne toujours mais c’est vrai que ça inquiète un peu… Pour l’instant je n’ai pas trouvé d’équivalent.

  52. Lycia Diaz

    Gracias Cecilia, de hecho, el complemento ya no está actualizado. Todavía funciona con normalidad (lo creo). Hasta ahora no he encontrado otras soluciones.

  53. Lucie

    Bonjour,

    J’ai beau suivre tous les conseils, je me retrouve avec une qualité désastreuse une fois importée sur Divi.
    La première image est un peu pixelisée, et la seconde est une véritable horreur.
    Je n’arrive pas à régler ce problème…
    (Je précise que je suis sortie de formation il y a 3 mois et qu’il s’agit de mon premier vrai site internet ^^)

  54. Lycia Diaz

    Salut Lucie, quelle taille d’images importes-tu sur Divi (largeur minimale) ?

  55. Guillaume

    Bonjour,

    J’ai eu beau essayer, je n’ai pas réussi à recadrer comme il faut les images. Dans le cadre du module BLOG, les photos s’affichent toujours super grand (et qui s’adapte) et non à une taille raisonnable.

    Typiquement :
    J’écris des articles qui présentent des produits. J’utilise, pour le coup, une image plutôt en belle résolution dans l’article.

    Sur une page, j’aimerais afficher dans une colonne d’une rangée les 3 derniers articles (listés les uns par dessus les autres) mettant en vedette ces produits. Je me dis qu’en utilisant le blog en mode grille ça pourrait fonctionner. Mais non. Ca met de magnifiques images, très très larges. Alors que je voudrais une toute petite vignette. Idem pour le mode Plein Ecran.

    Sans compter un cropping aléatoire (des fois oui, des fois non, mais ne tient pas compte du réglage du plugin)…

    Des idées ?

  56. Faustine

    Bonjour,

    J’ai suivi l’article et utilisée l’extension pendant un moment. Aujourd’hui en créant mon premier article de blog sur WordPress impossible d’afficher les images dans l’article. J’ai désactivé puis supprimé l’extension (qui en effet n’a pas été mise à jour depuis très longtemps). Et malgré la suppression du plugin mes images sont toujours buguées 😭

    Une idée de comment « réinitialiser » la génération des tailles d’images ? Pour supprimer tout effet du plugin en question.

    Merci d’avance

  57. Lycia Diaz

    Faustine, le plugin est plus maintenu, en effet, mais il fait le job. Du coup il faudrait voir si le problème ne viendrait pas d’ailleurs ? Sinon, le plugin Regenerate Thumbnail permet de recréer les miniatures

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pínchalo en Pinterest

Acciones
Comparte esto