Adding a Typewriter Text Effect to Showit

A Special Type Code for Showit

One of the best ways to spice up your website is to add movement to your pages. A favorite way of ours is to add some special text effects, which can really set your site apart in a unique way. In this post, we’ll share how to add and edit a typewriter text effect to Showit (shown below on our Ziggy Showit Template which you can view here).

Check out our video tutorial on this or follow along in the written steps below.

Step 1

Click on the Showit page and canvas you’d like to add your typewriter text effect to and add an embed code element.

Step 2

Select “Embed Info” on the top right and then click “Custom Code”.

Step 3

In the pop-up, paste the code exactly as it’s written below:

<div class="si-embed">
<div id="container">
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

<span class="Typewriter__wrapper"></span><span class="Typewriter__cursor">|</span></div>
<style>@font-face {
  font-family: Libre Calson Display Normal;
}</style>

<script>var container = document.getElementById('container');

var typewriter = new Typewriter(container, {
    loop: false,
});

container.style.font = "normal 28px Libre Carlson Display Normal"
container.style.color = "#497380"
container.style.textAlign = "center"
container.style.lineheight = "1.6"

typewriter.typeString('Historic Escapes')
    .pauseFor(1000)
    .deleteAll()
    .typeString('Beachy Abodes')
    .pauseFor(1000)
    .deleteAll()
    .typeString('Mountain Adventures')
    .pauseFor(1000)
    .deleteAll()
    .typeString('Luxury Travel')
    .start();
</script></div>

Step 4

Adjust the typewriter text effect code to match your own design preferences and website copy.

• Your font name (add the source from your media library if you are using a custom font)
• The style of the font (size, name, color, alignment)
• The copy and repeat of the typewriter effect

Step 5

Now you’re ready to align the embed element on your canvas and preview your work. Once you’ve edited both the element and the actual code to match what you’re going for, publish it and admire your masterpiece!

Troubleshooting

• If you have issues or the code doesn’t seem to be working, make sure you check the font name. Any time we’ve had problems with this custom code it’s been because our font name or location hasn’t matched the Showit site.
• If you think you’ve adjusted everything but it just isn’t working, try deleting the code, re-copying it (from this blog), and trying again. Sometimes these custom codes can be finicky but if you try again it should work!

If you found this helpful you can pin this post on Pinterest or bookmark it in your browser to refer back to at any point!