Highlighted heading Sliders — Smart Slider 3 — WordPress Plugin

Full Width Slider

Roland Soos — Thu, 08 Oct 2015 12:03:08 +0000

💡 Best features in this slider

Settings

Using a colorful but simple fullwidth slider makes any website look modern and trendy. This slider stays from 6 slides, 5 simple and 1 static slide. The static slide is over the other slides, and there are the colored images which are moving if you hover over them.

Layers

The content of the fullwidth slider follows a minimalistic approach. For instance, the first slide has just three layers: a highlighted heading, a text and a button layer. This button layer serves as an easy to notice CTA. Clicking on it makes a few more layers show up, which serve as in-slider navigation.

Apart from using the Next service button on each slide, you can navigate via the arrows, which you can find at the bottom right corner of the fullwidth slider. To make the slider touch friendly, you can switch slides by swiping on mobile devices and dragging on desktop browsers.

Animations

The fullwidth slider example uses small, moving elements to create this colorful effect. These small icons rotate by themselves, but hovering on the slide activates yet another movement. This movement is happening because of the layer parallax effect, giving a really nice touch to this slider.

Layout

The first slide has the most interesting layout, there is a 1 row 2 columns structure. In the left column are the headings and the button layer. On the right side of the slide you can see 2 rows under each other which are only visible if you click on the CTA on the left.

Responsive

When you check the slider on smaller devices like on your mobile, you will notice that the columns wrap under each other, and there are layers which aren’t visible. These layers are hidden on mobile, so your slider won’t be too tall.

Related Post: 10 Beautiful Full Width Slider Examples

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

Full Page Portfolio

Daniel David — Thu, 04 Jun 2020 08:22:49 +0000

💡 Best features in this slider

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.

Full Page layout in Smart Slider Pro

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.

Highlighted Heading layer and its settings

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.

Layer animations in Smart Slider’s Timeline

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.

Nested Absolute layers in the Layer list

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.

Renovation

Ramona Nemeth-Csoka — Fri, 01 Jul 2022 13:01:29 +0000

💡 Best features in this slider

Slider Settings

The Renovation template is a simple slider that takes up the full width of the browser. Such sliders are popular in modern web design, because they look great on any screen. What’s also cool about this template that all of its slides use different color scheme. As a result, it’s a colorful addition to any modern sites.

One of the most interesting features of this slider is that if its top is not visible during slide switching, the slider scrolls to it. This way if your smaller screen users check out the full slide, they’ll be at the top of the next one after they switched forward. Small features like this can create a super cool experience for visitors. How to achieve this scroll to top behavior? Change the value of the Scroll to Slider option to Top – When needed.

Scroll to Slider configuration

Layers

You can find the most common layers on the Renovation slider. There are headings, texts and images to display content. You can also find a special layer on each slide, the Highlighted heading. It’s a great way to make some content stand out, and this template uses it to highlight the keyword on each slide.

There’s also a custom navigation on each slides using Link Actions on the columns of a row. This navigation is not only looks great, but it’s very convenient as well. Also, there are bullets available for navigation.

Link Action on the first slide’s column

Animations

Smart Slider has many amazing animations and effects. To make the Renovation template more interesting, we added the layer parallax effect to some of the layers. So when you move the mouse over the slide, some layers make a subtle movement. As a result, the slider look more interesting.

At the bottom of the slider you can find a cool looking Shape Divider. It uses one of the new shapes, Paper 4.

Shape Divider settings at Animations tab

Layout

The base of all slides is a two column row. By default when you add a row, it has two columns, each having 50% width. However, you can adjust the width of the columns to make their sizes fit better for what you’re creating. On this template we split the columns 41-59%, so the right column is slightly wider than the left.

Custom column width

Another interesting thing is that we used Absolute positioned layers to decorate the slider. Absolute positioned layers are floating on the slide, without taking any actual space which means you can place them anywhere. This makes them perfect for creating decorative stuff on the slide.

Responsive

Smart Slider is a responsive slider with many tools to help you make your slider look perfect on any device. You can adjust font sizes to make the texts fit better into small screens. Additionally, you can break a row’s columns into separate lines to make more room for the content. Alternatively, you can also hide layers to make the content fit better for small screens.

