SPACER
Spacer Element Changelog
v1.1.0
-
AddedNow Works with WordPress (Child Theme)
-
AddedChanged dropdowns to a slider for custom spacing options (THIS COULD BE A BREAKING CHANGE - UPDATE WITH CAUTION)
-
UpdatedCode Cleanup
-
RemovedDeprecated json code in element code
v1.0.0
-
AddedSpacer Element - First Release for YOOtheme Pro
Jan 16, 2025
1. Getting Started
Introduction
Requirements
- Joomla v4 or v5
- WordPress v6 (child theme required)
- YOOtheme Pro v2 or v3
- PHP v8.x
Installation & Upgrade
A free account is required to download the Spacer element from our site, when you log into your account, you can navigate to Account > Downloads > Spacer. Once you download the zip file, do not extract it, you will upload this zip file directly into the CMS install area. The file name will be: plg_system_md_spacer_joomla_X.X.X.zip
or md_spacer_wordpress_X.X.X.zip
. Follow the instructions below to install the element easily:
Joomla Installation
- Login to back-end area of your Joomla CMS site using a super administrator account and Navigate to Extensions > Manage > Install > Upload Package File.
- Drag and drop the file to upload or browse for the file by clicking the green button. The file name will be:
plg_system_md_spacer_joomla_X.X.X.zip
. - After the installation process is complete, you may need to active the plugin at Extensions > Plugins >
System - [MD] Spacer Element for YOOtheme Pro
. - Once installed and activated, you can launch YOOtheme Pro and add the Spacer element when adding a new element in the builder.
WordPress Installation
- Login to back-end area of your WordPress CMS site using a super admin account and create a Child Theme in your YOOtheme Pro installation and activate the child theme.
- Using FTP or an online upload option via your hosting platform, unzip the downloaded file
md_spacer_wordpress_X.X.X.zip
and copy the element folder into the directory/wp-content/themes/yootheme-child/builder/
of your installation where child is name of your child theme. - Access the YOOtheme Pro Page Builder, the new element should now be available.
- Once installed, you can launch YOOtheme Pro and add the Spacer element when adding a new element in the builder.
Upgrade Remotely (Joomla Only)
- You will first need a download key from your Modern Designs account. Go to Account > Dashboard and copy your
Download Key
. - In the back-end of your Joomla site, you need to navigate to Extensions > Update Sites > Spacer Element for YOOtheme Pro. Click on the title and paste the copied key in the Download Key field.
- Now navigate to Extensions > Update and click the Check For Updates button to update the Spacer Element if there's an updated version.
Upgrade Manually
- See the instructions above for either Joomla or WordPress to manually update to the newest version of the element.
Joomla Uninstall
- Login to back-end area of your Joomla CMS site using a super administrator account and Navigate to Extensions > Manage > Manage.
- Search for the plugin:
System - [MD] Spacer Element for YOOtheme Pro
. - Select the checkbox next to the plugin, click on the dropdown in the Actions dropdown menu and choose Uninstall.
Note:
It's highly recommended to make sure the Spacer element is not being used anywhere on your website in the builder, otherwise uninstalling this element could causing problems on your site.WordPress Uninstall
- Using FTP or an online file management option via your hosting platform, navigate to:
/wp-content/themes/yootheme-child/builder/
where "child" is name of your child theme. - Completely remove the element folder for the Spacer element to delete it.
Note:
It's highly recommended to make sure the Spacer element is not being used anywhere on your website in the builder, otherwise deleting this element could causing problems on your site.2. Setup

Adding the Element
- The Spacer element will be organized in the Modern Designs element group under the Elements tab.
- Click on the Spacer icon to add the element to your layout.
Editing the Element
- In your page layout, click on the Spacer element icon to open the element.
- Change the margin option slider or manually add a whole number.
- You can add a negative number or a positive number with no limits.

Element Defaults
- The Spacer element only has one option, a (top) margin.
- The default value is
20
(pixels). - You can choose to use the slider for a positive number up to 1000px. You can also manually add any positive or negative number in the input box.
3. Settings

General Settings
Most of these General Settings are the default/standard YOOtheme Pro settings for base elements and should be familiar to you. The following is the list of these available base settings for reference.
- Position
- Left
- Right
- Top
- Bottom
- Z index
- Margin
- Remove Top Margin
- Remove Bottom Margin
- Max Width
- Max Width Breakpoint
- Block Alignment
- Block Alignment Breakpoint
- Block Alignment Fallback
- Text Alignment
- Text Alignment Breakpoint
- Text Alignment Fallback
- Animation
- Edit Parallax
- Visibility
4. Advanced

Advanced Options
Most of these Advanced Options are the default/standard YOOtheme Pro settings for base elements and should be familiar to you. The following is the list of these available advanced options for reference.
- Name
- Status: Disable element
- ID
- Classes
- Attributes
- CSS
- the class name
.el-element
can be used to override styles and settings as needed.
- the class name
5. Troubleshooting / FAQs
The Spacer Element isn't showing in the list of elements
- Make sure you've installed and activated the plugin correctly. See the Getting Started section to learn more.
- Verify that the element is enabled in the plugin section (Joomla). See the Getting Started section to learn more.
- Review the prerequisites (Requirements) above to check for anything that may need to be updgraded on your site.
Is the Spacer Element free?
- YES! I had this element created to make my life a little easier and if you found it helped you, you can Buy me a drink! Thank you for your support.

Need Help?
Email me:
Join our community for quick help on our
Discord Server