2.3Widgets & areas (sidebars, footer)
The essentials in 30 seconds
- Secondary areas (sidebar, footer) host widgets or blocks: search, categories, contact details, social networks.
- The footer is strategic: contact details, secondary menu, legal notice, social networks — it reassures and converts.
- Restraint: a few useful elements per area; an endless column drowns the information.
Running mini-case — the workshop's footer
Samir has to complete the secondary areas of Hassan's site. The footer must give the workshop's contact details, a link to the legal notice and the social networks. Hassan would also like to add a dozen badges and a carousel there. Samir convinces him to stay understated: a few useful elements are worth more than an overloaded area.
Sequel to case 2.2 — the identity is set, now completing the areas.
1. Widgets, blocks and areas
Beyond the main content, a site has secondary areas: the sidebar, the footer, sometimes a banner. There you place widgets on classic themes (Appearance → Widgets), or blocks in template parts on block themes. These elements enrich navigation: search, categories, latest posts, contact details.
Not all areas exist everywhere: some themes do not display a sidebar, and the footer may have several columns. Samir checks what the theme offers before filling anything, so as not to create empty or inconsistent areas.
2. A useful, understated footer
The footer is often the last place consulted before contacting a craftsperson: it should contain the contact details, a secondary menu (contact, legal notice, privacy policy) and possibly the social networks. It is a space of trust, not a wall of advertising.
The rule is restraint: a few useful elements per area. An overloaded sidebar distracts from the content; a cluttered footer loses the visitor. Samir tests every addition with a simple question: "does this serve the visitor?" If not, he removes it.
🔎 Concrete example — Composing the footer (Samir's case)
Column 1: logo + short introduction sentence.
Column 2: contact details (phone, email, address).
Column 3: secondary menu (Contact, Legal notice, Privacy).
Bottom of page: social networks + copyright.
→ Remove unnecessary badges and carousel.Result: a clear footer that inspires trust.
Lesson: every column has an identifiable role.
Section vocabulary
- Widget / area block
- An element placed in a secondary area: search, categories, contact details, social networks.
Simple example: a contact details block in the footer.
What it is not: confusing a widget with a plugin.
Reflex: secondary area = widget or block.
- Sidebar
- The side column next to the content: secondary navigation, search, highlights.
Simple example: a sidebar with search and categories on the blog.
What it is not: filling it with unrelated advertising.
Reflex: sidebar = complement, not competitor to the content.
- Footer
- The bottom of every page: contact details, secondary menu, legal notice, social networks.
Simple example: the workshop's footer reassures before contact.
What it is not: stacking badges and carousels there.
Reflex: footer = trust and conversion.
- Widget area
- A location defined by the theme where widgets or blocks can be placed.
Simple example: the theme offers "footer 1, 2, 3".
What it is not: creating content in an area that is not displayed.
Reflex: check the theme's areas before filling them.
- Restraint
- A design rule: a few useful elements per area, without clutter.
Simple example: three columns are enough for the workshop.
What it is not: filling every area to the maximum.
Reflex: useful > numerous.
In practice — Enriching secondary areas in moderation
- Identify the areas offered by your theme (Appearance → Widgets or template parts).
- Compose a useful footer: contact details, secondary menu, social networks.
- If a sidebar exists, add two or three relevant elements at most.
- Review every element: if it does not serve the visitor, remove it.
Ready-to-say script — defending restraint (20 s)
"Your footer will give the essentials: how to reach you, useful links and your social networks. We avoid stacking badges there: a visitor looking for your number should find it in one second."
Bring every element back to a concrete visitor use.
Copy-paste template — footer plan
COLUMN 1: logo + short introduction
COLUMN 2: contact details (phone, email, address)
COLUMN 3: secondary menu (contact, legal notice, privacy)
BOTTOM OF PAGE: social networks + copyright
REMOVED ELEMENTS (unnecessary): _______________Local showcase
Contact details and opening hours in evidence: the visitor wants to call or come.
Shop
Delivery, returns and terms links in the footer.
Blog
Sidebar with search and categories, without clutter.
One-page site
Compact footer: contact and legal notice are enough.
✓ Best practices
- Check the areas actually displayed by the theme.
- Make the footer a space of trust.
- Remove any element that does not serve the visitor.
✗ Common pitfalls
- Stacking badges and carousels in the footer.
- Filling a sidebar with advertising.
- Creating content in an area that is not displayed.
Key takeaways
- Widgets or blocks animate the secondary areas.
- The footer is strategic: contacts, menu, legal notice.
- On a block theme, areas go through template parts.
- Restraint: a few useful elements per area.
48h Challenge — apply tomorrow
Compose a three-column footer (introduction, contact details, useful links) and remove any element that does not serve the visitor. Check the mobile rendering. 15 minutes.
- I place widgets or blocks in the right areas.
- I build a useful footer.
- I apply restraint in secondary areas.
Frequently asked questions
Where have the widgets gone on my theme?
On a block theme (FSE), widgets are replaced by blocks in template parts (header, footer). The Appearance → Widgets entry may no longer exist; everything happens in the site editor.
Should every page have a sidebar?
No. It is useful on a blog or a content-rich site, but can distract on a sales page or a contact page. Many themes let you disable it per page or per template.
What must the footer contain?
At minimum a link to the legal notice and the privacy policy, as well as a way to get in touch. For a professional site, add the contact details and possibly the social networks.
The workshop's footer must help the visitor. What should you favour?