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

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.

The Mega Magazine template is a full page slider for your website. Full page sliders fill the browser viewport both vertically and horizontally. As a result, they’re perfect for various use-cases, including header sliders.

It’s also uses the Simple slider type, so it displays one slide at a time. This helps the visitor focus on the slide’s main message.

Navigating the slides in the Mega Magazine slider is easy. People can use the CTA button with the label “Next Category”. This button uses Link actions to start the slide switching. Touch swipe and drag navigation is also available.

Layers

You can find the most common layers in the Mega Magazine template. There are lots of headings, since there are many headlines, but there are couple of text layers, too.

Additionally, you can find a handful of image layers. Also, there are lots of rows and columns that create the cool layout. Also, main image on the left side is displayed by a column, because it’s the background of the column.

Animations

There are two kinds of animation on this slider. One is the Main Animation, which is the special effect that switches slides and moves the layers at the same time. The Mega Magazine slider uses the Vertical Main Animation.

Apart from the Main Animation, you can also find layer animations on this template. They help displaying the grid on the right side.

Layout

The Mega Magazine template contains many interesting layout solutions. For example, there’s a 2×2 grid on the right side of the slider. We created it using a single 4 columns row that wraps after the second one.

Another interesting element in the layout is the Absolute positioned layer at top left part of the slide, that displays the category of the current slide. Absolute positioned layers are just floating on the slide, so they can be placed anywhere. For example, at this template we placed it behind the 4 column row.

Responsive

Smart Slider is a responsive slider that offers many great tools to create perfect looking sliders for mobile. For example, you can adjust the font size for tablet and mobile devices without affecting the other devices. You can also hide any layer on any of the devices.

Hiding layers can be useful on smaller screens to ensure that the content can fit. It can be especially important thing to do when your slider is full page, as long content can end up cropped.

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

Related Post: 7 News Slider Designs to Inspire Your Next Web Design Project

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

Basically a split slider is a slider which left and right side moves to the opposite direction. For instance, the left side moves downwards and the right side reveals itself from below. Of course, the two sides meet at the middle of the slider. The split slider effect is gorgeous and it’s not hard at all to set it up. But if you prefer our example you can always import it to your site and tweak it to your heart’s content. You can add more layers, change the colors and pictures or remove anything you don’t like.

This slider example is a full page slider, so fills the available horizontal and vertical space of your browser. The slider doesn’t have controls, you can change slides with the links on the top menu, or with a mouse wheel.

Layers

Smart Slider 3 has all the tools which you can use to create any modern WordPress slider. You can use layers to add your content which help you tell your story. The easiest and fastest way of creating a split text effect is to use default positioning. You should add a row with two columns and add your content to each column. You can add text layers, images and buttons to both sides of the split slider.

This slider uses more kinds of layers: there are heading, text and button layers, there is an image layer in the middle of the slide. After each side switches there’s a second heading where you can see a big heading behind the layers. That’s actually a heading layer as well, added in Absolute position and moved behind all other layers.

Animations

Once your content is ready it’s time to create the actual effect. For that you should select one of your columns, go to the Animation tab and pick the Top animation. Then select the other column and pick the Bottom animation. You can actually select any other layer animations you prefer, but a Top and a Bottom animation will look best.

Layout

The split slider has a simple navigation menu at the top of it. This navigation menu allows the visitor to switch between the slides. Smart Slider 3 makes it super easy to create a menu like that without having to code. At each layer’s link you can select a special link called Go to slide where you can type which slide you would like to go to. The slider will handle the rest. Creating this menu on a static overlay will ensure that the same menu is visible over all other slides. So you don’t have to add it to each slide one by one.

Responsive

Creating a responsive slider has never been easier thanks to Smart Slider 3’s default positioning. It allows you to create your sliders as if you would be working with a page builder. The responsive result is amazing and it doesn’t take ages to achieve it. If you prefer the causal slide building experience, use absolute positioning. It lest you drag’n’drop your layers anywhere.

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 Split Slider appeared first on Smart Slider 3 — WordPress Plugin.

