Creating Animated Titles Using Divi’s Hover Options

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 […]

The post Creating Animated Titles Using Divi’s Hover Options appeared first on Elegant Themes Blog.

Spread the love

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.

animated titles

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.

animated titles

Create Animated Title #1

animated titles

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)

animated titles

Remove Two Last Rows in Hero Section

Continue by removing the two last rows in the section.

animated titles

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

animated titles

Add New Row

Column Structure

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

animated titles

Spacing

Remove the default custom padding of the row next.

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

animated titles

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.

animated titles

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)

animated titles

Hover Background Color

Change the background color on hover.

  • Background Color: #ffa53b

animated titles

Default Text Settings

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

  • Text Orientation: Center

animated titles

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

animated titles

Hover Link Settings

Make some changes on hover next.

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

animated titles

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

animated titles

Hover Heading Text Settings

With some small tweaks on hover.

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

animated titles

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

animated titles

Hover Spacing

The custom padding values differ a little on hover.

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

animated titles

Border

We’re using a border as well.

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

animated titles

Transitions

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

  • Transition Duration: 0ms

animated titles

Create Animated Title #2

animated titles

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

animated titles

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

animated titles

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

animated titles

Add New Row

Column Structure

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

animated titles

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.

animated titles

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)

animated titles

Hover Link Text Settings

Make some small tweaks on hover.

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

animated titles

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

animated titles

Hover Heading Text Settings

Change the text size on hover.

  • Heading 2 Text Size: 0px

animated titles

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

animated titles

Hover Spacing

Change the left margin on hover.

  • Left Margin: 200px

animated titles

Default Border

Next, add a left border to the Text Module.

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

animated titles

Hover Border

Remove all the border width on hover.

  • Left Border Width: 0px

animated titles

Transitions

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

  • Transition Duration: 500ms

animated titles

Preview

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

animated titles

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.

Facebook Comments

More Stuff

WordPress Manager | A Better WordPress Experience ... Over the past year, we have been working to better develop both the infrastructure and the experience of using cPanel with WordPress. This time our go...
WordPress Pingbacks and Trackbacks Explained, Plus... If you’re a perceptive user, you may have noticed a setting in your dashboard relating to WordPress pingbacks and trackbacks. However, there’s a good ...
5 Creative Divi Blurb Module Designs In this post, we’re going to explore one of Divi’s most popular features, the Blurb Module. Although seemingly simple out of the gate, it has many cus...
How to Design a Responsive Five Column “Showcase” ... Designing a five column layout with enough room for your content can be challenging. Not to mention the greater challenge of making sure it scales nic...
Spread the love

Posted by News Monkey