Metro Page Builder - Documentation

1. Start from a ready-made template

The quickest way to a finished page. Every template is a real page, not a picture of one: you get all of its sections and can change or delete any of them.

1. Go to Components → Metro Page Builder → Pages and click New.
2. The chooser opens on the On this site tab. Pick a category along the top (Business, Health, Hospitality, Shop, Resume and so on), then a group inside it, or type in the search box to find a template by name or by what is on it.
3. Click a template. The page opens in the editor with the template's content already in place.
4. Replace the words and pictures with your own, then click Save.

Templates that come as multi-page sets - a home page, an about page, a contact page and so on - are named as a family, for example Metro Aurelia - Home and Metro Aurelia - Contact. Create each page from its own template so the set matches.

2. Copy a page you already have

Once one page looks right, the fastest way to the next one is to copy it and change the words.

1. On the Pages screen, find the page you want to copy.
2. In the Actions column, click the copy button (two sheets of paper). Confirm when asked.
3. The copy opens in the editor straight away. It is titled "… (copy)", has its own web address, and is unpublished until you publish it - so a half-finished copy is never live.
4. Change the title, the words and the pictures, then Save.

The copy gets its own copies of any pictures you uploaded to the original, so editing one page never changes the other.

Copying into another language. If your site has more than one language installed, the Copy to language… dropdown in the same column makes a translation of the page instead: choose the language and click the translate button beside it. That copy is also created unpublished.

3. Build a page from scratch

1. Click New, then choose Blank Page (it is in the Start category).
2. Give the page a Title. The Alias - the page's web address - is filled in from the title if you leave it empty.
3. Click + Add Section on the canvas. A section is a full-width band of the page; it is where a background colour or picture belongs.
4. Inside the section, click Add row, then pick a column layout from the row's dropdown - one column, two halves, three thirds, a wide-and-narrow split, and so on.
5. With a column selected, open the Add-on blocks panel on the left and click the block you want - or use Add block… inside the column itself.
6. Fill the block in using the Properties panel on the right.
7. Repeat for each band of the page, then Save.

A workable order for most pages: a hero section at the top (a heading, a line of text and a button), two or three sections of content, something that builds trust (numbers, reviews or logos), and a section at the end asking the visitor to do one thing.

4. The editor, part by part

Both side panels can be collapsed with the arrow in their corner, or floated with the button beside it if you would rather drag them out of the way.

5. Adding and arranging blocks

• Select - click a block. Click the arrow in its little toolbar to select what contains it (the column, then the row, then the section).
• Move - drag the cross-arrows handle, or use the up and down arrows.
• Duplicate - the two-sheets button on the block's toolbar.
• Copy and paste - copy a block, column, row or whole section, then paste it into another place, including another page: the clipboard survives leaving the screen. Everything it carries - colours, spacing, its own custom CSS - comes with it.
• Delete - the cross button. Undo (Ctrl+Z) brings it back.

Undo and redo: Ctrl+Z and Ctrl+Y, or the arrows in the toolbar. They go back many steps, and they cover structure as well as settings.

6. Colours, spacing and page design

• A section holds the band's background colour, gradient or picture, its padding, and the shape of its top and bottom edges (a curve, a wave, a tilt).
• A row holds the column layout and the gap between columns.
• A column can have its own background, corner radius, padding and shadow - this is how you make a card.
• A block holds its own content and type settings.
• Page design (in the toolbar) is the page as a whole: the background behind every section, the width of the content area, and the space above and below it.

Any element can take your own CSS in the Advanced tab. Write & to mean "this element", for example & p { letter-spacing: 1px; }.

7. Checking phones and tablets

Use the desktop / tablet / phone buttons in the toolbar as you build. Some settings have their own phone and tablet values - column widths, for instance, so three columns side by side can become one under another. Any element can also be hidden on one size and shown on another from the Advanced tab.

Every effect in the builder already stands down for visitors who have asked their device to reduce motion, so you do not need to do anything about that.

8. Publishing, and putting the page in a menu

1. In the editor, set Status to Published and choose the Access level, then Save.
2. To give the page a place in your site's navigation, go to Menus → (your menu) → Add New Menu Item.
3. For Menu Item Type choose Metro Page Builder → Metro Page Builder Page, then pick your page from the list.
4. Save. The page is now on the site at that menu item's address.

A page does not need a menu item to exist - the view button on the Pages screen opens it either way - but a menu item gives it a tidy address and puts it in the navigation.

9. Making your pages findable in the site's search

Joomla has one search - Smart Search - and it finds only what has been added to its index. Metro ships the piece that puts your pages there, and it has to be switched on once:

1. Go to System → Plugins, search for Smart Search - Metro Page Builder and enable it. (Enable Smart Search - Content too if you want articles found.)
2. Go to Components → Smart Search and press Index in the toolbar. Let it finish.

You only ever do this once. Enabling the plugin does not go back and read the pages you already have - that is what the Index button is for. From then on it keeps itself up to date: save a page, publish one, unpublish one or delete one, and the search index changes with it. The only other time to press Index again is after importing a lot of pages at once.

What is searchable: the page's title, its description from the Search & sharing tab, and the words on the page itself - a heading, a card, an FAQ answer, a price list. You do not have to list anything anywhere; whatever a visitor can read, a visitor can search for.

What is not: unpublished and trashed pages, and templates you uploaded or downloaded - those are starting points in the New page chooser, not pages of your site. Access levels and languages are respected, so a search shows somebody exactly the pages they would have been allowed to open.

Results can be narrowed by type, by collection and by language, under Smart Search → Search Filters. One thing to watch there: a filter you saved before enabling this plugin has Metro pages unticked, because the type did not exist yet. If your pages are indexed but a particular search page still will not show them, open that filter and tick Metro Page.

Metro's own Search add-on posts to this same search, so a search box you build on a Metro page starts finding Metro pages the moment the index is built.

10. Editing on the live page

