2013, 7 Ways to Improve SEO on Your Divi Website, Want to See Even More? Balance out the right amount of content with images so as to keep a good balance for the reader. 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. Hundreds of new features for Divi One of the biggest factors that affect file size is the dimensions of the image. Note: Keep in mind all the images below this are specifically for the Fullwidth Header module. The width normally available to the portfolio images is 1080px and if the images are taking up too much space the ones on the end will be pushed down to the next row. 100% Upvoted. Most images are either JPEG or PNG (sometimes even GIF) and these are good for most situations because of their widespread compatibility. // Begin custom image size for Portfolio Module For this image size, here are the module image sizes for all three aspect ratios. Change the size of the portfolio images. 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. This website is not affiliated with nor endorsed by Elegant Themes. Is there something I can do to show the images in higher quality, as it seems like it just shows the photos in the same quality as the standard 4×4 portfolio grid layout and just upscales them. That gives us an aspect ratio value of 1.9. save hide report. share. Change Divi Portfolio Images to Square or Any Other Proportion. Reply. The browser decides the best image size to render. When hovering over an item within the portfolio module, an overlay color fades in on top of the image and below the portfolio’s title text and icon. return '400'; The Divi Theme’s portfolio module gives you the option of displaying your projects as a series of thumbnails (grid view). The Divi Portfolio Module. 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. But shouldn't the formula be 4*width + 3*spacing <= 1080px? Just like for the Blog Module, Divi creates a smaller version (400px wide) of the portfolio featured image to be used for the Portfolio Module grid layout. 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. Mark Quadros is a full-time digital nomad who works with online businesses to help them drive traffic through content. Thanks Adam. Learn more about Mark here. 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. I also have Divi Booster and update the image size there, but again the thumbnail size is not changing. YES, I get that it can be overwhelming to work with images especially when optimizing for multiple screens…. This tweak allows you to change those values to square, portrait, or any custom size you need. We have already published two other tutorials in our “change image aspect ration” series, and there is one more to follow after this. add_filter( 'et_pb_portfolio_image_width', 'portfolio_size_w' ); function portfolio_size_h($height) { Use Any Image Size or Shape In The Divi Portfolio Module! So if you want 4 images per row, make sure that 4*width + 3*spacing <= 1080px. 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. Now take a look at your page, cool huh? While Divi makes it extremely easy to build websites without code. This post may contain referral links which may earn a commission for this site. So you can follow the same dimensions as for column layouts for instance if you’re using a 2 column layout in 4 x 3 ratio you can use an image with dimensions 510px x 384px. The same image loads on large desktop, tablet and mobiles. I figured since this is a commonly used module in Divi websites I’d dedicate a section just for this module. Divi is a registered trademark of Elegant Themes, Inc. Note: Divi has an option to add alternate text in its Image Module settings which overrides the WordPress sections. Less is more and sometimes it’s better to use only a few but important images so as to keep things clean and effective. 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. A website that loads faster could mean many things for an MNC it cou,ld mean millions of dollars more in sales or for an affiliate blogger higher conversions. If you’re working with portraits on your website, the person module is the best divi image size to use. 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. 1 - Cropped images in Divi, image size, aspect ratio... 2 - A few lines of code to stop cropping Divi images; 3 - Cropped images in the Blog module; 3 - Cropped images in the Portfolio module ; 4 - Cropped images in the Gallery module; 5 - Recap: no cropped image in Divi; Advertisement: This article contains affiliate links that you will easily recognize. 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. So you can follow the same dimensions as for column layouts for instance if you’re using a 2 column layout in 4 x 3 ratio you can use an image with dimensions 510px x 384px. Divi includes a fullsize and regular image module. This is helpful for reducing file size and keeping your page load time down. You will need to go to Module Settings > Design > Make Fullscreen: and check “YES” to span the background image across the screen. in one easy-to-use plugin. In this article, I will teach you how to use and optimize images for your Divi website. Posted on January 13, 2019 by Mark Quadros in Resources | Read Comments. The following modules need to have a 1920px wide background image: Pro Tip: Make sure you look into the content for these modules as this will determine the height of your background image. This means the 25px of padding if now okay, though I've bumped it up to 26px to make more full use of the space available in the row. // End custom image size for Portfolio Module. Then we set the height to 250px (to get square images, in this case). }, function portfolio_size_w($width) { Divi’s Logo is 93px x 43px which serves as a perfect reference. Divi's default image sizes for the Blog and Portfolio modules are set at 400 x 284. The best showcase of beautiful Divi websites, layouts, and child themes. The advantage of using specific dimensions and sizes for your images is to reduce the file size of your image so as to take up less space on your website and ultimately make it load faster. 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. Reply. That’s not too far from the default 1.6 value so in many cases the default blog module 400 x 250 thumbnail size might be fine. For example, maybe you post a lot of images to Facebook and want your Divi blog images to align with Facebook’s recommended image size (1200 x 630).