Skip to main content

Section 2: Improve Your Design Skills - Customize your footer (Lesson 2.5)

Sofia Maconi avatar
Written by Sofia Maconi
Updated over 2 months ago

Transcript

I've been reviewing my landing page and I'm pretty happy with what we've achieved so far.

I did notice, however, that my footer design didn't feel quite right and I actually want to change the layout quite significantly so I'm going to go ahead and just delete this footer.

Now, to save myself some time, the first thing I'm going to do is just check to see if we have any footers in the Component Library. I'm going to use a filter and let's have a look. Okay, we have some Footers. We have two footers available to us and this is more of the design I'm looking for, where we have four columns with lots of links on the right-hand side. Very good for SEO purposes.

Now, to insert this into the page, I'm just firstly going to drag and drop it onto the canvas. Now, it probably won't be dropped exactly where I wanted but that's okay we'll change it afterwards. I'm just going to bring this down and just drop it at the bottom. So what I'm going to do is just check on the left-hand side. It actually looks like it did drop into the correct position. I close these all down. Okay, it's just below main so I'm going to put it into main by dragging and dropping inside and I'm going to bring it down within main.

Okay, and I wanted main because main is basically a wrapper that allows us a bit more control over the width of the page. Okay, I use my keypad just to push it to the bottom. Okay, fantastic!

But there's obviously some color that is clashing so now that it's in, let's play with the design. So the style I'm going to go for is a I actually just want a white background here. I'm going to choose a white background and now we have a logo with a title. I want to duplicate what's up here, so command+C on Mac and I'm just going to paste it inside. First of all, inside this group paste. Let's push it to the right-hand side so I'm going to use my keypad left arrow to bring it across and then I'm just going to simply delete what's in here. Perfect!

Okay, now I want these sections to align a little bit more with what's in here — Key Features — so I can see that we have Project management and Task tracking, so I would probably have product pages for those features. So I can change this to Project management and then that's where I could link it to whichever page I would have set up for project management. For Customers, I can can say Task tracking and, if I wanted another one, I would find maybe it's called Priorities. I'll simply just command+D on my Mac to create another option.

Okay, and what I'll try to achieve here is for each column to have the same amount of links. So naturally I'll duplicate this, maybe this is called Blog post, maybe we have Community, and maybe we have a Cookie policy.

Now, I can see that these are wrapping to the next line and the strategy for that is to look at the layout options available. We can see we have a max width of 484. Let's increase this to say 540. Okay, so that increased the width of the parent container.

What I'm going to do with these ones is highlight all of them and I'm going to remove the max and min widths just to allow them to fill the available space. Okay, this is still wrapping here so I'm going to continue to increase the parent. Let me try 640. So my strategy here would just be to adapt the text so instead of management, the full term, mgmt and that solves our problem and now, we've got four columns nice and neat as well as our brand column on the left-hand side.

Did this answer your question?