2.5 Design the Additional Info Panel

Hello and welcome back to build one page website with Froont, no cutting required. This is where we've gotten so far with design. We've got a head set up, we've got a feature panel set up. And now we gonna add in another panel below here, where people can add in extra information on whatever this site is about. So we're gonna go back into edit mode. And just like we have with everything so far, we're gonna start by dragging and dropping in a container. So you wanna make sure that you get a blue line showing up along the bottom here. Cuz we want our container to not be accidentally nested inside any of the other sections that we've created so far. And we're gonna rename our container to Information. Scroll down now that we've got this in here. Now, let's style it up a little bit. We want it to be the same width as the panels that we've created so far. So we're gonna set it to 940 pixels again with a maximum width of 95%. And right now, this is pushed up against the panel that we just finished grading. So we're gonna add some margins so that, that space is out. So we're gonna add a four rim margin along the top. And a four rim margin along the bottom. So now we've got a nice bit of space above and below here. These container is gonna have a content put into it directly. This one is gonna be decorative just like this container that we added in here before. So we're gonna make some space inside, above and below, just like we did with this container here. We're gonna set 1.5 rim as a top heading and one point five rim as the bottom padding. Now we are going to change the color of these, we want this to be fairly dark, because we're gonna have a whole white section here. So, we wanna make sure these bars are ready above and below are contrast nicely. So, in the background section, we're gonna set the color to 0c,0c,0c. We wanted to have a border, this border is gonna be nice and simple. We're just gonna give it a width of one pixel. And we're gonna change the color to black. So you can see that it using the word black. So D- select. You can see that we have this fun black border around and as of grey inside. I wanna keep this the same shadow that the outer panel above here does. So then, both of these sections look like they're just being slightly lifted off the page. And because we know we wanna use the exact same shadow, there's a shortcut. Instead of going in and manually setting all of the shadow properties in here, what we can do is, make sure we have this panel selected, and in Advanced, you scroll down. You can see we have this Box Shadow property here. If we click in there, and select all, now we can copy that code that has all of our shadow settings in it there. Select new container, and then just paste in these books at our settings. [BLANK_AUDIO So there we go, now we have our shadow. Let's preview that that to make it a little easier to see. So now their both just subtly being lifted off the page. Now we're ready to add the white container that's going to hold their actual content. So as usual, drag and drop in another container So already seeing a nice decorative bars. And we're just gonna change the background of this to be almost white. Because the rest of the site is fairly dark. If we make it full white, that's gonna be too much contrast, and that white is gonna look really bright in the viewers' eyes. So you wanna turn that down just a little bit. When you've got a really dark background, even a grey is gonna look fairly white. So the actual color code that we're gonna use here is EB,EB,EB. All right, now to add in the content, now if we scroll down here, you can see we've got a bunch of already pre-laid out content that we can use. So we're just gonna drag and drop in this content 17 component. So that's got us already set up with a spot for an image, a headline, and some text. And we're actually gonna use two of these. So just go ahead and drag in another one. So there we go, we can see here, we've got our grid with our content in it. And that is all good to go. So first up, we're going to modify the text here, because we already gave this text up here a style. We can just leave this text using the default style. And then when we change the settings on this text, it's gonna affect all three of these other blocks as well. So we'll double-click in here to edit our text, and we'll click inside the main text here. We're gonna change our font to Source Sans Pro, once again. We'll opt out where font size 1.1 rim. And we're just gonna adjust the color of the font as well to 1F, 1F, 1F. And that if we scroll up, you can see that this text up here is still preserved the settings that we gave it earlier. Now we can modify this headline. This is a heading four by default, but we're gonna change it, To be a heading two. And we're actually gonna do that on our others at the same time. Change that to be Heading two. Get them all changed over. And we're actually gonna put in some different text on this as well. So we'll just have this say this is some information. This one can say, this is some more information. Read about this thing here. Read about the other thing here. You can put anything you like into these placeholder headings Now, we're gonna edit the styling. So, just like with everything else, we're changing the font over to Source Sans Pro. If you can, it's a good idea to just use a single web font in your site, or two at most. Because web fonts have to be downloaded by the user. So, the more fonts you use, the slower your site's gonna load. And we're gonna up the font size to 2.5 rim. And so, that it's stylistically more like our title up here. We're going to space these letters out a little bit. Just a little bit though, we're going to add in zero point one m. We're going to change the font color to two three, two three, two three and we're going to center the heading as well. So notice that all of our headings updated at the same time. Because that's now the default style for anytime you use a heading to element. The next thing that we're going to do is Add-in some images. Again, this is really straightforward with Froont. You don't have to go and grab images from anywhere else. You go into the unsplash tab, the images that I've found here, I've searched for the word "dark" to find those. I've used this image in here. I't gonna speed this up a little bit. This image in here. We've got a forest and a flower, so I'm gonna put a flower and a forest on this side So I'm gonna grab this one for here and then we'll Put the forest in here. So that's all shaping up pretty well, the spacing is a little bit off though. Right now, there's not quite enough space in between these columns here. And there's a little bit too much space along the gap in between them horizontally. So first we'll fix up the space in between the columns. We're gonna select the actual grid. So if we jump down into our WIDGET TREE here, we're looking for 2 column grid. Now, we're gonna go down to this section here, which gives us our grid column settings. Now, if we drag this thing across, we can change how much space there is in between the columns, which is really, really cool. And we're gonna change this to 5.7%. So now this gap here is about equal to this gap and this gap so it looks nice and balanced. And we're got too much space here and that's because. If we select this content container here, you can see we've got padding above and padding below. So the padding above is just fine, that gives us the spacing here at the top.. But we really don't need spacing below, because we've already got the spacing that this next content box provides here. So we're going to get rid of that bottom spacing, and now that all looks good. So let's have another preview of our site. Right, so we've got our header and our features. And now, all nicely nicely data laid out and spaced apart we've got our information section as well. Hang on, we just need to fix up this gap here. So we're just gonna do the same thing, grab the two-column grid,. The second two-column grid down here, change that to 5.7%, that shows how the preview comes in handy. All right, and there we go. Now everything is nicely to laid out and we're about halfway through putting the base layout of our site together. In the next lesson, we're gonna add in one more content panel. It's gonna go down here, and it's gonna be an email subscription box. So we're gonna check out how you can do that in the next lesson. I'll see you there.