How To Add A Marquee Banner To Squarespace

Design

In todays video tutorial I’m going over how to add a marquee banner to Squarespace. This is a really cool, unique feature that helps your site stand out. I added it to my website (although not built on Squarespace) and figured out how to make it for Squarespace. You can simply copy and paste the code below into the sections as shown in the instructions / video. There is also a bit of explanation for some sections below the video & code so you can customize it even more to your liking. Again, this is for Squarespace, if you need directions on how to add it to your DIVI website, go here.

Affiliate Disclaimer: Please note this post contains affiliate links. If you go through them to make a purchase, I will make a commission at no cost to you. Thanks for your support!

Code Disclaimer: Please note that code can break upon updates or other errors can occur. If you are choosing to add this code, you are responsible for doing so & for any errors that may occur. Thank you.

 

Watch the video for How To Add A Marquee Banner to Squarespace below:

copy & Past Code below

 

Add In Code Block:

<div class=”marquee”>

<div class=”track”> <h3><a href=””>

Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here * Add Your Text Here *  </a> </h3>

</div>

</div>

 

Add To Custom CSS:

.marquee {

    position: relative;

    display: flex;

    animation: moveLeft 14s linear infinite !important;

}

.track {

    font-size: 36px;

    white-space: nowrap;

    min-width: 100%;

    text-align: center;

    padding-top: .5vh;

    line-height: .9em;

    color: #191c19;

    font-family: ‘grand slang’;

}

 

.track a{

color: inherit;

    text-decoration: none;

animation: text 10s infinite linear;

position:relative;

}

 

@keyframes text{

0%{

left: 0%;

}

25%{

left:-10%;

}

50%{

left:-20%;

}

75%{

left:-30%;

}

100%{

left:-40%;

}

}

 

 

Here are the steps to add a custom cursor in Squarespace:

1. Go to page you want to add the Marquee Banner to and add a new section. 

2. Add a ‘Code’ block and copy and paste the first section of code

3. Customize the text to your desired copy and make styling changes as directed in the tips section below

4. Make sure section is Full Width by going to edit section > Content Width > 100

5. Go to Design > Custom CSS

6. Copy and paste code into Custom CSS section

7. Make additional updates if needed here as directed in tip section below

8. Click Save

9. Check out your marquee banner & celebrate!

10. Repeat to other sections as needed!

 

Tips for customization (important to read)!

1. You’ll see this code at the front section, use it to change your header font or add a link to the marquee banner:

<div class=”marquee”>

<div class=”track”> <h3><a href=””> 

The section: <h3> can be changed to any header or paragraph text. Meaning the styling choices you made in the design section of Squarespace will be reflected in your selection. You can change it from h3 to h2, h1, h4 or even p. 

This section: <a href=””> is where you can add a clickable link. You can add your desired link in between the quotation marks. For example: <a href=”dragonflyave.com”>

 

2. Extra Customization for FONTS:

Add this code: <span style=”font-size: 10px; letter-spacing: 10px” font-family: meno-banner;>  If you want to further customize the font in the Marquee banner. You can replace the font size & letter spacing to whatever number works for you and add a custom font with the font family. If you only need one item, simply delete the others.

 

3. Change the speed:

This part of the code is what will effect the speed of the banner. These numbers seem to work great but it’s totally your preference so feel free to play around.

@keyframes text{

0%{

left: 0%;

}

25%{

left:-10%;

}

50%{

left:-20%;

}

75%{

left:-30%;

}

100%{

left:-40%;

}

}

*** Please note: If you are having issues, please delete the quotation marks and re-add them. It looks like there is a formatting error that occurs. This should fix the issue. 

 

Don’t Forget To

Pin Your Favorite

Read The Latest

How to use our Laverne Business Card Template

How to use our Laverne Business Card Template

Whether you’re a fellow designer or business owner, there will always be a time where mockups can serve your business. I’m always on the hunt for a beautiful mockups and when I found out I could make some via my favorite program Adobe XD, I jumped at the chance. Our...

Brand & Web Inspired by Bruno of Encanto

Brand & Web Inspired by Bruno of Encanto

"We don't talk about Bruno... no no no...." Yes, this song has been stuck in my head for the last few weeks and I catch myself singing in my head 'time for dinner' before I go eat dinner and all the other amazing lyrics. If you haven't watched Encanto, you definitely...

Drawing My First NFT

Drawing My First NFT

Drawing my first NFT! It's happening people, it's happening! I'm so pumped to share that I'm working on NFTs and starting to draw & sell them. I wanted to give you a behind the scenes look at me drawing the first NFT of my new collection: 'Kravings'. Kravings is a...

CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS * CLICK HERE FOR FREE GOODS *

translate

Pin It on Pinterest

Skip to content