How to create a superhero area with animated text

4 Min Read
superhero area animated text Divi

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).

superhero area animated text Divi

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.

Read more: Presentation of the new actions added on the Divi theme

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

Share this Article
Posted by Rebecca
Rebecca is an Independent content writer for breldigital, She writes content on any given topic. She loves to write a case study article or reviews on a brand, Be it any topic, she nails it
Leave a comment

Leave a Reply