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

True Bliss Massage & Reiki

True Bliss Massage & Reiki

True Bliss Massage & ReikiWebsite design Wordpress developmentTrue Bliss Massage & Reiki is a Massage & Reiki studio based in Colorado. Sarah came to me looking for a redesign. of her current website. She wanted it to match her new space, be clearer to...

Rachel Hine

Rachel Hine

Rachel HineBrand identity Business Cards Social Media  Templates Website design Wordpress developmentRachel Hine new brand & website is here. Rachel is a photographer & creative director based in New Amsterdam (works globally) who needed an updated portfolio...

The Misfits Experience

The Misfits Experience

The Misfits ExperienceBrand identity Website design Wordpress developmentThe Misfits Experience is brand & website is here! Christine came to me for a new website & brand update for her new intensive offering. The new website experience is a mix of beautiful...

Remarkable Trees of Pittsburgh

Remarkable Trees of Pittsburgh

Remarkable Trees of PittsburghWebsite design Wordpress developmentThe Remarkable Trees of Pittsburgh new website is here. It was great working with Tree Pittsburgh again on this project. The goal was to share how many trees were planted with a fun counter and make it...

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