Element Library

The YOOtheme Pro page builder comes with a collection of ready-to-use elements to build your content. You can save configured elements with their content and settings into the element library and reuse them later.

Open the YOOtheme Pro page builder and click the Plus icon to add an element to the layout. The element library will open in a modal.

Add element


Elements

The Elements tab shows all available elements. Click the element icon to load it into the layout. Elements are grouped into Basic, Multiple Items and System elements. Custom elements added by a child theme are grouped under Custom.

Element library

Basic Elements

Basic elements are the default elements in YOOtheme Pro. They have their own content fields and settings. Learn more in the basic elements documentation.

Element Description
Alert Display an error message.
Code Display multiple lines of code in a preformatted text block.
Countdown Display a countdown timer for a specific date.
Divider Display a horizontal divider.
Headline Display a headline with an optional link.
HTML Display custom HTML code.
Icon Display an SVG icon with an optional link.
Image Display an image with an optional link.
Newsletter Display a newsletter signup for Mailchimp or Campaign Monitor.
Overlay Display an image with a content overlay.
Panel Display a panel or a card with text and image.
Quotation Display a quotation.
Text Display plain text.
To Top Display an icon which scrolls back to the top of the page.
Video Display a video file or a YouTube or Vimeo video.

Multiple Items Elements

Multiple items elements have multiple content items. Learn more in the multiple items elements documentation.

Element Description
Accordion Display an accordion with a list of items.
Button Display one or multiple buttons aligned horizontally.
Description List Display a description list.
Gallery Display multiple Overlay elements within a grid.
Grid Display multiple Panel elements within a grid.
List Display a vertical list.
Map Display a map from Google Maps or OpenStreetMap with markers.
Popover Display an image with markers, which open popovers.
Slider Display an image slider.
Slideshow Display an image slideshow.
Social Display icons linking to social media profiles.
Subnav Display a horizontal navigation.
Switcher Display a tabbed navigation which transitions through content slides.
Table Display a table.

System Elements

System elements add Joomla functionality into your layouts. Learn more in the system elements documentation.

Element Description
Breadcrumbs Display a breadcrumb navigation.
Pagination Display a pagination.
Module Display a Joomla module.
Position Display all Joomla modules assigned to a specific position within a grid.

My Presets

The My Presets tab shows a list of your configured and saved elements with their content and settings. To load a preset element into your layout, simply click on it. Use the Edit and Delete icons which appear on hover to rename or delete the preset.

My presets

To save one of your elements including its content and settings as preset, hover it and click the Save in Library icon.

Save element as preset


Layout Techniques

To keep your layout clearly arranged, it’s recommended to use as few elements as possible. For example, if you want to display a heading, an image and a text, use a Panel instead of three separate elements. If you have multiple panels side by side, use the Grid or Gallery elements which can display multiple items. If a specific combination of settings is needed, you may have to use the basic elements like Text and Image. Mind that this also means that you will have more settings to adjust if you want to change your layout later.

YOOtheme Pro Documentation