Quick Spacers

Quick Spacers provide an interface for you to visually drag and set and padding and margins for an element from its edges.

The goal is to help you speed up your workflow in Elementor and design pages faster with more precision.

A quick intro to the spacers:

There are two types of Spacers – one for the margin and the other for the padding, and each has a color code to identify.

  • Black color stripes – Padding
  • Blue color stripes – Margin
EDP - Quick Spacer

Getting the most value out of Quick Spacers:

Here are some different ways you can use it to speed up your workflow:

  • Know whether any padding or margin has been applied or not
  • Get a quick glimpse of the amount of padding/margin applied to an element
  • Easily change the margin/padding of one or multiple sides at once from the editing interface
  • Identify the spacing inherited from desktop/tablet in the responsive mode.

Using the Quick Spacers:

Once you install the addon, the Quick Spacers are automatically activated and loaded in the Elementor editor.

  1. Hover near the edge of your desired section/column/widget. The black ones are for changing the padding, and the blue ones are for the margins.
  2. To change the spacing (padding/margin), simply click and drag that respective spacer with the mouse.
  3. As you do that, it will show a number in the middle of the spacer that indicates the value applied to that spacer (in pixels). That number will change in real-time as you drag the spacer.
  4. Once the spacing is as you intend to, release the drag and the value will be automatically applied.

Pro Tips:

  • Quick Spacers are built with a philosophy of speed and optical balance. Stressing over perfect and rounded spacing numbers will only make it slow for you. Instead, drag and aim for optical balance with the spacing.
  • You’ll be able to see a watermark besides the value that indicates which type of element are you hovering or changing. S is for Section, C for Column, and W for Widget.
  • In cases where one spacer overlaps the other, you can use accessory keyboard shortcuts to select the desired spacer.

Keyboard shortcuts:

Quick spacers have designated keyboard shortcuts to help you speed up the workflow even further. Once you get used to these, it’ll soon become muscle memory and then you’ll be able to experience the real benefits of the quick spacers.

Main combo shortcuts

These are key combos to apply spacing to multiple sides at once:

  • Changing all sides at once: Hold the ‘Shift‘ key while dragging the spacers. This will apply spacing to all the sides as you drag.
  • Changing opposite sides together: Hold the ‘Option/Alt‘ key while dragging a spacer. If you are dragging the top spacer, then it will also apply to the bottom, and while dragging left, will apply to the right side too; and vice-versa.
  • Unset all side spacing: Hold the ‘Cmd/Ctrl‘ key while dragging the spacer. This will unset the spacing for all sides.

Hold these respective keyboard keys until you lift the mouse drag, otherwise the changes will revert back.

Disabling the spacers

When you’re not using Quick Spacers, you can disable them using the ‘Cmd/Ctrl + Q‘ shortcut key. The toggle can also be accessed from the User Preferences settings in Elementor.

This can primarily be used when you’re handing over sites and you don’t want them to access the Quick Spacers. Other use cases may include toggling them to avoid potential distractions during a part of your design process.

Other accessory shortcuts

Sometimes, due to the overlap of a spacer over another because of element positioning, it might get difficult to drag the desired spacer.

For that purpose, we have additional simple keystroke shortcuts to manipulate the priority order of spacer visibility:

  • Section-only spacing: Hold the ‘S‘ key to only show the section spacers. For use-cases where the column/widget spacer overlaps the section.
  • Column-only spacing: Hold the ‘C‘ key to only show the column spacers. For use-cases where the section/widget spacer overlaps the column.
  • Widget-only spacing: Hold the ‘W‘ key to only show the widget spacers. For use-cases where the column/section spacer overlaps the widget.
  • Spacing for only the selected widget: Hold the ‘Q‘ key to show the current selected widget’s spacers.

Responsive Mode Spacing Adjustment

The quick spacers automatically adapt to the responsive modes as soon you change it in the editor.

If no spacing value is set for this responsive mode, it will span to the height of the spacing inherited from its parent, otherwise it will show the number of px you have set for the active responsive mode.

All keyboard shortcuts work for responsive modes too.


Note:

  • Disabling the add-on won’t affect spacing set using the Quick Spacers.
  • Quick Spacers won’t show any number when no spacing is set for the active responsive mode (including desktop).
  • The spacer value binding is 2-way, meaning that even if you manually change the spacing from the Advanced tab, it will reflect in the Quick Spacers and vice-versa.
  • Quick Spacers only supports px unit. If you have the spacing in any other unit, it will automatically be converted to px as you drag.
  • They have a max dragging limit of 300px to avoid any accidental long drags.
  • Quick Spacers doesn’t support dragging for negative margins. This is intentionally blocked so as to provide a clean and consistent UX, which would otherwise cause problems with the design workflow, i.e. it wouldn’t allow element selection if spacers overlap them.

Was this page helpful?