All of the rest of the advice on Eileen’s post is exactly the same. The featured image doesn’t display within the post’s content. How to Make the Divi Featured Images Smaller on Your Blog Page, https://themes.muffingroup.com/be/splash/, How to Make the Divi Theme Featured Images Smaller on Your Blog Page. Generally, most of the images on the internet are either PNG, GIF or JPEG. Thank you very much for this post. However, I find the edges of the image are trimmed if I use this size when using the blog module set to grid layout. ¼ column: 225 x 170. ⅓ Column: 320 x 241 It has worked well for me and I am really appreciative. – Fixed broken image size on image of Slider & Fullwidth Slider modules. Thank you very much for this post! 16:9 – 600 x 338 You may use JPEG for all your image types, including your Divi head image, divi background image, etc. But, for some, the challenge is to know the correct image size needed to be used in each case. I really love the Elegant theme but hated the large featured image. However, it should be quite easy either through settings for image sizes or some basic CSS. The challenge for some however, is knowing the correct image sizes to use in each instance. Do you know how to make smaller image like this on single post? 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. That’s why we had to add the filter code to our child theme’s functions.php file. Using the best divi images or divi featured image size helps you standardize your site. Glad to be of help. ¾ column: 795 x 447. The Divi theme is driving me mad. It ensures no image will look out of place. Hi, sorry but I don’t use the Divi theme any longer. So if you want to keep the sizes of Divi's images, you'll have to crop your images according to the right ratio. Divi makes adding images to your website easy. Thankfully, I now have a very happy client. I have been spending so much time searching for a fix for this! I was looking for something like this! It helps in your SEO since search engines (especially Google) are particular about user experience. ⅓ Column: 320 x 181. Although there are two most used aspect ratios Divi theme or builder is made considering all three ratios. GIFs are particularly good for images that are to be animated. https://themes.muffingroup.com/be/splash/. The image became just as I wanted but there is no excerpt of the text on the home page. Stuart. If anyone has code fix for that too that would be great! ¼ column: 225 x 128. Stuart. Discussion in 'Basic Support Forum' started by Brad Minus, Jun 4, 2019. Generally, here are the recommended image sizes for 16: 9 ratio: What’s more aspect ratio is important when optimizing images for small screens, especially 11 inch laptops. But 4: 3 and 16: 9 are the two most commonly used ratios. Hi Dave Thanks for your input. I was looking for a way to reduce the image size, thank God I landed on your post. 4:3 – 600 x 400. This gives you more control over how WordPress handles featured images on posts and pages. For this image size, here are the module image sizes for all three aspect ratios. by Saddam Hossen | Jul 18, 2019 | Tips & Tricks. All love flowing your way. I put your code in and Voilà, it worked perfectly. This article is written to help and guide you on the various divi image sizes to use to get the best result. better to change the height in mobile view to 100% otherwise it warps the thumbnail. But now the photos in my post are smaller too… any way to solve it? If you set a featured image for a blog post, your theme will default to this image when viewing the post itself and will use the thumbnail of this image when viewing blog pages, category pages, and the Divi blog module. While many people enjoy reading their favorite blogs in an RSS feed reader, the lack of images can be off-putting. Thanks, Stuart, Worked like a dream. As in Eileen’s case, my client wanted to have blog post listing to have more of a traditional look with smaller images on the left and the text on the right. Adding line 2 (. Thank you! As you may have known, there are three common aspect ratios. These are the three aspect ratios known: 4: 3, 16: 9, and the 3:4. As a web designer, the aspect ratio you are working with should determine the divi image size you would be using. By the way, the sizes that Divi uses for the Featured Image are set via WordPress filters and not in “Settings > Media”. This is the solution i have been searching for, for a while now, it did something extra i needed. Otherwise works like a charm! Divi Project Featured Image Size – 1200 x 900. Some codes I found were close but this one did what I had been trying to do. The Elegant Themes blog post of April 2017, The Ultimate Guide to Using Images Within Divi, notes that the default width for Divi blog images is 795 pixels.They recommend using the 16:9 ratio, so a blog module featured image should be 795 x 447px. Change Divi Portfolio Images to Square or Any Other Proportion. This code works fantastic, is there anyway you could provide some CSS to also sink the image in the actual post as well ?? If you upload these sizes for each post type, you won’t be disappointed. Another way to optimize the images on your site is to ensure that your image size is compressed between 60KB and 200KB. One issue with this is the hover icon and effect is showing in the wrong place, so had to disable this function. Welcome to our fourth and final (we think) tutorial in our “change image aspect ratio” series. Changing the Featured Blog Post Image Size in Divi 2.0 Sep 20, 2014 | WordPress Tweaks The popular Divi 2.0 WordPress theme from Elegant Themes includes a really nifty Page Builder that makes creating custom layouts simple and easy for anyone. We have already published two other tutorials in our “change image aspect ration” series, and there is one more to follow after this. This helps the image load fast, and not impede the loading time of your website. For the 4:3 aspect ratio, here are the best divi image sizes to use, 1 column: 1080 x 810 Stuart. Google’s Mobile Friendly Algorithm Change, Affiliate Program for Amazon – How to Implement Customer Localization, WordPress Website Design – Trends for 2015, Most of the posts had very little text so they appeared staggered across the screen. This article will surely help you: find out how to avoid cropped images in Divi. 3:4 – 600 x 800 (recommended for portraits) . 293 B du CGI.SIRET: 79470615000016, for pointing me in the right direction with her excellent post –. The only setting you can change with a featured image is whether an image is displayed at all. After a day of banging my head against the wall, FINALLY an easy fix xoxo. Using the right divi image sizes have a far-reaching effect. You have saved me a lot. Featured Images in RSS w/ Size and Position lets you set up and add featured images to your posts in your site’s RSS feed. So aside from not making your site distorted, SEO is another reason you must be using the right divi image sizes. Extra includes an option to hide the featured image on the post individually. Thanks again! 3:4 – 600 x 800 (recommended for portraits) 16:9 – 600 x 338 4:3 – 600 x 400. Your code works like a charm! Brad Minus New Member. Hi, sorry but I don’t use the Divi theme any longer. The code worked perfectly and was just what I was looking for! So glad I found this article. The number to the left refers to the width (otherwise known as the x-axis) while the number to the right refers to the height (also known as the y-axis). The post itself only shows the cover image. Thanks, for the code. ⅔ Column: 700 x 526 ½ column: 510 x 384 It is the 3:4 aspect ratio, and it is best for portraits. In order to achieve this, you need to go to your Divi Theme Options panel, in the CSS area place this code: The majority of the code above is the same as Eileen had developed with only a couple of modifications. This totally worked! It allows you the freedom to use whatever you like. If you’re working with portraits on your website, the person module is the best divi image size to use. I like the versatility of divi however page load times are a little slow always like to hear what other professionals and moved too, Hi, Currently I prefer to use BeTheme from the Muffin Group. Change Divi Blog Images to Square or Any Other Proportion. Advertised prices excludes Value Added Tax (VAT).TVA non applicable, art. Please take a look at the original to get more background information. You can do this by resizing, cropping or compressing your images. While every website is different, there is nothing like the “perfect image sizes” for all websites. ½ column: 510 x 287. Featured Image Size. Divi module makes it easy to add images to your website. It is the 3:4 aspect ratio, and it is best for portraits. If you continue to use this site we will assume that you are happy with it. Using the best divi images or divi featured image size helps you standardize your site. Except this thanks to you. I like the starter themes and once you get used to the page builder it is quite flexible. The CSS selector also resizes a few images besides the thumbnails but those only show up when I’m logged in. 1 column: 1080 x 608. ⅔ Column: 700 x 394. Using the best divi images or divi featured image size helps you standardize your site. What theme have you moved on to and any particular reason you have moved away from Divi? Use Any Image Size or Shape In The Divi Blog Module! JPEG is suitable in most cases, because of how sharp their colors and compatibility are. It helps in your SEO since search engines (especially Google) are particular about user experience. ¾ column: 795 x 597 I have to admit that I did not do much testing on mobile devices. Yet, you as a web designer can do some things to make sure your images are perfect for your website. Thank you for your reply, and thank you for the code to previously provided. Good luck with your new website. If these sizes won’t work for you, continue reading to understand why we chose these sizes and what your options are for changing them. Do I Really Need a Website For My Business? Thank you so much. Thank you so much Stuart! I spent quite a while on this and even tried Eileen’s code and nothing worked. This works great because it leave the phone at a large image and the computer at 50% reduced. In the post settings, click Hide Featured Image on Post. Thank you! OMG! This fixed my problem with it. And we will let you know why this is important too. Thanks for your code! – Added JS filter ‘et.builder.store.setting.update’ to hook on page settings values. Using the right divi image sizes have a far-reaching effect. Use Any Image Size or Shape In The Divi Portfolio Module! Absolutely nothing is an easy fix. – Fixed the issue when settings from Divi Global Defaults Editor were not migrated to Div Presets for the Divi Builder plugin. For this image size, here are the module image sizes for all three aspect ratios. Just Modify the max-width to the image size you like. I’ll take a look at the hover problem to see if I can add anything. We use cookies to ensure that we give you the best experience on our website. Firstly I would like to thank Eileen Lonergan for pointing me in the right direction with her excellent post – How to Make the Divi Featured Images Smaller on Your Blog Page.Please take a look at the original to get more background information. WordPress Thumbnails . If you want to have a picture with many details on your site or images with transparent background functions, then the PNG format is best. There is no standard “perfect” size for all websites because each website is different. The Elegant Themes blog post of April 2017, The Ultimate Guide to Using Images Within Divi, notes that the default width for Divi blog images is 795 pixels.They recommend using the 16:9 ratio, so a blog module featured image should be 795 x 447px. Cheers Stuart. Thank you. /*blog image size*/ .et_pb_image_container img, .et_pb_post a img { max-width: 50%; vertical-align: bottom; } }. Featured Images. It worked perfactly!!! Thanks again. It ensures no image will look out of place. Code worked great. Unfortunately or not, the Divi Theme uses huge thumbnail images when displaying your blog posts or when you are using the blog module in the Divi Builder. However, I find the edges of the image are trimmed if I use this size when using the blog module set to grid layout. Thank you for this!