Black Friday Super Sale! 🔥 Enjoy a jaw-dropping discount of up to 50% OFF on all Smart Slider plans. Hurry, before the offer ends on November 29th!

Buy Now
Exploring planets
01
05
Exploring
Planets

Let me introduce you the marble planets with unique characteristics and features. The first planet has a red marble color, the second planet has a blue marble color, and the third planet has a yellow marble color.

Terra Crimsonia
02
05
Terra
Crimsonia

The Terra Crimsonia has a red marble color. It is a terrestrial planet with a thin atmosphere and a rocky surface. It has vast deserts and towering mountains, and its sky is often filled with bright, fiery colors due to its proximity to a nearby star.

Planeta Cobaltis
03
05
Planeta
Cobaltis

The Planeta Cobaltaris has a blue marble color. It is a gas giant with a thick atmosphere and many swirling storms. Its rings are made up of ice and rock particles, and it has many icy moons that orbit around it. The planet's distinctive blue color is due to the abundance of methane in its atmosphere.

Stella Royaltus
04
05
Stella
Royaltus

The Stella Royaltus has a yellow marble color. It is a water world with a deep ocean covering its entire surface. Its atmosphere is rich in oxygen, and it has a diverse ecosystem of aquatic creatures. The planet's yellow color comes from the reflective properties of the water and the abundance of algae in its oceans.

Endless Horizon
05
05
Endless Horizon

Each planet has its own distinct characteristics that make it fascinating to study and imagine. While these planets are purely imaginary, they remind us of the vast possibilities that exist in the universe and the many mysteries that still await discovery.

Undiscovered Universe

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

Description: Our slider template will take your website to new galaxies! Explore your creativity with our Undiscovered universe template. Engage your audience with stunning visuals and animations of otherworldly wonders and keep them scrolling.

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

Minimum version: 3.5.1.14

Tags:

Slider Settings

Just like any hero image, this slider template fills the entire width and height of the browser like a banner. You can set its layout to be Fullpage at the Slider Settings’ Size tab.

Layout settings in Smart Slider

One of its many benefits is the ability to catch your visitors’ attention within the first few seconds as they are usually placed at the top of the webpage.

By implementing this template you can also easily navigate between slides by either horizontally dragging them or simply switching slides with your keyboard.

On top of that, each slide has its own arrows and a rotating planet image in the bottom left corner with custom navigation that takes your visitors to the following or previous slide.

Layers

Each of the Undiscovered universe’s slides uses the exact same layers to achieve this unique layout. You can find the basic ones like headings, images, and texts across each one’s structure.

However, there are some special layers. On the top between the numbers, you can find an Area layer, that fills up its layer, creating a line between the headings. Together they show a simple counter. It displays how many slides are available, and which one is currently active.

Moreover, they all have built-in navigation in some of their image layers, as mentioned above, you can achieve this result by setting up the Link Action on the chosen layer.

Link Action in Smart Slider

The bottom left image of a planet is an Absolute Layer. They are easily adjustable and can be drag’n’dropped in your slide wherever you would like them to be.

In order to not get confused with how each layer is positioned, you can easily differentiate between them by checking their color in the editor or layer list. Absolute positioned layers are marked with a purple color.

Absolute layers in the slide editor

Furthermore, they all offer a unique experience due to the custom CSS they have. This outstanding blur effect on the left side of every slide can be created by applying a CSS class to their containers in the style settings.

Then, you just need to add your unique design to the CSS section in the Developer settings tab. It is very simple but effective.

Animations

If you switch slides a few times you’ll notice it’s Main Animation. It uses the Crossfade type which is very subtle and short. The Main animation is great whenever you need a simple but elegant slider animation, as it can affect both the slide backgrounds and the layers.

Main and Background Animation Settings in Smart Slider

On each slide, you can also find the Background Animation. This affects only their background but, in exchange, they are a very powerful tool in charming your visitors. The super slow pace of the Distortion-Wrap animation offers a fluid transition from one slide to the next.

On top of that, each block has its own layer animations in order to effectively introduce them. They all take advantage of the Basic Animation‘s easy-to-use settings.

However, the absolute layer is set to continuously rotate on its own, using a loop effect. This way the rotation continues as long as the slide is active, complementing the design of the Undiscovered universe slider.

Loop Animation in Layer Animation settings

Layout

This template has a quite simple layout. It is built with a two-column row structure. Each column takes up 50% of the slide’s width. While the right side doesn’t have any layers, the left side contains all the important ones, attracting the visitors’ attention.

In addition, the Full Width setting is turned on so it fully takes up the available width inside its container. Accompanied by the Stretch option turned on as well, resulting in it filling the available vertical space.

The Full Width and Stretch option is turned on Smart Slider

Responsive

This slider has a similar layout on each device: the two columns are next to each other. The only exception is the mobile view, where the second column is hidden.

Furthermore, one of the many useful tools in Smart Slider’s responsive settings is the Font Resizer, which can be very handy in any case to adjust your design specifically for each particular device.

Font resizer settings in Smart Slider

Similar Sliders
GibraltarDance FestivalSEO AgencyOffice Exercises