3 Ways You Can Use Divi’s Hover Options to Creatively Emphasize CTAs

November 21, 2018

Every week, we provide you with new and free Divi layout packs which you can use for your next project. For one of the layout packs, we also share a use case that’ll help you take your website to the next level. This week, as part of our ongoing Divi design initiative, we’re going to show you how to creatively use Divi’s hover options to emphasize CTAs throughout your pages. We’re using Divi’s Laundry Service Layout Pack and we’ll handle three different examples of putting your call to action in the spotlight.

Let’s get to it!

Preview

Before we dive into the tutorial, let’s take a quick look at all three examples we’ll create:

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas Theme Builder Layout

Add New Page Using Laundry Service Homepage Layout

First, start by adding a new page to your website and upload the Laundry Service Homepage. All three examples we’ll create will be based on this layout. Once you get the approach, you can apply these examples to any layout you’re working on.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas Theme Builder Layout

Creating Example #1: Using Another Element’s Hover to Redirect Attention to CTA

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-1 Theme Builder Layout

Clone Text Module

Let’s get started with the first example! We’re transforming an existing Text Module into an incentive on hover. This approach will only look good on desktop, that’s why we’re cloning the initial module to allow it to appear on smaller screen sizes without hover effects.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-1 Theme Builder Layout

Visibility

Text Module #1

Continue by hiding the first module on tablet and phone.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-2 Theme Builder Layout

Text Module #2

And hide the second module on desktop.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-3 Theme Builder Layout

Add Hovers Effect to Desktop Text Module

Add Heading 3 Content

We’re only editing the first Text Module, which will be the one that appears on desktop. Open the module and add some heading 3 content to the content box.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-4 Theme Builder Layout

Hover Text Settings

Then, go to the text settings and ‘hide’ the paragraph text of your module by adding 0px to the text size on hover.

  • Text Size: 0px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-5 Theme Builder Layout

Hover Heading 2 Text Settings

Do the same for the heading 2 text settings on hover.

  • Heading 2 Text Size: 0px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-6 Theme Builder Layout

Default Heading 3 Text Settings

Then, go to the heading 3 text settings and make some changes.

  • Heading 3 Font: Josefin Sans
  • Heading 3 Font Weight: Semi Bold
  • Heading 3 Text Size: 0px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-7 Theme Builder Layout

Hover Heading 3 Text Settings

Modify the text size on hover.

  • Heading 3 Text Size: 40px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-8 Theme Builder Layout

Default Spacing Settings

Next, go to the spacing settings and make sure the following custom padding values apply:

  • Top Padding: 80px
  • Bottom Padding: 50px
  • Left Padding: 40px
  • Right Padding: 40px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-9 Theme Builder Layout

Hover Spacing Settings

Add some custom margin on hover as well.

  • Top Margin: 50px
  • Left Margin: -53.5vw

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-10 Theme Builder Layout

Default Border Settings

We’re also adding a bottom border without a border.

  • Bottom Border Width: 0px
  • Bottom Border Color: #ff947f
  • Bottom Border Style: Dashed

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-11 Theme Builder Layout

Hover Border Settings

Change the border width on hover.

  • Bottom Border Width: 5px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-12 Theme Builder Layout

Default Box Shadow Settings

Then, add a box shadow.

  • Box Shadow Vertical Position: 50px
  • Box Shadow Blur Strength: 54px
  • Box Shadow Spread Strength: -32px
  • Shadow Color: rgba(255,255,255,0)

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-13 Theme Builder Layout

Hover Box Shadow Settings

And change the box shadow color on hover.

  • Shadow Color: rgba(0,0,0,0.2)

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-14 Theme Builder Layout

Transitions

To create a smooth transition, increase the transition duration in the transitions settings.

  • Transition Duration: 750ms

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-15 Theme Builder Layout

Creating Example #2: Transforming Text Module into Button on Hover

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-2 Theme Builder Layout

Add New Text Module

Let’s move on to the next example! We’re transforming a Text Module into a Button Module on hover. To do that, start by adding a Text Module to the following spot on your page:

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-16 Theme Builder Layout

Visibility

Button Module

We’re keeping the Button Module the way it is on smaller screen sizes so go ahead and disable it on desktop only.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-17 Theme Builder Layout

Text Module

Do the same thing for the Text Module you’ve just added but instead, hide it on tablet and phone.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-18 Theme Builder Layout

Add Hover Effects to Desktop Text Module

Add Content

Now, open the Text Module and add some H3 copy and link copy.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-19 Theme Builder Layout

Default Background Color

Continue by adding a completely transparent background color to the module.

  • Background Color: rgba(255,255,255,0)

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-20 Theme Builder Layout

Hover Background Color

And change this background color on hover.

  • Background Color: #ffffff

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-21 Theme Builder Layout

Default Text Settings

Then, go to the text settings and change the text orientation of your module.

  • Text Orientation: Center

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-22 Theme Builder Layout

Default Link Text Settings

Make some changes to the appearance of the link text next.

  • Link Font: Roboto
  • Link Font Weight: Bold
  • Link Font Style: Uppercase
  • Link Text Color: #ff947f
  • Link Text Size: 0px
  • Link Letter Spacing: 2px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-23 Theme Builder Layout

Hover Link Text Settings

