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.
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.
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. |
| Social | Display icons linking to social media accounts. |
| 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. |
| 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.
To save one of your elements including its content and settings as preset, hover it and click the Save in Library icon.
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.
