The advantages of Default positioning

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.

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.

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.

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?

The post What is Default and Absolute Positioning? appeared first on Smart Slider 3 — WordPress Plugin.

The highlights of Smart Slider 3

Smart Slider 3 is a responsive slider plugin for WordPress which you can use to add sliders to your website. The user interface is easy to learn and there are many slider settings which let you fine-tune your slider. Smart Slider 3 supports adding image and video slides as well. The slider is SEO friendly, so when you add images, you can give them alt and title text. For rich media support, you can add YouTube and Vimeo videos, and in the pro version, MP4 videos as well.

Layouts in Smart Slider 3

Here’s a few things to consider before you start making a responsive WordPress slider. First, you should think about how you want the slider to behave. It should be responsive, of course, but what more? Do you need the slider to be full width or full page, or should it fill the area where it is in and nothing more?

Smart Slider 3 has 3 different responsive layouts: Boxed, Full Width and Full Page.

Boxed Layout

A Boxed slider has a simple behavior: it fills the container where you’ve placed it. For instance, if you put the slider to your post content, it will be as wide as your post area. This way your responsive WordPress slider does not break your theme’s layout.

Today, most layouts are full width, but you can still find a couple of boxed designs. These sliders are great for a boxed layout, as they fits into its container. This responsive layout is the best for adding a slider to your WordPress post.

Full width layout

A full width slider fills the total width of the browser, even if its container does not. What’s so great about these sliders is that they have plenty of room. There’s enough space to put the content and the visitor can enjoy the background, too. Most themes feature a slider on their homepage, and this slider is usually a full width one. This makes them the most popular sliders around. If you check out a few full width sliders, you’ll understand why: they look gorgeous inside any theme.

Full width sliders are great for pretty much any purpose. Whether you want a post slider, a hero slider, or a simple image slider you can’t fail with this mode. The best part is, you don’t need to buy the pro version to create full width sliders with Smart Slider 3.

Full page layout

Full page sliders fill the browser width and height on every device. On desktop screens it gives you lots of space to place your layers, which is great. The problem width full page sliders is that their mobile size is short and narrow. On such a small size, there isn’t enough space to add more than a couple of layers.

Full page sliders are great for hero sliders. You can also take advantage of their greatness if you decide to create a landing page. This layout is available in the premium version of Smart Slider 3 only.

What are Default layers and how to use them to make a responsive WordPress slider?

Default layers provide a unique editing experience for Smart Slider users. Such layers are not available in any other responsive WordPress slider plugin. When you use Default layers, you can work on your slide as you would use a page builder. You can create rows with columns and place layers or other rows into the columns. Layers have connection to each other and align themselves based on their surroundings. For instance, put down a heading layer and place a button below. As you write more text to the heading layer, it pushes the button down. This behavior prevents the text ending up on top of or behind the button.

Creating a responsive WordPress slider using Default layers can seem hard at first glance. Default layers don’t allow the free positioning what most people are used to. It’s crucial to understand how it works and get used to thinking in structures. You need to spend some time to learn, but after you know the basics, you can work faster and better in this mode.

The basic responsive behavior of Default layers

We’ve created Default layers with the purpose to help you reduce the time spent with the slide editing. Structures let you work faster and more precise. The best part of working with Default layers is that when you set them up properly, it’s unlikely to get bad results on small screens. There’s a constant font size on each device, which makes sure the texts are legible on mobile.

The layers can adjust their position based on their surroundings. Additionally, Default layers layers will always fit the slider. When they need more space, they make the slider bigger. Rows wrap each column after the other on mobile to create a more mobile friendly layout.

Creating a responsive WordPress slider with Absolute layers

If you’ve ever used any slider plugin, you know how Absolute layers work. They’re based on simple drag and drop editing, which lets you put the layers anywhere within the slide area. The upside of Absolute layers is that t it looks easy and takes almost no time to learn. The downside is that the more layers you add the harder it will be to make the slider responsive.

Absolute layers have no connection to each other. Let’s say you have a heading layer and a button below then add more text to the heading layer. The heading layer won’t push the button below to make more space for itself. As a result, it can cover the button or move below it depending on the layer order.

The basic responsive behavior of Absolute layers

Absolute layers work on a very simple responsive idea: they scales with the slider. If you make the slider bigger, the font sizes and images will grow larger. If you make the slider smaller, the text and images will shrink. This means the text can get tiny on mobile, and lose their legibility. Since the layers have no connection to each other, they’re likely to overlap.

Tools that help you create a responsive WordPress slider

Smart Slider 3 has many useful tools to make the most of the editing mode you’re using. You can use these tools to optimize your slide’s look for different devices. Let’s go through them so you can start creating your responsive WordPress slider.

1. Font size modifier

You can use the Font size modifier to adjust the font sizes for each device. For instance, if your texts shrink too much on mobile, you can make them bigger. This helps keep the texts legible on all devices.

2. Hide on devices

When you create a responsive WordPress slider for desktops, you can add lots of layers. But on small screens you probably don’t need as many layers. Using the Hide on devices feature you can disable any layer which you don’t need on any particular device.

You can use this feature to optimize your content for mobile in several ways. As an example, you can remove long text layer, or images that are only for decoration. Do you use layer animations on your slides? Lots of animations can be resource-heavy for mobile phones. You can hide the desktop layers, which have the animation, and create new layers for mobile.

3. Custom Slider size

Default layers can increase the size of the slider if your layers need more space. While you can set a custom slider size even if you have built your slide using Default layers, it’s not needed to create a proper layout. But if you’re working with Absolute layers, you might need to set custom slider sizes. The challenge here is finding the perfect size for your slider, which isn’t easy to figure out.

4. Link layers together

Using the layer linking feature, you can link an Absolute layer to another Absolute or a Default layer on the same level. Linked layers keep the same distance, so you can make sure the layer you link to another stays where you put it.

5. Nesting

You can place Absolute layers into Default rows and columns, which opens up many cool design possibilities. For instance, if you create a product slider you can up an “On sale” badge to the corder of the image by placing an Absolute layer above the Default image layer in the column where the image is.

Summing up

Creating a beautiful responsive WordPress slider can be a challenging task. Luckily, you can make your job easier in several ways. If you plan your slider before you start working on it, you can save yourself from lots of trouble.

You should also work with Default layers, to reduce the time you need to spend editing your slides. For adding content, you shouldn’t use Absolute layers, unless you definitely need to work with such layers. In that case, try nesting your layers. In any case, using Default layers will save you from lots of trouble in the long run.

The post How to Create a Good Responsive WordPress Slider? appeared first on Smart Slider 3 — WordPress Plugin.