Table of Contents
What Is Spacing and How to Apply It?
Spacing controls the visual separation between and within content layers [?]
Layers are containers for visual, audio or layout items and are added to slides. For example, text, button, image, audio, video, group and row are all types of layers.
Layers are added to slides via the module editor.. In the Slider Revolution [?]
Slider Revolution is a website content creation tool with a focus on captivating animation and stunning visual effects.
It began its life as a plugin for creating slideshows, but has evolved into a fully fledged piece of design software. plugin, you can adjust spacing using margin and padding. These settings apply to content layers such as text, images, and buttons.
Margin adds space outside a layer, pushing it away from surrounding elements. Padding creates space inside a layer, increasing the gap between its content and border.
You can set both from the Spacing panel under the Style sub-section in the Layer Options tab.
Now, let’s go step by step to apply margin and padding to content layers.
Select a Content Layer
Select any content layer from the canvas [?]
The canvas is the point and click design space in the module editor. It forms the largest area of the module editor.
In this area layers can be selected, moved and resized. Animations can also be previewed. area:
Go to the Layer Option tab from the right sidebar:
Go to the Style sub-section:
Scroll down to the Spacing panel:
Add Margin to the Layer
The margin option appears as an “M” icon with a small line indicating its position (top, right, bottom, or left). There are four types of margins:
- Top Margin (M with a line on top): Adds space above the layer.
- Right Margin (M with a line on the right): Adds space to the right of the layer.
- Bottom Margin (M with a line on the bottom): Adds space below the layer.
- Left Margin (M with a line on the left): Adds space to the left of the layer.
To illustrate the margin, I will choose a text layer that is positioned on top of a shape layer.
Apply a 25px margin to the top of the layer:
Next, set a 50px margin on the right:
Then, add a 25px margin at the bottom:
Finally, apply a 50px margin to the left:
Click on the padlock icon to apply the same margin to all sides of an element, effectively creating equal top, right, bottom, and left margins, thus maintaining a consistent ratio around the element:
Add Padding to the Layer
The padding option appears as a “P” icon with a small line indicating its position (top, right, bottom, or left). There are four types of paddings:
- Top Padding (P with a line on top): Adds space inside the layer at the top, pushing its content downward.
- Right Padding (P with a line on the right): Adds space inside the layer on the right, pushing its content leftward.
- Bottom Padding (P with a line on the bottom): Adds space inside the layer at the bottom, pushing its content upward.
- Left Padding (P with a line on the left): Adds space inside the layer on the left, pushing its content rightward.
To demonstrate padding, I will select a button layer with padding set to 0px on all sides.
Set a 10px padding at the top of the layer:
Next, set a 15px padding on the right:
Then, add a 10px padding at the bottom:
Complete it with 15px padding on the left:
Click the padlock icon to apply the same padding to all layer sides. This ensures equal top, right, bottom, and left padding, maintaining uniform spacing inside the layer:
Struggling With Spacing? We’ve Got Your Back!
If you have any further questions or need additional assistance, you can contact us via support ticket or email ([email protected]); we’re here to help.
