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
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
Spacing
Then, go to the section spacing settings and add custom fill margins.
- Bottom padding: 10vw
Add row 1
Column structure
Continue 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 a custom gutter width: Yes
- Gutter width: 1
Spacing
Also, remove the default upper and lower internal padding for the line.
- Padding at the top: 0px
- Upholstery Bottom: 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 box contents 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.
- 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
Spacing
Then create any shape you like using custom padding on 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
- Repeat Animation: Once
- Animation Duration: 0ms
- Animation delay: 1000ms
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.
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
Transformation line
Transform Translate
Continue by transforming the entire line, starting with the transformation parameters.
- Bottom: -35vw
Transform Rotation
Also change the rotation values of the transformation.
- Left: 320deg
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:
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
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.
H1 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)
Spacing
Add custom margins in the spacing section.
- Upper margin: -4vw
- Bottom margin: 2vw
- Left margin: 30vw
- Right margin: 30vw (Computer), 15vw (Tablets & Phone)
Add 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
Colour
Then go to the "Design" tab and change the color of the separator.
- Color: #000000
Dimentionnement
Change the spacing options as well.
- Spacing Weight: 8px
- Width: 7%
Spacing
Always with sizing options.
- Low margin: 1vw
- Left margin: 30vw
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.
Text 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
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 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
Spacing
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
Finally
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.
Hello. Great your tutorial, thank you. I did, but I have a little problem. The animation only takes place once and then it does not repeat.