When you think of full width sliders, usually you picture a large section on the page which has huge, moving images. This gradient slider example takes a different approach. While it does have images on each slide, these are small pictures. Each slide in this slider has a linear gradient as background. We built it in a way that each slide’s starting color is the finishing color of the previous slide. This creates a continuous gradient effect throughout the slider. The effect gives the gradient slider example a modern look.

Layers

You can find a heading layer, a text layer, 2 button layers and an image layer on each slide. The button layers are useful which can be used as a great call to actions, and you can navigate your visitors to other pages. The images on the right are different on each slide, and you can change them to your own image.

Animations

When you switch slides with the arrows or dragging your mouse, you can notice a horizontal animation. This animation is the main animation of the slider. You can change that also you can set the animation duration to bigger or lower at the Slider settings → Animations tab.

Layout

The slider uses a simple layout: there is a row with 2 columns. The left column contains the textual layers, and the image is on the right column. On mobile this row wraps after 1 column, so the image will be on the top, and the textual elements are below that.

Responsive

The slider is mobile friendly, which means several important things for small screen users. The most important part is that this slider is completely touch friendly. Viewers can easily switch slides by swiping. The button is big enough to be a great target for fingers. This behavior happens because of Smart Slider’s unique slide building way, the Default position. This positioning mode allows you to work on your slides fast and create content with amazing responsive behavior. And you won’t even have to spend hours to achieve such a great look on small screens.

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

The post Gradient Slider 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 Masterclass template uses the simple slider type. This slider displays one slide at a time and it’s the most common slider type you can see on the web. Displaying a single slide at a time helps the visitor focus on a single message only. Additionally, the template is full width, which means it fills the browser horizontally.

The Masterclass template uses arrows for navigation, but they only appear on desktop. For smaller screen navigation bullets are available instead. Bullets are useful for navigation as they allow the visitor to pick and choose the slide they want to see. Additionally, they also help indicate how many slides there are to see. However, arrows can only be used to navigate one slide at a time forward or backward.

Layers

You can find the most basic layers on this template. There are headings to display the main headlines: the occupation, name and signature line of each person. There’s a text layer that you can use for a longer description. Additionally, there’s a CTA button on each slide to call the visitors to action. Also, we used an image layer to display each person’s picture.

Animations

The only animation you can find on the Masterclass template is the Main Animation. The Main Animation can move both the backgrounds and layers when the slides change. We used a horizontal effect which looks perfect for a slider like this.

Layout

The Masterclass template uses lots of interesting layout solutions. Specifically, it uses lots of negative margins to break some layers out of the grid. For instance, the main picture and the two boxes have negative margins. The result is quite spectacular and interesting to view.

Responsive

Smart Slider is a responsive slider, which offers tons of responsive settings to fine tune your sliders for small screens. For example, you can reduce the size of the texts using the Font Resizer. Or you can hide layers you don’t want to show on small screens.

There are some responsive settings which the slider does for you automatically. For instance, if you use a row, it automatically wraps its columns into new lines on mobile. This way the content has more space to display.

Related Post: Are You Looking for a Free Slider Revolution Alternative?

Related Post: 10 Beautiful Full Width Slider Examples

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

Simple but elegant design elements are the future of web design. This applies to sliders and galleries, too. This simple Image Slider is a great way to display an image slider on any website. It’s a boxed slider, which makes it perfect to publish inside posts or any non-full width sections. The slider’s structure is quite simple, as it has three slides only. The visitor can go through every slide using the arrows, bullets, swiping or dragging.

Layers

Each slide has a short caption that describes the image of the slide. The font color of the caption is white, and there’s an opaque dark background behind it. This ensures that the text remains legible regardless of the image behind it. The font family is Raleway, which is easy to read, especially in such a big size.

Animations

When you switch a slide with a mouse drag or with the arrows, the next slide fades in. This fading effect is the main animation which you can customize at the Animations tab of the Slider settings. It can be a horizontal, a vertical animation, or you also can disable it if you don’t need that animation.

Layout

At the bottom of the slider there’s a dark shadow. It’s created by the Shadow control feature. There are seven predefined shadows, and in the Pro version it’s possible to upload a custom image. Just like every control, shadows can be hidden on desktop, tablet or mobile devices. Shadows are great to make the slider pop off the page giving the impression that visitors can physically interact with the slider. Shadows also help to state hierarchy between the slider and the rest of the page. They make the slider appear above the rest of the page content.

Responsive

Thanks to default positioning, the caption remains legible on mobile. The caption is positioned to the the bottom-left corner of the slide on big screens. But on small mobile screens, the caption is moved to the center of the slide. This small change improves the look of the slider on small screens.

Related Post: How to Create Beautiful Responsive Image Slider?

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

Every WordPress website needs a good looking slider. Sliders come in sizes, the simple slider type being the most popular of them. The simple sliders show one slide at a time, which the visitor won’t find distracting. The Feature Slider is a gorgeous visual boost for any website. It’s especially great to enrich your posts with it.