And add another value to the link text size on hover.

  • Link Text Size: 13px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-24 Theme Builder Layout

Default Heading 3 Text Settings

We’ll need to change the H3 text settings as well.

  • Heading 3 Font Weight: Semi Bold
  • Heading 3 Font Style: Italic & Underline
  • Heading 3 Underline Color: #ffc882
  • Heading 3 Underline Style: Dotted
  • Heading 3 Text Alignment: Center
  • Heading 3 Text Color: #ffffff
  • Heading 3 Text Size: 37px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-25 Theme Builder Layout

Hover Heading 3 Text Settings

And we’re changing the H3 text size on hover to hide it once you hover the module.

  • Heading 3 Text Size: 0px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-26 Theme Builder Layout

Default Sizing

Next, change the width within the Sizing settings. Make sure that by default, the width remains ‘100%’.

  • Width: 100%

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-27 Theme Builder Layout

Hover Sizing

To create the button effect, we’ll reduce the width on hover.

  • Width: 23%
  • Module Alignment: Center

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-28 Theme Builder Layout

Spacing

We’ll also need some extra padding to create a clean-looking button.

  • Top Padding: 5px
  • Bottom Padding: 15px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-29 Theme Builder Layout

Hover Border

And we’ll add ’30px’ of rounded corners to each one of the corners on hover.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-30 Theme Builder Layout

Transitions

Lastly, we’ll make sure we have a smooth transition by using the following transition duration:

  • Transition Duration: 700ms

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-31 Theme Builder Layout

Creating Example #3: Enlarging Email Optin on Hover

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-3 Theme Builder Layout

Clone Email Optin Module

On to the next and last example! When someone hovers the Email Optin Module on desktop, the module will increase in size and make it easier for visitors to join your newsletter. Again, we’re only making this hover effect appear on desktop. That’s why we’re starting off by cloning the module.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-32 Theme Builder Layout

Visibility

Email Optin Module #1

Open the visibility settings of the first Email Optin Module and hide it on desktop.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-33 Theme Builder Layout

Email Optin Module #2

Do the same for the second module, but instead, hide it on smaller screen sizes. This is the module we’ll be working with.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-34 Theme Builder Layout

Add Hover Effects to Desktop Email Optin Module

Add Content

Add some extra content to the content box of the second Email Optin Module.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-35 Theme Builder Layout

Hover Title Text Settings

Increase the text size of the title text on hover.

  • Title Text Size: 50px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-36 Theme Builder Layout

Default Body Text Settings

Next, change the body text size.

  • Body Text Size: 0px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-37 Theme Builder Layout

Hover Body Text Settings

And add a different text size on hover.

  • Body Text Size: 14px

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-38 Theme Builder Layout

Hover Spacing Settings

Last but not least, we’re going to increase the size of the Email Optin Module by adding different custom margin and padding values on hover.

  • Top Margin: -25vw
  • Left Margin: -50vw
  • Top Padding: 17vw
  • Bottom Padding: 17vw
  • Left Padding: 12%
  • Right Padding: 12%

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas-39 Theme Builder Layout

Preview

Now that we’ve gone through all the steps, let’s take a final look at the end result.

3-ways-you-can-use-divis-hover-options-to-creatively-emphasize-ctas Theme Builder Layout

Final Thoughts

In this use case post, we’ve shown you how to creatively put CTAs in the spotlight using Divi’s hover options and the Laundry Service Layout Pack. We’ve handled three different examples that will hopefully stimulate your imagination and help you get your website to the next level. If you have any questions or suggestions, make sure you leave a comment in the comment section below!

Featured Image by Snipergraphics / shutterstock.com

By Donjete Vuniqi

Donjetë is a freelance content writer who is fascinated by content marketing, design, and technology. She helps clients bring the right content to the right people. If you’re looking for someone to help you tell your company’s story, she’ll know how to handle it.

Share this article:
 




eHost-square-ad Theme Builder Layout

We’re listening.

Have something to say about this article? Share it with us on Facebook, Twitter or LinkedIn:

SHARE IT HERE:

Related Posts

new-google-search-console-report-checks-site-speed Theme Builder Layout

New Google Search Console report checks site speed

Edwin Toonen Edwin is an experienced writer, editor & content manager. Before joining Yoast, he spent years honing his skill at The Netherlands’ leading web design magazine. Google is rapidly expanding the capabilities of Search Console — its must-have tool for...

black-friday-banner-gone-wrong-advertising-in-free-plugins Theme Builder Layout

Black Friday Banner Gone Wrong: Advertising in Free Plugins

Screenshot of the Yoast Black Friday AdOn November 28, millions of people awoke to a Black Friday ad on nearly every page of their WordPress admin, courtesy of the Yoast SEO plugin. That day also coincided with the U.S. Thanksgiving holiday, so it left freelancers and...

Get ALL Your SEO, WordPress & Divi News

Join Our Daily Roundup

SEO News and More

SEO News and More

Subscribe ToThe Weekly SEO Trade News Updates

Get the latest SEO, SEM and SMM marketing intel, tips and tricks from one of the best SEO Gurus online. 

Every Tuesday morning we send out an aggregated email listing all new posts on SEO Trade News.

Excellent! Now check your email to confirm your subscription.