Custom elements for YOOtheme Pro

Check out the custom elements for YOOtheme Pro created by the first YOOtheme Pro extension provider. They can easily be installed used on your website via a plugin. There are eight elements so far, all of them are included in the plugin: Toggle, Progress, Timeline, Counter, Flipcard, Image Comparison and Slideshow Grid. No fees, no ads, no subscription required. No additional JavaScript libraries such as jQuery are loaded by any of these elements (except for the Lottie element which, of course, requires the Lottie library).

YOOtheme Pro is a page builder for Joomla! and WordPress developed by YOOtheme and probably the most powerful theme and page builder. It offers more than 30 built-in elements with a lot of options. Still, in some cases the built-in elements might not be enough. Fortunately, you can easily extend the functionality of the YOOtheme Pro page builder with custom elements.

This page provides an overview of my custom elements (which are free software), their features and links to the demos. You can view the source code for both the Joomla! plugin and the custom elements on GitHub. The source code for the WordPress plugin can be viewed on WordPress Trac. For details on the license, please see the GPL 3.0.

Plugin for Joomla! and WordPress

An extension for YOOtheme Pro which adds all the custom elements to the page builder.
  • simple installation via the Joomla! extensions manager and WordPress Plugin screen
  • does not require creating a child theme
  • one click update via Joomla! Update component and WordPress Plugin screen
  • choose which elements should or should not be loaded in YOOtheme Pro

Downloads

Download the plugin from the official plugin directories.

Documentation

View the documentation of the plugin and its custom elements.

Support

This product is free software according to GPL 3.0 and, thus, distributed without any warranty. If you find a bug, want to report an issue or are having trouble using this plugin, please use the following tools to open a support thread/issue. I prefer using publicly available fora as they might help others having the same question and it spares me having to maintain a ticketing system. I’ll try to answer any request, but can’t make any promise about the response time or that your issue will be solved. Please note that I do not offer paid support. Thank you.

Toggle Element

A custom element for the YOOtheme Pro Page Builder to render the UIkit 3 Toggle component.
  • use any combination of the three toggle modes: click, hover & media
  • toggle a content field below the toggle button or a custom target
  • choose from different button styles and sizes and set a button icon
  • toggle visibility, animation or a custom class
Toggle Element

Progress Element

A custom element for the YOOtheme Pro Page Builder to render the UIkit 3 Progress component.
  • set start, stop and maximum values
  • set animation step size and speed
  • color defined by the theme style, can be customized via the style customizer
  • animation starts when in viewport
Progress Element

Timeline Element

A custom element for the YOOtheme Pro Page Builder based on the grid element.
  • choose from different alignments for different viewport sizes
  • set colors for timeline, icon border and icon background
  • items offer fields for title, meta, content, image, icon and link
  • use many settings you know from the grid element like panel style, image alignment, box decoration and more
Timeline Element

Counter Element

A custom element for the YOOtheme Pro Page Builder to display an animated number counting up.
  • use a number counter, a circle or both
  • choose from different colors and font sizes for the text and the number
  • set circle color, radius, stroke width and percentage
  • set the animation time and a separator for thousands
  • animation starts when in viewport
CounterElement

Flipcard Element

A custom element for the YOOtheme Pro Page Builder to display a panel with a flipcard animation.
  • choose from 8 different animations
  • choose 2D or 3D effect
  • choose the flip modes for mouse and touch events
  • the element offers fields for title, meta, content and image/icon for both the front and the back
  • set a link for the back and a dummy link for the front (for layout purposes only, no actual link)
Flipcard Element

Image Comparison Element

A custom element for the YOOtheme Pro Page Builder to compare two images.
  • use different image sizes
  • set a custom slider icon
  • works with both click and touch input and optionally on mouseover
  • supports YOOtheme Pro built-in lazy loading and image optimization
Image Comparison Element

Slideshow Grid Element

A custom element for the YOOtheme Pro Page Builder that resembles the Widgetkit 3 Grid Slider Widget to display multiple slideshows within one grid.
  • display multiple slideshows within one grid
  • every grid item will contain its own slideshow including navigations, animations and other features
  • thumbnail navigation
  • filter and masonry
Looking for a download or the source code?
This element is part of the Herzog Dupont plugin. There is no separate GitHub repository for this element, but you can view and get the source code for it by checking out the source code of the Joomla! plugin. The elements are stored in the directory modules/elements/elements/.
Slideshow Grid Element

Lottie Element

A custom element for the YOOtheme Pro Page Builder to display Lottie animations with a variety of triggers.
  • display eye-catching and engaging Lottie animations
  • choose from a variety of triggers
  • set the animation start and end points
  • add an optional link to the animation
Looking for a download or the source code?
This element is part of the Herzog Dupont plugin. There is no separate GitHub repository for this element, but you can view and get the source code for it by checking out the source code of the Joomla! plugin. The elements are stored in the directory modules/elements/elements/.
Lottie Element