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 Photo Compare slider is a traditional looking slider. This means it displays one slide at a time. As a result your visitors get only one message at a time which they can fully understand before moving on to the next slide. The layout of this slider is “boxed” which means it fits into the container you place it. This makes the Photo Compare slider perfect addition to your blog posts.

There are no common controls to switch slides in this slider. In other words, none of the standard controls are enabled for this slider. The two arrows you can see are custom arrows created from image layers.

Layers

Two of the most important layers on the slider are the image layers that display an arrow. They’re the elements your visitor can use to switch slides. Since it’s an image layer, you can freely replace the arrows to something that suits better to your website’s design. To create the slide switching we used the Link Actions on these layers.

The other most important layer is the Before After layer, as it’s the base of the slide. The Before After layer is a cool element to compare two photos. In this case, it compares the monochrome and colorized version of the picture.

Another notable layer is the heading layer, which displays the caption of the photo. It makes the name of the photographer bold and shows the photo description in normal weight.

Animations

The only animation on the Photo Compare slider is the Main Animation. The Main Animation is the basic slide animation, which moves all elements on the slider. It can move horizontally or vertically, or with a simple fading effect.

Layout

The base layout is pretty simple at this template. First there’s a Before After layer. Below there’s a two column row, where one column contains the caption and the other has the navigation.

In this second column there’s an interesting layout element. This element is the slide counter, which displays the “01|05” text on the first slide. To create something like that on your slider, first add a new row. Second, add another column to the previously added row. Now all you need to do is to add the layers that display your content to each row. Finally, disable the full width option of the row.

Responsive

A responsive WordPress slider like Smart Slider has many cool options to ensure your sliders look perfect on all screens. The most important option for this is the ability to adjust the font size for every device. As a result, you can achieve better looking designs while maintaining the legibility of your text.

If you checked the slider on your phone, you’ve probably noticed that the previous arrow moved around. On desktop the slide counter appears first, then the previous and next arrows. However, the order changes on phones. The previous arrow appears first, then the slide counter and finally the next arrow.

Related Post: Introducing Before After Layer

Related Post: How to Create a WordPress Gallery Slider for Your Website

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

The Showcase Portfolio template is a modern looking slider you can use to display your portfolio items. It’s a full width slider which is the most popular way to display a slideshow on a website. The slider type is showcase, which displays an “active” slide in the middle of the slider, and displays additional slides on its left and right sides. So, the Showcase slider type can only display an odd number of slides. In fact, it always displays at least one slide. But if there’s enough horizontal space, it can display additional slides as well.

The Showcase slider type uses the extra, non-active slides for slide switching. As a result, buttons or other elements won’t be clickable unless they’re on the active slide. This provides a nice navigational experience which visitors can quickly understand. If you want to disable this behavior, head over to the Animation settings and turn off Switch with next/previous slides.

Layers

There aren’t many layers on the slides of this slider. Only two headings and a CTA button are at your disposal. But for a slider that displays your portfolio items you don’t need too many layers. In fact, the less layers you use, the more curious the visitors will be and they’ll more likely to go and check the details of your portfolio.

Animations

There are no layer animations on the Showcase Portfolio slider. But there’s a special effect you can see if you switch slides. All slides but the active one have a dark overlay. This effect is created by setting a background color for the slider. Then at the Animation settings the Before and After opacity values were lowered. This way the non-active slides are semi transparent, and the slider background color gets visible below them.

Layout

The base of the slide is the background image. The Focus point was slightly changed to ensure that the content doesn’t overlap the focus of the image, even on the smallest screens. The content is aligned to the bottom of the slide, which leaves enough space for the background image.

Responsive

The default responsive behavior of Showcase slider is that as it downscales, it starts hiding the extra sliders that fit next to the active slide. When the screen gets smaller than the set slide width, the active slide starts downscaling. As a result, on mobile you’ll only see one slide.

Just like at every slider type, you can use the responsive tools Smart Slider has to fine tune the mobile and tablet result. For example, you can use the font resizer to make the texts fit better into the slide.

Related Post: 10 Beautiful Full Width Slider Examples

Related Post: 12 Stunning One Page Examples Which You Should Check

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

With the portfolio categories slider, you can showcase your portfolio in a modern way. Just import this Smart Slider 3 Pro template, change the images, write a short description for your portfolios and use the slideshow on your portfolio page.

This slider was built with the showcase slider type which is a special type of slider. With a showcase slider you can show more slides at the same time as at the carousels, however, in this case you can showcase not just the whole slide even a part of a slide, too. In these kinds of sliders the active slide is in the middle which the visitor will see first and focus on. Clicking on the previous or next slides, you can switch slides, and see the others.

Layers

You can see the same layers on every slide: a heading layer which can be the title of your portfolio, a text layer, which can be a short description, and a CTA button, where you can navigate to your work or open it in a lightbox.

The speciality of the slider is that every slide has different background colors, and every background image is smaller than the size of the slide. What is even more awesome is that if you hover over the button, you can see the same color as the background color is.

Animations

When you switch to the next or previous slides, you can see that the white box comes in. The row has an incoming layer animation, which attracts the eye and calls the visitors attention and makes your page more powerful. This animation is on the row, it rotates the box a bit, and fades in.

Layout

At the background images we have used the center fill mode which puts the background image in the center with its original size by default. If you resize the window it won’t change its size based on the screen’s width so it will be cropped on small screens and it will show the image on its focus point. You can change that focus point if you need to. In this template the Y focus point is 50% so the slider is vertically in the middle and the X focus point is 85%, which means that the slider is aligned in the right side. In this template we have worked with 800×540px images, so you can reach the best result, if you work with the same image ratio.

Responsive

The slider is fully responsive and looks good on mobile and tablet as well. In mobile we have used paddings, and with that you can see a part of the background image, also you can see the white box and the content on it.

Related Post: 10 Beautiful Full Width Slider Examples

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

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

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.

Related Post: How to Create Beautiful WordPress Landing Pages That Convert

Related Post: Everything You Need to Know about the Parallax Effect

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