CTA Button Sliders — Smart Slider 3 — WordPress Plugin

Minimal Designer

Sara Humenyanszky — Mon, 12 Feb 2024 09:57:17 +0000

Slider Settings

The Minimal Designer slider template uses the simple slider type. These slider types can be found on many websites, all thanks to their benefits of showing only one slide at a time. Therefore, visitors are not distracted by different content and can move forward at their own pace.

Besides being a simple slider type, it also uses a full-page layout, which means it takes up the entire width and height of your browser.

One compelling feature of the Minimal Designer slider lies in its setup. Using six slides, it includes a Static Overlay alongside five regular slides. The Static Overlay is a unique type of slide, that is continuously displayed on top of all regular slides. This template makes use of it to display a navigation bar above the content of each slide. It displays the logo in the center accompanied by two arrows on the far left and right.

Layers

You can find some of the basic layers on almost every slide, like the Text layer, Heading layer, Image layer, and Button layer. Although they are not the most unique layers, some of them stand out with their special settings. For example, both the Button layers and the Image layers have their own specific hover effects, making them more interactive.

In addition, on the second slide, you can find some special layers, like the Counter layer. This is the perfect element for your website to build trust in your visitors by showing them statistics about your company. Just simply set the layer to any number of your choosing.

On top of that, let’s not forget about the unique Static Overlay, that helps us navigate the slider without any hassle. The secret behind this easy navigation is adding a Link Action to the Image layers.

Another setting that makes the whole look more put together is adding the margin to the top of each slider’s content, so the nav bar always stays above the content without overlapping it.

Animations

The Main Animation is set to horizontal, which adds a sophisticated look to the slider.

All layers use basic incoming animations. The layers enter the slide from different directions, smoothly introducing them. These combined movements create a subtle yet elegant visual effect.

You can adjust the delay and duration of each animation on the visual timeline, which you can find at the bottom of your slide editor.

Layout

Each slide creates a captivating layout using Rows and Columns for their structure.

However, two layouts stand out from the rest. First, let’s look at the Services slide’s layout.

It uses two rows with two columns each. Apart from using the same layout inside these columns, you can notice that the columns with the white background take up a bigger portion of each row. Easily adjust it in the Row layer’s content settings. You just need to drag the column width in the below-shown intuitive panel.

Moreover, to fine-tune the space between each column set up the Gutter on their row containers.

Next, let’s take a look at the Projects slide’s layout.

With its captivating layout, this slide creates an intriguing solution. There are four columns, that contain both images and text in them. Setting the Wrap After setting to 1 on each row container, ensure that the column containing the content wraps after the column with the image backgrounds.

On top of that the Gutter keeps the spaces equal between each of the columns.

Responsive

Smart Slider is a fully responsive slider plugin offering useful tools to its users to optimize their designs for different screen sizes.

For example, the Font Resizer lets you adjust your layers device specifically, which makes it easier to offer your visitors a pleasant experience while they are viewing your site.

Additionally, some responsive settings activate automatically, like in this slider template’s case you can notice that a row’s columns automatically break into new lines on smaller screens, giving them enough space to shine.

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

Career

Daniel David — Fri, 15 Jan 2021 14:57:56 +0000

💡 Best features in this slider

Slider background
Two rows below each other
CTA button
Animated shape divider
Text bullet

Settings

Full width sliders are popular hero sections on website. Since they take up the full page width, they look amazing on any screen size.

At the bottom of the slider you can find a cool slider navigation option: text bullets. Text bullets are like point bullets, except they display the slide title. As a result, they help learning about the slide content before visiting it. Additionally, the slider generates bullets automatically. So this special control doesn’t need you to maintain it. Furthermore, there are many options to customize how the bullets look. For example, you can change the color of the background and text, and create rounded corners.

Text Bullet control

The slides themselves have no background. The light blue color behind the layers is the background color of the slider. This makes the background look static, as it doesn’t move with the slides.

Layers

The Career slider has some text and heading layers for displaying textual content. There are some image layers for the icons and logos. But the most important layers are the button layers. With button layers, you can create cool CTA buttons for you website, and boost your conversions!

