And if you’re thinking that people don’t scroll that down and that footers are not visible, well, guess again.<\/p>\n
A study by Chartbeat revealed that they do scroll. And they’ve analyzed 25 million sessions across the web. More interesting was the fact that many visitors scroll down the page before it finishes loading, which means that no portion of a typical article is viewed by 100% of viewers and the very top of the page actually has about a 20% lower view rate than slightly farther down. This totally shocked me, just look at the graph below.![\"Website](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/11\/Scrolling.png\")
<\/p>\n
![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/02\/chartbeat-scroll-depth.png\")
<\/p>\n
Now, without further ado, let’s see what we’re going to talk about in this article:<\/p>\n
- \n
- What can you include in your WordPress footer,<\/li>\n
- Footer inspiration,<\/li>\n
- How to create and edit your WordPress footer in both the Customizer and Block Editor,<\/li>\n
- How you can make footer changes in the theme’s code or using CSS.<\/li>\n<\/ul>\n
Do we have a deal?<\/span><\/p>\n
Let’s roll.<\/p>\n
<\/p>\n
What can you include in your WordPress footer?<\/h2>\n
Here’s a list of things that can go inside your website’s footer:<\/p>\n
- \n
- Pages that didn’t fit in in your main menu, but you want to make them easier to discover,<\/li>\n
- Privacy Policy and Terms & Conditions,<\/li>\n
- Copyright claims,<\/li>\n
- Sitemap,<\/li>\n
- Social media icons,<\/li>\n
- Awards and badges,<\/li>\n
- Links to company information: about us page, team, career, board of advisors, etc.<\/li>\n
- Affiliate and loyalty programs links,<\/li>\n
- Latest blog articles,<\/li>\n
- Links to resources: blog, knowledge base, courses, podcasts, etc.<\/li>\n
- Upcoming events,<\/li>\n
- Customer service links,<\/li>\n
- Links to Google Play and App Store apps,<\/li>\n
- Newsletter subscription,<\/li>\n<\/ul>\n
and the list<\/a> can definitely go on.<\/p>\n
Now, don’t include all of the above, else you’ll end up having a fat footer. Put yourself in the customers’ shoes. What would they find useful?<\/p>\n
Now, wanna see some real footers?<\/p>\n
<\/p>\n
Footers to inspire you<\/h2>\n
- \n
- Hubspot <\/strong>(one of the most popular CRMs out there) – they have 5 main footer sections: popular product features, free tools, company, customers, and partners.\u00a0 Personally, I love that the free tools are listed there, it’s a great shortcut. Whenever I do research, if customer and partnership data are not clear in the main menu, I’m so glad when I find them in the footer. It’s a pattern to find partners’ data in the footer.<\/li>\n<\/ul>\n
![\"Hubspot](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/02\/Hubspot-footer.jpg\")
<\/p>\n- \n
- Planable<\/strong> (a social media SaaS product) – they place their logo and social profiles inside the footer. Their focus is on product features and resources.
![\"Planable](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/02\/Planable-website-footer.jpg\")
<\/li>\n- National Geographic<\/strong> – besides mentioning their main sites, I love that that they have there an option to “Pitch a story”. This is a feature that can be used by most newspapers, as well as sites that accept guest articles. Usually “Write for us”, “Contribute” or “Pitch a Story” are options that show in the footer.
![\"National](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/02\/National-Geographic-website-footer.jpg\")
<\/li>\n- Patagonia<\/strong> (outdoor clothing) – I love that they are emphasizing on customer care useful links (returns, login, repair, etc.)
![\"Patagonia](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/02\/Patagonia-footer.jpg\")
<\/li>\n- Blue Apron<\/strong> – love the copy here: “What’s cooking”. That’s a nice touch: using a picture to introduce the blog.
![\"Blue](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/02\/Blue-Apron-footer.jpg\")
<\/li>\n- Freshly<\/strong> – uses the footer to show off press coverage. Also, they are placing Google Play and App Store buttons.
![\"Freshly](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/02\/Freshly-footer.jpg\")
<\/li>\n- Coachella<\/strong> (music festival) – they manage to use design to drive attention to the footer.
![\"coachella](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/02\/coachella-footer.jpg\")
<\/li>\n<\/ul>\nBlink if you made it till here!<\/p>\n
In the next chapters I’ll show you a few methods of editing footers in WordPress.<\/p>\n
Usually, the footer design is controlled by your theme. If you’re using a paid plan for your theme, there are probably lots of customizations available. For free themes, the options are kinda limited.<\/p>\n
Let’s get going.<\/p>\n
<\/p>\n
<\/p>\n
<\/p>\n
1. Managing the WordPress footer in the theme Customizer<\/h2>\n
How to create a footer inside the WordPress Customizer<\/h3>\n
This one’s easy.<\/p>\n
- \n
- Log in to the WordPress Admin Dashboard.<\/li>\n
- Go to Appearance -> Customize. You\u2019ll be taken to the Customizer of the WordPress theme you have installed and activated.<\/li>\n
- Find the section dedicated to the footer.<\/span><\/li>\n<\/ul>\n
I’m going to use the SkylineWP theme as an example.
![\"Edit](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/11\/Edit-footers-in-the-customizer.jpg\")
<\/p>\nIn the settings option you can make the following adjustments:<\/p>\n
- \n
- change footer background,<\/li>\n
- add new columns and rows,<\/li>\n
- change the text color,<\/li>\n
- decide which elements need to show on mobile devices or not,<\/li>\n<\/ul>\n
This particular customizer has some footer templates available as well. Click on “Choose footer design” to discover them.<\/p>\n
![\"custom-made](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/11\/custom-made-WordPress-footers.jpg\")
<\/p>\nPretty straightforward, don’t you think?<\/p>\n
Now, let’s move on to:<\/p>\n
<\/p>\n
How to style WordPress footers in the Customizer<\/h3>\n
Now, I’ll go more in-depth with the changes you can do to your footer. Customizers can differ from theme to theme, but the logic behind kinda stays. So, even if I’m using the SkylineWP theme, you’ll be able to recognize the process I’m using in other Customizers.<\/p>\n
Before getting into the details, I wanna point out some structural elements. Each website section goes inside of a block. There the “About us” block, the “Portfolio” block, etc. Blocks can have rows. Rows get split into columns. Inside columns and rows, you can add other smaller pieces of content called components, in the case of SkylineWP. Such components can be images, videos, lists, etc. These blocks are different from the Gutenberg blocks that we talked earlier.<\/p>\n
Now that this is clear (or so I hope), let’s do some editing.<\/p>\n
<\/p>\n
How to make changes to the footer layout?<\/h4>\n
Let’s start by selecting the entire footer block. You’ll see some editing options on the left-hand side. Select “Layout”.<\/p>\n
![\"Editing](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/11\/Editing-the-footer-row.jpg\")
<\/p>\nHere you can:<\/p>\n
- \n
- adjust the width of your section<\/strong>. Do you want it to go from one screen side to the other, and occupy the whole width of a screen? Or just occupy the theme’s default content width? Usually, for most of the sites, the header goes full width, and the rest of the content occupies a specific percent of the whole area available. This is also valid for the template I’m using as an example.<\/li>\n
- adjust the height of the footer. <\/strong>Footer height is important to give enough negative space around footer elements, which will make them more visible, easier to read and therefore, more useful.<\/li>\n
- adjust top and bottom spacing, <\/strong>meaning the distance from the content till the margins of the section,<\/li>\n
- add a header,<\/strong><\/li>\n
- add new rows<\/strong>.<\/li>\n<\/ul>\n
Our current footer has one row with multiple widgets. If you select the row, the menu on the right will give you the option to add new columns. So, as a rule, when rows are selected, columns can be added. When you select a block, you can add rows to it.<\/p>\n
<\/p>\n
How to change colors and fonts in the footer?<\/h4>\n
Let’s start with selecting text content in the footer, in the website preview. The moment you make the selection, the text editing options will be available in the Customizer’s menu. Under the “Style” options, select “Text color” to make changes to colors.<\/p>\n
If you want to change font-size, font-family, and font-weight, you can do this inside “Typography.<\/p>\n
It’s that easy!<\/p>\n
<\/p>\n
From the “Content” option you can make changes to text alignment.<\/p>\n
Now, if you want to make changes to the entire footer block text, not in specific footer sections, you can do this inside the “Advanced” settings.<\/p>\n
![\"Change](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/11\/Change-footer-block-typography.jpg\")
<\/p>\nIf you want to make changes to the whole website typography, you can select “Edit theme defaults”, under the “Advanced” settings. A second option would be going to the main menu, and select “Typography” under “General settings”.<\/p>\n
![\"Change](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/11\/change-global-website-typography.jpg\")
<\/p>\nHere you can make typography adjustments to headings, body texts, links, and blockquotes.<\/p>\n
<\/p>\n
How to change the footer background?<\/h4>\n
Start with selecting your entire footer block in the website preview. Next, head over to “Style”.<\/p>\n
<\/p>\n
![\"make](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2018\/11\/make-changes-to-footer-background.jpg\")
<\/p>\nYou’ll see several options there:<\/p>\n
- \n
- change the background color<\/li>\n
- add an image, video, or slideshow as the background<\/li>\n
- add a gradient background<\/li>\n
- add an overlay<\/li>\n<\/ul>\n
Sounds easy so far?<\/p>\n
Thought so.<\/p>\n
The customizer is pretty intuitive.<\/p>\n
<\/p>\n
2. How to use footer widgets in WordPress<\/h2>\n
- adjust the height of the footer. <\/strong>Footer height is important to give enough negative space around footer elements, which will make them more visible, easier to read and therefore, more useful.<\/li>\n
- adjust the width of your section<\/strong>. Do you want it to go from one screen side to the other, and occupy the whole width of a screen? Or just occupy the theme’s default content width? Usually, for most of the sites, the header goes full width, and the rest of the content occupies a specific percent of the whole area available. This is also valid for the template I’m using as an example.<\/li>\n
- National Geographic<\/strong> – besides mentioning their main sites, I love that that they have there an option to “Pitch a story”. This is a feature that can be used by most newspapers, as well as sites that accept guest articles. Usually “Write for us”, “Contribute” or “Pitch a Story” are options that show in the footer.
- Planable<\/strong> (a social media SaaS product) – they place their logo and social profiles inside the footer. Their focus is on product features and resources.
- Hubspot <\/strong>(one of the most popular CRMs out there) – they have 5 main footer sections: popular product features, free tools, company, customers, and partners.\u00a0 Personally, I love that the free tools are listed there, it’s a great shortcut. Whenever I do research, if customer and partnership data are not clear in the main menu, I’m so glad when I find them in the footer. It’s a pattern to find partners’ data in the footer.<\/li>\n<\/ul>\n
![\"Widgets](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/11\/Widgets-in-the-WordPress-Admin-Area.jpg\")
<\/li>\n![\"The](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/11\/The-widget-areas.jpg\")
<\/p>\n![\"Adding](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/11\/Adding-blocks-to-the-WordPress-footer-area.jpg\")
<\/li>\n![\"Browse](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/11\/Browse-all-blocks.jpg\")
<\/li>\n![\"\"](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/11\/WordPress-footer-area-with-2-blocks.jpg\")
<\/li>\n![\"WordPress](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/11\/WordPress-Footer-block-editing.jpg\")
<\/li>\n![\"Toggle](\"https:\/\/colibriwp.com\/blog\/wp-content\/uploads\/2021\/11\/Toggle-the-block-inserter.jpg\")
<\/p>\n