Adding a slider to a blog post is a great way to give a powerful visual impact. This slider uses the boxed layout so it can fit on any WordPress post or page. Since Smart Slider allows you to add texts to the slides, you can use these simple sliders to deepen your message. Using a slider, you can highlight the most important points of your content. For instance, Feature slider is a great way to in an astonishing way.

Layers

Each slide has the same layers: there is an image layer on the top and then a heading and a text layer comes. These layers are in a row which has a white background color. You can customize each layer in the slider, you can change the text and you can change the style of the layers in the layer window.

Animations

Clicking on the arrows or bullets, the next slide will come in with a fading effect. This fade animation is the main animation of the slider which you can change at the Animations tab of the Slider settings.

When you hover over the slider, the arrows pop up on the two sides. This allows visiting the next or previous slides in the slider.

Layout

The slider has 3 slides, and each slide uses the same layout. There is a 1 row – 1 column structure where the layers are. The row has a maximum width, and the content layer is aligned to the left which you can achieve this layout.

Responsive

What’s makes Feature slider even more outstanding is that it’s mobile friendly. On touch screen devices, visitors can switch slides by dragging. Of course, there are other navigation options available. For instance, there are bullets at the bottom of the slider, which you can use to switch slides.

Another mobile friendly feature of this slider is the way it looks on mobile. The texts remain legible, which is excellent, as it means your readers won’t have problems interpreting your content. Thanks to default positioning, Smart Slider’s unique way of slide editing, achieving this awesome result isn’t hard at all.

Related Post: Create a Unique Layer Slider with Smart Slider 3

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

This slider is a simple image slider where the image changes automatically. There are large thumbnail images you can use for navigation. This allows you to preview all images in the slider and pick those the visitor is most interested in. The currently viewed slide’s thumbnail is clear and looks like the slide background picture but the other slide thumbnails are darkened which gives a modern look to the slider. Besides the thumbnails, visitors can navigate by swiping from slide to slide.

The slider has a slider autoplay setting. The visitor can start and stop it with the solid autoplay icon at the top right corner. Allowing the user to start the autoplay gives them control over it which is favorable by them. So how can you set up an autoplay like this? Go to Slider settings → Autoplay and configure the autoplay the way you want to. Set the autoplay duration and any other setting to your liking. Configure its look to match your slider, position it where you prefer to have it and you’re done. The visitor can now start and stop the autoplay when they choose to do so. They’ll love having so much control over your slider while viewing your beautiful pictures!

Layers

Creating an image gallery slider does not always mean you want to use words. It’s perfectly possible to create a beautiful image slider without a single line of text. This Autoplaying thumbnail slider is a great example for this. It’s a very minimal slider, with zero layer, but it looks elegant and professional.

Animations

When you switch a slide, you can notice the background animation. You can change this animation at the Slider settings → Animations tab. Now 2 types are selected, but you can change it if you want.

Layout

The slider is minimal, below the background images you can see the thumbnails, and on the top right you can notice the autoplay button which you can start or stop the autoplaying.

Responsive

The thumbnail bar can be scrolled through by swiping or dragging which is very convenient for both big and small screen users.

Related Post: How to Create Beautiful Responsive Image Slider?

Related Post: Create A Responsive Thumbnail Slider

Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider

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

Sliders are great tools to display your images. A gorgeous slideshow can help encourage visitors to spend more time on the website. Smart Slider 3 is not a simple image slider plugin as it lets you add other content as well. For instance, you can add text and buttons to your slides, as you can see on this slider.

This slider is full width so its width fills the width of your browser. You can navigate to the next and previous slides in 3 ways: with the arrows, bullets and by dragging. You can customize the arrows and the bullets at the Controls tab of the Slider settings.

Layers

The slides of the Free Full Width slider contain 3 layers: two headings and a button. The layers on this slider have simple settings which make the slider look minimalistic. Minimalism is one of the key elements of modern web design trends.

The first heading layer is probably the most unique looking layer of this slider. It displays uppercase letters with an underline below. This underline is actually a bottom border, which is 3px wide, making the line rather thick. The actual content of the layer is “Short story”. But, as you can see, it is displayed with uppercase letters. It’s one of Smart Slider 3’s great features that changes the look of the text.

The second heading layer’s most interesting part is the font family. Websites usually use sans serif fonts, so it’s rare to see a serif font in a headline. This is a Google Font, it is called “Playfair Display” and it’s available as one of Smart Slider 3’s predefined fonts.

Modern websites commonly use buttons, which have rounded corners. Designers refer to such buttons as “pill buttons”, as they look like a pill. The best part of these buttons, apart from looking trendy, is that Smart Slider 3 lets you create them with ease.

Animations

If you click one of the controls, you can switch slides. Then another slide will come in with a horizontal main animation. You can speed up or slow down this animation at the Animations tab of the Slider settings, also you can change it to vertical or fade if you want.

Layout

The layout of the slider is simple: there are 3 layers under each other. The bullets control displays on the bottom, and the arrows are positioned to the sides.

Responsive

The slider is fully responsive. Each layer is visible on tablet and mobile, but the second heading is smaller. This is because of the Text scale option which allows you to customize the font size in different devices.

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

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

