Webal Blocks is a component, a set of modules and plugins that lets anyone, whether new to Joomla or already familiar with it, build a site from native Joomla blocks. The result is an accessible site with very high performance.
The chapters below follow the order of a new build. Read them in order the first time, then come back to a single page when you need it.
Introduction
This chapter explains what Webal Blocks is, what is in Free and Pro, and which words are used in these instructions.
- What is Webal Blocks: Webal Blocks is a component, a set of modules and plugins that lets anyone build a site from native Joomla blocks.
- Free and Pro: Which modules and tools are in the Free package and which are in Pro.
- How the instructions are organised: How the chapters of these instructions fit together and how to find a page.
- Words used in these instructions: A short list of the words used in these instructions, with what each one means.
Requirements
This chapter lists what your web host, Joomla, database, template and visitors' browsers need.
- Server requirements: The version of PHP, and the PHP settings and extras, that your web host must have.
- Joomla requirements: The Joomla versions the package installs on.
- Database requirements: The databases Joomla supports and what Webal Blocks needs from them.
- Template requirements: The templates Webal Blocks has been tested with, and what to expect from others.
- Browser requirements: The browsers visitors need and what happens in older ones.
Installation
This chapter shows you how to install, check, update and remove Webal Blocks.
- Download and install the package: How to download the package and install it with the Joomla installer.
- What the install does and does not touch: Which parts of the site the install changes and which it leaves alone.
- Check the install: How to see that the install worked.
- Updating: How to update Webal Blocks.
- Upgrading from Free to Pro: How to move from the Free package to Pro.
- Uninstalling: How to remove Webal Blocks and what it refuses to remove while other parts are in use.
First setup
This chapter describes the Webal Blocks screens in the administrator area and the settings you should look at first.
- The Webal dashboard and Quick setup: The Webal Blocks dashboard in the administrator area and the Quick setup.
- Options tour: A tour of the Webal Blocks Options, tab by tab.
- Installing the menu layouts into templates: How to copy the Webal menu layouts into a template.
- Admin quick links: A small Cache control for the administrator area.
Navigation
This chapter covers the navigation bar, Menu profiles, mega menus and the other menu layouts.
- The navbar at a glance: What the Webal navbar is and how it is made from the Joomla Menu module.
- Navbar profiles: Saved sets of settings that change how a navbar looks.
- Quick setup presets: The ready-made starting points offered by Quick setup.
- Mega menus: Mega menus: panels of content under a menu item.
- The mobile menu: The menu that opens on phones and small screens.
- Accordion menu: The Webal accordion layout of the Menu module.
- List menu: The Webal list layout of the Menu module.
- Anchor strip: The Webal anchor strip layout of the Menu module.
- Colour switch and buttons in the navbar: Putting the colour switch and a button into the navbar.
- Navigation accessibility: How the Webal menus behave for keyboard and screen reader users.
Building a page
This chapter has one page for each module, set out in the order a typical web page reads: header, hero, intro, services, proof, content, offers, contact and footer.
Header
- Webal Offcanvas: A button, text link or icon button that opens a panel sliding in from the side, the top or the bottom of the window.
- Webal Colour mode switch: Three buttons, Light, Dark and Auto, so visitors can choose how the site looks.
- Webal Social links: Links to your social media profiles, or buttons that share the page, as icons, text or both.
Hero
- Webal Slideshow: A slideshow that shows one slide at a time, usually at the top of a page.
- Webal Video: Shows videos from YouTube, Vimeo or a file on your own site, each with a title, optional captions and a transcript.
Intro
- Webal Heading: A heading with an optional description under it.
- Webal Text: A block of text made with the Joomla editor: paragraphs, lists, links, pictures and tables, with an optional heading above it.
- Webal Button: A row of one to six buttons.
- Webal Divider: A plain line to separate two blocks on a page.
- Webal Image: One picture, with its own alternative text and caption.
Services
- Webal Features: A set of features, each with a small icon or picture, a title and a short line, shown in a grid or as a slider.
- Webal Cards: One card or many, shown in a grid or as a slider.
- Webal Steps: A numbered list of steps: a process, a how it works strip or a timeline.
- Webal Tabs: A set of tabs: a row of tab buttons (or a column) and one panel for each.
- Webal Accordion: Items with a title that open to show their content.
Proof
- Webal Counters: A row of big figures, such as 1,250 happy clients or 24 years, each with a label.
- Webal Progress: A set of progress figures, up to twelve: skills, goals or scores.
- Webal Testimonials: Quotes from people, shown in a grid or as a slider.
- Webal Logos: A wall or strip of client, partner or brand logos, each with the name of the organisation and an optional link.
- Webal Team: A team page in one module: each person has a photo, a name, a role and a short bio.
Content
- Webal Articles: Your Joomla articles as cards, in a grid or a slider.
- Webal Events: A list of events you type in, each with a title, a start date and time, and a place or an online link.
- Webal Carousel: A row of slides that scrolls sideways, with several in view at once.
- Webal Gallery: A gallery of pictures, with an optional caption under each picture and a viewer that opens a picture large.
- Webal Flickr: A gallery of the latest photographs of one Flickr user.
- Webal Charts: A chart drawn from numbers you type or paste: bars, a line, a pie or a donut.
- Webal Table: A table of data you type or paste: a price list, a timetable or a specification sheet.
Offers
- Webal Pricing: A row of price plans.
- Webal Call to Action: A call to action: a heading, a few words and up to two buttons, set out in a band.
- Webal Countdown: A clock that counts down to a date and time, with the date also written out in words.
- Webal Modal: A button, text link or picture that opens a box on top of the page.
Contact
- Webal Form: A contact or enquiry form that emails each message to the people you choose.
- Webal Newsletter: A newsletter sign-up box that adds people to a Mailchimp audience.
- Webal Contact details: Your address, telephone numbers, email addresses and opening hours, with a map link and a link to your contact form.
- Webal Hours: Shows your opening hours as a table or a short list, with an Open now or Closed now line.
- Webal Map: Shows where you are: a map you can move and zoom, with your address and links to get directions.
- Webal Facebook: Shows the feed of your Facebook Page.
Footer
- Webal Footer: A footer of up to six columns.
Site-wide features
This chapter covers the things that affect the whole site, such as dark styles, privacy and several languages.
- Consent and embeds: How embedded content waits for the visitor to choose.
- Dark styles and colour modes: Light, dark and automatic colour modes, and the dark styles for Cassiopeia.
- Surface padding and page width: The Options for the padding around the page and the page width.
- Multilingual sites: Using Webal Blocks on a site with more than one language.
- Performance and caching: What Webal Blocks does about speed and how it works with the Joomla cache.
- Accessibility: What Webal Blocks does for accessibility and what the site owner must still do.
Help
This chapter gives fixes for common problems, questions with answers, and the limits that come from Joomla.
- Troubleshooting: Problems that come up and how to solve them.
- Frequently asked questions: Short answers to common questions.
- Known Joomla limits: Things Joomla itself does not allow, and how Webal Blocks behaves because of them.
Reference
Settings that many modules share, and site-wide Options, one topic per page.
- Business details (Webal Blocks, Options): Where the business details of the site are kept and how the contact and footer modules use them. The contact and footer modules have their own pages.
- Fonts: loading and smoothing: The fonts live in Webal Blocks, **Options**, **Fonts** tab. This page explains the four yes/no boxes at the bottom of that tab.
- Forms: spam protection and privacy: The options live in Webal Blocks, **Options**, **Forms** tab. They apply to every Webal Blocks form and sign-up box.
- The Webal contact page layout: A restyled, more accessible page for **Joomla's own Contacts component**. Sites that already use Joomla Contacts get a contact page that matches Webal Blocks, with a form that is easier to use with a keyboard or a screen reader.
- Animation and scroll movement (common settings): Many Webal Blocks modules can move in as the visitor scrolls to them, and some can move a little as the page scrolls past (parallax).
- Buttons and cards (common settings): Many Webal Blocks modules show buttons (Button, Call to action, Cards, Slideshow, Pricing, the Modal and Offcanvas triggers) or cards (Cards, Features, Team, Testimonials, Articles, Events).
- Lists, pictures and text styles (common settings): Many Webal Blocks modules show a list of items (cards, team members, slides, logos, events) with a picture and a few lines of text for each.
- Sliders (common settings): Many Webal Blocks modules can show their items as a slider: cards, features, team members, testimonials, a carousel, a slideshow, logos, a gallery.
- Full width, edge to edge (common settings): Many Webal Blocks modules can run from one edge of the screen to the other: a coloured band, a call to action, a row of cards or a contact strip.
- Picture loading: Lazy, Eager and Deferred (common settings): Every Webal Blocks module that shows a picture has a **Loading** setting. It decides **when the browser fetches the picture file**.
- Dialogs and the image viewer (shared by the Modal, Image, Gallery and video modules): Several Webal modules open something on top of the page: the **Modal** opens a dialog with text, an article or a module position; the **Image** and **Gallery** modules open a picture in a full-window viewer with Previous and Next.
- Text that people type, and what the modules do with it: Several Webal modules show text that somebody typed or saved: the text of an accordion item, an article, a Custom HTML module placed in a module position, a footer column, a mega menu column.
Other manuals
- Webal Layouts manual: Arrange the parts of a Cassiopeia page on one screen, with a live preview: sections, rows, sidebars, the error and offline pages, and checks.
- Webal Phoca Pages manual: Arrange Phoca Cart's product page from blocks: layouts, category rules and checks before visitors see them.