Typing Text For Gutenberg: Create An Interactive Website For Website Visitors [2023]

Posted on May 16, 2022January 31, 2023 Categories Gutenberg, WordPress

Imagine if you can add some fancy and interactive texts to your website content? It would instantly make your blogs stand apart from the rest of the competitors in the market that displays nothing but regular, boring fonts and typography. This is where Essential Blocks comes in, with a cool block named Typing Text for Gutenberg that brings you awesome typewriter effects, adds some flair to your text, and makes your content more engaging.

Why Do You Need To Use Typing Text For Gutenberg?

By using a Typing Text block, you can easily amaze your visitors by adding fancy and interactive typing effects and thus add a playful vibe to your site content. This effect can fulfill many purposes such as making your content more engaging, adding call-to-action features in all the necessary positions, and so much more. 

Introducing Typing Text Block From Essential Blocks For Gutenberg

Now you know why you need to use the typing text effect for your site. So let’s introduce you to one of the most popular blocks libraries for adding typing text effects in Gutenberg: Essential Blocks.

Essential Blocks is a free WordPress plugin specially designed for the Gutenberg editor. It powers up this editor with its 30+ amazing ready blocks for different features. The featured blocks allow a broad range of customization options to its users. 

One of these stunning blocks is Typing Text which helps to create an interactive typing text section on your site. The Typing Text block is very handy and easy to use for any WordPress user who prefers to create content on the Gutenberg Block editor.

Easy 3 Steps Guide To Create Typing Text Effects In Gutenberg

It’s very simple to make a cool typing text section with only 3 easy steps. Before using Essential Blocks (EB) Typing Text on your website, make sure that you are using Gutenberg editor on your WordPress site. 

Now, let’s have a look below to know how quickly and easily you can create content with EB Typing Text block on your WordPress website using Gutenberg editor. Or you can check this documentation. 

Step 1: Install And Activate Essential Blocks

Login into your WordPress admin panel. From the dashboard, go to Plugin and then click on ‘Add New’. In the search bar, search for Essential Blocks for Gutenberg. Install the plugin and then activate it, as shown below. 

Step 2: Insert The Typing Text Block In Gutenberg

Now, from the dashboard, open a page or post where you want to use the Typing Text block. After opening it, click on the ‘+’ sign of the section where you want to place the block and from the search bar, find the Typing Text block, as shown below.

Step 3: Configure The Content Settings

To configure the content settings, click on the block. From the Block setting panel, you can customize general settings and also style your content. From the General tab, you can update multiple aspects of the block making your website much more interesting than ever before – you will be able to configure the Prefix Text, Typed Text, Suffix Text, etc. You can also fix the loop, speed, delay, etc of your typing text. 

You can fully customize the style of your Typing Text from the Style tab. You can resize the Typing Text Box, can add Border, Shadow, etc. Also can color your texts and can add a background, and give a personalized look that matches your business’ brand image. 

Once all your customization has been done, you can check the preview of your content. If you are satisfied, then click on the ‘PUBLISH’ button to make your content public. After publishing, you can see your content like below. 

Tips: Display Your Contents Using Different Typing Text Styles

Adding the Typing Text block with typewriter effects to chunks of your text can help engage visitors and keep them interested in reading further. You can style this section with the huge customization option of Essential Blocks for Gutenberg. Let’s have a look below.

Styling By Modifying Typing Text Box

In the Style setting panel, you will get an option to edit the Typing Text Box, and as we have already mentioned, it brings you full customization powers. By modifying Margin and Padding, you can fix the position of the Typing Text. You can add Border and modify the Border Style, Color, Width, Radius, etc.

Styling By Modifying Test Color And Typography

You can change the text style types from the Style settings panel. If you add any Prefix or Suffix Text, then you will get three types of Style setting options available on the panel.

You can modify all these three parts separately with the Typing Text block. For each part, you will get two options: Color and Typography. From the Color section, you can change the text color according to your choice. 

In the Typography section, you will get many options such as Font Family, Font Weight, Font Style, Text Transform, Text Decoration, Letter Spacing, Line Height, etc. You can change these options, and create amazing texts. Using these options, you can create various types of styles for your content. 

Use Typing Text And Break The Monotonous Look Of Your Site

Typing Text is a great option to showcase your Focus Words amazingly in a small place that attracts visitors in a moment. To set up the position and the content of Typing Text cleverly can fulfill your purpose very well. 

If you enjoyed this post, subscribe to our blog and join our Facebook community to connect with web creators. Leave your comment below and stay connected.