stunning CTA column overlays

Stunning CTA column overlays: The more visually appealing the CTA, the better the chance 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 Stunning CTA column templates with semi-transparent images and column overlaps.

stunning CTA column overlays

Stunning CTA column overlays: 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 section settings and add a gradient background.

  • Background: gradient
  • Gradient background-color: 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
  • Bottom Padding
    • Tablet + Phone: 70vw

Add a new row

Column structure

Continue by adding a new row using the column structure.

Sizing

Then adjust the width and the 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 H2 content and paragraphs you want.

Text

Switch to the design tab and style the text as follows:

  • Text font: Open Sans
  • Text alignment: center
  • Text Color: Green # 5bba1b
  • Text size:
    • Desktop: 1.2vw
    • Tablet: 2.8vw
    • Phone: 3.6vw
  • Text letter spacing: 0.2vw
  • Text Line Height: 1.8em

Title 2 Text

After styling the paragraph text, style the H2 text as well.

  • Heading: H2
  • H2 Font weight: Doppio One
  • H2 Text alignment: Center
  • H2 text color: # 3d3d3d
  • H2 Text size:
    • Desktop: 4.4vw
    • Tablet: 5.9vw
    • Phone: 6.9vw

Spacing

And add some 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

Then change the color of the separator.

  • Line Color: Dark Gray # 545454

Sizing

Now adjust the size of the divider to make it look smaller.

  • Separator weight: 4px
  • Width: 9%
  • Module alignment: center

Spacing

Also, add a negative top margin.

  • Top margin:
    • Desktop: -40px
    • Tablet + Phone: -15px

Add a new row

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 adding modules, add a gradient to the background of the row settings.

  • Background: gradient
  • Background color gradient 1: white #ffffff
  • Background color gradient two: transparent
  • Gradient Type: Radial
  • Radial steering center
  • Starting position: 42%
  • Final position: 50%

Sizing

Now adjust the size of the row.

  • Width: 100%
  • Maximum width: 100%

Spacing

Then go to the spacing settings and add custom padding values.

  • top padding: 22vw
  • Bottom padding: 10vw
  • Left and right padding: 10vw

Column 1 Parameters

context

Continue by opening the settings in column 1 and add a gradient background.

  • Background: gradient
  • Gradient background color: Blue # 2a4eed
  • Background color gradient two: light blue # 91f5f7
  • Gradient Type: linear
  • Gradient direction: 38deg
  • Starting position: 23%

Frontier

Then set the rounded corners of the columns in the border settings.

  • Rounded corners: 2vw at all corners

Shadowbox

Add a subtle box-shadow 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 column overflows are also visible.

  • Horizontal and vertical overflow: visible

Column 2 Parameters

context

Go to the second column and add the following gradient background:

  • Background: gradient
  • Gradient background color one: # 1ba038
  • Two-color background gradient: # c6f727
  • Gradient Type: linear
  • Gradient direction: 38deg
  • Starting position: 23%

Frontier

Also, add a border-radius to the column.

  • Rounded corners: 2vw at all four corners

Shadowbox

With a subtle box-shadow.

  • Box Shadow: Second option
  • Shadow of the box Horizontal position: 6px
  • Box Shadow Vertical Position: -10px
  • Box Shadow Blur Force: 50px

Transform

This column is a little higher than the others. To create this effect, we’re going to adjust the transform conversion settings for column 2.

  • Transform Translate:
    • Office: -8vw, y-axis
    • Tablet + Phone: 30vw, y-axis

Overflows

Also, make the overflows of this column visible.

  • Horizontal and vertical overflows: visible

Column 3 Parameters

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%

Frontier

Switch to the Design tab and add a border-radius to each corner.

  • Rounded corners: 2vw on all corners.

Shadowbox

Add a box-shadow too.

  • Box Shadow: Second option
  • Shadow of the box Horizontal position: 6px
  • Box Shadow Vertical Position: -10px
  • Box Shadow Blur Force: 50px

Transform

On smaller screen sizes we will need to reposition the column using custom transform conversion values.

  • Transform Translate:
    • Tablet + Phone: 60vw

Overflows

Finally, adjust the overflow settings.

  • Horizontal and vertical overflows: visible

Add Image Modules

Import a cropped semi-transparent image

Once you’ve made all the column settings, 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 padding values.

  • Top margin:
    • Office: -11vw
    • Tablet + Phone: -24vw
  • Left and right padding:
      • Desktop: 5vw
      • Tablet + Phone: 20vw

Transform the ladder into a hover

We add a subtle hover effect to the image using the scale transform option in the transform settings.

  • Transform Scale on Hover: 120% on both axes.

Z-Index

To make sure 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 columns 2 and 3.
  • Upload different images

Add text modules

Add H3 content

Under the image in column 1, add a text module and insert any H3 content you want.

Title 3 Text

Switch to the design tab and apply a style to the H3 text settings.

  • Text title: H3
  • H3 Police: Doppio One
  • H3 Font weight: bold
  • H3 Alignment: center
  • H3 Text color: White #ffffff
  • H3 Text size:
    • Desktop: 1.8vw
    • Tablet: 5vw
    • Phone: 6vw

Duplicate and drag text modules

Clone the text module twice and place the duplicates in the remaining two columns.

  • Start by duplicating the text modules twice.
  • Then drag them under the Image Modules in Columns 2 and 3.
  • Change the content 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.

Text

Now style the text as follows.

  • Text font: Open Sans
  • Text color: White #ffffff
  • Text size:
    • Desktop: 0.6vw
    • Tablet: 2vw
    • Phone: 2.8vw
  • Text Line Height: 2.2em

Spacing

To center the text, adjust the module spacing as follows.

  • Bottom margin:
    • Desktop: 5vw
    • Tablet + Phone: 10vw
  • Left and right padding
    • Desktop: 5vw
    • Tablet + Phone: 14vw

Duplicate and drag text modules

Clone the text module twice and drag 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

Read more: How to create segmented circular menu using Divi Blurbs

Add button modules

Add content

Let’s move on to the last module! Add a button module to column 1 with a copy of your choice.

Add a link

Insert a link in the module’s link options.

Alignment

Now line up the button module.

  • Alignment: center

Button styles

Then invoke the button as follows.

  • Button text size:
    • Office: 1vw
    • Tablet: 2vw
    • Phone: 3vw
  • Button Text Color: Bright Blue # 2a4eed
  • Buttons background color: White #ffffff
  • Button border-radius: 50vw
  • Button Font: Double One
  • Font Weight: Bold
  • Button color: 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.

  • Bottom margin:
    • Desktop: -1.7vw
    • Tablet: -4vw
    • Phone: -6vw
  • Top and Bottom Padding:
    • Office: 1vw
    • Tablet + Phone: 3vw
  • Left and right padding
    • Office: 4vw
    • Tablet + Phone: 10vw

Shadowbox

Last but not least, add a subtle box-shadow to the button.

  • Box shadow: the 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 the previous modules, clone the button twice and place the duplicates in the remaining two columns of the row.

  • Clone 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 with the button in the last column and you’re done!

  • Button Text Color: Orange # f0562c
  • Icon Color: # f0562c

To finish Stunning CTA column overlays

In this article, we’ve shown you how to use semi-transparent images to create Stunning CTA column overlays. We used the Divi column overrun settings to make the images and buttons overlap seamlessly.

 

For website maintenance service contact us.

Leave a comment

echo "";