Block
19
92
BLACK BEAN
ABOUT
BEANS
SHOP
CAFES
Block
EXPLORE THE COFFEE EXPERIENCE
The Cafe is a pleasant place to have a quick lunch or a relaxing cappuccino.

We roast our coffee locally in small batches to ensure you get the freshest beans around.

We pride ourselves on our helpful, friendly, and talented baristas who strive to make positive experience.

Our vision is that the Coffee has a clear taste profile, presenting as much of the coffees acidity.

Coffee

💻 Settings | 🎓 Layers | 🎉 Animations | 🏗️ Layout | 📱 Responsive | Speed

Description: On this demo page you can find blocks and sliders to create beautiful landing pages. You can import the all sliders as a group with one click.

Premium: Gain access to all slider templates with a single purchase.

Minimum version: 3.5.0.0

Tags:

Settings

The Coffee landing page stays from only sliders and blocks. With Smart Slider you can create a whole page with sliders, and you can put them in a group. If you publish the group, the sliders will be under each other. Also, you can fully customize all of the sliders, you can change the images, texts, delete them, it’s up to you what you want.

Coffee group

Layers

The Coffee block uses basic layers like images, headings, and buttons, and has special layers like the caption layer and the image box layer. The second slider has 3 caption layers. If you hover over the images, a short description will display over the image. You can change the description in the Content tab of the layer window. Also you can change the animation type here, now the Full type is used, but you can set it to fade or simple, also you can set the direction and scale.

Caption layer

Animations

When you check the page, you can notice the reveal animation. This kind of animation animates a single colored box in front of the layers.

The Beans slider is special in this landing page. When you scroll up or down, the bean images will move. This kind of effect is the layer parallax. You can set the direction of the movement in the Animations tab of the Slider settings. Also, you can add different values to the layers in the Style tab of the layer window.

Settings of the layer parallax

Layout

You can meet with different slider types in this group. The landing page starts with a video slider, has simple blocks and sliders, and 2 carousel type slider. With carousel sliders you can display more slides at the same time. There are 2 ways which you can switch these carousels: you can move the whole pane, or you can switch the slides one by one if you enable the Single switch option at the Animations tab of the Slider settings.

Carousel slider type

Responsive

The Coffee one page example is fully responsive. There are layers which are hidden on smaller views, so the visitors can focus on the content. Also, the texts are smaller. To set the font size device specific, you can use the text scale option. The rows in the sliders usually wrap after 1 or 2 columns in smaller views. The first slider has a navigation, this navigation wraps after 2 columns.

Wrap after

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on April 13, 2021. For the latest result analyze now!

99

Desktop

First Contentful Paint
0.3 s
Speed Index
0.4 s
Largest Contentful Paint
0.8 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.088
94

Mobile

First Contentful Paint
1 s
Speed Index
1.3 s
Largest Contentful Paint
3 s
Time to Interactive
2.9 s
Total Blocking Time
30 ms
Cumulative Layout Shift
0.003

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

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


Similar Sliders -

BakeryHealthcareBarberInterior