Vibe Theme for YOOtheme Pro

Danny
May 2, 2017
Themes

Just a few days after the release of YOOtheme Pro 1.6 we are happy to present to you our May 2017 theme Vibe. Apart from using the newest Pro features, like the Table and Countdown elements, it comes with a richer visual design and a focus on graphical details and modern effects. With its dark background, colorful gradients and subtle textures, Vibe is perfect for music artists, bands, DJs and of course all kinds of music related websites. But it can also be used for any other web project with its futuristic, dark style.

Vibe Style

The special Vibe style definitely catches your eye! This time, we decided to merge the popular Material Design principles with modern skeuomorphism – creating a hybrid of funky colors, smooth shadows, animations and textures on sections. Colorful gradients further emphasize some components.

Style

Subtle Noise

Take a close look! Did you notice the grainy effect that is lying all over the design? We can now add an image that covers the entire page, but doesn't prevent you from accessing and clicking the content. To give Vibe a unique look, we chose this animated noise image.

Navbar items come with a fancy flickering animation to impart a more dynamic feel while using the navigation. We also implemented the option to add a gradient background to the navbar.

Hero Heading Animation

The Hero style for headlines inside the Builder features a glitch effect that animates colored text-shadows and makes your heading dance. You can fully edit this effect by modifying its text-shadows in the style customizer.

Bottom Shadow

A new setting in YOOtheme Pro and the latest addition in UIkit 3 is the bottom shadow option on images and videos. For Vibe theme we modified this to apply a large and colorful background glow, adding a cool three-dimensional look to elements on the website.

Bottom Shadow

Enhanced Section Blend-mode

One of the best features of Vibe is the enhanced section blend mode. We developed a technique to tint background textures without having to use photo editing software. If your browser doesn't support blend-modes, it will fall back to the default section background colors.

Enhanced Section Blend-mode

Button Border Gradients

Additionally, UIKit 3 and YOOtheme Pro now support gradients for button borders.

Button Border Gradients

Pro Elements

A couple of days ago we introduced YOOtheme Pro 1.6, including the new Table and Countdown elements. These have been fully styled and integrated into Vibe theme and come in really handy when displaying tour dates as well as the time remaining until the next album release.

Pro Elements

Layouts

Vibe theme features 6 new layouts dedicated to music artists and band related content. The Home page provides previews for the sub pages with each section. On the Tour page, visitors can find upcoming events listed in the new Table element. Music displays the latest album release, including a tracklist and a history of past releases. The beautiful hero header on the Video page presents the latest video followed by a couple of featured video teasers. About introduces the band members and contains a photo gallery. The Booking page provides contact information that is specifically made for artists and bands. We collected a number of perfectly matching images for each page. They are free-to-use anywhere and whichever way you like. Once you decide to save a layout, you can either download or discard the images.

All pages have been added to the Layout Library, which means that you are able to use these and any of the previously released layouts with this and all other Pro themes.

What's next?

Of course, YOOtheme Pro 1.7 is in the making. Right now we are focusing on developing new elements and working off your wish list. The WYSIWYG editor was a much demanded feature, and we will keep adding more. In the meantime we would like to know what you think. So, as usual, post your feedback in the comments.