In this tutorial, we are going to show you how to add on a superhero animated text Divi “superhero” section (the expression used to describe a large area of a web page designed to attract attention and highlight certain elements).
Add predefined layout
To add the layout to your page, open the settings menu at the bottom of the Divi builder and click on the plus symbol. In the Upload from Library pop-up window, select the Job Recruiter Layout Pack. Then click to use the home page layout.
Remove additional content with the layout
After the presentation has loaded onto the page, deploy wireframe view and remove all content from the presentation except the full-width header and the section just below it.
Creating the superhero animated text Divi
As you can see, the word “hired” is already used as a large text design element in a text module in the second section. We are going to turn this text module into a responsive text speaker design element. The key to making the text rectangle responsive is to make sure that the line and text module span the entire width of the browser window. We can do this using 100% width. Then we can use the length unit vw for the text size. This will make the text well suited to the width of the browser. After that, we’ll apply the same principles we used previously to illustrate our simple scrolling text example.
Here is how to do it.
Update row settings
As mentioned earlier, the row must have a value of 100% for the design of this responsive text selection to work. This allows our text module to use units of length vw relative to the width of the browser. Since our predefined layout already has a line with 100% width, we don’t have to do anything.
However, we need to adjust the rest of the settings as follows.
- Margin: -24vw at the bottom
- Transform translate Y-axis: -24vw
- Horizontal overflow: hidden
- Vertical overflow: hidden
The negative bottom margin is to remove the negative space that is left every time we move the row using the transform translate command. And we need to hide the row overflow for our selection text effect.
Update Text-Module Text Design
Now all you have to do is update the text module to convert it to a large text design element.
Open the text module and update the following:
- Text text color: rgba (255,255,255,0.16)
- Text Text Size: 36vw
- Margin: -100% on the left, 100% on the right
The text size uses a unit of length vw, so the text fits the width of the browser well.
Add animation to the text module
- Animation Style: Slide
- Animation direction: left
- Animation duration: 10000ms
- Animation intensity: 100%
- Animation of the speed curve: linear
- Animation Repeat: Loop
Final thoughts superhero animated text Divi
Text boxes can be a handy tool for web design. They are not limited to functioning only as teleprinters. They can also add an interesting element of animation to your web design. And the best part is that Divi makes it easy to create and design all kinds of beautiful things. Hope this tutorial helps you create simple selection texts whenever you need them.
For website maintenance service contact us