Developing an Epic Music Festival Website Template: Infinite Marquee, Festivals & Blog CMS - Part 2

hi I'm Anastasia I'm a webflow Template Designer and in this video I'm going to keep developing the new webflow template which is a event website template in the last episode I developed the hero section of the home page and already started working on the interactions yep there they are today I'm going to keep going and I'm going to develop the infinite running text section Plus CMS section for the festivals what's going on with the scroll infinite scroll ribbon so I have here upcoming Festival

text which supposes to be scrolling to the left side infinitely so basically it will go from the right to the left and it's going to be looped let's go to webflow and develop this to develop this I'll create a new section I'll give it a class section okay and is going to be ribbon combo glass section so for the ribbon section I'm going to set the position to relative and I'm going to set the background color to white Also let's create a Swatch right away okay now let's add a d Vlog there and cal

l it infinite Marquee rep so the infinite Marquee rep it's going to be 100 width let's give it some paddings probably 12 for let's start with 20 we can always adjust it later okay let's add the maximum width also to 100 percent fix 100 yeah and set overflow to Hidden okay and now let's add a text block let's copy this part and paste it right here and let's give this a class infinite Marquee text look let's set it to inline blog and give it the font let's also give it a size for the pixels and it

's all capitalized in my design so let's do the same right here yeah and give it a height of one which cool so now what we can do next to make it work infinite Marquee tags block okay I'm going to make it I think double yeah and I'm going to create a component let's call it the same infinite Marquee eggs block and let's copy and paste it four or five times okay let's go back to infinite Marquee rep element and give it a glass Flex horizontal perfect now you can see what happened is that the text

compressed a bit so to uncompress it let's open the symbol and go to flex child settings let's set the sizing to don't trick okay that's what we need also I can see that there is no gap between the emoji and the next text element yeah I think this might work let's preview okay I can see how it looks so now I can see that the text kinda looks bigger so what size and oh I've used much been I've used 115 pixels with this one but since I designed for big white screens like 1920 pixels so I'm going

to adjust everything and make it slightly smaller in order to make it look good for all bad devices so let's go back to infinite Marquee rep let's decrease the padding I like it pixels looks good okay in what we are going to do next is we are going to go to the interactions panel to the page trigger and let's click page load so in the page load settings when page finishes loading let's click action select an action and start an animation we are creating a new timed animation and let's call it in

finite Marquee animation okay and what we are going to do here let's click infinite Market text symbol and click edit component so make sure that the interactions panel is still open there let's go and add an action let's add action and it's going to be move action let's make it affect plus and all elements with this class let's click set as initial State and give it an initial state of 0 pixels okay and next let's add or let's actually duplicate this one and let's change to minus 100 percent no

w you can preview this animation yeah it runs pretty fast let's adjust it to probably 10 seconds not bad probably a bit too slow let's adjust it to eight it's a bit better so I keep it linear because I wanted to move linearly and without any jumps or any animation such as easing or easing out so yeah see it we created an animation the only thing that is left is to take the loop and let's preview what we've just developed now we developed an Ethernet Marquee animation wait why did it stop why did

it stop I wanted to Loop please Loop let's preview again why does it stop okay I can see I can see what happened so now what we need to do to make it work is a loop animation we need to add one more action here let's duplicate the last section the move one and let's set move to 0 pixels and let's also set the duration to zero seconds because we want it to go back to initial stage instantly without any timed animation let's click save and preview so now I think now it's fixed and it should be wo

rking perfect it does work yeah cool let's keep moving to the next section this section is going to be a CMS power section for music festivals collection let's go and create a CMS collection let's click create new collection and call it festivals okay cool in the collection Fields we've got names like let's add the image and call it main image or people start with capital letter for consistency the next one should be date time and first of all date what are the fields do we need here we need a l

