animated banners divi

Animated banners Divi: Having a title that stands out is to ensures that you have a chance to capture the attention of your visitors. Headlines usually don’t go unnoticed due to their size and central position, but if you want to take it one step further and make the headline literally appear, you’ve come to the right place.

In this tutorial, we will combine the animated banners Divi to create a title that stands out and grabs the attention of your visitors.

animated banners divi

Part One: Design animated banners Divi

Section configuration

Background color

Let’s start designing! Create a new page and add a regular section to it. Open the section settings and change the background color.

  • Background color: #EEE

Spacing

Then go to the section spacing settings and add custom padding margins.

  • Bottom padding: 10vw

Add row 1

Column structure

Continue by adding a new row using the following column structure:

Background color

Without adding any modules yet, open the row settings and change the background color of the row.

  • Background color: #DDD

Sizing

Then go to the sizing settings and let the row fill the entire width of the screen.

  • Make this line full width: Yes
  • Use custom gutter width: Yes
  • Gutter width: 1

Spacing

Also, remove the default top and bottom inner padding from the row.

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

Add a text module

It’s time to start adding modules! The first module we need is a text module. Enter the first part of your title in the content area using the paragraph text style.

Background color

Then go to the module’s background settings and add a background color.

  • Background color: #ccc

Text settings

Also, change the text settings on the Design tab.

  • Text font: Didact Gothic
  • Text font-weight: bold
  • Text Color: # 000000
  • Text size: 10vw
  • Text Line Height: 0.9em
  • Text orientation: Center

Spacing

Then create your desired shape using custom padding at the top and bottom.

  • Padding at the top: 10vw
  • Bottom padding: 3vw

Animation

Last but not least, we are going to add some animation. It is important to make sure that the animation duration and the starting opacity are zero. This will allow the text module to display with a flash effect.

  • Animation Style: Fade
  • Animation Repeat: Once
  • Animation Duration: 0ms
  • Animation delay: 1000ms

Clone text module x4

Once you are done editing the first text module, you can go ahead and clone it as many times as you want, depending on the length of your title. For each part of the title that you want to display with a flash effect, you will need a separate text module. For this example, we will need 4 additional modules.

Background color

With background color.

  • Copy 1 = Background color: # 5900ff, text color: #FFF
  • Copy 2 = leave as is, modify the animation duration (Animation Delay): 1500ms
  • Copy 3 = Background color: # ffb200, text color: #FFF, modify animation-duration: 2000ms
  • Copy 4 = Background color: # 000, text color #FFF, modify animation-duration: 2500ms

Add negative margin to each text module except the first

Once you are done customizing all of the text modules, you can go ahead and create an overlap. To create this overlap, we’ll add a negative top margin to each of the duplicate text modules. In other words, we make sure that all modules that follow the first module appear above that first text module.

  • Top margin: -31.98vw

Transformation line

Transform Translate

Continue by transforming the entire row, starting with the transform parameters.

  • Bottom: -35vw

Transform Rotation

Also change the transformation rotation values.

  • Left: 320deg

Add row 2

Column structure

In the second row! Now that the title effect is in place, we can start adding the remaining mods. Add a new row using the following column structure:

Sizing

Without adding any modules yet, open the row settings and let the row occupy the entire width of the screen in the sizing settings:

  • Make this line full width: Yes
  • Use custom gutter width: Yes
  • Gutter width: 1

Spacing

Removes the default top padding from the next line.

  • Top padding: 0px

Add a text description module to column 2

Add H1 content

It’s time to add modules. The first module will be a text module. You can add whatever content you want.

H1 text settings

Then go to the design tab and change the H1 settings.

  • Title font: Didact Gothic
  • Title Weight: Bold
  • Font size: 1.8vw (Computer), 3.8vw (Tablet), 4vw (Phone)

Spacing

Add custom margins in the spacing section.

  • Top margin: -4vw
  • Bottom margin: 2vw
  • Left margin: 30vw
  • Right margin: 30vw (Computer), 15vw (Tablets & Phone)

Add a separator module to column 2

Visibility

The next module is the separator module. Make sure the “show divider” option is enabled.

  • Show Separator: Yes

Color

Then go to the “Design” tab and change the color of the separator.

  • Color: # 000000

Sizing

Change the spacing options as well.

  • Spacing Weight: 8px
  • Width: 7%

Spacing

Still with sizing options.

  • Low margin: 1vw
  • Left margin: 30vw

Read more: How to Increase Your Website Traffic For Making More Sales

Add a text module to column 2

Add content

The next module will be another text module. You must provide the content of your choice.

Text setting

Next, you need to change the text settings in the “Design” tab.

  • Text size: 0.8vw (Computer), 1.3vw (Tablet), 1.6vw (Phone)
  • Line height: 2.2em

Spacing

Add some margins in the spacing section as well.

  • Low margin: 3vw
  • Left Margin: 30vw
  • Right Margin: 30vw (Computer), 15vw (Tablets & Phones)

Add a button module to column 2

Button module settings

For the last module, which will be a button module. You will add the content of your choice and change the settings as follows:

  • Use Custom Style: Yes
  • Font size: 1vw (Computer), 1.5vw (Tablet), 2vw (Phone)
  • Button border-width: 0px
  • Button Font: Poppins
  • Text Weight: Bold
  • Font Style: Uppercase

Spacing

Go to the spacing settings and add a custom outside margin, as well as an inside margin and that’s it.

  • Left Outer Margin: 30vw
  • High inner margin: 1vw
  • Low inner margin: 1vw
  • Left inner margin: 3vw
  • right inner margin: 3vw

To finish animated banners on Divi

In this tutorial, we saw how to design a title with animated text, using only Divi’s internal options. This is a great technique that will allow you to grab the attention of your visitors in a very original way.

 

For website maintenance service contact us.

Leave a comment

echo "";