Animations

The most obvious animation on the slider is the animated shape divider at the bottom. Shape dividers help creating smooth and interesting transitions between sections of your website. Every shape has its own unique animation. Some runs only once, like he “Curve 3”. Some runs continuously, like this “Curve 4” animation.

Shape divider settings

Apart from the Animated Shape divider, there’s a horizontal Main animation. This moves the layers during the slide switching. It looks especially great on this slider, because the slides don’t have background. As a result, it looks like the layers are moving on top of a static background.

Layout

The Career slider has two different layouts on its slides. The base of the first slide is a row with two columns. On the left column there’s a heading, a text and a button layer. But the right column is much more interesting: it has two rows below each other. The structure of these columns is the same. They have one column, and inside that column, there’s another row and a button layer.

Row inside another row on the first slide

On the second, third and fourth slide you can find another layout. This one is based on a 3 columns row. The left column has the same layers as the one on the first slide. But the last two columns have identical layout, which differs from the first one. Each column contains the same layers: an image, a heading, a text, a two column row, and a button.

Responsive

Smart Slider 3 is a responsive slider, and it has many great tools to help you optimize your slides for small screens. To make the slides look as good as possible on mobile, the slider only displays the most important layers. To achieve this, we hid some of the layers, and also adjusted the font sizes.

If you compare the mobile and desktop layouts, you’ll also notice that the alignments don’t always match. For example, the big heading on the first slide is left aligned on desktop, but center aligned.

Related Documentation: Bullet control

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

Winery

Daniel David — Tue, 04 Aug 2020 12:32:34 +0000

Settings

The Winery slider is a showcase type slider, which displays more slides next to each other, but puts the focus on the active slide in the middle. Clicking on the previous or next slides, you can navigate forward or backward to see the others. This is a full width slider, and fills the entire width of the browser.

The showcase has a solid green background color what you can freely change in the General tab of the Slider settings.

Slider background color

In a showcase slider you can set the size of the slider and slides separately. The middle slide is fully visible, and you can see a part of the other slides, too. The next and previous slides are also scaled down to 90% of the original size which highlights the active slide. Between the slides there is 80px distance which can help to separate the slides from each other.

Slider and slide sizes

Layers

You can meet the same layers with different content on every slide. There are 2 heading layers, 3 text layers which describe your product, a button layer and images which decorate the slides. The purpose of the Winery slider is to showcase your products. For this reason each slide contains a call to action button which displays the price, and you can navigate your visitor to the products page.

Do you want to check your layers or change them? Use the layer list to find all of your layers in your slide. You can open it from the top left corner of the layer window. Here you can check all layers of the slide, change their name, copy, delete, hide them or change their order.

Layer list in Smart Slider

Animations

The specialty of the Winery slider is the layer animation behind the bottles. There are 4 images in a circle shape, and when you switch a slide, 3 images will rotate. These 3 image layers have a layer animation which rotates the layers in their Z axis. The animations are synchronized with each other, that you can check on the timeline.

Starting points of the layer animations

You can see different movements on each slide, which cheer up the whole slider, because the visitor will see different animations when they switch to another slide.

Animations and Timeline

Layout

The layout of the slides are very simple, we have used a 1 row – 2 columns structure. The content is in the left column, and the images are in the right.

1 row – 2 columns structure

If you check the slides, you can see that each slide has an image in the bottom left corner behind the row. This is an absolute positioned image layer, so it won’t move away if the size of the slider will change. If you want to replace the image, open the layer list, and you can find the layer at the bottom of the list. Then pick another image, or change its position, and save your settings.

Let’s take a look at the right column! You can find 5 images here: a bottle with Default position, and 4 images behind it with Absolute position. The 4 image layers are linked to each other, so it doesn’t matter if the size of the slider will change, the shapes will keep the distance in every view, and you can move them together.

Responsive

When you optimize your slider for mobile, you should aim to make it maximum 600px tall. The most important thing you need to know is that, your slide’s height is based on the layers, and all the slides’ height are based on your highest slide. So if you want to make your slider smaller on mobile, you should make the changes on all of your slides.

