Do you want to create a responsive image grid layout with DIVI ?
The constructor Divi has fantastic built-in modules that use grid views,
But sometimes you might want to create your own custom image grid layout with CTA links. This gives you more control over the design and contents that you want to display for each grid item without having to resort to a plugin.
Today we'll show you how to create a responsive image grid layout with CTA links using the built-in design options of Divi.
Let's start!
Preview
Here is a brief overview of the result we will get at the end of this tutorial.
Create a page with Divi Theme Builder
From the WordPress Dashboard, create a new web page by going to Pages >> Add
Then, give a title to your page then click on " Use Divi Builder ".
Then click on " start building«
Creating the Special Section Layout
Add a new section " Speciality ". left sidebar layout one third two thirds.
Choose the layout of the columns as shown in the screenshot below:
Delete the default section so that only the new specialized section remains.
Open the section settings and change the background color as follows:
- Background: #84dbda
Under the tab Style, update the following options:
- Equalize column heights: YES
- Use custom gutter width: YES
- Gutter width: 1
- Inside width: 100%
Read also: How do I float blog posts in DIVI?
- Maximum interior width: 1px (desktop), 080px (tablet and phone)
- Internal Margin (Top and Bottom): 12vh
- Column 1 Padding (Top and Bottom): 0px
With the section styles in place, add a one-column row to the section.
Line settings
Update the line parameters as follows:
- Use Custom Gutter Width: YES
- Column spacing: 1
- Harmonize column heights: YES
- Internal Margin (Top and Bottom): 0px
Create a second line by duplicating the first.
Then change the duplicate row to a two-column layout.
Adding images as column background images
Now that all the rows and columns are in place, we're ready to add our images to our grid layout.
In order to ensure that the images are responsive in the grid layout, we'll add each of our images as background images to each of the four columns in the section.
Since each background image will have a background size of " cover ", the image will always fill the entire column when adjusting the browser size.
Top row column background image
To get started, open the top row column settings.
Then add a background image to the column.
Bottom row column background images
Next, open the settings for column 1 in the second (bottom) row and also add a background image to this column.
Next, add a background image to column 2 of the same row.
Section column 1 background image
And finally, open the section settings " speciality " and add a background image to column 1.
Addition of the "Call to Action" module superimposed on the images to each column
Now that our background images have been added to each column of the grid layout, we'll add a "Call to Action" module to each column.
Using a "Call to Action" module overlay on the column background image will allow you to easily add custom background overlay styles and hover effects to the column background image. 'image.
For this example, we'll just use the button element from the Action Call module, but you can easily add to the contents of the title or body above the button.
We will add the first “Call to Action” module in the top row column.
Contents
Update the "Call to Action" module settings as follows:
- remove title text
- delete body text
- Button Link URL: #
REMARK : Adding a "#" for the button's link URL is just a filler for now in order for the button to display. Adding the semi-transparent background color on hover will give you a nice custom overlay color when you hover over the module (and the image behind it).
- Background color: transparent (desktop), rgba (255,235,77,0.5) (hover)
Button Styles
Go to the tab Style and modify the button settings of the "Call to action" module as follows:
- Use custom styles for Button: YES
- Button Text Size: 22px
- Button text color: #ffeb4d
- Background button: #000000 (desktop), #ec5f00 (hover)
- Button Border Width: 0 pixels
- Button Border Radius: 100 px
- Button Font: Quicksand
- Soft Light Button: Semi Bold
- Padding Button: 0,5em Top, 0,5em Bottom, 2em Left, 2em Right
Size, padding and edging
Next, we need to make sure our module has a certain height to expose the background image of the column behind it.
To do this, we will add internal margins (Top and Bottom) to the module.
We will also add a subtle border to the module to give it a little separation from other images in the grid layout.
Apply the following settings:
- Width: 100%
- Internal Margin (Top and Bottom): 15vh
- Bottom border width: 5px
- Left border width: 5px
- Border color: rgba (255,255,255,0.5)
REMARK : Using the unit of length vh for padding will make the padding value relative to the height of the browser viewport. So your image grid elements will grow and shrink in height in proportion to the browser window.
Vertical centering of the content of the "Call to action" module
To ensure that the contents of the “Action Call” module remains vertically centered, we can add a small snippet of custom CSS using the flex property.
Under the advanced tab, add the following CSS to the main element:
display:flex;
flex-direction:column;
justify-content:center;
Added call to action overlay to other columns
Now that the first "Call to Action" module is customized, copy and paste the module into the other 3 columns of the layout, including the 2 columns in the bottom row and column 1 in the section.
To ensure that the "Call to Action" module covers the entire height of column 1 in the specialized section, set the minimum height to 100%.
- Minimum height: 100%
It's over ! Let's see the end result.
Final result
Here is the end result of the responsive image grid layout on a webpage with the hover effects.
And this is how grid reacts when adjusting browser size.
Download DIVI Now!!!
Conclusion
Responsive image grid layouts continue to be a popular aspect of many websites. The visual appeal provided by the background image combined with the call-to-action overlay can really pop those important navigation links.
Also, the responsive nature of the image grid layout will look great on all devices, which is always a necessity.
We hope that this guide will be useful to you in your future projects of creating Website. If you have any concerns or suggestions, find us in the comments section to talk about it.
However, you can also consult our resources if you need more elements to complete your website creation projects.
You can also follow our guide on WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
