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


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.

Element Library


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.

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.


List Elements

These elements have a list of content items with each item having 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.

My Elements

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.

Save Element

YOOtheme Pro