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

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

Layers

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

Animations

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

Layout

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

Responsive

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

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

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

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

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.

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.

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.

The Merry PiXmas template is a full width slider, that displays one slide. This makes it perfect for a Christmas header or banner for your website.

There is only one slide in the block as Blocks can only contain one slide. So there’s no navigation option enabled. Although, you can change to slider and add more slides and enable arrows and/or bullets to your header if you’d like to.

Layers

The Merry PiXmas template uses two kinds of layers: headings and images. In fact, it’s amazing to see how you can create beautiful layouts with just two layers.

The images look super retro with with their huge pixel display. The text is special, too. It uses a Google Font called “Press Start 2P” which brings back memories from the early days of the web.

Animations

The base of the template is its gorgeous animations. There’s continuous movement. Some images move downwards, some jump up and down. There’s just so much action that it’s a joy to view this block. How did we achieve all these animations? We used Layer Animations. Layer animations are fantastic tools to introduce your layers and to bring action to your slides.

Layout

The base layout of the Merry PiXmas template is a two column row. The left column contains the textual content, while the right column displays the primary image.

Next to these layers, there are several Absolute positioned layers to create the decorative animations.

Responsive

Smart Slider gives you all tools you need to create a beautiful responsive slider. You can adjust the font size using the Font Resizer, without affecting the size on other devices. Additionally, you can hide some layers to make the slide less crowded on mobile.

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

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

Creating a full width header slider is a popular choice amongst website designers nowadays. These elements look great on any device, especially on the popular wide monitors. With Smart Slider you don’t necessarily have to create a sliding element to have a nice full width section on your site. You can actually create a block type project. Blocks are special sliders, which can display one single slide, which never moves.

The main element of the 404 image slider is the slide background image. When you add a new image slide to your slider, it focuses on the middle part of the image. At this template we changed the focus point to the top-middle part of the image, to ensure that the girl’s head stays in the slide area.

Layers

There’s a bunch of interesting layers on this slide. The most obvious one is the Animated heading layer, which is the big text with the white font. This layer is special, because it can rotate word(s) with special animations, saving space on your slide and making it more interesting to watch.

Above the Animated heading layer you can find a common heading. What makes this layer looks special is its large font size, which immediately raises the attention of the visitors. Another special thing with this layer is that it’s font color is semi transparent.

You can find two additional layers on the 404 Image block. One of them is the CTA button, which helps moving back to the home page. The other is the image layer, and there are two of them. They’re used to display the social icons at the bottom of the slide.

Animations

You can find a couple of layer animations on the 404 Image block. They introduce the layers to the slide with a subtle fading and moving effect. This simple animation really fills the block with life and makes it interesting to watch.

Layout

If you’re looking for layout inspiration for your next slider, you’re at the best place. The 404 Image slider some amazing layouting ideas you can try! First, the most obvious one which is the white text covering the yellowish one. This happens because of a negative top margin on the white text, that reduces the distance between the two layers. This small overlap makes the whole block look special!

The other cool idea is the negative left margin on the 404 text. It moves the text to the left, causing it to break the grid of the content. The result speaks for itself: the layer stands out!

To ensure that the social icons always stay at the bottom of the slide, while keeping the content at the middle, we turned on the Stretch option on the row. This setting makes the row fill the height of its parent, and in this case it also pushes the icons down.

Responsive

Smart Slider is a responsive slider solution and it offers many great tools to fine tune how the slider looks on mobile. There are three key responsive options we used at the 404 Image block. First, we removed or reduced the negative margins. As a result the 404 text is aligned with the other layers, and the white text doesn’t cover it too much. Also, the text was resized at both layers. The last responsive change we made was adding a bottom padding to the column where the layers are. This creates a nice white space between the button and social layers.

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

Related Post: Why Do You Need a Good WordPress 404 page?

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

The Dance Festival block is not an actual slider. It uses a special slider type called Block. What makes Blocks different from sliders is that they can display one slide only. So, they can’t actually slide, but they let you use Smart Slider’s amazing features.

The Dance Festival template is full page, which means it fills the screen both vertically and horizontally. This makes it perfect to use as a hero header.

Layers

The most important layer on the Dance Festival template is obviously the countdown layer. The Countdown layer is a new addition to Smart Slider, and it lets you create a countdown to a date you’re looking for. This date can be the start of a festival, the opening of a website or anything else.

Other notable layers are the heading and text layers. They help build the content of the template and describe the purpose of the block. Additionally, there’s a CTA button which urges visitors to buy their ticket to the festival.