ink element to get me so why I added the tickling because we are going to develop a template and we are not going to create Integrations in this website so those things the customer or the person who buys the template should set up on their end that's why I'm using a URL a simple URL which allows me to just input link a placeholder for some third-party platform where users can buy a ticket do we need anything else oh yeah you can notice that I've used different icons for different festivals so l

et's go and create another image field perfect let's click create collection that's all what we need for now to get started and let's add three festivals so the first one is going to be Indie music festival cool the Festival date is June 2023 let's 2020 June yep perfect ticket link was just holdrevflow.com for now and now let's export all the images and yeah I remove all the styling from those images let's make them a bit more consistent so for this one I'm going to set something like this and I

'm going to name it indie Music Festival emerged This One race drum icon okay let's skip it let's click export back and in double size I explore let's also export the drums icon and 2x great let's go back okay I'm going to comprise the image before uploading it to webflow let's use the Photoshop for this time I'll show you how I do it okay let's click open with Adobe Photoshop stretch our back a little bit cool so what I do is I just make sure that the resolution is 72 pixels per inch let's prob

ably double this one yeah good and now let's click file export save for web looks good so we've got JPEG and we can select the quality let's check hi it's going to be 400 60 kilobytes and let's also check medium we can preview the picture I think it looks it still looks good and it waits 200 kilobytes that works for me please let's test it and see how it actually looks on the website so yeah I'm going to click save it but I'm going to add nin which is minimized it's Dynamic conventions I use nor

mally okay cool now let's go back to webflow main image minimize upload cool let's upload an icon icon Waits perfectly 25 kilobytes that's good good to size let's click create cool and now let's add two more festivals the same way we did okay the next one is Summer Music Festival main image expert Summer Music Festival image and I'm going to set the heightened weights 150. so I really want to make it consistent let's export pineapple icon and expert the Festival main image okay saved now let's g

o to our Photoshop don't save let's click open downloads frenzy Festival image let's check the sizing first I want the resolution to be 70 to purchase per inch and for this one let's double it okay and now let's expert save for web I think it looks good let's try quality 40 probably it looks just a bit better and it waits quite good click save at Nema minimized done let's go back to webflow and upload the festival image the Festival date would be August 12 ticket link let's at webflow.com and ic

on let's upload pineapple create cool there is one more hippie Music Festival let's start with the Capital One Team Music Festival image expert jpeg to X save wow this icon I have it in 3G format which is perfect so SVG allows me to scale it seamlessly you can see that no matter how much I scale it it doesn't show Pixel I start if I scale this one you can see those pixels because this image is rasterized image and this one is a vector so for icons I usually prefer to keep them any Vector because

they look better and you can scale them whatever you want okay let's export Sun icon since this one is SVG beginner exported SVG and we don't need to select anything here for the sizing okay and this one did we export it let me check yep here it is let's open this one with Adobe Photoshop and again change the size in a bit and now let's export for web let's try 13. yeah probably good enough big save minimized done let's go to webflow and upload the festival image Festival date which one did I u

se September yeah let's go with September September the second ticketing webflow and icon sun create done write it so we've created a CMS collection for the music festivals now let's go and add this CMS collection to our home page so what I'm doing I'm creating this section okay and now I'm not going to add a container because I want it to be like 100 with so I'm just adding a collection list element and I call it festivals collection list wrapper I said the wrist to 100 pixels and I keep going

so the next element is the collection list I'm calling Aid rest of ours election list with 100 and now collection item if it was correction item 100 with awesome so what I'm doing next I'm adding a div block oh yeah now first I need to connect this collection list so let's click source festivals now I can feel this with elements and viewed the front end of the collection great so first of all card let's make it 100 wreath and set the display to grid I removed the Gap and the second row cool so n

ext I'll go into use a div block and I name it Festival my image rep and I set the width to 100 and height to 100 actually let me see so with this one I want them to be square or more or less Square so what I'm going to do I'm going to remove height 100 and I'm going to set the position to relative and then and the padding or 100 to the top so now I've created a square d block and I'll go into it an image element inside so I'm going to give it a class absolute image and set the position to Absol

