Cook
What do you want to cook?
Quick Recipes & Easy Meal Ideas! Let’s Find a Good Recipe!

Recipes Block

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

Description: Find the secrets! Do you have a million unique content? Use the search area as navigation!

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

Minimum version: 3.5.0.0

Tags:

Settings

The Recipes Block is a block type slider, so it has only one slide without any controls. It can be a great hero header on your page, but you can use it as a section, too. The block is full width, so it fills the 100% width of the screen.

Block type slider

Layers

The block has more layers: there is an image layer on the top, then 2 headings and an input layer. Below the input layer you can see a row with 4 columns, and each column contains a button layer.

You can use the input layer to create a fancy HTML input, where people can write what you need. It can be used to allow search on your site or subscribe to your newsletter. You will need some coding knowledge though to handle this information.

Settings of the input

Animations

When you refresh the page, you can see the layer animations. There are special layer animations on the layers which are eye-catching, and cheers up your page. These animations stay from more steps. You can harmonize the animations in the timeline, where you can see all of the animations in the slider.

The layer animations are in the timeline

Layout

This demo block has a simple layout: the image, headings and input layers are under each other, and then a row comes with 4 columns. You can see a button layer in each column. You can put a link on these buttons which you can navigate to another pages or you can use them as an anchor.

Row settings

Responsive

This Recipes block looks good on every device. The row has a wrap after value on mobile, so after 2 columns the row wraps, so 2 columns are in a row. With that the buttons have enough space, and the visitor can click on them.

Core Web Vitals

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

100

Desktop

First Contentful Paint
0.3 s
Speed Index
0.3 s
Largest Contentful Paint
0.8 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.036
97

Mobile

First Contentful Paint
0.9 s
Speed Index
1.4 s
Largest Contentful Paint
2.6 s
Time to Interactive
0.9 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.002

Related Post: Use Beautiful Layer Animations in Smart Slider 3 Pro

Related Post: 12 Beautiful Full Width Slider Examples


Similar Sliders -

Subscribe