We have already published two other tutorials in our “change image aspect ration” series, and there is one more to follow after this. I have no coding experience! ). My tutorial is for the Portfolio and Filterable Portfolio. Hi Terry, Colored Portfolio. What’s more aspect ratio is important when optimizing images for small screens, especially 11 inch laptops. In this tutorial, I'm going to share some handy CSS snippets to change the Divi portfolio or filterable portfolio featured image aspect ratio. This includs a content width of 1080px and a gutter width of 3. What I can do? Divi Tutorial – Centering the Filterable Portfolio Buttons. Got it. Thank you. This code would need to be modified to work for product images. Step 1: Adding Filteratable Portfolio Module Set up your row width to 100% by going to Design tab Add a ID named modified-portfolio under the advanced tab. I wanted them square so that was great. 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. Masonry Filterable Portfolio plugin for Divi Builder! I can go much more into detail but I recommend you check out this image SEO guide for a more detailed guide. Basically, the percentage is the height divided by width. 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. Changing these settings may require you to adjust the dimensions of your images slightly. Place this snippet in Divi Theme Options Custom CSS and it will work! Can you share the link and any details about what you are doing to achieve this? Now you can use this formula for other sizes as well! 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. Hi Chad, https://divigallery.com/blog/ultimate-guide-to-divi-image-sizes To adjust the size and spacing of the images in your thumbnail grid, you can use the following CSS. Can somebody help me? In a recent project I was asked to create a filterable image gallery. Even though the module is very handy, it would be cool if we’d be able to actually filter other modules as well. In ut eleifend mauris. This free Divi layout is a great way to display your portfolio when your featured images are of varying sizes. In the example below, we’ll change the width to 510px and the height to 382px. The DP Filterable Blog module is similar to the default Filterable Portfolio module available in Divi, except it works on any custom post type and has several additional options. 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. Professional high-converting custom website design, Use your website to increase client leads and product sales, Premium website hosting, maintenance, and marketing, Get users to your site from your blog, ads, and social media, As usual, you can copy and paste these CSS snippets into the, https://www.peeayecreative.com/how-to-stop-divi-image-crop/, How To Move And Highlight The Divi Blog Module Author, Date, Or Category Over The Image, How To Use The New Divi Global Colors System. Hi, I have tired this however the CSS box isn’t one box but has various sections – so I went for the ‘portfolio image’ section. There are many more modules but these guidelines should be enough for most websites if you want to access more content regarding the same I recommend checking of Divi’s resources. Divi's default image sizes for the Blog and Portfolio modules are set at 400 x 284. Is there something else to be added to force the photos to show as much of the image as possible while staying within the frame of the new sized ratio? As Divi doesn’t do this out of the box, I had to look for options, one of them being Essential Grid but as I didn’t want to fork out for a plugin that would have been overkill, I decided to see if I could turn the Divi Tabs module into the same kind of thing and, with a little bit of tinkering, I managed to come right. . In this article, I will teach you how to use and optimize images for your Divi website. However it doesn’t work and after line 3 red text saying EXPECTED RBRACE, and after line 17 UNEXPECTED TOKEN (}). You can change the default width and height values by adding a filter to your child theme’s functions.php file. Hi Facundo, Most times it’s actually counter-intuitive to use more images as it just confuses and the meaning is low. Portfolio Title – this title will be displayed above the portfolio – leave blank if you don’t want to show a title. Pro Tip: With 2 or more column layouts the mobile/tablet version changes to cascade so I recommend using an image with a slightly longer width so as to offer a wider fit on smaller screens. 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. I personally dislike anything with the name “Fullwidth” because they are outdated and lack essential features, and now with the sizing options in the regular modules they are essentially depreciated. This tweak allows you to change those values to square, portrait, or any custom size you need. Learn how to access and view the Divi changelog, the detailed list of all the new features and bug fixes released by Elegant Themes.