These widgets shape your page — they're how you turn a wall of paragraphs into something a customer actually wants to read on their phone. Buttons that lead somewhere, banners that grab attention, dividers and spacing that give the eyes a rest.
[button] — a single styled button
A clickable button. Use it whenever you want one clear next step, like "Read the size guide" or "Browse the new collection."
[button href="/contact"]Get in touch[/button]Three styles, three personalities:
[button href="/" style=primary]Shop now[/button]
[button href="/about" style=secondary]Read our story[/button]
[button href="/help" style=ghost]Need help?[/button]| Style | Use it for |
|---|---|
| primary | The single most important action on the page |
| secondary | A second-tier action that still matters |
| ghost | A quiet, low-key option (text + border, no fill) |
Add a Font Awesome icon if you want one to the left of the label:
[button href="/contact" icon="fa-solid fa-phone"]Call us[/button]Pick from fontawesome.com/icons — search for what you want, copy the class name (something like fa-solid fa-phone), paste it into the icon attribute.
[cta] — full-width banner with heading and button
A bigger, louder call-to-action than the button widget. Use it once per page, where it counts:
[cta heading="Ready to shop?" subheading="Free delivery in Nairobi over KSh 5,000." button="Browse all" href="/" style=primary]It renders as a full-width banner with a heading, a smaller line of supporting text, and one big button. All attributes:
| Attribute | What it does |
|---|---|
heading | Big top line |
subheading | Smaller supporting line below |
button | Button label |
href | Where the button leads |
style | primary, secondary, or outline |
You can also drop body text inside the tags for a longer-form variant:
[cta heading="January Sale" button="Shop the sale" href="/sale"]
Up to 30% off across beauty oils, soaps, and skincare gifts.
[/cta][divider] — horizontal separator
A clean line between sections. Use it sparingly. Three styles:
[divider]
[divider style=dashed]
[divider style=dots]The default line style is what you want most of the time. Dashed and dotted are for softer separation.
[spacer] — vertical breathing room
Adds empty space between blocks without resorting to typing blank lines. The five sizes, shown as cross-hatched blocks:
[spacer size=md]Useful when you want a visible gap between, say, a product grid and the paragraph below it:
[product_grid cat=1 limit=4 cols=2]
[spacer size=lg]
<p>That's our newest collection. More coming next week.</p>| Size | Roughly |
|---|---|
xs | Tiny — barely noticeable |
sm | Small — one line of text |
md | Medium (default) — two lines |
lg | Large — a section break |
xl | Extra large — a dramatic gap |
How to use these together
A clean homepage section using all four widgets:
<h2>Best sellers</h2>
[product_grid cat=2 limit=4 cols=2 sort=default]
[spacer size=md]
[cta heading="Sale ends Sunday" subheading="Free delivery on orders over KSh 5,000" button="Shop everything" href="/" style=primary]
[divider]
[button href="/blog" style=ghost icon="fa-solid fa-book"]Read our blog[/button]That's a heading, a 4-product grid, a touch of breathing room, a big banner, a soft divider, and a quiet "read our blog" button. Cleaner than the same content typed out as paragraphs.
Tips
One primary action per page. Don't put three "primary" buttons on the same page — they fight each other. Pick the most important action, make it primary, make the others secondary or ghost.
Use spacers, not blank lines. Hitting Enter five times to "make space" in your editor often produces nothing on the live page (most editors collapse extra blank lines). A [spacer size=lg] always renders the gap you intend.
Buttons need real destinations. Don't link a button to # as a placeholder and forget — shoppers tap, get nothing, leave. If a destination doesn't exist yet, link to /contact instead so at least someone hears about the interest.