Animation Addons

Animation Addons

Animations Widgets

Typewriter

Estimated reading: 3 minutes 124 views

Before setting up the Typewriter Widget, make sure that the Animation Addons for Elementor plugin is installed and activated on your site. Once activated, you’ll get access to all free Elementor widgets, including the Typewriter Widget—completely free! You can also explore both free and pro widgets by using the filter options.

Typewriter 1

Introduction

The Typewriter Widget in Animation Addons for Elementor adds engaging text animations with a typewriter effect, ideal for headlines or quotes. Here’s how to configure it for your website.

Key Use Cases for the Typewriter Widget in Elementor:

  • Use the Typewriter widget to create dynamic headlines, engaging text animations, and showcase quotes or testimonials with a unique effect. 
  • Perfect for landing pages and calls to action.

Prerequisite

  • Elementor
  • Animation Addons for Elementor

How to Activate the Typewriter Widget?

  • Go to Animation Addons → Elements in your WordPress dashboard.
  • Find the Typewriter Widget in the list.
  • Toggle it on to enable the widget.

Now, the Typewriter Widget is ready to use!

Typewriter 2

How to Add the Typewriter Widget in Elementor:

  • Open the page where you want to add the Typewriter widget.
  • Launch the Elementor editor.
  • In the Elementor panel, search for “Typewriter Widget.”
  • Drag the widget to your desired section.

How to Configure the Typewriter Widget in Animation Addons?

  • In the Elementor panel, search for the “Typewriter Widget.”
  • Drag and drop the widget into the desired section.
  • Customize the typewriter settings using the available options in the Elementor panel.

Your Typewriter Widget is now ready to use! Here’s the interface where you can configure the settings and customize the text animation across various tabs for a personalized effect.

Typewriter 3

Configuring Typewriter Widget in Animation Addons: A Step-by-Step Guide

The Typewriter widget is available in Elementor and can be placed on the desired section of the page. It offers three main settings tabs: Content, Style and Advanced.

Typewriter 4

In the Content settings of the Typewriter Widget, you will find the “Content” option, where you can input the text that will appear with the typewriter effect.

Content Settings

In the Content section of the Typewriter Widget, you have:

  • Non-Animated Text: Adds static text alongside the animation.
  • Animated Text List: Creates a sequence of animated text items.
Typewriter 5
  • HTML Tag: Adds HTML tags for styling.
  • Alignment: Controls text alignment (left, center, right).

Style Settings

In the Style section of the Typewriter Widget, you have:

  • Text Color: Changes the color of your text. Select any color for text to match your design.
  • Typography: Adjusts font family, size, weight, and style. Customize the appearance of text for better readability or style.
  • Text Stroke: Adds an outline around the text. Defines the thickness and color of the text’s border.
Typewriter 6
  • Text Shadow: Applies a shadow effect behind the text. Adds depth and contrast for a more dynamic look.
  • Line Color: Changes the color of the text’s underline. Customize the underline color to match or highlight text.

Advance Settings 

  • In the advanced settings, you’ll find a variety of advanced features designed to enhance your designs. Experiment with these options and experience the difference they make.
Typewriter 7

Final Outcome

That’s it! Now you know how to configure the Typewriter Widget in Elementor to add engaging text animations to your website. If you need any further assistance, feel free to contact our support team!

Share this Doc

Typewriter

Or copy link

CONTENTS