Smart Slider 3 has a special slider type, the Carousel which is perfect to create an amazing slider. WordPress carousel can show more slides next to one another which means you can recommend for example more blog posts at once. The carousel displays the slides in a trendy card-like design, which guarantees the good responsive behavior. This gives another reason to use it for creating a Post Slider but you can use this type as a Product Slider as well.

This template is a full width slider so your slider will be 100% width of your page. This carousel has 1200px maximum pane width, whose value defines the maximum width of how far your slides can go within the slider. The slides have 360px width with 20px minimum slide distance, so you will see 3 slides next to one another.

Layers

Each slide has the same layers on it: a row with 3 text layers. At the first text layer the name is a link, and the link has a different color, so you can highlight the author, also you can link. At the second text layer the “Yoga” text is bold. Text layers can accept HTML codes, which you can reach this kind of layout. But you can also use the highlighted heading layer, where you can add a different style to the highlighted text.

Animations

When you click on the arrows or bullets on the bottom, or drag with your mouse, you can switch the entire pane. 3 slides will move together with a horizontal animation. This animation is the main animation of the slider. If you want to switch the slides one by one, then you can enable the single switch option, and then one slide will move at the slide switching.

Layout

At the carousels the slides are next to each other. At this example 3 slides are in one pane, the arrows are on the left and right sides and there is a number type bullet control on the bottom which gives a frame to the slider.

Responsive

The carousel is fully responsive, so on smaller devices you will see 2 or 1 slide, which can fit the available space. Besides, the slider is touch friendly, your mobile visitors won’t have troubles with it. To make the navigation easy and convenient, the slider has both arrows and bullets. Bullets are great to allow a quick navigation and show how many slides there are to see.

Related Post: All You Need To Know About Carousel Slider Type

Related Post: Enrich your Blog with a Post Slider

The post WordPress Post Slider Carousel appeared first on Smart Slider 3 — WordPress Plugin.

This slider template uses the full width layout. Full width sliders are the perfect sliders to use as your header slider. The header slider is the first thing a visitor sees when they enter the page. This important section is the greatest place to show your post slider. It’s impossible for your visitors to miss it and it convinces them to stay and read your blog.

Layers

On the slider, there is a Heading layer, 2 text layers, a button layer and an image layer. The image layer is a separator between the title and the description in this case. Each slide has a background image, which fills the whole slide. By default the Fill mode is used on the background images which will cover your slide. When making full width sliders, this filling mode is the best, but if you want your whole image to be on your slide without being cropped, you can use the Fit filling mode.

Animations

The slider is switching its slides with a horizontal animation. When you click on the arrow, or bullets, or drag, the next slide comes with a great looking animation.

Layout

The Free Full Width Post Slider is a modern way to show your most recent posts. In the background you can display the featured image of the post taking up the full browser width. The slider can also display the post title, date, excerpt and author, which you can see on the left side. For that you need to create a dynamic post slider, and use variables which will automatically refresh.

You can also use the slider as a static slider, and you can fully customize every part of it. There is a 1-row 1-column structure on the slider, the row has a small shadow and padding on each side which makes the slider more beautiful. The slider has a maximum 600px height, but your slide’s height is based on the layers and all the slides’ height are based on your highest slide.

Responsive

To make the text size smaller, we have used the Text scale option on the textual layers. This is a device specific setting which you can customize in every view.

Related Post: Enrich your Blog with a Post Slider

Related Post: Do you need a Free Full Width Slider for your Site?

The post Full Width Post Slider appeared first on Smart Slider 3 — WordPress Plugin.

The shape dividers are between the slide background and its layers in a Simple or Block slider. The Carousel and Showcase types work in another way: the whole slides are above the shapes. This makes it important to make the sliders high enough to avoid the slides covering the shapes. This slider also uses animated wave-like shapes. The result is simply marvelous.

The slider has a slider background image which you can set in the Slider settings → General → Slider Design. This image will be below your slides like in the example.

With a WordPress Carousel you can display more slides next to each other at the same time, which can save place on your website. Carousel can be useful in product sliders or logo sliders, but you can use it to show your latest post as well.

Layers

Every slide has an area layer, a caption layer, heading layer, button, and at the bottom of the slides there is an image box.

You can use the area layer to create a line as you can see in this template. With area layer you can create a layer which is filled with a simple or gradient color. It can be used to create lines which can be a good separator between your layers, like in this example. All you need is to set the area height to 2px and change the color.

Animations

This carousel type slider has an animated shape divider in the background which is continuously moving with a wave effect. You can change the speed of the animation at the Slider settings → Animations → at shape divider. Now the speed is the default: 100%, but if you want to a slower movement, you can simply change it.

