Skip to main content

SPACER

Element For YOOtheme Pro

Documentation

Spacer Changelog: v1.1.0 - Nov 5, 2024

Spacer Element Changelog

v1.1.0

November 5, 2024
  • Added
    Now Works with WordPress (Child Theme)
  • Added
    Changed dropdowns to a slider for custom spacing options (THIS COULD BE A BREAKING CHANGE - UPDATE WITH CAUTION)
  • Updated
    Code Cleanup
  • Removed
    Deprecated json code in element code

v1.0.0

February 25, 2023
  • Added
    Spacer Element - First Release for YOOtheme Pro

1. Getting Started

Introduction

The Modern Design Spacer element lets you quickly and easily add a margin above or below other elements in the YOOtheme Pro website builder.

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

Once installed and activated you can now add the Spacer Element via the YOOtheme Pro page builder.
  • 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.

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.

Josh Gilson

Need Help?

Something not working or quick question?
Email me: This email address is being protected from spambots. You need JavaScript enabled to view it.

Join our community for quick help on our
Discord Server
Cron Job Starts