So I decided to give it a darker background and make the grid 3 columns instead of 4. Add to Wish List. Important: This code only works for 3 or fewer elements. The Divi Gallery Module automatically puts the Grid style layout in 4 columns, but every once in a while it’d be nice to lay them out in 3, 4, or 6 columns, right? Images are added manually using Divi Image modules in 3 columns to give a masonry-style layout. Divi’s Image Module 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. 1. One of our most common requests at DiviPlugins is how to change the portfolio layout from four Choose the column layout that matches the layout of the blog page. Nelson on 02/08/2017 at 5:05 pm . NEW: Filterable Image Categories, Dynamic Gallery, Custom Image Link, On-Click Trigger Control. How To Keep Columns Side-By-Side On Mobile in Divi. 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. Person People Girl Woman Hair White Cute. In this post, I’ll show you … Click on the pencil icon in the body section and create a custom body area. All that is left is to extend the image in row 3, column 2. If you are trying to have four or more columns side-by-side on mobile, jump to that section now. Update the image module with a custom margin of -100% Left. Now copy the module styles and paste those into the text modules in Row 2, column 6 and also into the text module in Row 3, column 5. Divi Masonry Gallery Module Create Stunning Divi Masonry Galleries. Each of the images has the Open In Lightbox setting toggled on so that a user can click the image to open the full-size image in a popup. For Gallery 3, you need a multiple of 8 images; For Gallery 4, you need a multiple of 8 images; STEP 2: Create your Gallery. The Divi gallery module has a handy, though not very obvious, feature for re-ordering the images in the gallery module. Multiple Columns; Lightbox; Column Spacing; Image Styles; Select Page. Click the “Gallery” module. 2. Create your Divi gallery by going to your Page and enable Visual Builder. What is the licensing on this? Q8: Vertically center any content in Divi; E5: 3 Ways to use Anchor Links in Divi; R25: How to create a 2, 3 or 4 column square blog layout; R22: How to Add Links to the Divi Gallery Module and Show Captions on Hover But I felt the four columns made things a little cramped as i really wanted to highlight the featured image of each project a little more. To keep columns side-by-side on mobile in Divi, all you have to do is add a custom line of CSS code to your row settings. 4) Changing the Number of Columns in the Divi Gallery Module. That way I can make the images a little larger. 2 Comments. Next, add a -100% Left Margin to the Text Module in Row 2, column 3. Divi Three Column Module Designs Bundle (Single Site) – $19.00 Divi Three Column Module Designs Bundle (Unlimited Sites) – $99.00. Purchase Checkout. Once the blog page is complete, go to the Theme Builder under the Divi/Extra menu and create a new template. Add your sidebar in one column and the Blog module in another. Ut scelerisque quis magna et imperdiet.