There are more options which can make the height of the slider smaller. We have used the font resizer on the heading layers, and now the headings are 60% of the original font size. The text layers are hidden on mobile, which is a great trick if you want to reduce the height. The bottle image by default was too tall, to make it smaller you can set a maximum width to the layer, which reduces its height, too.

Maximum width option

Related Documentation: Showcase slider type

Related Post: 10 Beautiful Full Width Slider Examples

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

Ken Burns

Roland Soos — Thu, 12 May 2016 13:04:37 +0000

Settings

The Ken Burns slider is a full width slider, and fills the horizontal width of your screen. When you check the slider you can notice the slider autoplay. The slider switch their slides every 8 seconds. You can also notice the autoplay indicator on the bottom which shows when the next slide will come. It can be a great option to call the visitors attention. However, the visitors can stop the autoplay if they hover over the slider, so they can read the content if they want.

Layers

Each slide uses the same layers: heading, image and button, and they are in a row which is the same in each slide. This row is special because if you hover over it the background color changes. How to create a hover effect for your layers? All you need is to select the layer which you would like to add a hover effect to – in this example the Row has a hover effect. After that you should go to the Layer window, and set a hover background color to your layer.

Animations

The Ken Burns effect is a popular effect in web design. This effect with the slider autoplay makes the slider vivid, as you can see in this slider template. You can use this effect on any websites, it achieves a professional looking animation for the images which it is used on.

The Ken burns slider is a good example where you can check how the actions work. You can try it if you click on the button on the first slide. You will see that the slide will switch to the next one. To achieve this, you can use link actions.

Layout

There are 3 slides in the slider, and the layers are in a row, where there is a button on the bottom part. This button has -30px bottom margin, and with using this negative margin you can put the button over your row which makes a great layout.

If you check the slider example, you will see that you can navigate in the slider in 3 ways. Firstly, you can drag to the left or right, and the slider will change. Secondly, you can use the buttons with the actions. Finally, you will see the arrows in the left and the right side of the slider, which are special, because if you hover on them, you will see the slide title of the next or previous slides.

Responsive

The slider is fully responsive, and looks good on any devices. If you check the mobile view you can notice the arrows are hidden. With that the content has more space, and the visitor can read it. The autoplay indicator is still visible, with that you can call the visitors attention there are more slides on the slider.

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

Courses

Daniel David — Mon, 20 Jul 2020 06:32:21 +0000

💡 Best features in this slider

Settings

Courses slider is a gorgeous full width slider what you can use on your website. It features a nice image in front of single colored background. This gives a modern look to the whole slider. Additionally, this dark background the Shape Divider at the bottom truly stand out.

Shape Divider at Smart Slider

The arrows on the Courses slider stay inside the slide content. How to create arrows like that? Using the Advanced Position at the arrow control. With the Advanced Position feature you can use Control variables for positioning. This way you have a lot more options to place your arrows, bullets and thumbnails on your slider.

Advanced positioning at the Arrow Control

Layers

You can find some special looking layers on this Courses slider. Let’s start with the button layer, that has an icon in front of the textual content. At the button layer you’re able to select an icon the layer shows, which can help you make better CTA.

CTA buttons with icons

At the bottom of the slide you can find two image box layers. These layers are special, because they let you hold an image or icon, a heading and a description in a single layer. This opens up many designing possibilities.

Image box layer layouts: top, right, bottom, left

To get this left-aligned layout, we put 540px max width on the row. As a result, the layers are taking up approximately half the slide, which gives a nice layout.

Animation

The most special part of the Courses slider is its animation. What makes the animation look so cool is that the Main animation got combined with two layer animations. So, what does exactly happen when the slides switch?

The Main animation moves the downscaled Content layer to the middle. Then the Content layer starts to scale up, and during this time, the layers in the row move in from the right.

Apart from these cool effects, the slider has a lightbox feature which you can launch from a CTA button. It prompts the visitor to learn more about your course by watching a video.

Layout

