The more visually appealing the CTA, the better the chance that the conversion rate will be. There are many ways to design your CTAs, but in this article, we're going to show you how to create awesome CTA column templates with semi-transparent images and column overlaps. You can find the semi-transparent images in the download folder below, but feel free to use other images. You will also be able to download the JSON file for free!
Let's go.
Previews
Before we dive into the tutorial, let's take a quick look at how we look at different screen sizes.
Let's start recreating!
Add a new section
Context
Start by creating a new page or adding a new regular section to an existing page. Then go to the settings section and add a gradient background.
- Background: gradient
- Gradient color gradient: very light gray #efefef
- Background color two: White #ffffff
- Gradient type: Radial
- Radial direction: center
- Starting position: 52%
- Final position: 50%
Spacing
Switch to the Design tab and adjust the infill in the spacing settings.
- Top and bottom padding
- Office: 0vw
- Upholstery In Stockings
- Tablet + Phone: 70vw
Add a new line
Column structure
Continue adding a new row using the following column structure:
sizing
Then adjust the width and maximum width of the line.
- Width: 100%
- Max width 100%
Add a text module
Add H2 and textual content
It's time to add modules! First, add a text module and insert some contents H2 and paragraphs of your choice.
texts
Switch to the design tab and style the text as follows:
- Font text: Open Sans
- Alignment of the text: center
- Color of text: Green #5bba1b
- Text size:
- Office: 1.2vw
- Tablet: 2.8vw
- Phone: 3.6vw
- Spacing of text letters: 0.2vw
- Height of the line of text: 1.8em
Title 2 Text
After styling the paragraph text, also style the text H2.
- Section: H2
- H2 Font weight: Doppio One
- H2 Text Alignment: Center
- Text color H2: #3d3d3d
- H2 Text size:
- Office: 4.4vw
- Tablet: 5.9vw
- Phone: 6.9vw
Spacing
And add a little padding at the top.
- Top Padding: 212px
Add a division module
Visibility
Under the text module, add a division module and set the visibility to "Yes".
- Visibility: yes
Line
Change the color of the separator then.
- Line color: Dark gray #545454
sizing
Now, adjust the size of the separator so that it looks smaller.
- Separator weight: 4px
- Width: 9%
- Alignment of the module: center
Spacing
Also add a negative top margin.
- Upper margin:
- Office: -40px
- Tablet + Phone: -15px
Add a new line
Column structure
Continue by adding a new row with three columns of equal size. This will be the basis for the design of the CTA column.
Context
Before you add modules, add a gradient to the background of the line's parameters.
- Background: gradient
- 1 background color gradient: white #ffffff
- Gradient background color two: transparent
- Gradient type: Radial
- Radial steering center
- Starting position: 42%
- Final position: 50%
sizing
Now, adjust the size of the line.
- Width: 100%
- Maximum width: 100%
Spacing
Then go to the spacing settings and add custom padding values.
- upper upholstery: 22vw
- Bottom padding: 10vw
- Left and right padding: 10vw
1 Column Settings
Context
Continue by opening the 1 column and adding a gradient background.
- Background: gradient
- Gradient background color: Blue #2a4eed
- Gradient background color two: light blue #91f5f7
- Gradient type: linear
- Gradient Direction: 38deg
- Starting position: 23%
Border
Then define the rounded corners of the columns in the border settings.
- Rounded corners: 2vw at all corners
Shadow box
Add a subtle box shade too.
- Box Shadow: Second option
- Shadow of the box Horizontal position: 6px
- Box Shadow Vertical Position: -10px
- Box Shadow Blur Force: 50px
overflows
Make sure the overflows of the column are also visible.
- Horizontal and vertical overflow: visible
2 Column Settings
Context
Go to the second column and add the following gradient background:
- Background: gradient
- Background gradient color one: #1ba038
- Two color background gradient: #c6f727
- Gradient type: linear
- Gradient Direction: 38deg
- Starting position: 23%
Border
Also add a border radius to the column.
- Rounded corners: 2vw at the four corners
Shadow box
With a subtle box shade.
- Box Shadow: Second option
- Shadow of the box Horizontal position: 6px
- Box Shadow Vertical Position: -10px
- Box Shadow Blur Force: 50px
Transformer
This column is a little higher than the others. To create this effect, we are going to adjust the transform conversion settings for column 2.
- Transformer Translate:
- Office: -8vw, y-axis
- Tablet + Phone: 30vw, Y axis
overflows
Also make visible the overflows of this column.
- Horizontal and vertical overflows: visible
3 Column Settings
Context
Let's move on to the last and last column! Add a gradient background.
- Background: gradient
- Gradient background color one: #f0562c
- Two color background gradient: #f1a526
- Gradient type: linear
- Gradient Direction: 38deg
- Starting position: 23%
Border
Switch to the Design tab and add a border radius to each corner.
- Rounded corners: 2vw on all corners.
Shadow box
Add a box shade too.
- Box Shadow: Second option
- Shadow of the box Horizontal position: 6px
- Box Shadow Vertical Position: -10px
- Box Shadow Blur Force: 50px
Transformer
On smaller screen sizes we will need to reposition the column using custom transform conversion values.
- Transformer Translate:
- Tablet + Phone: 60vw
overflows
Finally, adjust the overflow settings.
- Horizontal and vertical overflows: visible
Add image modules
Import a cutout semi-transparent image
Once you've made all of the column parameters, it's time to add modules. Add an image module to column 1 and upload a semi-transparent image of your choice. You can find the images we used in the zipped folder that you were able to download at the start of this article.
sizing
Make the module full width.
- Switch to full width mode: Yes
Spacing
Then add custom margin and fill values.
- Upper margin:
- Office: -11vw
- Tablet + Phone: -24vw
- Padding left and right:
- Office: 5vw
- Tablet + Phone: 20vw
Turn the ladder into a hover
We add a subtle hover effect to the image using the transform scale option in the transform settings.
- Transform Scale on Hover: 120% on both axes.
Z-Index
To ensure that the image appears at the top of the column, increase the z index value on the Advanced tab.
- Z-Index: 1
Duplicate and drag image modules
Now clone the image module twice and place the duplicates in the remaining two columns. This process is easier in wired mode.
- Start by duplicating the image module twice
- Then drag the new image modules to the 2 and 3 columns.
- Download different images
Add text modules
Add H3 content
Below the image in column 1, add a text module and insert some contents H3 of your choice.
Title 3 Text
Switch to the design tab and apply a style to the H3 text settings.
- Text Title: H3
- H3 Font: Doppio One
- H3 Font weight: bold
- H3 Alignment: center
- H3 Text Color: White #ffffff
- H3 Text size:
- Office: 1.8vw
- Tablet: 5vw
- Phone: 6vw
Duplicate and drag text modules
Clone the text module twice and place the duplicates in the two remaining columns.
- Start by duplicating the text modules twice.
- Then drag them under the picture modules in columns 2 and 3.
- Change the contents in each new text module
Add text modules
Add content
Under the title module, add a new text module. Add paragraph content in the content area.
texts
Now, style the text as follows.
- Font text: Open Sans
- Text color: White #ffffff
- Text size:
- Office: 0.6vw
- Tablet: 2vw
- Phone: 2.8vw
- Height of the line of text: 2.2em
Spacing
To center the text, adjust the spacing of the module as follows.
- Lower margin:
- Office: 5vw
- Tablet + Phone: 10vw
- Padding left and right
- Office: 5vw
- Tablet + Phone: 14vw
Duplicate and drag text modules
Clone the text module twice and drag the duplicates to the remaining two columns.
- Start by duplicating the text modules twice
- Then place the duplicates in columns 2 and 3
- Change the content of each duplicate
Add button modules
Add content
Let's go to the last module! Add a button module to the 1 column with a copy of your choice.
Ajouter un lien
Insert a link in the module's link options.
Alignment
Now align the button module.
- Alignment: center
Button Styles
Then, call the button as follows.
- Size of the button text:
- Office: 1vw
- Tablet: 2vw
- Phone: 3vw
- Button text color: Bright Blue #2a4eed
- Button Background Color: White #ffffff
- Radius of the border of the button: 50vw
- Button font: Double One
- Font weight: Bold
- The color of the buttons: Bright Blue #2a4eed
Spacing
Shape the button and create an overlap at the bottom by adding custom margin and padding values in the spacing settings.
- Lower margin:
- Office: -1.7vw
- Tablet: -4vw
- Phone: -6vw
- Upholstery Top and Bottom:
- Office: 1vw
- Tablet + Phone: 3vw
- Padding left and right
- Office: 4vw
- Tablet + Phone: 10vw
Shadow box
Last but not least, add a subtle box shade to the button.
- Box shadow: first option
- Shadow of the box horizontal position: 0px
- Shadow of the box vertical position: 2px
- Box Shadow Blur Force: 50px
Duplicate and drag button modules
As with previous modules, clone the button twice and place the duplicates in the remaining two columns of the line.
- Clone the button module twice
- Place the duplicates in columns 2 and 3
Button 2 Icon text and color
Change the button and button module icon color in column 2.
- Button text color: Green # 1ba038
- Icon Color: # 1ba038
Button 3 Icon text and color
Do the same thing with the button in the last column and you're done!
- Color of the text of the buttons: Orange #f0562c
- Icon Color: # f0562c
To finish
In this article, we showed you how to use semi-transparent images to create a stunning CTA column design. We used column overflow settings Divi so that images and buttons overlap seamlessly. Try using this design in your next project Divi and let us know how it goes in the comments section!
