Settings

It’s a popular design choice on modern websites to put a full page hero header or slider to the website. These sliders fill the whole width and height of the browser. On today’s large monitors a full page slider provides enough space for a good first impression.

After you got your visitor’s attention, they’ll want to see more of your site, so they start interacting with it. One of the most natural ways to interact with the page is to scroll down. In Smart Slider you can use this scroll action to switch slides. As a result, instead of scrolling to the next section of the page, the visitor sees a new slide. This works great with a vertical animation, because it makes the slides look like they’re new sections of the page.

Layers

The purpose of a portfolio slider is both to showcase your previous works and to get you new jobs. For this reason the first slide contains two call to action buttons. One large button leads the visitor to your Latest Projects, and another leading to a contact page.

This second button is actually a special layer called Highlighted Heading. With this layer you can highlight the most important part of your text with a cool effect. It’s a great layer to grab attention, so it’s a great choice for a less ostentatious CTA button.

At the bottom of the first slide you can see two super counter layers. Counters are great to display numeric details about your product or services.

Animations

Smart Slider has many cool effects you can choose from to make your slider look more stunning. The layer animation, what you can see on each slide, is one of these effects. It brings motion and life to the slides, which makes it easy to grab the attention of your visitors.

Layout

The slides in the Full Page Portfolio slider have a very simple layout: there’s a row with two columns in each slide. The left column contains the text, and the right one has images. By default this layout would place the image below the text on mobile. But in Smart Slider you can change the order of the columns, so it’s possible to show the image first. This gives a much better look on small screens.

Responsive

In Smart Slider your layers can have two different position type: Default or Absolute. Default layers are the perfect choice to create your slide’s content. Working with Default layers ensures your content remains legible on the smallest screens. Additionally, it prevents any content from getting cropped.

Absolute layers, on the other hand, are great for decorative content. On this slider, the colorful shapes are Absolute image layers. What makes them more special is that they’re Nested. Nesting means placing Absolute layers into a column, which helps with the positioning.

Related Documentation: Slide editing in Smart Slider 3

Related Post: Smart Slider 3.4 – Nebula

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

The SEO Agency template is a full page slider. Full page sliders are super popular because they fill the screen both vertically and horizontally. In fact, they make hero sections and hero sliders look spectacular! But you don’t need to create a typical hero slider to be able to use a full page slider. They’re super versatile and can be used for anything else.

There are two settings that go with the full page layout super well. The first option is the Mouse Wheel setting, which allows visitors to go through the slides by scrolling with their mouse. Since the slider fills the whole browser width and height, the mouse wheel option creates a great user experience.

The other option that goes well with the Full page layout is the Vertical Main Animation. The Main Animation is the basic way to make the slides (both background and layers) move. A vertical animation paired with the Mouse Wheel control and Full page layout creates a spectacular slider!

Layers

The SEO Agency template uses basic layers. You can find headings, texts, images and a button on each slide.

At the right bottom part of the slides, there are up and down arrows for navigation. These are image layers, and they can switch slides using the Link Actions.

Animations

The most obvious animation you can see on this template is the layer animation. Layer animations are great to introduce layers to your slider. That is why we use them to introduce almost all layers with some kind of cool movement.

The other animation you can see is the Layer Parallax effect. If you move your mouse cursor, the large round shaped image in the background slightly moves.

Layout

There are two kind of layouts in this template that worth mentioning. The first one is the large colored image and the figures on top of it. The base of the layout is the colored image which is in Default position. The reason the decorative figures can appear on top of it, because these are in Absolute position.

The other interesting layout is the rotated SEO text on the left side. It’s also an Absolute positioned layer, that’s rotated with Smart Slider’s Rotate option. To modify the text of this layer, simply open up the Layer List and use that to find it.

Responsive

Smart Slider is a responsive slider and has many great tools to fine-tune your slider for small screens. For example, if you add a row it’s columns are automatically wrap below each other on small screens. Of course if you have a layout where you need the columns to be next to each other, you are free to modify it.

Apart from the automatic options you can make lots of manual edits. For example, you can adjust the text size using the Font Resizer. Or, you can hide layers to ensure that your content fits into mobile devices. Additionally, you can even change order of the columns, for example, to make a column containing an image appear above the textual content.

Related Documentation: Fullpage layout

Related Post: What is a Full Page Slider and How to Use it?

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

Settings

Static slide is that slide, which is over your slider without switching away, while your regular slides can move behind them. So you shouldn’t think of them as slides, because the whole concept is different, it is rather a tool which gives you a powerful option with a user friendly interface. In the following video you can learn how to create a static slider.