Related Post: 10 Beautiful Full Width Slider Examples

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

Hero Slider

Daniel David — Tue, 15 May 2018 09:59:54 +0000

💡 Best features in this slider

Settings

A hero slider extends the idea of a hero image, allowing you to present multiple hero images and videos in sequence, using captions, transitions, and animation.

Hero headers are among some of the best and most visually appealing trends in web design in recent years, but paired with sliders, they have even more visual punch. When done correctly, hero sliders deliver context and clarity, helping visitors quickly understand what your site is about and what you have to offer. A great hero slider needs great design, and thanks to solutions like Smart Slider 3, anyone can create a beautiful slider with little effort, using features like drag-and-drop, animations, transitions, buttons, and more.

This hero is a full width slider, so fills the 100% width of your page. It’s not an average slider when you check it, because it is a vertical slider, so you can switch slides with vertical dragging, or with the bullets control on the right.

Layers

The hero slider stays from 5 different slides. You can see a highlighted heading layer, simple heading layers, buttons, images and text layer on the slides. Text layers are specials because you can use your own code inside the layer, so you can add a different style for the texts. In this example there are headings where a part of the text is bold. But you can replace these layers with highlighted heading where you disable the highlight. At highlighted heading you can add different styles for the main text, the highlighted text and the hovered text.

Animations

Each layer has a good looking incoming layer animation. When you switch a slide, you can see the layers are coming in after each other. The first slide is special because there is a highlighted heading used where the highlight also has a nice underline effect, and the button layer has a loop which calls the visitors attention to click.

Layout

The 5 slides have different layout and structure, but you can see a curved white shape below the slider. This is the shape divider effect, which you can fully customize, you can change its color, make it smaller, but you can disable it if you don’t like it.

Responsive

There are layers which aren’t visible on smaller screens. With hiding a layer you can save space on your slider. In Smart Slider your slide’s height is based on the layers and all the slides’ height are based on your highest slide. So if you have a tall slide on mobile, then your whole slider will be taller. To avoid this you can hide layers on different devices.

Related Post: 10 Beautiful Full Width Slider Examples

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

Coming Soon

Ramona Nemeth-Csoka — Wed, 10 Nov 2021 08:27:45 +0000

💡 Best features in this slider

Highlighted heading layer
Heading layer in Absolute position
Countdown layer

Slider Settings

The Coming Soon template is a full width block. Full width elements are popular nowadays, because they cover the browser horizontally. Such sections look stunning on today’s wide monitors, which makes designers and clients love them.

The Block is a special slider type in Smart Slider. A Block is not an actual slider, it can’t slide, because it displays one slide only. What is it good for, then?? A Block allows you to use the power of Smart Slider and create gorgeous and responsive sections for your site.

Layers

The Coming Soon template is full of interesting layers. There are some standard layers, like the heading and text layer. Also, there’s a CTA button that urges visitors to take action. On the left there’s an image layer to give a nice visual.

One of the most special layers on this template is the highlighted heading layer. It lets you create a headline, and highlight some words on it. In this case, there’s one highlighted word, because that’s the most important part of the message. THe highlight is a nice circle shape.

The other special layer is the Countdown layer. It lets you count down to any date you choose and get your visitors excited for your event.

Animations

There are no layer animations on this template. The only movement you can spot is the way the highlight circles the text of the Highlighted heading layer. Also, there’s a movement as countdown counts down to the website’s start.

Layout

The base of the slider is a stretched row. This row contains the textual layers in the middle and the image as well. Stretching the row makes it fill all available space. As a result, it pushes the countdown layer to the bottom of the slider.

The other interesting layout is the Absolute positioned heading behind the countdown layer. Absolute positioned layers are great for decorational purposes. To select this Absolute positioned layer for editing, use the Layer list.

Open the Layer List to find the Coming Soon layer

Responsive

Smart Slider is a responsive slider, and has many cool tools to ensure the best small screen display. On this template we made many responsive adjustments. For example, we changed the column order. By default when the columns of a row wrap into new lines on a small screen, they wrap in a left-to-right order. As a result, the column on the most left will be on top, and the column on the most right will be at the bottom. By changing the column order we could place the image on top instead of bottom.