ute pull and give it reads 100 at 100 and set feet to cover now let's connect it to the CMS collection let's see get image from festivals and Main image cool so now we've got Square images and now what I want to do I'm going to sort order yeah I'm a bit chaotic I'm doing some stuff like whenever I feel like to so let's sort them by Festival date okay all this to newest yes oldest newest perfect good and now let's add a div blow which is going to keep then first of all date heading and button oka

y let's keep going with this one so this block is going to have a background like light blue or background let's call this D-Block Festival info art let's display to vertical and to start Longview or by the way and justify the center and give it some paddings probably let's start with 60 and then let's give it a background color and let's create this watch so it's going to be light cyan color cool next let's add a text block elements to get text from festivals and set the Festival date okay let'

s go next let's add heading element H2 let's click oh H2 headings and select the proper font ROM raising normal so how huge is this 120 I'm not sure about it but I'll start with this one it's okay okay line hide I gave it 1.3 dish and get text from name yeah it's too much it's too much here let's divide it by two and remove a bit your line height also I can see that those are all capitalized let's capitalize them all cool and now let's add a button get ticket okay ticket ticket you should get Eu

ro from the collection from the ticket link let's give it a grants button we already have it so it's going to be styled the same as the button in our top menu okay so I don't have in the design not a button or yeah and by the way you can see that the button is a bit different in my design than in my development but this because I decided to follow the recommendations of webflow and have the black text on red not white because the contrast ratio is quite low with the white text on red background

I'm going to use black for now and I'll get back to it later for refining and yeah just for refining also I don't have the second button here but probably let's create it let's create the learn more button right here and set it to page to the collection page from current Festival let's give it a class secondary and remove the background color okay and now let's wrap it in D Block as well as this button and call it buttons crap let's give it a great display and give the gap of 20 pixels here yeah

probably this look looks good looks good to me for now okay and another thing is let's style their Festival date let's make it a bit bigger first of all date let's try multiplying by 1.2 24 pixels looked good enough for me and let's also capitalize yeah why not Also let's go to Festival info card and choose the color red one the same as in the design so you can see the contrast ratio fails again yeah let's dish it let's go with black for now cool black gives the perfect contrast ratio righty an

d now what else is here let's add icons great first let's download the star icon let's give it some a bit nicer sizing yeah like this let's export it as SVG and rename it our icon cool and those icons we already have them in our CMS collection so the star icon is going to be reused throughout the cards all right let's work on that icon let's choose the icon from the CMS collection that we have my God it's huge and let's give it a quads Festival icon Netflix and do not shrink straight away given

the size of something like the pixels for now okay it looks good and now let's set its position to absolute so what happened date it's starting yeah it got aligned according to the festival info card by the way let's set its position to relative what we need to do here is to set its position tool bottom right and give it some space like 25 pixels from the left and five from the bottom let's also play with a bit with rotating okay let's go to transform rotating 10 10 pixels rotation looks good 12

also looks good wealth is better actually I like it better okay let's preview looks a bit too far away for me let's change it a bit let's make it okay I see let's wrap in div block all the text elements that we have in the card and let's call it first of all info text content let's now change the width or any position here but give it a position reality and now let's move the first one icon inside this cloud and align it somewhat like bottom right and give it minus something else and probably s

omething like 10. yeah let's preview that looks a bit weird no but that's okay we can work with it so what I see here straight away let's align our buttons to Center the fonts in the buttons and let's select first of all in for text content and set maximum weight to something like let's just click pixels what what is this 376. that's okay let's give it to 400 yeah so now it keeps the alignment better let's also go back to the festival info card and align it to Center and preview yeah that's bett

