Sur ce blog, par exemple, je n’ai pas modifié la taille de mes images à la une, j’ai tout simplement adapté mes visuels. Par exemple, vous téléchargez une image d’une dimension de 1280px * 720px dans votre bibliothèque => c’est le format original de votre image. Also when on smaller screens most column layouts turn are displayed cascade style so if you want your images to appear bigger on smaller screens it’s the best practice to use wider images so as to avoid having less spacing on the sides. Par exemple, vous téléchargez une image d’une dimension de 1280px * 720pxdans votre bibliothèque => c’est le format original de votre image. Pour ce faire, je retaille toutes mes images à la une à la dimension de 1000*625px (ratio 16:10) mais j’aurais très bien pu utiliser d’autres dimensions tout en conservant le même ratio, par exemple : 800*500px ou même 1200*750px. Pourtant, si vous vous rendez dans votre administration WordPress, à l’onglet Réglages > Médias vous ne verrez apparaître que 3 formats de vignettes : taille des miniatures, taille moyenne et grande taille. There is also no perfect size so don’t dwell on optimizing images too much just make sure it looks right on Divi’s responsive viewer and you should be in the green. You’re welcome Rez ! Nous utilisons des cookies pour vous garantir la meilleure expérience sur notre site. C’est le thème bien sûr ! Tout ce que vous aurez à faire, c’est saisir la nouvelle largeur ou la nouvelle hauteur de la vignette que vous souhaitez modifier. Ces trois tailles d’images sont paramétrables dans le back-office de WordPress … Vous avez certainement raison pour le bug. Although Divi can accommodate any size image, these ratios work best in Divi layouts. This won’t affect any other image sizes on your site. Merci pour ce post très intéressant. Note: Keep in mind all the images below this are specifically for the Fullwidth Header module. The Divi Builder includes lots of ways to add images to your layouts. While Divi makes it extremely easy to build websites without code. 300 px de large pour les images de taille Moyenne; 768 px de large max pour les images de taille Moyenne_Grande; 1 024 px de large max pour les images de taille Grande. soit vous vous pliez à votre thème et vous utilisez le, si l’on veut obtenir un poids d’image adapté pour, si l’on souhaite adapter le format de l’image aux dimensions utilisées par le thème, si l’on ne veut pas que les images affichées soient rognées. Afin que je puisse avoir une idée ? Je rencontre néanmoins un problème lors de l’utilisation d’images dans un portefeuille Divi. Je n’ai jamais noté ce type de bug, c’est bizarre. Ici, vous pouvez modifier le style et/ou positionner votre texte ou votre texte d'en-tête comme vous le souhaitez en choisissant la couleur de celui-ci, l'orientation, la police, la taille … C’est très simple mais ça peut être long si votre bibliothèque est très chargée. Enfin, cliquez sur le bouton bleu « mettre à jour ». 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. Lastly, if you have any queries do let me know in the comments below and I’ll get back to you as soon as I can furthermore you can reach out directly on my. Image sizes for standard Divi Column Layouts: However, the problem with using Divi column layouts is that they can’t accurately measure the height of your images which is affected by the content within that section and the screen size. 3. 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… Bonjour, Je découvre divi qui est une révolution ! Car là, comme ça, je ne vois pas ce qu’il pourrait clocher…, Bonjour, Despite there being plenty of articles out there on WordPress media sizes, image cropping, how to disable the Divi theme from cropping images for the blog module, etc, none of these methods worked. Merci beaucoup et bonne soirée, Ah mince… Tu dois mentionner la vraie taille au niveau de la bonne image. Application pour insérer une image, changer sa taille et la centrer. However, these images need to be optimized to the right dimensions so that they can work well with the design which is the tricky part. Next, click the Use Visual Builder button to launch the builder in Visual Mode. Ai je raté quelque chose ? Le fonctionnement basique du Divi Builder. YES, I get that it can be overwhelming to work with images especially when optimizing for multiple screens…. Lorsque je donne des formations Divi et WordPress, il y a de nombreuses questions qui reviennent à chaque fois : Je sais c’est assez agaçant. Some of the tools I recommend are as follows: When it comes to image SEO google relies on image file names, ‘alt’ text, captions, file type, etc. J’espère que cet article vous aura aidé à comprendre le fonctionnement des images dans WordPress ainsi que la taille des images de Divi. Malgré toutes les explications très claires, les images « à la une » sur mon blog continuent d’être floues, et ça me chagrine fortement… » ? Si vous avez envie de vous lancer dans ce genre de modifications, je vous conseille fortement de dupliquer votre site en local pour faire vos expérimentations afin d’éviter de rencontrer des problèmes (que je ne pourrais vous aider à résoudre simplement en laissant un commentaire sur cet article). Images are a big part in any website however for it to work effectively it not only needs to look good but it also needs to be of the right size if not it will cause the website to load extremely slow and your visitors/customer will go to your competitor’s websites that have better-optimized images. Using a quality compression tool like Imagify or Compress PNG can reduce your file size a ton without sacrificing on quality. It has a whole multitude of options to add images and that can definitely get in the way by making things more complicated. 4:3 – the older monitor rati… add_filter( ‘et_pb_gallery_image_height’, ‘image_size_h’ ); Balance out the right amount of content with images so as to keep a good balance for the reader. Les liens classiques sont en violet et les liens sponsorisés sont en rose. Muchas gracias por tu aportación! Bonsoir Vulcain : as-tu regénérer les thumbnails ? 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. Mis à jour le 30/10/2020 | Publié le 21/06/2018. Dans un premier temps, il va falloir comprendre ce que fait WordPress lorsque vous téléchargez une image dans la bibliothèque des médias. The reason is because Divi`s slider does not automatically show the latest posts. Bonjour et merci pour ce tuto sur la taille des images. Comment obtenir des images correctes en conservant la taille des images de Divi ? Tout ce qui contrôle ce quiapparaît dans votre module sera toujours trouvé dans cet onglet. I can go much more into detail but I recommend you check out this image SEO guide for a more detailed guide. Most images are either JPEG or PNG (sometimes even GIF) and these are good for most situations because of their widespread compatibility. Je viens de le faire et non malheureusement ça ne change rien Add your custom images and sizes using this format: add_image_size( 'post-thumbnail size', 800, 350 ); You can change ‘post-thumbnail’ to whichever image you want to add. J’aurai bien aimé avoir votre avis sur les images de portfolio qui peuvent être agrandies en cliquant dessus. Je ne parlais donc pas de FTP. Dans le cas où une image n’est pas ajustée à la bonne taille, cela peut engendrer des conséquences telles que : Découvrez aussi comment exclure certaines publications des résultats et comment activer le Site Search de Google Analytics. Pro Tip : As a rule of thumb make sure your images … Vous pouvez alors avoir une image spécifique sur desktop et une autre sur mobile en jouant sur le paramètre de visibilité. Dans un premier temps, il va falloir comprendre ce que fait WordPress lorsque vous téléchargez une image dans la bibliothèque des médias. Merci pour votre rapidité. ou une histoire de media queries en fonction de votre résolution d’écran ? The drop-shadow is a CSS effect: text-shadow: 0.1em 0.1em 0.2em black !important; Have never used Divi… Options de design . Enfin, dans Simple Media Sizes, j’ai cela : Enregistrer mon nom, mon e-mail et mon site dans le navigateur pour mon prochain commentaire. Bonjour, Most times it’s actually counter-intuitive to use more images as it just confuses and the meaning is low. Nous savons que les dimensions sont importantes seulement car elles agissent sur le poids des images mais que le ratio est bien plus important. Le saviez-vous ? Ils peuvent peut-être t’aider ? Le ratio ou rapport, ce n’est ni plus ni mois que des mathématiques et il existe un site qui vous permettra de connaitre le ratio de vos images en renseignant simplement le largeur et la hauteur de celle-ci. Par défaut, le thème Storefront permet d’afficher les images des catégories sur la page d’accueil. // End custom image size for Gallery Module, Merci pour cet article très instructif. J’espère que ces précisions t’auront aidées. l’image est redimensionné en 1:1 et elle se déforme ! En vous remerciant. ce serait formidable, Bonjour Dominique, Idem pour les images de 1800px*1200px, elles auront toujours un ratio de 3:2. 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). je souhaite mettre des images en avant pour mes articles. followed this tutorial and now my website doesnt load.. thanks for fucking it up! 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. Donc dans ton cas, c’est la boîte qu’il faut réduire et non l’image… tu comprends ? Très intéressant tout ça. Pro Tip: As a rule of thumb make sure your images at least as wide as the column it is going to be used into. Pour y parvenir, il est nécessaire d’avoir une image à la une dans chaque article. For the Image module, the aspect ratio is either 16:9 or 4:3 layout and either can be used to choose an image size for each column layout. Concrètement, si vous insérez une image en taille originale dépassant cette largeur prédéfinie dans un contenu, WordPress affichera la taille big_image . Voici un exemple du Module Blog dont les vignettes on été modifiées pour afficher des images au format carré. Click Save and the add_image-size function will be enabled. Taille et-pb-post-main-image 800×500 rognage : oui Nous allons voir une méthode qui ne nécessitera aucun codage particulier. It’s a pleasure 3.1 Comprendre l’importance du RATIO (ou RAPPORT), 3.2 Redimensionner ses images avant le téléchargement dans WordPress. Simple Media Sizes est une extension gratuite disponible sur le répertoire officiel de WordPress, c’est-à-dire, directement depuis votre administration à l’onglet Extensions > Ajouter. si vous avez une solution… ce serait top !! Hello « WTF » !!! Comme on vient de le voir, WordPress a besoin de 3 formats d’images, mais le thème Divi, quant à lui, a besoin de 7 formats supplémentaires, les voici : C’est le format utilisé pour les vignettes du Module BLOG en version « grille » comme en version « diapo ». The numbers 800 and 350 in this example are the height and the width of your image … J’ai testé un autre ordinateur avec un autre navigateur. If you use aspect ratio 16:9 to you can use the following dimensions for your images: If you use the aspect ratio 4 x 3 these are the dimensions for your images: Note: Keep in mind these dimensions are simply guidelines and can vary depending on the content so it’s best to use them as a reference and work from there. Aspect ratio is the ratio of width to height of an image or a screen and this is a much better measure to determine the size of your image for your Divi website. D’où proviennent alors les autres vignettes qui ont été générées ? Dans cet article, nous allons aborder tous ces points. Lorsque des mises à jour ont été apportées au thème, celui-ci permet de rétablir les paramètres d’image configurés par les propriétaires de magasin. Merci. Merci pour votre réponse claire. Voici des exemples : Ce rapport 1/1 signifie que la largeur est équivalente à la hauteur. Quand on fait des modifications de ce genre, c’est pas bon de le faire sur un site en production. Vous n’avez qu’à l’installer et l’activer. Avant de pouvoir ajouter un module image à votre page, vous devrez d'abord basculer dans le Divi Builder.Une fois que le thème Divi a été installé sur votre site Web, vous remarquerez un bouton Utiliser Divi Builder au-dessus de l'éditeur de messages chaque fois que vous créez une nouvelle page. You've never built a WordPress website like this before. Merci. Dans les anciennes versions de WooCommerce, il y avait des problèmes lorsque les développeurs de thèmes utilisaient le update-option pour effectuer des modifications dans la base de données. Large Image Size – Choose a size for large images… Voilà un sujet épineux : la taille des images de Divi. Or, la boîte fait 1000px par exemple et élargi ton image en la pixelisant afin qu’elle fasse 1000px de large. Divi Takes WordPress To A Whole New Level With Its Incredibly Advanced Visual Builder Technology. In this article, I will teach you how to use and optimize images for your Divi website. Les champs obligatoires sont indiqués avec *. Grâce au thème Divi, vous avez un site web parfaitement adapté au formats … Votre thème aussi a besoin de vignettes pour fonctionner. 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 ;-). Votre adresse e-mail ne sera pas publiée. Vous pouvez tester Divi gratuitement en vous rendant sur cette page et en cliquant sur « TRY IT FOR FREE ». Thanks for your comment ! Je m’explique, J’ai un site avec des posts classiques et d’autre concernant des couvertures de livres. Alors, mon souci est que quand je déplace ou je change la taille d\'une image, un texte ou autre dans un … Bonjour à tous, ce doit être mon premier post. Avec les dernières mises à jour, les développeurs de thèmes peuvent utiliser add_theme_supportpour définir les tailles d’image. Salut Bertrand, il faut que je regarde ça. En savoir plus sur comment les données de vos commentaires sont utilisées. I’ve already talked about this above which should be enough to resize images right. Je suppose qu’il faut modifier le fichier qui contient cette « boîte » et le placer dans un thème enfant…, Bonsoir, Auriez-vous une idée ? Donc une image de 900px de largeur devra avoir une hauteur de 600px pour conserver un ratio de 3:2. Avez-vous essayé depuis un autre navigateur pour voir si ça fait pareil ? Each of these layout locations can use any size image, but a more effective layout would use images that are designed for those locations. The best showcase of beautiful Divi websites, layouts, and child themes. Thumbnail Image Width (px) – Width of the product gallery thumbnails. 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. Glad to help you… Tips : il existe aussi une alternative pour afficher des images au format dans Divi. 1 – Images rognées dans Divi, taille d’image, ratio… Les développeurs d’Elegantthemes ont codé Divi avec différentes tailles d’image. En fait, il ne s’agit pas uniquement de Divi, tous les thèmes WordPress utilisent des tailles d’images spécifiques et de nombreux utilisateurs peuvent se … Divi Uses a whole multitude of column layouts that support images of different sizes however the hard part is actually getting those images to scale up and down as per different screen sizes. Ce format utilise les dimensions 510px * 382px. 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. You will need to go to Module Settings > Design > Make Fullscreen: and check “YES” to span the background image across the screen. En fait, les dimensions n’ont que peu d’importance et c’est souvent ce qui est le plus difficile à comprendre. C’est le format utilisé pour l’image à la une qui s’affiche en haut de chacun de vos projets (Portfolio) mais également pour les images de la page des projets du Module Portefeuille en mode « Plein écran ». Après vous les televersez sur votre site depuis Media > bibliothèque > ajouter. Donc si vous voulez conserver les tailles des images de Divi, vous devrez recadrer vos images en fonction du ratio adéquat. Si tu importes une image de 1000px de large mais qu’elle est affichée à 800px de large, elle sera alors pixelisee. Mis à jour le 30/10/2020 | Publié le 21/06/2018 | 48 commentaires. Everyone knows it ! 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. Auriez-vous une solution ou un début de piste? Bonjour Généralement, aucune de vos images n’aura cette dimension mais cela signifie que votre image ne sera recadrée que si elle a une hauteur supérieure à 9999px. J’aimerais en mode grille avoir une image à la taille des couvertures (verticales) mais je sèche…. Polices personnalisées Divi : comment ça marche ? Je vais essayer de réinstaller WordPress et aller jeter un coup d’œil aux media queries. Je reviendrai ici pour la réponse. Ce format utilise les dimensions de 400px * 284px – soit un ratio (assez bâtard, désolée du mot) de 100:71. Note … Comment modifier la taille des images de Divi pour customiser son site ? Il faudrait que je trouve le temps de tester ça. It’s best practice to do the following: Many people think it’s good to use many images in their website and blog posts however this can increase bloat and make the page load slow. 16:9 – the standard monitor ratio, widescreen and great for headers. Pour ce faire, il faut donc ajouter du code CSS dans Divi -> Options du … Si j’avais un conseil à vous donner, ce serait d’installer un WordPress en local avec Mamp / Xampp / FlyWheel. Ne tardez plus ! Je souhaite recevoir les news du blog Astuces Divi ! You can simply use Divi’s Mobile/tablet view to check how your images look on smaller screens. Si on regarde bien, le plus important pour obtenir des résultats corrects pour l’affichage de vos images dans WordPress, c’est de prendre en compte le ratio. Bonjour Murielle, Posted on January 13, 2019 by Mark Quadros in Resources | Read Comments. Menu Taille … En fait, il ne s’agit pas uniquement de Divi, tous les thèmes WordPress utilisent des tailles d’images spécifiques et de nombreux utilisateurs peuvent se sentir frustrés à un moment ou à un autre. Ce sont les seules images de Divi qui ne subissent pas de recadrage. Cet article vous explique comment obtenir simplement un effet zoom au survol des images avec un texte et un lien cliquable. Malheureusement, malgré avoir redimensionné l’image correspondante, celle-ci prend une partie de la surface de l’article, … Valentin, Merci pour votre article très utile. Your actual sizes will vary based on the content and needs, but they will help you get an idea of what works best where. Before you can add a image module to your page, you will first need to jump into the Divi Builder. Je pense que tu dois modifier la taille de l’image qui affiche l’image à la une. Si vous continuez à utiliser ce dernier, nous considérerons que vous acceptez l'utilisation des cookies. Salut Antoine, comme expliqué dans le tutoriel tu as besoin d’un plugin. C’est le format utilisé pour le module « Image en pleine largeur ». Salut LC, Lorsque les images sont déclarées d… La taille Moyenne_Grande a été ajoutée pour bénéficier de la prise en charge des images … Est. Je sais que c’est une question basique … Mais je n’arrive pas à trouver la taille des images nécessaires pour intégrer des slides, des images (dans les blurps“) ou même dans le blog. Cet article va surement vous aider : découvrez comment éviter les images recadrées dans Divi. Une idée ? Pour garder l'image à la bonne taille et recouvrir celle d'origine, vous pouvez ajouter ce bout de code CSS (dans le CSS personnalisé des options Divi de la page, ou des options générales Divi, ou du customizer … Dans ce tuto complet pas à pas, je vous montre 3 manières d’importer des polices personnalisées dans Divi. WordPress n’utilise par défaut que trois types de taille d’image : la taille des miniatures, la taille moyenne et la grande taille. OMG thank you for posting the link to the Simple Image Sizes plugin. 2013, 7 Ways to Improve SEO on Your Divi Website, Want to See Even More? This website is not affiliated with nor endorsed by Elegant Themes. Pas besoin d’extension, Divi permet de le faire facilement ! Votre adresse e-mail ne sera pas publiée. je ne l’avais pas fait, mais en utilisant de nouvelles images normalement ça ne pose pas de problème. 4. Do not confuse this with the full-width background image these guidelines are specifically for the Fullwidth header module that allows your header to span across the full screen of your monitor. En fait la « boîte » qui contient l’image fait appel à une version de ton image par exemple 200×200. Comment modifier la taille des images de Divi ? You can adjust the size of the logo in Divi’s theme customizer, but you can’t adjust it larger than its native pixel size. Chaque thème propose des visuels différents donc chaque thème aura besoin de formats d’images différents. AccueilPersonnaliser DiviComment modifier la taille des images de Divi ? Il utilise les dimensions 2880px * 1800px. Ceci devrait aussi vous intéresser : comment obtenir des images carrées pour les modules Blog, Galerie et Portefeuille. 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 ^^ La taille de l’image en pixel est tout aussi importante que le poids de son fichier. Super article merci, je suis passé à divi depuis début 2019 et c’est un vrai régale ! Bottom line? merci pour votre travail, moi je rencontre un soucis qui n’est pas évoqué dans l’article, Ce format est paramétré avec les dimensions de 400px * 250px – soit un ratio de 16:10 (légèrement différent du 16:9). function image_size_w($width) { return ‘400’;}, add_image_size( ‘custom-image-size’, 400, 400 );