How To Add A Marquee Banner To Squarespace

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:

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>

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:

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.