Creating Animated Titles Using Divi’s Hover Options

November 6, 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 create animated titles using Divi’s hover options and the Driving School Layout Pack. This is a great approach for putting different parts of your copy in the spotlight and triggering action.

Let’s get to it!

Preview

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

creating-animated-titles-using-divis-hover-options Theme Builder Layout

Upload Driver School Landing Page

To create this tutorial, we’ll be using the Driver School Layout Pack‘s landing page. So go ahead and add a new page, enable the Visual Builder and choose the landing page from your premade layouts.

creating-animated-titles-using-divis-hover-options Theme Builder Layout

Create Animated Title #1

creating-animated-titles-using-divis-hover-options-1 Theme Builder Layout

Change Section Gradient Background

Let’s start building the first example! We’re adding this animated title to the hero section of our page. But before we get there, open the settings of your hero section and change the gradient background overlay colors.

  • Color 1: rgba(0,0,0,0.94)
  • Color 2: rgba(12,12,12,0.63)

creating-animated-titles-using-divis-hover-options-1 Theme Builder Layout

Remove Two Last Rows in Hero Section

Continue by removing the two last rows in the section.

creating-animated-titles-using-divis-hover-options-2 Theme Builder Layout

Change Divider Alignment

We’re keeping the row that is still there. The only thing we need to change is the module alignment of the Divider Module.

  • Module Alignment: Center

creating-animated-titles-using-divis-hover-options-3 Theme Builder Layout

Add New Row

Column Structure

Right below the previous row, go ahead and add a new row using the following column structure:

creating-animated-titles-using-divis-hover-options-4 Theme Builder Layout

Spacing

Remove the default custom padding of the row next.

  • Top Padding: 0px
  • Bottom Padding: 0px

creating-animated-titles-using-divis-hover-options-5 Theme Builder Layout

Add Text Module to Column

Add Content

The only module we’ll need is a Text Module. We’re using two different text types: a heading and a paragraph link. Go ahead and add your copy of choice and make sure the copy appears in two lines by pressing shift + enter in the middle of each sentence.

creating-animated-titles-using-divis-hover-options-6 Theme Builder Layout

Default Background Color

Then, go to the background settings and add a default background color to the Text Module.

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

creating-animated-titles-using-divis-hover-options-7 Theme Builder Layout

Hover Background Color

Change the background color on hover.

  • Background Color: #ffa53b

creating-animated-titles-using-divis-hover-options-8 Theme Builder Layout

Default Text Settings

Next, change the text orientation in the overall text settings.

  • Text Orientation: Center

creating-animated-titles-using-divis-hover-options-9 Theme Builder Layout

Default Link Text Settings

Switch over to the link tab and make some changes to the link copy’s appearance.

  • Link Font Weight: Ultra Bold
  • Link Font Style: Italic, Uppercase, Underline
  • Link Underline Color: rgba(255,255,255,0.3)
  • Link Text Size: 0px
  • Link Line Height: 0em

creating-animated-titles-using-divis-hover-options-10 Theme Builder Layout

Hover Link Settings

Make some changes on hover next.

  • Link Text Size: 40px
  • Link Line Height: 1.8em

creating-animated-titles-using-divis-hover-options-11 Theme Builder Layout

Default Heading Text Settings

Make some changes to the heading text settings as well.

  • Heading Font Weight: Ultra Bold
  • Heading Font Style: Uppercase
  • Heading Text Color: #ffffff
  • Heading Text Size: 70px (Desktop),  40px (Tablet), 30px (Phone)
  • Heading Line Height: 1.4em

creating-animated-titles-using-divis-hover-options-12 Theme Builder Layout

Hover Heading Text Settings

With some small tweaks on hover.

  • Heading Text Color: rgba(255,255,255,0)
  • Heading Text Size: 0px

creating-animated-titles-using-divis-hover-options-13 Theme Builder Layout

Default Spacing

Continue by going to the spacing settings and adding some custom padding values.

  • Top Padding: 40px
  • Bottom Padding: 0px
  • Left Padding: 20px
  • Right Padding: 20px

creating-animated-titles-using-divis-hover-options-14 Theme Builder Layout

Hover Spacing

The custom padding values differ a little on hover.

  • Top Padding: 40px
  • Bottom Padding: 40px
  • Left Padding: 20px
  • Right Padding: 20px

creating-animated-titles-using-divis-hover-options-15 Theme Builder Layout

Border

We’re using a border as well.

  • Border Width: 10px
  • Border Color: #ffa53b

creating-animated-titles-using-divis-hover-options-16 Theme Builder Layout

Transitions

And add a fast transition by changing the transition duration in the advanced tab.

  • Transition Duration: 0ms

