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

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 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, select the element you want to edit and that will give its spacers a priority over others.

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.
• Dragging unit pixels: Since v2.2.2, the spacers jump and snap to multiples of 5px by default. Pressing ‘spacebar‘ while dragging them will disable the jump and go by 1px unit. It works in conjunction with other shortcuts mentioned above. You can also adjust that jump amount from the User Preferences within the Hamburger menu in the editor.
• Toggling the spacers: Press “Opt/Alt + S” to quickly toggle (enable/disable) the spacers globally.

Disabling the spacers

When you’re not using Quick Spacers, you can disable them using the ‘Opt/Alt + S‘ shortcut key. The toggle can also be accessed from the User Preferences settings in the Elementor’s Hamburger menu.

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 or accidental drags during your design process.

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.

Summary of tips and the ideal way of using the Quick Spacers

• Keep the spacers disabled when not needed, enable it with Opt/Alt + S, drag, and move on. This avoids any unnecessary distraction or accidental drags. Then disable it again when not needed. It will soon become muscle memory.
• Don’t dwell on perfect number spacing. You’ll end up spending more time than before. Just eyeball the gap, drag, and continue.
• Use the combo shortcuts like Shift (for all sides equal), Opt/Alt (for opposite sides equal), and Cmd/Ctrl (to reset all side spacing) for quicker drags.
• In case of widgets being close to each other, look at which widget gets a blue outline (or black for the column; besides the element already selected) when you drag the spacer. That widget’s gap will be the one affected.
• If spacers are overlapping and you’re unable to get the one which you want to edit, just select that element (like you do to edit its styling), and its spacers will get priority over the others to enable easy selection.

Note:

• Disabling the add-on won’t affect spacing set using the Quick Spacers.
• Faded spacer numbers means the value is inherit from bigger screen size.
• Quick Spacers won’t show any number when no spacing is set for the desktop mode.
• 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 400px to avoid any accidental long drags.