How To Add A Marquee Banner To DIVI / Wordpress Website #divi #wordpress #marquee #css #website

hi everyone this is marcy from dragonfly avenue um today i'm gonna be walking you through oh let me get rid of this sorry i'm gonna be walking you through how to create this full width marquee banner and show you how to customize it to your liking so because i already have this on my main site i'm gonna kind of create a new ish version on like another site using a random page um so first off start by enabling your visual builder so you are on the back end of divi okay um once you do go to uh select a uh a row and then you are gonna go to code and here [Music] we are going to copy and paste this code you can find this on the blog post if you are not already there okay so just copy and paste that there and ultimately you can couple it like minor things you can do all of this can change to whatever um like phrase or word like whatever it is that you want to include um you can add that here so just like change it and then copy and paste it a bunch of times okay um if you want to add a code you can add it or i'm sorry not a code a link to make it uh clickable so let's say it's dragonfly app.com you can add that right in between these um quotation marks okay um also if you have um different texts that you would prefer to use you can um or like heading sizes um that you would prefer you know like go for it you can change that right here with h2 okay so then let's save that and before we forget let's go back to the row settings go to sizing and make sure you're hitting 100 width and this is 100 as well so then it's completely full width um you can also like add colors like what i did um so like it's gonna be a little bit different let me do it over here i'm going to move this down one sorry all right so um how i made it like so much smaller and you can obviously wait if you want once the code is enabled but um let's just pick like the soft color and just kind of call it a day um again you can change the color in here um if you do want to like customize the text within it a little bit more um i will show you this code and you can kind of play with it as well um you can just add it right in between here um and you can like change the size letter spacing um you can do like font colors like all of those different options you can do here as well um mainly because like you don't really have like the option here so um you can do that by like making something a little bit more unique if you want okay so again let's save let's save one more time and then let's go to our dashboard and we're gonna go down to divi theme options okay and then we can scroll all the way down and then we're gonna grab this code and we're gonna copy and paste that in um a few things to note um the if you want to adjust the speed levels you can do that here and you can kind of play with that to figure out what you prefer i found that these settings as is uh looked and felt great so um if you like how it is go for it but if you want to play around with it you know i have to do what you would like okay so then just save it and then let's go back to the page okay and now we're back to this page and you can see that it's now moving quite nicely um and you will see like that there's always going to be like some like little it looks like a glitch but it's just restarting um and as much as i've tried and even from other marquee banners that i've seen there's always gonna be like that second of like restarting but there you go again you can customize the background style the font add a link don't add a link change the copy do whatever you want and fit it to your brand and yeah code will be on the blog post so feel free to copy and paste it if you have any questions or comments add it below um and yeah follow along with dragonfly avenue uh check us out and um yeah i'll be sharing more tips and tutorials and like fun fun resources for you so yeah thanks bye

Channel: Dragonfly Ave

Views: 535

Keywords: DIVI, Wordpress, Custom Code, CSS, Website Tips, Web Design, Custom CSS, Marquee Banner, Marquee Effect, Easy

Id: QNS9yROsBos

Length: 6min 33sec (393 seconds)

Published: Thu Feb 11 2021