In todays video tutorial I’m going over how to add a marquee banner to DIVI WordPress website. This is a really cool, unique feature that helps your site stand out. I added it to my website and I love it! It’s so fun and you can totally customize it as you’d like. 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 so you can customize it even more to your liking. Again, this is for DIVI, if you need directions on how to add it to your Squarespace 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 DIVI WordPress below:
copy & Past Code below
Add In Code Module:
<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 In Theme Options:
.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%;
}
}
Add To Custom CSS In Theme Options:
#page-container{
overflow-y: visible !important;
}
Here are the steps to add a Marquee Banner to DIVI WordPress:
1. Go to page where you want your marquee banner
2. Add new section & row & code module
3. Go to Row > Edit Width > Design > Width 100%
4. Copy & Paste first section of code to the Code Module. Make any customizations as needed as directed in the tips section below.
5. Save & Exit Visual Builder
6. Go to dashboard > DIVI > theme options > scroll down to Custom CSS
7. Copy & Paste section AND third section of code here. Make any updates as needed as directed in the tips section below.
8. Click Save
9. Check out your new marquee banner!
10. Create a global section or save layout and paste to other pages if you’d like!
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 custom theme settings section of 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%;
}
}
4. Remove extra space on left or right side
I totally forgot to mention this in the video BUT add the code below because sometimes the marquee text will create this white space to allow for the text on the left or right side. This will remove it! 🙂
#page-container{
overflow-y: visible!important;
}
Don’t Forget To
Pin Your Favorite
