Ken Burns Sliders — Smart Slider 3 — WordPress Plugin

Top 5 Products

Daniel David — Mon, 09 Sep 2019 10:22:31 +0000

Settings

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.

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

Politician

Ramona Nemeth-Csoka — Wed, 01 Feb 2023 21:00:22 +0000

Slider Settings

The Politician template is a Slider Group. What makes Slider Groups special is that they can contain many sliders, what you can display together using a single WordPress shortcode or block, or Joomla module. The Politician template contains 7 blocks total. Blocks are special kind of sliders, which can only display one slide.

We used the very first block to create a cool menu for the template. It uses the Scroll to Alias link action to make the browser scroll to a slider. This action is super useful as it lets you scroll to any slider within the current by calling the alias you set for them.

Slider Alias

Layers

The Politician template has many blocks, and they use the most basic layers: heading, text, image and button.

Animations

There are many cool animations and effects that bring the Politician template to life. Right on the first block below the menu, there’s a parallax effect. The parallax effect is a popular effect on modern websites, as it gives the illusion of depth to websites. In other words, it makes the background and foreground scroll with a different speed, which makes it look like the section below covers the background. All in all, it’s a pretty spectacular effect.

On the last block you can spot the Ken Burn effect. It’s another trendy effect that slowly zooms on the image, giving it some motion.

The last kind of animation you can see on most of the blocks is the layer animation. Layer animations are super useful to introduce layers to your sliders and blocks with a cool effect.

At the Campaign Issues blocks you can spot something interesting when you hover on the cards. Their box shadow is darker on hover, giving each card an interesting hover effect. Although it’s not really considered an animation, but it’s a nice looking effect that worth mentioning.

Different color for the box shadow on normal (left) and hover (right) state creates nice a hover nice effect

Layout

The most interesting layout in the Politician template is in the Manifesto block. This block has a two column row, that contains a large image on the left, and a couple of text layers on the right side. What makes this layout look special is the smaller images in the left column. They are decoration layers, so were added in Absolute position which let us move them on top of the main content image.

Absolute positioned image layers (marked with purple) on top of the Default positioned image.

Responsive

Smart Slider is a responsive slider plugin for WordPress and Joomla and it offers many tools to fine-tune your sliders. Additionally, some settings are automatically made for you, saving your time and effort in your projects. For example, if you use a row it’s columns automatically break under each other on mobile.

Apart from that, you can also reduce the font size for mobile devices to make your texts more mobile friendly.

You can reduce the text size for mobile using the Font Resizer.

Sometimes you might have layers that you don’t need or just don’t want to show on mobile. Using the Hide on option of Smart Slider, you can easily hide these layers from your small screen visitors.

You can hide layers on mobile, tablet and desktop device.

Related Documentation: Slider Group

Related Post: How to Customize a Slider Template?

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

Wedding

Daniel David — Tue, 09 Apr 2019 09:19:08 +0000

Settings

The wedding page group stays from 6 sliders. The first is an autoplaying slider with a static overlay and navigation. The second and third sliders are blocks, so have only one slide in the slider.

The 4. slider is a showcase type slider. Showcase sliders need a certain amount of slides to create a full carousel. Since this slider has only 3 slides, the last slide can’t appear on the left side of the first one. This creates an interesting effect, which is great for story telling. And the last 2 sliders are also blocks, and have a special layout.

Layers

The wedding slider group stays from basic layers like headings, texts, buttons and images. Since these sliders are together, they should have used the same styling and matching colors to keep the harmony. There are more layers with a link which you can navigate to the next slides thanks for the link actions.

Link action on the button layer

Animations

When you load the wedding page, you can notice a lot of animations on it like layer animations, or the Ken Burns effect. The Ken Burns is a panning and zooming effect, and it is simple, elegant and works on any kind of images.

Layout

The Wedding Gallery slider’s layout looks beautiful and unique. What makes it special is the row with the small images, which break out of their grid and cover a part of the big image on the left. Creating this layout is quite simple.

Create a row with two columns.

Put an image layer on each column and select the image you want to display.
Remove the paddings from the columns and row. (Press and hold the Shift key to adjust the paddings on the opposite sides, too.)
Select the row and add a top margin on it. This slider has 20px top margin.
Give a negative left margin to the row. This slider has -80px left margin.

Responsive

The slider group is fully responsive, and looks good on any device. Showcase sliders have special responsive behavior. You can set a size for the slider itself, and one for the slides inside. Thanks to this, you can control the amount of slides that will show up in your slider. For instance, if you set your slider size to be 1500px wide, you can make 3 500px wide slides appear with 0px slide distance. Being able to specify different slider and slide sizes creates many possibilities for your slider.

In this example, we took advantage of another great feature, the Maximum slider height. This setting prevents the slider from getting taller than the set size. We set it to 700px, the same as the height of the slider, which means as the slider gets wider, more slides will be visible. This setup is close to the best way to set up a showcase type slider.

The post Wedding 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.

Ken Burns

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

Settings

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

Layers

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

Animations

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

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

Layout

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

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

Responsive

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

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