This Static slider is a full page slider, it fills the 100% width and height of your browser. You can use it as a great homepage slider, and can fit in any theme, because you can fully customize it. On the bottom of the slider you can notice a white shape divider which you can customize or disable in the Animations tab of the Slider settings.

The slider stands out from 4 slides: a static slide, where the content is, and 3 other slides with background images which are autoplaying every 8000ms. You can stop the autoplaying with the autoplay control on the top, also you can see when the next slide will come.

Layers

With a static slide you can place layers, for example your logo or watermark over your normal slides. In this case the fully textual content is on the static slide. There are heading and text layers, 2 buttons and 3 transition layers. The transition layer stays from 2 images, and if you hover over it, the image changes to another. You can use these images to link to your social media platforms.

Animations

When you load the slider, all layers come in with an incoming layer animation after each other. The main heading uses a special animation which you can use only on headings: text animation. With the text animation you can animate your text by its characters or words. You can customize this kind of animation in the Text animation manager which you can reach from the content tab of the layer window.

Layout

The static slider stays from 3 rows. You can find the headings and another row with the two button layer in the first row. The third row is on the bottom with the 3 transition layers. The first main row fills up the available vertical space because the Stretch option is enabled. The second and third row are close to each other, because the full width option is disabled at their settings.

Responsive

The slider is fully responsive, and fills the full page on every device. The fonts are smaller on the smaller screens, the font sizes are resized with the Text scale option. If you switch to mobile view, you will see that the button layers and transition layers are next to each other in this view as well. By default a row wraps after 1 column, but at this slider the columns won’t wrap.

Related Post: What is a Full Page Slider and How to Use it?

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

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

The Black Friday Slider’s Full Page layout is a perfect example of how you can easily catch your website visitors’ attention. There’s no wonder why it’s a popular design choice, as these sliders fill the full width and height of the browser. As a result, they provide a large enough space for a good first impression.

Visitors can choose between two different options to browse the slider. They can navigate it by clicking on the arrows, shown on both sides of the slider. If you choose this option you’ll notice a nice hover effect. This makes the process of switching between the slides even more user-friendly.

On the other hand, some people prefer to move between slides by simply dragging them horizontally. The good thing is that this template works well for those users too.

You can easily adjust these settings to your unique preferences under the Size and Controls settings.

Layers

The Black Friday Slider mostly uses simple, basic layers. There are Heading, Text, and Image layers.

However, there are two special ones as well on each slide, creating the sale tapes at the bottom. They use an Image Area layer. What differentiates it from the simple Image layer is that an Image Area layer can cover a given area with the selected picture and can crop parts of the image if needed.

You may have also noticed that some layers are more interactive than others, which is a result of a simple layer parallax added to them. You can adjust these settings at the Animations tab, then don’t forget to apply the Parallax value at the layer’s style tab.

Furthermore, you can notice that some Heading layers have a word inside them that’s customized differently than the rest. This outstanding effect is the result of the custom CSS they have. To achieve this look, add your special design to the Developer settings CSS section, then insert their classes on the containers in the style settings.

Animations

There are some outstanding animations on the Black Friday Slider. You can see an incoming animation on most layers, which makes their entrance more eye-catching.

However, now let’s focus on those that don’t stop moving after all the layers are introduced. Both the Image Area layers and the sale percentage layer, which deliver the main message of the slider, use a loop animation to continuously remind the user of the special offer.

There’s another outstanding layer animation, the Reveal animation. It’s a perfect way to make your content stand out. In this template’s case, it’s strategically used to create FOMO in the user, by slowly revealing the limited-time offer.

On top of that, you may have noticed the unique design element at the top and bottom of the slider. Smart Slider allows you to divide your page with fully responsive Shape dividers giving a modern edge to your website. There’s a paper-like shape at the top and bottom of the slider, which connects it with the white sections around it.

Layout

Each of this template’s slides uses the same, simple layout. There’s a row containing two columns on each side of it. While the left column contains the text, the right one showcases the unique Image layers.

By default, Smart Slider places the images below the text on mobile view in this layout. However, you have the option to change the order of the columns, so you can easily adjust the arrangement if you’d prefer to show the images first.

Moreover, there’s also an interesting layout that you can find on the slider. The sale tapes are absolute layers. They are slightly rotated to create this realistic look of crossing over each other.

What’s more, is that they are aligned to the bottom and have their own custom size, which ensures that they fill the whole slider.

Responsive

Smart Slider offers many great tools to optimize your slider for smaller screen sizes. One of the most commonly used features is the Font Resizer, which helps you to easily adjust your layers uniquely for each device’s screen.

Another great option is the Hide on feature, which you can use on any layer of your choice. In some cases, like when you are using absolute layers, it can be especially useful to hide them in mobile view.

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

