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.

 

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%;

}

}

Don’t Forget To

Pin Your Favorite

Read The Latest

SEO Basics For Squarespace

SEO Basics For Squarespace

In todays video tutorial I'll be going over how to SEO basics for Squarespace. This is part of our Squarespace Basics series that's geared to help beginners use the platform and gain confidence. I'm a big believer on using platforms that work best for you and your...

Free Website Launch Checklist

Free Website Launch Checklist

Got a brand new freebie hitting the resource library this week and it's a free website launch checklist! As a web designer, I know the feeling of both nervousness & excitement when launching a brand new website. You can't wait to show it off but you're also...

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

Pin It on Pinterest