Layout

Each slide has the same layout: there is a row which contains another row. The layers are under each other, a caption layer on the top, then comes a button, a heading and an area layer. Finally, there is an image box on the bottom of the slides.

Responsive

When you check the slider on mobile, you can see only one slide. This is because the carousel type slider can only show whole slides at the same time, and in mobile one slide is visible. To pay the visitors attention there are more slides, we have enabled the bullet control on the bottom of the slider which shows how many slides are in the slider.

Related Post: All You Need To Know About Carousel Slider Type

Related Post: Add Beautiful Section for your Website with Shape Dividers

Related Post: Enrich your Blog with a Post Slider

The post Carousel Divider appeared first on Smart Slider 3 — WordPress Plugin.

A full-width slider is the most popular way to display a slider in a website. These sliders allow viewing images in a large area, making them perfect as a header slider. This full-width slider example has thumbnail navigation, without actual thumbnail images. The simple text gives users an idea what the other slides are about, while indicating the currently viewed slide in a stylish manner.

This slider is the perfect choice for any blog website. You can easily create a dynamic WordPress post slider using this slider. A dynamic post slider helps you highlight your latest blog posts in a visually stunning way. You can display the name and avatar of the post author, the title, excerpt, featured image and, of course, the post category. These are the most important aspects which help get more readers on your actual blog post.

Layers

Each slide has the same layers: an image layer, 2 headings, a text layer and finally, a button layer. If you hover over the layers, you can notice the big heading has another color on hover. You can customize and change this color in the Style tab of the layer window. Here you need to change the typography to hover, and then you can set a different style and color for the hovered text.

Animations

When you switch slides, you can see the next slide comes in with a horizontal animation. This animation is the main animation of the slider which you can change to vertical or fade in the Animations tab of the slider settings.

Layout

The slider stays from 4 slides, and each slide has the same layout: the layers are under each other. On the bottom of the slider you can see the thumbnails control. The thumbnail shows the title and the description of the slides. You can change the title and the description at the Content tab of the Slide settings.

Also, you have the option to customize the thumbnails. For that go to the Controls tab of the Slider settings. Do you want to change the blue hover color of the thumbnails? For that click on the green style button at the thumbnail, and change the tab to active on the top right corner.

Responsive

The full-width thumbnail slider is fully responsive. When you check it on your phone, you can notice the thumbnails are hidden and the texts are smaller. You can set the font sizes with the text scale option device specifically.

Related Post: Enrich your Blog with a Post Slider

Related Post: Create A Responsive Thumbnail Slider

Related Post: 10 Beautiful Full Width Slider Examples

The post Full Width Thumbnail Slider appeared first on Smart Slider 3 — WordPress Plugin.

At carousels you can show more slides next to each other at the same time. It can be useful if you would like to feature your latest posts. You can use the WordPress Posts generator, and your Post carousel will dynamically refresh.

This slider displays 2 slides at the same time. This is because of the size settings. The width of the slides are 600px, the size of the slider and the pane are 1400px, so 2 slides can be visible in one pane. If you want to display more slides, then you can decrease the size of the slides.

Layers

On this sample each slide has 1 row – 2 columns structure, at the left side are heading and text layers and a Read more button. With this Call to Action button you can make an interaction with your visitor, and navigate to the Post. At the right side is an image area layer, where the Fill mode is used. Fill mode will make the image as big as it needs to be to cover the area.

Animations

When you switch to the next or previous slide, the next or previous slide will come in with a horizontal animation. This animation is the main animation of the slider. The carousel option is enabled at the slider. This option will create a complete round from your slides if you have enough slides. So you can go to the first slide from the last one.

Layout

Each slide has the same layout, there’s a row with 2 columns with 40-60% width. The left column contains the textual elements, and there’s an image in the right one. You can switch slides in 3 ways: with dragging your mouse, using the arrows or using the bullets on the bottom. These controls give a frame to the slider, and helps at navigating, also shows how many slides are in the slider.

Responsive

When you check the slider on mobile devices, you can see there are elements which aren’t visible. The arrow control is hidden on mobile, so there are more space on the left and right sides. The text layer is hidden, too, so the slider isn’t too tall on mobile. By default the rows wrap after one column on mobile, and the left side goes to the top, and the right side to the bottom. But you can change this order at the settings of the row by dragging the green boxes which represent the columns.

Related Post: All You Need To Know About Carousel Slider Type

Related Post: Enrich your Blog with a Post Slider

Related Post: 10 Beautiful Full Width Slider Examples

The post Post Carousel appeared first on Smart Slider 3 — WordPress Plugin.