Top 5 Products slider is a modern slider for your website to highlight your products or services. It uses just the right amount of effects to make it interesting for the visitor.

There are more ways which you can navigate between the slides. You can click on the arrow image on the bottom which goes to the next slide with a link action. You can drag and you can use the number type bullets on the bottom right corner. These bullets are fully customized for this layout, but you can also customize it at the style and font settings by clicking on the green buttons at the Slider settings → Controls.

Layers

There are more kinds of layers visible on this slider: there is a button on the top, then heading and text layers come, and under that you can see 2 button layers. Probably the most noticeable part of the Top 5 Products slider is the gray CTA at the bottom. This large CTA stands out of the other content of the slide. Additionally, it also gives an idea about the upcoming slide content. People are more likely to click on a button, when they are fairly certain what to expect afterwards. So this CTA helps to increase your click through rate.

Animations

Top 5 Products slider uses a couple of trendy effects which are available in Smart Slider 3. A really cool effect is the “slice” background animation. This effect looks like the reveal layer animations, but it affects the slide background images instead of the layers.

Layout

The Top 5 Products slider showcases many amazing features of Smart Slider 3 Pro. The slides themselves were built using default positioning, Smart Slider 3’s unique way of editing. In default position you can build your content using structures, such as rows and columns. The building is fast and easy, and the responsive result is amazing.

Using a full page slider is a popular design choice amongst website designers. A full page slider fills the whole browser viewport both vertically and horizontally, and the result is amazing. Full page sliders are really versatile. You can actually use them to fulfill any purpose, such being a hero header, or part of a landing page. The Top 5 Products slider you can see above is just as versatile as any other full page slider.

Responsive

The slider has lots of content on the desktop, but if you display all of these on smaller views, then the slider will be too tall, and crowded. To avoid this you can hide layers which content isn’t too important, like the content of the next slide, instead of that the arrow is bigger, and more touchable.

Related Post: What is a Full Page Slider and How to Use it?

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

The post Top 5 Products appeared first on Smart Slider 3 — WordPress Plugin.

The Flower Shop is a full page slider, so it fills the 100% width and height of your browser. The slider stays from 3 slides, and it autoplays every 12 seconds. You can see the slider autoplay indicator in the top right but you can switch slides by dragging or with the thumbnails on the right as well.

Layers

The slider has simple layers. There are 2 heading layers on the top, then a text layer comes, and finally 2 button layers. On the right side of the slider you can see more image layers which are on the top of each other. And in the top right there is a button layer which has rounded corners and displays the price. The image layers are in absolute position, which can be useful at decorating the slider.

Animations

The textual layers are coming in with a nice looking reveal animation. This kind of animation looks good, and cheers up your website. The images also have layer animations which are coming after each other. You can harmonize these animations together in the timeline.

Layout

The slider has a simple layout: there is a row with 2 columns. The left column contains the textual layers, the right the images and the button. You can see the autoplay indicator on the top right, and the thumbnails on the right side of the slider. With the thumbnails you can switch slides. They are rounded, and have an opacity if they aren’t active.

Responsive

If you check the slider on mobile you can notice the images in absolute position are hidden. They are used only with design purpose, and with hiding them you can save space on the slider in smaller views. Also, you can see the texts are smaller. You can set the text sizes with the text scale, which is a device specific setting.

Related Post: What is a Full Page Slider and How to Use it?

Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro

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

The Cosmetics slider is a modern looking full page slider, which is perfect to display your products. Full page sliders fill the screen both horizontally and vertically. They’re super popular nowadays, because they look stunning on the large monitors that people use.

There’s a white border around the slider, which gives a nice frame to the slider. You can adjust the border at the General tab, under Slider Design.

Layers

You can find the same layers on each slide of the Cosmetics slider. There are two heading layers, one for the main headline and another for the price. There’s a text layer to display the description of the product. Also, you can find a nice CTA button the visitors can use to buy the product.

Every slide has four image box layers. These are special kind of layers, which can display an image or icon, a heading and a description. We used this layer to display the list with the check marks.

Animations

There are interesting animations on the Cosmetics slider. The first animation you’ll see is the layer animation, that introduces the row to the slide. It’s a simple left move animation, but it looks a lot more special because of the masking. The masking is a special kind of animation that makes the layer animation play inside the layer’s boundaries. In other words, the layer animation is only visible when it’s inside the current layer’s area.

The other animation is the Background animation what you’ll see when you switch slides. It’s a parallax-like effect, because it moves the two slide background images at the same time, just with a different speed. As a result, when you switch to the next slide, the next slide moves in fast and covers the current slide.

Layout