Full Page Hotel

Roland Soos — Mon, 05 Oct 2015 09:13:07 +0000

💡 Best features in this slider

Settings

Full page sliders are popular in web design, they fill the whole screen and catch the visitors’ attention. With Smart Slider 3 Pro you can easily create a full page slider and you can import this sample from the Template Library. After that you can customize it, change the background and the texts, insert another layer or delete a layer so actually you can change everything that you want.

At the bottom of the slider you can see a rectangle shape divider which makes the illusion that the white row at the bottom is outside of the slider. But it isn’t, the shape divider makes you feel that way which can be a useful option.

You can navigate to other slides with a mouse drag or with the actions on the previous and next layers. Besides that, there is the slider autoplay turned on which can be seen because of the autoplay indicator at the top right corner, so without doing anything, the slides will automatically switch, too.

Layers

This slider is a good example of how useful the default positioning and using a structure can be. You can see a lot of different layer types on this slider: heading layer, text layer, button layer – with a nice hover effect, image layer and a counter layer which shows the price with a nice counter animation.

Animations

As you can see the background is moving a bit, this zooming effect is the Ken Burns effect. This effect is simple, elegant and works on any kind of images, but you can customize its speed, strength and the animation as well.

The speciality of this slider is the hover effect with the evens. If you hover over the Next or the Previous layer, another image will appear.

Layout

This slider is a full page slider, so fills the available horizontal and vertical space of your browser. The slider has special structure: there are more rows and columns used, which are bundled. In Smart Slider you can put a row into a column, which you can create cool layouts like this. There are 2 main rows under each other.

The top row contains the textual elements and the 4 boxes, and the bottom row is an informative row with a white background and a nice shadow. The top row is stretched, so it fills the available space on the top, and because of that the bottom row will be on the bottom of the slider with the background of a shape divider.

Responsive

The full page hotel slider is fully responsive and looks good on any device. If you check your slider on mobile, you can notice that the texts are smaller, and the bottom white row is hidden. With hiding a layer we can make the slider smaller on mobile.

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

Minimal Slider with Lightbox

Roland Soos — Mon, 12 Oct 2015 08:37:59 +0000

Settings

When you think of sliders, you think of a section, displaying a piece of content that another content replaces after a given time. That’s because people love displaying autoplaying slideshows on their site. It lets the visitors know the section is a slider, and there are more slides to see.

Of course, the autoplay isn’t the only way to tell users there’s more content waiting for them. You can add navigation options to the slider, such as bullets and arrows. Arrows help browsing slide by slide, while bullets provide quick navigation to any slide. Additionally, bullets indicate the number of slides in the slider.

This template uses the most common type a slider can have. In Smart Slider, we call it Simple type, because it simply displays one slide at a time. The Boxed layout which the slider uses ensures that it always fits into the container you place it.

Layers

Each slide in the Lightbox slider contains three layes. One heading, that displays the caption of the slide, and two buttons. The first button opens a lightbox gallery, while the second points to the next slide in the slider.

Button normal (left) and hover (right) styling settings

Adding a lightbox in Smart Slider is easy. Select the layer where you want to click on to start the lightbox. Go to its Content tab, find the Link and click on the + sign, this will open the popup where you can configure the link options. Go to the Lightbox tab, and select the images you want to show. You can also select MP4 videos, or paste the link of YouTube or Vimeo videos. Additionally, you can display a page in the lightbox by writing its URL there.

Animations

The most obvious animation on the Lightbox slider is the Text animation the heading layer. The Text animation is a special effect, which allows you to introduce your text in an exciting way. You can animate the layer by lines, words or characters. It’s worth noting that the Text animation is only available at the heading layer. There’s also a layer animation that displays the buttons.

The other cook animation the Lightbox slider has is the Ken Burns effect. The Ken Burns effect is a slow zooming and panning effect that enhances the background images. It looks best with the Fade Main Animation, and that’s what this slider has.

Layout

The layout of the slider is quite simple, as it only has three layers. But it two of those layers are next to each other, which can be an interesting layout to create. By default when you add a layer, it can go above, below or between the previously added layers. To be able to place layers next to each other, you can use the Row structure.

First, add a new Row. By default it has three columns, so if you want to put more layers next to each other, make sure you add more columns. Once you have enough column for all your content, simply drag’n’drop the layers to the columns.

Responsive

Smart Slider is a responsive slider, so any content you create will look amazing on any devie you check it on. Despite this great responsive behavior, you’ll find lots of options to fine-tune the result. For example, you can adjust the font size for mobile and tablet. It’s useful to ensure the perfect look for smaller screens.

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

Boxed Particle Slider

Ramona Nemeth-Csoka — Tue, 12 Sep 2017 08:29:22 +0000

Settings

People still use boxed designs, even if full width sliders are much more popular. The best thing about boxed sliders is that they fit nicely into any page or post content. They look like they truly belong there and don’t break the layout either. This Boxed Particle Slider is a great example for a stunning modern boxed slider.

Layers

