Webflow Advanced & CMS

1. Course Introduction: To Webflow advanced course. This course will introduce you to the world of dynamic pages created with the help of Webflow, as well as its more advanced features. You've probably already can predict the basic web full course. This one is it's continuation. We will extend the possibilities of the previously created websites to work with dynamic content from CMS module. This time, you will learn how to create complex websites such as blocks and product pages, and websites that can be edited by your client directly in the browser. In the course, we will look at some important advanced aspects of working in Webflow. For now, our project contains only one page, but we'll create a style guide to generate new pages of our website quickly. Later on, you can iterate on this idea to create even more advanced design systems. Secondly, we'll focus on the CMS. Workflow allows you to create complex data structures that run as a database. First, we will define the structures for the blog. Workflow will automatically generate a number of pages for us, where the use of dynamic data comes down to a few clicks. Subsequently, we will prepare the entire websites to use such a model data structure, create a complete blogging system. Finally, I will show you how to use CMS to manage the content of the website from the browser level which your client will be able to use and adding dynamic content that add new entries. We can do it all without coding. In addition, I have found a number of lessons that will allow you to add business logic to your website, but without the need to use several languages, will build a search engine based on elastic search, the best open system for indexing and returning results. And we'll also create a number of useful integration is based on a no-code solutions such as Zapier or integument. Nowadays you can build advanced functions previously reserved for back-end and front-end developers. And you can do it without a single line of code. So who will benefit from this course? First of all, those of you who already know a bit of Webflow, if you can build layer, but you want to use CMS and dynamic data as well as a bit more systematic approach to creating websites in Webflow, I think this course is for you. This material requires a base foundation of Webflow. So I do recommend you taking part in my Webflow basic course first, this course is a great way to create your website, NDP of your product or offer your customers dynamic phages and CMS combined with no-code tools, that all will take your Webflow projects to the next level. Let's dive into first lessons. 2. Skillshare assignment: Once again, thank you for taking my Skillshare class. This is the second class on Skillshare that I have on Webflow. The first one is pretty basic. However, if you lack basic skills, I strongly encourage you to check out the Webflow basic course and then proceed to this material. It's very important that you work along with me in the course. And I have two proposals for creating your own course project. The first one is just following along. All you need to do is just watch the videos and then repeat the actions that you see in the video. In Webflow, I think it will give you a pretty solid understanding of how to create a website like this with CMS and style guide and many, many more advanced features. This is a great way to practice your skills. And also, I'm giving you some of the resources that you can use and I just link them in the comment to this lesson. This will allow you to create a nice website that's dynamic. And I suggest you submitted as course assignment. However, if you want to, or skills to the next level, I encourage you to try out and create your own project using the same skills that you will learn in here. For example, creating a style guide and then working with CMS and also giving up some integrations, maybe with Zapier or integra Ahmad having an assignment like this, a practical project may be for a friend of yours or maybe for someone from your family, would be really taking the skills to the next level. And I strongly encourage and recommend you to do that. And obviously, please just submitted as course assignment. I'd be really happy to see what you've done with Webflow. Thanks a lot, and I'll see you in the next lesson. 3. Styleguide Setup: Hi guys and welcome to the next lesson that this is the start of our style guide lessons. I'm going to show you how to create a style guide so that we can easily reuse elements and components across different pages on our website. And this is super useful, especially if you are creating a multi-page website or you have some specific brand guide and brand book, and you want to stay consistent with the components, colors, typography, so that we create a separate page with the style guide. And from this page we can define components that we can later on use on different pages of our website. And this can also be a starting point for entire design system that you can create for your projects. This can be a design system for one brand and the different projects that you're going to create for this brand. For example, different landing pages. But also you can think of a framework for yourself to work in Webflow that will enable you to easily create projects and reusing some common structures and components. This is something that I will leave out of the scope of this course because this is a bit more advanced topic, creating a design system. But just so you know, I have a design framework of my own. It's called system flow dot co. And I use it with every new website that I create. And later on you can checkout system flow dot code to see the examples and free tutorials on how I do it. For now, we have the style guide, and this is the simple page that I've created in the previous course. Now it contains only one component. This is sap many block and we've created it so that we can reuse it in the sub money. But this is a great start for our style guide. So style that should have its separate page. And on this page we're going to organize components, but not only components, because we also want to create some design tokens that you can use later on. And those design tokens might be typography. So all the headers and navigation, as well as colors and the other elements that we'll use on various pages. This is exactly why I want to organize this style guide page a little bit better so that I have a navigation component. Let me add the nav bar. And this navigation component will contain the information in the links that will scroll through this page. And let me encore different sections such as typography and colors and components. For now, I'm going to add an image here and change the logo. And then let me go to this entire container. I'm going to add another div look for it and put the brand elements inside so that I can have the brand elements and enough money inside of the block. And this is one common practice I use with navbar because now this debug, I can rename it to menu and use display flex for it to center it both vertically and horizontally. Now let's reorganize the elements so that I have logo to the left-hand side. And for more complex design systems and style guides, you might want to use not horizontal menu, but vertical menu. That's The left or to the right hand side of your style guide page. But for now, I'm just going to use this horizontal menu and also change the element positioning for the base class that will be fixed so that when I scroll the page, the menu stays in place and it's fixed to the top of my website. And then I'm going to create another section, just a title section for my style guide so that it's neatly organized. Remember that you're going to revisit staggered from time to time as well as your client probably, or maybe the design team that's also using the style guide or design system that you've created. So it's always really nice too. Organize it into some kind of structure and add some additional captions and sections containers so that it's well organized. You can navigate through this tile guide, especially when it evolves into something bigger, such as design system, this would be a lifesaver. So what I'm doing right now, I've created the main section and then inside I have container. Inside of this, I'm going to create another technical d-block, and that would be a style guide hero. And in this div look another structure with a class texts. I'm just going to use text wrapper. And in here I'm going to use a heading and also a paragraph so that I can have just a description of what's inside this style guide. Let me use some margin in here. And this style guide hero would have white background as well as some shadow. I'm going to add it in a second. Let's add the border radius as well and some padding inside of this container to neatly positioned the heading and the description. That's 44.5 pixel margin. Now let's select the container and change its size so that the width of the element is bit bigger. Let me have 12 AT, for the max width of this container. And I want to position to center position elements inside the text wrapper. So let's select the text wrapper and for the spacing of texts rapporteurs, this little icon to the right hand side that will let you center the elements inside of a div tag. So let's click on it so that we have auto margins to the left and right. And now if we change the width to, let's say 50 percent will have it centered. Let's align the text center and let's change the name to style guide as well as the description to kind of set the goal of our style guide. But this is a typical structure that I would use here, and this is pretty versatile. You can copy and paste it wherever you want and you have elements nicely positioned. Now let's add some shadow. That's going to be 20 distance and 30 Blair. But let's change the color so that it's maybe five or 6% opaque. And now it looks pretty good. That's the beginning of our style guide and the structure that we have with style guide hero section. That's going to be pretty unique, but we'll have such structures so that we can copy and paste them all over the place. I'm going to just remove the class for now. The base structure would be Style Guide section. And just remember not to apply many styles to this tigers section itself, rather to its containers and deep looks inside so that we can easily copy into change the name of the classes that we have for this section names. And now let's create the text wrapper inside. I'm going to move heading over here and make it h, h2. That will be a description of the first section for our style guide. So for example, we're going to start probably with typography or colors. And we're going to have the name of this section here. So let's rename it to typography and also have some description. So typography can help create clear hierarchies and organize information and, and guide users. So we have a little bit of extra information on top. And also in the menu, we can start mapping this particular sections so that we can link it with an encore. Let's select the style guide section, press D on the keyboard to go to section settings. And as the ID, I'm going to use typography. And now let's make sure from the menu I also linked to typography section. Let's go to the settings and choose the section that we want to scroll to when user clicks on this menu item. The second section can be about color. And the third one, I'm going to rename it to components. Also, you can create a lot more sections. As I said, when this evolves, you might be willing to just move it to the left-hand side, but for now it's okay to stay on top. I'm going to use sections, and that's pretty much it for the simplest target that I'm going to create four for this page. Now in the container, I'm also going to create one more element and that would be subsection, you might say. So that's going to be a heading H3, let me give it a name style guide. That's going to be h freeze tag for example. And we're going to move it into this container so that it stays in here. And also let's change styling a little bit. We need to change the font properties. I'm going to use DM Sans. Let's use 400 Normal in here and change the size to 16 pixels. But I'm going to create quite a big line height for this. It's going to be one line, but I need this bigger box so that I can apply some decoration for now Let's first capitalize it. And also I want to create letter spacing of two pixels. And now I'm using this bigger box in order to apply a border, border bottom. So I set it to one pixel border bottom and solid border with this midnight blue color. It's now applied to the subheading. So I have some kind of like subsection here. And for typography, for example, I can use it for headings. X sub section would be for body text. Next one for captions. I think you get the point. So it's now easy to use this style guide sections to just come on C and Command V, copy and pasted and create multiple different sections of this target. We're gonna do it in the next lesson. See you there. 4. Typography: Hi guys, welcome to the next lesson and let's create headings first. And I just tried to make it sound exciting, but it's actually not. Let's create first heading, copy and paste it a few times. I'm going to create six different headings. You can create only free and, or four or five, whatever you have in the design. Now let's change the heading types to up to age five. And also I'm going to copy and paste once again and creates this special heading. I'm not going to use H6, but instead, let me create a special H2 that I'm going to name section heading. And this is going to be like an extra a h2 heading with an extra class that I'm going to use throughout my layout. Now let's change this timing for the headings. And in order to do so, let's select the first one and let's go to the selector and select HTML tag selector. That would be all H1 heading. So we want all H1 headings to look pretty much the same. And what we want to change here is Typography settings. So we have Sarah display and 400 normal 5461, because accordingly to size and line-height, we also want to set the margin bottom to 10 pixels and maybe change margin top as well. Now let's go to the H2 heading settings and we need to do the same here. So I'm basically consulting with the layout. I have the XD file open on my second display and I just check whether those values are correct. What I need to change here is in topography settings that I changed the font to the m Serif Display. And also let's apply for hundreds normal weight and change the size to 38 and line-height, that will be 44. So this way we are going to create a boilerplate template for all of the H2 headings. And I'm gonna do it for having free change this ties having, for having five and the special heading that I've created. Now, another approach for headings might be not using the H1, H2, H3 and this HTML tags. Instead, what you could do is you can just apply some classes, for example, Heading 1 class, heading to class, having free class. And then it won't be necessarily dependent on the tag that you select so that you can apply different styles. This is just another approach for creating a style guide with headings. You can use this All H4 headings for example. Or you can just create an extra class. And thanks to this, this gives you a little bit more flexibility in terms of SEO because then you just apply H4 class, but underneath, you can change it into H5 and H6, H1 if you wanted this to be more prominent for search engines and for Google. But this is just a side note as I'm changing these values because this is basically the same. I'm just checking in the layout. What kind of values do I have for spacing and typography? I'm not changing any anything else in terms of CSS. So I'm not changing positions and sizes. You know, I'm just manipulating with spacing and typography and I tried to stay consistent. With this, CSS properties only changed for the text. Now this special section heading is going to be the answer of this play for a 100 normal and then 46 and 56. I'm going to use it in some on some occasions, it's a little bit different than the H1 and H2 that I have. And I guess now I have all the headings I need, at least the ones that I had in the design file. So I can select, copy and paste another H free style guide heading and change it into paragraphs. So we're going to use one style for paragraph, sometimes for different projects. I use different styles. And I have, usually I have a three as so large, small, and medium. And I can then manipulate the versions of the paragraph. But in this case we have pretty simple layout and I'm going to use only one paragraph style. Let me adjust the margin. I'm going to set it to 18 pixel margin bottom, and also change the weight of the font to 500s medium. And the rest of the properties I'm going to leave as they are because they are set properly for the entire document. In the previous course, I just selected body element and for both the old pages tag, I've created a stylus with the ampersands and the correct size and height, the same as I have in my paragraph. That's why it's now okay. I've tweaked a little bit this H free style guide margin bottom so that it looks better. Now I can copy it and paste to have captions below. And I'm going to have different versions of captions. I already have them in my document so I can scroll through selectors and search for captions. So I have captions for author and header. Let's start with the simple caption that I have. And you can create those types from scratch. Or if you've already created some captions, ties in the layout as we did in the previous course. I'm just going to use this classes and actually let's rename this caption so that they are the same as the name of the classes. So we have captured and caption beak and also caption author. This is a bit different. Let's select the caption 40 author and 40 header as well. So we're going to have all the captions in here. So either you can collect elements to the style guide page or you can create them from scratch and apply some styles. Now let's have another style guide header and let's give it a name of reach texts. So last element that we're going to have in the style guide is reached. Next element that we can style pretty much differently than all the other elements. Page reached x is super important for us because this is the structure for the content of the article. So we'll have reached text elements, reached x dogs in all of the blog articles. What's pretty unique for the rich text element is that you can press return inside and you'll have this little plus icon. And the same goes for the editor for people who just read articles for your blog. And then you can embed some elements, create a least ambit, a video or an image. Let's click on the image and an image inside rich text element, as you can see, it has some additional options. So we can change the position of the image. We can tweak some more settings. For example. Move it to the left from the text or to the right. Or we can even go further to explore some basic size and Link settings. We can check the size of the image, probably need some compression, for example, using image opt-in first, then the position is here. And apart from this standard position that we had, we also have this size. For example, we can use Custom Size and set it to be 30 percent of the width of the original image, like so. And we can change the values from percent to pixels as well. We can also add the link and everything is available from the editor. So for people who just add elements to your CMS collection. So pretty cool, but also all the classes here, all the rich text classes are available for you to tweak and change. And you can even create this nested structure of classes. So for example, style only the paragraphs that are inside of the rich text element. This way, the content for your articles can be entirely different in terms of styling, even though it contains the same elements such as paragraphs as the entire page. So you have a different captions here, you have different headers, different paragraphs. And for the entire reach text element, you can give it a class name of, let's say block article. And this is like a separate structure inside of our defined structure of HTML. So this is like another document nested in one document. So for example, if you have H2 headings here and we've already determined this tiles, those ties for H2 headings would be inherited, okay? But here is the option to nest this H2 heading selector inside of block article. So if you use this function, you have all H2 headings style differently when they are inside block article. So we can have different font size. For example, if we change it to 36, you'll see that the headings hasn't changed in the main document. Even though we're editing this all H2 headings. But now we're changing this only if this is nested in the rich text element. This same we can do for paragraphs. That's like paragraphs. And then when those are nested inside of the block article reached texts, we can change the styling for paragraphs the same we can do for figures, for captions, for images. And let's select all figure captions when they are nested in block article. That's changed the color slightly. Maybe let's change the font size and font weight as well. And this is all independent from the document structure that we have. And this kind of makes sense because article itself is kind of different entity than our document. So we, we might want to style, for example, or all images differently. Let's say we want to add a border radius only for the images that are inside of our blog articles. So inside of the rich text element and all the other images, although we are using HTML tag, will stay intact and we can style them differently for our UI, for the website UI. So this is it for the typography. See you in the next lesson. 5. Working with Color: Hi there and welcome to the next lesson. And in this one, let's talk about colors. So here we have the NovaLink to color section in our style guide. This might be a simplified version of style guide, a beginning of a design system. And I can't imagine it missing colors. So now let's create another style, the title and style guide, H free, so that we can change the typography to color and create colors for text for typography, as well as for background, as you know, and CSS. We have separate properties for above background colors and text colors. And this is one approach on how you can change those colors and define them in Webflow that you can easily use them and reuse those classes that will create later on. So here we have actions and for background and text color, I've created separate sections. The thing is to create a separate classes for both background colors as well as text colors. And in this background color class, we'll also define text color that matches the background. This is the approach that I usually use for simple style guides and for more complicated ones, I usually go with separate classes for all the different colors, where I have separate backgrounds and separate text colors. Either way, what I'm gonna do right now is create a color block. And this is just for styling purposes, for the style guide itself, so that our color looks nice here and can be easily found in this tile guide. And in addition, I'd like to create the section that would contain both the name of the color, the color itself, its corresponding text color. So contrast color for the text as well as the hex value. So now I'm just creating this place holder for color. I've given it the name of color block, that's the class. And it has some border-radius and border. And I'm going to add two textbooks to the left and right-hand side. I've made it to be flexbox, so I can easily distribute those with some sort of padding to the left hand side, I'm going to add the name of the color. And to the right-hand side, there will be the hex value of the color. So when someone publishes this style guide and just browse it on the web, it can be easily copied, both with the hex and the name. So this is the color block. So as I said, right now, what we want to do is create separate classes that we can apply on top of anything that should be, I should have that color in the background. So we're going to create another class and that would be, for example, brand one color or brand one background color, bg. But if we created like this, it's going to be a combo class for the color block. It means that for any particular element that we want to apply this class, we'd have to first set the color block class because it would be the brand 1 BG would be nested inside of this color block as a combo class. So that, that is something that we don't really want. I'm going to delete this class. I'm going to create brand 1 BG without this first class. And now I can change the colors. So I'm going to change the background color. To my midnight blue color. This is brand one color for me. And also I want to change the text color to corresponding color that would be applied for the elements that has this background color of brand 1 so that I have contrasting text color. This is really not necessarily, you can just skip the text color and define it separately as a separate, but I'm just simplifying here. And now what I'm doing is I'm going to delete this class first, apply this color block class that I've created for border-radius and stuff like this. And then I can apply this as global combo class so I can use brand 1 BG on top of that. This is not a combo class for color book anymore, so I can apply it to whatever I want and I can apply it on top. So this is the way I'm going to structure things in the style guide in terms of color. And the same I'm going to do for text. So I'm going to use brand one text as the name of the class for my brand one color. Now I can change the color to midnight blue to my brand one color. And for the naming convention, this one is really pretty simple. If you want to create something more sophisticated or something more systematic, probably you want to start with, for example, C or color than T or text and then give it a name, for example, use brand 14 colors. But we're creating really simple style guide. I think that's okay for now. And you're going to just develop your own style in terms of naming the classes and the convention that you'll use here. So this is pretty straightforward, I guess, in terms of color when you're creating style guide, I usually go with two separate sets of colors, one for background and 14 texts. And I create separate classes so that I can use those classes anywhere for background and text. Now, for this class, if you want to create brands to BG, you have to first delete the class, then create brand to BGN. Now I'm going to use another color from the layout that I have. Let's paste it in the background. This is light blue color. Actually, you can't really see it because it's the same color as the background of this target page. But this is our brands to color, bronze to background. And now all I need to do is just create the appropriate text color for this particular element. I'm going to just select midnight blue and I'm going to rename this in just a second for this watch. But now I have this structure for brand to BG. I have the text color as well as background color. So this is one approach for a different one. You can just apply background color separately to the separate class and test score two separate class. Now, what I'm gonna do is use this structure to create more kilohertz. So first I'm going to delete this class, create color block and apply brand to BG. And then I'm going to just copy that over and create more color variations, color combinations for my colors. That's going to be brand 3 4 backgrounds or brand 3 BG. And again, I'd have to use the background color as well as text color here. And also I want to mention the swatches. So right now, let me paste the hex value for the third color. And this is this light green color. And it's not present in this pushes just yet. So I need to add it because I want all of my colors to be present in these waters so that I can either use a class later on and apply it as a background class or a text color class. Or I can simply select it from the swatches. So let's give it a proper name. It's going to be capital name, capital letter brand 3. And by the way, let's rename our other colors. This midnight blue should be our brand, 1, and the light-blue color should be brand. So that we have colors mapped to the swatches as well as we have them in separate classes. This is the most versatile solution because I can use either swatches or I can use classes. And once I changed the color in this swatch, so I added this watch, it will automatically change it throughout the whole website because the whole website is using this watch, but on top of that, this class is using the swatch as well, so the color will change accordingly. Now I can create more texts classes. So for example, brands to tax or brand free text. And I can easily apply this color from swatches. I don't have to copy and paste the hex values. I want to make mistake that way. So always easier to add your colors to swatches first and then maybe on top of that, create the appropriate classes. Also, I have the hex value that's copied to the right hand side. So when I publish the style guide, you can easily copy the hex value. Now, let me speed things up, thanks to the magic of the video, I don't really have to waste your time until I just copy and paste the same and do the same operations for the other colors. So here we have seven different colors. It's really a lot. So usually I use primary and secondary color, so two colors, maybe one more, but I've added a palette of colors that you can see how it looks with appropriate hex values. I've also added those colors to my swatches in Webflow. And also on top of that, I have error warning and accept state colors. So in user notification, I can use this color warning, BG, BG. And then we have those texts classes. We have color accept texting and error. So I can stay consistent and add those colors to different states of my application, different notification for the user. And this is the base color palette that you'll be using in your project. And depending on whether you want to create an extra pallet for dark colors and white and black colors. You can do it here. Or you can just use your gray color scale in swatches instead of this time that So usually I added to the style guide and I end up with five between 510 colors, ranging from very light color to very dark color. It might be black or white and some queens. Or it might just be, you know, light color and dark color and few in-betweens. So right now, I'm adding those in-betweens as well as my white and black colors to the Swatches only. And sometimes I do it like this. Sometimes I create separate classes if I want to use them extensively throughout my website and add them to style guide as well. So this is it here we have different colors that we can apply. Let's reset this one. And I think that our color structure is now ready. We have everything set in swatches as well as at least the main colors. We have them set in separate classes. We have this dark, very dark black color and very white, light white color. And use it for our UI, maybe some backgrounds of the elements because this is just the swatch. And basically that's, that's, I wanted to show you about. Colors are reductionist, ready in the style guide? And let's proceed to the next lesson. Thanks. 6. Components: All right, So it looks like in the previous lesson, I made a small mistake. So I have this staggered section that we have both color and text typography in. So I need to get rid of this element, change the container, create and copy entire staff at section and throw away unnecessary elements so that I have two elements. And here's the color section. Here we have the typography section. And okay, this is what we need because for this section we need to give it a name. It won't be topography, but color here. And now let's link this to the specific section. We need to link it to color. And I think that we're almost ready to create a new section. So let's create a copy of this. Delete all the elements from this container that we want really need right now. And let's create another section, that one will be four components. So let's go to Standard section and for IB, going to change it to components. And let's quickly linked it in a link it in the menu. This is going to link two components. Here we have it. Okay, So then we change names. We have this heading 2 that will place components inside and we'll have some information about what the components do on our sides. So these are some basic elements, building blocks for our website, for example, buttons. So let's create the first section, four buttons. And if we go to our homepage, let's explore what we have here. We have some buttons in there, we have some structures. And if we select the element, you can actually see that this is a component in the Webflow. And there are some reasons for using components in web though. And sometimes you might be willing not to use components but still put something in the style guide, but just use the class. So for components, you have all this override fields that you can enable for user to change, for example, in the editor view. And you can make overrides to the instances of master components. So this is pretty powerful concept and I explained it in detail in the basic course. But on the other hand, you can think of components as something that's reusable. And those don't necessarily have to be symbol slash components in Webflow. Because if you take a look at this feature block class, it's universal enough to carry information about the background and all the things that will enable you to create this kind of box, this kind of card. So you can easily reuse this element based on the class only. So it's really up to you to create components or just work with classes. Ultimately, if you want to make some changes to components outside of the scope of the overrides that you create. You just unlink the component and then you apply changes to the classes. And still, if those are CSS changes, it will be applied throughout the entire website. So what I'm saying is that you don't really have to think in terms of Webflow, of everything being a component here, because you can easily use classes. And just remember that classes that are used throughout the entire structure of the document will change accordingly or on each of your pages. Remember that you can always add the component on top of a class. Then you have the power of the components so you can create override as well as you can the nest other components inside this component. And also you can use these components menu to insert the components. So if you go to two components, it has a separate icon in the menu right now in Webflow. But if you go to components, you can simply click on the component and it will be automatically placed into your layout. However, if you want to copy and paste elements that are only based on classes, you'll have to find this element, for example, this button, and then you have to command C, copy it, then base it on the page that you want to use it, for example here. So there are a lot of different advantages of using components. But there is one disadvantage if you want to edit it apart from the overwrites, you'd have to unlink it first. But this is, I guess the only disadvantage and you can easily leave with that. So here we have different buttons and now I'm going to create another section. And then this section, Let's maybe use this feature and blocks and copy and paste all the blocks that we have on the homepage. I think those can be reusable elements as well. Before I copy and paste those elements, Let's go to feature block and let's create a diblock inside so that those can be neatly organized, like colors. Let's give it a class component wrapper. And this component wrapper will soon get some paddings or markings. But now we can copy and paste all the feature blocks that we have on our homepage or just one feature blog because it's pretty much similar, but I'm going to just copy and paste all of them. And so that we have this component wrapper, we can now easily distributed the size and the margins are paddings between those elements, does feature blocks, and we can use this component, refer to all of our components as well. So here we can apply some margin to this class, but also we can create the structure for our buttons that's pretty much the same. So let's have a look here and use the class component proper. And then let's put a button inside it. Or I'll just copy and paste. We can simply use the designer to grab the bottom. I'm going to delete this one and put it into its own component wrapper. So this structure is more readable now and when we publish the style guide, it will be easier to navigate through those elements. And also we can do it with text if you want. Colors, pretty nice. So does the beginning of our style guide, it will ultimately grow in size, but for now, let's copy and paste another section. Let's create the one that will contain FAQ items. And this is another thing that we can reuse from our homepage. I think that FAQ items are a good candidate to go to Style Guide because those are with some cool animation and they reveal some texts. Maybe we'll be using this structure throughout some other pages. So let's copy and paste this element into the style guide. And in the meantime, it's worth to notice that in this components section, I tried to use atomic design. I tried to copy and paste atoms and molecules. I don't use entire structure here such as layouts, because that's too much for components. So if we go back to the homepage and we have structures that are like footer or menu. We want necessarily copy and paste the entire menu into components, will create a separate section. But from this menu we can obviously create some parts, some bits and pieces, some atoms and molecules, such as broke down or navigation links, so that we have them in our components section. Here I have the symbol, the sub menu blog that I've created in the previous course. And I think it's a great candidate to put it into these components section. This is a molecule that works as a sub many items. So let's create another H3 for this many block. And let's paste the sun many block over here from symbols I can simply double-click and, and use it in there. So what I mean by this, as I tried to divide entire layout on or sections from components that I can use to create those sections. You can use different bits and pieces as components, especially formed elements and all the other things that you'll use as atoms or molecules on your website. But I'm not going to add them right now. I'm going to create another sections element at those. I named them sections, but those are layouts actually the structures that contain a lot of different atoms or molecules linked together and they create the entire menu navigation, maybe footer or a hero elements on our page. And it's also worked to create in our style guide a separate place for those schemes for those layouts. We have this layout section in here in Webflow. Those are predefined layouts. And as you can see, this contains of some images and cards and maybe titles. So some atoms and molecules brought together to form section. So we can have those sections at hand. We can create components out of the sections and then reuse them for our purposes. Especially if you're creating something that's a bit more elaborate style guide. So some kind of a design system. Those sections are really, really important because you will probably use this design system for different apps and websites that you'll create. And then you can reuse the sections from one project to another. Let me use the header section that we have here and place it in there. So, so header section is a nice candidate to go there. Also, let's create another section. Just duplicate the one that we had and have this header and footer section here. So the big block elements such as navbar and footer should go there. And this is especially helpful if you think of this as a component and then maybe nest another component inside header and footer. And now Webflow is capable of doing that. So you can nest logo component into header and footer. And then if you want to change the logo for the entire site, if you if you are applying changes branding and you need to replace it. And those nested components can really help you accomplish that throughout the scope of all the, all the elements that contain the logo elements. So let's now copy and paste the footer into our style guide. And sometimes you get the information that section elements cannot be nested inside of one another. Let's click on body element and now Command V to paste the footer. Now we have both header and footer, both navigation element and footer in place in our sections. And this is really useful to have them in the style guide, as well as some other layouts that you might use. So the beginning of our style guide is ready and stylet, It's something that should evolve with your project, with your websites. It eventually it might become design system. But unless you have a design system in place already that you want to transfer it to Webflow. You shouldn't really spend much time on thinking of different typography options and colors that you might add later on, it's best to have some layouts already and then add elements to style guide on the go. As you can see, someone can preview all the interactions and animations in the style guide on style guide page, he can copy and paste hex values of colors, previewed that topography. So this is a great place to check out the styling of your website, but also this is the single source of truth for all the elements on the page. So if you want to change the typography, it's enough to go to the style guide, change headings and they will change throughout the entire page. The same happens for components. You can edit components from there and they will update accordingly throughout the entire page. Unfortunately, this is for one project only. So if you want to create multiple pages or landing pages based on the style guide, what you'd have to do is just duplicate this project over and over again, then delete the pages that you don't use a steve the style guide, or just create a project with style guide as a base and duplicate it. And then you can start from there and create some other pages. This is not really convenient if you want to change the typography across all of the projects or maybe logo because you'd have to go to each individual one. But hopefully Webflow will sometime come with a solution that will enable us to have this design system link to all of the project. So keep an eye on that. And in terms of the style guide section, I think that's pretty much it. Also one option that's worth noting as the ability to share this project. You can invite collaborators. So if you're working on a style guide or a design system with your teammates, It's really useful because when you have a team plan for Webflow, you can invite them and you can work altogether. And also you have the ability to share the project with read only link so that someone can preview all the layers and things that you have in the document. It's enough to just copy this link that's created and send it to anyone. You want to be able to check it in the designer, but not being able to edit it. So this is pretty much it for creating the style guide structure. And this is only one approach. It's pretty simple if you want to see some more sophisticated and advanced stake on the style guide and design systems. Please checkout system flow.com. There you will find tutorials as well as ready-made framework for Webflow that you can use to create and work on a design system that's really, really extensive. For now remember those sharing options and we're set for the next lessons because we've just created our first style guide. Thanks for the attention and see you in the next lesson. 7. Project Overview: Hi guys and welcome to the first lesson of this course. I'm super excited to have you here. And this is the advanced course on Webflow, meaning that we won't be dealing with layout and styling that much. I'm going to show you some more advanced features of Webflow as well as creating the structure for our website, for example, with CMS, as well as creating a simple style guide. And what do you looking at right now is a website that we've created in the basic course. So if you want to create a landing page, a website like this, go ahead and check the basics course and then you learn everything about the HTML structure and the layout. What we're gonna do in this course, it might be kind of continuation and we're going to use CMS to create a blogging structure for this website, to expand this website and create a block on top of that. For now we have some simple structure here. This is a one-page site with just simple headers and some sections that we've created. And also the first thing that I'm going to show you in the following lesson is how to create a style guide that would basically let us work a bit easier in Webflow and create all the other pages in no time. I mean, using, reusing the elements that we've created already. So let me also quickly switch to the structure that I've prepared for the following pages that we're going to create this as a simple mock-up of a blog that we're going to create. I didn't feel in the photos because we're going to use one fo CMS in order to feel all the bank elements in here and to load the photos. This is layout that I've created in Adobe XD. You can find this file in the source files for this course. What we have here is the simple homepage for the blog. You'll see that we have logo and simple menu at the top with some categories that we'll create. And then we have this hero section with featured article. And all the data that will be displayed will come from the CMS. So we have this feature tag and also we have the header, the name of the article, the excerpt, as well as linked to this article and to the right hand side. We also have a photo that we're going to load dynamically from the CMS. Below that will create some sections that will also contain our data from CMS. And that would display recent articles. And then we have also software. So basically all of those comes from our categories and we're going to just display the newest articles in inside of the category. Also we have a tagged as featured for some of the elements. And you can see that this is very simple structure where we have basically some data from CMS. So an image 40 for the article as well as the title here is the excerpt. And also we have the information about the author as well as the category that this post belongs to. This category is also displayed in the form of the bill, the little bubble at the top of the thumbnail. And that's basically it for the homepage. It's super simple, but it will let us use all the different concepts from the CMS. Then we have another page, that's the category page. And it's super cool is that Webflow is actually generating those category pages for us automatically and filling it with the data from this category. So all the posts that are in the category, we'll also add this little featured flag to the post so that we can reorder them. And lastly, the page dot features single post in our blog with the date, the author, as well as category and the title. Here we have the observed and the content of the post to the right-hand side, we also have some simple newsletter sign-up form as well as social media share. So this is all pretty straightforward, but I think it's pretty neat structure that will let us explore CMS in Webflow as well as some other things. So basically here we will be able to easily display different posts that are in the same category as the one that we were reading so that when someone finishes reading he can go to another material and other article that might be interesting. But yeah, so those are free pages that will explore, create from scratch and you CMS to fuel it with the data, as well as create the editor page for whoever will add the content to our blog so that this person can easily add new posts straight from the browser. And I'm going to show you the editor as well. What we're gonna do in Webflow is we'll start with this existing project that we have, but it's super simple. Again, I do recommend you to check out the basic course if you want to see how I did this project. But what's important in this project is that there is a style guide page that we started to create. So here we have a simple SAP many blog that we've created. And I did it just to show you how to create components. But now we're going to work on this style guide page because it's, our website is going to have more and more pages. It's so much easier to organize some kind of a structured with components so that you can reuse the elements that you've already created and they stay consistent throughout the entire page, as well as it's super easy to just use them drag and drop on the other pages, in this case the blog pages that we're going to create. So this is the structure that we're going to start from. Also, you will find the link to this structure to your, in your source files for this course. So you can start by duplicating this project. And we'll be tackling the style guide and creating some kind of style guide. Or maybe the start of a design system in the next lesson. And then we're going to create a structure for the database, the CMS structure that will fuel our bloke with the data, as well as later on we'll explore some integrations, maybe some no code tools and Zapier, I'll show you how to expand this website and add some extra functionality on top of web for those advanced features. I hope that you are happy about what's going to happen in the next lesson. So let's get straight to it. I see you in the next one. 8. First Collection: Welcome to this next lesson. And in this one we're going to create a collection setup for our CMS in Webflow. This is super important and that will define the data structure for our blog and the relationships between the elements in the block. So think of it as a database because this is indeed a database that will be running on those servers. And this database will contain different types of data and we can create the links between the elements that will create. So for example, going to create categories and then blog posts and authors and we get the link them together. If you happen to work with some kind of database, whether that was MySQL or SQL database, or even with simple spreadsheets in Excel or Google Sheets or maybe air table. This will be kind of a similar structure. So what we're gonna do is first career, create our first CMS collection. And here you have some collection templates. So for example, you can select from categories and projects and clients. But instead, let me just create the collection from scratch. So what we have to define here is the collection name. That is pretty important because it will let us know what kind of data is in the collection. But also it will create automatically the URLs for our webpage with the name of this particular collection. I'm going to show you how it works if you start with category names. So what we're gonna do here is create categories. And I'm using plural on purpose because that would be all of our categories. And the singular version is created by Webflow automatically, you can edit those if something goes wrong and it's not grammatically correct. But the plural is categories, and the singular is category. And we're going to speak about this collection in that way. So we're going to have all the categories in the collection and the single entry would be category. So now the collection URL is automatically generated and this is the name of the folder that your category pages will be stored in on the server. So if you take a look at the URL structure, here you have the name of categories and then will be a category page that will be automatically created by Webflow. You can change this name. You can change the collection URL independently from the name of your collection. For example, if you want to have it as my website.com slash blog. But we're just going to stick with categories. I think it's fine. So we'll have all the collection pages automatically generated under categories and then category page categories for blocks are pretty common. We want to create as different sections for our blog. Different themes that would contain, for example, technology or marketing or blockchain articles. And then we're going to create another CMS collection with actual blog posts. And we'll link those, those categories to blog posts. But I'm going to show you how to do it later. But when you defined a new CMS collection, you have to define the collection fields as well. Those two fields, basic info are by default added by Webflow. So this is name and slag. Those are required. You can sit a little asterisks next to the name. And as you can see that slack here is required to create a unique URL that will lead to your category. For example, category slash marketing will showcase all the posts from marketing. So let's edit this basic info first, I'm going to click on this little icon to the right and we can create the label name here and also some help texts. And this. Appear for our collaborators and the CMS collections. But also we can create and add custom fields to this category. So imagine having a spreadsheet and in the row we have this collection with the name, but then we can have different columns with different fields, for example, text and images and videos. So what we have is the ability to add some custom fields to the category. For example, we want to have this category to have an image or a specific color, or maybe a link. We can do it. We can define the type of the custom field that will create. And in this particular case, I want to create another just plain text field because I want to add a description to our category. So this is not required field. I'm going to leave this checkbox blank and I'm going to give it a label, a name for this category that would be description. And you can select single line or multiline if that should be long text, you can set it as multiline. And then in the editor, the text field would be a bit bigger. And also you can have this maximum and minimum character count, and that's it. So I've created another custom field. You can create up to 30 fields for each collection. And then you have this extra basic fields with name and slack. And also you have three fields that are automatically generated by Webflow. This is greeted date, date, edited, and published, and those will be automatically added. You can delete the collection. In order to delete the collection, you will first have to make sure that no instances of this collection are on the designer, but we're going to explore that later. For now we have our simple CMS collection with three fields. I'm going to create it. And Webflow will let you generate some dummy data, but we don't want to do it for now. So we'll just create a new category bar by ourselves. And let's give it a name. The first category for our book would be Blockchain. Let's paste it in there. And this lag is being generated automatically with capital letters changed into lowercase. And also if you add some special characters, for example, space spacebar. If you press there in the name, you'll see that it results in Webflow changing it into a dash. And this is because it creates the URL for this particular category and the category page based on the slag that you can modify independently. Now let's pay something in the description field and let's create it. But before you do, you can click on this little arrow and save this as a draft so you can create different categories, but if you don't want to publish it yet on your website, you can create drafts. But even if you created now, it's not automatically published. So the changes are visible on your publisher website. Instead, it has this special fog, it's special status. And now it's an orange. It says that it's staged for published. What does it mean? Well, if you publish your website either on Webflow sub-domain or your own domain, those changes and CMS collections will be published all together. So you can leave them as drafts if you don't want to publish them, or you can stage them for publishing. Also, you have exported important buttons. Those are really handy if you want to create a lot of entries. For example, you can now export the CSV file so that you can see the structure. Then you can create some other entries and afterwards, save the file and import it. So you don't have to do with whether those UI. Also you can migrate files, migrate data from other systems, such as Shopify or some other blog posts from WordPress or what have you. So if you go to, if you select the first column in Excel, then go to Data and then go to convert text to columns. You can set it to be delimited. The delimiter is a comma. So let's finish it now and you can see that we have all the data in different columns. So it's easy to add more categories here and then save it as CSV file. And then again go to web flow and we can import this altogether. But for our specific purpose, we don't really need to do it because we only have a few collections to create. So let's create another categories are a few categories of collections. Those will all go into the same CMS collection. And here is the second one, mobile. Let's go ahead and create it. By the way, if you made a mistake, you just go to select. You can select whatever you've created. And now you can delete it or you can change its status into draft so that it's not staged for published. It's not going to be published unless you just stated and publisher website. Now this creed, one more category, and this is marketing. I'm just going to copy and paste the same description for now. So we have something here. And the last one, the last category will create for our block will be software with articles on software development probably. Let's create it, and this is how it looks. Now, what we want to create in the next lesson is the other structure apart from category. So let's close them altogether right now. And I see you in the next lesson. 9. Collection Setup: Hi guys and welcome to this next lesson. In this one, I'd like to show you how to create all of the collections for our CMS and Webflow. So we're going to create articles collection and the authors and all the different ones that will help us to structure dynamic data on our web page. However, if you're just following along the videos, I think you might find it a bit difficult to understand why exactly I came up with such naming conventions and properties and why am I creating these structures? I think if you just follow along, might be bit difficult, but if you try to do with yourself and basically wrap your head around the idea of creating a blog and its structure. I think this will be pretty obvious. Well, first of all, tried to set the starting point at the very smallest piece of dynamic data. But you want to have, for example, on this blog post, we have all the different data here and everything has to be dynamic. So the title as well as the content of the blog post is that dynamic. Then we have this image as well as some static content to the right-hand side. So from here we're going to think of what elements should define our article that should be imaged and title and author, and also the content and maybe some tags. And we also have something that's called featured here. So this TikTok to the left-hand side of the image just tells us that we also want to feature some of the blog posts at least. And this is a great example of how we can think of creating this, this featured structure. So if you take this little featured element and we'll also have tags here. So for example, here we have design and development and typography, and we also have different categories. So we have to think how to create it in CMS so that it really makes sense. So feature is basically yes, no. So this belongs to the article. This is true, false statement. And that could be a simple field that we're going to just switch in the article to say that it's featured. Later on we can decide that this article that is featured will, for example, showcase on the main page. Then we have tags, and then we also need to decide whether we want to create tags within our articles, blog posts, or we want to create a separate collection for tags such as design typography, Its, and so on. And this is an important decision in terms of CMS because either we divide it into different collections or we just create one collection and we're going to add this tax, for example, in one text field and maybe separate them with a semicolon or coma or whatever. But in this case, for tax, at least I think it would be best to have a separate structure for tax, especially that I want to create different colors for each one of them. So I want Design tab to, let's say have blue color and then development will have green color. So it means that I have to think of using two different properties. So two different fields, one for actual content text and the second one for the color. So in this particular case, it would be better to create a separate collection with tags. And then each stack will have the name and color, so that I don't have to remember all the color hex values for every post that I create. I just link this specific collection item to the second collection, the collection of the article. So what Webflow allows us doing is if you create different collections, which you might think of like, let's say Excel spreadsheets. So we have different spreadsheets for articles and for tags and for authors. And then you can link them together. It's kind of if you're using Airtable, you can link different sheets together and different records. And this is kind of similar idea. You'll be able to link the tax two articles. And then while creating a specific article, just link to the specific tag or tax with special fields, they are called reference or multi reference field in Webflow, CMS. So we're going to explore it in a second one. I'll show you how to define the structure for our blog body. And this is really important concept that you execute on before you actually start developing your website with Webflow, what you do is you just scroll your layout and think of different connections as well as the structure of the CMS. So first you think what should be static and what should be dynamic. For example, the menu items, software marketing, mobile and blockchain. You can create a static menu, right, like this. But then if you have it in the CMS as categories, you can link those categories to blog posts and then you can automatically display those elements in the menu so that when you change something or maybe you add another category, it will be automatically updated. And then you also start to think about the relations between different collections. So for example, for authors, should I create a separate collection if there's only one author here and there is only a name of this author. Maybe it should be the element that field in the article collections. But thinking future-proof, I think we should create a collection with authors so that we can add a photo or a bio. And then our clients wants to create, let's say a separate page with outdoors. We'll be able to do so with this specific collection. And even if you find it hard to wrap your head around the collection staff and all these data are thinking, I guess it's just a matter of starting out and creating some collections because you can always tweak them later. So let's go ahead and open our CMS in Webflow and create another collection. We have 14 categories. And now let's create collection with tags. I feel that tax should have separate collection because they have separate colors and names. So the new collection name would be tax in plural, and we also have the singular version. And in the URL, I think I'm going to stick with tag. Singular. Tax is kind of weird. We're going to have this taxpayer is single tag page and that will be automatically generated with Webflow. I'm going to show you how those pages work in a second, but you just need the collection URL to tax or, or rename it and the basic info name and slack, we're going to leave it, but we're going to add one more custom field and that will be color. So apart from the name, we'll also going to have this custom color applied to each tag that we're going to create. For example, topography tag or maybe Designer. Whatever we want to create as a tag. And this is going to be tuck color, and I need this field to be required. Let's save this field. That's it for our first, second collection. Let's create this collection. And again, we can initiate this with data. I'm going to skip it for now and just create some simple tags that I already have an clipboard together with their colors. So we have development. And then let's create another that will be designed. And if you create custom fields with specific data types, such as color here you can click on this little icon, drop icon, and then you can select the color. In this case, I have the color from my design. And for the last one I'm going to create, let's give it a name, topography and typography talk. Let's maybe select the color from this color picker and select this kind of orange red color, save it, and that's it for my second structure. So we have categories now and also we have tax. Let's create another CMS collection. And this time we're going to create authors and use this predefined data set from Webflow. If you click on authors, you'll see that the collection name is correct. Then we have the collection URL and the specific pages that will be generated have this prefix author. And also we have, apart from basic info, some custom fields such as bio and summary and picture and email. Of course, we can select any of these fields and we can change it from single line to multiline and we can change so that the fields are required by default, all of them are optional. We also have some Twitter profile link and Facebook profiling. You can change it, you can delete the ones that you don't really need, but I'm just going to stick with the automatically generated ones. And to the right-hand side you also have the editor preview, which kind of gives you a sense of what these fields are like. Let's create this collection. Let's initiate this collection with data so that I don't have to search for some Lorem Ipsum and paste it in there. I'm going to add five items at the beginning. And Webflow will take care of generating different names for my authorise, as well as their bios and bio summaries. And we also have a picture and picture at this pretty smart and Webflow because you have this picture with a person actually for others. That might be just a coincidence, but here it is. And also an email address, obviously some imaginary data profile links and for Facebook and Twitter. But here they are. And we can now use this data to design and showcase what we've created. Another collection that I'm going to create, this blog post, this is the most important one. You can use the ready-made structure, but I'm just going to create it from scratch. That might be blog posts or articles. You can name it however you want. I guess that this collection URL is kind of weird. Blog posts, maybe let's have articles here or just leave blog and that's fine. Now let's take a look at the custom fields. This is the most important part. We're going to define a lot of different custom fields for the articles. But let's first consult with the layout. This is the source of inspiration for what we're actually going to use here. And we have this image, this is a rectangle and we're going to add another, also another format, picture formats for Instagram. By the way, we can have this multi image field and multi image field is able to accept up to 25 images in a single field of the collection so that later on you can use it in a lightbox. For example, if you have a product pictures for your e-commerce website, but we're going to use just image. This would be a single image, but we're going to create two fields like this. The first one would be a rectangle. So with aspect ratio, one-to-one image one to one. And then second one, that would be the one that's displayed in XD, That's 16 by nine. And you can also add some help text. So for example, if you prefer, Let's say 1600 times 900. This is also displayed in the editor previous owe. Anyone managing your website will know what's the preferred resolution of the images. And also I'm going to mark this field as required as this is the image will be using in the thumbnails as well as in the post. Let's save this field. And the next field would be an excerpt. So excerpt is in different places. So for example, in our article it's this bit at the very top. We also have it below are the miniatures. And if this is featured, we also have free lines of the excerpted visible at the homepage. So let's create another plain text field, but let's make sure that it's multiple line. And we need three lines of this text. So it's best to consult with the layout how long exactly this text should be in order to fit in this free line model. So I'm going to have it between one hundred and one hundred and sixty characters. And this is also required for the label we're going to use excerpt and let's save this field. Now the most important field for the article, that would be the articles content. And we won't be using plain texts with multi-line because here we only have a simple text. However, in the blog posts we can also add some videos and maybe we want to add some images. This is why we're going to use rich text. And that's the field that will enable us to have the structure with headers and paragraphs and images and embedded content. And also for people managing our content in the editor. They'll have nice WordPress like editor for this rich text fields. By the way, you can have minimum character count, but I'm going to just leave it blank, but this field is obviously required. We need some content for an IPO, blog posts and the article. And this is the base structure. So at least this is most of the things that we'll see here. But also we have some articles that might be a marked as featured. This is a simple field that we're going to use in here. And we're going to use switch, switches, simple, true-false. And let's give it a name of featured. Save this field. And let's take a look in the editor. So someone would be able to use feature the post by default that would be set to No. But I can set the flag of the posts to be featured. And then depending on this, I might be able to let say displayed on the homepage, okay, and that would be it for the static data for each article. Now we want to use the data that we've already created in different CMS collections such as authorise and tags and categories. Because each article, each blog posts would have to have its author and some tax and the category that it belongs to. So we're going to create another field, and we're going to be using reference and multi-layer reference field fields in order to accomplish that, the difference between the two is that reference field link to one record, for example, one author and multi reference field can link multiple records from these different collection in terms of categories. So let's have categories first, we are going to use single reference field. That's simply because we want each blog posts to belong to only one category. And if you want to have it the other way, if you want to have, you know, blogposts placed in different categories or maybe create one category for new articles and feature articles. You could do so and then create multi reference field and link it. It just a business decision for authors. I'm also going to use single reference field because in my case, it's going to be one author for one blog post. But again, if you have post articles that have multiple authors, you can just create a multi reference field in here. And for the tax, the question is the same. So we have to answer ourselves whether we want to use only one tag for one article, or we're going to use multi reference field and then link different tags to at least one tag, but maybe multiple tax to one article. And for me, that would be obvious to use multi reference field in here. But just for the sake of learning, I'm going to stick with a single reference file. And this is simply because Webflow for now at least, some trouble with displaying dynamic data from multi reference fields within the static pages. In order to explain that, I have to show you this static pages here. And we also have that CMS collection pages. Those are generated automatically, those purple pages, pink pages, they are automatically generated and they contain all the data from our collection. Easily accessible in the UI, in the design. But for the static pages will have to use a special structure in order to access this data. And unfortunately, the data from multi reference field, at least for now, are available only for CMS collection pages, so only for the purple pages. But what I also know is Webflow is actively working on enabling this on static pages. So what I recommend you doing in this course is just follow along. And if you are creating this website together with me, just use a single reference field right now as I do. But when you finish the course, check out if Webflow already developed a solution to use this multi reference fields in the static pages. And if they did try to change it so that we have multi reference for tax and That would be, so let's create this collection. And this is also great because we can initiate our collection with some dummy items. I want to add 10 blog posts so that we can easily work with some sample data such as images and block content. And Webflow is making a great job and filling in the names of the blog posts. Even. Just remember that we didn't use this ready-made blog posts collection. We just created our own blog posts collection, but somehow managed to fill it with some proper data, some nice images, and also with basic info we have instead of names of the outdoors like we previously, previously had generated, we have names for some nice articles like 20 myths about web design. That's pretty cool. And here we have this structure ready with content field. We have this flag featured. We can turn it on or off. And for the category author and tag, you can see that those are drop-downs. And this is simply because we can use only the elements that are already defined in this specific CMS collections. So in authors tags and categories, if you want to manage these elements, you can select the collection you want to manage, and then you can add some new tasks. You can, you can delete it. And if you are not able to delete entire collection, you'd have to see the connections that it has. So we already made the connection between this category and our blog posts. So in order to delete, the tax collection will have to first delete the connection between blog posts and tax. Otherwise, Webflow won't let us do it. Okay, So this is it. We've defined our collections and we can now publish our website because all the changes to the collections are published are now stage for publishing, but are published with your websites. So if you press Command Return, this is the shortcut for publishing. You'll be able to publish their website and now the collection items are live. This is it for now and I'll see you in the next lesson. 10. Blog's Menu: Hey there, it's nice to see you in the next lesson. And here we go. We start with creating our block structure and pages for the block, we have the style guide ready, so now we can create a new page, and that would be our blog homepage. Let's give it a name, logo. That's enough. Let's create this. And we always have this XD file that is kinda of reference design for our blog. We can check out the file and here you can see the base structure for the homepage. We have the menu on top. Then there is a featured Poston, some recent articles from different categories that we've defined and the CMS, as you can see, it's really simple and it's just a mock-up. So I won't be trying to pixel perfect match the sizes of the elements. That kind of things you can check out in the basic course. But here, it's worth to create the structure and CMS, and I want to explain you all of that. So what I'm gonna do now is go to the style guide page and borrow some elements from there. The first one that we'll use as this fixed element with navigation. So let's copy and paste that into blog. If it were a component, we could also use components menu, but here I'm just copying and pasting. And the first element, that's not going to be a homepage rather than all posts. So will display all of the blog posts here. And for the homepage will have this juice block logo. Actually, this logo is a little bit different than the standard logo that we have. And I have it in the XD file as a state for this component. So let's now select this block logo and export it. Now let's go to Webflow and I can select the logo, double-click on the logo to replace it and replace with the one that I exported from Adobe XD. And as you can see, it's the right size, 114 by 24 pixels. However, it's not really that sharp, It's not that crisp. And this is especially because of the specifics of my display. I'm using retina display and it's scaling the contents twice. So the size is the same because I've decided in one scale, however, the logo is not that crisp after I export. And Webflow has a way to handle that. And this is using those images as highly BI. So what you can actually do is go back to Adobe XD and make sure that you have this asset that was originally in the 1 x scale, exported into x. And then you'd have to replace it and use it as a high DPI image. So what I have to do in XD is switched to web because this will export two images. I declared that I've designed this image in one X scale. And then I want to export it in both one X and two x by selecting this web version. So when I exported as Jews block logo, you'll see that if I want to now import those images, I actually have two images instead of one. This is just block logo at two x and the simple version, so the two eggs version is twice the size. It's six kilobytes. And below it has twice the number of pixels, but on my retina display, it just looks better. It doesn't change the size. So what I need to do is just import this to x scale image and then declare in Webflow that I want to use this image as HTTP API. As you can see, it's twice the size is 228 by 48 pixels. It's twice the size in kilobytes as well. But it will look better when I change the property to high DPI. So this is what you're gonna do in terms of PNG and JPEG images, those happen to be bitmap. But in most cases, this is possible. You benefit from having images in SVG format, which is actually best for web and its vector so that you don't have to use this image is high DPI and it's enough to just export it from Adobe XD or Sketch or Figma in this proper SVG formats. So this is obviously not possible for photos, but for all the other elements, UI elements, you can export this juice logo block in SVG. And now if you upload and replace this asset, you'll see that the SVG version is only one kilobyte and it can actually scale in the browser without losing quality. So it's always best to use SVG images. It's smaller in size. It LOS really quickly and you don't have to use a high DPI option. So this is it for images. There are a few more options. So remember to add the alt tag to all the images. You can add this later on in the Assets panel as well. And this is pretty nice trick. And also in the newest versions of Webflow, you have images set to be lazy loaded. And this is really cool because it will also speed up your website. Now, what I'd like to do is create another elements for our menu. But first, let's link this one to our blog page. And this is going to be the homepage that I have designed in XD with all the featured posts and a few posts from each category. And this old pulse link will just link to the other page that I'm going to create right now, let's create a new page with the name block all posts. And this particular NovaLink will go to this block old posts page where I'll create the listing of all the posts on our block. So let's go back to blog. Let's make sure that all posts is linked correctly to the book old posts page and for the other pages. So for color components, I need to rename them to proper sections such as block chain and marketing. But I don't really need to use static names in there because everything I need to display in here, as in the CMS, those are categories that I've created and declared NCAM S. And I want to use this categories and display their names dynamically, as well as I want the links to those categories to be populated automatically so that they navigate to the appropriate page with listings of articles from this very category. And this can be accomplished with a CMS. I'm going to show you how to do it later on. If you were to update the name of the category or maybe add a new category, this will all update automatically. See you in the next lesson. 11. Menu Collections: Hi there. It's nice to see you in the next lesson. And this time we're going to link categories to our menu. So I want all the names for our category CMS collection to be displayed in the menu, as well as linked to the appropriate pages. If you link this content dynamically from CMS and display it on your page, you should be able to make changes to categories in the CMS later on. And those changes will be reflected across all of your pages using this specific menu. Now, let's delete almost all of the nav links. I'm going to leave one and traveling and show you how to create dynamic content from our CMS own static page. In order to do it, you have to go to the CMS section of the odd elements. So we press a on the keyboard and then NCAM, as you have this collection least, you have to first use collection least. And inside of this collection at least you can source data from CMS. So let's double-click to insert it here. And here you have this collection least wrapper. So if you're using static pages in order to display a collection elements, you'll have to source the appropriate collection. So what collection you want to source data from? I want to source from categories. And from categories, we'll just load that data is loaded automatically. So you can see that and those four items are preloaded with some data from collection. And simply because we have four items declared for this collection, we have four items. If you take a look at the structure, we have collection needs and then collection item, this is the most important thing. And if we want to change anything, any styling or appearance of this elements or put some elements inside will do it for collection item. Collection item is kind of a template and this template is multiplied by the number of collection elements. And so that we have four categories there. It's duplicated four times. Now if we take this NovaLink and simply copy and paste it into collection items, will have this NovaLink with all its styling as the element of collection items. So in this collection item template, what we can now do is we can source it with whatever field we want to be displayed from the collection. If you take a look at this right hand side, you'll notice that right now what we have as just a link to a static page that we've created block 0 posts. And it's there simply because we've copied the NovaLink and previously we link this NovaLink to block 0. Post the page that we've created and we want to list all the articles on this page. So let me take a look at the pages. Here you have this book oh, posts that we've created. And this is pretty important because it is inside of the static pages category here. But next to the static pages, we also have utility pages, e-commerce pages, and what's most important for now, CMS collection pages. Those pages are generated automatically when you create the collection. And for example, we have this categories template and this is page automatically generated. Why? Why we've created categories CMS collection, this page, and it's marked in purple color. Is available to display all the data from the catergories template without the need to create additional containers such as we did on static pages. So on static pages, we had to create this collection least wrapper and audit from other menu. But on CMS pages, we can simply use data from this collection. Now if you take a look at the link settings, you also see some purple fields. And it means that those purple fields are linked to the collection and some dynamic data from the collection can be sourced for the URL. If we select gets URL from categories, we can link whatever URL field that is in our collection. So if we have defined, for example, for mobile some custom field with URL, then we can link this URL dynamically by using this, get us from categories. But we don't have any links right now, so there is none of them. So how can we exactly linked to the categories page so that we can display all posts in, let's say, mobile and software category. Well, in order to do this, we have to link to this dynamic CMS pages that were generated automatically while creating the collection. And this is also marked in purple here we have static pages and also dynamic pages. Those are our CMS Collection Pages. And from here we can link to current category. It means that for all the collection items, I'll have the appropriately nx for mobile and for software, et cetera. It will take me to the appropriate page generated for this collection and I'll be able to display all posts from, let's say mobile or software. Also, I need to select this, get texts from categories so that I have great labels. Let me select the name. And now as you can see, I have all the names of the categories as labels for our nav links. So we have software marketing, mobile and blockchain. And also on top of that we have 0 posts, which is a simple NovaLink that's leading to our static page. But all of the elements in here, all of the links in this collection item element will link to the appropriate currents category page generated from CMS. So it will also change accordingly if we make any further changes to our CMS structure. And as you can see, this categories template, this is exactly the template that will be displayed when we click on the link. And this will be this current category page that we can later on style in Webflow and create appropriate containers, display posts, etc. Okay, for the collection list wrapper settings, we can select different layouts. So we have different columns settings, and also we can change the tag. Let me just stick to this layout style where this is expanded. And Dan, let me change the layout to Flexbox. What I want to do is select the collection list first and I'm going to change the layout to Flexbox in here. Now the elements are next to one another. And for the entire Nav Menu, let me switch to the flexbox to center those items. Now it looks pretty good. We'll have to check how it looks in the mobile versions though and the tablet version, we need to make some adjustments. Let's select the whole container. We can change the layout to flex in here as well and also justify it to the right-hand side. This looks pretty cool, I think for Mobile, let me just preview how it would work and expand this menu in the preview. So yeah, it looks pretty good with need to steal, adjust some alignment. But also for the tablet, we could just try to display the whole menu. We only have five items in the menu, so I think they will fit horizontally. So let me select the navbar and then its settings. I can decide that this mobile menu is only displayed from the phone view and below. So in tablet we still have five items and the logo. And I think we are all good because this is the narrowest resolution and in phone, we'll have informed version will have this minified menu. We still need to adjust, positioning, some alignment. Those are things that I told you in the basic course. So I really recommend you to check out basic course and make some adjustments in this course, I prefer not to spend time on the layout, but let me just quickly create some adjustments here in this tiling, I open this menu and now let's just some spacing as well as we want to change the positioning for this entire collection, least so that the direction is vertical for Flexbox and let's align it to the center as well as this nav link, we can align the text to the center. And We're all good. I think that those are just basic settings, but now it looks so much better. And you can start from there and you can make some adjustments to the layout. So I think that our menu is ready in terms of the dynamic content. And you've learned how to use collection least wrapper on static pages. So remember, whenever you want to use dynamic data on static pages in Webflow, you'd have to use collection least rapper from the Add menu. And then you can source ordered all the data from CMS collection. But for the CMS collection pages, those automatically generated, you'll be able to use dynamic data from this collection without the need to use collection, least rubber. That's it for now. See you in the next lesson. 12. Featured Article: Hi there and welcome to the next lesson. In this one, we're going to work on the dynamic content on the homepage. Let's first add a section. This section should be outside of the fixed navbar. And in this section I'm going to add one more container as well as another technical div that will hold the information about the future posts. So this is pretty unique. I'm going to give it a name book year-old title. So this is pretty unique class that we'll just use for this element on our page and for the entire section in the design, it has one around 118 pixels margin from the top. Now in block hero title, what we'd like to add is the contents of the blog post that is featured. Now let's delete this block hero titled class. I'm going to apply reapply that in a second. But first, I'm going to create more generic class card big. And I'm doing this because I want this car to be class to have some properties that I can use in my style guide and specific to many different cards that I have on my page. So I changed the background color to white as well as border-radius to 12 pixels. And now I'm changing the box shadow values. Let's apply opacity alpha 2, 6 percent. And now let's get rid of this card beak so that we can first reapply this block hero titled class. For now it doesn't have any properties, but On top of that will just add card big that we've created as a universal costs for this playing cards and discard big class is appropriate for us to just use it in the style guide. So if we have something that we can later on reuse like this, we can go straight to style guides and add these elements. So in this target we need another section for some generic elements, some empty sections. And we're going to use it to create different states and elevations as well. Let me speed up this process is nothing new, but now I have this building blocks section with card shadows and elevations just above our sections. And I put this card big insight. So now I can get back to our book page. And this will stay in the style guide so I can reuse it in future. Now this section from the layout is pretty unique for the entire page, for the entire block. So we'll have this feature to Tiktok on top, and then we'll have title and excerpt. And to the right-hand side we'll have an image. So first, I need to use this collection least this is pretty important because if you forget to create collection list first and to link it to the appropriate collection. In this case, those are blog posts. Daniel have to redo the entire component. So let me go to settings of this collection least proper. It's already used using blogposts as a source, but now we can also use some filters and sort order in order to display items properly. They'll explore all the options later. But now let's take a look at limit items option that will enable us to show only a specific number of elements returned from this collection. So in this specific case, I only want to show one element, one blog posts. And I'm going to start at one. In case I have, I don't know, 10 or 100, I can pick a different number, but also on top of that, I can select the sort order to just sorted based on published date. So this published on as a property that is automatically applied to every CMS elements by Webflow, I can sort it from newest to oldest and save it. So that will have the most recent blog post display in this collection list item. But if I want this elements to be featured, only, I can go to filters right now and I can select the appropriate field. In this case, I'm going to use featured. And only when featured is on, I'm going to display this newest posts. So I've used everything. I use limit items to show just one element. And on top of that we have the sort order applied so that it's displaying only the newest posts. And also this post has to be featured. So it has to have this feature switch to, switch to Ohm. Now this general settings and filters are set to collection least wrapper. But now we can switch to collection item and we can restyle the collection item as well as use all the data from the collection list item returned with the filters that we've applied. So we already have the data about this very recent posts that is featured. Now we can use Lync block and in Link settings, you'll see that we can link to this specific page, which is current blog posts. And the current is simply the one returned by our filters. So let me change the display to flex. And this link book will simply be the container for all the other items it will link to the article. Now inside, Let's create another d-block, and this will hold the left hand side structure. I'm going to give it a name, let's say book hero. And that would contain the description as well as the title and category. And to the right hand side will have the image. So now inside of this block, hero will put some textbook. This is a simple caption that we'll use than the heading and this is H1 and also a paragraph in which will display the excerpt for the post. So now that we have it later on we'll link the appropriate data. We also need this read now, link and entire element is linked, so we'll just have this textbook. And in here we're going to put the read now message. Also, let's take a look at this timing of other elements. Let's first or replace the text in the textbook so that it has text feature. Then we have heading one, which is correct in terms of styling for a paragraph, this is really special paragraph on our page. So I'm going to create another class for this paragraph only. I want use it in the style guide because it's only one instance of such texts on the block. So this is block your excerpt, and let's have the margin 12 and 24 for this element Asper our design. As well as font-weight would be 400 Normal DM sounds. And the font color is very specific color. We don't have it in the style guide yet, but this is again only one instance of this element. So we'll just have it like this. We can later on at it as a swatch or maybe use the color that's close enough from the style guide to this specific gray color. For now, let's leave it as it is and let's focus on the feature Tiktok on top of the heading. This should be restyled and we already have a caption class that we can use in here. So let's select it and this will give us all the font properties. And on top of this, I'm going to create a universal glass for all the elements like this because this little feature thing and then design as or categories and all of those little bills are really similar. So let's create another class on top of corruption. And that would be blocked. Ok, and we need to change its layout to inline block so that we can add some padding and margins. What I'd like to do is add eight pixel padding from the left and right-hand side. And I press and hold Option on Mac to add four pixel padding from top and bottom and aspirin that design and for the radius, border-radius are going to use four pixels in there, as well as change the background color. And this is also very specific color that I don't already have. And the style guide, so I can just it like that with the hex value for now. So we have this tiling gradient, I guess that's about it for the left-hand side of our collection lists. So we have block hero that's almost ready. Now we can source the text from our collection. Let's select this getText from blog posts. And here we have linked collection category. We won't use data from categories, but you can see that those data is there. We'll use this simple name and excerpt from the blog post itself. So for the settings of this block hero excerpt also, we're going to use dynamic data from our collection. And here we have the title and the excerpt ready. Let's add some padding. I'm going to hold Shift so that I can add 38 pixel padding throughout the entire block hero. And one element is now ready. Now we need to create another element. This is already Flexbox. So if we add another d-block inside of the Lean block, this will be Hero loci hero image wrapper. It's going to be automatically placed to the right hand side and we'll have our photon side. So let's press a and add an image here. And then we're going to get this image from blog posts as well. We have the image field in there, so let's select this field. We have two images, a square and this 16 by 9 resolution image. We're going to select this one and we need another class for this image. Let's have block hero image and change some properties, especially the height. We're going to use 100% height and will need the feet to be set to cover. So that if we have it for field, let's, let me switch to 100%. You'll see how it looks. Not really good, but if we switch to cover, now it's really better. But also we need to define the width. And the width will define a specificly. As per our design, this is 650 pixels. So let's have it set like this, but also we need to make this entire structure wider. And we simply have too much over space to the left and right-hand side of the layout in this section. So let's switch to this section now and define its name may be section book hero. That's okay. And now let's have the margin set to be 120 pixels from the top and also 120 from the bottom. And for the container inside of this element, we're going to set the max. We do 1282 pixels as we have, and the design will need to do the same for the menu container. So let's select container to change its name so that it's more meaningful. This is block menu container. And also, let's set the max wait to 12 802 pixels. That's it. So now it looks so much better, but 40 has the wrong width, although we've said it explicitly to 650, something is overriding this width. And if we take a look at the link block, it's set to this by facts. And that's why it's children such as block euro and block hero image has this flex child properties. And if you take a look at sizing, we can set it to shrink if needed, and also we can expand it. So grow if possible, as well as don't shrink or grow. So this don't shrink or grow property is the right property to be set to our block hero image. It has the proper size, but we need to set it to just be displayed in this size. And for our block hero, we can leave it as it is, or we can even change its sizing so that it will grow if possible. So this is it. We have, this element is ready and we have all the data sourced from the CMS. We still have some minor tweaks, such as the rounded corners for the photo. Let's select the block hero image, and let's split the values for the radius. Set 12 peaks of the radius to the top-right corner and bottom-right corner. And this looks pretty good as in our design, but we still have this tablet and mobile versions to tweak. And I won't really spend much time in there because I feel that you already know it from ortho basic course. If you don't, I really recommend you to check out the course, but let me just create a few quick tweaks so that it looks pretty much accurate on different devices. Now for a book hero, I feel that this padding can be smaller on tablets. So let's press and hold Shift to change the padding. And also for the menu, I feel that it would be so much better if we centered the menu. So this is all flexbox, we can just justify it center. And now it will be centered throughout the breakpoints in here as well. So let me select this link block and change the direction to vertical, as well as change the position. Let's swap the reverse the image and the title so that we can select the image and change its properties. Let's reset the width to 650. And then let's change the properties for the rounded corners as well, so that we have this top and top-left, top-right corner radius set to 12. And after some quick fixes, I think that we have this pretty much accurate for all the devices and all the resolutions and what's most important dynamic data. So I see you in the next lesson. 13. Recent Articles: In this lesson, let's focus on the structure for the recent articles. And this structure is copied throughout all the categories. So we'll have last articles from software marketing and all the other categories. And on top we'll just have all categories and all the recent posts listed. So let's leave this section look hero as it is. This is super specific and this is only one instance. So instead, let's select the body and create another section that will hold the container for this specific element that could be reusable for all, for all the other sections. So I'm going to just give it a name book category section. Now let's set some basic properties for spacing. We're going to use margin. Let's set the margin to be 100 pixels top. And now inside this book category section will have container. In the container as usual, let's change the max width of this container to 1282 pixels. And this container for that's going to be block content container. And we're going to use it throughout all the other sections as well. We'll let the display to be flex, set it to vertical and align and justify it to center and middle. Now from the symbols, we'll have this header section that we can use. And in the header section, we have some overrides that we can make for the text as well as heading and description. So the first overwrite as from the blog, then we have this text and for description we'll just delete it altogether. And now this description text is visible as a container, but only in the designer. It won't really be feasible. The published page. So now I press a, I add the collection least wrapper and it will soon be linked to all our blog posts. But now let's select the collection least. So this middle container, and let's restyle it. So I'm going to add the class blog cards least to this and change its DSpace adding so that we have agreed we can easily use Flexbox. But for this purpose, I think that grid is also really great so that we can easily change the gap between the elements. So let's have it set to 24, as in our layout in XD. And we also need one more column. We need three columns and only one row. Ok, now we have the structure 40 elements. Let's close this greet. Also for the distribution, we're going to leave those settings default and let's double-click on this element to connect it to its source. Those will be blog posts. Now all we need to do is limit the number of blog posts. So for the book cards, the settings we have the source set to blog posts. What we need to do is to limit the items and we only need three items in here. Also, led, create the sort order so that those are only the newest articles. So we're going to set the published on and set the items to be us to order, newest to oldest order. Now let's set the Greek child elements settings. So down to the alignment is set to stretch. And we have the contents stretching from left to right hand side. And in this collection item, we also need to add the elements that will display dynamic data. Again, first, we're going to add link block and link it dynamically to the current blog post. This will be the blog post returned by this filter that we've created. And it will automatically link. So the whole cart will lead to this post. Now let's have a class for it. So this is block card and also block card collection item as its parent. Now let's add the content. The block, card link block, and we'll have a few information and discard. So first let's create the blog, and this will hold all of our tags. So let's give it a name tags, wrapper and InDesign. We have one or two tax in here. So we're going to create one textbook and then duplicate it. So the first one will be featured elements, so information about featured posts. And the second would be the information about the category. Now another debug that will hold the image. So this is Cards image container. And inside let's add an image element. And we're going to link it to our blog posts in a second. But first, let's focus on the styling. This is card image, so let's apply this class. Another d-block will hold the information about the title and excerpt. And usually before I add any dynamic content, I start with styling. So let's commentary turn. This class name card text. In this context will also have two more technical leave blocks. The first will be holding our title. So let's come on to return. Give it a class name, card title. And also we'll have one more d-block and that would be card footer, command return or enter the name card footer. So the structure of the card is a bit complex, but once we have, it, will just create one card structure and then it will be automatically duplicated so that we have headings everywhere. Those are free. Free headings also will have paragraphs and we'll restyle them a little bit later. So we have excerpt in here. And for the card footer, we'll also add some textbook. And that will allow us to just have three pieces of information about the author as well as the link to our posts. So first, let's give it a name card, author, the second text doc command return. This is a cart separator, just a simple graphical element that will add a little bit later. And also Card category that we'll have on the very bottom. So here it is, the whole structure of a card. Now all we need in here as some dynamic data. So let's start from our heading three, and that's the title of the article. So get texts from blog posts and we need the name. Okay, So this is super-simple. Now the excerpt and here days the excerpt and also we have an outdoor collection link to the blog posts. So if you go to the settings of this textbook, you can link it to the author's name. And then I'm going to put Just in and then the name of the category. So in that category, we can also select the name of the category because again, categories are linked to our blog post collection. That's why we can get the information from here. Again, we're going to use 16 by nine images and those will be linked from directly from this collection. And we need to link the feature element, featured elements. So let's change the name to featured as well as this is just going to be taken from the tag name. So this is designed. The second one is development and the third one, typography. Those tasks are also linked to our blog post. Now let's restyled featured element. It has captioned and block tag class and will apply to both textbooks. So first caption and then Command Return once again or discrete data and select block tag. The same goes for the other Tiktok this is capturing. And next, we're going to select block tag as a combo class. But in here what we'd like to do is to source the color of this category dynamically. And just so that you remember, we have those colors defined for each tag and in the dynamic style settings for this caption, we can get that background color from. And this is the tactical or is linked to our blog posts. So it's available here. Now, as you can see, design development and typography. They have background colors sourced from the color that we've specified in the CMS and the target collection. Now what I'd like to do is decide whether it is featured caption should be displayed or not. So let's go to this block settings. And then in conditional visibility, we can add the condition. So we want to check whether the featured flag is set to own and only under this condition the featured element is present. So now we have the structure for our cards as well as some dynamic data source from the CMS. In the next lesson, we'll do this dialing. See you there. 14. Cards Styles: Hi there, Welcome to the next lesson. And in this one, I'd like to show you how to style elements inside of our block card. Well, this is lesson from styling. So if you already know styling from the previous course, or you just feel master in styling, you don't really have to watch this lesson, but I like to show you some tips and tricks in terms of styling this block card. This is the most important element in our blog because those cards will be present on many different pages. So let's try to do it, right? So we have block cart in here. And for the properties of this element, I'd like to set the display to flex first so we can align elements inside of this wrapper. Let's change the direction to vertical so that elements stack on top of one another and then we'll have alignment set to stretch. I'm going to leave justified as is, but let's go to size and position. Now what we want to do is first day of the overflowing of the elements. I'm going to set overflow to hidden in case anything is outside of the boundary box of this block card. And this is quite important. I'm going to set position to relative. And this is mainly because I want to position our tags which are featured and design here inside of this block card. And I'm going to position them obsolete. Now, let's go to some settings for the background and change the background color to white. This is our brand 06 color. And also I'm going to have border-radius of 12 pixels. And for the box shadow, I'd like to add some subtle shadow and leave it for 180 angle. Distance would be 15. And then I'm going to apply 30 pixel bear or 35 maybe. But I'm going to lower the opacity of the black color. So let's go to alpha here and set it to five or 7%. And yeah, this is the shadow I'd like to have below my cards. Now let's make sure we have coarser set to pointer throughout this entire block card element. So that when the user hovers over this element, he knows that this is a link. And let's go to tax wrapper. So we want to position those tags inside of the log part element that's already positioned relative. So all we need to change is the position of tax wrapper to absolute. So now we have those elements aligned and tax wrapper is positioned inside of the block card element, which is relative. Now for the tax rubber, I'm going to set the distance from top and left, but let's first align it to top-left and then change the distance. I'm going to type 16 and Px. So I'm going to change it from percentages to pixels. This will be 16 pixels top and 16 pixels left align. So also I'm going to set this Z index just to make sure that you can always see those tags. And I need to select one of the captions and also set some tiny margin, for example, four pixels so that I can spread the elements from one another. Now this is going to be interesting. Let's select the card image and let's create card image that's spread fully across the element that containing elements. So we have wheat and height set to 100%. And then the fifth property I'll go and I'm going to set it to cover. Now the most important part, what we'd like to do is change the position of this element from static to absolute. This will be absolutely positioned. The full size of the parent elements. So I change it to full so that it's spread across all the borders. And own cards, image container, which is the direct parent of this card image. I'm going to set the positioning to be relative. Also to make sure that this cost image container has the correct width, I'm going to change its width to 100% of its parent element. And now, thanks to this magic, what you can do is change the padding on this card image container, and then it will reveal the part of the image that you want to show. Now if you want to have to hundreds pixel height of this image, you can just set padding to 200 or you can change it to, let's say, 54% to have relative values that will give you better responsiveness of this element. And this structure of the current element is really cool in terms of having the Carter responsive across all the breakpoints and things like that. So I guess that this might be helpful. And now for the other elements, for our card texts, we have title inside and heading and paragraph. Let's change the layout to flex again and switches the direction to vertical. For the alignment you're going to leave it as is. But for justifiably going to leave space, we're going to set space between so that we can have it nicely spread across the elements inside. And then what I'd like to do is change this paragraph inside. Let me change the background first, I need to set the background color to white or select one of my predefined colors. But what's more important now, I'm going to set the properties of this paragraph so that I can have a little bit more spacing between the heading and the paragraph. Let's press Command Return and create a separate class for this paragraph. This is kind of like special paragraph for us. So let's create a card excerpt class that we can apply a margin, top margin of eight pixels too. And also let's change some other properties such as topography properties. We have this color sets to one of our parent colors and we want to change it to some gray color. And we can obviously, you know, type in hex value. But what we also can do is use our predefined swatches. And it's always better to just use the colors that we have in the system. So for example, this dark gray color, instead of creating a new one. Or if you are creating new one, just remember to keep it in our style guide so that we can consistently used across our design. Now let's take care of card folder. We have card author, separator and category. All of them have separate classes. And what I like to do is set the inline-block property four, all of them, because I want to keep them in one line and inline block will help me accomplish that. All I need to do is for this card separator, I'm going to set the margin to the left and right side. So let's press and hold Option on Mac and 6.5 pixels or four pixels margin. And here I need to change some properties that change the text size to 10 and then hide to 13. We're going to have the same properties for both cart separator and card author in terms of topography. So we're going to change it to a silver swatch. And now when I look at it, I guess that it should be a bit darker so that we have more contrast between. The background and the author and the for that category, we're going to change the size, but we're going to leave the color as S because this will be the link to the category. So from this link, someone could just click on the link and go to category. And this link could be like override the link that we have as a block card. Now I changed the margin slightly so that they are smaller and I guess that our cards are almost ready. Well, we have to make sure is that this book cart collection item has the layout set to flex. And then for the alignment of the items, we want to change the alignment to stretch. And thanks to that, we're going to have the cards that are spread from top to bottom of the block card collection item. And the height of the background is the same. We have four lines here, we have three lines there. And everything looks okay. We're going to fix the position of the other in a second. But what I'd like to do is just preview this elements on mobile views on tablet. And we can already see that this is a bit too crowded, especially in the smaller tablet size. So what we'd like to do is probably on tablet, change the layout to that, that we have only one card in a row. But first, I noticed that we have this Arthur and here and section and not aligned properly to the bottom of this element. And this is probably because of this card texts container that's not spreading to the entire height of the parent element. So this is quite easy to fix because the parent element, so this block card has the layout set to facts in direction to horizontal. So thanks to this, we can set that sizing of each child to grow. But I'm going to do it in desktop view so that I have this property inherited to all of the breakpoints. Let's change the flex sizing of this element to grow of the card text. And now you can see that everything is fine. We have the author and also category displayed at the very bottom of the cart. Now let's select block carts least, which is agreed. I'm going to delete two columns. I'm going to just leave one column from tablet to mobile, horizontal and portrait. And we want to apply some kind of margin or padding. Now we can apply this a margin to block cards least, but I think it would be better to just apply this to the whole content container. And this content container is going to be repeated across our design and from tablet below we're going to have just a padding of this container set to 12 pixels. So that on mobile devices we have a little bit of padding to the left and right-hand side. So I guess we are ready with this, but we can now easily changed the cart image container padding. So dad, on different devices, we have different size of the photo. And thanks to this little trick that we've done with the padding, you can see that it's super easy to change the size of this photo. And for example, on this mobile view when it's too small, we can just apply bigger padding and here we have it. So this is one way of creating Bulletproof blog cards in Webflow. Probably there are a million other ways in which you can approach this, but I think this is pretty good solutions, so I encourage you to try it out and I see you in the next lesson. 15. Main Page Sections: Hello everyone, Welcome to the next lesson. In this one, I'd like to create sections for all of the elements book category sections that we have in category. So software marketing, mobile, and doctrine. I want to display a free posts of each category. And then what I'm doing right now is adding a div. And inside of this div, I'm adding this button big so that I can link to all of the articles from this particular category. Or in this case we have recent articles. I want to just link to all of the articles on my blog. So I have this extra button. I'm going to give this d-block a class name of a CTA button wrapper and maybe add some properties such as margin or maybe you have some padding inside of this CTA button wrapper. And for the settings of the button, what I'd like to, it's like the Buttonwood I'd like to do is change the texts to view, in this case all articles. And as a link type, I'm going to select the page we need to link to a specific page. In this particular case, we need to select block all posts. And this will just show all of the posts from the recent article section. But for all the other sections, such as categories, software marketing and mobile, I'm going to link to the specific category. So what I can do if I have this boilerplate of this recent article section, I can just copy and paste it a few times. We have software marketing, mobile and Blockchain. So we can just paste it four times and create five sections. For the first section, let's think of the settings for this section first, and we have this title at the top. This is header section, and this is a symbol. So if I go inside of the symbol and change it so that it dynamically links to one of my sections from CS. It will be the same throughout all of the instances. So I need to right-click first and I need to unlink this symbol, the symbol. So press Command, Shift a or just unlinked like so. Now I can edit the properties without worrying that it will change everywhere in each symbol. I can obviously change the styling and the header section class will stay consistent through all of the header sections. So the fact that I actually destroyed the symbol is not that relevant because we still have the same classes for all headings and they will inherit those properties. So what we want to have here is probably Blockchain, right? And how we can create, how we can link this category too, this header section. Well, this is pretty complicated because we can create a collection least Robert Wright. And then logical would be to link to stories. However, for those categories, we don't really know which one to select from here we know, we don't really know what posts are displayed below. We can obviously limit the items to one so that we only have one category. And what we can do is probably filter this category so that it shows the exact category that we want to see. So the first way to do it is maybe change the sort order to just have it created or update date or so. Let's have newest to oldest. And now we have software here, and this is simply because software is the newest category in CMS. If we go to CMS categories, you see that software is on top and this is just why it's displaying like so. So this is not really the best way to approach this because still it's not link to the blog post articles that we have. And the second collection item. And by the way, putting this heading inside of this collection least wrapper with blog posts is not really great idea because we'd have to filter. We have three posts, so it will just display three titles. Then we'd have to somehow get rid of two more. So sometimes it's just better to create separate collections, but we need to find a way to link those, those collections together. Okay, but before that, let's take a look at the collection list wrapper of our block card lists. And for the collection item, Let's set the filter so that we really have filter applied, so that we really have blog posts from one of the categories. So we're going to fill that up by category. And we're category equals software, let's say, or we can select from this drop-down any other category that we have, for example, marketing mobile or block chain. Let's save this. And now we have blockchain articles in here. If we have more articles and doctrine will have up to three elements. And this is bullet proof. This is really great because when, for example, someone changes the name of the category to blockchain articles or seminary, that it will still be dynamic and it will work. Now we have to figure out a way to link this blockchain to our collection item with the title. And we could potentially do it with the filters. If we add a filter here, we can obviously select the category with name that equals. And we can type in, we can just type in the name of the category. So we have blockchain here and obviously work. Now if we move the title to this category and we can just delete the sort order. And yeah, we can, we don't have to limit the items because we only have one element filtered if we move this heading to this collection and then select, Get the texts from categories and we need the category name here we have blockchain. Problem is that this is not so much bulletproof solution because what we had to do, as we had explicitly say, that we want the block chain as the name of this category. And what if someone changes the name of blockchain to blockchain articles? As stated here, the name has to be equal. It doesn't have to be like or something like this. It has to be equal to what we put in here. So this is really not that great because we have to explicitly put it in the input field. What we'd like to have instead of this input field, we'd like to have the least. Because when we have the least, then Webflow will automatically get the correct data. And this is the least that we had in the blog post collection. So I guess that probably you already know the solution for this problem might be. So instead of this might be a bit counter-intuitive. We want to display category, but we want to use category collection, but instead, we will use the same, the very same collection that we used for the block cards, least because what we have in here is the link category to this post that we can select from the list. And selecting from the list, again, as a great way to accomplish that because this will stay bulletproof. And whenever we or our clients changes anything in the CMS, we can change it. Now. The categories now is locked, so the source is locked. We cannot really say that we want blog posts here and why it's locked. Well, you have to understand that when some field inside of this collection least wrapper is connected to any of the fields in CMS. This will look our source and we cannot modify it. So in other words, if you see an a purple connections here inside of this structure, you just have to unlink the elements. So now I have this getText from categories unlinked. And if I go back to my collection least wrapper, I can now change the categories. There's no more lock icon here, so I can change it to blog posts. And this will obviously display as many items as I have blog posts in my CMS. But that's not a problem because I can obviously limit that with one item. Let's show one item and let's start at one. And now, thanks to this connection that I have inside of blog posts, that I have the categories link to blog posts. I can select category reference, and now I can reference to blockchain category. And this is bulletproof. Now I will have the name that I can link. Let's select the title and get texts from blog posts. And here we have the linked fields. Let's go to Category and let's link category name. This will always display the same category name as we have below for our posts. So this is the best solution. And the second solution, the second way you might think of as just putting the H1 element inside of this collection list wrapper for block cart least. But again, sometimes is, it's troublesome. Sometimes you want to have separate collections in one, let's say section. And you want to link those connections to different elements, but connected to one CMS category or one CMS list items. So here we have it, now it's done. Let's maybe splitted this lesson so that we can continue in the next one and change our button and also duplicated and create a more categories. I'll see you in the next part. 16. Main Page Sections part 2: Hi there, Welcome to the next lesson. We start right where we left off in the previous one. And now our challenge is to have this button to link to all the posts from the category that we have above. So above we have blockchain for now, we're going to change it to software in a second, but we have category and we want to link it. And maybe we also want to just change the name so that we have view blockchain articles here. And you know that when you select something in Webflow, some texts, you can obviously create a span to wrap this in a span. Now having a span will let us create a collection. So use the collection and inject the name of the category here so that we have view blockchain articles or views after articles. So we have this text panel inside of the button and CTA button wrapper. In this wrapper, Let's position ourselves here and press a to create collection at least. Then we want to obviously put the collection list inside the city, but on wrapper and the collection list item in here, we're going to have this span this button. Let's first double-click and connect this again, as we explained in the previous lesson, we don't really want to connect these two categories. Instead, we want to connect to blog posts so that we always have this link and it's linked to categories so that we can display the name that's naming the items to one. And then let's filter this so that we have the category name here, again, the same as we did for the title. We have the select with blockchain, so it's bulletproof, great. And the problem would be that it's impossible to use this collection dynamic data in span. But let's first put the bottom end collection item. If you can't hover over and position yourself correctly, if it's red, sometimes it's just best to copy and paste the element instead of trying to, you know, just move it around. So I'm just going to copy the button and then click on the collection item itself and paste it with Command V. Now it's inside and you can delete the old one. So let's select and delete it. It's usually how I do it when I can't really, you know, position myself and the navigator. And now we have this text span and theoretically it's in the collection and the collection item. It should have the source of the data that we have in CMS, but it just doesn't, so, oh, doesn't have it for now. Maybe in your version of Webflow, some new releases, it will be fixed. But for now, I can't really just apply to a span. Instead, I could obviously apply this to button big element and get the text from blog post name and collection name. And here we have blockchain, but it's not really intuitive. It should say View all blockchain articles or view blockchain articles instead of just blockchain. So what I can do is just recreate the structure of this button in a link block. So let's select and create a link block. And let's recreate the bottom with proper elements. So proper textbooks that we'll create will have one textbook in which we'll say. A view and then we'll have the dynamic data coming from the collection. And then we have another textbook. So this is, let's say here, let's go to styling and set the inline-block before we paste another one because we want to copy and paste and we want to have it in one line so it's best to apply it first. And there will be collection name, so XXX for now and then it will be view blockchain articles. And now what I need to do is to have this link. Yeah, let's connect this to blog posts. And then let's connect this to category name. That should display block chain properly. Also, I need to correct a typo and I need to apply some classes probably here we have the link block without the class, we need to use the button class probably. So let's use button big class, and this will automatically create a nice button for us. And for the textbox. Let's get rid of the textbook class. And instead, I'm going to just create button text class with white color and some properties. Let's say display inline-block, and let's use white color for this text. What you can do is just delete the old classes from the other textbooks, remove and apply the new ones. So button text. And also for the last textbook. For this middle block chain texts, I'd need to select it and apply a combo class so that we can apply some padding or margin around it. So let's say this would be category, but on the next category. And now let's apply some maybe four or five pixel padding from each side. So I'm going to press and hold Option and, and give it a five pixel padding. Okay, now we have the button restructure recreated. We can delete the old one and we have what we wanted. So the block chain is now dynamically linked to the category name. And we have this block category section as a template. We can actually use for all the other, for all the other sections on our page. Let me also create a combo class here, block section. And let's add some padding here, some margin to the bottom. Now it looks better. We need to create this one template. We can get rid of the old ones so that we can just reuse it now and copy and paste. And all we need to do in those sections now is change the connection to the proper category on each three of the elements. So we have button title and also the content. And we need to change it so that the first collection item is linked to not block chain probably, but the first category of RSS software, save it. Then we have to go to the second collection, least rubber and link this to software as well. And also for the button, remember that we need to change the button text. This view blockchain articles in this collection list wrapper. Let's select software and this will automatically apply the software name to our button. So we need to repeat those steps for each category now. But the concept that I've created here is more important than clicking right now, the concept is we have theoretically separate collection lists for the button and title and cards, but they are inextricably linked together. And if we change anything, for example, the name of the category or we reorganize the posts. This will all be dynamic and work together. It won't break. And that's the most important thing. If you have CMS and you have editor option enabled, someone can just change the name of categories, changed their name, names of the blog posts, and reorganize them. And this will always result in you having to fix all the connections in your, in your page. So it's better to think in advance and discrete structure that will allow for those changes and dynamically adapt. Now we have all the categories linked, we have everything in place. Let's also use the symbol. I'm going to just put it on, on my body elements. I'm going to use this footer symbol at the very bottom of the page. And I think that the structure for the homepage is now ready. We can preview that structure. We have the feature article. All the data is dynamic. We have the menu which is Dynamic 2. All we need to do is create this blog post page. We already have this linked properly and we have some CMS elements with blog posts, but we need to create the design. Let's do it in next lesson. 17. All Posts Page: Hello there, Welcome to the next lesson. I'm really happy that you're here, especially because now that we have everything in place, we have our style guide and we already know how to work with collection items. It will be super easy to create new pages and organize our blog. Now we have this menu. Let's change the name from fixed to block menu and we can create a symbol out of it. So before we create any new page, remember to create symbols, to add new symbols, you can add it from symbol menu and you can also right-click on the element to create a new symbol, you just have to make sure you click on the block menu itself, Right-click and then creed symbol, make a menu symbol. And this way, we'll have this component. And this component will be the same at all of our sub pages. Now let's also copy section block hero and let's go to block all posts to create this page. First, I'm going to go to symbols and use our block menu that we've just created and then paste section look hero. From here, we don't need this collection nice wrapper. Let's delete it, but I'm going to use this section block and container and book your title. And inside of this selector, I'm just going to paste what I have in my style guide. Let's go to symbols once again and use a symbol of header section. This is pretty much perfect because it has the layout set to Flexbox and we have the right justification. So this will fit right in. And now let's go to its properties. You can see that we have all the overrides that we can change in order to set o articles here for the caption texts, we're going to use blog and description text. I'm going to just leave it as is for now. Now for this block hero title, what we want to do is add another combo class. So let's create the class that won't really destroy all the other instances of this element when we change something. So I always just copy elements and paste them over the different sub pages. But on top of the existing classes, if I want to modify something such as padding in here, I'm just adding another class. If I just leave it as it is, it will automatically modify this element on the homepage as well. And I don't really want that. So let's have piling of 80 pixels. And here we have it. Now we reuse three elements and we can reuse even more elements, including this entire block content container section with collection least rubber. Every time I see something that can be reused across my entire website. What I do is try to put it in the style guide. Somewhere. In my style guides, I can have separate pages for all the components, but in our structure is pretty straightforward. We don't really have to have separate pages, so maybe let's put it in this container while we have cards. And now I have this reusable element. I can give it a name of block carts wrapper and also create a symbol out of it later on so that I can reuse it. But for now it's enough for it to stay in my style guide. Now what I can do is go back to the homepage and copied entire block content container that I will, or maybe entire section that will position it as well on this blog post page and paste it here. Let's go to this page and let's click on the body element to select it. Now Command V to paste the entire section. It's always best to paste from the body element because it won't have any conflicts in containers. Now as the title and the bottom, and here we have the collection least wrapper. All we actually need to change in the collection of these rubber setting is not to limit the items because we want to display all of our blog articles here. So I just unchecked limit items. And here we have it, it's ready. The block 0 post pages almost done. What I need to do is add another class on top of this block category section. Again, I don't want to modify the section that I had on the homepage so that I'm using combo class to do it. Now, we have margarines both for section B, hero, the hero and the category section. So first we need to section book hero, select this and add another combo class so that we can get rid of this margin bottom. And let's have block or posts here. And that gets rid of the smart grid. We can get rid of it altogether and, and reduce it to 0 pixels. And then from the category section, look category section, we can change this margin. Again, we have separate combo class for it so we won't change anything on our homepage. And now we have the Morgan Asper that design. What else we want to do here? Well, you can create on this collection least rubber. You can also create pagination means that when you go to the settings, you can check this little paginate items option and then you'll be able to decide how many items from the collection you want to display per page, we have five items here. You can preview two pages that were generated because we have 10 posts, so we have two pages and you can switch between pages. And as you can see also, we have at the very bottom, the previous and next buttons that are being displayed by Webflow, we can have nine items so that we have three rows. It looks pretty good. And also when you click on this Next button, you'll go to the second page. We only have one element here now, can obviously style next and previous buttons. If you select this button, you can also show page count, and this will display the number of pages at the bottom of the button. So here we have 2, second page out of two, and here you have FirstPage out of two. And if you go to the appropriate page and select this button, you can style it as you want. For us, we already have button big class and also outline class that we can use altogether to create the button according to our style guide. And the same thing we want to do to the previous button, but in order to have it selected, Let's maybe go to the second page and let's see what we are doing. Again, apply this class bottom beak and then combo class of outline. And here we have our button styles for this page count. I think that I don't really need this, so I'm just going to de-select it, but you can style it anyway you want. And for the entire pagination element that you can select from the Navigator. Now, let's set the class for this element book bag nation. And also let's apply margin to the top of this element. Let's say 26 pixels. Now let's preview our pagination previous and next page, it works. So everything is ready. We're almost ready. By the way, if you want to use some kind of different pagination with numbers, something like that. Well, it's not really possible in Webflow right now, but the pagination that we have with just a few clicks, I think that's pretty much okay. Let's also make sure that sort order is correct for this particular block oboes page. And it is because it's from newest to oldest based on the published date. So that's okay. I didn't really need to change it. One more thing that I can add to this book, oh, posts page is my footer. And you can do it by selecting the body element and go into symbols. Or you can just press Command E and then search for footer. This is really handy way of finding elements Command E, and then you find anything in Webflow. As you can see, I have all posts selected right now because I'm on this page. And if I want to change it, this is a component. It means that if I make changes to HTML, that will be available throughout the entire page. So if I change it to 0 articles and go back to our blog page, you'll see that there is all articles here as well. So we're pretty much ready with this page. And as you can see, reusing elements and techniques that we've learned is really efficient. See you in the next lesson. 18. Categories Page: Hi there and welcome to the next lesson. Now we're going to work with dynamic CMS pages. So let's go to CMS collection pages. And here we have categories template, this page is purple and those are special pages generated by CMS. They will let you preview the individual items. For example, right now we're previewing block chain and items. And also these pages has some more superpowers. I'm going to show you them later. Right now let's create a basic structure for these categories template by adding our menu as well as our footer and in-between, I'm going to just borrow something from block or posts. This header is pretty cool. So let's select section block hero, and let's paste it on our categories template between the block menu and the footer. Now let's go back to block all posts so that we can copy it even more. Now as you can see, we are a bit lazy. We don't really want to create new elements. Instead we're just copying and pasting. But this is really good because we have everything in place with the same classes and the same components. When we change it on one page, it will automatically be changed on all the other pages. And we're gonna do this section block hero in a second. But first, let's make sure that we have block category section linked to the proper section. Let's select the collection least wrapper. And here we have to filter. And this purple pages, the CMS pages automatically generated, have this great advantage that they can basically link to the current element, to the current item in CMS. So in this case, we have categories linked, so we can link to current category. This is pretty unique to this purple pages. And thanks to that, we'll be able to click through the menu on software marketing and mobile. And it will automatically get the post their articles from currents category. So this is pretty cool. We're going to leave it to currents category and save it. And all we need to change right now is the old articles section here. We need to get to this old articles header and replace it with current category. But what we can do is borrow the element from, I guess the blog page that we've created in here we have this section titles and those are collections and they link to the appropriate element. So we can borrow the entire collection least from here. But by the way, we can use collections and I'm doing that to show you that we can also use collections on categories page. But if you are on category pay on this purple page, you don't really need collection. You can just select the header and use the data categories straight away. So there are basically two ways to do it. Just select the header or, and use the data from the collection category name. Or you can use the collection and then you can link it, in this case two currents category and have it displayed as blockchain. Two ways. I just wanted to show you that, and I just want you to know that you don't even need this collection for this to work, you need to unlink the instance of the symbol, select the header, and change it in properties. The other way around is to use the collection. And you can use collections on this purple pages as well. So there you have it. There are some special things about the purple pages that we've explored right now. All the categories are working and displaying correct names as well as articles connected to this category with pagination. So we are almost ready. What we can do is also create the separate pages for authors and tags. But this would be the same process like repeating ourselves. So I guess that you can do it by your own. And what we're going to focus on as blog posts template, which is the page with actual content of our articles. So let's focus on that in the next lesson. 19. Blog Post Page: Hi there, Welcome to the next lesson, and here we are in XD. This is the mockup for our blog posts single page. On the very top we have an image than the content. Then at the very bottom we have some linked articles probably from the same category. There is a title as well and the information about when this post was created by who and at the right, we have just a static section with newsletter and the section that will allow us to share on social media. So without further ado, let's get started and let's create our blog posts template page. This is the purple page. It means that we can switch between the block items here. Here we have the first book item, but we can just go to whatever article we have. Remember that those were articles automatically generated by Webflow and our CMS. So we don't even have to create some dummy data. We'll be able to switch between them. Let's create the basic structure of this page. So we're going to add a component that is our header, also an ESSEC, we're going to add a footer, but between I need this section became 0. So I'm just copying this section and I'm going to paste it on my blog post template. And by the way, I've already told you in the previous lesson that we don't really need to use collection items on purple pages. For example, when we have, let's say heading, we can get text from blog posts for this element without having to have this collection items. So we could do it in the previous lesson as well. But I wanted to show you a collections. But on the purple pages we can use the data from the collection directly without any need of having this collection least rapper, what I'm going to leave in here is just the structure with block hero image and four loci rotated. I'm going to add another combo class so that I won't modify anything on my book page. And this will be blog posts. And now let's change the properties of this to have the height of 80 pixels Asper design. And for the block hero image, I also want to add a combo class. Let's create blog post-class. And let's have this image spread across entire container. So let's have a width of 100%. And also we need to change the border radius so that we have 12 pixel radius at each corner. As we copied that, this picture is already linked to the article. So when we change the article, we can preview different picture. We have different photos for each article. Now let's add another element we're going to create section. And inside we need a container. This section will be section for our article. And I want to split it into two columns and create this from scratch. We know from the reuse elements because it's pretty unique. I'm going to give it a name, blog posts section. And for the container itself, Let's create blog posts content for this container, I also want to set the max width to be 1080 because I want it to be slightly. Smaller than the entire page. I want the contents to be readable. I'll split it into two columns, but still I want to have, let's say, 70 or 90 sign-ins per line so that it's most comfortable to read. Also, I'm adding 20 pixels of padding at each site for this blog post container, this is pretty cool because in tablet and mobile will have this padding set to 20 as well. And this will be responsive now, inside what we can use as either columns or we can use simple d-block with Flexbox or we can use grid. And I think that grid is kind of the best, the most versatile We cannot hear. So let's have agreed with one row and two columns. Now we can access this greet That's apply these changes, rename the class to blog post section. Let's change it to blog post greed. And now let's edit this great ones again and change the fractions, change the size of the columns because I want this first column to be, let's say 1.75 or two fractions, and the latter to be one fraction so that we have this aside sidebar that's narrower than the actual content. And inside of the grid we're going to add to the blocks. The first will be for our blog post content. Let's rename the class. And the second one, let's create this d-block. That's going to be for yellow. Let's put it in the blog posts, greet, and that's going to be for our aside, aside section and newsletter as well as sharing options. So we have the proper structure now, section container, greet and then content div. This is the structure that I mostly, for most of the time I use for this kind of tasks. And now what I want to do is recreate this title and caption, as well as information about the date and author. So we don't really have anything that we can reuse. So let's create another d-block that's going to be blog post title block. Inside of this title block, I need the structure of the caption. So I'm going to use textbook here. Then again press a to add another element that would be our header. And again, you can use search in Webflow to add elements. You don't really have to select them from the menu. You can press Command E and then type paragraph or heading, and you're going to have it. Here we have by someone, by author and then on the specific date, for example, Gen 5. Now what I'd like to do, I need to change. I need to have this data dynamic. And as I told you before, This cannot be done, at least in my version of Webflow with a span. So it would be the easiest way to wrap this with span and then go to settings and then connect to the appropriate data from CMS. But it's not possible. So I need to delete that and I need to create three elements just as we did, just like we did for the button. We need to create a multiple text blocks. The first one will contain the information about this. Let's give it a name caption, blog, post. And the first one will have the information about the author. Let's change this to inline-block. Then we're going to have the information about the date. So let's make sure that we have property set correctly before we copy and paste that multiple times. When to use dark gray for this. And now we can copy and paste this two times or three times yet because we need BY and then the name of the author. Also, we need to split it with text on. Then we're going to have the proper date. Okay. So yeah, that's pretty inconvenient that we have to do it like this. But as a writer, we need some margin to the right-hand side. Four or five pixels is usually enough for one space. And now our heading structure is ready. We have few textbooks. Let's select the first one. This is captioned, so let's press Command Return and use our existing class caption from the style guide. And I think the blog post title block is ready. Let's look, look post content and add another element in here that would be paragraph. And this paragraph is a special one. So let's create a class for it, blogposts excerpt. And let's create margin to the bottom and to the top. We're going to add 32 pixel margin. Also, we need to change some text properties according to our design. So let's change the font, weight and size. Let's use 22. And for the line-height, we're going to use 32 pixels. And this is as per our design. Now let's position ourselves again at the blog post content and add a rich text element. We have reached text in our CMS database. So the type of the field that we use for the article content is reached text. So now we can use this reached x block to format the entire article structure. And this is pretty cool because reached x blog has actually separate styles and we can style it in our style guide, and we already did so we have blog article as a class for our rich text element that should be used on blog posts template. Let's select this rich text block and give it a class of blog article and does it. So we have it now copied and times are the same as in our style guide. And now our structure is almost ready. Oh, we need to do is add another component that will be our footer and also create a structure for the site actions. So before we do that, maybe let's select the elements that we want to apply dynamic data to. Again, we have this purple page so we don't really need collections in order to link it to the data from the blog post collection, we can get the text from blog post here. And that would be our caption. So we need to just scroll through the category name. And as a caption, we're going to use category name for the actual heading. We use name of the posts. And here we have some dynamic data as well, thanks to the connections that we've made in our CMS, we have outdoors and everything else linked to the blog post collection. And this is how we can get this data from CMS for the date we have two dates here automatically added by CMS, updated on and also published on. In this specific case, of course, we want to use published on and also Webflow. Let's format this date here we have June 2006, but we can change how this data is formatted and displayed on our block. There are few different formats that we can select from. As you can see, a lot of them actually, we can display the entire date. We can use only month or day, and yeah, we can do whatever we want with this date. This is pretty versatile. Let's leave it leg as S, and now let's get the copy from CMS for our blog post excerpt. I'm going to link it to the excerpt. And for the block article, we need to link the entire article to the field that we have. And this is content. You can see that this is reached text element. So the type of this property in the CMS is also rich text and that will allow us for just linking the data from this field to our blog post content. Okay, so here we have dynamic data to left-hand side of our blog post page. If we change the posts, now, you can see that we have different title, different section and author and so on. So everything is working correctly. And that way on the purple pages, we can just select different items from CMS and we see everything. Now in the next lesson, all we need to do on this page is created site actions that will be newsletter and sharing options. See you later. 20. Post Page Aside: Hey, nice to see you in the next lesson. And if you think that you might miss some lesson in between, Nope, that's not the case. I just created this newsletter rubber and social wrapper just in-between lessons because it's super simple structure that you already know from the basic course. So I thought that it would be better to use your time not to just create containers and alignments, but to show you something really important and something more exciting than this. And this is the newsletter rubber structure. We have paragraph and form block. Inside of this form, we have just an email. What I did is I just copied that from the footer and change the size slightly. Then we have social wrapper with paragraph and d-block with three social media icons. Those are links and on hover, they have this another state that will just change the color of the icon. That's it. Super simple structure and we can continue, we can make this structure fixed on our website. So let's go to the position property and we can change it to either fixed or sticky. We've used fixed for our navigation menu to just dock it to the very top of our website. But the difference between fixed and sticky is that sticky will work and just put this element in place, depending on the user auction, depending on the scrolling, scroll position of our website. So if we take a look at this very top pixel of the browser and Topsy pixel of sight actions. We can just make a dependent of one another by changing this property to let say 0. This will make it stick at the very top of the browser. Our top pixel of this site actions reaches the top element of the browser. Now 40 alignment I'm going to use start in case this is greed in order for this to work properly. And now I have this set to 0. So when those topics offsite action reaches the 0 pixel of the browser. So the top of the browser, it will stay sticked at this very position. What we want to do is offset this a little bit so that we have the space for our navigation menu as well as some, a little bit of padding below. So let's have 100. And this will offset the starting sticking point of the seduction elements to 100 pixels from the top. So when we reach 100 from the top, it will stay as S. So it's even better to preview that using our preview command Shift P. And here you have it. So now it's nicely docked to the right-hand side. And this is basically all we have to do in order to have this element stick in this place. In the meantime, I've noticed that in my design, I also have this TOC element on the photo. So I can borrow the TOC element with this collection. Probably. Let's have it copied and pasted on our blog post template. Let's have this tax wrapper here. This is set to be absolute position 16, 16 pixels. Now it's positioned to the body. But if we change block hero titled position, so that it's a relative, now it becomes the relative power. And for this tax wrapper, and everything looks really good. So in this tags inside we are displaying the tag as well as featured element depending on whether this post is set to featured in our CMS. Let's recall, let's go to its settings. And here we have the condition when the feature is on, it will have this feature displayed. Let's see if it works. Let's go to our blog posts. Collection and that's select this very both. This is 15 best blocks to follow. And let's change featured to sweep feature, switch to on, Save it. Now we don't really have to publish in order to see that in our designer. And featured is now displayed so everything works correctly. But if you want to see that on your working page, you'd have to publish this and then you can preview. Okay, now the other thing that I'd like to do is at the very bottom of the post, I would like to display the list of post.html be well worth reading. So I'll go to the blog page and copy this entire block category and paste it to our blog post template. So let's select the body element, paste it to the very bottom. And let's see this section. This section is made based on the collection, at least items and I don't necessarily have to use collection least on the purple pages, but I can. So why not? So now I need to change this heading. I don't want it to be dynamic. So let's uncheck this getText from the blog post. And let's say that it's going to be continue reading three dots and delete the bottom. I don't need the button. Let's reposition this section above the footer. And now all I need to do is make sure that I have the correct post displayed in here. If I check the collection least settings, you'll see that it gets the posts from categories, software, what I need to do, and I can't do that when I'm on the purple side, is to select this category of current blog posts. So it will automatically intelligently know that I'm on this software within the software or blockchain or marketing category. And if I change it, let's say to this post, we here have the posts from software. If I change it to the other one, that's indifferent category. Now we can see the posts from marketing. So this is pretty cool. All obviously, you can determine how many items you would like to display here and you can determine the sort order, which is now newest to oldest by the published date. So let's, let's publish our website and let's preview that in the browser. After you publish, you can go to the homepage and you can see that we have this featured post, the newest one with the flag featured that's displaying dynamically. We also have all the recent articles and articles from different categories here. Then below we have articles, recent articles only from specific categories. And we also have links and buttons that link to the proper page that will allow us to display either all the articles on our blog or the articles from specific category to this category, you can also go from the menu. And finally, if you want to preview the exact post, the exact article, you just click on this article and again, all the data here is dynamic. You have the post content and photo information about other posts that are worth reading. And I guess the base structure of our website is now ready. And you know, everything about CMS collections and CMS pages. 21. Search Setup: Hi there, Welcome to the next lesson and let's access our navbar. So this is a bloke menu component. Inside of it we have Menu section with brand and navigation menu. And in this section, I'd like to add a specific component from the other menu. This is search components, so let's click on Search. Let's add it here, and now we can restyle it and we can edit search settings. So this is surge that will allow us to search for the CMS elements and display it on the separate search result page. I'm going to show you how to customize both the search component and this search results page. Now, what we want to do as position the elements, so we have this surge and inside there is an input and buttons. So for discharge we can display, set display to flex and then align and justify it to the center and middle. Here we have an extra padding that we can reset. It's enough to option click on the element to reset it on this number, or just select 0 in here. And for the search button, we also want to reset the padding or changed slightly so that we have seven or six pixel padding. So this is inline with the search input field. Now for the entire component, I guess we have some extra padding in here as well. Let's reset. It says select 0. And now we can restyle it slightly so that we have nice styling for this element, both for its static state as well as hover state. What I'd like to do is set the border style to solid. And I want to set the solid border to the bottom of the search input. Let's select this maybe dark gray, dark gray, and color. Okay, also the same styling for the border I'd like to have for the search button. Oh, okay. I have to set the style to solid, right? And for the search button, I'm gonna do the same. And let's change the color to transparent, this background color. And let's set the border bottom to be solely and this dark gray color, okay, and later on I'm going to change the opacity of this element based on user hovering on the search element. But what I'd like to do right now is change the search button into an icon. I'm going to go to Project Settings for my workflow site and go to fonts. I need to install fonts. I already have installed from the previous course so you can check out the basic course and how to install custom fonts. What I did is I've installed this Font Awesome by clicking on the upload button and just installing the TDF fonts. I have FAA for a 100 brands for a hundred and nine hundred. Now I can use, so that I can use icons from Font. Awesome, Let me search for a search icon and now copy this icons glyph to the clipboard. So let's copy Unicode glyph. Click on that. And now I have this icon ready to be used on my website or my page. Let's go ahead and access the search element. Once again, I need to delete everything that's in there and paste this glyph. Okay? But now I also need to change the typography so that the font here is FA, SO IT night hundreds. And obviously I need to change the font color to a dark gray color. Once again, let's click on this and here you have the icon. Now we can adjust, adjust the size, the font size to change the size of the cycle. And this is how you apply custom font awesome icons to the elements that you can now use as buttons, for example, in the search menu. Next up, we're going to adjust this tile so that we have the spacing correct. Let's position it next to the logo. This is maybe not the best way to position it. And also you'd have to check the tablet and mobile versions. But I'm going to leave you with that. This is not the most important thing, but what we're gonna do is create this on hover state for both search input and button. And what we're gonna do is for the whole search component, we're going to lower the opacity down to about 40 percent in this static state. And while hovering on this element, we are going to change it to a positive 100. Now if you press Command Shift P or click on the icon to preview, you can hover over this element. And here you have nice effect. If you want this effect to be animated, you can also create the transition effect, or you can create your own custom animation in Webflow. This is something that we've already discussed in the basic course o here in the settings you have the button to go to search results page. And alternatively you can click on the pages and in utility pages. Now you have search results page that you can style and you can adjust it to your needs. Here you have the container, there is a heading with search results. It's static. And what I'd like to do is create a new class for this search result container. And just slightly offset it from the top of the page with the Morgan. And here you also have search inputs such as buttons of the same structure as we had an, a search component. What I like to do is I want to use custom classes for this search to automatically generated class name. That's okay. Now let's create this from scratch. I don't want to copy the same styles that I have in the navbar. Instead, I'd like to create a bit different looking search input and search button so that we can have them spread horizontally across entire search results page. And also maybe let's apply some styling, may be some rounded corners for this element. And the second we're going to move to the search results and I'm going to explain how it exactly works. But now let's apply 12 pixel margin to the top and the bottom left of this input, and also to the top right and bottom right to the search button. Now, for the search results, we have something that's called search results wrapper. And this is kind of a special, so we can call it this way, special collection of items that will display all the search result items. This is very similar to the collection list. As you can see, we have one item and if we restyled this one item will fleeing and textbook and paragraph. This will be automatically inherited through all the items. And as this is something like a collection in search index, it will give you some data from this collection, such as page URL and search title and search excerpt. And we'll be adding and using all of these fields in a second. But you can just treat it as. Power collections, something like a collection. And remember that all the data is here and it's pretty similar to the collection least that we use in style. So pretty straightforward, right? We have linked, textbook and paragraph in here. The link is now the title of this element, but you can use, for example, image to add an image to the search results as well. And now if you go to its settings, you can get image from our search index, index parent collection, and then select the search image from the OG tax for this particular page. So why we've added the collection, sample collection items to the blog posts, it automatically, the images as well. And those images are used in Webflow as OG images in the page settings. So now insert, it automatically collects those images from OG and it displays them as the search image. Pretty smart, right? Okay. What we can do here is create a proper structure for all these elements. So for example, create one big link block. And inside of this lingual block we're going to add some technical diff containers so that the first one will contain the 40, and the latter will contain the textblock with title and maybe some description. Let's create a class search results being, and here we have search result images and also search results texts. Okay? Now, we can move elements around right now and position them in the correct sections. But this link cannot be really moved inside of search results. Text does because we have one link and we can't nest link inside of one another in Webflow. So let's delete that link. We're going to add this later for the textbook. Let's see, we have this page URL that's basically taken from the collection. We don't really need this URL, so I'm going to delete that. And I'm going to just use this paragraph. The paragraph is taking the texts from something that's called snippet. This is plaintexts and it's automatically generated also from the page that we link two, we have paid URL, page, search description, search title, and also a snippet. So where can we access those details? How can we adjust them? I'm going to show you that in detail in next lesson. But let's take a look at the properties of this page, Let's say this local post page. So every batch has the general properties and SEO settings. But what you're interested in is Site Search Settings, and those are the settings that we can use there. So we have such title, dancers description and search image. As you can see, those are the same as SEO, title tag, description tag and graph image URL. It means that it will automatically collect the data from the previous tab, this SEO Settings. And here we have block 0 posts for example, at some meta description. And this is where it gets the data for search, for displaying in the search results page. So we'd need to use this meta-description and created here. Or we can just uncheck those checkbox and create our own descriptions for search results. Results specifically. Okay, let's create the structure first. So let's get back to the search results and a heading that would be heading for. And I'd like to display title. So the name of the search results here, let me get the text from search results and display the search title. And that's almost it for the structure. But I'd like to make this a link, make this entire result a link to our search page, from our search badge to the blog post page. So I'm going to set the GET URL from page URL for this whole container, this search result Link container. That way when someone clicks on that, he'll go to that post. That's it for now. Let's continue in the next lesson. 22. Advanced Search: Okay, welcome to the next lesson. We just start right where we left off in the previous lesson, we have this search result link. And now let's set the cursor to pointer so that UX wise, this is more intuitive that you can click on the search result. Also, change the display to flex. I'm going to leave all the settings as they are, but we need to take care of the photos. As you can see, sizes of the photos are different and that's okay, but we just need to make sure that their display properly. So let's use search result image as a new class for this images and change the max width to, let's say 200 pixels. And also let's apply a border radius of eight pixels and a small margin about 18 or 20 pixels. And for the result, items are also want to create a new class search result item and spread those items 25 pixel margin, and that would be fine this way our search page is almost ready in terms of styling, I think it requires on the just slight adjustments. For example, let's add some margin to the top and bottom of the search element and on the body element, Let's go to Components and let's paste our components. We need to have further, and we also need to have navigation. So the block menu at the very top, this page as well. And this generates a slight problem for us because what we have here end in the blog is also another search. Let me just move the margin slightly and addressed this search box because now we have two search boxes on one page. And this not what we expect, we can't really deleted from the blog menu because this is a symbol and I want to keep it a symbol. That's why I want to inspect this in the Preview, right-click and inspect and see what kind of class this is. This is surge W for W dash form. So let's copy the name of this class that I've found and developer tools. And I'm just going to set display none to this class, okay? So this will hide this element whatsoever, but only on this search result page. So let's go to the search results page settings and we're going to add some custom code in this custom code element. We're going to save it. And you can, by the way, add custom code inside of head tag. And also you can do it for me Just before the body tag. In this case, we want to add styles to the head tag. So here we have style, type, and here we typed text slash, css and insight. We can override some properties for our CSS in Webflow. So we need to address this very class, so search and then W4 form, and we want to hide it. So let's set the display property to numb and save it. This won't be visible in the designer because we have to publish those changes in order to see the preview, how it looks. So let's publish. By the way, there's a way to see this changes to CSS, simple CSS changes in designer directly. And this is thanks to HTML ambit. So you can alternatively use HTML embed and then use the same code and that would be visible in designer. Right now, we can see that after we published our page. And again, this is really cool because we. Have to search in boxes right now. Yet we have this component in tact that is on the top of the search result page. And for example, if we change category name or something like this, it will be automatically changed throughout our search results, results page and propagated here as well. Okay, In the results we don't really see images, but this is due to the fact that our search is just a sample search until we publish this with Webflow, CMS, search is using elastic search mechanism that is a back-end mechanism that has to be hosted before we preview the result. So on your static published page, you won't really see the result of the search. You only can see the sample results so that you can style this element. Now if you go to search result wrapper and its settings, you can see that you have the results like how many results we show. Then snippets length will let you truncate the text of the snippet. So depending on the layout that you've created, maybe you want to display 180 signs or maybe less or more. This will propagate again across all the search result links. And also you have an option to highlight search terms in a snippet. It means that if you use an a phrase and it's inside of the SNP at the same phrase is in the snippet or in the title. This will be set to bold. Actually, this will, this will bolt out this phrase. So if you want to, let's say highlight it in blue or maybe yellow, you can just change the default styling for bold elements in Webflow. And then you apply this style to do the very phrase that someone is looking for. And that's pretty useful. Okay? What else do we want to do? What else can we do in this search result, rubber? Well, there are some advanced settings that you might use to include or exclude elements from indexing within the search. Obviously, sometimes you don't really want to index all of the elements on your page. And you want to exclude entire pages or just some section of the pages from being indexed and displayed as a result of search query. So for example, if you go to our blog or block all posts and you decide that you don't want this block all posts page to be displayed in search results. What you do is insert signed settings. You just select this checkbox to exclude this patch from search site results. This way. When I type anything that's contained within this book called post page, it won't show up in the results. Another way in which you can address this elements, for example, for utility pages, you also want to make sure that those are not included in the search. So let's exclude this page from such site search results. By the way, I think that Webflow does it by default, but what you want to include mainly is blog, post page. So blogposts template. So this one, you have to make sure that you have this included in search results because mainly we want to enable our users to search for specific blog posts. And here you have this descriptions which are basically the same as SEO, title dark and description dark. But you can make them different. And what's interesting in here is when you unlink it from the SEO title tag, you can use fields, you can use custom fields. And if you click on the field, this search title can be enriched with the data that you have in the description in the CMS. So. From this blog posts templates you have connected all the different things such as accept and name of the blog post name of the article. And you can create a structure, for example, name space, dash space, and then for example, category name. And this will then display as the title of the search results. So that's pretty cool. And oftentimes you want to modify those settings and just set the correct name so that this is more intuitive for your users. Let me go ahead and save it. And also I mentioned that apart from excluding entire pages from your search results, what you'd like to do sometimes is exclude some portions of the page or sections of the page. So for example, if you take nav menu that we have on top of every page, that will be useless to index results from the nav menu. Because then if someone would search, let's say for software or marketing or mobile, then this header is on every single page. So every single page will be returned as search result. So we don't really want it, but Webflow is actually smart enough to disable indexing of this kind of components. So all of the components we'll get into Settings this exclude blog, manage content from this search monies. Thanks to this, you are safe because this components multiplied on every page won't really affect search results. And using the search results and settings you can actually exclude from indexing anything that you like on your page. So entire collection list wrapper or header section. If you don't want this header to be included in search mechanisms, it's enough to just go to Settings and exclude this. So on our homepage, for example, we might decide that we don't really want those headers sections to be included in the surge. And this is a component, so it's automatically excluded. But for all of the other headings, we just have to or Heather sections, we just have to exclude exclude those from site search results. If we think of our block and what we want from this block to be indexed in local site, site search results. I think that we should only index the blog post pages so that when user searches for something, he'll get only the articles from our block. It means that we generally want to exclude everything else apart from our blog posts template in CMS. So let's save those changes to the homepage. And obviously we want to exclude style guide. We want to exclude entire blog page and blog posts. Let's this page safe. And this way we have only this blog post template that is included in the search and will return all of the articles that user searches for. And by the way, if you exclude entire page, you can see that search index settings is grayed out for individual elements. That's because the whole page was excluded. So you can't really exclude or include any elements that are on this page. So yes, this makes sense. Okay, There's one more tip I have for you in terms of search results and displaying some custom data in search results. For example, if you'd like to add a textbook in here that will display the name of the category four blog posts that is displayed. How to do it? Well, this is not that straightforward because what we can do here is select, get texts from our search index. And if you select that, you will have all the fields available from this search index pseudo collection. However, in the pseudo collection, we don't really have the name of the category. Okay? So what we can do instead is use whatever element we don't, we didn't use previously. So for example, we are not using this description here. So we can use search description and leave it as it is right now, but go to search settings for the blog posts template. And inside such settings, we can just set the search description to display our category name. So let's uncheck the same as SEO and then add the field. And because this blog post template is linked to the category and the CMS will be able to display in the description, the category name. So all we need to do right now is just publish this website and preview that. But beforehand, we just need to apply some styling. So maybe let's go to blog. And here we have this elements that we can copy. And there is a tax styles. Maybe we just remember the names of the classes and apply the classes to this textbook. So Let's first use caption and then Command Return once again, and that would be blocked dark. Also, let's change the positioning of this element to absolute. And this is position two, the first relative element which happens to be search results. What wrapper, I guess so that is fine. Now in the position we just need to select an offset. But first, let's have an extra class so that we don't mess up the previous one and we can set them again or we can set the position offset. Let's set the margin to, let's say six pixels. And now we have it. So we have quite sophisticated search results. And you know everything about search in Web though. So thanks a lot for your attention and see you in the next lesson. 23. Custom Domain: Hi there, Welcome to the next lesson and this one, let's explore how you can add a custom domain to the website that you create in Webflow, this is fairly simple, but this requires a hosting plan from Webflow. So what I mean by this, you'd have to buy a hosting plan in Webflow settings in order to publish under your custom domain, what you can do is click here, click on the little link and x to the publish element and then you are taken to settings and hosting tab. Here you have different plants for website and the website with CMS and e-commerce. We don't use e-commerce, So we don't focus on that plants when you enable e-commerce in your website Webflow, then this plan would be default for us, the CMS bond is default and we basically have to use it because we can't really use basic plan. There is no CMS support. And once we have CMS, we just need to use CMS bomb. That's a little bit more expensive. Here we have CMS API access, and we have the site search. We have three content editors, and we don't have some options. For example, no form file upload, but we don't really need that for our website. So this is how it goes well, enabling CMS in Webflow forces you to use a web hosting in a way that it's pretty difficult to export the elements, although you can do it with CSV and then you'd have to create your own surge, things like this. For the business plan. As you can see, you have more monthly visits and more static. Know the same amount of static pages, but more form submissions and limited actually, and also up to 110 thousand CMS items. Remember that you can pay annually or monthly, annually, you will just save two months of work off the hosting. And maximum number of CMS items in any plant in Webflow is 10 thousand. So you have to keep that in mind. Okay, now I've just added the hosting. I already had my credit card connected to my workflow account, so it's just two clicks to buy new hosting. Now, here you can set up your mobile phone number. And this is pretty important because then Webflow will send you a text message when, for example, your plan fails to renew, meaning that your card is expired or maybe you don't have fonts on your card or, you know, any bank error. So it's worth to just put the phone number here because then you'll get the text message. Obviously, you'll get emails too. So you can just say no thanks or just close this window. And what as you have here is the ability to set your custom domain. And this is fairly simple. What you have to do though, is change the DNS settings at your provider. But Webflow will guide you through that. And I'm going to show you how I do it for my provider. What I'm gonna do is add an existing domain. I'm not buying a new domain that workflow is offering via Google. I'm just adding an existing domain. In my case, this is a sub-domain, so Webflow will only require me to change one DNS record, which is CNAME record. In case that you are using a new route domain, it will also ask you to. Create another record and a record within your provider. And that would be the record that points to Webflow server with the IP. And in this case, you just copy the name of this record and the volume. And through your hosting provider, you go to the Domain Settings, you select the type of the record. In my case, this is CNAME, and then I put the cannonical name in here. Some providers are required that you put the dot after the canonical name. For this proxy SSL will feel calm. Some just do it on their own, so you just have to try it out. And then you have the host and the host. You can copy the host name from here and just click on that and paste it here. And there you have it. You just accept it. And after a second, it will let you check the status of this redirect. Remember that it can take up to 24 hours sometimes, but usually it just a few minutes. However, remember to just not check it every two minutes because it can be cached on your provider side. After you check it, you usually have the connected sign and that's okay. If you have any issues, just wait. Or you can also go to DNS checker WHO website. And then you can check how your DNS distributes across different name servers around the world and maybe this will give you some kind of clue. But this process is pretty seamless. You can easily add domains. And this means that the domain that I've added in my case sub-domain, is now available for me to make a default. And I want to make a default. So you have to click on this little home Make Default button in order for this domain to be the root. And this will automatically make Webflow not allow the indexing of the Webflow subdomain site. Instead, this will be indexed in Google. Also, you can use a free 01 redirects. So those are the redirects that you might want to use from your old website to the new website if you want to get rid of the old path whatsoever. But you know that this old puff is still somewhere, might be still somewhere out in the Internet. For example, someone is publishing the link to this old website and you don't want people to get lost. You can just redirect the old URL and create a new path. And at the very bottom you have advanced publishing options and those allow you to check some settings. For example, enable SSL. That's pretty crucial. Webflow gives you a free SSL for each of your pages. This is really important so that you have this checked. And in some specific cases, you might want to consult with your DNS provider, with your domain, register with the correct settings for the SSL. And here is the link in order to check that, but usually it just work out of the box. Then you have the option to modify HTML and CSS and JS. And those are options that you might or might not use. You can find those options in the publishing menu in the designer as well. And if you go to the designer right now in the Publish menu, you'll see that you have this second domain right now which you can publish under. So this, in my case, the sub-domain. If you select it, you can just publish to deselect and domain. Remember that you still have the option to publish to your Webflow sub-domain. And this is pretty cool because you can publish the working draft of your website here. And then once you are ready or get the approval from your client, then you can publish to your official website, to official domain. And in the advanced options, you find all of the options that I mentioned. So for example, you can also minify CSS so that the website is a little bit smaller and lows faster. And by the way, if you use Webflow servers, you will automatically have CDNs enabled. This is great infrastructure for your users around the world trying to access your website. They will just get the website from the server that's closest to their location. So CDNs are really, really great and also it can handle a lot of traffic. So for example, if you have, if you're selling tickets or something like this, and a lot of people simultaneously visit your website. You will be automatically upscale. You don't have to pay and this will handle the traffic. This use secure frame headers option is meant for embedding your website as an iframe. And by default it's enabled for shops. I don't think it's really important for now, so just leave it unchecked. And now when you publish, you are simultaneously publishing to both domains. Also, I get the message that the search index has to be updated. This is when you publish for the first time, especially, and you have to wait up to five minutes in order for the search results to work properly. Just remember that anytime, as I showed you in one of the previous lessons, you can go to Settings here and go to Search. And you can index manually. If you click on index now, you can do a one indexing a day per day. And also if you want, then Webflow will automatically schedule and index your search every three days. So this is how it works and I guess not. Now that our website is published on both domains, we are pretty much safe to go and to distribute our website to all of our users and editors so that can make changes. So that's it for the custom domain and options. Thanks for listening and see you in the next lesson. 24. Empty States: Hi there, Welcome to the next lesson. Once we have the real search results, you can see that there is an image missing. We have this image from search image, and when we uncheck it, you can see the template for the image, but we don't really have those images loaded in our search index. So what we need to do is we need to double check where those images are coming from. And for this particular reason, we need to open the blog posts template setting. So this is the page that should fuel us with the image data. And inside search settings, we have such image select Image for such result, we have same as Open Graph image URL. But if we go to Open Graph settings, we don't really have an image linked here. So what we need to do is we need to link the image from this collection, either here or uncheck this. And we need to link the image that we have in the collection to be linked as an OG image or site search setting image. And only then we'll have the proper images displayed in our search results. Now, that's not enough. We have to save it, and we also have to rebuild our search index. Now, it should appear, but we cannot see it. We have to go to a global settings and then in the search will go to index right now. And this will make this, we'll forced, forced in a well-fed to rebuild index. Scheduled indexes are every free days, so well for every three days will go through your posts and index everything. However, if you want to do it manually, you can just force it in Webflow like this. And now we have those images start to appear in here. Also, the second thing I'd like to show it, as in this search result wrapper, we can go into second state. So we have this default state in there, but also the second state is no results. So if this doesn't return any results, we'll get this date which is not that attractive. We can work on styling little bit and for search results, It's especially useful because user oftentimes we'll get the results, I guess so we just have to take care of that. I'm going to import the three images that I have. And now we can use this first image to display in the empty state of our search results page. Let's set the display of these elements to flex direction vertical, and let's position it to the center, vertically and horizontally. Also, let's apply some padding or margin so that we have it centered at, with some nice whitespace around this element. And here we have no much result in search results, however, is not the only place the search results when we can get empty elements, empty states. The other elements would be for collection CMS collection items that are empty for some reason. For example, if we want to display something from mobile category, but there are no posts in mobile category. So basically for all the collection least rubbers that you can now select, if you go to the settings, you can go to UI empty state. And for now, this looks a bit rubbish. So what we want to do is address this empty state. By the way, you can see in navigated that we can access all the elements of this empty state and we can restyle them. So let's set the display to flex and we're going to align it later. Now let's change the margins with option. I'm going to adjust the margin both for top and bottom. And also let's get rid of the background color. Here we have this textbook. We can add an image here and choose one of the images that I've uploaded, maybe this one. And let's go back to the settings or do the alignment settings of this empty state. Two, I need this to be set to vertical and align and justify center and middle. Then we have this empty states to class that we might want to change into an empty state carts. And it would be smart to just use this as an empty state for literally everything that we want to add an empty state to, not only this collection, but there is a problem with this image would have to just copy and paste this image over and over. So what we can do as for the empty state cards, if we get rid of the image right now, we can apply this as CSS background, and then we can only use this empty state card class in order to This settings, this image. So let me change the background to this image that we have for the empty state can't glass. And let's set it to cover position to center. And then no tiling, I think that it should be ready now. Okay, now let's just apply the margin slightly. And also let's change the padding because this will let us move the no items found textbook to the very top. And I guess that's it. Now we can copy the name of this class and literally use it anywhere we want. So in this empty state, we just apply the empty state card class and there you have it. Okay, So this way we made this custom but re-usable empty state for items that are not found within the CMS, for example. And I think that's it. So I hope that it makes your life a bit easier to have reusable elements like this. And that's also at, about the empty states and search. Thanks a lot. See you in the next lesson. 25. Website Editor: In Webflow, there's a nice way in which your collaborators can edit your page. And this can be your client, this can be your colleague. You can literally edit anything on the page, including the collections and their items. You have this little Edit Site button when you enter this page as a logged in user. So you have to have the Webflow account, and then you have to have permissions to edit that page in order to see this little button. So now I'm locked in into Designer, and that is why I can, from their access the editor directly. So I can edit that in the browser or I can go to Project Settings and I can adjust the settings for additional editors. If you go to the editor tab, you'll see that we have collaborators here and also some branding options that will display for your editors and you can change an upload your logo here. But what's most important is that we have collaborators and for now it's only me, but I can add up to three collaborators to each page, to each side. And I can just enter their email addresses. If they don't already have the full account, they have to create the account. But once they do and they have the invite to this, Edit, this page, they will be able to go to the browser and directly in the browser. After the URL of your website, put a question mark and then edit and then automatically switch this to the editor mode. You can see at the very bottom that we have this Webflow logo and all the elements on our page are actually behaving a little bit different. Because now we can access static and dynamic elements of the page and change them on the fly. It means that you can literally change anything by clicking this edit button. And if you want to change the name of the posts in the collection, you can do it like so. If you want to change the static elements, you can do it the same as well, the same, same way. But if you were adding something to the existing CMS collection items, What's really cool is that you can literally change it in the CMS collection. So for example, if you replace the image just from there, it will be changed throughout the TMS. And this works for all the static and dynamic content. So you can hover over the elements and you can then change and replace them. For example, right now, if I go to the single post page, what I can do is click on the Edit button next to the rich textbook that I have. And because this is a rich textbook, it will let me, for example, select the elements and change the headings. You can make the text bold or you can even insert new elements. If you press return, you can add text. You can not ambits or quotes or anything in there because this is a reach text element. Now if you make changes, you have the information at the bottom that there are free unpublished changes. You have the editor changes that I need to now publish in order for them to be live on the website. So before I publish, I'm just in the editing mode and I'm just creating a draft. I can go back to the live site and my edits are no longer visible. And that's because I haven't published them yet. But when I go back to editing, you'll see that I still have those changes, QT for publishing and I can publish them. Anytime I want. So now if I click and publish free changes, this will affect not only the static part of the website, but I've also edited category software and this will apply to my CMS. Also, there is much more intuitive way to work with CMS than just clicking on the elements and scrolling through all the posts and publishing it and rippled, republishing it. You can edit the pages from this bottom menu. Here you can go to Project Settings and dashboard and designer, but you can also click on pages. And here you can see all the pages that are available and accessible from here as well. You can change pages settings from there. So for example, if you are or wants to edit OG tags or search index settings or anything like this. He can do it within those settings in C that all the SEO settings and the other ones that are pretty important are accessible in here. So you don't really have to give anyone permissions to use Designer and mess around with the website. He can go straight in here and just use the meta description and title tag and change everything accordingly. Unfortunately, you cannot really set the different permissions for editors, but what they can do is instead of saving that which won't be visible before you publish, you have this one unpublished change so someone can save it and then you can supervise it. You can also save it as a draft. So this is the first, first version of it, so that it doesn't even go to this unpublished changes. So some, someone can work on that and save it as a draft when he's ready to set it as unpublished. He going to he's going to save it. And then you can just check whether everything is okay and click on publish to publish this on Life website. The same happens for collections. You can preview all the collections in here and you have different status is for all the collection items. For example, here I have some stage changes. It means that when I click publish this change, Go Live. But there are other state says that I can create. I can obviously added all the articles from there and it's much more intuitive than editing them in the browser. I can add a new collection item. So in this case, I can click on add new blog posts. And we have all the fields defined in the, in the CMS in here, you can see that all of them are obligatory. You can decide and designer in CMS, you have the rich text content here, so you can add images or embeds or videos. You have to pick the category tag and offer for the blog posts. And if you create one, you don't really have to stage it for changes by pressing the Create button. Well, you can do instead is you can schedule this post or you can save it as a draft. If you save that as a draft, when you click Publish, this won't be published because it's a draft. You can go back to the draft and you can save it multiple times and it is not staged to be published with you can do instead is you can stage these four publish, or you can publish straight away. And then it will go live without even thinking on Publish button. Or you can stage for Publish. And if you stage it, then someone will have to click on the Publish button for this post to appear on your website. The other option that you have as schedule. And you can pick the specific time and date when your posts will be published, and when this date comes, it will be automatically published to the live site. Now, I'm going to cancel it out. And as you can see, you can edit all of the collections on your page. In addition, you also have form submission data. So if you have any form as we have our newsletter form, if someone feels in the form that data will go here. From there, you can export it as CSV or just preview the data. Obviously, this is not the best way to manage, for example, your form submissions. But one of the other lessons I'm going to show you how to connect this to Zapier or integral Matt for the account personal info there you have also help and support and you can look out without publishing changes or you can go to designer, but this is only available for those who are the authors of the side. So you have to have this project in your Webflow dashboard to be able to go to the designer. And from designer you can also publish from here. When you publish from the designer, those changes that are staged by the editors will also get, get published. I told you that there is no way to restrict the access for designers to specific parts and elements. But from the designer, what you can do as you can go to settings of any element and you have this. Collaborators can edit this element. If you uncheck this little checkbox, this will make, for example, this heading one unavailable for a changing in the editor. So editors won't be able to make any changes to this heading one, you can also exclude from editing bigger parts of your website, entire sections, or maybe entire body if you want to prevent people from changing anything on this particular page. So this is how you can restrict access. And apart from this, remember that you have this different statuses. For example, staging or drafts that you can use across your team to manage the content on your page. Okay, I think that's it for the editor. Thanks for watching this lesson and I'll see you in the next one. 26. SEO Tips part 1: Hi there, Welcome to the next lesson. Let's talk a little bit about SEO. So how to make your website's better in terms of accessibility and also for crawlers so that it's indexed well, in the Google search engine. So the first thing is the structure of your page. This is pretty obvious, but you should use sections where appropriate. And also when you select, for example, section in the settings, you can select appropriate HTML tags such as article or something like this. If you are using some meaningful text, you should use headings or paragraphs because this will let Google know that this text is more important than the other texts. For example, Heading one is more important than H2, and especially you shouldn't use div blocks for anything other than styling purposes. So big dogs are rather technical elements. And if you want to create something that is meant to have the meaning for the browser, you'd better end up with articles or lease, or headings or paragraphs, or you can end up with, let's say section. But then in the settings you can change this to, let's say aside or article. Now, what you can do to make better, make Google better understand your website as well, is not to nest too many elements in the navigator pane. So make sure that your structure is clean and you don't have a lot of nested elements. Another great deep for accessibility and for search engine optimization is also going to image settings. And here you have the old tax. So basically all of the images should have either the old stack, all in the newest version of Webflow, there's an option to declare that this is just a decorative image and doesn't really need an old attack. Another tip that I can give you is to set the old text after you create a website in the assets panel, you can right-click on the element on the image in the Assets panel. And then you can add the alt tag to all of the images and almost at once. So it's pretty convenient way to create old tax. But anyway, you should take care of the old tax and especially for those images that are descriptive on your page. And by the way, in the newest versions of a Webflow, when you publish your page, you also have the status of accessibility of your website as well as some things to improve on the page. And if you don't have some old stacks, it will prompt you that you should, you should take care of that. So when you publish, you can just check out what images are missing. The old tax. One more thing is deleting the images from Webflow. What you can do is you can go to Assets and you can delete just literally every image and then republish their website. And then all of the images that are used on your canvas in the designer will again be available in the assets because sometimes there's a lot of different images in the assets that you literally don't use on your website. This is not harmful to your position on, in Google, but Then painful to create all the old tax. And this way, you can just easily delete them, republish the side and they will appear again, but only those images that are published on your website. Okay, next up we have the settings for individual pages as well as global settings for your website. If you go to pages and you check out the settings for individual static pages we have here, and also utility and the commerce. Every page like this has some settings. In general part of the settings you have the patient's name and this is only for web for purposes, it's not appearing anywhere in your search results. But here you have very important SEO Settings. Those are separate for each and every page that you create. And even you have this search result preview that will give you an overview of how this will look and in Google search results. Now, what do you have on top as the title tag? This is probably one of the most important things in terms of SEO. And you definitely should have titled tax for all of your pages. In the title, you should have a clean and short description of your specific page. And Webflow recommends that it's approximately 55 characters or less. And this is simply because it will be displayed in one line. And if that's more, it will be truncated. And what I'm gonna do is copy and paste this ascii dot symbol and just put it in the title. And in the search results you can see that this is a bit more attractive, may be different than other results. So I guess this is a nice trick to make this result more attractive as well as using camel case. And if you can use some of obviously connected to your website keywords, just use them at the very beginning of the title or somewhere close to the beginning of the title, because this is probably one of the, one of the most important things in terms of this keyword being included in the Serbs. So search results. And this will bring your website closer to the top results. If there is a keyword that in the title that someone searching for, for the meta-description, google says that it's not really useful in terms of keywords. It doesn't scan it for keywords that user searches for. But meta-description is super important because it will appear right below your URL and the title in the Serbs. So you'd better make it interesting. It's always better to keep the meta description short. Approximately 150 Sciences, okay? And what I put there is, for example, I have this camel case and also n sine. And at the very end I have interested with question mark. And this kind of maybe makes this a little bit more interesting for a user to click on so that we have nice CTA at the end of meta-description. So I tried to have the CTA, for example, check out or maybe interested or somebody like this. And probably this gets a little bit more CPRs in Google search results. Again, please put in your Meta description, it's something that's relevant to this page. And I, for the Open Graph settings, there are pretty important, but not really for Google as much as for social media and the other services. I'm going to explain that later. And for Site Search Settings, just remember that this doesn't mean that you exclude this page from Google. It only connects to your internal search that we've created in one of the previous lessons. So this is not related to SEO in anyway and you can keep it excluded while it's still will appear in search engine results in Google. And then you have custom code, which is pretty important in terms of SEO, especially if you want to exclude some websites from search results. However, in the head stack, you can also use a lot of different Meta tags that you can create. For example, with keywords, you can use Meta keywords and put some keywords in there. While Google is open about not really taking this into consideration while creating search engine rankings. I guess this is pretty important. And if you have time, you can just add this to your websites because for some applications, some search engines, it might be taken into consideration. So this is one of the Meta tags that you can use on your website, but there's actually a lot of different Meta tags that you can check out on W3C website. And here you have all the different metadata like Arthur and viewport and description and keywords and stuff like this. So in case of some of them, Webflow is taking care of them for years such as description, you have a separate field. But if you want to add more wet attacks may be relevant to your website. You can do it, especially, you can add robots metadata, and control the visibility of your pages via this metatag. And I strongly recommend you to look at this page in Google search articles. And there is a lot of information about robot metadata. Usually you just use this metatag in order to exclude this a specific page or entire websites from the index. In this case, you're going to use metal name robots and content no-index. Then it can be followed by a comma and you can add follow or nofollow, for example, for robots to follow the buildings visible on this website and Croll, some other websites that this website link to. But if you put no index, this is a suggestion for the robot that it should never index this particular page. And the place where you put this metonym robots content no-index is either on the individual pages of your such as we have for our homepage or blog page. Or you just put it globally in your settings to all of the pages of your website and then nothing will be indexed. Well, deciding what's being indexed and what's not is pretty important in terms of SEO. For example, for our blog, I don't know if we have to necessarily index all of the pages. Especially we can exclude technical pages from indexing such as 40 for and style guide and the other ones. But we don't really probably half to index, block all posts because the same elements, the same articles are on the blog page and on category pages. And by the way, if you want to check whether this side particular page is being indexed, you can put in Google site or page. And then you can check what kind of links are being index from, let's say coldness that how domain. And then you can see whether this methianine robots content no-index is really working well. This is just a suggestion for the robots. However, in most cases, it should work really well. And again, this is only for the specific homepage. We are excluding the specific homepage for Serbs. However, if you want to exclude the entire website from being indexed, what you can do is go to settings of this page in Webflow. And here you have custom code tag. There. You can put the code that's for all of the pages, but I'm going to show you that in the next lesson. 27. SEO Tips part 2: Hello there and welcome to the next lesson. This is the second part of our SEO tips in Webflow. Now I'm in my project settings for Jews and block website. And what I can do is show you this custom code tab that I spoke about earlier. Here you have the head code and that code is going to be included in every page of your website. It means that if you want to add, let's say Meta keywords here, or maybe you want to just get rid of indexing of all the pages and create metal robots no index. You can just add it to the head code and it will be distributed across all of your pages. Now, you can also go to the SEO tab, which is the most important global tab for your settings, apart from the setting for individual pages that I told about in the previous lesson. And also, it's worth to check the hosting that you have and setting of the domain. Just make sure that you have it set to default, that your main domain here is set to default because you might have different domains here. And this will prevent Google from indexing all of the domains that you have. And when you said this, by the way, to default, it will automatically redirect the Webflow domain. I mean, it won't include Webflow domain in the search results. So Webflow will automatically turn off the indexing of the Webflow subdomain that you have your site on. And instead it will always use this domain of your most important for Google. This way, you will get rid of the duplicated content and penalization from Google for this duplicated content. And by the way, in SEO, the first setting is for indexing. And when you set it to yes, the indexing of this Webflow sub-domain will be disabled and this should be set at all times when you have your own domain connected and set as default. Next up we have robots section, and this section will be again distributed and included for all of your sub, sub pages. So for the entire website. So whatever rules you set for robots in here will be globally applied to your website. Robots dot txt is pretty important. But to the contrary of what people think, some of them at least, this will not prevent Google from indexing your pages. Instead, this will prevent your websites, especially technical websites administration and stuff like this, from being bombarded by requests from user agents, from robots who tried to download and get to know the content. So This is the directive for robots, for example, not to, not to take into consideration this website and to send requests. And you can also add the articles on Google or just click on the link in the Webflow panel to visit robots takes that.org and then read more about robots file and how to create. A different directives in this file. Then there's one more thing that I talk about in one of the previous lessons, but I want to mention that in terms of SEO as well, here you have 301 redirects and you usually want to use those redirects in order your users not to visit a 404 pages. So for example, if you remove one page, you want to sometimes get the link of this page, put it here as an old path and redirect it to some other path may be newer article or newer section about the same thing on your website. This will prevent any links being outside of your website, leading to 404 pages. And this way, it will help users and robots as well to find their way on your page. Okay, next up we have this SEO Settings again. And at the very bottom of this page you have sitemap and also Google site verification to very important settings for the sitemap. I do recommend you, especially if you don't know how to create your own sitemap. Just to use this pre-defined, this default settings which will automatically generate a sitemap for you. Instead, if you want to use your own, you can just leave it as it was. But if you want to use this automatically generated by Webflow, just switch it to yes. And then Webflow will create a text file, an XML file actually for you. And you'll be able to send it to Google or Google both will automatically just fetch it by, by itself. Now the sitemap XML file can be custom and you can customize it if you know what you're doing. But for most of the time, I'll just keep it automatically generated by Webflow. Now Google Search Console is another place that you want to register and you want to connect your website too. So you create a new property in Google Search Console. And then you can use domain on our URL prefix. What you're going to use in here is URL prefix. And just use the address of the website that you have in Webflow. So in this case my own sub-domain. Now, let's go ahead and continue. And now it's verifying this property in order to verify you can use multiple ways, but what you want to do is go to HTML tag. And here you can copy the entire line that is in 0.1. Let's click on Copy. Now let's go to Webflow and paste it. You don't need everything from here. You just need what's in between, quotes in content. So here it is, the site verification ID, and let's save those changes. Now you are ready to go back to Google search console and check whether this, this website is working. But first, very important step, you need to publish it to the selected domains. So you need to publish your website with these changes first in order for Google to recognize the changes. Now go back to Google search console and click on Verify. Once it's ready and published, it should verify your website and everything is okay. So now you can just go to the property. So open your website and you can check some important metrics of your website. So this data is already being collected. And then sometime you have some performance review and inspection and all the things that you might find that really interesting in terms of SEO and just making your website a little bit more friendly for the robots. Also, what you want to do is you want to upload this sitemap, that workflow generated for you in the sitemap section. So if you go to index sitemap, you can add a new sitemap and validate the site map that was created by Webflow. You just put sitemap dot xml in here and use submitted. And if you haven't checked in the WebEx panel, you have the information that sitemap was submitted. If you save the changes after switching to the US, you see that this is submitted successfully and also you can see the status and discovered URLs that are five URL's index within your sitemap. Those are the most important, but not all of the SEO Settings. You can check out this Google Search Console for more information. And obviously, you can learn a lot about SEO from some external resources that I do recommend. So thanks a lot for listening and tuning in for this lesson. See you in the next one. 28. Site Metadata: Hi guys and welcome to the next lesson. I'd like to add something to the SEO tips. And this is about the Open Graph Protocol and schema. So basically this is the way to better explain our website, not necessarily for robots, but for social media. The Open Graph Protocol was initially started on Facebook, but now you have a lot of different softwares using this specific Open Graph Protocol. And what do you do with that is you use this metadata and you have meta property. And then you go with OG, title, type, URL and image. And you define the elements that will be recognized by, let's say social media. If you set the image, then when you share this link on Facebook or LinkedIn, then the image will appear. And this is the image from OG tax. You can obviously put all of this in your custom code. You can put this in your project settings for the changes to be globally visible on other sub-pages in this custom code section. But in the designer, if you go to settings of individual pages, Webflow is also making some of the most important open graphs settings available for you here. So there you have the title and description and image. Those are free, most important settings for you to share elements on social media and for this to appear correctly. So for example, if I go to Facebook and I create a new post and then I add a website link and disposed to my web, the website, it will automatically generate something. And this is description. I don't have any OG image. That's why it's not displaying the image here. And also it's taking the title from my title, from the title of my page. But for many reasons you might want to keep this separate and you might want to uncheck it, same as SEO title tag. You can see that event that I had this unchecked, it automatically fetched this from title and this is Facebook feature I guess. But you can also take the meta description and then it will be fetched from your meta-description. So SEO meta description as well. So it's better to check that than not, but also it's better to create different description and titles for social media. And obviously, there's a image that you should have here. That's the aspect ratio of 1.91 to one that you should use. And Webflow is trying to make sure that your images are at least while 1200 pixel by 630 in this Open Graph image URL here, you can put an absolute path to your image. You cannot use any of the images in your library. And you just have to create a special image that will be an open graph image URL. What you can do is set it for all of the pages separately in Open Graph settings. Or if you just want to set it once, you can add this OG tag as a custom code in your global page settings for Webflow. So now I've uploaded this image as my OG image. And instead of making sure that it works on Facebook by adding the post once again. I do recommend you to go to a special service that will let you test out the OG metadata. Because Facebook and other social media used to just cash some data about the link that you provided and this might not be visible. So instead you just go to Facebook developers. And here is sharing debugger, the tool that will let you put the link to your website and click on debug to preview how it should look in social media. So this is how it should display on Facebook. The image now is there. Apart from the image, there is some OG fields that were automatically filled by web though. For example, this updated time, but some of them with filled ourselves such as description and image and title and everything is there. You can also check for some errors. At the very top of this page you have warning that should be fixed. And here is some required properties that are missing URL. Well, all of the social media will take care of that and just grab the URL that you want. And Facebook app ID. Again, it's not necessary unless you are using some Facebook app that you want to connect to this website. But either way, this is a great way to provide some additional information for social media, especially images that will display correctly and boosts some traffic from social media to your website. And one more thing that I'd like to explain in this lesson is schema.org. Another set of metadata that you can use separately for your pages or for entire website. And this is just an scheme that you use, for example, products. And this, let's Google and other software better understand what's on your website. For example, you can add color or model to your products or some offers, maybe reviews or star, star, star ratings, something like that. And oftentimes you can see such results on Google when you search for something. For example, in the Serbs, you can see rating or stars or something else. And this is the information from schema that Google populates. And for some results, for some webpages, it decides to display this information. It doesn't necessarily guarantee that those information will be present in serves. But there is a great chance if you keep things right, if you add this schema org metadata, that it will at some point be included in Google search results and how to use this schema org properties. We'll let's click on Get Started. And here you have a different attributes that you can use in Webflow to the elements. So instead of putting that in the Custom Code section of your page, you just select an element that you want to add this custom attribute to. And you just have to go to its settings. And here you will have the attribute, the custom attributes section that you'll use for schema attributes. So if you want to, let's say the clarity that this part of the website is a movie. What you're gonna do is in the name, you're going to use this schema item type. So you declare item type as the name of this attribute. And as a value, you have this link to the proper section of schema org. So this is one way of doing that explained own schema org website. And that way if you have products and you want to make them better available for search. I think this is a great way to add this Meta data and information to your website. Obviously, it will make it more valuable for other soft software, not only for search indexing robots, but also for accessibility purposes and stuff like this. So just keep in mind some places that you might add this code for individual pages and for globally for all of your website. Okay, that's it for now. Thanks for listening and see you in the next lesson. 29. Using Integrations: Hey, nice to see you in this lesson. This is a bonus lesson when I like to explain you integrations tab. And that's pretty powerful because it lets you connect Webflow to some external services. Polar, for example, I have a Google Analytics, however, unfortunately for Google Analytics version for you just still have to add the code snippet from analytics in custom code, Webflow for some reason doesn't support it just yet, but you have some other services that you can integrate seamlessly with Webflow here, such as Google Optimize that will let you run AB tests. So you just create a container ID on Google Optimize. And then inside of Google Optimize, you can type into URLs into two different pages you've made in Webflow. And then it will automatically change this version of the website. So display one page or another for some other users and we'll let you easily decide which version is better. For Google Maps integration, you will just have to obtain Google Maps JavaScript API key. And then you provide the API key. And here, and this will let you simply display Google Maps inside of web though website. And obviously you can create simple embed and it doesn't require Google Maps API key to be present in here. So you just go to Google Maps and you click on the part of the mobbed and then copy the embed code and paste the iframe, iframe into HTML, custom HTML in Webflow. But if you want to use Google Maps more extensively on your website and let's say Create search inside of your website that will return results on Google Maps. Then you're going to have to use the API key register as Google Developer and then generate this Google Maps API and put it in here. And then you also have Facebook pixel, which is really, really useful if you are running campaigns on Facebook. This will let you connect your website to Facebook, at least for now, because as we all know, cookies are disappearing slowly and are not support, supported. Most of the modern browsers, some somehow blocked. But for now we still have this Facebook pixels or front-end integration that you can just add with your pixel id pasted in here. So in your ad manager on Facebook, you create a new source for data. You create new pixel, and then paste the pixel ID in here. And wealth flow takes care of everything else. In terms of this implementation, this will let you, for example, dynamically create ads for people who visited your page on Webflow and many, many other things including statistics and all the data that you can preview in Facebook dashboard, okay? Now you can delay the cookie consent means that you'll be compliant to GDPR rules. If you switch this to yes, and then the pixel will not load without the consent. So the default is that the pixel will load whether your user accept cookie policy or, or he doesn't. If you switch that, you will be more compliant with GDPR because it will load only if people accept your cookie policy, then you have API access, which is super interesting because Webflow allows for Access to It's lightweight API reference. And there are some elements that you can simply access without going to web flows UI, so you don't have to go to the designer in order to let say return the collection list or collection items and you can do it with API. There's a lot of data that you can get from Webflow without even going through Webflow. And you can obtain all of the collection data. So you can, for example, least your collections and get a specific collection by ID. And this all requires a little bit of knowledge of JSON and HTTP protocol and API. But if you get to know this, it's pretty straightforward. However, there is smarter way and more accessible way that you can use in order to translate, transfer some data from Webflow to whatever service you want using an API. And I'd like to show you that using web hooks, as you can see, web hooks are part of the API reference for Webflow, but they are also accessible with the panel at the very bottom of this page you have web hooks and you can manage webhooks from here. Web hooks are basically some information that workflow sense automatically to whatever service you want to use and then pass this data that you receive from the web hook. It might be formed submission, or it might be the information about your site being published or some new orders from e-commerce. You simply add a web hook and you select the trigger type. So what kind of data do I want to receive from Webflow on my specific workflow URL? I'm going to show you how to create this webhook URL in a second. But let's say you want to receive form submissions and the webhook URL is the address that workflow will use to send this information. So every time someone feels in the form, you will get all the form data sent to this web Huike. Well, now how do you create a webhook URL? Well, the easiest way is to make us up in Zapier. So create account on Zapier and then search for, you can search for Webflow free module. And you can use Webflow module in order to do that. Or you can use this webhook by Zapier. This is the premium version. So if you have free account, just search for Webflow and you'll be able to do it. For this web hook. You're going to need to catch hook. So you're going to wait for a new data that will come to this address and the customer address URL that you want to copy is right there. So copy that and pass this to Webflow. So all the form data will immediately besides to this form submission hook that you generated. Okay, now let's go to our website, but very important thing before you do so, you have to republish your website. So save the changes and republish the website. And then you can use any of the forms of your website to, let's say, subscribe or send any data. Now we have the info that's the submission has been received. This is something that you can obviously customize as the state of the form in Webflow. But the most important thing is that this form went through the submission. And in Webflow you can search for submitted forms in there a few seconds ago, I got some data with this e-mail. This is email too. Okay. But in Zapier, what I can. Check for is just the continue. And now I have this request a that has been received. We found a request, something was sent and I have this email form two, and the data contains M82 testing at coders that house. So I got it. If you want the names to be more descriptive, you can go to this form. And in the form log properties, you can check the form name so you can make it I know newsletter or something like this. So it's better, better suited for your needs. Now if you see this data sample that has been sent with your requests, you can easily continue. And when you have the HUC ready, then you can create the action. So what do you want to happen with this data? For example, if you want this to be sent to MailChimp as a new subscriber, you can just connect your Mailchimp account here. And I have my account connected. If I select Continue, I can then send it to one of my audiences. I have only one audience and then subscriber email is something that I need to get from the data that I cache from this hook. So basically there's this e-mail for, let's see all the options. And I have this e-mail to which is testing at cold as a how what I want to do is pass this email to do Mailchimp. You can set all the fields that I have on my chip least. But I don't need to do that. So let's skip this test and this is how you create an automation that will let you just subscribe users to your Mailchimp account straight from Webflow. And it's super easy on Zapier. You can also check out integral mat. It's another great app that will let you do it. And also you can create multi-step zap so you can add to manage it and then send out the data to Google Sheets or anywhere else. For the triggered types that you can use. As you can see here, our forms, submissions and cite published, but also there are some events dispatched when you create when someone creates new order or change the order for your e-commerce store. And this requires you to create an e-commerce project in Webflow. So I hope that you will learn more about this API reference and how you can get data from Webflow and maybe send some data to Webflow. There was a one hint in this lesson that you can explore now. This is called les dot how, where I have some tutorials on API and HTTP protocol. And this will help you to start with automations. Also, there's a lot of resources on Zapier and integral, integral mad that I extensively used for web for purposes. So I think this is a great next step to be even more advanced in what you do. But for now, this is all I wanted to tell you. And in this course, that's basically it. So I hope that you learned a lot during this course and that you take this knowledge and apply it to your web for projects strongly encourage you to create your own project, or maybe follow along again with the steps with this course and create a blog, website with CMS like I did. Thanks for watching and I'll see you in the next courses. 30. See you soon: Thank you for your attention in this course. I hope that it opened your head to new possibilities and functions of Webflow. You can now create and manage dynamic content inside Webflow with CMS and much more. Hopefully you've managed to follow the steps from this course to recreate our blogging system or you just created another side of yours. Also, I hope it's not the end of your journey because currently in Webflow, you can create advanced e-commerce websites with dynamic product database, working card and payment processing. You will find all of this and much more in my other welfare courses. In the meantime, thank you for the time spent together and I hope it was full of valuable knowledge will benefit your work. See you in the next courses.