Original mobile result (left), optimized mobile result (right)

The other mobile specific changes include reducing the text size using the Font resizer. Also, at the countdown layer we set a custom column count. As a result, the countdown appears in a 2×2 grid as opposed to listing all 4 elements next to each other.

Related Post: Introducing Countdown Layer

Related Video: Responsive Settings

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

Organic Food

Daniel David — Fri, 15 Jan 2021 14:54:13 +0000

💡 Best features in this slider

Settings

The most common sliders you can see on websites display a single slide at a time. The Organic Food slider is similar to these popular sliders. In Smart Slider, we call these traditional sliders Simple type sliders. They display a single slide, which can fill its container, the full width of the page, or the full width and height of it. This Organic Food template takes up the full width of the page. Full width sliders give plenty of space to display content. As a result, they help showcasing gorgeous images.

The slider doesn’t have arrows for navigation, but it has thumbnail images. They’re located at the bottom of the slider. What makes them looks special is that they look like half of them is on the slider, and half of them below. This happens, because of the size and position of the thumbnails.

Thumbnail control settings of the Organic Food slider

Layers

The most special layer on this slider is a Highlighted heading layer. This layer draws a special shape around the highlighted text, which helps drawing attention to it.

The white layer on the left is a row, which has 500px maximum width. This limits the space the row can take up, which allows seeing bigger part of the slide background image.

Animations

There are three cool animations on the slider. First, the most noticeable animation is the Ken Burns effect. The Ken Burns effect is a zooming and panning effect, which came to the web from video editing. In this slider, the effect slowly scales down the images. In fact, web designers love using the Ken Burns effect because it’s subtle yet elegant. So, it helps making the images stand out.

The second animation is a Main animation. The Main animation is the effect, that can affect both layers and slide backgrounds. At this slider the Main animation is a simple fading animation. It fades out the background images, and also the layers. Since the layers have an incoming animation, the Main animation doesn’t fade them in. Instead, the layer’s incoming animation makes the layers appear on the slide.

The last effect on the Organic Food slider is the most fun one. It’s the layer parallax effect, which makes them react to the mouse movement. As a result, when the cursor moves to one direction, the layers move to the opposite direction.

Layout

The Organic Food slider uses both Default positioned and Absolute positioned layers. Default positioned layers are great to build content. They let you create a good looking, responsive slider super fast. In fact, Default positioned layers generally need little to no responsive adjustments. They’re marked with a blue color on the canvas.

Default (blue) and Absolute (purple) positioned layers

Absolute positioned layers, on the other hand, are great for creating decorative elements. Although their responsive behavior isn’t as great as Default layers’, you can place them anywhere on your slider. On the canvas they’re marked with a purple color.

Responsive

Like any slider you’ll create with Smart Slider 3, the Organic Food slider is responsive, too. This means that the slider is enjoyable even on the smallest screens. To help with this, we hid the Absolute positioned layers on mobile devices. As a result, they won’t cover the content.

The text sizes have been reduced, too, to make the highlighted heading fit better to the mobile screen. We also adjusted the padding on the Content layer, to make the slides look less crowded.

Default mobile look (left) and optimized mobile look (right)

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

Podcast Block

Daniel David — Thu, 02 May 2019 07:55:41 +0000

💡 Best features in this slider

Ken Burns effect on the Slide background
Highlighted heading layer
CTA button
Image layer
Audio layer
Particle effect above the Slide background
Image box layers
Icon layers

Settings

The Podcast Block is a full width section you can enrich your site with. Blocks in Smart Slider are special sliders. They’re not exactly sliders, as they can only display one slide. So, why should you use a block on your site?

The block type allows you to use Smart Slider’s powerful features on your site, without having to create an actual slider, with more slides. You can enrich your site with our 24 layers, or use effects like Ken Burns, Particle or Parallax. Additionally, blocks load super fast! It’s not like the speed would be a problem if you use Smart Slider 3, as it’s one of the fastest sliders.

Layers

