Slide editing in Smart Slider 3

In this article

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.

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. This behavior is caused by the Adaptive option on the Content layer.

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.

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 reduce the text size with the slider's ratio. As a result, the text might end up being too small and illegible on mobile. Use the Text Scale option to make the texts bigger on mobile or tablet devices.

Comparing Default and Absolute layers

Default layers keep the font sizes in each devices, which makes the result close to the rest of your site's. The images scale down normally, and can scale up until their set maximum width is reached. Absolute layers scale up or down (both texts and images) with the slider.

The video below illustrates the default responsive behavior.

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

1
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.

2
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.

3
Why is the slider so tall on mobile?

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. 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. Try hiding some 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.
4
Should I work with Default or Absolute layers?

You can achieve most layouts with Default layers, so you should use that. Use Absolute layers only as design elements.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.