The Photo Compare slider is a traditional looking slider. This means it displays one slide at a time. As a result your visitors get only one message at a time which they can fully understand before moving on to the next slide. The layout of this slider is “boxed” which means it fits into the container you place it. This makes the Photo Compare slider perfect addition to your blog posts.

There are no common controls to switch slides in this slider. In other words, none of the standard controls are enabled for this slider. The two arrows you can see are custom arrows created from image layers.

Layers

Two of the most important layers on the slider are the image layers that display an arrow. They’re the elements your visitor can use to switch slides. Since it’s an image layer, you can freely replace the arrows to something that suits better to your website’s design. To create the slide switching we used the Link Actions on these layers.

The other most important layer is the Before After layer, as it’s the base of the slide. The Before After layer is a cool element to compare two photos. In this case, it compares the monochrome and colorized version of the picture.

Another notable layer is the heading layer, which displays the caption of the photo. It makes the name of the photographer bold and shows the photo description in normal weight.

Animations

The only animation on the Photo Compare slider is the Main Animation. The Main Animation is the basic slide animation, which moves all elements on the slider. It can move horizontally or vertically, or with a simple fading effect.

Layout

The base layout is pretty simple at this template. First there’s a Before After layer. Below there’s a two column row, where one column contains the caption and the other has the navigation.

In this second column there’s an interesting layout element. This element is the slide counter, which displays the “01|05” text on the first slide. To create something like that on your slider, first add a new row. Second, add another column to the previously added row. Now all you need to do is to add the layers that display your content to each row. Finally, disable the full width option of the row.

Responsive

A responsive WordPress slider like Smart Slider has many cool options to ensure your sliders look perfect on all screens. The most important option for this is the ability to adjust the font size for every device. As a result, you can achieve better looking designs while maintaining the legibility of your text.

If you checked the slider on your phone, you’ve probably noticed that the previous arrow moved around. On desktop the slide counter appears first, then the previous and next arrows. However, the order changes on phones. The previous arrow appears first, then the slide counter and finally the next arrow.

Related Post: Introducing Before After Layer

Related Post: How to Create a WordPress Gallery Slider for Your Website

The post Photo Compare appeared first on Smart Slider 3 — WordPress Plugin.

The Renovation Showcase slider is a special looking slider, what we call Showcase type. The Showcase type slider displays more slides next to each other. It always shows an odd number of slides, keeping one slide in the middle. This slide is the so called “active” slide, which the viewer can focus on.

The layout of the slider is full width, which means it fills the browser horizontally. As a result, it’s easier for more slides to display, especially on today’s large monitors. The slides next to the active slide are faded out. To achieve such effect, first make sure you set a slider background color. Then head over to the Animations tab and change the Opacity of the before and after slides.

Layers

The most interesting layer on the Renovation slide is, without question, the Before After layer. This layer lets you compare two images in the same place. It’s perfect for showing the starting and ending stages of a renovation.

Another notable layers on this template include heading and simple image layers. These image layers display the colored logos.

Animations

There are no layer animations on this template. As a result all layers are immediately present when the slide gets visible. While the Showcase type has many special animations, we chose not to use them. So you can see a simple horizontal movement when you switch slides.

Layout

The layout of the Renovation slider is plain simple. There’s a before after layer at the top, and a three column row below. To ensure the last two columns stay this close to each other, we set a Max width at both of them.

Responsive

The basic responsive behavior of the Showcase slider type is that it always fully displays the active slide, which is in the middle. If there’s room to display more slides and equal amount of new slides are revealed next to the active slide.

On mobile the layout didn’t need much adjustment, as the font sizes were good. Also, the row automatically breaks its columns into new lines on small screens. But if you’d have to make changes, you can always use the Text Scale option to reduce the font size. Also, you can change the Wrap after on the row if you don’t want it to break the columns to new lines.

Related Post: Introducing Before After Layer

Related Post: What Do You Need to Know About Slider Types?

The post Renovation Showcase appeared first on Smart Slider 3 — WordPress Plugin.

Slider Settings

The Product Compare slider looks like the element people think of when you mention the “sliders” to them. It displays a single slide at a time, which helps visitors focus on the message you want them to get. Additionally, it fills the screen horizontally, which is trendy and looks good on today’s large screens.

The slider has a total of three slides. For convenient navigation visitors can use the Text bullets at the bottom of the slider. This text bullet displays the title of the slide, which helps giving an idea to the visitor about the slide.

Apart from bullets it’s also possible to browse the slides by dragging the mouse or by swiping. This navigation is super convenient for touch screen users.

Layers