er and now let's adjust the icon again just a little bit yeah something like this looks cool next how about we try again upload the icon come on little star please upload nope it won't okay so let's go see what else we can do here I can see that in some of in the designs I've got the icon like to the bottom in the others to the top but working with CMS collection I can send those just for one icon so it basically means if I just this icon will be same if I give this one a combo glass it will be

applied to this one as well what we can do here we've got two workarounds let me think which I'm going to take and as for the order I mean like you can see this the image on the left text on the right and in the second element we've got text on the left an image from the right so what we can do here is we can adjust or even items for the collection based item but it won't actually work because I've created a festival card inside and I cannot adjust it so what I'm going to do I'm going to keep th

e icons as they are so I'm not going to change them but I'm going to play around with the order of the cards elements the text on the left which on the right hand vice versa so what I'm going to do is I'm going to remove the glass festivals clay give it Festival card you see what happened and now I'm going to move the two div blocks out of festival card div block so now I can adjust even item can I okay what I need to do is to set the display to flex horizontal yeah right I'm actually read 500 y

ou see what happens so I need to adjust the bedding now to 50 to make them Square let's preview are they really Square yeah they are good and let's go back to Festival card even item and click reverse so yeah what happened here I can see that the images and the text are not exactly 50 let's check why so the Gap is set to 0 pixels that's good the image let's change it to 50 pixels and the festival card 50 pixels it works yeah that made the job cool that's exactly what I needed all right let's kee

p moving so now we can adjust the diagrams a bit more if you want to I'm not sure if I want to but yeah let's just play around and see how it looks it's a bit better and I have this white space for another icon I think I can place it some words next to the Festival date and a bit to the left when I can upload it okay and this one is finished by another infinite text running Marquee which is a bit different in color and it also says upcoming festivals I think it doesn't make sense honestly the de

sign but we can always refine it later let's add this element so where did we have it here it is section ribbon let's copy and paste it below here we have it and it already works we can just adjust its colors okay let's select infinite Marquee rep or Section 3 button actually yeah let's remove pre from here I don't think it we need it and from here as well and let's like the infinite Marquee rep and set the color to so now with this infinite Mercury we can select in the selector we can give it a

combo class to change the background color that would make more sense so for this one background color should be orange and the text should be bluish I think we just orange background row just said the orange background because I already tried it and I know that bluish text doesn't work on orange background it was contrary unfortunate yeah so let's keep the text black let's go back to the design and see what's next so next we are having blog so that should be another CMS collection and it style

d as a Polaroid photo shoots cars let's work on it let's go let's create another CMS collection and call it blog blog posts yep so here we have name slug let's get my image what else publish date it will be already there and inside the blog we are supposed to have Rich Text element you always need it because it's a Blog you need it for the body of the article let's call it rich text and I think that's it for now we can always come back later and add more Fields when we need it okay and now let's

add five items but this time I'm going to create sample item that's so quick okay and now let's let's download the images for our blogs and remove all the styling from them because we are going to download them let's first let's rename them rename to block image and number let's remove stroke and Export as JPEG but also by the way let's change their yeah let's change let's oh I also changed their sizing to be more rectangular because I would need it in the future for developing the blog item pa

ge okay now I'm going to export this jpeg can export three layers straight away and next I'm going to open them with Photoshop because I need to or again to compress them okay let's click experts say for web medium quality this picture is really colorful and light so it's going to wait around Rick 100 kilobytes even with medium quality setting which is okay let's click save okay this one I can see that the quality is not so good why is this let's open this image on unsplash sometimes it happens

with figma So to avoid that I always suggest to open an image click copy and then paste it again in figma that should work better okay now I can see that the picture itself is grained so that's why it looks like this let's try it again just to make sure we did the job yeah we did the job let's save it and replace okay what about this image I think it looks good to me let's keep it okay now I'm going to close this one and open open it again the pre-downloaded change resolution to 72 and let's try

