This video shows you how to create a basic footer inspired by Builderʻs footer. Learn how to create a footer that is responsive, has columns, and a logo.
Skill set: Basic
Area: UI only
Length: 10 minutes
- Youʻll need a Builder account.
- An evergreen browser; that is, a modern, up-to-date browser such as Google Chrome.
Let's take a look at the steps to create a footer.
To begin, from the Insert tab, drag a Section block onto the blue work area in the Visual Editor.
Into the Section you just added, drag a Columns block.
Now, to reproduce the horizontal lines above and below the footer content, as in the Builder.io footer, you'll use a box with a border.
From the Insert tab, drag a Box block inside the Section above the Columns.
In case you're not sure where you dragged the box, check the Layers tab. The Box should be the first element inside the Section. If it isn't, just drag the layer there. Note that the Box should not have anything inside it.
Next, style the box to make a border/horizontal rule. With the Box selected, on the Style tab give the Box a 1px border. Select a color; here it's gray. Make sure to choose Solid for the Border Style field.
To make the bottom border, duplicate the box. With the Box selected, click the down arrow next to the Edit button and select Duplicate. Then drag the new Box to the bottom of the Section.
As you did before, you can check the Layers tab and move the Box using the Layers, if needed. You can see that the second Box is where it should be by closing the Columns block layer using the little arrow. Then you'll notice that the Box is outside the Columns block but inside the Section.
This screen shot shows the two box borders.
Choose your logo as the Image for the left column by selecting Choose Photo from the Image Edit button. Choose Contain for the Background Size.
Next, on the Style tab with the logo selected, give it a max height of 80px and a min height of 60px. Then delete the large Image block on the right.
Now begin adding your text for the links and apply the styles.
Each line of text should be its own text block so that you can apply padding to the text. Because this text will be linked later, the padding makes the target area of the link bigger.
Note the 10px padding added on all sides for each text block using the Style tab.
To add a second column for links, with the Columns block selected, click the Edit button and click +Column. This will duplicate the last column, including its contents and styles.
Next, edit the text under the logo.
Now, change the text in the two columns and link each line appropriately.
Here's the result:
The final step is to check your footer for responsiveness.
Using the tablet and phone buttons at the top of the Visual Editor, review your new footer. Here we noticed the logo text was a little close to the footer links on both tablet and phone views. So for each view we added a 30px bottom margin. Remember that changes you make in tablet or phone view apply only to that view.
The video at the top of the page has more tips and tricks, so if you haven't checked it out, take a look.
To learn more of what you can do in Builder, check out the other tutorials in the Video Library or build out a page with more sections and techniques in the Getting Started.