The Showcase slider is another special slider which is easy to create with Smart Slider 3 Pro. Like a WordPress Carousel, it can display many slides at once and that’s great to show your posts. The biggest advantage of the Showcase slider is that it keeps one slide in the middle. This helps the visitor focus on one post at a time while they also learn that there is more content to see. In a carousel slider the number of sliders you can see depends on the space there is in the pane, but the showcase slider type can even show a part of the next and the previous slider.

If you want to use this demo slider as a dynamic slider, you can follow our documentation. First you should import this template, and click on the slide what you want to use, and copy it. Then you can create a dynamic slide, and set the dynamic generator. Finally you can paste the copied slide, and you can replace the layers’ content with variables, and they will change dynamically. You can replace the date, the author, the title and a short description of the post, also you can put the link of the article on the heading layer.

Layers

Each slide contains 2 text layers and a heading in the middle. These layers are under each other in a one row one column structure. The content layer has 650px maximum width which limits the width of the layers, too.

Animations

The showcase slider switches their slides horizontally. The previous and next slides have 50% opacity, so you can focus on the slide in the middle. If you click on the next or previous slides, you can switch slides, and if you have enough slides in your slider, you can make a continuous circle, so after the last slide the first will come.

Layout

Clicking on a not active slide, the slider switches to that slide so the visitor can check its content. This is a nice and convenient way to encourage the visitor to check more slides and posts. Besides, there is an option at the showcase type sliders that you can reduce the space between the slides if you set the slide distance to 0. And you can customize the active slide, the previous and next slides as well. There is an option to change their opacity, or you can rotate or scale them.

Responsive

All of the layers are visible on smaller devices, but they are a bit smaller. You can change the font sizes with the text scale option which is a device specific setting, so you can set it on each device differently.

Related Post: Enrich your Blog with a Post Slider

Related Post: 10 Beautiful Full Width Slider Examples

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

The Fullwidth Post slider has 3 slides, and each slide has the same structure. The slider is a full width slider, so fills the available horizontal width of your screen. If the container isn’t full width, you may need to enable the force full width option.

This slider can be used as a post slider, and you can make it dynamic. Just import the slider, open the slide, and copy it. Then create a dynamic slide, set the generator, and paste the copied layout. Then you can add variables to the layers, and they will dynamically change.

Layers

The slides don’t have too many layers. There is a button layer, and after that 2 heading layers are. Below these layers you can see an image which is in absolute position, and this image is the same as the slide background image, but doesn’t fill the width and height, and doesn’t have an overlay on it. The CTA on the top has an eye-catching color, which can display the category of the post, also you can put a link on it.

Animations

If you check the slider you can notice it autoplays in every 8 seconds. The slider autoplay indicator on the bottom displays the time and when the next slide will come. This gives a nice movement to the slider, also the visitors will know there are other slides in the slider. Also, you can stop the autoplay if you click on the slide, so you will have enough time to read the content.

Layout

Each slide has the same layout: there is a background image, over that is an image layer, and over the image are 3 layers. The autoplay indicator is on the bottom, and the arrows are in the left and right sides. These arrows have an orange hover color. You can change them in the Controls tab of the Slider settings if you click on the green Style button. Then the Style manager will open, and you can customize your arrow.

Responsive

The slider is fully responsive. The texts are smaller on tablet and mobile thanks to the text scale option. You can use it to make the text lower or bigger on different screens.

Related Post: Enrich your Blog with a Post Slider

Related Post: 10 Beautiful Full Width Slider Examples

The post Full Width WordPress Post Slider appeared first on Smart Slider 3 — WordPress Plugin.

The Magazine slider looks super special, but it’s based on the most common slider type. That’s the simple type, which can display one slide at a time. This is why you can see a full set of new image boxed after slide switching.

Speaking of slide switching, it’s possible it three ways. Firs, using the arrows which are outside of the slider. It’s a common way to use simple type sliders as headers, which needs the sliders to be full width. But this slider is not full with, it’s boxed. A boxed slider does not fill the screen, but the container it was put in. That is why the outer positioned arrows are visible.

The second way of navigation is the bullets at the bottom of the slider. Apart from being cool navigation tools, bullets have another important purpose. They show all available slides. The last way you can browse the slider is swiping on touch screen devices. A swiping action is natural on touch screen devices, so this gives a great user experience. Also, if you have a mouse, you can drag towards the direction you want to switch to.

Layers

You can find headings, rows and columns on this slider. The heading layers provide space to display the category, title and author of the post. For this reason the Magazine slider is suitable for creating a post slider. To be able to display the 4 post details inside a single slide, make sure you set the Group result option.