You can see a one row two columns structure on the static slide. There is an image, a heading, a text, and a button layer on the left side, and an audio player with a cover image on the right side. Creating this layout is incredibly easy. You just need to add a simple image layer, then put an audio layer below it.

The image layer has a handy shortcut on the sidebar. This shortcut makes it easy to add the most popular layers, like the image, heading or button, fast. The audio layer doesn’t have a shortcut, so you’ll need to open the add panel to add it. After adding the layers, the audio and the image layers need a maximum width. This ensures that the image and audio layer have the same size.

Animations

Each slide background image has a Ken Burns effect on it. This effect gives a movement to the images, and combining this with the slider autoplay makes the slider special. Also you can see small particles, which cheers up the slider. You can customize this in the animations tab of the slider settings.

Layout

Static overlays are special slides. They are above all the other slides in the slider. When the normal slides change, the static overlay remains in the same place. This makes them perfect for cases where the content doesn’t need to switch with the slides.

Creating a Static Overlay is incredibly easy. First you should add your new slides to your slider. Then, when you create a new slide, you’ll see a new option appearing at the end of the Add Slide options.

Editing a Static overlay is the same as editing any other slide. The only difference is that you’ll see the next slide’s background behind it. Static Overlays can’t have a background on their own, as that would cover the slides below them.

Responsive

The boxed particle slider is fully responsive, it looks good on tablet and mobile as well. In mobile you can see the row wraps after 1 column. By default, the left column will be on the top, and the right on the bottom. But you can change this order if you drag the green column boxes in the layer window.

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

Full Width Product Slider

Daniel David — Thu, 16 Mar 2017 07:32:58 +0000

Settings

A product slider is the best tool at your disposal to encourage visitors to buy from your store. Most product sliders display many products next to each other. While that approach saves space, it makes one specific product harder to focus on for the visitor. This full-width slider took a different approach than most product sliders. It shows a large product image as background. This raises attention and makes the visitor focus on the product more easily. This slider won’t leave the customer wondering what they should do to shop. There’s a clear, minimal CTA on the slider delivering the clear message: buy now!

The slider switches automatically after spending 10 seconds on each slide. However, when the mouse enters the slider area, the slider autoplay gets paused. This allows the visitor to read the text and enjoy the slide without interruption. The navigation is also an interesting part of the Full-width Product Slider. At the bottom, there are thumbnails with the product images. This is a simple but effective way to encourage visitors to check all slides.

Layers

Each slide contains the same layers. There is a row with a column where all of the layers are. The row has a white background color, a small border radius and a nice box shadow. The width of the row is maximum 450px, so the row looks like a white box. There is an image, 2 heading, a text layer, and a button layer in the column.

Animations

The background images have the popular Ken Burns effect on them. This gives a slight movement to the slider. After the slides switch, the layers on the right side appear with a flipping layer animation.

Layout

Once the visitor gets interested in your product, they can learn more about it. There’s a white description box about the item at the right side of the slider. This info box was created using default positioning, which guarantees that the description looks perfect on every device.

Also, you can notice the controls around the slider. You can see an autoplay indicator on the top, arrows on the left and right, and thumbnails on the bottom.

Responsive

Lots of people use their phone for browsing. They expect almost the same user experience as desktop users do. This includes being able to read all content without having to zoom in. Default positioning helps with this, as it keeps the text sizes the same on every device, so they’ll be large enough on mobile.

Related Post: 10 Beautiful Full Width Slider Examples

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

Conference

Daniel David — Thu, 29 Jun 2017 14:04:34 +0000

Settings

People love seeing nice effects and they enjoy attractive designs. They also like interactive sites to quickly get the information they are looking for. We kept this in mind when we designed the Conference landing page. These stunning blocks are great to present your conference or event.

The conference group has 7 sliders. They have a boxed layout, so can be as wide as the container they are in.

Layers

You can meet with different layers in this group. There are heading layers, texts, buttons, images, counter layer, image area layers, and YouTube layers.

The first slider has 2 buttons on their slides. One of them always goes to the next slide, while the other directs the visitor to learn more about the day. The navigation between the slides can also happen with the thumbnails on the right.

The second slider contains the most important information on the conference. It uses the counter layer to grab the visitor’s attention. At the counter layers you can set the value, and the value where the counting will start. Also, you can set pre and post characters which display before or after the given number.

Animations

The home slider contains the most important information about the conference. You can learn the date and venue of the conference. We set the Ken Burns effect on the background images which gives a continuous movement to the image. Also, if you switch slides, you can see a nice looking background animation which cheers up the slider.

Layout

The last big section is a video block, which highlights some of the key videos of the previous year’s event. Their layout is clean and modern, and it’s easy to replace the videos with your own. Each video has a title and description and they are in a row with 3 columns. Each column contains a YouTube layer, a heading and a text. This way the visitor can get more information before watching the videos.

Responsive

The Conference group is fully responsive. The texts are smaller in tablet and mobile, so they have enough space and look good, also they are legible. You can set the font sizes with the text scale option, which is a device specific setting, so you can set different values to different devices.

Related Post: Create A Responsive Thumbnail Slider

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