This slider is a clean, modern looking product showcase using pastel colors which fit perfectly into any kind of website. It features a photo app product but it can be used to feature any other product, or even your company itself. It is a full page slider which means that it fills the width and height of the browser in any screen size. The size of the menu is excluded from the calculation, using the Decrease Height option.

There are some interesting features set at the slider settings that would worth mentioning before we would talk about the slides individually. If you’ve checked the slider already, and you went back to a previously visited slide, you might have noticed that the layer animations are not playing again. It is happening because of the Play once setting, which was turned on for the Photo App Slider.

Layers

Now let’s take a look at the first slide. It’s a simple, clean slide, with a few layers: image, heading and text. While the first slide was a simple but elegant one, the second slide is way more interesting. Here you can meet with a transition layer. This layer can display a different image if you hover over it.

On the third slide you can find a YouTube video in a lightbox. You’ll also find smaller icons created using the image layer. Finally, the last slide contains a nice-looking call to action button beside the large image.

Animations

When you check the slider and scroll through the slides you can see the layer animations on the layers. It is a perfect and fancy way to introduce your product or your company.

The most special slide is the second one. This slide has layer animations just like the first one, but most of these animations are tied strongly with the events: for example, the “Hover me” layer stays visible until you hover over the first transition layer, but if you don’t hover over this layer, only the other two transition layers, it will stay right there. While you hover over any transition layer, you’ll notice that the image beside the mobile gets covered by another one that appears because the transition layer was hovered. Hover on the other transition layers, too, to see a different image appear beside the mobile each time. It looks fantastic, your visitors will love it!

Layout

In Smart Slider you can use 2 positioning modes: default and absolute. With default layers you can build your content, and absolute layers can be used as a design element as you can notice in this slider.

There are several possible methods to navigate between the slides in this slider: on the right side, there is a bullet control, it is possible to switch slides using the arrow keys (down key to go to the next slide and up key to go back one slide), the slides can be dragged to the same direction. It is also allowed to scroll upwards or downwards to go from a slide to another one. Since the Carousel option is turned off, after the last slide is reached, the slider will allow to scroll further down the page without switching slides continuously, so the visitors can check your other content.

Responsive

This slider is fully responsive. The absolutely positioned layers are hidden on mobile. With that the content has enough space, and the visitors can focus on it.

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

Related Documentation: Full page layout

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

The Vertical Thumbnail slider is a great way to create a simple gallery slider for your website. It’s based on the Simple slider type, which can display a single slide at a time. This gives a nice viewing experience, as the other slides won’t distract the visitor.

This template uses the Boxed layout, which makes the slider fit into the container you placed it in. This makes the Boxed sliders perfect for blog posts, as they fit nicely into the content.

There’s an autoplay on the slider, which can be paused and started with the autoplay button at the left top corner. Next to the Autoplay button there’s another button, which makes the slider full screen. This feature is great for image galleries, because visitors can enjoy the images in large size.

Layers

This slider focuses on showing pictures for the visitors. For this reason, it doesn’t have any layers.

Animations

In Smart Slider you can find 2 types of animations which can affect the background images. The first are the Main Animations, that can move both the slide backgrounds and the layers. The Main animation will affect each slide the same way on your slider. The second are the Background animations, which affect the background images and colors. Also, you can set Background animations on a per slide basis.

At this slider we used the Main animation to create this cool vertical effect.

Layout

The most special layout setting on the Vertical Thumbnail slider is that the thumbnails are placed next to the slider. To place the thumbnails like this, we put them to the outer right position.

At each thumbnail, there’s a title and description. This is the name and description of the slide, and it’s a great way to give more details about the slide content.

Responsive

On small screens, the thumbnails take up too much space. As a result, it’s hard to enjoy the slide. For this reason, we turned off the thumbnail on mobile and tablet. Instead of the thumbnail, we enabled vertical arrows. The arrows provide a nice and convenient way to browse the gallery.

Related Post: Create A Responsive Thumbnail Slider

Related Post: Configure Slider Autoplay and Create Automatically Rotating Slider

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