Lella Lifestyle Blog Template for Content Creators - Webflow

[Music] hi there this is john from web dev for you and welcome to the lila lifestyle blog template for webflow this is the perfect template for content creators who want to create blog posts for their audience in this video tutorial i'm going to cover everything about this template from the different pages in the template how to create blog post as well as how to design and customize the template to fit your style so without further ado let's get started so the first part of this tutorial is just a quick overview of the template and the different pages within the template so the first thing we notice here within the template is the hero slider and when we hover over these images we can see we have this nice hover effect if i click into the read more or i click the card we go into the blog post for that specific slide you can add as many slides as you'd like and each slide can point to a different blog post up here we have the navbar we have the pages and one thing you'll note here is a newsletter pops up after about 10 seconds and this is a customizable option you can link this newsletter to let's say a mailchimp form and i'll leave a link in the description area below to how to link mailchimp to a webflow form it is a webflow university video so for now i'll just close it and we'll come back to that later in the tutorial but as i was mentioning we have the pages here we have the home page contact 404 page password and i'll showcase all of those pages then we have about beauty style food and home and travel so these four nav items these are blog categories and each category links to specific blog posts for now let's continue on the home page and we'll visit every page in this quick overview as we scroll down we have some more blog cards that do take us to blog posts here we have a sticky positioned author section where you can add an image and you can talk more about the author write a nice blurb about the author and we have the social media links right down here if i click read more it takes us to the about page which i'll cover in more detail and yeah these are all nice cards that the user can click into to go to different blog posts right down here we have the four different categories beauty style food and home and travel and right down here we have the contact form that the user can use to contact you directly and down here we have the footer here we have the different category pages and we have different pages within the template here the social media icons as well as another newsletter form that the user can use to subscribe to your newsletter okay so that is the home page now let's click into the about page so the about page has a nice image here where you where you can add your own image for the author section we have the social media links that can link out to your social media a nice blurb about the author and some points of interest we also have a nice quote here with the block quote and some description text of the author here this is lorem ipsum but you can replace this with your own text now we move on to the different categories so the first category is beauty beauty and all these categories can be changed but here we have the beauty page and each category has a specific layout so you can use all four layouts that i'll be showing in a second or you can pick and choose which layout you want to use for your blog articles so here we have the beauty category and we have these nice uh cards so when you hover it has a zoom in effect and the background changes color and again if i click into any of these cards it takes me to the post so this is the style of the beauty blog post so there's four different uh blog post styles as well and you can choose which one you'd like to use you can use multiple or select a specific one for your site so this is the beauty category and we have the categories down here style food and home and travel travel and we have the footer at the bottom as well so let's move on to the style category the style page so this is a bit of a different style we have these cards here that move up when we hover and again if we click into any of the cards it takes us to the blog post page for this category so this blog post has a different style we can see that the heading is here on the left and we have this nice color and then we have the blog post on the right again every page has the nav bar and footer and the navbar and footer is a symbol so it's easy to add to any page okay so that is the style we have other posts here as well so this is another kind of design element that you can use for your blog cards and then we have this style for the categories and they're more like buttons let's move on to food and home so this is more of a vertical layout where when we hover we have this nice read more overlay and again if i click into the card it takes us to this style for the blog post so this is the food and home style we have this nice category tag here the heading and the date and then the blog article and then we have the last one here which is travel so travel has a bit of a different layout it has cards you know we have two cards here one card and then we alternate the title here we can see the titles on the left and here the title is on the right and the date is on the card here within the upper left so you can you know these are more so like components that you can pick and choose and decide how you want to style your specific site again we have the footer and the nav bar so if i click into any travel card this is the style for the travel category okay so as you can see we have four different categories and four unique blog post layouts for each category again you can pick and choose whichever one fits your style the most or you can use all of them for the different categories so let's go to pages so we looked at the home page we also have the contact page this is just a simple contact form with social media buttons here on the left and the user can click here directly to go to the to use their email client to to send a message directly or they can fill out this form and click submit and all the success messages and error states have been styled as well so it matches the style of the template okay so now let's go to the 404 page so this is the page the user will land on if the if the page is not included within the site so here i can go home back to the home page and then we have the password page where the user can enter a password that they can enter a password to access restricted content and it all matches the style of the site and again every page has the nav bar and the footer okay so those are the pages let's take a quick look at the style guide and i'll cover the style guide in more detail in a later part in this tutorial but these are the colors used in the template you can replace these colors here in the style guide and it will replace all the colors in the template that are using these colors here we have the headings the typography styles for the template the paragraphs and the different headings here you can customize them here and it will change throughout the entire template we have the buttons the primary and the secondary and this is what the rich text looks like with the different global styles applied to the headings and the paragraph and the images as well and here we have the block quote and looks good so this is what the style of the blog post will look like again you can customize this by styling the global tags and i'll showcase that in this tutorial so that is a quick overview of the lila template i'm very happy with this template and i think it can make a great site for content creators who want to showcase any blog post or share blog post with their audience so the next section of this tutorial is the responsive design of the template so let's take a look at the responsiveness of the template you can go from the left here and just drag in to see how the template responds to different widths and if i scroll down we can see how it looks here we can take a look at the mobile menu so it's just a drop down and let me close this here we have this drop down and we can access different parts of the site and take a look at the responsiveness of the site we can see the cards are stacked more vertically and looks great so we can take a look at the responsiveness this way or we can use a program that i like to use it's called sizzy and it allows me to view the site on multiple devices so we have the imac 27-inch laptop medium laptop small macbook pro 15-inch ipad pro iphone 12 and pixel 5. so let's take a quick look at the site on these different devices so on an imac 27 inch we see the slider is a bit wider to accommodate this screen size and the content here is nicely centered in the middle i am using a 1440 pixel max width for the container so any elements or any sections that have a container have a max width of 1440 pixels so the content doesn't span the full width of the screen for larger screens the blog posts are nice and aligned here they do have a max width of 700 pixels so that the user can easily read the content without the content spanning the width of the screen so we can go to the beauty page this looks good and i'll check out the style page nice so let's check out the the responsiveness on a laptop medium looks good very nice great and laptop small very nice we can see here the the slides are a bit smaller everything is a little bit more condensed looks great and i encouraged you to take a look at the template yourself and just look at the responsiveness on your specific device we have the macbook pro 15-inch very nice looks good and the ipad pro uh 12.9 inch so everything's just a bit more condensed we're still able to have the author sticky here which is very nice we have the beauty page everything's just a bit more condensed and the style page but everything is nicely aligned for the different sections here and the blog post looks really nice on an ipad 12.9 inch let's take a look at the ipad pro 11 inch we have the nice article there the footer the home page we can see once we get to an 11 inch we only have one slide per the slider we have the nice cards down the center the about section is at the bottom and we have the categories in a quadrant here or in a 2x2 square or 2x2 grid and the contact section very nice we have the mobile menu and looks good and the cards are stacked vertically here very nice let's check out an iphone 12 and we can see the cards are stacked vertically looks great we have the slider very nice and the categories are aligned vertically and looks good let's check out an iphone 12 pro max and let's check out style looks good and travel great very nice and the last one pixel 5. looks good all right so i won't go through too many more pages because i think we get the idea here but the site is fully responsive to work on every device or multiple devices and at any width i should say okay we can even check the responsiveness at the same time across multiple devices just to take a look very nice looks good nice all right so i just wanted to showcase this uh template across different devices because that is very important when working with any site you do want it to be responsive and you want it to look good across multiple devices so that is it for the responsiveness of the site the next section i will cover is is the site in webflow and the pages panel in webflow so here we have the website in webflow and to access the pages panel we'll just go to the pages icon here on the left and here we can see the different pages for the template so we have home beauty style food and home travel about contact and then here if i open this folder we have the template information so we have instructions and the instructions will have all these video tutorials section by section so you can you know if you need a refresher you need to reference a specific part of the template you can go into instructions and play that specific video to quickly get up and running then we have the style guide which i covered licensing just covers all the licensing for the images used in the template and the change log which tells you which version of the template you are currently using or what's the latest version of the template all right as of now it's only 1.0 as of its release then we have the cms collection pages we have the beauty post template we have the style post template so as you can see they're different designs we have food and home post template and we have the travel posts template okay and we have the authors template and the categories template those haven't been styled because they're more of a reference so that you can assign specific authors to the blog post and specific categories then we have the utility pages we have password and we have categories or excuse me we have 404 there we go so those are the pages for the template i've showcased all of these pages but they can be accessed here from the pages panel these cms collection pages are associated with the cms collections here so this icon here the cms is in reference to the webflow cms and if i click into each collection here are the different blog posts for the collection and here we can go in and review the different parts of each blog post i'll be covering this in greater detail in a later section but i did want to reference this quickly here because it is part of the pages panel or the cms pages are shown here which are in reference to the webflow cms okay so the next thing i'll cover is the navigator panel and how the site is structured within the navigator alright so to open the navigator panel uh we click here or hit z on the keyboard and this is how the pages and site or i should say the pages are structured across all the pages so we have the page wrapper and all the content is always going to be in the page wrapper and the reason for this is because it makes it really easy to copy and paste elements onto another page so for example if i created a new page i could simply go into the navigator or go into the home page go into the navigator select the page wrapper hit command c go into the new page go into the body and hit command v to paste and just like that i've pasted the entire page into a new page um so that's just an uh kind of an easy way to be able to copy and paste pages to other other pages i should say but you can copy and paste any elements from one page to another as well but that's just the reason why all elements are in a page wrapper after that we have the navbar the navbar is a symbol so if i change anything here it will change on all uh instances of this symbol on different pages and i have an entire section that i'll be devoting to to these symbols but just wanted to mention that there and then for each page we have the different sections so we have the hero section on the home page the blog section the category section and the contact page section then we have the footer here which is also simple you can double click and any changes made on one symbol will be changed on all symbol all instances of the symbol on the different pages okay so in each each section we have the element so in this case we have the slider and i'll showcase how to work with the slider as well in another section then we have the blog section and in most most instances we have the section and then we have a container and the container has a max width of 1440 and then we have the different wrappers inside of the container and the different elements for the specific page okay so same for categories it's in a container and we have the categories wrapper and the elements inside of each wrapper so you can go in and kind of see the hierarchy of the element you can click this expand all or collapse all button to expand the navigator or the elements inside of the navigator uh to get an idea of how the site is structured or how each page is structured every element on this site has a class name and i try to be as descriptive as possible to make it easy for you to know what element or yeah what element pertains to what uh or what class name pertains to what element on the page so here we can see we have slide overlay we have slide top category tag slide heading uh secondary button and so on and so forth which should help with accessing the different elements on the page you can also click on each element and it'll show here in the navigator you can pin the navigator by clicking this button here and then as you click through the site you can see which element is selected in the navigator which will make it easy to kind of find different elements on different pages so same thing with beauty page if i open the page wrapper we have the nav bar the footer the hero section beauty post section category section and so on if we go to style page wrapper nav bar footer hero section style post section and other posts section and the the style post section has the container and so on okay so just wanted to quickly showcase the navigator this is where you can access different elements of the page or you can click on the page directly and see the element in the navigator you can click into elements that are not binded to the cms so for example the about page let's see i'll go to the about page i can double click into this text and change this text here this block quote i can change any text that's not binded to the cms can be changed by double clicking and simply typing if an element is binded to the cms so what do i mean by that if i click on any element that's purple and we can see here that it's in a collection list these elements if i click on this gear icon it's getting the text from the collection list so it's binded to the collection list so i couldn't just double click and change the text and i'll be covering that in more detail in the cms section of this tutorial but just wanted to give a quick overview there i will leave video tutorials as well on how to use collection lists in webflow so you can have a better idea if you're new to webflow how to use collection list and how to bind elements within collection list so that's a quick overview of the navigator yeah just all the elements are here and the navigator is this uh this icon here so next i'm going to move on to symbols uh it'll be a quick section and i'll showcase how to use the symbols all right so let me go to the home page and for the symbols we have the nav bar which we can see here it's green and we have the footer okay so for a symbol if i change anything so let's say i had or i wanted to change the category so my category wasn't beauty it was fitness if i change that here in the symbol and i go to any other page we can see that fitness has been changed for every single page because this symbol is a is on every single page same with the footer if i double click and i change anything in the footer categories new name or something like this and i go to any other page even on the cms collection pages we can see that that change has been made i can go into here if i delete one of these links let's say i don't have a pinterest for example if i delete it and i go to any other page we can see that it's been deleted here and i can click again i can paste and i can re-add the pinterest link if i'd like and again it's changed for all pages so anything any changes made to one symbol in the nav bar or in the footer will be applied to all pages so that is it for the symbols and actually one more thing the symbol can be found here in the symbol section so if you did want to add the symbol to a new page so i can delete for example or i can maybe just delete all of this here and if i wanted to add a symbol i could go to the symbols here and just add the symbol click and drag and the footer and there i have the header in the footer on the page and i could add a section here place the section in between and add more content in here for a unique page i'll be using this new page to kind of showcase how to copy and paste elements as well but that is it for the header or the symbols within the site the next thing i'll be covering is the cms the collection list and the collection pages okay so let's go into the pages panel and as i mentioned before we have the cms collection pages and those are binded to the cms here so if i click on the cms we have the beauty post collection style post food and home post and travel post we also have authors and categories that we use as references within each post so if i go into a blog article if i click in here into a collection item we see here we have the name of the blog post we have the url for the blog post here we have the main image and we have the alt text for the blog post image so this is for accessibility for uh for devices that don't show images uh text will show instead so that the user knows what the image is about then we have the category so this is a reference to these categories here so you can add a new category here and it will show up in here so just as a reference if i click on categories we have travel food and home style and beauty you can add a new category and i won't do that now but you can add a new category and then select it from this drop down then we have written by so this is referencing the author's collection so you can add a new author and then reference it here then we have the blog post summary so this is a short snippet of the blog post and we have the blog post uh text here so this is the main body of the blog post and this is like the the main content for the blog post okay so anytime you create a new blog post you don't have to create a new page because that is what the cms collection pages are for so if i click on beauty post template and i click on the item right here we can see these are all the items within the collection list okay so i'll go ahead and create a new blog post so here i'll just create a new beauty post and i'll call this new beauty post i'll select a main image and i just have an image here it's a bit large you usually don't want images this large so i might replace this let's try this one that's a bit better still a bit large i usually like to keep my images under 300 kilobytes and then here i can write some alt text image of an abstract painting okay and then for the category i'll say beauty and for the author i'll say alice cora and then here is some text for the summary and here for the blog post text we can add images videos custom code lists as well as headings so you know i can add a heading so if i write heading i can highlight it and change it to any of these i can make it a link bold text or italic and i can make it a block quote as well if i'd like so this is a block quote then i hit enter this is some text and so on and so forth okay so those are the different uh fields within the blog post and after you're done creating it you can click create and now if i go into the collection page the beauty post collection page and i go to the new template which is new beauty post we can see the post here all right looks good so yeah that's it for actually there's a few other things so we have the collection list the collection pages and the cms uh yeah i think i covered pretty much everything i wanted to here you can change the name of the collection list by you know select selecting the collection list and going to settings and if i wanted to change this i could say you know fitness posts and it would change that here i would want to change the url here to say fitness and then save collection and done that looks good and then if we go to the pages we can now see it's the fitness post template all right so the next thing i'm going to cover is how to add a youtube video to your blog post so in case you have like a youtube channel and you want to add a video to each blog post okay so to add a video uh it's pretty straightforward i'll go ahead and use this new beauty post we created i'll go into the cms go into the new beauty post and here i'll go ahead and delete this i'll click the plus and right here we have the video icon we can also add an image if we'd like but i'll go ahead and click the video icon and i'll paste this youtube link that i've gotten from my youtube channel click the check mark i'll make it full screen and i can even add some text afterwards so this video is about using anime.js in webflow then i'll click save and let's go to that blog post and we can see it here so we do want to make this rich text 100 and this will be updated by the time this video is out but the the rich text now spans the entire um yeah container or max width so the post wrapper is 700 pixels and the rich text fills the entire post wrapper i can go ahead and preview and play and we can see the video here so if you have a youtube channel this could be a great way to showcase your video in each blog post you can also add images i'll quickly showcase that hit enter and click the plus add an image and we'll add this image here i can make it full width click save and just like that we have an image so the rich text is very powerful it allows you to add headings videos images block quotes and uh really create a a full article for your blog post so yeah that's how you add video in the cms uh the next thing i'll cover is copying and pasting elements to a new page all right so let's go ahead and go to the blank page i created here called untitled and let's say i wanted to create a new category and we'll call it fitness if i like specific elements from other pages let's say i like the beauty page and i want to copy this hero section so i just can hit command c to copy go to untitled and i'll just go into the body paste that in there and just move it below the nav bar and i'll call this fitness now in the fitness i want to go to the let's say the beauty page and i like how these cards are created here for the the beauty page so i'm going to hit command c i'm going to copy this uh beauty collection list wrapper or let's here let's copy the entire beauty post section so i'll just select it hit command c and then go to the blank page i'll paste that in the body and just put it under the hero section now this is the interesting part so if i had a new collection list and i'm not going to go ahead and do that now actually this might be a good thing to practice so let's go to the settings i'm going to go ahead and change this back to beauty post and beauty and then we're going to create a new collection list so i click the plus here to create a new collection and i'm going to call this fitness posts and i'll create the collection i'm going to add five items here just as examples and we can go into the settings and kind of add the different fields here as well but now we have that fitness collection list and yeah and we're going to reference it so if i want to create a new page with or a new category page that pertains to a different collection i first want to unbind all of the elements that are binded to the beauty collection list so what do i mean by that so we can see this beauty card image if i go to the element settings the image is being retrieved from the beauty collection list so i want to uncheck that and i want to uncheck the alt text as well we have the heading so anything that's purple is binded so or bound so we have the h3 i want to uncheck this here and now we can see it just says heading and we have the date here i want to unbind it and the link is also bound bound to the beauty post so now we have a fresh collection list i can go in and bind it now to the fitness post and we can see we have five here and now i can go in and rebind everything so i can select this image and i can say get image from the there should be an image here so let's see um there isn't so let's try that again i'm going to create a new collection i'm going to say blog posts and i'm going to say so let me let me cancel this for a second so beauty fitness posts let me just change the name here so i'm going to change this um to what's another i'm just going to say swimming posts or art posts how about that art post and change this here okay cool and then create a new collection and then i'm going to call this fitness or actually click blog post and i'll change the name here so blog post yeah it adds these different collection fields which is what i want so i'm gonna say fitness posts and just change the url to fitness create collection and i'll add five items here so now these items will have an image so again i'm going to go into the collection list and select fitness posts then i'll click on the image and i'll get the image from the main image perfect and then the heading i'll get the text from the name you can click in here and do the same thing from here right now i'm in the element settings for the published date i can say get the text from the published on date which i haven't published the site so there won't be no there won't be any date here as soon as i publish the date will will show up [Music] okay it's just taking a moment here and as we can see the date showed up i can change the format of the date to something else something like this and just like that we have the the blog or this category uh with these cards okay and if i didn't want these i could go ahead and delete them so now we only have these cards here uh if i only wanted to show three in a row here i could select the uh the collection list and i could say limit items to only show three okay and it'll be fully responsive on all devices even if i showed all items it's fully responsive on tablet mobile landscape and mobile portrait okay so that is how we copy and paste elements onto different pages if it is bound to a collection list you first have to unlink everything so just select it anything that's purple is bound or if it has the symbol here it's connected to the cms so you just want to uncheck go through uncheck it and afterward you can change the collection list to anything else and then rebind everything back okay and the heading get the text from the name all right so that's basically it that's how you bind an unbind element any element that's not bound is just a simple copy and paste so for example if i go to the about page and i grab this interest wrapper i can go to the new page and just paste that in here and we can see that it's been pasted right here or if i wanted to add the categories uh section you know on the home page i like this categories uh section i can just copy it go to the new page and um just paste that in there and put it below here i can delete this section here and just like that i have the categories section so if we open this we can see there's no elements that are bound to any collection list so it's just a simple copy and paste afterward i can go ahead and change the name of the page to fitness i can change the url slug and done okay so that is how we create new pages and copy and paste elements to other pages we used the symbols we copy and pasted elements that weren't bound and copied and pasted elements that were bound and if you wanted to change the the class name you could duplicate this class and call it fitness collection list wrapper just to keep things organized and to understand that you're using a fitness collection list here or you could leave it as is and just know that you're using the design of the beauty category page alright so yeah that's it for copying and pasting elements the next thing i'll go over is working with the home page slider all right so let me go to the home page and let's say you wanted to add more cards to the slider i'll go ahead and open up the slider here so it's in the hero section and if i open the slider we have the mask we have the different slides here and if i wanted to add a new slide let me go to the element settings here so it changes the slide i can copy and paste a slide and we have a slide here so you do want to you do want an even number of slides uh because on desktop this it shows two slides per page so here we can see we have an odd number of slides and then we have this blank space here on the right so i'll go ahead and copy and have two slides and then i can change the uh the blog post here so to change it like i mentioned before we want to unbind anything that's bound to the specific collection list okay and i think it's just the background and the link block so now i can go in here and i can choose a collection so i can say actually i want to collect select the collection list and it's still bound so something is still linked uh the category tag so i want to unlink this and the slide heading i want to unlink that so now i'll select the collection list and let's use that new fitness collection list and then i'll grab i'll select the background and say set and say get background from the main image then i'll select the heading get text from the name and the link block i'll say link it to the current fitness post and i think that is it and the category tag will say get text from the name or the oh it doesn't have a category for this post so we would just i'll say fitness for now but we would want to add a category field to that fitness collection list so we could reference the category here so we'll do the same for this slide so each slide is one collection list so here slide link block and we will unbind everything slide background and the heading the the tag here and the heading okay so now i can change the collection list to let's say travel and then i can get the background from the post image and the text from the category name the category tag slide heading from the blog post name and the link we'll link it to the current travel post so by selecting this purple page here for the link settings we can link it to the current travel post if we wanted to show a specific post we could say limit items and we could say set it to one and start at you know a different number so three you know five and it would change the the post okay and that's it so that's how we add more slides to the slider and now if i click on each slide it'll take me to the specific post we haven't styled the fitness post so i'll showcase how to do that real quick in this section so this could have been in the cms or the copying and pasting section actually i'll create an entire new section for this so the next section will be creating or styling a new blog post page but that is it for the slider that's how we add new slides it is in the hero section and you can open up the mask copy and paste slides and then change the collection list for each slide alright so next we'll be creating a new blog post template page okay so we created the fitness collection list in here so let's go to the fitness post template so right now it's a blank page and you know i like to for any new page we'll just add a div block and a page wrapper just to keep it consistent with the style of the site and in the page wrapper we'll add a symbol i'm using command k for quick find we'll add the nav bar and then i'll hit command k and we'll add the the footer symbol so we have the header in the footer and now it can be really easy to um to use any of the other blog post template styles so let's say i like the the style post template i like this how this looks i can just grab this post section now if i hit command c to copy and i go to the fitness template and i paste we see here dynamic elements can only be moved within the same collection list or collection page so what we have to do first is go to the uh the styles post and we need to unbind uh everything just like i did before so we'll unbind the category tag unbind the date and unbind the rich text so now i can copy the post section go into the fitness post template and i can paste that post section in here and i can rebind everything so for this i'll say get text from the post body for the heading i'll say get the text from the name for this i'll say get the text from uh we don't have a category for for this i would say fitness here and for the publish date i would say get text from published on and i would change the styling here to be to look like this one and that's it so if i go to every other page we can see it has that styling or any other post here and now i can go back to the style post and rebind everything so i can say get text from oh that's already bound so i'll say get text here from the category name the heading from the um the blog post name and the date from the published on date and i would change this here and that's it so just like that we've rebound or we've binded is it yeah binded everything back in the styles page and we've used this style for the the fitness post template and we can go in and everything's responsive and fits the style that we set for the style post template so you can do that with any of the other templates so the beauty post if you like this style you can use that the food and home template if you like this style you can use that or the travel post template if you like this style you can use that as well okay so that's it for uh copy or using a specific blog post template style on a new collection the next thing i'm going to cover is accessibility and alt text okay so accessibility in alt text it just lets screen readers know what the image is about if for some reason the device doesn't show the image and the way to do this is if we go to the assets panel every image that you add in the assets panel you want to go into the settings for the image so by clicking that gear icon in the upper right and then giving the alt text a descriptive text here um so here i have the text image of a hand holding a frame and so on and so forth for each uh image okay and if the image is not part of a cms if it's just been added to the page we can see that here it's going to say use alt text from asset so this image of the author if i go into it it's going to say image of the of the main author okay and you can read more about alt text online and how to get more descriptive with alt text i believe webflow has a great article on alt text that i'll leave in the description area below but yeah it is a great practice to add alt text to images for any image that's part of the cms if we go into the collection list we can see we have this alt text for blog post image collection field so this is where you would add that that alt text so you would describe the image here click save and then within the blog post template yeah or the excuse me if i go to the categories page and i select the beauty card image we can see that it's getting the alt text from the alt text for the blog post image and for images within the cms so if we have this image you can go to the settings yeah you can click on the image go to settings and then add your alt text here yeah you can add a custom alt text right here and i'll leave an article again i mentioned this before but to a webflow article that talks more about about alt text you do want to add alt text to all images on your site it's just good practice a good practice for accessibility and for devices that don't show images some devices will read out what the image is about and some devices will have the text will show the text as well or both uh regarding you know what the image is about alright so that is it for accessibility and alt text the next thing i will cover is seo or search engine optimization okay so within the site if i go to uh any of these pages here and i click on this gear icon we see we can add a title uh title tag and a meta description for the pages so here if i type in anything right up here is where it'll show me what the page will look like in a google search engine or any search engine we can also add open graph an open graph title and an open graph description for for things like facebook right to show to show the the article or the page in the proper way and we can add an open graph image url so we could upload an image here and then we could you know each image has a url so if i go to the url i can copy this url here and then for the open graph i can paste that image in here and we can see it appears here for the open graph you do want it to be a specific size i'm not sure of the size oh here it is 1200 by 630 so you do want it to have a 1.91 to 1 aspect ratio that's just something to note so you know so it so it will show up correctly on facebook and other social media okay so that's the open graph and the you know you can add your custom title and description or you can get it you can click here to get it from the title tag and description here i'll leave an article to um to working with seo and webflow it's a webflow article that covers this in more detail or covers how to add title and meta description and for the cms pages if we go into any of the template pages so let's go to the beauty post the title is being retrieved from the name of the blog article and the description is being retrieved from the blog post summary same from for the open graph title and the open graph description if you did want that to be different i would recommend going into the collection list and going to settings and adding a new field for the title and description it can be just a simple text field and then you can reference in the cms you can reference here instead of the name you could add a field and reference that specific seo field for the name and the same for the meta description so again you would want to add these fields in here by going to settings adding a new field you know plain text and calling it you know like seo title and seo description and anytime you write a new blog post you just write that information and then in the search engines uh you know you could have you could retrieve it from here and the search engines will show that specific name and that specific description same for open graph title and description okay just wanted to kind of repeat that twice because that's kind of an important piece to dynamic content it's getting the information from the collection list okay so that is search engine optimization also in webflow if you go into the project settings there's an seo tab and there's a few other features here as well like sitemap that you can submit to google or yeah the google search console for uh so that google will index uh your site a bit quicker okay so i recommend kind of going through all these seo settings again webflow has great articles on all of this information and it covers seo in great detail all right so that is it for search engine optimization the next thing i'll cover is interactions okay so let me close this tab here so throughout the template we can see we have nice interactions you know the hover effect here on the slider we have this nice little movement to these cards uh we have this movement to the social media we have some hover effects here we have this nice hover effect to the these categories and so on and so forth the beauty page has this nice hover effect style page moves up other post moves up as well food and home we have this nice pink overlay and travel the image kind of moves in like this and probably one of the main interactions is the newsletter on the home page and i'll cover that in another section on how to remove the newsletter but i'll showcase all the interactions uh now and how to access them so this is an interaction as well okay so let's go to the home page and let's take a look so to see what elements has an interaction you can expand uh the navigator you know click this button here and any element that has a lightning bolt symbol is has an interaction applied so we can see here for the slider collection item we have this lightning bolt symbol and now if i go into interactions we can see it has this mouse hover interaction and we can quickly see all the elements all the interactions within the the uh the site or the template so we have the photo food and home card hover in food and home card hover out beauty card interaction style card interaction travel interaction other card blog card social icon hover category button hover and slider card hover in and the newsletter pop-up so right now we're focused on the slider card hover in so if i click it i can go in and see what has been applied we applied a scale and a rotation to the card and here is the duration and the easing here as well and the different properties for this interaction and on hover out we have the slide card hover out and it just reverses that animation so i'm not going to go too in depth on how interactions work again i'll leave an article to the webflow university that covers interactions in greater detail okay so we can just go through see what else has interactions all the sliders have the same interactions this blog card has blog card has an interaction as well blog card hover in blog card hover out if i go to the beauty page we can see that the beauty card wrapper has the beauty card hover in and the beauty card hover out i am applying it to any card that has the class beauty card wrapper so i only have to create the interaction once and apply it to this class and the interactions are being applied to classes within the interaction trigger so you only have to create the interaction once and any elements that have the same class name structure will have the interaction applied so as we can see we can apply it to all these cards and the interaction shows okay so that is the interaction they're they're all described here in detail so you can just read what the interaction name is and what and you can get an idea of what it pertains to within the template and most interactions are only applied to desktop and above because on tablet you don't have that hover function so on tablet it's just touch so the interactions aren't necessary on touch devices and that wasn't uh that was possible by unchecking tablet phone and landscape phone landscape from portrait for most of the interactions here one of the main interactions is on the home page and it's the newsletter so if we you know if we go to the home page and we go to the page trigger this interaction is not applied to a specific element but rather to the the page load so when the page loads we if i click on it the newsletter pops up so initially the newsletter is not visible it has a display none property but if i click on flex we can see the newsletter and we can change the styling here but after we're done changing the styling we want to set we want to say set the display setting to display none and um and then in the interrupt in in the interaction let's go to the page uh load and for the interaction the opacity is initially at zero percent then we show the uh the newsletter by setting the display setting to flex and then the opacity goes to 100 so then we can see it and this all happens after a delay of 10 seconds which is right here with the newsletter hide and show uh timed action and then if we open up the pop-up newsletter wrapper we have this newsletter closed text that also has an interaction and if i click on it we see we see it has a mouse click interaction so on click on first click and second click we're closing the pop-up so we set the pop-up to an opacity of zero percent duration of three seconds easing of ease and then for the hide show we set the display setting to none so that it hides the newsletter and it doesn't appear again so once the user clicks close it doesn't appear again unless the user reloads the page yeah so with that said um that's it for the pop newsletter and the interactions uh the next thing i'll cover is how to remove the newsletter in case you didn't want it for the template okay so i probably could have covered this in interactions but i just wanted to give it its own section because no one wants a newsletter that's kind of unwarranted or if they just don't like the idea of a newsletter pop-up they can you know you can just remove it from the site and basically to do this since it's already hidden all you have to do is go into interactions and remove the page load interaction here by clicking the trash can symbol and that's it that's how you remove the newsletter if you really did knew you weren't you were never going to use the newsletter you could also delete it from the home page and it would not show up but that is how you remove the pop-up newsletter um if you did want it just leave this page load animation here and if you wanted to style it just select it set the display setting to flex and you can style it and everything here and then then once you're done styling it you can you know you can change the background and all that once you're done styling it styling it you can set the display setting back to none all right so that is removing the newsletter the next thing i'm going to cover is the style guide alright so let's go to the style guide page which is right here under template info and the style guide just showcases all the colors used for the template these are global swatches so you could change any of the colors here and it would change across the template here for the headings these are the different headings used in the template if you did want to change the headings you could just select a heading go to all h1 headings or the global tag for the heading and then change the font for the heading here same for all the other headings you want to change the global tag the html global tag to change the headings across the entire template this is the paragraph tag you want to select all paragraphs and change the text here then we have the primary and secondary button if you change it here it will change for all the buttons using the primary and secondary classes in the template and then rich text this is what the rich text will look like so essentially what your what your blog posts will look like with the specific with the the specific heading styling and the paragraph styling we also have the block quote here and the link text here as well and this is how the the unordered list will look and how the ordered lists will look alright so just to reiterate if you are to make any changes to the headings in the rich text you want to make them here under headings and typography just select the global tag and then change the heading so this brings me to my next section which is customization so rather than just talking about it let's go ahead and quickly run through customizing all the colors for the template and a few headings alright so we're in customization so i'm going to go ahead and change all the colors for the template i'm going to go to a website called coolers.co and we are going to pick a color palette so let me click on explore and i'll go ahead and pick a color palette here let's use this color palette right here and i'm just going to try to match these colors with the nearest color within the template so for example this beige i'm going to copy it and i'm going to use this lighter antique white color here so i'll select it then i'll go to the color here i'll select the color then here we have the global swatches so you can see it matches these colors here the global swatches are right here then i'll click this pencil icon to edit the swatch and i'll paste that color in there and now we have this new color i'll go back into here and then i'll select this yellow color and i'll replace it with this color here this wheat color so edit and just paste that hex code click save and then let's use this green color and i'll replace this green color i'll edit it paste that color in there click save then we have this red color and i'll change it this color here this light coral make it that red click save and the last one is the pink so the pink will be blue so i'm not sure how this is going to look but we'll try it and click save okay so just like that i've changed the color palette let's go ahead and change the headings let's change the all h1 global headings to a different heading let's use um palatino a little type that might be a nice heading actually let's see let's use let's use pt serif and i'll do the same for the h2 heading change it to pt serif and h3 i'll change it to pt serif for the paragraph i'm going to leave the same and that's it so we can already see the the button color already changed now if i go to the home page we can see the font is different the color of the tags is different these arrows are blue the green is different pretty much a lot of all the colors are different on the site the blue is not really working because you know that's a it was a lighter color for those different sections um but let's see here it's all preview and all the pages are different different colors all right looks good so we can see we have all those different colors applied to the site all right also this pink does need to be bound to the global tags or global colors but yeah that's how we change the headings and the color for the template so you can match the colors to your specific uh style for your site okay so that is how we customize the template pretty straightforward it's done from the style guide and um yeah you can do it with a few clicks you know pick another color palette change the global swatches here change the headings and you can even change the paragraph text i can select all paragraphs and i can change it to you know let's say let's say open songs if i wanted to it is kind of an overused font but you know you could add your own custom font and web flow and then change it to that font in here so i'm going to go ahead and change the font back to enter okay and that's basically it so we can see the headings changed and just as an example if i go back in and change the paragraph i'll just pick like a another one here let's say system ui for example and now the paragraph has been changed here in the rich text to system ui okay so just to reiterate um you do want to style the global classes for the headings and paragraphs and not apply new classes otherwise it won't be changed across the template so select the heading go to the selector select the html tag all h1 headings and so on and so forth for the different headings and the paragraph for global swatches select the color go to the swatch edit it after you enter the new color click save and that color will be changed across the entire template all right so that is it for customization um the last and probably the most important part of the template will be support so i'll cover that next in the next section alright so for support i know i covered a lot in this tutorial there is a lot to this template but it also means that this template is really robust and can achieve and accomplish a lot of things that a content creator would be looking for as far as writing blog posts so i know i covered a lot so with that said feel free to contact me at any time if you're having any issues with this template if you purchase the template and need help you can contact me via the email on the template page or you can go to my personal website webdev4you.com and go to contact and write me a message here i will respond as soon as i can which will be very quickly if it's regarding a template and the other thing i want to mention is i provide a super chat or a live stream every monday through thursday from 12 p.m to 1 p.m central time so if you're having an issue with a template and you need immediate assistance or you want me to help you live or right away just join my live stream uh any any day monday through thursday from 12 p.m to 1 p.m central and i'll be helping you live you get to see my face and um you know templates get high priority so as soon as a message comes in about a template i immediately address that first unless i'm really deep into a specific topic then i'll get to it within a few minutes but um that's a quick way to get help with the template if you're having any trouble with it or you need help with how to use it so yeah feel free to contact me via the contact page join my live stream on my youtube channel and you can also contact me via the email that's provided on the webflow template page so yeah i definitely want to help with the template i know there's a lot to it i'll be leaving all these videos you know categorized in the instructions part of the template so you can quickly you know just watch the video and it'll it'll start right at the section that's intended and with the new youtube video feature i'll be breaking up the video into sections so you can just click in and watch the specific section that you need to understand how to use a specific part of the template and i'll leave webflow university articles that goes more in depth on how to use different functionality and features in webflow like the cms collection lists and things like that as well as alter alternative text and just anything related to webflow in general so super happy with this template super happy with what i provided here hopefully it was helpful i definitely want you to to uh to be able to use a template in a great way so i think i've talked enough thank you so much for listening thank you so much for purchasing the template and again any help reach out via the website my live stream as well or the email on the webflow template page thanks again and have a great evening a great day and uh yeah check out webdev4u.com and many more templates to come thank you [Music] you

Channel: WebDev For You

Views: 285

Keywords: webflow, webflow template, webflow blog template, website blog template, lifestyle blog template, blog template for webflow, lifestyle blog website template, webflow website template, webflow cms, webflow content management system, creating blog posts in webflow, webflow template for content creators, content creator template, beauty blog template, style blog template, food and home blog template, travel blog template, webflow template tutorial, webdev for you template

Id: OoxJApgbwmw

Length: 72min 24sec (4344 seconds)

Published: Tue Nov 16 2021