Lessons: 13Length: 1.4 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.4 Add the Features Content

Now that the features panel is set up, we need to add some content. Let’s look at how to work with some of Froont’s default content components here, and how to create your own custom styles.

2.4 Add the Features Content

Hello and welcome back to build a one page website with Froont, no coding required. In the last lesson we set up this cool little pound here. We're gonna be adding some content to do with features of whatever products or services this site is gonna be showing off. All right, so we'll go back into Edit mode. Now, with our concept, we wanna make sure that it never presses up against the edges of this container. So, we are gonna add some padding. So, I've got our featurescontent container selected. And in the padding tab, up here, we're just gonna add 2rem all the way around. So 2rem, 2rem, 2rem, and 2rem. All right, now, what we wanna do is add in three columns inside this container. And if we go up here we will find that we have a three-column grid here all ready for use. So we just need to drag and drop it straight in and that is ready to go. Now, we've got a little bit of gap around the edges here. We don't want that, so what we're gonna do is change the width to 100%, so it can go right out to the edges here. And we're gonna delete this maximum width value here as well. So now, that's just gonna be fluid. Now, if we go up into the components area, you can see that there's another selection available here named Icons. In here there is a whole bunch of different icons you can just drag and drop in to your design. So we can have an icon in each one of our three columns here. Now, we can actually just drag them straight in to the columns because the icons are vector graphic so they, SVG, Scalable Vectographics. And if we just drop them straight into this column they'll automatically fill themselves up to be the full width of this column. But we want them to be a little bit narrower than these columns. So what we're gonna do is drop in a container into the column and we'll put the icon inside that container. So we're gonna go back to Basic Elements, drag in a container. And now we're ready to add in an icon. So go back into the icons area. And really, you can add anything that you like. But if you wanna use the same ones that I'm using, you can search for, the first one is software and then- Where are we? This one here is the one that I'm using. I'm just gonna drag and drop that in. And now we've got our icon. And right now this is set to be a maximum of 80 pixels wide, so we're gonna remove that so that it's more flexible. And then instead of it being 100% width, we're gonna change that down to 50%, so now that sits nicely inside this column. You'll also notice that this is black. Now, the cool thing about using graphics that are made up of vectors, SVGs is you can recolor the images quite easily. So I'm gonna scroll down, here we see this SVG properties area and we're gonna change the fill color. You can see here, you can change it to anything that we like. We're actually gonna change the color to code 9D9D9D. So now we have a nice, soft grey that works in with everything else that we're doing in a design. Now, we wanna have a little bit of text down below here, where someone can put in information about their product or service. So we're gonna go back to basic elements and we're gonna drag in another text block. And try to get see, how the blue line there is the width of this icon? We don't want it down here because it's gonna create another column, so we'll just drop it in up here. And we'll just double check everything is nested correctly. So this hasn't gone into somewhere other than we wanted. Everything is inside our container. If we wanted we could just go ahead and start modifying the typography and the coloring and everything that we have in the text here. But whatever changes we make to this text will become the default styling for any text that we've used throughout our site. And later on we're gonna be adding quite a bit of text in other areas. So the styling here is not the styling we're gonna want everywhere in our site. So what we're gonna do is create a style with a unique name that's going to control only the way our text appears here in this part of our site. So on the right we're gonna scroll up. Here it says Default Style, that's what we would be changing if we made edits now. We're gonna hit Create New Style. And we're gonna add in paneltext. So now, when we make changes they are gonna be associated with this name. And anywhere we apply this style those changes will come across with it. All right, so lets start making our changes to this text. So first up we'll change the headline. Scroll down to the text control area we want the font family to be set to Source Sans Pro like everything else. And we want it to have the color A5A5A5. And we'll click inside the text as well, because we want that to be A5A5A5, as color also. We're gonna bump the font size up to 1.1rem, just make it a little bit easier to read. We want everything to be centered. Both the normal text and the heading text. And I'm just gonna change this headline content so it says, Visual Layout Builder. And then I'm just gonna copy and paste in the text here from the completed design. So you can do the same thing if you just wanna shortcut typing all of that out. So now we've got our text styled up how we want, the only thing missing is there's a bit too small a gap between this heading and this icon. So we're gonna select the text box, go up to the margin and we'll just bump that up to 2rem as the top margin. So now that's laid out quite nicely. We've got some excess space down here along the bottom because we added a minimum height of 30rem before, when we were just laying out this section. Now, we've got some content in here, we don't need that, so we're just gonna blank that field out. And now, it's automatically sizing itself to fit the content inside. So that's all set, all we want now is the same thing in the second and third columns. Doing that is pretty straight forward, what we're gonna do is make sure we have this container selected here. And then just Ctrl+C or Cmd+C to copy and then paste once and twice. So now we can just add in some different text content in the second and the third columns. And to replace these icons, all we need to do is drag and drop in a different icon Going back into our icons. For the second icon I use this four way arrow, so you can just drag and drop it right in there. And just replace it and remember the color you added in and sizing and everything. And for the third one- There is a nice book icon in here, here we go. So we drag and drop that in. And now that whole section is complete. So you can see that we've got a mountain coming through that we added in in the last lesson but not so brightly that you can't read this content here. And as you look down the page, you got this shadow making this whole section come towards you or feel that it's coming towards you which can help to bring attention to these main features here. In the next lesson we're gonna add some more content into the page layer. We're gonna add what's basically gonna be the main body of the page with a whole bunch of extra information that people can look at. So we're gonna create another panel with similar style to the panel that we set up here. Just using different colors and then we're gonna have four areas of information with their own text styling and their own images. So we're gonna put all of that together in the next lesson. I'll see you there.

Back to the top