Having a title that stands out means ensuring that you have a chance to capture the attention of your visiteurs. Titles usually don't go unnoticed due to their size and central position, but if you want to take it a step further and make the title literally pop, you've come to the right place.

In this tutorial, we will combine the animation settings of Divi to create a headline that stands out and grabs the attention of your visiteurs.

Final result

Example final result divi

Part One: Design

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

Divi section adjustment

Spacing

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

  • Bottom padding: 10vw

Internal padding

Add row 1

Column structure

Continue adding a new row using the following column structure:

Add a row to a divi column

Background color

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

  •  Background color: #DDD

Divi text background

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 a custom gutter width: Yes
  • Gutter width: 1

Divi text background 1

Spacing

Also, remove the default upper and lower internal padding for the line.

  • Padding at the top: 0px
  • Upholstery Bottom: 0px

Configuratio of internal padding

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 box contents using the paragraph text style.

Your content comes here

Background color

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

  • Background color: #ccc

Color divi text module

Text settings

Also change the text settings on the Design tab.

  • Font text: Didact Gothic
  • Font weight of the text: bold
  • Text color: #000000
  • Text size: 10vw
  • Height of the line of text: 0.9em
  • Text Orientation: Center

Modify the text style module

Spacing

Then create any shape you like using custom padding on the top and bottom.

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

Change title spacing

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
  • Repeat Animation: Once
  • Animation Duration: 0ms
  • Animation delay: 1000ms

Configure the animation divi module text

Clone the x4 text module

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 additional 4 modules.

Update the module

Background color

With the 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 a 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.

  • Upper margin: -31.98vw

Customize the divi text module margin

Transformation line

Transform Translate

Continue by transforming the entire line, starting with the transformation parameters.

  • Bottom: -35vw

Divi translate transformation

Transform Rotation

Also change the rotation values ​​of the transformation.

  • Left: 320deg

Transformation rotation divi text modules

Add the 2 line

Column structure

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

Configure the divi layout

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 a custom gutter width: Yes
  • Gutter width: 1

Modify divi module

Spacing

Removes the default top fill from the next line.

  • Upper padding: 0px

Add a text description module to the 2 column

Add H1 content

It's time to add modules. The first module will be a text module. You can add the contents that you wish.

Add a special divi sectionH1 text settings

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

  • Font of the title: Didact Gothic
  • Title Weight: Bold
  • Font Size: 1.8vw (Computer), 3.8vw (Tablet), 4vw (Phone)

Modify stretching divi text module settingSpacing

Add custom margins in the spacing section.

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

Text settings margin spacing diviAdd a separator module to the 2 column

Visibility

The next module is the separator module. Make sure the “Show Divider” option is enabled.

  • Show Separator: Yes

Divider divi configurationColour

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

  • Color: #000000

Color of the separatorDimentionnement

Change the spacing options as well.

  • Spacing Weight: 8px
  • Width: 7%

Separator module sizing settingsSpacing

Always with sizing options.

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

Configure divi spacing

Add a text module to the 2 column

Add content

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

Divi text moduleText setting

Then you need to change the text settings in the "Design" tab.

  • Text Size: 0.8vw (Computer), 1.3vw (Tablet), 1.6vw (Phone)
  • Height of the line: 2.2em

Text size divi text moduleSpacing

Add some margins in the spacing section as well.

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

Divi spacingAdd a button module to the 2 column

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)
  • Width of the button border: 0px
  • Button font: Poppins
  • Text weight: Bold
  • Font Style: Uppercase

Divi module button settingsSpacing

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

  • Left External Margin: 30vw
  • Inner high margin: 1vw
  • Inside low margin: 1vw
  • Left inner margin: 3vw
  • right inner margin: 3vw

Button module configurationFinally

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