header-bg
Shaping future of green energy

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus magna fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Slide
Wind Turbine

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus.

Biomass and Biofuels

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus.

Home Battery Storage

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus.

Home Charging

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus.

Geothermal Energy

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus.

Solar Panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit ut aliquam, purus sit amet luctus venenatis, lectus.

invest-bg
We Invest In The Future of Energy! Like what you see?

Save Money By Solar Panels

Lorem ipsum dolor sit amet, adipiscing elit ut aliquam, purus sit amet luctus.

Slide
Latest Content
News and Case Studies

Amet, euismod nec eget vestibulum, malesuada augue et donec diam dolor arcu vivamus justo, sed vulputate ut nisi, consequat pharetra eu nec malesuada consectetur scelerisque in neque senectus etiam diam tristique.

Energy, Research

Looking inside Wind Turbine

Electric Car, Tech

Affordable Options For Level 2 Charging Your Electric Car

Solar Energy, Research

It's too bad that the solar panel project hasn't gone further
Latest Projects
New Era for Energy

Amet, euismod nec eget vestibulum, malesuada augue et donec diam dolor arcu vivamus justo, sed vulputate ut nisi, consequat pharetra eu nec malesuada consectetur scelerisque in neque senectus etiam diam tristique eget hac vel ipsum aenean tortor ipsum volutpat vitae

Slide
Slide
Slide

Green Energy

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

Description: Do you need a cool landing page with modern blocks and a trendy slider? Look no further, the Green Energy template has everything you've been looking for!

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

Minimum version: 3.5.1.4

Tags:

Slider Settings

The Green Energy template is a slider group. What makes slider groups special is that they can contain any number of sliders and blocks. They’re like folders, that let you export and publish a group of sliders together. Additionally, they help organizing your sliders in your Dashboard.

In this template you can find 4 blocks and 1 slider. If you’re wondering what’s the difference between a slider and a block, here’s a simple explanation. Blocks are special kind of sliders, that can only display one slide. This lets you take advantage of Smart Slider’s cool features on your website, without having to create an actual slider.

All sliders and blocks are full width in the Green Energy template. Full width sliders are popular, because they fill the browser horizontally. There’s another thing worth mentioning about the first block. It has a slide background video. Background videos, just like background images, are design elements that let you fill the whole slide area with your content.

Layers

Usually there are many sliders and blocks in a slider group. As a result, there are many different layers inside them as well. Of course, this template is no different. However, you can find the most popular layers, the heading, text, image and button layers here.

Animations

There are many layer animations in this template. Almost all blocks have some kind of special effect on some of their layers. For example, the menu on the first block appears with an incoming layer animation. Similarly, the text blocks in the Services section use a layer animation to appear.

Apart from the layer animations, there’s a lightbox in the first block. It opens up a video from YouTube when you click on the play icon.

Layout

The Green Energy template has many interesting layout solutions. Let’s highlight the two most interesting and see how they were built!

You can find the first interesting layout on the Invest block. It’s the green box that’s aligned to the bottom of the block. The base of the slider is a two column row, and this box (which is actually another row) is placed in the right column. The vertical align on the Column is set to bottom, and the row has a maximum width. This prevents it from filling the column horizontally.

Bottom vertical align

The other interesting layout that worth mentioning is the bottom slider. It’s navigation and textual content is on a Static Overlay. However, the images are on regular slides. Both the Static Overlay and the other slides have a three column row as their base. However, on the Static Overlay the first column, which has the content, is wider than the other two columns. This creates the kind of overlapping effect.

Special layout setup using the Static Overlay on the Projects slider

Responsive

Smart Slider offers many tools to create perfect looking sliders for mobile devices. Some tools, such as wrapping a row’s columns into new lines take effect automatically, although you can change it back if you need the columns to be next to one another. This behavior was quite useful in the Services block, which allowed the two columns to display below each other in the main layout. Also, the inner row, which contains the image and texts also wraps to more lines automatically.

But there are other options which you can adjust manually, such as the font size or the alignment. For example, on the first block the layers are aligned to the left on desktop, but they’re aligned to center on mobile.

Left alignment on desktop (left) and center alignment on mobile (right)

Core Web Vitals

PageSpeed Insights with Lighthouse analyzed this page on March 23, 2022. For the latest result analyze now!

100

Desktop

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

Mobile

First Contentful Paint
1.1 s
Speed Index
1.9 s
Largest Contentful Paint
3.2 s
Time to Interactive
2 s
Total Blocking Time
50 ms
Cumulative Layout Shift
0

Related Documentation: Slider Group

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


Similar Sliders -

BloggerBakeryGreek RestaurantSteak Bistro