--- title: "YOOtheme Elements" --- # YOOtheme Elements ## Install the plugin (Joomla) Before installation please check that the below system requirements are met. You can ask your webhoster if the server you are working on supports them. You can also find the information in the Joomla! backend under System > System information. ## General requirements - Joomla! 4.x or 5.x ## Preparations - Create a full backup of the website. You can use [Akeeba Backup](http://www.akeeba.com) to create a quick one - Upgrade to the latest version of Joomla! ## Installation (upload & install) The installation of our extensions is done with the Joomla! installer. Anyone that is already using Joomla! shouldn't have any problem, for those that are somewhat new in Joomla! we'll explain the steps required to make the installation of the extensions in your website. 1) After downloading the installation file from our website, go to your Joomla! administration and go to **System > Install > Extensions** ![install 01](https://joomill-templates.com/images/documentation/general/install-01.jpg) 2) Then select the file in the tab **Upload Package File**, after a few moments you'll get a message saying the extension is installed. ![install 02](https://joomill-templates.com/images/documentation/general/install-02.jpg) 3) The plugin will be published automaticly. Go to **Extensions** » **Extension Manager,**find the System - Joomill Elements for YOOtheme Pro Now you're ready to start using our extension! [Lees meer...](https://joomill-templates.com/yootheme-elements/install-the-plugin.md) ## Install the plugin (WP) Before installation please check that the below system requirements are met. You can ask your webhoster if the server you are working on supports them.  ## General requirements - WordPress 6.x+ ## Preparations - Create a full backup of the website.  - Upgrade to the latest version of WordPress ## Installation (upload & install) The installation of our extensions is done with the WordPress installer. Anyone that is already using WordPress shouldn't have any problem, for those that are somewhat new in WordPress we'll explain the steps required to make the installation of the extensions in your website. 1) After downloading the WordPress installation file from our website, go to your WordPress administration and go to **plugins > Add Plugin** ![wordpress install 01](https://joomill-templates.com/images/documentation/general/wordpress-install-01.jpg) 2) Then select the file, after a few moments you'll get a message saying the extension is installed. ![wordpress install 02](https://joomill-templates.com/images/documentation/general/wordpress-install-02.jpg) 3) Click the Activate Plugin button. Now you're ready to start using our extension! [Lees meer...](https://joomill-templates.com/yootheme-elements/install-the-plugin-wp.md) ## Download Key (Joomla) When you install the Yootheme Elements you will see a download key is missing message in the Joomla dashboard. ![download key 01](https://joomill-templates.com/images/documentation/general/download-key-01.jpg)   You need to use this Download Key to enable automatic updating of our extensions. Our system checks if you use a valid Download Key and if you have an active subscription. You can find your personal Download Key on our website:  [https://www.joomill-extensions.com/account/downloadkey](https://joomill-templates.com/account/downloadkey) ![download key 03](https://joomill-templates.com/images/documentation/general/download-key-03.jpg) Copy the Download Key and paste it in the Edit Update Site screen. ![download key 02](https://joomill-templates.com/images/documentation/general/download-key-02.jpg) After you are done, press the Save and Close button. [Lees meer...](https://joomill-templates.com/yootheme-elements/download-key.md) ## Download Key (WP) When you install the Yootheme Elements you will see a download key is missing message in the WordPress dashboard. ![download key wp 01](https://joomill-templates.com/images/documentation/general/download-key-wp-01.jpg) You need to use this Download Key to enable automatic updating of our extensions. Our system checks if you use a valid Download Key and if you have an active subscription. You can find your personal Download Key on our website:  [https://www.joomill-extensions.com/account/downloadkey](https://joomill-templates.com/account/downloadkey) ![download key 03](https://joomill-templates.com/images/documentation/general/download-key-03.jpg) Copy the Download Key and paste it in the Edit Update Site screen. ![download key wp 02](https://joomill-templates.com/images/documentation/general/download-key-wp-02.jpg) After you are done, press the Save Settings button. [Lees meer...](https://joomill-templates.com/yootheme-elements/download-key-wp.md) ## Copyright Element Displays a dynamic copyright notice. The year updates automatically, and the site name is pulled from the global settings. Styling can be customized to match your design. In YOOtheme builder or templates you can Select new elements to create your pages.  Go to **YOOtheme > Layout > Footer** to add this element to all pages. In this popup you will see the Joomill Extensions section with all available elements. ![yootheme elements](https://joomill-templates.com/images/documentation/yoothemeelements/yootheme-elements.jpg) Select the Copyright element. ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/copyright-content.jpg) **Content Tab** | | | | --- | --- | | (start) Year | (optional) add the start year. The copyright notice will look like: copyright © start year - current year When you leave this field empty it will look like: copyright © current year | | Company | (optional) add the company name. The copyright notice will look like: copyright © current year - company name When you leave this field empty it will use the Joomla or WordPress site name. |    ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/copyright-settings.jpg) **Settings Tab** | | | | --- | --- | | Text Style | Choose the text style You can choose from: - None - Meta - Lead - Small  - Large | | Text Color |  Choose the text color. You can choose from: - None - Muted - Emphasis - Primary - Secondary - Success - Warning - Danger | **Demo** ![copyright](https://joomill-templates.com/images/extensions/yoothemeelements/copyright.png) [Lees meer...](https://joomill-templates.com/yootheme-elements/copyright-element.md) ## Edit Joomla article Element (Joomla only!) Adds a frontend edit button for Joomla articles, visible only to users with the correct editing permissions. This button allows quick access to the article editor directly from the website. The button’s style, size, and width can be fully customized to match your site design. You can place this button anywhere on the page and this button removes the floating YOOtheme default button on the bottom right. It's only visible for users with edit-rights.  In YOOtheme builder or templates you can Select new elements to create your pages.  In this popup you will see the Joomill Extensions section with all available elements. ![yootheme elements](https://joomill-templates.com/images/documentation/yoothemeelements/yootheme-elements.jpg) Select the Edit Button element. ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/edit-content.jpg) **Content Tab** | | | | --- | --- | | Style | Select the style of the button. You can choose from: - Default - Primary - Secondary - Danger - Text - Link - Link Muted - Link Text | | Size | Set the size of the button. You can choose from: - Small - Default - Large | | Full Width | Select if you would like to show the button full width | | Menu Item ID | Set the menu item ID for the edit page. I use this for example to make the edit page compatible with [https://obix.nl/en/joomla/joomla-extensions-by-obix/front-end-edit-helper](https://obix.nl/en/joomla/joomla-extensions-by-obix/front-end-edit-helper) |    ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/edit-settings.jpg) **Settings Tab** | | | | --- | --- | | Visibility | Choose where you would like to show the empty element. You can choose from: - Show Always - Visible Small (Phone Landscape) - Visible Medium (Tablet Landscape) - Visible Large (Desktop) - Visible X-Large (Large Screens) - Hidden Small (Phone Landscape) - Hidden Medium (Tablet Landscape) - Hidden Large (Desktop) - Hidden X-Large (Large Screens) | | Text Alignment | Set the alignment of the button. You can choose from: - Left - Center - Right - Justify | | Text Alignment Breakpoint | Change the alignment on a selected screen width. | | Text Alignment Fallback | Set the alignment fallback of the button. You can choose from: - Left - Center - Right - Justify | **Demo** ![editarticle](https://joomill-templates.com/images/extensions/yoothemeelements/editarticle.png) [Lees meer...](https://joomill-templates.com/yootheme-elements/edit-joomla-article-element.md) ## Empty Element Do you need more space between elements. This plugin adds a customizable spacer element to create vertical space between sections. The height can be adjusted to fit your layout perfectly. There is also a setting to show or hide it based on your device. In YOOtheme builder or templates you can Select new elements to create your pages.  In this popup you will see the Joomill Extensions section with all available elements. ![yootheme elements](https://joomill-templates.com/images/documentation/yoothemeelements/yootheme-elements.jpg) Select the Empty element. ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/empty-content.jpg) **Content Tab** | | | | --- | --- | | Height | Add the height of the emtpy element. You can add px or vh. |    ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/empty-settings.jpg) **Settings Tab** | | | | --- | --- | | Visibility | Choose where you would like to show the empty element. You can choose from: - Show Always - Visible Small (Phone Landscape) - Visible Medium (Tablet Landscape) - Visible Large (Desktop) - Visible X-Large (Large Screens) - Hidden Small (Phone Landscape) - Hidden Medium (Tablet Landscape) - Hidden Large (Desktop) - Hidden X-Large (Large Screens) | **Demo** ![empty element demo](https://joomill-templates.com/images/documentation/yoothemeelements/empty-element-demo.jpg) [Lees meer...](https://joomill-templates.com/yootheme-elements/empty-element.md) ## Reading Progress Bar Element Encourage site visitors to keep scrolling your page and read your whole content with the Reading Progress Bar. This element lets you add a progress bar on top of your site. You can even style it any way you want to make it look attractive. In YOOtheme builder or templates you can Select new elements to create your pages.  Go to **YOOtheme > Layout > Footer** to add this element to all pages. In this popup you will see the Joomill Extensions section with all available elements. ![yootheme elements](https://joomill-templates.com/images/documentation/yoothemeelements/yootheme-elements.jpg) Select the Reading Progress Bar element. ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/readingprogressbar-content.jpg) **Content Tab** | | | | --- | --- | | Color | Select the color of the progress bar. You can select any color you want with the color picker. | | Background | Select the backgroundcolor of the progress bar. You can select any color you want with the color picker. | | Height | Set the height of the progress bar. | | Position | Select the position of the progress bar. You can choose: Top or Bottom. |    ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/readingprogressbar-settings.jpg) **Settings Tab** | | | | --- | --- | | Visibility | Choose where you would like to show the empty element. You can choose from: - Show Always - Visible Small (Phone Landscape) - Visible Medium (Tablet Landscape) - Visible Large (Desktop) - Visible X-Large (Large Screens) - Hidden Small (Phone Landscape) - Hidden Medium (Tablet Landscape) - Hidden Large (Desktop) - Hidden X-Large (Large Screens) | **Demo** See the top of this page. [Lees meer...](https://joomill-templates.com/yootheme-elements/reading-progress-bar-element.md) ## Sticky to Top Element Displays a fixed ‘Back to Top’ button on the right bottom of your website. The button appears after scrolling and smoothly returns users to the top of the page when clicked. Fully styleable to match your site design. In YOOtheme builder or templates you can Select new elements to create your pages.  Go to **YOOtheme > Layout > Footer** to add this element to all pages. In this popup you will see the Joomill Extensions section with all available elements. ![yootheme elements](https://joomill-templates.com/images/documentation/yoothemeelements/yootheme-elements.jpg) Select the Sticky to Top element. ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/stickytotop-content.jpg) **Content Tab** | | | | --- | --- | | Icon | Click on the pencil to pick an icon from the icon library.  | | Title | Enter an optional text for the icon | | Link title | Enter an optional text for the title attribute of the link, which will appear on hover. |    ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/stickytotop-settings.jpg) **Settings Tab**   | | | | --- | --- | | Icon width | Set the size of the icon in px. | | Color | Choose the icon color. You can choose from: - None - Muted - Emphasis - Primary - Secondary - Success - Warning - Danger | | Title Style | Set the style of the Title Text Choose from:  - Meta - Small | | Grid Column Gap | Set the Grid Column Gap Choose from:  - None - Small - Medium - Default - Large | | Position Element | Select the position of the element on the screen. Choose from:  - Top Left - Top Center - Top Right - Center Left - Center  - Center Right - Bottom Left - Bottom Center - Bottom Right | | Position | Static (default) Change this to Relative to modify the position. | | Margin | Set the Margin of this element Choose from:  - Keep Existing - None - Small - Medium - Default - Large - X-Large | | Visibility | Choose where you would like to show the empty element. You can choose from: - Show Always - Visible Small (Phone Landscape) - Visible Medium (Tablet Landscape) - Visible Large (Desktop) - Visible X-Large (Large Screens) - Hidden Small (Phone Landscape) - Hidden Medium (Tablet Landscape) - Hidden Large (Desktop) - Hidden X-Large (Large Screens) | **Demo** *See the right bottom of this page.* [Lees meer...](https://joomill-templates.com/yootheme-elements/sticky-to-top-element.md) ## Sticky WhatsApp Element A sticky WhatsApp button is a convenient, always-visible button on your website that allows visitors to get in touch with you directly via WhatsApp. The link looks like: whatsapp://send?phone={phonenumber} on mobile devices and https://web.whatsapp.com/send?phone={phonenumber} on desktop. This button "sticks" to the bottom corner or side of the screen as the user scrolls, ensuring easy and immediate access. Fully styleable to match your site design. In YOOtheme builder or templates you can Select new elements to create your pages.  Go to **YOOtheme > Layout > Footer** to add this element to all pages. In this popup you will see the Joomill Extensions section with all available elements. ![yootheme elements](https://joomill-templates.com/images/documentation/yoothemeelements/yootheme-elements.jpg) Select the Sticky WhatsApp element. ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/stickywhatsapp-content.jpg) **Content Tab** | | | | --- | --- | | Phone Number | Enter the number of your WhatsApp account | | Title | Enter an optional text for the icon |    ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/stickywhatsapp-settings.jpg) **Settings Tab** | | | | --- | --- | | Icon width | Set the size of the icon in px. | | Color | Choose the icon color. You can choose from: - None (default WhatsApp color) - Muted - Emphasis - Primary - Secondary - Success - Warning - Danger | | Title Style | Set the style of the Title Text Choose from:  - Meta - Small | | Grid Column Gap | Set the Grid Column Gap Choose from:  - None - Small - Medium - Default - Large | | Position Element | Select the position of the element on the screen. Choose from:  - Top Left - Top Center - Top Right - Center Left - Center  - Center Right - Bottom Left - Bottom Center - Bottom Right | | Position | Static (default) Change this to Relative to modify the position. | | Margin | Set the Margin of this element Choose from:  - Keep Existing - None - Small - Medium - Default - Large - X-Large | | Visibility | Choose where you would like to show the empty element. You can choose from: - Show Always - Visible Small (Phone Landscape) - Visible Medium (Tablet Landscape) - Visible Large (Desktop) - Visible X-Large (Large Screens) - Hidden Small (Phone Landscape) - Hidden Medium (Tablet Landscape) - Hidden Large (Desktop) - Hidden X-Large (Large Screens) | **Demo** ![stickywhatsapp](https://joomill-templates.com/images/extensions/yoothemeelements/stickywhatsapp.jpg) [Lees meer...](https://joomill-templates.com/yootheme-elements/sticky-whatsapp-element.md) ## Sticky Signal Element A sticky Signal button is a convenient, always-visible button on your website that allows visitors to get in touch with you directly via Signal. The link looks like: https://signal.me/#p/{phonenumber}. This button "sticks" to the bottom corner or side of the screen as the user scrolls, ensuring easy and immediate access. Fully styleable to match your site design. In YOOtheme builder or templates you can Select new elements to create your pages.  Go to **YOOtheme > Layout > Footer** to add this element to all pages. In this popup you will see the Joomill Extensions section with all available elements. ![yootheme elements](https://joomill-templates.com/images/documentation/yoothemeelements/yootheme-elements.jpg) Select the Sticky Signal element. ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/stickysignal-content.jpg) **Content Tab** | | | | --- | --- | | Phone Number | Enter the number of your Signal account | | Title | Enter an optional text for the icon |    ![empty content](https://joomill-templates.com/images/documentation/yoothemeelements/stickysignal-settings.jpg) **Settings Tab** | | | | --- | --- | | Icon width | Set the size of the icon in px. | | Color | Choose the icon color. You can choose from: - None (default Signal color) - Muted - Emphasis - Primary - Secondary - Success - Warning - Danger | | Title Style | Set the style of the Title Text Choose from:  - Meta - Small | | Grid Column Gap | Set the Grid Column Gap Choose from:  - None - Small - Medium - Default - Large | | Position Element | Select the position of the element on the screen. Choose from:  - Top Left - Top Center - Top Right - Center Left - Center  - Center Right - Bottom Left - Bottom Center - Bottom Right | | Position | Static (default) Change this to Relative to modify the position. | | Margin | Set the Margin of this element Choose from:  - Keep Existing - None - Small - Medium - Default - Large - X-Large | | Visibility | Choose where you would like to show the empty element. You can choose from: - Show Always - Visible Small (Phone Landscape) - Visible Medium (Tablet Landscape) - Visible Large (Desktop) - Visible X-Large (Large Screens) - Hidden Small (Phone Landscape) - Hidden Medium (Tablet Landscape) - Hidden Large (Desktop) - Hidden X-Large (Large Screens) | **Demo** ![stickywhatsapp](https://joomill-templates.com/images/extensions/yoothemeelements/stickysignal.jpg) [Lees meer...](https://joomill-templates.com/yootheme-elements/sticky-signal-element.md) ## Changelog [changelog-yootheme] [Lees meer...](https://joomill-templates.com/yootheme-elements/changelog.md)