Zum Hauptinhalt springen

Herzog Dupont for YOOtheme Pro Documentation

Updated on: 17. Mai 2022
On this page you can finde the documentation on the Herzog Dupont plugin for Joomla! and WordPress. If you think something is missing here, please contact me via e-mail.

Requirements

In order to install and activate the Herzog Dupont plugin, your system needs to meet the following minimum requirements.
  • Joomla! 3.9/Joomla! 4.0 or WordPress 5.4
  • PHP 7.4
  • YOOtheme Pro 2.7.0

Installation

In order to install the Herzog Dupont plugin, follow the steps below for your CMS.

Joomla! 3

  • download the installation package from the Joomla! Extension Directory
  • install it via the Joomla! extensions manager at Extensions 🠖 Manage 🠖 Install

Joomla! 4

  • download the installation package from the Joomla! Extension Directory
  • install it via the Joomla! extensions manager at System 🠖 Install 🠖 Extensions

WordPress

  • download the installation package from the WordPress Plugin Directory
  • upload & install it via the WordPress Plugins screen
  • activate the plugin

Elements

This section shall provide a short description of each element and outline typical use cases. Furthermore, the most important or specific settings of each element shall be described. Please note that not every single field will be described in detail as most element settings should already be self-explanatory or are already well-described by their description text in the builder panel. Nevertheless, there are still some settings which might require a deeper explanation of what their effect is and how they can be used.

Work in progress

Please note that this page is not complete yet and still in the progress of being created.

Counter Element

The counter element can be used to display an animated number counting up and/or an animated circle. This can be useful in order to illustrate numbers, key figures or statistics visually.
Text
Text that will be displayed underneath the counter.
Number
The number to which the counter should count up.
Unit
Text that will be displayed after the counter. This can be also be used to display a unit next to the number.
Separator locale
This setting will apply a language-sensitive representation of this number. Basically, it is used to show a separator for thousands, e. g. if None would show 1000000, English (U.S.) – comma would show 1,000,000 and German (Germany) – full stop would show 1.000.000.
Percentage
Set the percentage of the circle that should be filled when the animation is complete.
Circle radius
Set the radius for the circle in px, i. e. how large the circle should be drawn.
Circle stroke width
Set the stroke width for the circle in px.
Duration
Set the animation duration in ms, i.  how long it takes to draw the circle and count up the number.
Circle color
Set the color for the circle. Click on the color preview field to open the YOOtheme Pro color picker.

Flipcard Element

This section is still in the works…

Image Comparison Element

This section is still in the works…

Lottie Element

The Lottie element can be used to display Adobe After Effects animations on your website to provide beautiful and interactive illustrations for your products/services. The animation has to be exported with the Bodymovin plugin. Alternatively, you can get ready-to-use Lottie animation files from providers such as LottieFiles. Most offer both free and premium Lottie animation files. Read more about Lottie animations on the Airbnb Design website.
Animation Path
This is the path to the source file for the Lottie animation. You can either use the file picker or enter a URL directly. The file has to be a Lottie JSON file, i. e. an Adobe After Effects animation that has been exported with the Bodymovin plugin.
Trigger
Choose the animation trigger. Autoplay: The animation will start once it is loaded. In View: The animation will start once it reaches the viewport. Click: The animation will start when a click event is triggered on the element. Mouse Enter: The animation will start when a mouseenter event is triggered on the element. Scroll: The animation frames will be shown according to the scroll position. None: The animation will not be started by the plugin, this can be used for custom scripts.
In View Top Offset
Set the top offset for the in view trigger. Requires the trigger to be set to In View.
Loop
Choose whether the animation should be played once or in a loop. Not available if the trigger set to Scroll.
Speed
Set the play speed for the animation.
On Mouse Leave
Choose whether or not the animation shall pause on mouse leave. Requires the trigger to be set to Mouse Enter.
Animation Start
Set the start point of the animation. This value is a percentage of the total animation frames.
Animation End
Set the end point of the animation. This value is a percentage of the total animation frames.
Renderer
Select the HTML element the lottie animation will be rendered with.
Animation Name
Set an animation name to reference the animation in custom scripts. This can be used to programatically control a lottie animation. E. g. if you have set mylottie as animation name, you can start the animation with lottie.play('mylottie') and pause it with lottie.pause('mylottie'). See the Lottie for Web GitHub repository for a list of available methods.

