How To Get Scrolling Text On Your Squarespace Or Showit Website - Rebekah Read Creative

How To Get Scrolling Text On Your Squarespace Or Showit Website

*2022 update* The Showit code isn’t working – I am unsure why. I’ve played around with it, but am not a coding expert and can’t seem to get it right. SORRY!

What better way to celebrate my 150th blog post then with some of my all time FAVORITE codes! These will work on Squarespace or Showit. Enjoy friends!

Code used on Squarespace website page:


<div class="typeit"> ACCOUNTING AND BOOKKEEPING FOR SMALL BUSINESSES</div>

WOHOOO! Now go to Custom CSS and enter this snippet of code:

.typeit {
  overflow: hidden; 
  font-size:25px; /* this can be any font size you want */

  border-right: 2px solid #e37263; /* change this color in the keyframe too */

  white-space: nowrap; 
  margin: 0 auto; 
  animation: 
    typeit 3.5s steps(40, end),
    right-border .5s step-end infinite;
}

@keyframes typeit {  
from { width: 0 }
to { width: 100% }
}

@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #e37263; /* change this in the CSS above too */ }
}
@media only screen and (max-width: 640px){ .typeit { font-size:13px!important; }}

Code used on Showit website page:


<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: Tenez Light;
  src: url(https://static.showit.co/file/iauDA5AXSZa1thgAhLruPw/99642/tenez_light-webfont.woff);
}</style>

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

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

container.style.font = "normal 30px Tenez Light"
container.style.color = "#3e3d3b"
container.style.textAlign = "center"
container.style.lineheight = "1.6"

typewriter.typeString('Website Designer')
    .pauseFor(1000)
    .deleteAll()
    .typeString('Brand Strategist')
    .pauseFor(1000)
    .deleteAll()
    .typeString('Squarespace Educator')
    .pauseFor(1000)
    .deleteAll()
    .typeString('New Entrepreneur Helper')
    .start();
</script></div>

A FEW THINGS I WANT TO ADD…

Anywhere you see “Tenez Light” you will replace with your font name and make sure (as I showed in the video) that you replace the woff file URL with YOUR FONT URL. So you will be replacing Tenez Light in TWO different spots in that long code as well as the URL.

YOU CAN ACHIEVE THIS ON SQUARESPACE TOO!

Just change out the Source URL from the Showit URL to your fonts URL. You can get that by going to Design – Custom CSS – Manage Custom Files – Upload your font – Go to the bottom of your Custom CSS and click enter to get a new space – click manage custom files again – click on the font (this will get the URL) – copy that URL. Then you go back to your code block and paste in that URL replacing the WOFF file. You don’t need to change the “Tenez Light” in the code.

Want another scrolling text variation for your Squarespace website?


Watch Inside The Square (aka Becca’s) tutorial for another scrolly text variation (versus the typewriter version which mine had)!

If you found this post helpful, pin the blog and share the love 💕!

  1. Ashley Brown says:

    hmmm … I tried the showit code – it works perfectly in the editor but when you “preview” or publish it is not appearing? Am I doing something incorrect?

    • Rebekah Read says:

      That’s so strange that it is working on the backend but not the front. Unfortunately I’m not a coding expert so I’m not sure, but you could always reach out to Showit support (the little chat box on the right side) and see if they have any ideas? They are super helpful. Sorry I can’t be of more help!

  2. Shadia says:

    Hi Rebekah! Any chance you could tell me how I can create this effect without the cursor “backspacing” and deleting the text? I’d like to have the text written out and then stay visible. Thank you!

    • Rebekah Read says:

      Hello! You would just delete the “delete all”. So let’s say you wanted JUST website designer and you wanted it to stay, you would delete this:
      deleteAll()
      .typeString(‘Brand Strategist’)
      .pauseFor(1000)
      .deleteAll()
      .typeString(‘Squarespace Educator’)
      .pauseFor(1000)
      .deleteAll()
      .typeString(‘New Entrepreneur Helper’)

  3. Amy says:

    I watched the video for the scrolling marquee but it’s not a code that worked in Showit. Are you able to cover this? Thanks

    • Rebekah Read says:

      Hello Amy, thanks for making me aware of this! I am unsure why this is happening. I’ve played around with it, but am not a coding expert and can’t seem to get it right. I’M SORRY!

  4. Sarah says:

    Hi Rebekah!
    To your knowledge, is it possible to achieve the Showit scrolling effect on Squarespace? Thanks

    • Rebekah Read says:

      Yep! I plugged the code in using a code block on Squarespace 7.0 and it worked!

    • Rebekah Read says:

      Just change out the Source URL from the Showit URL to your fonts URL. You can get that by going to Design – Custom CSS – Manage Custom Files – Upload your font – Go to the bottom of your Custom CSS and click enter to get a new space – click manage custom files again – click on the font (this will get the URL) – copy that URL. Then you go back to your code block and paste in that URL replacing the WOFF file. You don’t need to change the “Tenez Light” in the code.

  5. Erin says:

    Thanks so much for this code! I love how it looks on my site, but I needed it left justified, which I did fine, but now, because of the slant of the font it’s in, the left-most part of the first letter is chopped off. How and where do I add the padding-left: 5% code?
    Thanks!

    • Erin says:

      Also, how would I make the cursor not visible in the code?

      • Rebekah Read says:

        Hey Erin! I am glad you got it on your site. I unfortunately am not a coding expert so I am not sure how to fix your problem. Are you on Squarespace or Showit? There are some great coding Facebook groups with people that could probably tell you what to do to fix it! Sorry I couldn’t be of more help, I wish I knew!

  6. Hi, on my desktop version it works perfect! But on the mobile version (even tough i have changed the font size to 20) It turns out very big and doesnt change the size. Do you have any idea how i can fix this? (on showit)

    • Rebekah Read says:

      Hello Eline! I worked a bit with the code on Showit and for some reason it isn’t working on mobile – I am unsure why. I’ve played around with it, but am not a coding expert and can’t seem to get it right. SORRY!

Leave a Reply

Your email address will not be published.

pair beautiful brand design with an intentional website strategy so they can book more clients and make more money doing what they love!

Helping creative entrepreneurs

Instagram is kind of my thing!
Let's connect!
@rebekahreadcreative

Home

Read The Blog

Privacy policy

back to top

How to design a website that converts!  Learn my best tricks to SEO, copywriting + branding!

Let's connect!

I WANT THAT!