Open the page on your site while logged in as an administrator and click Edit this page, bottom right. The editor opens on the real page, inside your own template, so what you are adjusting is exactly what a visitor sees - useful for spacing, colours and anything that depends on your template's own fonts and widths.

You can select any element, change its settings, move it, duplicate it and add blocks, then Save & close. Adding whole new sections is still done in the main editor.

11. The Pages screen, column by column

The buttons in the Actions column, left to right:

Above the list, the filters narrow it by search text, collection, language, status, and whether you are looking at pages or at imported templates.

12. Moving a page to another site: export and import

A page can be taken off one site and put on another - a staging site to a live one, a page built for one client reused for the next.

• Export: the download arrow in the Actions column saves that one page to a file. It carries the page's whole structure and every setting.
• Import: the Import a page panel at the top of the Pages screen takes that file back in. Choose the file and click Import.

Two file kinds are accepted: a .json page on its own, or a .zip holding the page and its pictures. Use the zip when the pictures do not already exist on the other site; the pictures are unpacked into your media folder and the page is pointed at them.

Pictures that the page refers to but the file does not carry - a logo already on the other site, an image from a Joomla folder - keep their addresses. If a picture is missing after an import, upload it to the same path, or point the block at the new one.

13. Snapshots: going back to an earlier version

Every time you save, the previous version is kept. In the Versions column, pick a moment from the Saved snapshots… dropdown and click the restore button beside it. The version you are replacing is itself kept, so restoring can be undone by restoring the other way.

14. Text formatting, links, lists and pictures inside panels

Text fields take simple bracket formatting, so you can emphasise part of a line without needing a separate block:

Inside a tab panel, an accordion answer or a timeline entry you can also add a picture, a link and a list:

[img=images/team/office.jpg\|Our office\|320\|right]
We have been on the same street since 1994.[br][br]
[ul][li]Open six days[/li][li]Free parking[/li][/ul]
[a=/contact]Get in touch[/a]

• The picture's parts are file, alt text, maximum width in pixels and left or right to put it beside the words. It is sized to fit the panel and loads only when needed. On a phone it goes full width.
• Write \| - a backslash then a pipe - for the pipes inside a tag when you are in one of these list-style fields, because a plain pipe separates that row's own columns.
• Panels are one line each: use [br] rather than pressing Enter.
• Links accept a path on your site, an anchor, http://, https://, mailto: or tel:.

Typed HTML is shown as text, not rendered - that is deliberate, and it is why a pasted script can never end up on your page.

15. If something looks wrong

16. The Properties panel: settings every add-on shares

Every add-on is edited the same way. Select it on the canvas and the Properties panel on the right fills with its settings, divided into tabs:

Three things are worth knowing before you read any of the tables in this guide:

• Empty usually means "inherit". A blank colour or font size takes the value from your Joomla template, or from the section around it. Clearing a field is the way to undo it, not typing a value you hope matches.
• Settings appear when they apply. Fields that depend on another one stay hidden until it is set - the gradient colours appear only once the overlay is a gradient, the loop times only when a video plays as a background.
• The defaults are a finished look. Every add-on renders something sensible the moment you drop it in; you are adjusting, not assembling.

17. Lists: items, one per line, and rich panels

Add-ons that show several things - team members, tabs, prices, callouts - keep them in a list field. There are two kinds:

• Repeaters (labelled Slides, Cards, People, Items): each entry has its own little form. Use Add to make another, the handle to drag it up or down, and the cross to remove it.
• One per line fields: a plain box where each line is one entry and | separates that entry's parts, exactly as the field's label says - for example Opening hours | 9 to 5. An empty line is skipped, so you can leave a gap while you work.

Text inside either kind takes the bracket formatting described in Text formatting, including pictures and lists inside a tab or accordion panel. In a one-per-line field, write \| for a pipe that belongs inside a bracket tag, so it is not mistaken for the next column.

18. Typography controls

Any add-on that shows words of its own carries the same set of type settings, in its Style tab:

19. Motion: animation, hover, scroll effects, animated backgrounds

These live in the Motion tab of every add-on, and of every section, row and column. All of them are off until you choose one.

Animation - how the block arrives when the visitor reaches it:

On hover - what happens under the mouse, and on a tap on a touch screen: a movement (lift, sink, grow, tilt), a background fill with its own two colours, and the speed of both.

Animated background - a slow moving pattern behind the block's own content: its two colours, how strong it is as a percentage, its speed, its size, and whether it keeps playing or pauses when it is off screen.

As the page scrolls - a parallax drift, a wipe or a takeover as the block passes through the middle of the screen, with a strength and, for the wipe and the takeover, a colour.

20. Free position: placing a block anywhere

Normally blocks stack down a column. The Advanced tab lets one break out of that and sit where you like - a badge over a photograph, a signature across a corner, a price tag on a product.

Also in the Style tab of every block: Position the whole block across and down, which nudges a block inside its column without leaving the flow.

21. Shadows and edges

Blocks, columns and sections that can carry a shadow offer the same scale, from a hairline to a deep float, with an optional colour. Soft shadows suit light pages; on a dark background a shadow usually wants a colour taken from the background itself rather than black.

22. Custom CSS on one element

The Advanced tab of every section, row, column and block has a Custom CSS box. Write & to mean this element:

