Slide editing in Smart Slider 3

Layers in Smart Slider can be Default and Absolute. They have different in options and responsive behavior.

Default layers

Default layers behave like "blocks". The layers can't move on top of each other, but will push other layers lower, when their own content needs more space. You can create distance between the layers by adding margins, and you can adjust positions by changing their parent layer (container) alignments.

The editing experience is similar to what you're used to from page builders. Currently no other slider plugin offers such editing experience. Default positioned layers are marked with a blue border in the editor.

Working with Default layers

Default layers can increase the height of the slide they're in, which will increase the height of the whole slider. In other words, when you're working with Default layers, the height of your whole slider is defined by the height of the tallest slide. Want to change your Absolute layers to Default?

Text sizing of Default layers

Default positioned layers have the same text size on each device. This ensures they remain legible even on the smallest screens.

If your texts are too large on mobile, use the Text Scale option to adjust the text size device specifically.

Aligning and Spacing

Watch the tutorial video to learn how to align and set the spacing of your layers.

Absolute layers

Absolute layers are in absolute position, like the position: absolute; in HTML. They can move on top of each other, and will overlap other layers if their own content needs more space. You can set their position by drag'n'dropping them to a different place.

This is the editing you can find in every other slider plugin as well. Absolute positioned layers are marked with a purple border in the editor.

Working with Absolute layers

Absolute layers can't affect the slide or slider's height. If the slider isn't high enough for them, the layers will be cropped. Want to change your Default layers to Absolute?

Text sizing of Absolute layers

Absolute positioned layers have the same text size on each device. This means they might overlap on small screens, so make sure you move them around on mobile to ensure proper spacing.

If your texts are too large on mobile, use the Text Scale option to adjust the text size device specifically.

Aligning

Watch the tutorial video to learn how to align your layers.

Nesting

Absolute layers can be placed anywhere within the slide. This includes placing them into Default layers, like a row or column. Open the Layer list and drag'n'drop the Absolute layer to the Default layer you want.

Linking layers Pro

Absolute layers can be linked to another layer on the same level. Linking an Absolute layer to another layer means that the Absolute layer will no longer be positioned based on the slide or Default parent layer, but to the layer it's chained to.

How to link a layer?

Select the Absolute layer and go to the Style tab. Scroll down to Position and click on the Linked to button. The select the layer and position you want to link this layer to.

Difference between a linked and a non-linked layer's responsive behavior.

A layer, that's linked to another layer will always keep the given position from the other layer's selected align point. A layer, that's not linked to the other layer can move away from the set position in different resolutions.

In the video below you can see have two layers, which are seemingly at the exact same position. The layer labeled as "Linked" is linked to the image below it, while the other ("Not linked") is just positioned on top of the image.

Frequently asked questions

How to make my Absolute layer Default?

Select the Absolute layer you want to switch to Default. Go to Style tab and scroll down to the Position section, then switch the Position option from Absolute to Default.

How to make my Default layer Absolute?

Select the Default layer you want to switch to Absolute. Go to Style tab and scroll down to the Position section, then switch the Position option from Default to Absolute.

Why is the slider so tall?

Default layers can increase the height of the slide (thus the height of the whole slider) when they need more vertical space. Usually the problem is the most noticeable on mobile devices, which have limited width. Common reasons that cause such problems:

• Large or unnecessary margins or paddings: Margins and paddings are not meant to be used for positioning, but for creating distance. Using margins to place your layers to the bottom of the slide will create unnecessary spacing, which increases the whole slider. Adjust the margins to an appropriate value, and rather use the Vertical Align to position your layers.
• Uneven slide content: If you have a slide which has only a few layers, like a heading and two buttons, and another one where you're using large columns, the latter slide will increase the height of the whole slider. Try creating slides with an approximately even amount of content, or hide some layers on mobile. If you're a Pro user, you can also create device specific slides with limited content on small screens.
• Unused layers: If you have empty layers or rows, they can increase your slider's height. Check the layer list and make sure all layers you have are used. If you don't need a layer anymore, delete it completely.
• Too many layers: Having too many layers likely increases the slider size. Use less or smaller layers!
• Large font sizes: Having large fonts in your slider can also increase the height of your slider. Try adjusting the font sizes on mobile and tablet devices.

Should I work with Default or Absolute layers?

You can achieve most layouts with Default layers. You should always try to use default positioning, as it has the better responsive behavior. Try to create a structured layout, to move layers where you want to have them.

Use Absolute layers only as design elements, which cannot fit into a structured design, but the layer has to be behind or top of other layers.