The Podcast Block is full of interesting layers. The most special looking is the Highlighted heading layer. The Highlighted heading layer is perfect to make a text stand out. That’s why we used it on the main headline, which has a double underline at its “Episode 9” text.

The other interesting layer is the audio layer on the right side. It lets you add an mp3 sound to your slider what your visitors can listen.

The third layer that’s worth mentioning is the Image box layer. It creates the content under the “Follow your hosts” headline. The image box layer has three parts: an image, a heading and an optional description.

Other than these layers, you can find rows and columns, images, icons, headings and a text layer. There’s also a button layer what you can use to call your visitors to take action.

Animations

There are two animation effects on the Podcast Block which help you amaze your visitors. First, the Ken Burns effect that creates the zooming effect on the image. It’s a very simple effect, but it makes your block look interesting and helps getting your visitor’s attention.

The other effect is something you won’t spot too easily. It’s called Particle effect, and it creates small, moving particles behind the layers. These particles interact with each other and the mouse as they’re moving. When they get close, a line appears and connects the dots. When you move the mouse around, the cursor pushes the particles away.

Layout

The base of the Podcast Block’s layout is a two column row. This holds the main content: the episode details on the left, and the audio on the right. This row is stretched which makes it fill the available space, and pushes the second row to the bottom.

Difference between Vertical align: bottom (left) and Stretched row (right)

The bottom row row has three columns, and there’s another three column row in its middle and right column. On the right side you can see two layers creating an interesting layout. It’s the image and audio layer, that make it look like they’re the same element.

Responsive

Smart Slider is a responsive slider, but still offers many options to create the look you want for small screens. Also, there are lots of automatic options you don’t need to bother with. For example, if you have a row with at least two columns then it automatically breaks each column into a new line on mobile. This is why the columns in the big row are below each other.

Also, to make the slider look better we adjusted the order of the columns. It’s a very simple drag’n’drop process you can start from the layer window of the row.

We also reduced the text sizes to make the content fit better into mobile views. The Font resizer what you can use for this is available for tablet and mobile views.

Default mobile view (left) and optimized view (right)

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

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

Cooking Slider

Ramona Nemeth-Csoka — Wed, 12 Sep 2018 11:40:41 +0000

💡 Best features in this slider

Settings

The Cooking sample is a fresh and modern slider for your food blog. This is a full width slider, so it fills the available horizontal width, so can be a great hero header.

Instead of using the standard arrows, we created a nice looking navigation box. The box contains an image, a title and a description with a nice looking next arrow. If you click on it, you can switch to the next slide with a link action. Also, you can switch slides with the bullet control on the bottom or with a simple mouse drag.

Layers

You can meet with a lot of interesting layers in this slider. The most noticeable layer is the highlighted heading. This highlight is different on each slide, but always calls the visitors attention. The most used layer is the image box in this slider. We have used it 5 times with the left layout, so the image is on the left, and the text is on the right side. The first image box contains a link, and if you click on it, a video opens in a lightbox. The last one also has a link, it uses a link action, and navigates the visitor to the next slide.

Animations

The slider features the highlighted heading layer which you can use to center your visitors attention. It highlights your heading with a nice animation. After this the animation box comes in with a layer animation. If you click on it, you can switch to the next slide. When you switch slides you can see the new slice background animation, giving a nice touch to the slider.

Layout

The slider has a special structure, the layers are in rows and columns. With using rows you can put layers next to each other. The Content layer has a maximum width, so the whole content will be in the left side of the slider.

Responsive

If you check the slider on mobile, you can see there are layers which aren’t visible. They are hidden and with that you can save space, and your slider won’t be too tall.

Related Post: 10 Beautiful Full Width Slider Examples

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

Rotating Slider

Daniel David — Tue, 15 May 2018 09:36:43 +0000

💡 Best features in this slider

Highlighted heading layer
CTA button
Image layer in absolute position
Animated shape divider
Arrow control

Settings

A banner is one the most important parts of your site. This is the slider the visitor sees first when they arrive on your site. So it’s crucial to have a well-thought banner with quality images and content. And, of course, it’s important to let the users know there’s more content for them to see. One of the best tools for this is creating an automated rotating banner. This way you can replace the slider’s content and images alike automatically. Of course, this should happen after the visitor had enough time to learn what’s the slide about.

