How to Create Typewriter Effect in Divi?

Nazmul

Updated: Jun 15, 2022

0

Table of Contents

The typewriter effect can boost user experience by replacing typical content with fascinating animated text. It gradually appears before your visitors and engages them on your website. However, if you are a Divi user, not having an in-built typewriter functionality is a crucial drawback.

Then we looked into the third parties. And, thanks to DiviFlash for offering such assistance. In this “How to Create Typewriter Effect in Divi” tutorial guide, we will be exploring a section design made with the DiviFlash Typewriter text module

This design is available for download to make your web design process fast and smooth.

Here is a sneak peek of our design-

Pre-requisition

  1. The latest version of Divi Theme is installed.
  2. The latest version of the DiviFlash Plugin has been Installed. Check our guide on how to install the DiviFlash plugin

By default, the Typewriter Text module is turned OFF. Click here to know about how you can turn this ON.

Now we are all set. Let’s recreate this design from scratch and explore the all-new features this module offers.

To get started, create a new page and choose to build from scratch. Or insert a section on your existing page. We are using a regular section for this design.

Step 1: Section Design

For this design, we need a background image and some spacing in the section. You can use your own image and adjust the spacing. Here is the setting we used-

In the content tab,

Go to the background option, select the background image, and keep all the settings default. 

In the Design Tab,

Jump on to the spacing options and set padding as:

  • Padding: Top 200px, Bottom 200px

That’s all for the section design; let’s move on to the row settings.

Step 2: Row Design

For this particular design, we need a single-column structure. So let’s click on the plus icon to insert a row with a single column. 

No more customization is required for the row. So let’s move on to the next step.

Step 3: Modules Designs

In this particular design, we used 2 different divi modules with the Typewriter Text module inside the row. So at the top, we will be using a text module, then our main focusing part “Typewriter Text module” and then again a text module and a button.

Click the gray plus icon to insert a module from the module list. Then, you can either search or find the required module by scrolling. 

Text Module:

As per our design, we need a text module on top. Give the content as needed, and feel free to adjust the settings. Here is what we are using –

In the Content Tab,

Place your text on the body area and follow along with background settings.

Under Background option,

Background-color: #d7b39a

In the Design Tab,

Under Text option,

  • Text Font: Poppins
  • Text Font Weight: Semi Bold
  • Text Color: #ffffff
  • Text size: Desktop 116px, Tablet 80px, Mobile 60px
  • Text Letter Spacing: 0.93px
  • Text Line Height: Desktop 116px, Tablet 80px, Mobile 60px

Under Sizing option,

  • Width: Desktop 136px, Tablet 96px, Mobile 76px

Under Spacing option,

  • Margin: Bottom 20px
  • Padding: Left 6px, Right 6px

Typewriter Text Module

Now it’s time to add Typing Text Effect. Let’s hover over to the text module we just created and click the gray plus icon to add another module underneath it. This time we will search for the Typewriter Text module and insert it.

In the Content Tab,

Under the content option, 

We have 3 different content areas, and the typewriter text area is the one that will animate. By clicking on the copy icon, you can add as many as type text you want. Each new line of text will come one after another on a live site.

Here is the content we are using for this demo-

Prefix: Modish

Typewriter Text 1: Deluxe Kitchen

Typewriter Text 2: Deluxe Bedroom

Typewriter Text 3: Deluxe Dinningroom

Under settings,

  • Typing Speed (ms): 300
  • Cursor Character: _ (Underscore sign)
  • Cursor Font Size: 30px
  • Cursor distance left: 3px
  • Loop: Yes

That’s all we need for this design in the content tab, but we have tons of other features here, so feel free to explore more. We are moving on to the design tab.

In the Design Tab,

Under Prefix Options,

  • Display Property: Block
  • Prefix Font: Poppins
  • Prefix Font Weight: Ultra Light
  • Prefix Text Color: #ffffff
  • Prefix Text Size: Desktop 62px, Tablet 48px, Mobile 28px
  • Letter Spacing: Desktop 5.89px, Mobile 0px
  • Line Height: Desktop 72px, Tablet 56px, Mobile 42px

Under Typed Text Options,

  • Display Property: Block
  • Typed Font: Poppins
  • Typed Font Weight: Semi-blod
  • Typed Font Weight: TT (Uppercase)
  • Typed Text Color: #ffffff
  • Typed Text Size: Desktop 62px, Tablet 48px, Mobile 28px
  • Typed Letter Spacing: Desktop 5.89px, Mobile 0px
  • Typed Line Height: Desktop 72px, Tablet 56px, Mobile 42px

Under Spacing Options,

  • Margin Bottom: Desktop 10px, Tablet and Mobile 5px.

That’s all for the Typewriter Text module. Now you can save and look at how animated typing works. After that, we are moving on next part of the design.

Text Module:

As per our design, we need another text module underneath type text. We are using some dummy content you can use according to your need. Here is the setting we are using for this module –

In the Design Tab,

Under Text Options,

  • Text Font: Poppins
  • Text Font Weight: Light
  • Text Color: #ffffff
  • Text size: Desktop 18px, Tablet 16px, Mobile 14px
  • Text Line Height: Desktop 30px, Tablet 28px, Mobile 27px

Under Sizing Options,

  • Width: Desktop 540px, Tablet and Mobile 100%

That’s it! Now let’s insert a button module.

Button Module

As per our design, we have an action button here. You can link this to your targeted page. Here are the button settings for you-

In the Content Tab,

Under Text Options,

Button: Read more (Change it according to your need)

In the Design Tab,

Under Button Options,

  • Use Custom Styles for Button: Yes
  • Button Text Size: Desktop 18px, Tablet 16px, Mobile 14px
  • Button Text Color: #23252d
  • Background Color: #d7b39a, On hover: rgba(215,179,154,0.75)
  • Button Border Color: #d7b39a, On hover: rgba(215,179,154,0.75)
  • Button Font: Poppins
  • Button Font Weight: Semi Bold
  • Show Button Icon: No

Under Spacing Options,

Padding

  • Desktop & Tablet: Top & Bottom 8px, Left & Right 28px,
  • Mobile: Top & Bottom 8px, Left & Right 20px.

We are all done, and our design is ready. Click Save on the bottom right, then clicks Exit Visual builder to preview. 

Why Choose DiviFlash to Create An Animated Typewriter Effect?

After successfully creating this wonderful design, we would like to inspire you to experiment with all the useful features of the DiviFlash Typewriter Text module. This will help you to add a dynamic typing effect in the Divi theme as you can explore many design possibilities. Let’s see and find out why DiviFlash would be the best option for adding an amazing typewriter effect.

  • Text available with three separate sections (Prefix, Typewriter Text, Suffix)
  • Can add countless typed texts. 
  • Facilitates stylish Cursor with versatile icons and texts.
  • Options to fully customize the Cursor with size, color, and distance. 
  • Has “Loop Effect”, “Masking Effect” and “Typing speed controlling” functionalities. 
  • Provides pleasing background, accurate alignment, color, font, shadow effect, and so on.

Ending Thoughts

So for now we hope you already get the answer to how to add an animated typewriter effect in Divi. And, we want to hear from you how this tutorial helps you to give an appealing appearance in your WordPress site with the typewriter effect. Let me know by leaving a quick comment below.

Nazmul

Nazmul is digital marketing & SEO strategist at DiviFlash. He has been involved in data-driven digital marketing and SEO for over 8 years, specializing in growth marketing, content marketing, marketing strategy, link building and outreach. Before working for DiviFlash, he rans SEO business providing consultancy services.

0 Comments

Submit a Comment

Your email address will not be published.