Unlike any other slider plugin, Smart Slider has two different ways to place your layers. They’re called “Default position” and “Absolute position”. If you’re wondering what these positionings are exactly and which one to use, you’re in the right place. I’ll explain both positioning modes and help you decide which one to use.
What’s Default positioning?
Default positioning let’s you build your content as if you’d use a page builder. This positioning has been made to create content in an easy, fast and responsive way. So, if you work with Default positioned layers, you can create slides fast. Additionally, you won’t waste time making responsive edits.
The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
Default positioning has several advantages, which is why we suggest using it. In fact, 99% of the layouts people want to create can be done using only Default positioned layers. So, it’s worth learning how Default positioning works, because you’ll be able to create better slides.
1. Excellent responsive behavior
Default positioned layers have super great responsive behavior. As a result, you can save time when you optimize your slide for small screens. For example, if you use a row with at least two columns, they’ll break into new lines on small screens. As a result, your content will have enough space to display.
Desktop view (left) and mobile view (right). The Default positioned layers made the slider taller to create space for themselves.
Additionally, the slide can’t crop Default positioned layers. That’s because they can increase the height of the slider if they need more space. This is handy on small screens, because it helps ensure your texts stay visible and legible.
2. Layers won’t overlap each other
Default positioning is like native HTML behavior, which page builders follow as well. If you have added any text to your site using a page builder, you have noticed how the text behaves as the screen gets smaller. It breaks into more lines, and pushes down the content below it.
So, if you have a text that fits in one line on desktop and it breaks into 3 lines on mobile, it will push down the other layers. As a result, your content will fit into the slide without any overlapping.
3. It’s fast to build content
Working with Default positioned layers helps you build faster. When you create a new slide and start adding layers, they appear at the center of the slide. If you want the layers to be on the left side instead, you can change that with one click. Basically, you only need to change the alignment on the parent of the layers. Then all layers inside will follow the change without any further action.
The disadvantage of Default positioning
Default positioning has one major disadvantage: it has a learning curve. When you work with Default positioned layers for the first time, they can be intimidating. In fact, you might find it hard to achieve the layout you’re looking for. When people work with sliders, they expect all plugins to behave the same way. Basically, they expect to move layers by drag’n’dropping them to the place where they want them.
However, Default positioned layers don’t work like that. Their position depends on the alignment options set on their parent element. This can be tough to figure out for those who are new to this kind of editing.
What’s Absolute positioning?
Absolute positioning is what you can find in every slider plugin which lets you work with layers. It’s similar to image editors, such as Photoshop. In other words, it’s a super intuitive drag’n’drop editor.
However, we only recommend using Absolute positioned layers for decorative elements. That’s because the layers are completely independent from each other. So, moving one layer doesn’t affect the placement of any other layers. Additionally, if a layer needs more height, it won’t push other layers away to create more space for itself. As a result, layers are easy to overlap
The advantages of Absolute positioning
Absolute positioning is what people use in all other slider plugins. So, they’re familiar with it, which means they don’t have to learn it all over again. Absolute positioning seems to make slide editing easy, which makes many people create their sliders with it.
1. It’s easy to learn
Absolute positioning is super easy to learn. In fact, any user can figure it out within minutes. If they want to have a layer at the top left corner, they can drag’n’drop it there. Everything is simple and intuitive, and requires no previous knowledge of any software.
2. It seems easy to use
Because Absolute positioning is easy to learn, it seems easy to create slides with it. For this reason, many people choose Absolute positioning to create their sliders. When they create the layout for the desktop view, everything seems to look good. However, they’ll struggle later when they try to make the slider look good on small screens.
The disadvantages of Absolute positioning
While it seems easy to use, Absolute positioning is not a really good choice for creating content. Below there are the reasons why:
1. Layers will overlap
Since layers have no connection to each other, they’ll overlap on smaller screens. You’ll probably need to move layers around and hide some of them. Despite all your efforts, the mobile view can still look bad. To make the texts fit into the slide, you might reduce their font size too much, or you might end up having too many layers and not enough space around them.
Tablet landscape (left) view looks okay. However, the layers overlap on tablet portrait (right) view.
2. It’s hard to make good responsive layouts
Absolute positioned layers are just floating on your slide. They don’t care about the position of the other layers and they can’t make the slider taller if they need more space. As a result, you’ll have a hard time fitting all your desktop layers into the small mobile slider area.
3. Content is likely to get lost
Since Absolute positioned layers are just “floating” on the slide, they don’t make space for themselves. As a result, the layer that fits perfectly on desktop and tablet view might not fit into mobile at all. This can force you to hide the layer on mobile to make sure the slide looks good.
Illustrating the difference between Default and Absolute positioning
What’s a better way to show you the difference between the two positioning than creating a slider? In fact, I’ll create the same slider in both Default and Absolute positioned layers. This way you can see how fast it is to work with Default positioning, and how much better the responsive result is. I’ll use the Free marketplace template, which is a pretty simple slider that contains 4 layers.
Styling the layers can take up quite some time. To be able to focus on the actual building time, I’ve saved the design of the layers as a preset. This way I could style them in a couple of clicks.
Building using Default positioning
Building the Free Marketplace template using Default positioned layers was super simple. In fact, the whole process took only 53 seconds. And that’s only the time I needed to build the layout. I didn’t have to fiddle with the styling, because I had saved everything as a preset and applied it to the layers. Also, I didn’t type the texts either, just copied them from a text file.
Building using Absolute positioning
It was a lot more cumbersome to build the same slider using Absolute positioned layers. Additionally, it took almost twice as much time. In fact, I spent 1 minute and 33 seconds to add and position the layers. So, it took a lot more time and effort to build the same slider using Absolute positioned layers.
Tablet result
The slider I created using Default positioned layers didn’t look too bad on tablet view. However, I wanted to make the slide look perfect, so I reduced the size of the texts. The process took only 11 seconds.
The slide that uses Absolute positioned layers looked a lot worse on tablet view. I had to reduce the font size of all text layers, skipping this step wasn’t an option here. Additionally, I had to move them to be around the middle of the slide. It took 34 seconds to make the necessary changes.
Mobile result
The Default positioned layers made enough space for themselves to fit into mobile. In other words, they increased the size of the slider on mobile. The simple solution was to reduce the font size. Also, this layout looks better when the picture is on top, so I also changed the column order. The mobile adjustments took only 15 seconds, and the result was perfect afterwards.
The Absolute positioned layers created a mess on mobile. They simply didn’t have enough space to display. So the only way to make them fit into the small slider area was to hide some layers. The result is not perfect and some important content got lost. The adjustments took 44 seconds and cost two layers. Also, there are still problems that I have to live with. For example, there’s not enough contrast between the heading’s color and the top left part of the background.
Total editing time
To create an accurate comparison, I built a super simple layout that has only 4 layers. It took 1 minute and 19 seconds to build it using Default positioned layers. However, it took 2 minutes 51 seconds to build the same using Absolute positioned layers. That’s more than twice as much time, and it’s a very simple layout. So, building with Default positioned layers is much faster.
Get on board! Join our 142,416 subscribers!
Get our latest news, tutorials, guides, tips & deals delivered to your inbox.
No spam. No charge. Just curated emails.
Conclusion
Default positioned layers take some time to learn. However, every minute you invest in learning Default positioning will pay off in the long run. It helps you work faster and also creates better responsive layouts. So, why not start working with Default positioned layers today?
Hi, I’m Ramona and I’m a member of Nextend‘s awesome support team. You’ve probably chat with me if you’ve submit a support ticket. When I’m not answering support emails I read a book or go cycling. I enjoy writing as well, both for our blog and for my private projects.
