Webal Call to Action

Pro This module comes in the Pro package only.

Webal Call to Action shows a call to action: a heading, a few words, up to two buttons and, if you want one, a picture, set out together in a band. Use it for a line such as "Book a table this autumn" with a Book now button.

You choose whether the buttons sit under the words, beside them (at the end or at the start), or whether the picture sits before or after the words.

For long reading text, use Webal Text, and for a picture on its own, use Webal Image.

Add it to a page

These steps follow the order of the screens in Joomla, and nothing is saved until you press Save.

1. Log in to the Joomla administrator, and in the menu on the left choose Content, then Site Modules.
2. Press New, and a list of module types opens so that you can choose from it.
3. Choose Webal Call to Action from the list of module types, which starts a new module of that kind.
4. Type a Title for the module, using a name that tells you what the module is for.
5. On the Module tab, in the Title group, type the heading and choose its level.
6. Write one or two sentences in Text that ask the visitor to do one thing.
7. Under Buttons, press Add for each button, and you can add up to two. Type the Button words and choose where the button goes with Link.
8. Open the Look tab and choose the Arrangement.
9. For a picture arrangement, choose the picture in the Image group and describe it in its Alternative text.
10. To put a colour, a gradient or a picture behind the block, open the Layout tab and use Background.
11. Go back to the Module tab, then open the Position list in the right-hand column and choose a position. A position is a named place in your template where a module can go. For a wide block in Cassiopeia, main-top and main-bottom are good choices.
12. Under Title in the same column, choose Hide, because the heading you typed in the Title group is the title. Otherwise your template adds a second heading above it.
13. Press Save, and wait until the message "Module saved." appears.
14. Open the Menu Assignment tab. In Module Assignment, choose Only on the pages selected, so that the module appears only on the pages that you pick.
15. Beside Assign to Menu Items, press None, because every page stays ticked until you do this.
16. Type the name of the page in the search box, then tick that page so that the module appears there.
17. Press Save & Close, which saves the module once more and closes the editing screen.
18. Open that page on your site and look for the module in the position that you chose.

Options

Module tab

The options of this module sit in the middle column of the Module tab, and the group is called Content.

Look tab

Layout tab

This tab has the shared groups General, Spacing, Width, Colour scheme and Background. They work the same in many modules, so they are explained once: see General, Spacing, Width, Colour scheme and Background. The Background group gives the block a colour, a gradient or a picture behind it. The buttons follow the Background and the Colour scheme, so an outline button on a dark band is still readable. For a band that runs edge to edge, put the module in a top or bottom position, set the module style to None, and choose Full width.

Animation tab

The shared Animation group plays one effect for the whole block, or Each item in turn. The heading, the text, the buttons and the picture can each have their own effect and delay. A part left on Same as the whole block takes the block's effect and keeps its own delay. With Each item in turn on the whole block, the part settings are not used. Everything is off for visitors who ask for less motion, and everything is visible with scripts off. Do not animate a heading that is the first thing on the page.

Advanced tab

This tab holds Joomla's own settings, such as Module Class and Caching. The result depends only on the options, the picture file and the link targets.

Result

Accessibility

• The module prints one heading at the level you choose and names the section after it, and it adds no other heading.
• The words come first in the reading order and the Tab order in every arrangement, and "At the start" only moves the buttons on the screen.
• Every button is a real link with its words as its name, at least 44 pixels high, with a clear focus ring. A link that opens in a new tab says so in words.
• A picture needs alternative text, or Decorative image, and the file name is never used. There is no caption, so use Webal Image for a picture with a caption.
• Below the screen size you choose, everything is one column, and long button words wrap inside the button, so there is no sideways scrolling at 320 pixels.

Other languages

The words you type stay as you typed them, and the new-tab notice comes from the language files.

For a site with more than one language, make a copy of the module for each language and set its Language on the Module tab.

Tips

• If there is no heading, no text and no button that can be shown, the module shows nothing, and a picture on its own does not count.
• A button with no words, or with no usable link (a page that is unpublished, a page the visitor may not see), is left out. With no buttons, the words use the full width.
• For a band that runs edge to edge, put the module in a top or bottom position, set the module style to None, and choose Width: Full width. Set Maximum width in General if the words should stay at a readable line length.
• Each part (heading, text, buttons, picture) can have its own animation effect and delay. Once one part has its own, the block stops animating as one and each part plays on its own.

Related pages

• Webal Button
• Webal Heading
• Webal Pricing
• Webal Countdown