Skip to main content

Documentation: YOOtheme Elements

Call to Action Element

Call to Action Element is only available in the PRO version.
Unlock this and other features by upgrading to Joomill YOOtheme Elements PRO

The Call to Action element combines a title, meta text, description, image or icon, and a link into a single promotional block, useful for a single highlighted panel rather than a full grid of items.

In the YOOtheme Builder, open the element picker and look for the Joomill Extensions group of elements, then select Call to Action.

Content tab

Title The main heading.
Meta Small text shown above or below the title or content, for example a category or date.
Content The description text. Supports rich text formatting.
Image / Image Alt An optional image for the block.
Icon An icon from the icon library, used instead of an image.
Link / Link Text / Link ARIA Label The link or button, its text, and an accessibility label for when the link has no visible text.

Settings tab

Panel Style / Link Panel / Hover Style / Padding / Image Without Padding / HTML Element Give the whole block a boxed or tile background, and optionally make the entire panel clickable.
Height / Image Height Expand the block to fill the available column height, and optionally expand the image along with it.
Title Style / Link Title / Hover Style / Decoration / Font / Color / HTML Element / Margin Top / Margin Bottom Style the title and optionally link it.
Meta Style / Color / Alignment (above/below title or content) / HTML Element / Margin Top / Margin Bottom Style the meta text and choose where it appears relative to the title and content.
Content Style / Force Left Alignment / Drop Cap / Columns / Column Divider / Columns Breakpoint / Margin Top / Margin Bottom Style the description text and optionally split it into columns.
Image/Icon Width/Height / Focal Point / Loading / Border / Box Shadow / Box Decoration (+ Inverse) / Link Image / Hover Transition (+ Border) / Hover Box Shadow / Position (top/left) / Grid Width / Column Gap / Row Gap / Breakpoint / Vertical Alignment / Inline SVG / Animate Strokes / SVG Color / Text Color Size, position and style the image or icon.
Link Attributes / Download / Nofollow / Noreferrer / Style / Button Size / Full width button / Margin Top / Alignment (bottom/right) / Column Gap / Row Gap / Breakpoint Style the link or button and set where it sits relative to the content.
Position, Margin, Max Width, Alignment, Text Alignment, Animation, Visibility The usual layout options shared by all Builder elements.
CSS Custom CSS for this element. Selectors .el-element, .el-title, .el-meta, .el-content, .el-image and .el-link are prefixed automatically.