creating-animated-titles-using-divis-hover-options-17 Theme Builder Layout

Create Animated Title #2

creating-animated-titles-using-divis-hover-options-2 Theme Builder Layout

Add New Section

Background Color

On to the next example! Add a new section right below the hero section and add a background color.

  • Background Color: #efefef

creating-animated-titles-using-divis-hover-options-18 Theme Builder Layout

Spacing

Then, go to the spacing settings and play around with the different margin and padding values.

  • Bottom Margin: 100px
  • Right Margin: 200px (Desktop),  100px (Tablet), 50px (Phone)
  • Top Padding: 54px
  • Bottom Padding: 54px

creating-animated-titles-using-divis-hover-options-19 Theme Builder Layout

Box Shadow

To match this section to the layout pack, we’re adding a subtle box shadow as well.

  • Box Shadow Horizontal Position: 30px
  • Box Shadow Vertical Position: 30px
  • Box Shadow Spread Strength: -10px
  • Shadow Color: #ffa53b

creating-animated-titles-using-divis-hover-options-20 Theme Builder Layout

Add New Row

Column Structure

The row we’re adding to this section needs the following column structure:

creating-animated-titles-using-divis-hover-options-21 Theme Builder Layout

Add Text Module

Add Content

Add the content of your choice using a heading and paragraph link once again. We’re also making use of a list that’ll help visitors to easily navigate through different parts of the website.

creating-animated-titles-using-divis-hover-options-22 Theme Builder Layout

Default Link Text Settings

Go to the link text settings and make some changes to the link copy’s appearance.

  • Link Font Style: Underline
  • Link Text Color: #000000
  • Link Text Size: 0px (Desktop), 20px (Tablet), 13px (Phone)
  • Link Line Height: 0px (Desktop), 1.8em (Tablet & Phone)

creating-animated-titles-using-divis-hover-options-23 Theme Builder Layout

Hover Link Text Settings

Make some small tweaks on hover.

  • Link Text Size: 30px
  • Link Line Height: 2.8em

creating-animated-titles-using-divis-hover-options-24 Theme Builder Layout

Default Heading Text Settings

The heading you’ve chosen needs to be modified as well.

  • Heading 2 Font Weight: Ultra Bold
  • Heading 2 Font Style: Uppercase
  • Heading 2 Text Size: 30px (Desktop & Tablet), 20px (Phone)
  • Heading 2 Letter Spacing: 1px

creating-animated-titles-using-divis-hover-options-25 Theme Builder Layout

Hover Heading Text Settings

Change the text size on hover.

  • Heading 2 Text Size: 0px

creating-animated-titles-using-divis-hover-options-26 Theme Builder Layout

Default Spacing

Continue by going to the spacing settings and adding some custom margin and padding values.

  • Left Margin: 0px (Desktop, Tablet & Phone)
  • Top Padding: 40px
  • Left Padding: 50px

creating-animated-titles-using-divis-hover-options-27 Theme Builder Layout

Hover Spacing

Change the left margin on hover.

  • Left Margin: 200px

creating-animated-titles-using-divis-hover-options-28 Theme Builder Layout

Default Border

Next, add a left border to the Text Module.

  • Left Border Width: 5px
  • Left Border Color: #ffa53b

creating-animated-titles-using-divis-hover-options-29 Theme Builder Layout

Hover Border

Remove all the border width on hover.

  • Left Border Width: 0px

creating-animated-titles-using-divis-hover-options-30 Theme Builder Layout

Transitions

Last but not least, create a smooth transition by using a slightly higher transition duration.

  • Transition Duration: 500ms

creating-animated-titles-using-divis-hover-options-31 Theme Builder Layout

Preview

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

creating-animated-titles-using-divis-hover-options Theme Builder Layout

Final Thoughts

In this use case post, we’ve shown you how to create animated titles on hover using Divi’s built-in options only. This is a great way to put specific parts of your copy in the spotlight and trigger action from visitors in a creative way. If you have any questions, make sure you leave a comment in the comment section below!

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

inserting-special-characters-into-the-block-editor Theme Builder Layout

Inserting Special Characters Into the Block Editor

For users of the Classic WordPress editor who often needed to insert special characters into their posts, life was once simple. Click the “Ω” button in the editor to open a modal with a list of characters not found on a standard keyboard. The user then only needed to...

review-divi-business-course-by-divi-space Theme Builder Layout

Review: Divi Business Course by Divi Space

Divi Business Course is an 8-week course that teaches how to start and run a Divi web design business and take the business to 6 figures per year. The course is dripped over the 8 weeks and includes live coaching calls, a Facebook group, and lots of documents to help...

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.