1.2Basic widgets: heading, text, image, button
The essentials in 30 seconds
- The basic widgets (from Free): Heading, Text Editor, Image, Button, Icon.
- The Heading widget carries a semantic level (H1 to H6): a single H1 per page, then H2, H3… in a hierarchy.
- The Button is the call to action (text + link); the Image must have an alternative text (alt).
Through-line — Nadia fills the home page
The structure is there; Nadia now lays in the content: the heading "Benali Joinery", a presentation paragraph, a nice workshop photo, and a "Request a quote" button. She hesitates over the heading level and at first forgets the image's alt. This section sets the right reflexes.
Continues 1.1 — after the structure, the content.
1. Heading, text, image
The Heading widget displays a title with its level H1 to H6 — important for SEO and accessibility: a single H1 (the page's main title), then H2s for the major sections, H3s below. The Text Editor handles rich paragraphs (bold, lists, links). The Image widget inserts an image: always fill in the alternative text (alt), which describes the image for search engines and screen readers.
For Nadia: "Benali Joinery" as H1, a presentation paragraph in the Text Editor, a workshop photo with alt "Joinery workshop in Oran".
2. Button and icon
The Button is the clickable element of the call to action: you set its text, its link (page, anchor, phone, e-mail) and optionally an icon. The Icon (as a widget or inside a button) reinforces the message visually.
Nadia places a "Request a quote" button linked to the contact page (or to a "tel:" phone number on mobile), with a small phone icon. A good button clearly says what will happen.
🔎 Concrete example — Filling the home page (Nadia's case)
H1: "Benali Joinery"
Text Editor: presentation (2-3 sentences)
Image: workshop photo — alt "Joinery workshop in Oran"
Button: "Request a quote" → link to /contact (or tel: on mobile)
→ A single H1, alt filled in, clear action.Result: a readable, well-structured home page.
Lesson: heading hierarchy + alt = SEO/accessibility base.
Section vocabulary
- Heading widget
- Displays a title with its semantic level H1 to H6.
Simple example: "Benali Joinery" as H1, "Our work" as H2.
What it is not: using several H1s or choosing the level by the size wanted.
Reflex: a single H1; the hierarchy structures, the size is set separately.
- Text Editor
- Widget for rich paragraphs (bold, lists, links).
Simple example: the workshop's presentation paragraph.
What it is not: putting an important title in it (use the Heading widget for that).
Reflex: running text → Text Editor.
- Image + alt
- Inserts an image; the alternative text (alt) describes it for engines and screen readers.
Simple example: workshop photo, alt "Joinery workshop in Oran".
What it is not: leaving the alt empty or putting "image1.jpg".
Reflex: every useful image has a descriptive alt.
- Button
- Clickable call-to-action element: text + link (+ optional icon).
Simple example: "Request a quote" → contact page or "tel:" on mobile.
What it is not: a "Click here" button that doesn't say what happens.
Reflex: the button text announces the action.
- Icon
- A small pictogram, alone (Icon widget) or in a button, to reinforce the message.
Simple example: phone icon in the quote button.
What it is not: stacking decorative icons with no meaning.
Reflex: an icon should clarify, not decorate at random.
In practice — Laying in a page's content
- Add a Heading widget as H1 (the page's main title).
- Add a Text Editor for a presentation paragraph.
- Insert an Image and fill in its alternative text (alt).
- Add a Button with clear text and a link (page, phone, e-mail).
Ready-to-say script — explaining the action button to the client (20 s)
"The 'Request a quote' button is clearly visible: on mobile, one tap launches the call directly; on desktop, it opens your contact page. The text says exactly what will happen, to reassure the visitor and prompt them to contact you."
A good button announces the action; on mobile, prefer "tel:" to call in one tap.
Copy-paste template — page content check
H1 HEADING (single): _______________
SUBHEADINGS (H2/H3, hierarchy): _______________
PARAGRAPHS (text editor): _______________
IMAGES + ALT (each): _______________
BUTTON: text = ___________ → link = ___________
ICON (if useful): _______________Home page
H1 = company name; main button = contact/quote.
Service page
H1 = the service; H2 per benefit; button = book/contact.
Mobile first
Button as "tel:" to call in one tap, short readable text.
Heavy image
Compress before inserting (see 5.1) and always fill in the alt.
✓ Best practices
- A single H1 per page, then an H2/H3 hierarchy.
- Fill in the alt of every useful image.
- Give the button text that announces the action.
✗ Common pitfalls
- Choosing the heading level by the size wanted.
- Leaving the alts empty.
- Vague buttons ("Click here").
Key takeaways
- Basic widgets: Heading, Text, Image, Button, Icon.
- A single H1, H2/H3 hierarchy (SEO/accessibility).
- Descriptive alt on every image.
- Button = clear text + useful link.
48h challenge — apply tomorrow
Compose a simple page: an H1, a paragraph, an image with alt, a button with explicit text linked to a page/phone. Check there is only one H1. 15 minutes.
- I place a single H1 and a heading hierarchy.
- I fill in the alt of my images.
- My buttons clearly announce the action.
Frequently asked questions
How many H1s per page?
Only one: the main title. The other titles are H2s (major sections) then H3s, etc., in a hierarchy — important for SEO and accessibility.
Why fill in the alternative text (alt)?
It describes the image for search engines and screen readers (accessibility). A useful image with no alt is a missed opportunity and an accessibility flaw.
How do I make a button that calls a phone number?
In the button's link, use "tel:+213…": on mobile, one tap launches the call directly. Handy for a tradesperson reachable by phone.
Nadia puts "Benali Joinery", then "Our work" and "Contact". Which heading hierarchy is correct?