Create a Text Replacing Typing Effect in Showit (Typewriter Effect)

A typewriter effect, or a type effect is a very cool effect to have on your website. It gives your page that oomph and enhances the overall design of your page and improves the overall experience of the whole website.

This tutorial will show you how you can easily create a typewriter effect with ShowIT

We will be using the typed.js library from Matt Boldt for this tutorial.

This tutorial does not require you to have any experience with code. All of the code that has been used in this project will be provided below, with clear instructions on where to add your custom text.

Step 1: Add a text box.

Click on the â€œT” icon at the bottom bar of your ShowIt builder and add a text box. We have used a Title text box in our tutorial, but you can use a subheader, header, or paragraph box according to your need(s).

Step 2: Style your text (optional)

You can go to the Text Style tab and customize the font, size, color, and other properties of your text as needed.

Step 3: Open the HTML editor

Now this is where things get interesting.
Press and hold the “Alt” key on your keyboard, and double-click on the text box. This now opens the HTML editor!

Step 4: Copy and paste the code below

Replace the text present in the HTML Editor with the code below:

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js" integrity="sha512-BdHyGtczsUoFcEma+MfXc71KJLv/cd+sUsUaYYf2mXpfG/PtBjNXsPo78+rxWjscxUYN2Qr2+DbeGGiJx81ifg==" crossorigin="anonymous"></script>

<meta name="ahrefs-site-verification" content="f08859acfa5b91a549ea36d11c43394e9f766ca1c93ec34b6c3e9df1fe63c653">

<div class="iam">Hi! My Name is <span class="texttotype"></span></div>

<script>
   var typing=new Typed(".texttotype", {
       strings: ["", "What", "", "Who", "", "Slim Shady"],
       typeSpeed: 70,
       backSpeed: 70,
       loop: true,
   });
</script>

Step 5: Replace existing text with your own!

In the code you just pasted, look for the following lines.
You can replace the highlighted text with your own.

<div class=”iam”>Hi! My Name is <span class=”texttotype”></span></div>

strings: [“”, “What”, “”, “Who”, “”, “Slim Shady”],

pro-tip #1: if you want to add more words, you can simply add them like this:

strings: [“”, “What”, “”, “Who”, “”, “Slim Shady”, “”, “New Word”],

,””, “New Word” is the format – dont forget the commas and the quotes!

pro-tip #2: if you want to add words after the typed in words, look for this line of code and add replace the italicized text with your own:

<div class=”iam”>Hi! My Name is <span class=”texttotype”></span>your text here</div>

And that is it! Congratulations! You have successfully created a typewriter effect on your ShowIt website that also has a word-replacement feature!

If you liked the post, share it with your fellow ShowIt designers and developers. You can leave a comment if you have questions/suggestions.

Follow me on Instagram

You may also like:

Create a Marquee Button in Showit in Three Simple Steps!

It's the little things that stand out. Marquee buttons do not only have a visual but also a functional impact. They look great, and can also fit a longer button text in one line instead of having you increase the size of the button to fit a 2 line CTA or button text...

Create a Button With a Hover Effect in Showit

A hover effect is one of the simplest and most basic styling and customization options for a button. Unfortunately, due to the system that is used in ShowIt builder to create buttons, this effect is not possible – well, at least not fully. If you are familiar with...

0 0 votes
Article Rating
Subscribe
Notify of
guest

5 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Nicole Haddon
2 months ago

Thanks for the tutorial!! Omg! Iv been trying to figure this out for so long ( as a non coder on chatgpt 😵)!

Katie
Katie
2 months ago

Thank you so much for this tutorial!! It’s brilliant!
I was just wondering if you knew if there was some code to add to tell the moving text to start on the next line please? I’ve pressed enter to try and get the ‘strings’ on the next line but it doesn’t work. No worries if not, I know this takes up your time! 😊

Katie
Katie
2 months ago
Reply to  Pratik

That’s perfect! Thank you so much for this! 😊