Security is a Block type slider. What makes blocks special is that they display a single slide, with no option to switch to any other slide. As a result, they load fast. Additionally, blocks let you take advantage of Smart Slider 3’s power without having to create an actual slider.

Security block uses the popular full width layout. However, it’s the gray background color that actually fills the full width of the browser. The blue content area is in the middle of the slider, taking up a maximum 1200px wide area. This happens because of the Limit Slide Width option, that fixes the width of the slide canvas, and prevents the slider from being too tall.

There’s a border radius on the blue row, and on each white column at the bottom. As a result, they both have rounded corners.

Animations

As a block can only display one slide, there are no slide switching animations. There are no layer animations in the Free version of Smart Slider, but this block doesn’t really need them. Security block is eye-catching in its own unique design and modern look.

If you hover on any of the four white columns you can see an animation-like effect. The box shadow on the columns is increased on hover, which makes them look as if they were animated.

Layout

The layout of the Security block is rather simple. There are two rows: one with blue background, and anther one below. The bottom row doesn’t have background color, but its columns do. The reason the second row is on top of the first is because it has 40px negative top margin. The distance on the sides happens because of the left and right paddings of the row.

Responsive

Smart Slider 3 is a responsive slider, which does most of the job for you when you create a slider. Additionally, there are many responsive tools you can take advantage of to fine-tune the result on mobile and tablet view.

If you check the template on mobile, you’ll notice two mobile specific changes. First, the layout: the content inside the blue row is no longer left, but center aligned. Second, the font sizes are much smaller. As a result, the block looks a lot better on small screens.

---

Related Post: 10 Beautiful Full Width Slider Examples

---

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

]]> https://smartslider3.com/free-traveler-block/ Thu, 03 Sep 2020 08:40:50 +0000 https://smartslider3.com/?p=31753 Settings When you create a new project in Smart Slider 3 free, you can choose from 2 project types: slider and block. Moreover, you can choose from 2 type of layouts: full width and boxed. The free Traveler block is a block type slider. Actually, this isn’t a slider because it only has one slide […]

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

]]> Settings

When you create a new project in Smart Slider 3 free, you can choose from 2 project types: slider and block. Moreover, you can choose from 2 type of layouts: full width and boxed.

The free Traveler block is a block type slider. Actually, this isn’t a slider because it only has one slide without arrows or bullets. You can use this full width block as a header of your site. Put your links in the navigation, change the text, and your block is ready to use.

Layers

Heading, images and buttons. All of these layers display on the Traveler block, and every layer has their own place. This block is special, because it has a black background color, but there isn’t a background image. The image you can see is the background image of the Content layer. With this setting you can create the effect that the image is blurred from the background.

The block stays from 2 places: the navigation on the top and the content. The content is aligned in the center of the slide. There is a big heading, a description and a solid CTA. This button changes its color on hover, and you can navigate with that to another page. At the bottom of the block there are 3 images with social icons. This can be a good place to link to your social networks.

Animations

The free Traveler block doesn’t have any animations. If you want to create a slider from this block then you can change its slider type. Then you can add a main animation for the slider, which can be fade, vertical or horizontal.

Layout

Rows and columns are the best options to structure your layers. The basic layout stays from 2 rows. The top row has 2 columns in 25%-75% width. The left column is aligned to the left, and there is an image layer. Inside the right column there is another row with 4 layers which can be a great navigation of your site.

By default the social images should be right after the button. But there is the Stretch option enabled at the row, and that puts the images on the bottom of the slide.

Responsive

Device specific options have small device icons next to their name in Smart Slider 3. When you switch to mobile and tablet view, you can set these options device specifically. The textual layers are scaled to lower in tablet and mobile devices, and the padding was reduced.

🎓 Pro Version Available

Did you know this template has a alternative made with the Pro version of Smart Slider 3? What more do you get with the Pro template?

• Layer animation
• Parallax effect

Check it out now!

---

Related Post: 10 Beautiful Full Width Slider Examples

---

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

]]> https://smartslider3.com/free-marketplace/ Thu, 03 Sep 2020 08:50:16 +0000 https://smartslider3.com/?p=31758 Settings With Smart Slider 3 you can create gorgeous sliders for your site. Additionally, you can create not only sliders, but simple blocks as well, like this template. Blocks are special, because they not exactly sliders. They display only one slide, which makes them perfect to create cool sections for your site. The Limit Slide […]

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

]]> Settings

With Smart Slider 3 you can create gorgeous sliders for your site. Additionally, you can create not only sliders, but simple blocks as well, like this template. Blocks are special, because they not exactly sliders. They display only one slide, which makes them perfect to create cool sections for your site.

🎓 Pro Version Available

Did you know this template has a alternative made with the Pro version of Smart Slider 3? What more do you get with the Pro template?

• Layer animation
• Shape divider
• Parallax effect

Check it out now!

The Limit Slide Width option, which fixes the slide canvas, is enabled at this template. As a result, the slider won’t get taller than the set slider height. Additionally, the content remains in the middle of the slide, which makes the block look nicer.