The most important layer on the Product Compare slider is the Before After layer. This layers helps you create cool looking before after sliders. Choose a before and an after image and type a caption for them. Write a short caption to describe the images for your visitors. Finally, choose the color and shape of the divider. The Before After slider is ready to amaze the visitors!

Other notable layers on the slide are the heading, text, image and button layers. The button layer on this template is the “Learn more” text, and it’s very minimalistic. There’s also an HTML layer below the other layers, which displays this cool blurred shape in the background. The easiest way to locate this layer is to use the Layer List.

Animations

There are many animations on this template. The layer animations are easiest to notice, as they appear on large elements. Additionally, there’s a layer animation on every layer. These basic layer animations make the layers move upwards to their place.

The other animation on the slider is slightly less noticeable. It’s the animation of the Shape Divider, which makes the two inclines appear from the bottom. The result is spectacular and your visitors will love it.

Layout

The base layout of the Product Compare slider is a row that has two columns. The first column has the textual layers, and the second contains the before after layer. By default when you add a row, it’s columns are 50% wide. In this case the first column is only 32%, which allows the before after layer to take up the remaining 68%.

Another cool layouting solution is the 2×2 box that shows the product’s features. The main element here is a two column row where each column contains another row with two columns. But the columns of this inner row appear vertically below each other. In other words, the “iPhone 13” and “iPhone SE” layers are in a different row. This kind of layout helps keeping the details of the product together in every responsive scenario.

Responsive

Smart Slider is a responsive slider for WordPress, and it offers tons of cool options to fine-tune how your sliders look on mobile. The option you’ll want to use the most is the ability to change the text size for different devices. As a matter of fact, it’s very rare to have a text that’s font size is perfect for desktop, tablet and mobile as well.

If you check the template on mobile, you’ll notice that the two columns appear in a separate line below each other. Although all rows break automatically this way, you can change their Wrap After option anytime if your layout needs the row to break differently.

Related Post: Introducing Before After Layer

Related Post: Do you Need a Product Slider for your Webshop? Yes, you do!

The post Product Compare appeared first on Smart Slider 3 — WordPress Plugin.

The Diet Block template is a full width block. Full width elements are kind of elements, that fill the browser horizontally, but not vertically. While filling the browser horizontally gives plenty of space to display content, it’s recommended to keep the content narrow. The reason behind this is that it’s much harder to read wide content on monitors because the eye needs to move a lot more, which is tiring and uncomfortable. Make sure you always use the Limit Slide Width option to ensure your content doesn’t get too wide.

Blocks are special kind of sliders. In fact, they’re not actual sliders, because they can’t slide. As a matter of fact, blocks can only display one slide. They’re good to create sections on your site where you can take advantage of Smart Slider’s amazing features.

The single slide of the Diet Block tempalte has a gradient slide background. A greenish color starts at the bottom left corner and changes into a peachy color in the top right corner.

Layers

The most important layer in the Diet Block slider is obviously the Before After layer. It’s a cool layer you can use to create a comparison between two images. In this slider we use it to show the before and after photos of the new diet.

Another cool layer is the image box layer which we used to create the checkbox list on the left hand side. It’s a simple layer where you can select an image or icon and write some text that displays next to it.

The other notable layers in the Diet Block template is the heading, text and image layers. Of course, there’s also a CTA button.

Animations

The Diet Block template is full of motion. All layers have their own animation. So they all introduced to the slide with a subtle movement. As a result, the slide looks fantastic when it appears.

Layout

The base of the slide is a two column row. Rows and columns are the building blocks of Smart Slider, as they help you create nice and responsive layouts. In the background of the second column there are 3 Absolute positioned image layers, making the Default positioned Before After layer look more interesting.

Another cool layout you can do with Smart Slider is the book preview at the left. It’s another two column row added into the main row’s left column. When building layouts, b{you can freely add rows into other row’s columns} , which lets you create anything you imagine.

Responsive

Smart Slider is a responsive slider, and it has lots of cool options to fine tune how your slides look in small screens. The option you’ll almost always need is the Text Scale, which allows you to change the size of the font for tablet and mobile. On this block we used it at most layers that contain text.

Another think you’ll probably notice if you check the Diet Block on your phone is that the checkbox list is no longer left aligned but centered. The Inner align on the rows and columns is device specific. This means you can freely change it on any device.

When you optimize your slider for mobile, we recommend making sure that the slides are not taller than 600px. Browsing a tall slider on phones is uncomfortable, as there’s a good chance the visitor will not be able to see the full content at once. Since this template is a block, which means it will not have more slides but one, it can be larger than that. In fact, the total height of the Diet Block template on mobile is around 1040px.

Related Post: Introducing Before After Layer

Related Post: How to Create WordPress Call to Action?

The post Diet Block appeared first on Smart Slider 3 — WordPress Plugin.