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.
Go to the Builder panel of YOOtheme Pro and open the Element Library by clicking the white space with the plus icon where you want to add an element to the layout. The Element Library will open in a lightbox.
New Element
The New tab shows a list of more than 30 elements for different types of content. Click on one of them to load it into the current layout. All elements can be grouped into four types: Single-field, Multi-field, List and Advanced Elements. Custom elements added by a child theme will appear along with the default YOOtheme Pro elements and can be used in the same way.
Note 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, it makes more sense to apply a Panel than using three separate elements. To create a sophisticated grid, try the Grid or the Gallery element, both are used for repeating content blocks. If you need very specific settings, you can use core elements like Text and Image. Mind that this also means that you will have more individual settings to adjust if you want to change your layout later.
Single-field Elements
These core elements just have a few style settings and one content field.
| Element | Description |
|---|---|
| Alert | Display an error message. |
| Code | Display multiple lines of code in a preformatted text block. |
| Countdown | Display a countdown timer to a specific date. |
| Divider | Display a horizontal divider. |
| Headline | Display a headline. |
| Html | Display custom HTML code. |
| Icon | Display a scalable vector icon. |
| Image | Display an image with an optional link. |
| 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 local video or a YouTube or Vimeo video. |
Note The Image element can open any link inside a modal window. Linked media files are displayed inside a modal without leaving the page. The targets of regular links will show in an iframe inside the modal.
Multi-field Elements
These elements have a group of content fields: a title, meta and description text as well as an image and a link.
| Element | Description |
|---|---|
| Overlay | Display an image with a content overlay. |
| Panel | Display text with an image optionally styled like a card. |
Panel Element
The Panel element is one of the most often used elements in YOOtheme Pro. Thanks to its different fields, you can store a lot of content and group it in just one element, which keeps the page builder layout clear. By default, it has no background style, so you can't tell whether the content is built with a Panel element or multiple single-field elements. But Panel elements can also be boxed and styled like a card.
Grid Element
The Grid element consists of a list of Panel elements arranged in a grid layout. Add as many panels as needed and configure their settings in one place. Try to achieve your layout with a Grid element first, then move to managing single Panel elements if you need more control and settings.
Overlay Element
The Overlay element displays its content fields in an overlay on top of the image, other than the Panel element where the content is always below the image or side by side but never in an overlay.
Gallery Element
The Gallery element consists of a list of Overlay elements arranged in a grid layout. Add as many overlays as needed and configure their settings in one place. Try to achieve your layout with a Gallery element first, then move to managing single Overlay elements if you need more control and settings.
Multiple Item Elements
These elements have multiple content items where each item has multiple fields.
| 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 list of text. |
| Map | Display a map with markers from Google Maps or OpenStreetMap. |
| Popover | Display an image with markers, which open popovers. |
| Slideshow | Display an image slideshow. |
| Subnav | Display a horizontal navigation. |
| Switcher | Display a tabbed navigation which transitions through content slides. |
| Table | Display a table. |
Note The Button element can open any link as a modal window. Linked media files are displayed inside a modal without leaving the page. Regular links will show in an iframe inside the modal.
Note Both the Grid and Gallery elements allow creating lightbox galleries with images and videos. Open images or videos inside a lightbox by clicking an item from a Gallery or Grid and navigate between items from within the lightbox.
Advanced Elements
These elements include special functionality from Joomla or web services. The Module and Position elements are very powerful and have their own documentation.
| Element | Description |
|---|---|
| Newsletter | Display a newsletter signup for Mailchimp or Campaign Monitor. |
| J! Module | Display a specific Joomla module with its dynamic content. |
| J! Position | Display all Joomla modules assigned to a specific position within a grid. |
My Elements
The My Elements tab shows a list of your configured and saved elements with their content and settings. Click the name of the element to load it into the current layout. Elements can also be renamed and deleted with the action buttons which show up on the right side when hovering an element.
To save one of your elements including its content and settings, hover it within the YOOtheme Pro page builder and click the Save in Library button.