by two now let's click export safe for web I got it it weighed so much you can see it's 600 pixels let's try low yeah my quality 10 of the original one I think I should find a better picture because it won't work yeah I'm thinking to find another picture let's choose from something from the this collection no this one is not really good how about this one no that it won't work let's try searching for something let's talk about something from the festival how about this one no I'm not really lik

e it I don't really like it how about this one that's where copy image paste it yes looks good let's export it click replace and again close it and open the replaced one good so now let's do all the job expert save Web video quality looks good to me let's click save and call it minimized don't save the original I don't need it and multiply by two where it's expert yes looks good okay let's go to webflow so I'm going to replace the images in some of the existing blogs that I've just created and c

lick save come on webflow please upload the image please it won't just doesn't want to let's try again I noticed this leg in about a few weeks ago and it still persists so the only thing that I can do is to uphold the page and try again I'm not complaining but it's just a bit annoying and I hope the Buffalo team has already broken to fix this by the way I'm not sure if I reported this issue it's a good practice to report something that persists because how how else would weather team know that t

hey need to approve something and make our job more enjoyable so just in case I'm going to report it today after I finish shooting this video hi refresh again okay one more picture to go yay done cool and I'm going to take the other two blog posts and delete them for now because I don't need them okay so next let's create another section yes for the container inside a bowl now let's put the heading of the second press page two yeah let me go back to the design so here this section have padding s

o 144 section how how should I call it because I didn't give guidance for the other sections spreadings let's call it just read weddings 144 144 let's start with this now that's the right let's decrease it to 80 pixels not with paddings but let's call it green or log yeah blog is perfect perfect right base choose the background color and give it the background color or green and add Swatch straight away it's Olive drip I love the name is for the colors I never got them but yeah so black contrast

ratio looks good on green but how about we try white and it fails immediately still eat it okay now I'm going to give a glass centered heading to the hidden element big align Center remove the top margin margin bottom is too little I think I'll create I'll update the bottom margin to 20 for all H2 headings element okay from our blog cool and now let's add a collection list element and select Source from blog posts okay let's style it book collection lay stripper read 100 log collection list whe

re it set it to grid three columns grid with probably 40 pixels Gap and let's remove the second row let's also give it three it's 100 cool now log correction list item okay cool and now let's create a log art who's going to be 100 wait and let's choose its background color the background color should be do we already have it think not yet let's create this watch lean in oh my God it's so beautiful I'm using conventions for the colors okay let's add an image and get image from Main image okay and

now let's add another div block blog card info but with capital letters needed okay and in the blog card info oh by the way this one should be blog image 100 weights in the blog card info we go into code heading and publish date that's it probably I didn't need blog cartoon for wrapper but let's keep it for now so I'm going to use H3 heading let's give it from reason font normal something a bit bigger and like this so to give it the bottom margin of 20 pixels okay and now let's get text from th

e name from the name okay let's skip it for now and now let's add a text block and tick get text from published on it's not published yet right okay tick from create it on for now okay now let's dial The Block card so I want the block card to be a link block I click convert it and because all the links have these settings like blue color and underline text on the line so I'm going to remove it from here I'm going to set decoration to none and I'm going to set the color to Black okay and now let'

s give it some padding like in the design something like let's start with 20. yeah good looks good also to style it like parallel parallel paralleloid Parallax no what's it called Polaroid yeah to style it like polaroid pictures I need the images to be square yeah by the way we also have this pin icon let's export it right away in expert okay good so to make the block image Square we can reuse the Festival main image rep but actually it won't work because it's with and padding are a bit differen

t so let's wrap in div block the image select it and let's give it a glass block image crap let's give it a pattern of 100 yeah so you can see like this is the square space that it creates and let's set its position to relative an holistic blog image and remove with fast set give it absolute image plus so now our blob images are perfectly Square so now what I want to do is I want to make the car's head a bit smaller so that the cards itself look closer to Polaroid images okay let's give it a gla