Progress Element

This section is still in the works…

Slideshow Grid Element

This section is still in the works…

Timeline Element

The timeline element will show a list of panels connected with a vertical line. It is based on the grid element and offers many of its features: You can set title, meta, content, link, image or icon and an additional icon that will be shown on the timeline. The element does not feature a filter or lightbox, though. You can set the timeline line and icon colors as well as choose from different timeline alignment options per breakpoint.
Line Color
Set the color for the timeline. This setting will override the default setting from the style customizer.
Timeline Icon Color
Choose the color for the icon that is shown on the timeline.
Timeline Icon Border Color
Set the border color for the timeline icon.
Timeline Icon Background Color
Choose the background color for the icon that is shown on the timeline.
Item Alignment

Choose the timeline item alignment. Left: All items are aligned to the left. Right: All items are aligned to the right. Left Alternate: The first item is aligned to the left, the second to the right, the third to the left…. Right Alternate: The first item is aligned to the right, the second to the left, the third to the right…. Inherit: Apply the same setting as for the breakpoint above.

The breakpoints are defined in the style customizer at Style 🠖 Global 🠖 Breakpoints.

Here you can also set the top margin for the timeline items to define how much space shall be shown between the timeline items.

Style Customizer Settings

The timeline element integrates with the style customizer. It uses the global theme breakpoints which are defined at Style 🠖Global 🠖 Breakpoints for the item alignment. Additionally, you can find element-specific settings at Style 🠖 HD Timeline.
Line Color
Set the color for the timeline. This setting can be overridden by the element setting.
Line Width
Set the width for the timeline. The timeline icon border width will be automatically calculated based on this setting.
Item Container Padding
Set the container padding for the timeline items.
Timeline Icon Background Color
Choose the background color for the icon that is shown on the timeline.
Item Alignment
Choose the timeline item alignment. Left: All items are aligned to the left. Right: All items are aligned to the right. Left Alternate: The first item is aligned to the left, the second to the right, the third to the left…. Right Alternate: The first item is aligned to the right, the second to the left, the third to the right…. Here you can also set the top margin for the timeline items to define how much space shall be shown between the timeline items.

Toggle Element

The toggle element can be for multiple purposes. Not only can you show or hide text on clicking a button, but you can also show/hide any element (even rows and sections) or change its appearance by toggling a custom class. You can also toggle multiple elements at once, for example to hide one element and show another. The toggle event offers multiple triggers and can be combined with various animations.
Content
Content that will be displayed before the toggle button. If you don’t need content before the toggle but, simply delete the placeholder text and leave this field empty.
Advanced
Content that will be displayed after the toggle button. This is the content that will be toggled by default to show/hide when clicking the button.
Mode
Set the trigger behaviour mode. A toggle can be triggered in different ways: on hover, on click or based on the on the viewport width. You can also choose a combination of the three options.
Hide Content 2 on load
If checked, Content 2 will be be hidden on page load. If the toggle is then triggered, it will show Content 2. If unchecked, Content 2 will be visible on page load and once the toggle is triggered, Content 2 will be hidden. If you want to apply a custom class to Content 2 instead of showing/hiding it, uncheck this option.
Target
Set a CSS selector for the HTML element(s) of which you want to toggle a class (defined in setting `Cls`). Content 2 must be empty to use this setting.
Cls
The class that is being toggled on the target. If not set, the `hidden` attribute will be toggled.

Settings

