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
Merry PiXmas
Merry
XMas
& Happy New Year

Merry PiXmas

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

Description: Are you looking for the perfect Christmas header for your site? Don't mind if it's a little retro? Have a look at the Merry PiXmas template.

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

Minimum version: 3.5.1.12

Tags:

Slider Settings

The Merry PiXmas template is a full width slider, that displays one slide. This makes it perfect for a Christmas header or banner for your website.

There is only one slide in the block as Blocks can only contain one slide. So there’s no navigation option enabled. Although, you can change to slider and add more slides and enable arrows and/or bullets to your header if you’d like to.

Layers

The Merry PiXmas template uses two kinds of layers: headings and images. In fact, it’s amazing to see how you can create beautiful layouts with just two layers.

The images look super retro with with their huge pixel display. The text is special, too. It uses a Google Font called “Press Start 2P” which brings back memories from the early days of the web.

Animations

The base of the template is its gorgeous animations. There’s continuous movement. Some images move downwards, some jump up and down. There’s just so much action that it’s a joy to view this block. How did we achieve all these animations? We used Layer Animations. Layer animations are fantastic tools to introduce your layers and to bring action to your slides.

Layout

The base layout of the Merry PiXmas template is a two column row. The left column contains the textual content, while the right column displays the primary image.

Next to these layers, there are several Absolute positioned layers to create the decorative animations.

Responsive

Smart Slider gives you all tools you need to create a beautiful responsive slider. You can adjust the font size using the Font Resizer, without affecting the size on other devices. Additionally, you can hide some layers to make the slide less crowded on mobile.


Related Documentation: Layer animation

Related Post: 10 Beautiful Full Width Slider Examples