Sélectionner une page

How to Create Overlapping Columns with Divi’s Column & Transform Options

How to Create Overlapping Columns with Divi’s Column & Transform Options

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.


Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.


column overlaps


column overlaps

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.

Add a regular section in the divi builder

three column row

Adjust Spacing of Section

Increase the top and bottom padding of the section.

  • Top Padding: 4vw
  • Bottom Padding: 16vw

add the section padding

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%

set the row sizing

After that, modify the spacing settings:

  • Bottom Padding: 0px
  • Left Padding: 11vw
  • Right Padding: 8vw

set the padding of the row

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%

add the background

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

add a rounded border to column one

box shadow setting for row one

* Before adding any transform settings, we will copy and paste these item styles to column two and three.

copy item styles from column one

paste item styles to columns 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 one transform options

transform options for column one in mobile

adjust z index in column one

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

adjust the box shadow blur strength in column two

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

column two padding for desktop.

column two padding for mobile.

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

transform column 2 for mobile

visibility at z index for column 2

Column 3

On to the third column! Increase the box shadow blur strength of the already existing box shadow.

  • Box Shadow Blur Strength: 50px

adjust the box shadow blur strength in columns

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%

add background color to column three.

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

adjust padding in column three

adjust padding for column three on mobile

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

adjust padding for column three on mobile

transform column three for mobile

transform column three phone

Here’s a preview of our columns before adding the modules.

three column preview without 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

add an image module to column one

Insert a photo of your client and style it as follows:

  • Alignment: Left
  • Force Fullwidth: Yes

image alignment in column one

force full width on image column one

Add a bottom border to the image as well.

  • Bottom Border Color: Yellow #ffd400
  • Bottom Border Width: 9px
  • Border Style: Solid

add a yellow bottom border to the image on column one

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

add a text module below the image on column one.png

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

style the text for the client photo

size the text for desktop

size text for tablet

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

heading text settings under photo

column one text for desktop

size the text in column one for tablet

size the text in column one for phones

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

text spacing in column one desktop

text settings for column on tablet

text styling for column one, phone

Your column should look like this once you’ve completed both modules:

column one finished

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 text module to column 2

Add a yellow background to the module.

  • Background Color: Yellow #ffd400

yellow background in the text module in column 2

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

style the font in the text module column two

padding and margin on text for column 2

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

transform testimonial text

transform settings for text in column two

transform options for text in column three

adjust transform rotate to text

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.

insert blurb module in column two

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

insert an icon in the blurb

style the icon in the blurb

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

style the text in blurb column two

  • Title Text Size:
    • Desktop = 1.2vw
    • Tablet = 2.3vw
    • Phone = 3.3vw
  • Title Line Height:
    • Desktop = 2vw
    • Tablet = 3.4vw
    • Phone = 4.6vw

line height and text size for blurb

line height text size

text size and line height for phones

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

body text size in the blurb

line height and text size blurb

body text height

blurb body text for phone

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%

blurb width

blurb width for mobile

And then, the spacing settings:

  • Top Margin: 3vw
  • Bottom Margin: 3vw
  • Right Margin: -24vw
  • Left Padding: 0px
  • Right Padding: 4px

blurb spacing for column two

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

add a divider under the blurb

set divider to show

black divider color

divider weight 1px

We’re almost there! This is what our outcome looks like up until now:

finished column two

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.

insert a text module in column three

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

style the content in the text box column three

text size desktop column three

style text for tablet

style text for phone

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

heading style for column three

heading size for column three

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.

copy module divider

paste module

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

change the divider color from black to white

add spacing to the divider

3. Add Button Module

On to the last module, which is a button module. Add some copy of your choice.

add a button

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

styling the button in column three

style the button for tablets

style button text for mobile

  • Button Background Color: Gradient
  • Gradient Color One: Yellow #ffd400
  • Gradient Color Two: Orange #ff8300
  • Gradient Type: Linear
  • Gradient Direction: 202deg.

add a yellow background to the button

  • Button Border Width: 0px
  • Button Letter Spacing: 1px
  • Button Font: Nunito Sans
  • Button Font Weight: Heavy
  • Button Font Style: TT

styling the button font in column three

In order to make the button look good across all screen sizes, we’ll adjust the padding of the button as follows:


  • Top Padding: 1vw
  • Bottom Padding: 1vw
  • Right Padding: 3vw
  • Left Padding: 3vw

adjust spacing of button for desktop


  • Top Padding: 2vw
  • Bottom Padding: 2vw
  • Right Padding: 6vw
  • Left Padding: 6vw

spacing for tablet - button


  • Top Padding: 3vw
  • Bottom Padding: 3vw
  • Right Padding: 8vw
  • Left Padding: 8vw

spacing for the phone button column three


Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.


column overlaps


column overlaps

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!

Source link

Poster le commentaire

Votre adresse e-mail ne sera pas publiée.