To view the plugin settings, access the YOOtheme Pro Page Builder and navigate to Settings 🠖 Herzog Dupont. There, you can select which elements should or should not be loaded in YOOtheme Pro. By default, all elements are available in the page builder. If you disable any element, this element will not show up in the element library anymore.
Counter Element
If checked, the Counter Element will be added to the element library.
Flipcard Element
If checked, the Flipcard Element will be added to the element library.
Image Comparison Element
If checked, the Image Comparison Element will be added to the element library.
Lottie Element
If checked, the Lottie Element will be added to the element library.
Progress Element
If checked, the Progress Element will be added to the element library.
Slideshow Grid Element
If checked, the Slideshow Grid Element will be added to the element library.
Timeline Element
If checked, the Timeline Element will be added to the element library.
Toggle Element
If checked, the Toggle Element will be added to the element library.

Uninstall

To uninstall the Herzog Dupont plugin, follow the steps below for your CMS.

Joomla! 3

  • in your Joomla! admin panel, navigate to Extensions 🠖 Manage 🠖 Manage
  • enter the search term Herzog Dupont into the search field and click on the search button
  • check the entry System - Herzog Dupont and click on the uninstall button

Joomla! 4

  • in your Joomla! admin panel, navigate to System 🠖 Manage 🠖 Extensions
  • enter the search term Herzog Dupont into the search field and click on the search button
  • check the entry System - Herzog Dupont and click on the uninstall button

WordPress

  • in your WordPress admin panel, navigate to Plugins 🠖 Installed Plugins
  • enter the search term Herzog Dupont into the search field
  • click on the deactivate button underneath the entry Herzog Dupont
  • click on the delete button underneath the entry Herzog Dupont

Troubleshooting

Timeline does not work

If the timeline does not appear styled, i.­e. if all items are left aligned and there is no line visible (screenshot 1), you might need to recompile the style. After that, the timeline should appear correctly (screenshot 2). This is because the timeline is integrated in the YOOtheme Pro Style Customizer and the LESS styles need to be compiled by YOOtheme Pro at least once. Usually, this automatically happens if you update YOOtheme Pro and open the page builder for the first time after the update.

Elements do not work on a 404 page

Any element that requires assets such as a CSS or JS file does not work on a 404 page, at the moment. The reason for this is that there is a general issue on 404 pages with loading assets via $metadata->set() in custom elements. This problem will occur for any custom element, i. e. of this plugin as well as by any third party. This issue has been confirmed by YOOtheme. Unfortunately, it’s not quite easy to fix, so there is no fix to be expected soon.

As a workaround, you could try to load the assets for the custom elements on your 404 page by adding the following into an HTML element at the top of your template layout:


<script src="https://example.com/plugins/system/herzogdupont/modules/elements/elements/hd-progress/js/hd-progress.js" defer></script>
<link href="https://example.com/plugins/system/herzogdupont/modules/elements/elements/hd-counter/css/hd-counter.css" rel="stylesheet" />
<script src="https://example.com/plugins/system/herzogdupont/modules/elements/elements/hd-counter/js/hd-counter.js" defer></script>
<link href="https://example.com/plugins/system/herzogdupont/modules/elements/elements/hd-flipcard/css/hd-flipcard.css" rel="stylesheet" />
<script src="https://example.com/plugins/system/herzogdupont/modules/elements/elements/hd-flipcard/js/hd-flipcard.js" defer></script>
<link href="https://example.com/plugins/system/herzogdupont/modules/elements/elements/hd-image-comparison/css/hd-image-comparison.css" rel="stylesheet" />
<script src="https://example.com/plugins/system/herzogdupont/modules/elements/elements/hd-image-comparison/js/hd-image-comparison.js" defer></script>
<script src="https://example.com/plugins/system/herzogdupont/modules/elements/elements/hd-lottie/app/lottie.min.js" defer></script>
<script src="https://example.com/plugins/system/herzogdupont/modules/elements/elements/hd-lottie/js/hd-lottie.js" defer></script>

Make sure to replace example.com by your own domain.

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.

Changelog

The changelog can be found in the file CHANGELOG.md of the Joomla! plugin or in the file README.txt of the WordPress plugin. You can also view it online following the links below.

Source Code

View the source code of the plugin.