One of the most spectacular parts of the Magazine slider is the gradient images. How to create such effect? Go to the column, and set a background image. Then choose the gradient direction. Finally, set a semi-transparent background color for the start and end color.

Animations

There are no layer animations on the Magazine slider. In fact, the only animation is the Main animation, which is responsible for the horizontal sliding effect when the slides change.

Layout

The layout of the Magazine slider is built with rows and columns. The main container is a two column row, which is stretched to cover the available space on the slide. The left column only has the textual layers. But inside the right column, there are two other rows. The top row has two columns, but the bottom one has only one.

The Gutter option of the rows’ creates distance between the columns. But the bottom row inside the right column has a top margin for the same purpose.

Responsive

The Wrap after option of the row decides how many columns can fit next to each other. On mobile this value is set to 1 by default, which means every column will break into a new line. The Magazine slider is an excellent example for this behavior. The rows and columns which are next to each other appear one after the other.

If your text sizes are too big or too small on mobile, you can use the Font resizer to adjust it. This tool helps you achieve the perfect text size for mobile. Additionally, it’s always at hand as it’s available on the Responsive bar.

Related Documentation: How to use a demo slider in your generator

Related Post: Enrich your Blog with a Post Slider

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

This boxed slider fits perfectly into your page or post content. It’s easy to set up and customize the thumbnails to ensure that the slider fits your site’s layout. Using a thumbnail slider is a great way to encourage the visitor to see more slides. The slider looks simple but attractive with its carefully chosen colors. It can display the post title, and above it the post’s category and date.

Layers

Each slide has the same structure, there is a row, and inside the row there is another row with 2 cols and the heading layer. The heading layer has a black background color which is similar to the captions. The small heading layers have a blue background, and if you use a dynamic post slider, you can replace their text with a variable.

Animations

The slider moves vertically, you can drag to the top or bottom, or you can use the thumbnails for navigation. This vertical animation is the main animation of the slider which you can change in the Animations tab of the slider settings.

Layout

The slider has a simple layout, there is a row, and inside this row is another with 2 columns and with the heading layer. On the right side of the slider you can see the thumbnails which you can fully customize. In this template the thumbnails are 240x100px big. The caption texts have black background and white font-color on the thumbnails, and they are legible because of that contrast.

Responsive

We don’t need thumbnails for mobile, because they don’t look fine in small view so the thumbnails are hidden in this view. The text sizes are smaller on mobile. You can set the font size device specifically with the text scale option.

Related Post: Enrich your Blog with a Post Slider

Related Post: Create A Responsive Thumbnail Slider

The post WordPress Post Slider with Thumbnails appeared first on Smart Slider 3 — WordPress Plugin.

The WordPress Carousel Post Slider is a cool slider you can highlight your post content with. It uses the Carousel slider type, which can display more slides at a time. For this reason, carousel sliders are perfect for displaying dynamic slides. For example, you can use it to create a post or a product slider.

Layers

The layers on the slider are quite simple. There are two images: one at the top, that displays the featured image. You can find another image below the post title, and it’s used as a separator. There are two headings and a text layer. The first heading displays displays the category of the post. The second heading displays the title of the post.

Animations

The only animation you can find on this slider is the slide changing effect, which is a simple horizontal animation. By default the Carousel slider switches all visible slides. But as you can see on this slider, it switches slides one by one. This behavior happens because we turned on the Single switch option at the Slider settings → Animations tab.

Layout

In Smart Slider you can position your layers from their parent elements. For example, if you want to place your layers to the bottom of the slide, you need to set that at the Content layer. Simply change the Vertical align option to bottom, and the layers will be at the bottom.

By default the Vertical alignment is set to center. When we created this slider, we wanted to make sure that the large images start at the top of each slide. So, we changed the Vertical align to Top at every slide.

Responsive

In most slider plugins you can only place your layers absolutely. This means the layers won’t adapt to each other, for example, when a text breaks into more lines on small screens. As a result, the layers will overlap, and you’ll need to spend lots of time to make your slider responsive.

Smart Slider 3 uses a different positioning method. It’s a relative positioning, what we call Default position. Default layers can’t overlap, and instead they’ll make the slider taller if they need more space. As a result, your content will always be visible. Furthermore, Default layers keep their original size on small screens by default, which ensures the good look. Of course, you can make device specific adjustments, but it’ll take a lot less time.

Related Post: Enrich your Blog with a Post Slider

Related Video: Slide Editing – Alignment & Spacing

The post WordPress Carousel Post Slider appeared first on Smart Slider 3 — WordPress Plugin.