It’s critical to leave enough time for the visitor to read the content of each banner. Otherwise, they’ll get frustrated. Frustrated users might leave your site instantly without having a second thought. Providing a way to navigate back and forth between the banner slides are just as vital. This allows people to navigate through your slides and find the one that interests them the most.

Autoplay settings

This slider rotates automatically after 8 seconds. This leaves enough time for visitors to read the texts and helps them know there’s more to see. There are stylish arrows at their disposal to speed up the slide rotating process. And just above every slide’s heading there are small images which serve the same navigational purpose.

Layers

This slider contains image layers, a highlighted heading, a text layer and a button layer. When you create an automated rotating slider, you should always use quality content. This includes short, attention raising texts and good images. The colors are also important to get the visitor’s attention. For instance, if you have a CTA be sure that it’s easy to notice. Use different colors and greater font size or even another font family. Basically, do everything to make your CTA stand out but keep the nice and clean look of the banner.

Settings of the Highlighted Heading

Regarding the texts: make sure they have good legibility. Use font colors that have high contrast with the background and choose a font family that’s easy to read. When you create an automated rotating slider, avoid using lots of texts. People won’t have time to read them, and constantly having to go back is frustrating. Write short and clear text and rather offer a read more button if needed. This allows the visitors to learn more and lets you keep a nice and clean banner.

Animations

You can see more kinds of animations on this slider. The first, you will notice is the animation on the layers. The 2 main columns of the slider have a layer animation, the left side goes to the bottom, the right side to the top. Besides that, you can see a continuous animation in the background, the 2 colors animated shape divider. You can customize the shapes at the Animations tab of the Slider settings.

Shape divider manager

Layout

Once you have your beautiful images and the perfect title it’s time to create the actual slider. To create the automated rotating banner example on the top of this page, we mixed Smart Slider 3’s two positioning options, default and absolute. Absolute positioning works like PhotoShop, you can drag your layers anywhere on the canvas. Default positioning builds your content using structures. It allows you to create a slider which has great responsive behavior. And the best part is, you won’t have to spend hours to achieve that. The good result is instant.

Layers in the Default position (marked with blue) and image layer in Absolute position (purple color)

On this slider you can find all content at the back of the slide. That’s right, the texts on the left and the image on the right are both in default position. This lets the texts keep their legibility on small screens, which is always good. You can also manage your layout faster and better. There’s only one layer in absolute position, the one on the front showing a different person on each slide.

Responsive

When you check the slider in tablet or mobile, you can see that the image in the absolute position is hidden. With hiding this layer we have enough space on mobile, and the visitor can focus on the content of the slider.

Related Post: 10 Beautiful Full Width Slider Examples

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

Static Text Slider

Daniel David — Tue, 25 Sep 2018 10:56:38 +0000

Settings

The Static Text Slider introduces a new approach for creating beautiful sliders. It places the textual content on a static overlay and displays nice images behind the text.

In the background of the slider you can see several beautiful images. These are simple image slides with no other content but their background image. Then the slider autoplay changes these slides automatically. There’s also a lightbox where you can display nice videos or other images.

Layers

Using the Highlighted Heading layer you can create a headline that catches the user’s attention. Once they focus on the slider you can help them do important actions: read your posts, book hotels and view more. On the bottom of the static slide, you can find 4 image boxes. With image boxes you can display images with text. The last image box has a lightbox on it, which you can open an image, video or an iframe.

Animations

When you check the slider, the first you will notice the content comes in from the bottom. This is a layer animation that you can fully customize in the layer window. Then the animation of the highlighted heading will start, which calls the visitors attention. You can use the timeline to see the animations visually, and here you can set the duration and delays as well.

Layout

The slider has a simple layout: there are images in the background, where the slider autoplay is enabled, and there is a static overlay over these images. This can make a great visual effect, and the visitors can focus on the content of the static slide.

Responsive

The static text slider is fully responsive. In mobile the row wraps after 1 column, so the content has enough space. You can set the wrap after value at the settings of the row.

Related Post: 10 Beautiful Full Width Slider Examples

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