ss blog card heading and let's just update its size in something like 88 pixels yeah good so now let's go to block card settings and links settings let's stick it to page to the collection page from current blog post and what do we have else the pin icon let's select the Block cards position to reality and add an image let's upload our pin image name icon it set its position to Absolute and align to the top let's give its maximum width to soften like 60 or even 40 48 yeah root and now let's play

with a lemon alignment so for the block card let's set position to flex vertical align Center so now our pin icons are perfectly centered and let's move them a bit to the top something like minus six minus five yeah it depends on however you like them how you prefer them yes yes that's that looks good so I'm going to add a bead ball add in here so that it would be a bit more space from the heading to the Block cards let's make it to 80 pixels because it's the same pattern as the top hence and a

lso I'm thinking about minimizing the container of it but I'm not sure yet let's play around a bit more with the pin icon I think I want it to be a bit bigger okay looks good what else do we have here you can see that some of the cards are rotated so let's play around with it just slightly rotation to a minus three degrees or three degrees and the middle one is not rotated okay let's see what we can do how we can set it up so let's choose block collection list element and click the drop down so

what we have here in the structure we can adjust the first item and old items I think that will work okay let's start with the first item let me move myself back to the left okay and let's go to that 2D 3D transforms and play with rotation three degrees by the way it's funny because config might have it to minus three degrees but in web loads positive three degrees but in fact it's the same wow okay that's just those two programs are a bit different now let's take old item and play with rotation

let's rotate to all when it's free or minus or minus two I want something not really symmetrical okay and how about now we select the cover state to rotate to zero degrees let's see how it behaves and let's say transitions to all properties to 200 milliseconds that's okay yeah no so that's what's going on okay I like it but probably I want it to be a bit slower yeah it's better yeah let's leave it as it is for now okay and the two things in this section is to better read all button and to give

this background image so let's work with the background image what is this image where did I get it from I remove everything from here and I'm going to click fill and now I'm going to see okay so that's what it is let's call it pattern or background pattern and I think what is this this is it a PNG or SVG looks like vector 3 so let's export it let's export as SVG okay and now let's go to the section settings and add image to the background let's choose image choose background pattern yes tile no

t fix looks good let's take it to 2x so that it will be slightly shrinked yes looks good and now let's oh my god let's prep our head into the text span and give it glass background green and set the background to Green so that now also give it some probably 12 pixels so now that our heading is more readable okay the last thing is to create a button let's add button okay and let's do the clouds broadcast read all by the way I really like it in red but I did it in white here is a secondary button

for a reason actually because I believe that all the buttons should be consistent on the website so if I'm using this color in this styling for the get ticket button what I'm going to do I'm going to make this button the same for this particular action for getting the ticket if I'm using a learn more button so I'm going to use it the same style the same yeah the same style for all the pages so for it all I'm going to give it a class secondary and I'm going to create the div block let me move bac

k to the right I'm going to wrap this button in a div block and I'm going to give it a glass Centric button pull green background okay now what I'm going to do is I'm going to give it a 12 margin and I'm going to give it the background color green okay now I need to to call it to minimize it so what are my options let's play around with it read oh I can leave it like this it's not exactly what I wanted so let's remove the background color and update the loss now I'm going to wrap this button aga

in in a div block and give it a quest playing Ground let's take a look let's give it some top and bottom parting so probably again 12 pixels let's just play around with it a bit four pixels looks good yes let's leave it like this for now okay let's take a look at our website I still haven't uploaded the star icon oh what happened I can see this extra spacing that I don't need let's set the block card info to 100 with yep that fixed the issue read all is going to lead to the old block Pages page

that that I'm going to create okay so what's next next would be reviews sponsors and newsletter and I'll leave it for the next time okay so we've developed today quite an impressive amount of work actually we developed the running text infinite Marquee the same as collection for the festivals and the block CMS collection and we also created some interactions which is cool let's keep working see you next time bye bye