Animations

The most obvious movement on the Dance Festival template is actually coming from a video. In Smart Slider Pro you can use an MP4 video as the background of the slider, and we used that at this template. The background video brings life to the slide with its continuous movement, and makes the block look great.

The other animation you can find on the template is the layer animation. It’s added to many layers, which appear with a nice movement.

Layout

The Dance Festival template’s layout is built with rows. There’s a 3 column row at the top and a 1 column row at the bottom. In the middle there’s another 1 column row, which is stretched so it pushes the other two rows to the top and bottom respectively.

Responsive

Smart Slider is a responsive slider for WordPress and Joomla. Thus, it has many options to fine-tune your sliders for small screens. For example, at the layers which contain text you can reduce the font size for small screens.

When you optimize your slider for mobile, we recommend making sure your slider is smaller than 600px. This way it will nicely fit into the smallest mobile screens.

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

Related Post: Introducing Countdown Layer

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

Full width headers are living their heyday on modern websites. It’s no wonder they’re so popular: a section that fills the whole width of the page looks great on large screens. This is especially true for this block.

The Block type is a special slider type of Smart Slider 3. It’s a kind of slider that can only display a single slide. You can use it to create animated sections of your site. In other words, you can take advantage of the power of Smart Slider without having to create an actual slider.

Layers

There are no special layers in the Traveler block. In fact, this block uses the most basic elements: heading, text, image and button layers. All layers have white colored text, that has high contrast with the dark background. There’s a large CTA button, which has a special hover effect. It has a dark background color, and also uses the backdrop-filter to blur the background behind. This CSS code is added to the CSS field of the button’s background.

There are social icons at the bottom of the slider. They’re image layers, but you can easily replace them with the Icon layer. At the top-left corner there’s another image layer, which displays the site’s logo. But these aren’t the only image layers this template has.

If you open up the Layer list, you can find four other image layers in Absolute position. These images serve as the background of the slide.

Animations

There’s a layer parallax effect on the Absolute positioned image layers, which creates that cool looking effect on scroll. To create such an effect, we split the image in three. Then we added each image as an Absolute layer. Finally, we moved the layers on top of each other, and selected the parallax depth.

Layout

The Traveler block’s layout is special. There are two rows creating the main layout. The first one, on the top, is a full width one. The bottom row, on the other hand, has a maximum width set, and it’s also stretched.

What makes Traveler block truly stand out is that it serves both as a hero section and a page header. In the top row there’s space for your site’s logo and navigation.

Responsive

Parallax effect doesn’t always work and look good on tablet and mobile devices. For this reason the three images which create the desktop background are hidden on mobile and tablet. On smaller screens there’s another Absolute positioned image that servers as the background.

Another interesting aspect of the mobile layout is that the menu displays below the logo. This happens because the logo is in the left column of the top row, and the menu is in the right column. Every row has a Wrap after option, which decides how many columns can fit next to each other on small screens. By default on mobile the Wrap after is 1. As a result, every column takes up a new line, which minimizes the time you need to spend with the mobile layout.

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

Settings

This slider is a block type slider, so only has one slide without any controls, it can be a great header on your page. Creating a block with a video background is very easy in Smart Slider. You can put mp4 videos in the background, and if you mute the video and turn on the autoplay, it can be a good design tool to grab your visitors attention. If you want to make the texts readable use a background color as an overlay above the video.

Layers

The slider is created with default positioned layers which work like a page builder and really simple to edit. You can find an image and a heading on the top, and after an animated heading comes. Animated heading is a great way to call the visitors attention. Now 3 text changes after each other. Below the Animated heading you can see an important part of the slider, the button. With buttons you can reach the visitor to click and take an action.

The bottom part of the block is also special, there is a row with a white background and with a nice shadow. The row has 6 columns, and has image layers and counter layers on it.

Animations

The Animated heading layer can rotate different highlighted text with the chosen animation. With this animation you can grab your visitor’s attention, and show your most important message. When the slider loads you can see another animated layer – the counters. With these layers you can show numbers with a nice looking animation.

Layout

On this block you can find a shape divider effect at the bottom of the slider. You can see a simple white “rectangle” divider which gives the impression that the white bar with the Counter layers is above the block.

The block stays from 2 main rows: the first row contains the top part of the slider with the image, heading, animated heading and button. The second row is the white row on the bottom. The first row is stretched which makes it fill the available space, and pushes the second row to the bottom.