The layout of the Courses slider is based on the Content layer. This Content layer has the image of the slide. The reason this creates a special look, because the Content layer can only as big as the slide canvas is. In other words, it does not always cover the whole slide.

Difference between the Content layer background (left) and Slide background (right)

Responsive

There are some cool responsive tricks the Courses slider uses, mostly on mobile. First things first: when you optimize your slider for mobile, you should aim to make it maximum 600px tall. This would make the slider fit nicely on the small mobile screens.

How did we achieve the smaller size? The first step was to reduce the heading layer’s font size. This can be done very simply in the Slide editor, and you can see the result immediately on the canvas.

The next responsive trick is to use the row’s Wrap after option to break the CTA buttons columns into two lines. To do something like this, simply change the Wrap after to 1 at the row. By the way, this is actually the default value for the rows you add. However, the Wrap after option was set to 0 at the row where the image box layers are. As a result, they ended up next to each other.

Different text align on desktop (left) and mobile (right)

If you carefully look at the slides of the Courses slider on mobile, you might notice that the text align changed. On desktop, the layers were left aligned. However, on mobile they’re in the middle.

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

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

Post Carousel

Daniel David — Thu, 06 Dec 2018 07:45:19 +0000

Settings

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: 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.

Free Full Width

Daniel David — Thu, 12 Nov 2015 11:24:09 +0000

Settings

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.

Settings of the Arrow control

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.

Customize the style in the Layer window

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.

Text scale option

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

Portfolio

Daniel David — Mon, 06 Jun 2016 11:29:04 +0000

Settings

It is a common practice among website owners and developers to welcome the visitors with a nice-looking, clean landing page where the users can find call to action buttons, and where they can get basic information about the website and its purpose. If it’s a company website, then a landing page usually lets the visitor know about the name of the company and what they are doing. If it’s a webshop then you can show some featured products, discounts and most popular products.

This whole page was made using sliders and blocks where you can display your portfolio. The Portfolio group stays from 5 sliders, which will be under each other if you publish the slider group. You can add more sliders to this group if you want, also you can fully customize each slider.

Layers

The first slider contains some basic information about the one-person company, giving the visitor a clear idea on what to expect when they arrive at the website. The clean design speaks for itself; no users will have trouble reading the texts on the slide, or on the buttons. Speaking of the buttons, the first slide has two of them. The first will scrolling further down on the page, while the How I work button will take the user to the second slide.

Besides that you can meet with heading layers, texts and image layers in the sliders. The third slider uses a special kind of layer: the caption layer. When you hover over the images, a caption will appear at their bottom part, giving some additional information. These images also have lightboxes on them, so when you click on any of the images, a lightbox will pop up, showing an extra image.

Animations

When the page was loaded, a simple and elegant flip layer animation happened on the texts and buttons. If you happened to miss it when you loaded the page, press the How I work button, wait for the second slide to load then click on Who are you? to see the animation.

Once you press the How I work button and the slide is changing, you can see a professional-looking background animation which conceals the first slide and introduces the second one. This slide’s specialty is the lightbox video, which opens up when the image with the play button is clicked.

The parallax effect is a special effect becoming more and more popular on websites, and used mainly for one reason: to wow the users. And it is doing a marvelous job with that. Parallax effect is creating the illusion of depth by moving some elements slower, than the others. You can see this parallax effect on this slider group.

If you hover over the second slider, and start moving your mouse (when it’s still over the slider) you’ll notice that the five small photos are trying to follow your mouse, creating a breath-taking effect even on a simple block element like this. This parallax effect can be added to any layer, and their depth can be adjusted at the layer settings. At the Animations tab on the Slider settings page additional customization options can be set such as the effect’s behavior on Horizontal and Vertical use cases (whether it will move by the mouse or by scrolling).

Layout

The slider group contains 2 sliders and 3 blocks. Slider blocks are basically allowing you to display one slide only without any control elements on it, but the same layers and slide-level options are still available, therefore it is like a row editor from a page builder. You have the elements to be added, and you have a visual way to configure them to your liking.

