Soda Theme for YOOtheme Pro

Sergej and Susann
July 24, 2019
Themes

Today we are happy to introduce our new theme for YOOtheme Pro – Soda. Freely arranged images with multi-layered parallax effects give it a modern, dynamic look. With its clean minimal style, a thin page border and bold colors Soda is perfect for VFX and animation studios as well as media agencies. Let's take a look.

Soda Style

Our new theme has a flat minimal style which contrasts with heavy typography and Sans-Serif fonts. Thin borders and bold luminous colors give it a unique look which is perfect for a visual design agency or any other creative services website.

Style

Style Variations

Soda comes with 6 different styles. Just choose the one that works best for you.

We added a new active style option for the navbar in YOOtheme Pro. Now instead of a line under the navbar item, there is a dot on top of it.

Active Navbar

Layouts & Topic

Soda represents a 3D visualization agency's website with 10 different layouts. The Home page introduces the agency and its services. Here you will find freely arranged images and a slight parallax effect. Work is a gallery page with a filter option. The Motorcycle and Lexa pages are case studies which are a perfect example of effective product presentation. As the name suggests, the Services page shows what services the agency provides. The 3D Modeling page is another services page with a nice looking slider presenting related works. Studio introduces the agency and its team. There is also a Careers and an Interactive Developer pages. Of course, the Contact page is not missing as well. As you can see, Soda has everything you need for a digital agency or other related websites.

Secondary Section

For this theme we have decided to use sections with secondary backgrounds instead of default. This way the theme looks dark, even though the default background color of the style is white.

Multi-layered Parallax

The main highlight of our Soda theme is the use of the multi-layered parallax effect in combination with the position option. The images and videos are moving at different speed creating a very dynamic look. The best part is, it is all responsive and looks great on every device.

Content Parallax

Soda uses the parallax effect to bring a special focus to the list of service categories.

Fixed Background Images

We also used fixed background images which you can find on our two case study pages – Motorcycle and Lexa.

Free Quality Stock Images

Soda comes with 53 lovingly curated and free-to-use images. Take a look at some of them below. These images can be found in the Soda collection in the Unsplash library.

53 lovingly curated and free-to-use images

What's Next

In the past few months we have been working on the dynamic content feature. Today we would like to give you a short update and share some insights about the complexity involved.

The dynamic content feature allows you to map fields of the current article (in which you are using the builder) into the builder layout. It also works with custom fields which allows you to create a field mask for content editors. They simply need to fill out the custom fields, and the content will be automatically mapped into the builder. For example, the featured image field can be mapped into the layout to an image element. You can also map fields which are related to the article. For example, any field related to the user like the user name and also the custom fields of the user.

All this describes mapping fields of the article itself. We call it the current content source. But you can also pick a different source, for example any article or even a category. The field mapping works the same for any content source. It is not just limited to Joomla and WordPress, but it also works with other extensions like ZOO and WooCommerce.

You can currently only use the builder on single articles. We will remove this limitation, which means that you can create builder layouts and assign them to the category or featured views. For example, the current content source of a layout assigned to a category view is the category itself with its fields and related articles. This means you can layout any content views like categories, archives, front pages, etc. with the page builder.

The complexity of the dynamic content feature requires a well-designed architecture because all the described functionalities are connected and have to be carefully thought through. The initial testing showed some issues, and we are now refactoring and improving the code. But that's not all. We are also working on other really exciting features, so you can look forward to some great releases later this year.

Now go ahead and explore our Soda theme. As always, let us know what you think in the comments below.