If you have a company it is useful to have your own website on which you can give information to your visitors and your business can also be easily found. The bakery page example is a great demo that you can use on your one page website. This landing page consists of 5 sliders which you can fully customize to your needs.

The bakery slider group starts with a navigation on the top. Here you can see a logo image, the menu, and 2 small icons on each side. With the menu, you can navigate to other sliders using the ScrolltoAlias action. In the group, each slider has an alias, which can be useful at the navigation.

The next slider is a simple full width slider with 3 slides. The slider switches their slides automatically with the slider autoplay. Small but important settings are the arrows and the bullets. In this slider, the text type arrow and the number type bullet are used which give a special navigation effect for the slider.

Layers

The first slider is a good example of how you can use the default and absolute positioning together. The textual layers are in default position in a 1-row 2-cols structure, and the images are in absolute position.

The image layers are in absolute position where you can position your layers anywhere in the canvas, and you can put a layer above or below to others.

Animations

When you scroll on the page you will notice that almost each slider uses animation. My favourite is the Bakery slider on the top, where the first col has an incoming animation, and there is a CTA which calls the users’ attention. The second col has 2 heading layers and they have a text animation which gives a nice visual effect.

The image layers come in with a nice layer animation, too, so when the visitor sees the page first, they can read the text below them, then the images come in.

The about block is simple but spectacular because of the parallax effect. Thanks for the fixed slider background you can make a great visual effect on this slider block. You can set the background image to fixed at the Slider settings.

Layout

Each slider uses a different layout, but the most interesting is the Specials block. This block uses a grid layout, which consists of 2 rows. In the first row there are 3 columns and in the second row there are 2 cols.

The first row is special because in the second column another row with 2 cols is used. At this row we have used the wrap after value, so after 1 column the second begins in a new line.

The grid where the textual layers are has a column background color which can change on hover to the color of the slide background giving a special effect to the visitor.

Responsive

The Bakery page is fully responsive, and looks good on tablet and mobile devices. We have used the Text scale at each device which we made the text smaller, and there are sliders where layers are hidden in small devices.

Related Post: How to Create a Cool Text Animation

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

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

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

In Smart Slider you can create nice looking sliders and simple blocks. These blocks offer all the layers you have at a slider, but they show only one slide. Therefore, they’re perfect tools to create a landing page, as you can build them in a visual editor. This Blogger template features both stunning blocks and amazing sliders. The sliders are in a group, so you can publish them together. Also, you can customize all of the sliders and layers in this one page example.

Layers

This group has more sliders and layers on it. You can meet with heading layers, texts, images, and buttons. The first and last slider have headings with links on them. These layers use link actions, and if you click on them you can navigate to specific sliders.

Animations

When you check this landing page, you may noticed the layers are coming in with nice layer animations. With using animations you can cheer up your page, and call the visitors attention. The Categories slider is special, where you can meet with the layer parallax effect. If you scroll up or down, the layers are moving. You can customize this kind of animation in the Animations tab of the Slider settings, and you can add different values to the layers in the Style tab of the Layer window.

Layout

This slider group contains slider blocks and also has a showcase type slider. With the showcase slider type you can display more slides next to each other, and if you have enough slides, you can make a continuous circle. This can be a great way to showcase your posts or products, also you can create a testimonial slider.

Responsive

The Blogger landing page is fully responsive. The texts are smaller on tablet and mobile, and they have enough space. The images also look good, and you can easily navigate between the sliders and blocks with touch.

Related Post: Create A Responsive Thumbnail Slider

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

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

The Museum landing page stays from only sliders and blocks. With Smart Slider you can create whole pages like this example. The top slider is a menu which you can navigate to specific sliders. If you publish this slider group then the sliders and blocks will be under each other. You can add more slider to this group, also you can delete one if you don’t like it. Also, you can fully customize all of the sliders, and layers.

Layers

The landing page uses more kinds of layers. You can meet with headings, images, texts, and buttons. You can meet with different link actions in this group. The page starts with a menu, and there is a link action in each heading, so you can scroll to specific sliders. The last slider is a testimonial slider, here the arrows are images, and also use actions, which you can navigate to the next or previous slides.

Animations

You can see more kinds of animations in this slider. The layers are coming in with a nice-looking layer animation. The second slider in this group has an extra movement on their slide background images, there is a Ken Burns effect on them. You can customize the Ken Burns effect on each slide in the Layer window, or you can delete them, and use the same effect on each slide. For that you can enable the Ken Burns in the Animations tab of the Slider settings.

Layout

The Visit block has the most special layout in this one page example. Here you can see a row with 2 columns. The first column contains a heading layer and 3 text layers. The right column has 3 image layers. These layers are in absolute position. You can use this positioning if you want to put layers above or below each other, and use them as a design element.

Responsive

The Museum landing page is fully responsive. The texts and images are smaller in tablet and mobile, and the rows wrap. With that the whole page looks good on every device.

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

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

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