Slide
Real Clients.
Real Results.
No starvation crash diets
No confusing information overload
No giving up carbs
No long boring hour long cardio
No confusing workouts
No More Diet
Download my free ebook now.
John Reacher - 46 years old
94 kg
94 kg
82 kg
82 kg

Diet Block

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

Description: The Diet Block is a modern looking section for your site where you can promote your product or service by showing how effective it is.

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

Minimum version: 3.5.1.1

Tags:

Slider Settings

The Diet Block template is a full width block. Full width elements are kind of elements, that fill the browser horizontally, but not vertically. While filling the browser horizontally gives plenty of space to display content, it’s recommended to keep the content narrow. The reason behind this is that it’s much harder to read wide content on monitors because the eye needs to move a lot more, which is tiring and uncomfortable. Make sure you always use the Limit Slide Width option to ensure your content doesn’t get too wide.

Limit Slide Width option

Blocks are special kind of sliders. In fact, they’re not actual sliders, because they can’t slide. As a matter of fact, blocks can only display one slide. They’re good to create sections on your site where you can take advantage of Smart Slider’s amazing features.

The single slide of the Diet Block tempalte has a gradient slide background. A greenish color starts at the bottom left corner and changes into a peachy color in the top right corner.

Gradient slide background

Layers

The most important layer in the Diet Block slider is obviously the Before After layer. It’s a cool layer you can use to create a comparison between two images. In this slider we use it to show the before and after photos of the new diet.

Another cool layer is the image box layer which we used to create the checkbox list on the left hand side. It’s a simple layer where you can select an image or icon and write some text that displays next to it.

Image box layer

The other notable layers in the Diet Block template is the heading, text and image layers. Of course, there’s also a CTA button.

Animations

The Diet Block template is full of motion. All layers have their own animation. So they all introduced to the slide with a subtle movement. As a result, the slide looks fantastic when it appears.

Layout

The base of the slide is a two column row. Rows and columns are the building blocks of Smart Slider, as they help you create nice and responsive layouts. In the background of the second column there are 3 Absolute positioned image layers, making the Default positioned Before After layer look more interesting.

Another cool layout you can do with Smart Slider is the book preview at the left. It’s another two column row added into the main row’s left column. When building layouts, b{you can freely add rows into other row’s columns} , which lets you create anything you imagine.

Responsive

Smart Slider is a responsive slider, and it has lots of cool options to fine tune how your slides look in small screens. The option you’ll almost always need is the Text Scale, which allows you to change the size of the font for tablet and mobile. On this block we used it at most layers that contain text.

Another think you’ll probably notice if you check the Diet Block on your phone is that the checkbox list is no longer left aligned but centered. The Inner align on the rows and columns is device specific. This means you can freely change it on any device.

Inner Align on mobile

When you optimize your slider for mobile, we recommend making sure that the slides are not taller than 600px. Browsing a tall slider on phones is uncomfortable, as there’s a good chance the visitor will not be able to see the full content at once. Since this template is a block, which means it will not have more slides but one, it can be larger than that. In fact, the total height of the Diet Block template on mobile is around 1040px.

Core Web Vitals

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

100

Desktop

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

Mobile

First Contentful Paint
1 s
Speed Index
2.6 s
Largest Contentful Paint
1.9 s
Time to Interactive
2.2 s
Total Blocking Time
20 ms
Cumulative Layout Shift
0

Related Post: Introducing Before After Layer

Related Post: How to Create WordPress Call to Action?


Similar Sliders -

Photo CompareProduct CompareRenovation