In one of the latest Divi updates, we added some pretty amazing controls to columns in the builder. It’s now easier than ever to create column overlaps. In this tutorial, we’ll show you how to create a testimonial section with three overlapping columns using Divi’s column and transform settings.
For this design, we’ll use three colors, a rich orange #ff8300, a warm yellow #ffd400, and a stand-out blue gradient #0c99c1. You can apply this overlapping column design to a website project in no time.
Let’s get started.
Preview
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.
Desktop
Mobile
1. Create New Regular Section + Three-Column Row
The first thing you need to do is create a regular section with a three-column row.
Adjust Spacing of Section
Increase the top and bottom padding of the section.
- Top Padding: 4vw
- Bottom Padding: 16vw
Adjust Sizing & Spacing of Row
Open the row settings and change the sizing settings accordingly:
- Use a Custom Gutter Width: Yes
- Gutter Width: 1
- Width: 100%
- Max Width: 100%
After that, modify the spacing settings:
- Bottom Padding: 0px
- Left Padding: 11vw
- Right Padding: 8vw
Add Gradient Background
Add a gradient background next:
- Background Style: Gradient
- First Color: white #ffffff
- Second Color: Orange #ff8300
- Gradient Type: Linear
- Gradient Direction: 180 deg
- Start Position: 35%
- End Position: 35%
2. Style Columns
Before adding modules to the columns, we’ll change the styling, spacing and transform settings of each column individually.
Column 1
The first steps of the column styling are the rounded corners and box shadow:
- Border: 20px on all rounded corners
- Box Shadow: First box shadow option
- Box Shadow Vertical Position: 0px
- Box Shadow Blur Strength: 80px
- Shadow Color: rgba(0,0,0,0.3)
- Box Shadow Position: Outer
* Before adding any transform settings, we will copy and paste these item styles to column two and three.
Open the column 1 settings again and go to the design tab. We’ll use the transform settings to make the first column overlap the second. Just in case you forgot, the x-axis is horizontal and the y-axis is vertical.
- Transform Translate:
- Desktop: x-axis = 3vw. y-axis = 14.2vw
- Tablet and Phone: x-axis = -14vw. y-axis = 16vw
- Visibility: Z Index 10
Column 2
On to the second column! Go to the box shadow (which you’ve added in one of the previous steps) and increase the box shadow blur strength.
- Box Shadow Blur Strength: 50px
Continue by adding some custom spacing values to column 2.
- Top Padding:
- Desktop = 3vw
- Tablet + Phone = 5vw
- Bottom Padding:
- Desktop = 5vw
- Tablet + Phone = 7vw
- Left Padding:
- Desktop = 2vw
- Tablet + Phone = 4vw
- Right Padding:
- Desktop = 2vw
- Tablet + Phone = 4vw
Time to transform the second column! The second column stays in its place for desktop but we have to apply some custom transform settings across smaller screens. Go ahead and adjust the transform translate tab. Additionally, we’ll increase the Z index to 9.
- Transform Translate:
- Tablet and Phone: x-axis = 9vw. y-axis = 13vw
- Visibility: Z Index 9
Column 3
On to the third column! Increase the box shadow blur strength of the already existing box shadow.
- Box Shadow Blur Strength: 50px
Open the background settings next and add a blue gradient background.
- Background: Gradient
- Gradient Color One: #0c99c1
- Gradient Color Two: rgba(5,0,78,0.72)
- Gradient Type: Linear
- Gradient Direction: 220 deg
- Start Position: 0%
- End Position: 100%
Now, let’s add the spacing.
- Top Padding:
- Desktop = 3vw
- Tablet + Phone = 10vw
- Bottom Padding:
- Desktop = 3vw
- Tablet + Phone = 7vw
- Left Padding:
- Desktop = 1.5vw
- Tablet + Phone = 10vw
- Right Padding:
- Desktop = 1.5vw
- Tablet + Phone = 10vw
Last but not least, we’ll make the third column overlap the second one by changing transform translate settings.
- Transform Translate:
- Desktop: x-axis = -10vw. y-axis = 14.2vw
- Tablet: x-axis = -14vw. y-axis = 9vw
- Phone: x-axis = -14vw. y-axis = 11vw
- Visibility: Z Index 9
Here’s a preview of our columns before adding the modules.
3. Add Modules to Columns & Style Them
Now, let’s add the modules to each column!
Column 1
In column one, we’ll insert an image module and a text module. Add the image module first.
1. Add The Image Module
Insert a photo of your client and style it as follows:
- Alignment: Left
- Force Fullwidth: Yes
Add a bottom border to the image as well.
- Bottom Border Color: Yellow #ffd400
- Bottom Border Width: 9px
- Border Style: Solid
2. Add The Text Module
Add a new text module right below the image module and insert the client’s name and position.
- Name: Heading 4
- Position: Paragraph
After adding the content, we’ll style the text settings:
- Text Font: Nunito Sans
- Text Font Weight: Regular
- Text Alignment: Center
- Text Color: Black #000000
- Text Size:
- Desktop = 0.8vw
- Tablet = 1.8vw
- Phone = 2.8vw
Move on to the heading text settings and apply the following changes:
- Heading Text: H4
- Heading 4 Font: Poppins
- Heading 4 Font Weight: Bold
- Heading 4 Text Color: Black #000000
- Heading 4 Text Size:
- Desktop = 1vw
- Tablet = 3vw
- Phone = 4vw
We’ll also change the spacing settings:
- Top Margin:
- Desktop = 1.5vw
- Tablet = 3vw
- Phone = 7vw
- Bottom Margin:
- Desktop = 1.5vw
- Tablet = 3vw
- Phone = 7vw
Your column should look like this once you’ve completed both modules:
Column 2
In column 2, we need a text, a blurb, and a divider module. The first text module is the one that looks like an angled banner at the top right corner of the column. We will use the transform options to achieve this effect.
1. Add Text Module.
Add a new text module and add the word ‘Testimonial’ to the content box.
Add a yellow background to the module.
- Background Color: Yellow #ffd400
Move on to the design tab and change the text and spacing settings accordingly:
- Text Font: Poppins
- Text Font Weight: Bold
- Text Alignment: Center
- Text Color: White #ffffff
- Text Size: 23px
- Right Margin: -50px
- Left Margin: -50px
- Top Padding: 15px
- Bottom Padding: 15px
Last but not least, we’ll adjust the transform settings as follows:
- Transform Translate:
- Desktop = 17vw on the x-axis
- Tablet = 24vw on the x-axis, 1vw on the y-axis
- Phone = 20vw on the x-axis, 1vw on the y-axis
- Transform Rotate: 32 deg on the first axis
2. Add The Blurb Module.
Once you’ve completed the first module, its time to add a blurb module.
The blurb module is where the client’s testimonial is displayed. First, click on the + icon to add a module and select blurb.
Afterward, insert the content, select an icon and style the icon as follows:
- Use Icon: Yes, a Star
- Icon Color: Yellow #ffd400
- Icon Placement: Left
- Use Icon Font Size: Yes, 48px
Continue by styling the title text at an H4 level
- Title Text: H4
- Title Font: Poppins
- Title Font Weight: Bold
- Title Font Color: Black #ffffff
- Title Text Size:
- Desktop = 1.2vw
- Tablet = 2.3vw
- Phone = 3.3vw
- Title Line Height:
- Desktop = 2vw
- Tablet = 3.4vw
- Phone = 4.6vw
Style the body text settings accordingly:
- Body Text Font: Nunito Sans
- Body Text Weight: Semi Bold
- Body Text Color: Black #000000
- Body Text Size:
- Desktop = 0.7vw
- Tablet = 1.6vw
- Phone = 2.4vw
- Body Line Height:
- Desktop = 1.6vw
- Tablet = 4vw
- Phone = 5vw
We want the blurb to be less wide than its column, to accomplish that, we’ll adjust the width, margins, and padding values.
First, we’ll adjust the width of the blurb:
- Content Width: 100%
- Width:
- Desktop = 58.4%
- Tablet + Phone = 90%
And then, the spacing settings:
- Top Margin: 3vw
- Bottom Margin: 3vw
- Right Margin: -24vw
- Left Padding: 0px
- Right Padding: 4px
3. Add Divider
The last module we need in this column is a divider module. Apply the following changes to the divider:
- See Divider: Yes
- Divider Color: Black #oooooo
- Divider Weight: 1px
We’re almost there! This is what our outcome looks like up until now:
Column 3
On to the third and last column! We’re using this column to display a call to action. We’re using three modules; a text module, a divider module and a button module.
1. Add Text Module
The first thing we’ll add to this column is the text module.
We’ll add a title in H3 and a bit of paragraph text to the content box.
Go ahead and style the text settings accordingly:
- Text Font: Nunito Sans
- Text Font Weight: Regular
- Text Font Color: White #ffffff
- Text Font Size:
- Desktop = 0.8vw
- Tablet=- 2vw
- Phone = 2.6vw
- Text line Height:
- Desktop = 1.5vw
- Tablet = 4vw
- Phone = 5vw
Complete the text module by styling the heading text settings.
- Heading Text: H3
- Heading 3 Font: Poppins
- Heading 3 Font Weight: Bold
- Heading 3 Text Color: White #ffffff
- Heading 3 Text Size:
- Desktop = 1.1vw
- Tablet = 3vw
- Phone = 4vw
- Heading 3 Line Height:
- Desktop = 1.5vw
- Tablet = 3vw
- Phone = 4.5vw
2. Add Divider Module
Continue by adding a divider module to column 3. To style the divider, we’ll copy and paste the divider styles from the one you can find in column 2.
Open the divider settings and change color from black to white. Add some top and bottom padding as well.
- Divider Color: White #ffffff
- Top Padding: 40px
- Bottom Padding: 20px
3. Add Button Module
On to the last module, which is a button module. Add some copy of your choice.
Move on to the design tab and style the button as follows:
- Use Custom Style for Button: Yes
- Button Text Size:
- Desktop = 0.8vw
- Tablet = 2.4vw
- Phone = 3vw
- Button Text Color: White #ffffff
- Button Background Color: Gradient
- Gradient Color One: Yellow #ffd400
- Gradient Color Two: Orange #ff8300
- Gradient Type: Linear
- Gradient Direction: 202deg.
- Button Border Width: 0px
- Button Letter Spacing: 1px
- Button Font: Nunito Sans
- Button Font Weight: Heavy
- Button Font Style: TT
In order to make the button look good across all screen sizes, we’ll adjust the padding of the button as follows:
Desktop
- Top Padding: 1vw
- Bottom Padding: 1vw
- Right Padding: 3vw
- Left Padding: 3vw
Tablet
- Top Padding: 2vw
- Bottom Padding: 2vw
- Right Padding: 6vw
- Left Padding: 6vw
Phone
- Top Padding: 3vw
- Bottom Padding: 3vw
- Right Padding: 8vw
- Left Padding: 8vw
Preview
Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.
Desktop
Mobile
Wrapping up
This overlapping three-column build looks great as a testimonial but we’re sure you can implement it for other amazing things. We hope this will inspire you to use the column transform and overlapping options for future projects. If you have any questions or suggestions, make sure you leave a comment in the comment section below!
The post How to Create Overlapping Columns with Divi’s Column & Transform Options appeared first on Elegant Themes Blog.