Responsive

When you check the slider in mobile, you can notice the content is smaller and the bottom images are hidden. You can use the Text scale to make your text smaller, and it is a device specific setting, so it doesn’t affect other devices. With hiding a layer you can save space. If a slider is too big on mobile, it doesn’t look good, and with hiding a layer you can reduce the height.

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

Related Post: 10 Beautiful Full Width Slider Examples

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

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.

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.

---

Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples

---

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

]]> https://smartslider3.com/orion-block/ Wed, 26 Oct 2022 12:35:54 +0000 https://smartslider3.com/?p=49254 Slider Settings The Orion Block template is a special kind of slider. In fact, it’s not actually a slider, but a block. Blocks are special because they can only display one slide. For this reason they’re perfect for hero headers. Layers The template uses some of the most common layers, such as heading, text and […]

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

]]> Slider Settings

The Orion Block template is a special kind of slider. In fact, it’s not actually a slider, but a block. Blocks are special because they can only display one slide. For this reason they’re perfect for hero headers.

Layers

The template uses some of the most common layers, such as heading, text and button. However, it also has a special layer, the Animated Heading. This layer can replace word(s) within your text, making the experience more interesting.

Animations

The most obvious animation on the template is the Layer animation which introduces the layers. In Smart Slider you can find 3 kinds of layer animations: incoming, loop and outgoing. In this template we only used the incoming layer animation.

Apart from layer animations, the template also has a layer parallax effect. The layer parallax reacts to the mouse movement, moving the layers away fro mthe mouse. Additionally, it’s a 3D effect which is a lot more interesting.

Layout

The layout is rather simple, but it has some interesting aspects. For example, the Content layer has a Max width and its aligned to the left side of the slider. This way the right side stays empty, allowing the image captivate the visitor.

Responsive

Smart Slider is a responsive slider and offers many tools to optimize the mobile result. At this template our favorite tool was the Font resizer which helped us optimize the text size for mobile.

---

Related Documentation: Where to find the Slide Library?

Related Post: Smart Slider 3 – Slide Library

---

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

]]> https://smartslider3.com/particle-slider/ Tue, 29 Aug 2017 13:31:25 +0000 https://smartslider3.com/?p=4141 Settings Full page sliders are the best kind of sliders you can use as a hero header. The slider fills up the 100% width and height of your browser. Also, it is a great example for a stunning hero block. It’s minimal, has great effects and gives some information at the same time. Layers The […]

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

]]> Settings

Full page sliders are the best kind of sliders you can use as a hero header. The slider fills up the 100% width and height of your browser. Also, it is a great example for a stunning hero block. It’s minimal, has great effects and gives some information at the same time.

Layers

The slider contains a heading layer, a text layer, 3 image box layers and an image layer in absolute position. We usually build our sliders in default position. This way they have great responsive behavior, which doesn’t need a lot of changes. However, Smart Slider 3 has another positioning option, the absolute. In our demo sliders, absolute positioning is used only for design purposes. The laptop image on this slider is a simple design element, so it’s in absolute position.

To avoid the laptop image covering the more important layers, we put it below the Content layer. This means you’ll need to open the layer list to be able to select this layer. Once you select the layer, you can move it around or replace its image.

Animations

There are 2 types of animations which you can see at the first time when you check this slider: the moving particles in the background, and the text animation which animates the text by its chars. The particle effect can be customized in the Animations tab of the Slider settings. You can also customize the text animation, for that you need to open the slide, click on the Heading layer, and open the Text animation manager in the Layer window → Content tab.

Layout

Apart from the Particle effect, the most interesting part of this slider is its layout. At the bottom, there are three boxes, and there’s a heading and a text layer at the top-middle section. These two layers not only occupy the area, but they’re in its center.

We put the heading and text layers to a row, which has only one column. This puts the whole content area to the middle of the slide, as you can see it on this picture:

The trick to make the bottom row stick to the bottom of the slider is simple. You need to turn on the Stretch on the top row. This option makes the row, where it was turned on filling the available space. Since the top row gets bigger, it pushes the bottom row down to the bottom of the slider.

Responsive

The text layer and the image layer is hidden on mobile, because they don’t contain important information, and we should care that the content won’t be too much on mobile. Also, you can see that the bottom row wraps after 1 column, so the content of the image boxes are visible, and have enough space.

---

Related Post: What is a Particle Effect and Why Should You Use It?

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

---

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

]]>