The Typewriter Effect Block types words one after another, with a blinking cursor. Each word is typed, held for a moment, then deleted before the next one starts. You can also fade or slide the words instead of typing them.

Use it for hero headings and taglines where one part of the sentence changes, for example “We build websites | online stores | mobile apps”.

How to Add a Typewriter Effect Block

Follow these steps to add and configure the Typewriter Effect Block in the Gutenberg editor.

Step 1: Add the Typewriter Effect Block

1. Open a page or post in the WordPress Gutenberg editor.
2. Click the + button to open the block inserter.
3. Search for Typewriter Effect under ShapeBlock.
4. Insert the Typewriter Effect Block into your page.
5. Select the block to access its settings in the right-hand sidebar.
6. Type the fixed text before and after the typed words directly on the block in the editor.

Step 2: Configure the Typewriter Effect Block

Select the Typewriter Effect Block and open its settings in the right-hand sidebar. The available tabs are:

• Settings: Set the HTML tag, the typed words, and the animation timing.
• Style: Set the text colors, cursor color, and typography.
• Advanced: Configure the block padding, margin, and background.

Click Replay the animation in the block toolbar to play the animation again in the editor.

Settings Tab

The Settings tab contains the Text and Animation panels.

1. Text

• HTML Tag: Choose the tag used for the block: H1 to H6, P, or DIV. Use a heading tag when the text is a page or section heading.
• Typed Words: Enter the words or phrases to type, one per line. They are typed in this order. The text before and after them is typed on the block itself.

2. Animation

• Style: Choose how the words change.
  • Type and Delete: Each word is typed letter by letter, then deleted.
  • Fade: Each word fades in and out.
  • Slide: Each word slides in and out.
• Typing Speed (per letter) (ms): Set how long each letter takes to type. A lower number types faster.
• Deleting Speed (per letter) (ms): Set how long each letter takes to delete.
• Pause After a Word (ms): Set how long a finished word stays on screen before the next one starts.
• Start Again After the Last Word: Choose Yes to loop through the words, or No to stop on the last word.
• Cursor: Enter the cursor character, up to 3 characters. For example, | or _.

Note: Each Animation setting starts on Default, which uses the value set for the whole site under ShapeBlock > Animation. The current site value is shown in the control. Change a setting here to use a different value for this block only.

Style Tab

The Style tab contains the Text panel.

1. Text

• Colour: Set the color of the fixed text before and after the typed words.
• Typed Words Colour: Set the color of the typed words.
• Cursor Colour: Set the color of the cursor.
• Typography: Customize the font family, size, weight, style, text transform, line height, and letter spacing. Responsive settings are available for desktop, tablet, and mobile devices.

Advanced Tab

The Advanced tab provides additional spacing and background controls for the Typewriter Effect Block. These settings apply to the entire block.

1. Spacing

• Padding: Set the inner spacing around the entire Typewriter Effect Block. Configure the top, right, bottom, and left values separately.
• Margin: Set the outer spacing around the entire Typewriter Effect Block. Configure the top, right, bottom, and left values separately.

Both controls support responsive settings for desktop, tablet, and mobile devices.

2. Background

• Background: Customize the background of the entire Typewriter Effect Block using a background color or gradient.

Note: The background applies to the whole block area.

Live demo: see the Typewriter Effect Block in action on the Typewriter Effect demo page.