The way you present your CTA inside a page you design can have a big impact on how your visitors take action. You can go about it the most frequently used way, by using the button format with copy in the middle, but you can get creative with it as well. In today’s tutorial, we’ll show you a creative way to include a call to action in your Divi design. We’re going to include hover-animated corner button arrows to be exact. Once an arrow is hovered, the arrow direction will change alongside the style. You will be able to download the JSON file of this design for free as well!
Let’s get to it.
Download The Layout for FREE
To lay your hands on the free layout, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Let’s Start Recreating!
Add New Specialty Section
Add a new specialty section to the page you’re working on. Select the following column structure for it:
Gradient Background
Open the section settings and apply the following gradient background:
Then, go to the spacing settings and add some right padding to column 1.
Add Text Module #1 to Column 1
Add H2 Content
Time to add modules, starting with a Text Module in column 1. Add some H2 content of your choice.
H2 Text Settings
Style the module’s H2 text settings as follows:
Add some top and bottom margin next.
Add Text Module #2 to Column 1
Add Description Content
Add another Text Module below the previous one with some description content of your choice.
Text Settings
Change the module’s text settings as follows:
Add some bottom margin on smaller screen sizes as well.
Add Row #1 to Column 2
Column Structure
On to the section’s second column. There, add a first row using the following column structure
Remove all default top and bottom padding next.
Then, open the column 1 settings and apply a background color of your choice.
Complete the column settings by settings the overflows to visible in the advanced tab.
Add Text Module #1 to Column 1
Add Content
Time to add Modules, starting with a first Text Module in column 1. Add some content of your choice.
Text Settings
Change the module’s text settings:
Apply some bottom margin as well.
Add Divider Module to Column 1
Add Text Module #2 to Column 1
Add H3 Content
Add another Text Module to column 1. Use some H3 content of your choice.
H3 Text Settings
Move on to the module’s design tab and change the H3 text settings as follows:
Add Text Module #3 to Column 1
Add Content
Add the last Text Module to column 1 with some description content of your choice.
Text Settings
Change the text settings accordingly:
Include some bottom margin as well.
Add Blurb Module to Column 1
Leave Content Boxes Empty
On to the last module we need in this column, which is a Blurb Module. Leave the content boxes empty.
Default Icon
Select the arrow icon next.
Change the icon on hover.
Use a link for this module as well.
Hover Background Color
Then, add a hover background color.
Default Icon Settings
Navigate to the design tab and change the icon settings as follows:
Hover Icon Settings
Modify the icon font size on hover.
Hover Spacing
Modify the top and right padding on hover.
Include some rounded corners in the border settings as well.
Then, use the transform scale option on hover.
Main Element & Blurb Image CSS
Next, navigate to the advanced tab and use the following line of CSS code for the main element:
Use this line for the Blurb Image css box:
Complete the module settings by repositioning it in the position settings:
Remove Column 2
Once you’ve completed the first column, you can reuse it for the second. To do that, remove the second column first.
Clone Column 1
Then, clone the first.
Change Column 2 Background Color
Of course, you’ll need to make some changes to the duplicate column, starting with the background color.
Add Transform Translate to Column 2
We’re adding a transform translate value on smaller screen sizes as well.
Change Duplicate Content
Make sure you change all duplicate content.
Change Blurb Module Link
Complete the duplicate column by changing the link inside the Blurb Module.
Reuse Row
Once you’ve completed the first row and its columns, you can clone the entire row.
Remove Column 2
Delete the second column inside the row settings.
Change Column Background Color
Then, change the remaining column’s background color.
Add Top Margin to Row
Go back to the general row settings and add some responsive top margin.
Change Duplicate Content
Then, change all duplicate content in the column.
Change Blurb Module Link
Complete the tutorial by changing the link inside the Blurb Module. That’s it!
In this post, we’ve shown you how to get creative with your CTAs. More specifically, we’ve shown you how to add hover-animated corner button arrows. This approach helps you keep a clean look and feel when designing a section with multiple CTAs. It adds an extra level of interaction too. You were able to download the JSON file for free. If you have any questions or suggestions, feel free to leave a comment in the comment section below!
If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.
This content was originally published here.