& { border-top: 3px solid #b3121b; }
&:hover { transform: translateY(-3px); }
& h3 { letter-spacing: .04em; }

The rules are scoped to that one element, so nothing can leak into the rest of the page or into your Joomla template. This travels with the element when you copy and paste it, including to another page.

Add-on reference

Every add-on on the site, grouped as the blocks panel groups them and listed by name. Each one gives what it is for, how to fill it in, and a table of its own settings - the shared motion, position and custom CSS settings are described once, above, and apply to all of them.

A blank setting means "leave it as it is"; where a setting starts out with a value, it is given as the default.

Content add-ons

Words, lists, cards, forms and numbers - the add-ons most pages are built from.

Accordion / FAQ

Blocks panel → Content · add-on key accordion

The Accordion add-on shows a list of questions or headings whose answers open one at a time. It keeps long, optional detail - an FAQ, a returns policy, course details - available without pushing the rest of the page down.

When to use it

• Frequently asked questions.
• Terms, policies and specifications that a minority of visitors will open.

When to choose another add-on

• Content divided into parallel categories → use Tabs Pro.
• A sequence of steps or events → use Timeline.

Procedure

1. Write one item per line: the question, a vertical bar, then the answer.
2. Use bracket formatting inside answers for lists, links and pictures; write a pipe inside an answer as \|.
3. Choose whether the first item opens by default.

Behaviour on the page

• Items open and close with a click, a tap, or the keyboard, and announce their open state to screen readers.
• The answers are part of the page, so search engines index them even when closed.

Troubleshooting

Settings reference

General tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Alert / Notice

Blocks panel → Content · add-on key alert

The Alert add-on shows a short notice in a coloured band: information, success, warning or an important notice, with an optional icon.

When to use it

• Holiday opening hours, a deadline, a change of address, a service interruption.

When to choose another add-on

• A notice that opens over the page → use Popup.
• Scrolling announcements → use Ticker.

Procedure

1. Type the message.
2. Choose the style and, optionally, an icon.

Behaviour on the page

• Warning and important styles are announced to screen readers as alerts.

Settings reference

General tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Animated Heading

Blocks panel → Content · add-on key animated_heading

The Animated Heading add-on is a heading in which one word or phrase changes in place - "Built for schools", "Built for clinics", "Built for studios" - using one of eight effects. It carries attention in a hero section without a video, while remaining a real heading for the page outline.

When to use it

• A hero heading that names several audiences, products or places.

When to choose another add-on

• A static heading → use Heading.
• A title as a visual effect → use Special Heading.

Procedure

1. Fill in the text before and, optionally, after the rotating words.
2. Enter the rotating words, one per line.
3. Choose the heading level, the effect and the seconds each word is shown.
4. On the Style tab, style the rotating words apart from the rest of the heading.

Behaviour on the page

• Screen readers read the heading with the first word, not every change.
• With reduced motion, the words change without animation.
• Only the current word takes up space, so text after the rotating words moves as their length changes.

Settings reference

General tab

Style tab

Advanced tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Block Number

Blocks panel → Content · add-on key block_number

The Block Number add-on shows a row of large figures - students taught, years open, projects delivered - that count up as they arrive. Each figure has a label, a prefix and suffix, an optional icon, note and colour, and the set can be separated by lines, cards, outlines or panels.

When to use it

• A band of three or four statistics under a hero or in an about page.

When to choose another add-on

• A single statistic beside text → use Counter.
• Percentages as shapes → use Progress Bar Pro.

Procedure

1. Add a row per figure: number, label and, optionally, prefix, suffix, note, icon and colour.
2. Set how many sit across on desktop and on phones.
3. Choose the separator, the label position and the arrival motion.
4. Tick Group thousands with a comma for figures above 999.
5. On the Style tab, set the sizes, weight, alignment and colours.

Behaviour on the page

• Counting starts as the row scrolls into view and runs once.
• Decimals in the number are kept while counting, so 4.8 counts as 0.0 to 4.8.
• The final figures are in the page from the start for search engines and screen readers; with reduced motion they are shown immediately.

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Button

Blocks panel → Content · add-on key button

The Button add-on is a single call to action: words, a link, an optional icon, a style and a size. It can span the full width of its column, or do so only on phones, where a full-width button is easier to tap.

When to use it

• The main action of a section: book, buy, contact, download.
• A single link that must stand out more than a text link.

When to choose another add-on

• Two or more buttons side by side → use Button Group.
• A floating set of actions that follows the visitor → use Metro FAB.

Procedure

1. Type the words and set the link. Tick Open in new tab only for links to other websites.
2. Optionally choose an icon and its position.
3. Choose the style, size and alignment.
4. For phones, tick Full width on mobile only.
5. On the Style tab, set custom colours if the template's do not suit the section.

Behaviour on the page

• An icon-only button is announced by its text to screen readers, so the text should still be filled in.
• Links to #name scroll smoothly to that section on the same page.

Troubleshooting

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Button Group

Blocks panel → Content · add-on key button_group

The Button Group add-on places two or more buttons together with consistent spacing, size and style. Each button can override the group's style, so a primary action and a secondary action sit side by side correctly.

When to use it

• A primary and a secondary action together, such as "Book now" and "See prices".
• Store badges or download options.

When to choose another add-on

• A single call to action → use Button.
• Navigation between pages → use Site Header.

Procedure

1. Add a row per button: words, link, icon and style.
2. Set the default style, size, alignment and arrangement for the group.
3. Set the gap and whether buttons go full width on mobile.

Behaviour on the page

• On phones, full-width buttons stack one above the other.

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Circle Menu

Blocks panel → Content · add-on key circle_menu

The Circle Menu add-on arranges items around a ring with a label in the middle. Selecting an item turns the ring (or moves a marker) and shows that item's note in the centre. It presents a small set of related items - services, stages, departments - as a whole, which a list does not.

When to use it

• Four to eight parts of one whole: a service cycle, a curriculum, a process that repeats.

When to choose another add-on

• A sequence with a start and an end → use Timeline.
• A list of services → use Feature Box.

Procedure

1. Add a row per item: label, link and the note shown in the middle when selected.
2. Write the small line above the middle label.
3. Choose whether the ring turns or stays still, and whether arrows show.
4. Set the automatic advance, or 0 to advance only on click.
5. On the Style tab, set the size and colours.

Behaviour on the page

• Items are selected by click, tap, arrows or the keyboard.
• Automatic advance stops for good at the visitor's first interaction, so the wheel never moves away from an item someone has chosen.

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Coming soon screen

Blocks panel → Content · add-on key coming_soon

The Coming Soon Screen add-on is a complete full-screen holding page for a site or section that is not open yet: logo, eyebrow, headline, sub-heading, a countdown, a button with small print, and links to your profiles, over a background picture or colour.

When to use it

• A pre-launch page.
• A page for a product or event not yet available.

When to choose another add-on

• A countdown inside a finished page → use Countdown.

Procedure

1. Set the logo, or type the logo text, and its height.
2. Write the eyebrow, headline and sub-heading.
3. Enter the date being counted to, or leave it empty for no clock, and the message once it arrives.
4. Set the button, its link and the small print.
5. Add links one per line as Label | URL.
6. On the Style tab, set the background image, overlay, colours and minimum height.

Behaviour on the page

• The date follows the same rules as the Countdown: UTC unless an offset is given.
• The screen fills the window height set under Minimum height.

Settings reference

General tab

Style tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Contact Form

Blocks panel → Content · add-on key contact_form

The Contact Form add-on is a working enquiry form: name, email and, optionally, phone, subject and message. Submissions are emailed to the address you give, using the site's mail settings; nothing is stored in the database. Spam is filtered by hidden checks, and optionally by the site's captcha or a proof-of-work challenge that needs nothing from the visitor.

When to use it

• A contact page or a "talk to us" section.
• A distributor or trade enquiry form.
• A single-line email capture (inline layout).

When to choose another add-on

• A form from another extension → use Joomla Module.
• A booking with times and availability → use Court booking board.

Procedure

1. Enter the address that receives the messages, and the subject line of those emails.
2. Write the heading and sub-heading.
3. Choose which optional fields to include.
4. Choose the spam protection. Leave at least the built-in checks.
5. Write the consent line if needed, the button words and the thank-you message.
6. On the Style tab, choose the layout and field style and set the colours.
7. Send a test message from the live page to confirm it arrives.

Behaviour on the page

• The message is sent by the site's own mail settings (System → Global Configuration → Server). If those are not working, no form on the site can send.
• The visitor's address is set as the reply-to, so replying to the email answers the visitor.
• Proof of work runs in the visitor's browser for a moment before sending; the visitor sees nothing to solve.
• "The site captcha, and refuse if none is configured" rejects submissions until a captcha plugin is enabled.

Troubleshooting

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Cookie notice

Blocks panel → Content · add-on key cookie_notice

The Cookie Notice add-on shows a consent bar or card with Accept and Reject buttons, a link to your policy and an optional Manage link. The visitor's answer is remembered in their browser, and the notice does not appear again until the storage key is changed.

When to use it

• Any site that sets non-essential cookies and needs consent.

When to choose another add-on

• A marketing message over the page → use Popup.
• A notice inside the page → use Alert / Notice.

Procedure

1. Write the title, message and button wording.
2. Point the policy link at your privacy or cookie policy page.
3. Optionally add a Manage button and its page.
4. Choose the position.
5. While styling, tick Always show while building; it affects the builder only.

Behaviour on the page

• The notice is placed on top of the page wherever it sits in the layout, so it can be put in the footer section.
• The answer is stored in the visitor's browser under the storage key. Changing the key asks everyone again.
• Once answered, the notice does not appear again in that browser. To see it again, clear the site's data or use a private window.

Troubleshooting

Settings reference

General tab

Style tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Countdown

Blocks panel → Content · add-on key countdown

The Countdown add-on counts days, hours, minutes and seconds to a date and time, and replaces the clock with a message once it arrives. It is used for early-bird deadlines, events and term starts inside a finished page.

When to use it

• An offer that ends, an event that starts, an admissions deadline.

When to choose another add-on

• A site not yet open → use Coming soon screen.

Procedure

1. Enter the date and time, for example 2026-04-18 19:30. Add the offset for local time, for example +0530.
2. Write the small heading and the message shown once the date arrives.
3. Choose which units to show and their labels.
4. Choose the arrangement and alignment; on the Style tab, set sizes, colours and separator.

Behaviour on the page

• The date is read as UTC unless an offset is given.
• The clock runs in the visitor's browser; after the date, the message is shown in place of the clock.

Troubleshooting

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Counter

Blocks panel → Content · add-on key counter

The Counter add-on shows one number with a caption, counting up from zero when it scrolls into view. A prefix and suffix frame the number (a currency sign, a plus, a per cent sign), and an optional shape - a circle, blob, square or ring - can sit behind it.

When to use it

• A single headline statistic beside a paragraph.

When to choose another add-on

• Three or four statistics in a row → use Block Number.
• A figure shown as a filled bar or ring → use Progress Bar Pro.

Procedure

1. Enter the number, and a prefix or suffix if needed.
2. Write the caption and choose whether it sits under the number or beside it.
3. Choose the alignment and colour, and whether it animates.
4. Optionally choose a shape and its colour on the Style tab.

Behaviour on the page

• The count starts when the counter scrolls into view and runs once.
• Visitors who ask their device for reduced motion see the final number immediately.
• The final number is in the page from the start, so search engines and screen readers read the real value.

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Court booking board

Blocks panel → Content · add-on key booking

The Court Booking Board add-on shows time slots with their availability and price - courts, studios, treatment rooms, tutors - grouped by time or by resource. An open slot can link to a booking page or jump to a booking form on the same page, or the board can show availability only.

When to use it

• A sports club, studio or clinic showing this week's availability.

When to choose another add-on

• A timetable without availability → use Table.
• An enquiry form → use Contact Form.

Procedure

1. Write the heading and sub-heading.
2. Enter one slot per line: Time | Court | Status | Price, where status is open, few or full.
3. Choose how slots are grouped, and the price prefix and note.
4. Choose what an open slot does and give the booking page address or the section anchor.
5. On the Style tab, set colours and cards per row.

Behaviour on the page

• Full slots are shown but not linked.
• Any status other than few or full is treated as open.

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Feature Box

Blocks panel → Content · add-on key featurebox

The Feature Box add-on presents one feature, service or benefit as an icon, a title, a short description and an optional link, on an optional card background. Three or four side by side form the familiar row of services.

When to use it

• A row of three or four services, benefits or steps.
• Cards that lead to detail pages.

When to choose another add-on

• A card that turns over to show more → use Flip Box.
• A picture beside a paragraph → use Image & Content.
• A list of short points with icons → use Icon List.

Procedure

1. Choose the icon and write the title and description.
2. Optionally add a link and its words.
3. Choose the alignment and icon colour, and whether a card background is shown.
4. Place three or four Feature Boxes in equal columns of one row.

Behaviour on the page

• With a link, the whole box is clickable; the link words are shown at the bottom.

Settings reference

General tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Fixtures & results

Blocks panel → Content · add-on key fixture

The Fixtures & Results add-on lists matches for a team: competition, date and venue, the two sides with scores and details, the result, and buttons for a highlights video and a match report. Choosing the sport adjusts the wording and icons.

When to use it

• A club, school or league page showing recent results and the next matches.

When to choose another add-on

• A league table → use Table.

Procedure

1. Write the heading and sub-heading.
2. Enter one match per line: Competition | When | Venue | Home | Home score | Away | Away score | Result | Video link | Report link | Home detail | Away detail. Leave any part empty.
3. Choose the sport and the arrangement.
4. Set the video and report button wording.
5. On the Style tab, set the colours for cards, the result banner and each side.

Behaviour on the page

• A match without scores is shown as a fixture; with scores, as a result.
• Buttons appear only when their link is filled in.

Troubleshooting

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Flip Box

Blocks panel → Content · add-on key flipbox

The Flip Box add-on is a card with two faces: a front with an icon or picture, a title and a short text, and a back with further detail and a button. The card turns over on hover, on focus, or on a tap.

When to use it

• A small set of services or products where a short teaser leads to a little more detail.

When to choose another add-on

• A row of flip cards from one list → use Flip Box Pro.
• A card that shows everything at once → use Feature Box.

Procedure

1. Fill in the front: icon or image, title and text.
2. Fill in the back: title, text, button words and link.
3. Choose the flip direction and set a height that holds the longer face.
4. Set the colours for each face on the Style tab.

Behaviour on the page

• With a mouse, the card turns while the pointer is over it. A tap, a click, or Enter or Space on the keyboard turns it and keeps it turned; moving the keyboard focus away turns it back.
• For visitors who ask their device for reduced motion, the faces swap instantly without rotating.
• Both faces are in the page, so their text is read by search engines and screen readers.

Troubleshooting

Settings reference

General tab

Style tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Flip Box Pro

Blocks panel → Content · add-on key flipbox_pro

The Flip Box Pro add-on presents several two-sided cards from one list, as a grid with columns set per screen size. Every card has a front (an icon or picture, a title and text) and a back (a title, text and a button), and the row shares one height and colour scheme. Seven effects decide how a card changes face - a classic flip, a 3D card whose edge shows as it turns, a lift-and-flip on a spring, a page peeled from its corner, a door on a hinge, the back sliding up, a zoom through - and three triggers decide what turns it: pointing at it, a click or tap only, or a button on each face. A picture can fill each card, a glare can sweep across it, a reflection can sit below it, and the front icon can ride a coloured badge that moves on its own.

When to use it

• A grid of services, programmes, products or phases, each with a teaser and a little more on the back.
• A range of products shown by picture, with the details and a button behind.

When to choose another add-on

• One flip card with its own colours → use Flip Box.
• Cards that show everything at once → use Feature Box.

Procedure

1. Add a row per card: front icon or picture, front title and text, back title and text, button link and words, and optionally a full picture behind the card.
2. Set the columns for desktop, tablet and phone.
3. Choose the effect, its direction, and what turns a card.
4. Set the card height and the gap.
5. On the Style tab, set the colours of each face, the picture's darkening, the shine, the shadow and the icon badge and its motion.

Behaviour on the page

• Pointing: a card turns while the pointer is over it. A tap, a click, or Enter or Space turns it and keeps it turned; moving the keyboard focus away turns it back.
• Click only: nothing happens under a passing pointer; the card turns on a click, a tap or the keyboard.
• Buttons: only the button turns the card, so a link on the back can be used without turning it back. The button on the hidden face is out of the tab order, and focus moves to the button on the face that turns towards the visitor.
• For visitors who ask their device for less motion, the faces swap instantly, whatever the effect; the icon motions stop.
• Peel from the corner: at rest the corner is turned down. On the turn the front peels away like a sticker - the corner folds back over the card, the fold sweeps up to the far corner in about half a second, and the flap lifts away - with the back underneath. (Redrawn in 2.42.1; before, the front was wiped away towards one corner.)
• The reflection is drawn by browsers that support reflections (Chrome, Edge, Safari); elsewhere the card simply has none.
• Every default reproduces the card as it was before 2.42.0.

Troubleshooting

Settings reference

General tab

Style tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Heading

Blocks panel → Content · add-on key heading

The Heading add-on sets a page or section title at a chosen level (H1 to H6). Part of the heading can take its own colour and weight, and the letters can have an outline and a shadow. The level describes the heading's place in the page outline - which search engines and screen readers rely on - and is independent of its size.

When to use it

• The main title of a page (H1) and the title of each section (H2).
• Sub-headings inside a section (H3 and below).

When to choose another add-on

• A heading with one word that keeps changing → use Animated Heading.
• A title as a visual effect rather than as text → use Special Heading.
• A very large decorative word behind a section → use Ghost Word.

Procedure

1. Type the heading under Text. To colour one word, select it and use the colour button, or write [c=#e11d48]word[/c].
2. Choose the Level: H1 for the page title, H2 for section titles, H3 and below for sub-headings.
3. Set the alignment and colour; set the size and typeface under the shared typography settings.
4. Optionally add an outline or a shadow on the General tab.

Behaviour on the page

• The level is written into the page as a real heading element, so it forms the page outline used by screen readers and search engines.
• The size can be set independently of the level; an H2 may be displayed larger than the H1 where the design calls for it.

Troubleshooting

Settings reference

General tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Icon

Blocks panel → Content · add-on key icon

The Icon add-on places a single icon from the built-in icon set, or a small image of your own, at a chosen size, colour and alignment, optionally linked.

When to use it

• A decorative mark above a heading.
• A single linked symbol, such as a download or phone icon.

When to choose another add-on

• An icon with a title and a paragraph → use Feature Box.
• A list where every row has an icon → use Icon List.
• Links to social profiles → use Social Icons.

Procedure

1. Choose between the built-in icon set and your own image.
2. Pick the icon or the image; for an image, write a description.
3. Set the size, colour (icons only), alignment and optional link.

Behaviour on the page

• An icon without a link is decorative and hidden from screen readers; a linked icon is announced by its description.

Settings reference

General tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Icon List

Blocks panel → Content · add-on key icon_list

The Icon List add-on is a list in which every row has an icon, text, an optional line of sub-text and an optional link. It runs in one to eight columns, and icons can sit on coloured chips.

When to use it

• What is included, what to bring, opening hours, contact details, certifications.

When to choose another add-on

• Items with a paragraph each → use Feature Box.
• A timed sequence → use Timeline.

Procedure

1. Add a row per item: icon, text, optional sub-text and link.
2. Set the icon used by rows that name none, and the number of columns.
3. On the Style tab, set the icon colour and size, an optional chip background, and dividers.

Behaviour on the page

• Columns collapse to one on phones.
• The icons are decorative and hidden from screen readers; the text carries the meaning.

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Image & Content

Blocks panel → Content · add-on key image_content

The Image & Content add-on sets a picture beside a block of content: a small label, a title, a paragraph, bullet points and a button. The split between picture and content, the picture's shape, and which comes first on a phone are all controlled here, which makes it the most widely used section layout.

When to use it

• Explaining one idea with one picture: an about-us band, a service, a product feature.
• A sequence of such bands down a page, alternating the picture side.

When to choose another add-on

• A picture with labelled points on it → use Product Callouts.
• Three short features in a row → use Feature Box.

Procedure

1. Choose the picture and describe it for screen readers.
2. Fill in the label, title, text, bullet points (one per line) and button.
3. Choose the picture side, the split and the gap.
4. Choose which comes first on a phone.
5. On the Style tab, choose the picture shape and how it fills that shape, and the colours.

Behaviour on the page

• On phones the picture and content stack in the order chosen under On mobile, show.
• The picture shape crops the image to a consistent proportion, so a series of bands aligns even when the source images differ.
• Shapes may also be written as 4x3, 16x9 and so on.

Troubleshooting

Settings reference

General tab

Style tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Liquid Glass

Blocks panel → Content · add-on key glass

The Liquid Glass add-on draws a pane of glass - frosted, clear or liquid - in the shape required: a button, a card, a wide panel, an icon tray like a dock, or an icon capsule like a switch. The page behind shows through, blurred and tinted, with a bright edge.

When to use it

• A card or buttons laid over a photograph or video.
• An icon tray of shortcuts over a hero.

When to choose another add-on

• Buttons that stay on screen → use Metro FAB.
• A plain card → use Feature Box.

Procedure

1. Choose the shape.
2. For a button, card or panel, fill in the title, text, icon and link. For a tray or capsule, add the icons and choose the highlighted one.
3. Choose the alignment and whether it spans the full width.
4. On the Style tab, choose the look and set tint, blur, roundness, edge light, shadow and text colour.
5. Place it on a section with a picture, or position it over another block (Advanced → Position).

Behaviour on the page

• Browsers without background blur show a translucent tint instead.
• Icon names are read by screen readers and shown on hover.

Troubleshooting

Settings reference

General tab

Style tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Metro EMI Calculator

Blocks panel → Content · add-on key emi

The Metro EMI Calculator add-on lets a visitor estimate a loan: they choose a model (and a region, where prices differ), set a down payment, an interest rate and a term, and see the loan amount, the total interest and the monthly instalment (EMI). Interest may be calculated on a reducing balance, as banks do, or at a flat rate.

When to use it

• Vehicle, appliance, property or course-fee pages where buyers pay in instalments.

When to choose another add-on

• Fixed prices without finance → use Pricing / Fee Card.

Procedure

1. Add a line per model and region with its price in numbers only, and optionally a picture.
2. Leave the region empty on every line if the price is the same everywhere.
3. Set the picker labels, currency symbol and number style.
4. Set the starting down payment, rate and term and their limits.
5. Choose how interest is charged and whether visitors can switch.
6. Set the button words and links, and keep a note under the result.
7. On the Style tab, choose the layout and colours.

Behaviour on the page

• Every change recalculates immediately in the visitor's browser.
• With no region on any line, the region picker is not shown.
• A brochure link to a PDF downloads the file. An empty link hides its button.
• The picture changes with the chosen model where one is given.

Troubleshooting

Settings reference

General tab

Style tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Metro FAB

Blocks panel → Content · add-on key fab

The Metro FAB (floating action buttons) add-on keeps buttons on screen while the page scrolls: a rail of shortcuts on an edge, a round call button in a corner, a speed dial that opens into several actions, or a bar along the bottom of a phone. Each button has an icon, words and a link - a page, a section, a phone number, an email address or a WhatsApp chat.

When to use it

• Call, WhatsApp and enquiry shortcuts on a service business site.
• A bar of key actions on phones.

When to choose another add-on

• A button in the page → use Button.
• Share buttons that float → use Social Share.

Procedure

1. Add a row per button: icon, words, link and, optionally, colours and how it opens.
2. Choose the design, look and position.
3. Choose how the words show and the size.
4. For a speed dial, set the icon and words of the button that opens it.
5. Choose when it shows, on which screens, and what happens on a phone.
6. On the Style tab, set the colours, the first button's highlight, spacing, distance from the edges and shadow.

Behaviour on the page

• It floats wherever the block sits in the layout, so one FAB in the footer covers the page.
• The buttons form a labelled navigation region for screen readers; hidden words are still read aloud.
• "A bar along the bottom" replaces the chosen design on screens narrower than 768 pixels, with the buttons sharing the width equally.

Troubleshooting

Settings reference

General tab

Style tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Popup

Blocks panel → Content · add-on key popup

The Popup add-on shows a message over the page when a condition you set is met: after a delay, after scrolling a distance, when the visitor appears to be leaving, after inactivity, or when an element is clicked. It is used for offers, newsletter invitations and announcements. How often a visitor sees it is controlled per visit or per number of days, and a popup can be shown on this page only or across the whole site.

When to use it

• A seasonal offer or sale announcement.
• An invitation to subscribe, shown once the visitor has read some of the page.
• Detail opened from a button, such as terms or a video.

When to choose another add-on

• A notice that stays in the page → use Alert / Notice.
• Cookie consent → use Cookie notice.
• Buttons that stay on screen → use Metro FAB.

Procedure

1. Choose the purpose; this only decides which settings are shown.
2. Write the eyebrow, heading and body, add an icon or picture, and add buttons. A button with no link closes the popup.
3. Choose where it may appear: this page, or the whole site.
4. Choose what makes it appear and set its delay, scroll percentage or clicked element.
5. Choose how often a visitor sees it.
6. On the Style tab, set the position, entrance, width, colours and background dimming.
7. Test it in a private browser window, since the frequency rule remembers that you have seen it.

Behaviour on the page

• The popup is moved to the top level of the page when it opens, so it covers everything regardless of which section holds it.
• It opens as a true dialog: the Escape key and the close button close it, and the keyboard stays inside it while it is open.
• The frequency is remembered in the visitor's browser, so a different browser or a private window sees it again.
• Leaving the page is detected by the pointer moving out through the top of the window. Touch screens have no pointer, so there the exit trigger falls back to the inactivity timer, using the delay set (at least five seconds).
• "Everywhere on the site" requires the Metro Popup plugin to be enabled and the page holding the popup to be published.

Troubleshooting

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Price List

Blocks panel → Content · add-on key price_list

The Price List add-on presents many items with a price each, as a clean list: a treatment menu, a rate card, services and fees. Each item has a name, a description, a price, an optional badge and an optional thumbnail, and a dotted leader can join the name to the price as in a printed menu.

When to use it

• Salon and spa treatments, repair charges, tuition fees, hire rates.

When to choose another add-on

• A restaurant or cafe menu → use Restaurant Menu.
• Two to four plans compared → use Pricing / Fee Card.
• A table with several prices per row → use Table.

Procedure

1. Add a row per item: name, description, price and, optionally, a badge such as "New" and a thumbnail.
2. Choose one or two columns, whether the dotted leader and thumbnails show, and the row spacing.
3. On the Style tab, set the colours and whether a line separates the rows.

Behaviour on the page

• Two columns become one on phones.
• The price is written exactly as typed, so any currency and format may be used.

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Pricing / Fee Card

Blocks panel → Content · add-on key pricing

The Pricing add-on presents one plan or fee as a card: its name, price, period, a list of what is included and a button. It supports a special price shown beside the struck-through original, a saving note that calculates the percentage, a highlighted state for the recommended plan, and a badge in five styles.

When to use it

• Two to four plans side by side, with the recommended one highlighted.
• A course or membership fee with an offer price.

When to choose another add-on

• A menu, a rate card or a treatment list → use Price List.
• A detailed comparison across many features → use Table.

Procedure

1. Enter the plan name, the price and the period (for example "per month").
2. List the features, one per line.
3. Set the button words and link.
4. For an offer, enter the original price; it is shown struck through. Optionally write a saving note such as "Save {percent}" - the percentage is calculated from the two prices.
5. Tick Highlight this card for the recommended plan and choose a badge.
6. Place the cards in equal columns of one row.

Behaviour on the page

• The struck-through original price is announced as the original price to screen readers.
• The saving percentage is calculated from the first number in each price, whatever currency symbol or wording surrounds it, for example "$19.99 / mo".
• If either price cannot be read, or the price is not lower than the original, the saving note is left out rather than shown with a wrong or empty figure.

Troubleshooting

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Progress Bar

Blocks panel → Content · add-on key progress

The Progress Bar add-on shows labelled horizontal bars that fill to a percentage as they scroll into view. It is the simple form of Progress Bar Pro.

When to use it

• Progress towards a target, capacity, or a set of proportions.

When to choose another add-on

• Rings, arcs, shapes or a different colour per bar → use Progress Bar Pro.
• Large headline numbers → use Block Number.

Procedure

1. Write one bar per line: the label, a vertical bar, then the percentage.
2. Set the bar colour and whether the percentage shows.

Behaviour on the page

• Bars fill when they scroll into view; with reduced motion they appear full at once.
• Each bar is announced as a progress bar with its value.

Settings reference

General tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Progress Bar Pro

Blocks panel → Content · add-on key progress_pro

The Progress Bar Pro add-on shows percentages as shapes: bars, vertical bars, circles, arcs and gauges, waves, spirals, and outlines such as hearts, stars and hexagons. Fills can be solid, gradients, stripes or patterns, and a continuous sweep is available for activity with no percentage.

When to use it

• Fund-raising or capacity figures as rings or gauges.
• A decorative loading or activity indicator.

When to choose another add-on

• Simple horizontal bars → use Progress Bar.
• Large numbers → use Block Number.
• A goal with donation links → use Support Box.

Procedure

1. Add a row per bar: label, percentage, optional colour and a small note.
2. Choose the shape, the arrangement and how many across.
3. Choose where the label sits and whether the percentage shows.
4. Choose whether it fills on scroll, or sweeps continuously.
5. On the Style tab, set the thickness, size, ends, fill style, colours and the track.

Behaviour on the page

• Shapes are drawn as vector graphics and stay sharp at any size.
• Each shape is read to screen readers as its label and percentage, for example "Funded: 72%".
• Moving patterns and sweeps stop for visitors who ask for reduced motion.

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Restaurant Menu

Blocks panel → Content · add-on key menu_card

The Restaurant Menu add-on presents a restaurant, cafe or bar menu: dishes with descriptions, one or two prices with size labels, a picture, dietary marks and a chef's pick flag, divided into courses. Five layouts range from a plain printed-menu style with leader dots to a picture-led grid.

When to use it

• A restaurant or cafe menu page.
• A featured dishes section on a home page.

When to choose another add-on

• A treatment or service price list → use Price List.

Procedure

1. Add a row per dish. To start a course, add a row with a name and no prices.
2. For two sizes, fill in both prices and size labels.
3. Add dietary marks, separated by commas, and mark the chef's pick.
4. Choose the layout, currency symbol and, optionally, a button on every dish.
5. On the Style tab, set picture size and shape, hover effect and colours.

Behaviour on the page

• Dietary marks are shown as short labels (V, VG, GF and so on); pointing at one shows its full meaning.
• A dish with its own link sends its button there; otherwise the button uses the shared link.

Troubleshooting

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Search

Blocks panel → Content · add-on key search

The Search add-on places a search box for your site. It can be a bar, a large hero band with a heading and suggested searches, a compact field with an icon, or a button that opens the search in a dialog. It searches Joomla Smart Search, Joomla basic search, or the Adhrit LMS course catalogue, and detects which is available.

When to use it

• A help centre or knowledge base hero: "How can we help?".
• A search field in the header.
• A course search on an education site.

When to choose another add-on

• A single question answered in the page → use Accordion / FAQ.

Procedure

1. Choose what to search; "Detect automatically" uses Smart Search if it is enabled.
2. Choose the layout. For the hero layout, write the heading and sub-heading.
3. Write the placeholder, the button words and an accessible label.
4. Add suggested searches, one per line.
5. Choose the field and button icons and where the button sits.
6. On the Style tab, set the width, the phone behaviour and the colours.

Behaviour on the page

• Suggested searches are shown as links under the field; each runs that search.
• Below the collapse width, the icon-only phone option replaces the field with an icon that opens a full-screen dialog.
• The accessible label is read by screen readers even when no visible label is shown.

Troubleshooting

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Social Icons

Blocks panel → Content · add-on key social_icons

The Social Icons add-on links to your profiles on social networks, and to email, phone and a website, as a row of icons. Each profile is written as the network and your handle, number or address; the add-on builds the correct link.

When to use it

• A footer or contact section linking to your profiles.

When to choose another add-on

• Buttons that share this page → use Social Share.
• Contact details with text → use Icon List.

Procedure

1. Add a row per profile: the network and your handle, email address, phone number or full address.
2. Choose the alignment and the shape.
3. On the Style tab, choose between brand colours and your own, and set the size and gap.

Behaviour on the page

• A handle is turned into the network's profile address; a full address is used as given.
• An email opens the visitor's mail program, a phone number dials on phones, and WhatsApp opens a chat.
• Each icon is announced by its network name to screen readers.

Troubleshooting

Settings reference

General tab

Style tab

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Social Share

Blocks panel → Content · add-on key social_share

The Social Share add-on gives visitors buttons to share the current page on social networks, by email, by the device's own share sheet, by printing or by copying the link. It can sit in the page, float at a screen edge, stick under the top of the window, or run as a bar along the bottom of a phone.

When to use it

• Articles, events and offers that visitors are likely to pass on.

When to choose another add-on

• Links to your profiles → use Social Icons.

Procedure

1. Add a row per network in the order they should appear.
2. Optionally write a small heading, and an address or text to share instead of the current page.
3. On the Style tab, choose the placement, shape and colouring, and the sizes.

Behaviour on the page

• With the address and text empty, the current page's address and title are shared.
• "native" opens the device's own share sheet where the browser supports it, and is hidden where it does not.
• "copy" copies the address and confirms it on the button.
• Share links open in a small window; no network scripts are loaded, so nothing tracks visitors.

Settings reference

General tab

Style tab

Its font, size, weight, spacing, shadow and hover-effect settings are the ones described in Settings most add-ons share.

This add-on also takes the settings every add-on shares: animation, hover and animated background, free position, and custom CSS. They are described once, in their own chapters.

Special Heading

Blocks panel → Content · add-on key special_heading

The Special Heading add-on sets text with a typographic effect: 3D sugar letters, a sliced split, vertical writing, a multi-colour gradient, a retro layered shadow, neon, text around a circle, a picture inside the letters, an outline echo, a peeled sticker, bouncing letters or a neon tube. It can be a heading in the outline, or large ghost text behind a section.

When to use it

• A campaign or event title that must be memorable.
• A single statement in a hero.

When to choose another add-on

• A standard heading → use Heading.
• Large faded text behind a section → use Ghost Word.
• Rotating words → use Animated Heading.

Procedure

1. Type the text and choose the effect.
2. Choose whether it is shown as a heading or behind the section, and the level.
3. For the picture effect, choose the picture; for the circle effect, the icon and circle size; for vertical writing, whether letters stand upright.
4. On the Style tab, set up to four colours, the depth and the gradient angle, and the typography.
5. Set a size for phones; the text scales between that and the desktop size.

Behaviour on the page

• The text remains real text, read by search engines and screen readers.
• Animations stop for visitors who ask for reduced motion.
• Behind the section, it is decorative and hidden from screen readers.

Troubleshooting

Settings reference

General tab