The content is placed to the bottom left corner of the slide, which makes the layout trendy. Creating such layout is very simple. First, you need to set a maximum width to the Content layer. Second, align it to the left. Finally, change the vertical align to bottom so the content will appear in the bottom of the slide.

The other cool layouting the Cosmetics slider is the usage of the row and columns which contain the layers. The white and cream colored boxes are columns of the same row. By default the columns of the row are next to each other, but using the Wrap after option on the row it’s possible to display them below each other.

Responsive

Smart Slider 3 is a responsive slider, and offers many tools to fine-tune the look of your slides on mobile. The two most useful tools are the font resizer, and the ability to hide layers on different devices. Additionally, the padding and margin values what you can use to create distance between the layers can be changed on tablet and mobile devices.

At the Cosmetics slider we hid the image box layers on mobile to reduce the height of the slide. Also, we reduced the font sizes to allow the texts to better fit into the slide. By default the Wrap after of the rows is set to 0 on mobile, which causes the columns to break into new lines. We changed it to 1 at this slider to put the CTA button and the price into the same line.

Related Video: Layer Animations & Timeline

Related Post: What is a Full Page Slider and How to Use it?

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

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.

The slider on this page is a full page video slider. It plays an MP4 video in the background, behind all the layers. These layers usually contain more important information than the background video. Because of this, it makes sense to put the video in the back. Since the video only serves design purposes, it’s not a big problem if some parts of the video aren’t visible. To ensure that your texts are legible, make sure to use a different font color than what the video’s main color is. To improve the legibility further, you can set an overlay for the video at the layer window.

The slider is suitable as a hero header. All major desktop browsers support MP4 videos, which we use for backgrounds. What’s even better, the modern mobile browsers can play these videos as well. There’s one thing you should be aware of, and it is the way mobile browsers handle videos. They allow only muted videos to play automatically.

Layers

There’s not much content on the slider, so the visitor can focus on the message. There are only 3 layers: a heading on the top, a text layer below that, and an image box which opens a lightbox video.

Animations

Smart Slider 3 Pro has a lightbox feature, which is used on this sample. The lightbox opens the same MP4 video which you can see in the background. Of course, you can put any other video to the lightbox, or an image, or even any URL. Using a lightbox you can allow visitors to enjoy the content without any distraction.

Layout

This slider is a full page slider, so its height and width fill the 100% of your browser on any device. If you want to use it as a homepage slider, and you have a navigation on the top, then you can decrease the height of the slider with the height of your navigation.

Responsive

When you check the slider on mobile, you can see the texts are smaller. This is because of the text scale option which you can set the font size device specifically. With this setting you can make the content legible, and good looking on each device.

Related Post: What is a Full Page Slider and How to Use it?

Related Post: Why do You Need a Video Slider on Your Website?

The post Full Page Video Block appeared first on Smart Slider 3 — WordPress Plugin.

Settings

This slider is a full page slider, so it is as big as your screen, filling the 100% width and height of your browser. When you scroll with your mouse or use the bullet control on the right, you can notice the background animation which gives a great experience. The slider has 3 slides, and when you are on the third slide and scroll down, you can see the content below the slider.

Layers

There aren’t too many layers in this slider, there are 2 headings, a button and an image layer. You can easily customize them, change the text, the font family, colors, or any styles. Also, you can add layer animation to each layer if you want.

Animations

How your slider works might have a bigger design influence on your website, than the actual contents on it. You need to carefully pick the right choices of what you would like to say with your slider. It can be “party all time”, or “we are professionals”, maybe something else. But you don’t want it to be too simple, which wouldn’t tell anything besides “boring”. The background animations give you many options to choose from, but being boring isn’t one of them.

The best thing about background animations is that they are attractive. They can be implemented to the background images, which usually cover your whole slides, so the effects can be very powerful. You can also handle them easily, we have “sets”, where you can even choose from only vertical animations, if your slider is set up to have a vertical behaviour. This animation option is available globally, but you can select them individually for your slides, too, to have specific effects on the different slides. There is a preview, which helps a lot with picking out the animations.

Layout

The slider has a simple layout, the layers are under each other, each layer is in a new line. You can easily use this layout on a dynamic slide, just copy the slide and paste the content in the dynamic slide. Then replace the content fields with variables. The top heading can be a category tag, the big heading the title of your post, and the read more button can link to the actual post.

Responsive

The slider is fully responsive, it looks good in each device, on bigger and smaller screens as well. On smaller screens we used the text scale option to make the text smaller. This helps that the text isn’t too big on mobile, and won’t take up too much space.

Related Post: What is a Full Page Slider and How to Use it?

Related Post: Animations & Effects in Smart Slider

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