Quick Spacers

Quick Spacers provides 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.

Quick intro to the spacers:

There are two types of Spacers – the grey color spacer are for the padding and the blue color spacers are for the margins.

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
  • Know 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/edge.
  2. Make sure the grey color spacer is visible on hover if you want to change padding or the blue color spacer if you want to change the margins.
  3. While hovering on the desired spacer, the mouse pointer will change to a scroller pointer.
  4. Click on the pointer and drag the spacer to change the padding/margin of the selected section/column/widget.
EDP - Quick Spacer

Keyboard shortcuts:

There are designated keyboard shortcuts that will help you speed up the workflow.

  • Changing all sides at once: While dragging the spacer, hold the ‘Shift‘ key.
  • Changing opposite sides together: Press the ‘Alt/Option‘ key while dragging the spacer.
  • Clearing all spacing at once: Hold the ‘Ctrl/Cmd‘ key while dragging the spacer.

Hold the respective keyboard keys until you lift the mouse drag, otherwise the changes will not be applied.

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 addon won’t affect spacing set using the Quick Spacers.
  • It’s not enabled for Columns. That is because of no default gap between the sections and the columns causing UX issues and confusion on which element’s spacer the user is dragging.
  • 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 negative margins. This is intentionally not implemented so as to provide a clean and consistent UX, which would otherwise cause havoc and won’t allow element selection if accidentally overlapped.

Was this page helpful?