SEO
Rank to the top of the search engine
Keyword Research
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula.
On-site Optimization
Phasellus viverra nulla ut metus varius laoreet. Etiam ultricies nisi vel augue.
Competitor Analysis
Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
Main
Maximise your online visibility

Increase organic website traffic and enhance your business presence on social media sites.

Social Marketing

Our skill, your growth

SEO Services

Boost your website's traffic

Social
Make your social presence fruitful

A strong social media presence will help to establish your brand as an industry leader and to attract and convert new clients. Let's dig in!

ENGAGEMENT
0%
FOLLOWERS
0k
SEARCH TRAFFIC
0x
GROWTH RATE
0%

Header Illustration

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

Description: A header illustration can make any website leave a memorable experience. The most common approach to present such graphics is a header illustration.

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

Minimum version: 3.5.0.0

Tags:

Best features of Header Illustration

💡 Best features in this slider
  1. Row with layer event
  2. Image layer with layer parallax
  3. Image layer in absolute position
  4. Shape divider

Settings

The biggest challenge for any web designer is to craft a creative website for their clients. They use various techniques to amaze everyone who visits the website. One of today’s coolest trends uses illustrations. An illustration can make any website leave a memorable experience for the visitor. The most common approach to present such graphics is a header illustration. A header illustration helps grab the visitors’ attention as fast as possible.

When you create a slider and publish it, it will start on the first slide by default. But Smart Slider gives you more control over this, as it lets you change the first slide. This way you can decide which slide you want to start your slideshow on. When we created the Header Illustration slider, we made it start on the second slide, which is in the middle. You can change the first slide if you click on the 3 dots on the top right and click on the “Set as first” option. The star icon marks the starting slide in the slider.

The first slide is marked with a star icon

Layers

The first slide of the illustration header has two large CTA-s, which you can use for navigation. These CTA-s are rows with 2 columns. Also, there’s a layer event connected to each row. When you hover on them a layer animation launches on the right side. This subtle effect gives a nice touch to the header slider.

When you click on the first row it takes you to the last slide of this slider. You can find a bunch of new illustrations and blobs here, and the parallax effect is present as well. What’s pretty cool on this slide is the counters. With the counter layer, you can count from a given number to another. This lets you create, for instance, animated statistics for your illustration slider.

Animations

The cool illustrations are the best parts of this slider. They occupy more than half of the slider, so it’s hard to miss them. The solid illustrations raise the visitors’ attention and give a neat look to the slider. At the right side of the slider, you can see colorful shapes in the background. These are the blobs, which have the mouse parallax effect, and this gives a fun touch to the slider. The shape divider at the bottom is the coolest floor you’ve ever seen in any header.

Layer parallax effect

Layout

In Smart Slider there are two position modes, the default and absolute positioning. With absolute positioning you are able to put down your layers anywhere, but everything just floats, so the layers aren’t affecting each other or the slide. In default positioning layers are taking up space, where other layers can’t go, so layers won’t crawl under each other, also they are making the slide as big as it needs to be, to leave space for all the layers, margins and paddings.

You can find both positioning in this slider. The absolute layers are decorations and are below the defaultly positioned layers. They look good, and have a layer parallax effect on it.

Responsive

When you check the slider on mobile, you can notice the image layers in the background are hidden. With hiding a layer you can save space on smaller views, and the focus can be on the content of the slider.

Core Web Vitals

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

100

Desktop

First Contentful Paint
0.3 s
Speed Index
0.7 s
Largest Contentful Paint
0.6 s
Time to Interactive
0.3 s
Total Blocking Time
0 ms
Cumulative Layout Shift
0.045
98

Mobile

First Contentful Paint
1.1 s
Speed Index
1.8 s
Largest Contentful Paint
2.3 s
Time to Interactive
3 s
Total Blocking Time
170 ms
Cumulative Layout Shift
0

Related Post: Add Beautiful Section for your Website with Shape Dividers

Related Post: Everything You Need to Know about the Parallax Effect


Similar Sliders -

AgencyStatic Text SliderKen BurnsMarketplace Block