The portfolio block has a special layout, because there is a fixed slider background. If you scroll back and forth a little bit, you see that the illusion of depth is a little bit different in this block than it was in the previous one. In this case, the illusion is given by the fixed background.

Responsive

The whole landing page is fully responsive. There are layers which are hidden in smaller views, also the font sizes are smaller. You can set the font size with the text scale option device specifically, so you can set different values on different views.

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

Product Boxed

Ramona Nemeth-Csoka — Thu, 16 Mar 2017 13:30:17 +0000

Settings

Today’s web designers enjoy creating full width layouts. These layouts are eye-catching, and loved by clients and visitors alike. Boxed layouts, where the content is not full width, but usually 1200px wide, are still quite popular. For these kinds of websites, it’s better to avoid using full width sliders, as they don’t fit the layout. However, boxed sliders are perfect for sites which use boxed layout. They fit the template and don’t mess up the design flow. The Boxed Product Slider is a great way to display your products when you don’t need a full width slider.

The slider autoplay feature is turned on the slider, which means the slides switch automatically. This helps the users see more slides without having to take action. The remaining time on the slide is displayed by the autoplay indicator shown at the top right corner. At the bottom of the slider there are bullets, which visitors can use for navigation. The bullets are usually dot shaped, but on this Boxed Product Slider, they’re small lines.

Layers

Each slide contains an image on the left side, a heading which displays the product title, a text layer with a small description of the product, the price and a “Buy now” CTA button next to the price. The button has a vivid purple color, and it’s hard to miss on the white background. Thanks to this, visitors won’t have to wonder what they need to do to put the product in their cart. Some slides also have a “New arrival” badge. This is a psychological tactic to encourage people to be the first to get the product.

Animations

When you switch a slide with the arrows or with a mouse drag, you can notice a horizontal animation. This is the main animation of the slider which you can set to vertical or fade at the settings of the slider.

Layout

Each product has its own slide which means there’s enough space to introduce them. On the left side, you can find the product image. This helps the visitor picture the product they’re going to learn about later. On the right side, they can find the most important details of the product. This information includes the name, description, price and a “Buy now” button.

Responsive

The boxed product slider is fully responsive. The slider looks different on desktop and mobile, but has the same content on it. The mobile view wraps the content below the image, so the content has enough space, and the textual content is clearly visible. This is because of the wrap after setting on the main row, which wraps the row after 1 column.

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

Boxed Product Carousel

Ramona Nemeth-Csoka — Thu, 16 Mar 2017 13:35:36 +0000

Settings

Carousels are the most popular ways to display a product slider on a website. A carousel allows the visitor to see more slides next to one another, saving vertical space on the slider. The slider’s dominant color is grass green. Both the arrows next to the slider and the buttons use this color. Some slides have a tag or a new badge, which is also green. The slides have rounded corners creating an interesting effect.

The slider has a boxed layout, so the slider can be as big as the container it’s in. Now you can see 2 slides next to each other, but if you use it on a bigger container, you can see more if you have enough space. Also you can make the slider to be full width if you set the layout of the slider at the Size tab of the Slider settings to full width.

Layers

These sliders are also about being minimalists. They won’t have long descriptions and unnecessary details, just show what the users need to see the most. This information includes an image layer which is a product image which is clear enough to show the item. There are 2 heading layers: the name and the category of the product. These are also very important to appear on a product carousel. Finally, there is a CTA button with the price on the bottom of the slides, which you can buy the product if you put a link on it.

Animations

When the visitor switches slides, only one slide moves out of the visible area. When they switch forward, it’s the first slide that disappears and when they switch backwards, it’s the last slide. WordPress Carousel slides can also switch a pane so the whole visible area moves. Switching a pane is another great way to create a product slider.

Layout

The slider uses the boxed layout, so it fills the width of its container. You can switch slides with the arrow in the left and right sides, or with dragging. There are more slides visible at the same time, and you can switch only one slide at the same time.

Responsive

You can see only one slide on mobile devices, and you can switch to the next slide by dragging. The arrows are hidden on mobile, because of that the content have enough space, and the visitor can check the details of your products.

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