Design Bites Theme for YOOtheme Pro

  • Susann
  • Themes

Curtain up for our new Joomla and WordPress theme package for YOOtheme Pro – Design Bites. It's our first demo website which makes use of all the new features of YOOtheme Pro 2.0 – dynamic content, custom fields and the template builder. Design Bites is a design resources directory filled with 140+ demo posts. Its trendy colorful blob shapes in the background give the site a playful creative look. With its material style, vibrant colors and bold typography, Design Bites is perfect for a resource or download directory as well as any creative website. Check it out yourself. We have also great news for WordPress users, the YOOtheme Pro 2.0 Stable release is available now 🥳🎉.

Page Layouts

Design Bites is a website for design resources which comes with 9 different layouts. Resources posts styled as cards give the site a clean, organized look, while a vibrant call to action newsletter at the end of every layout draws attention of the visitors.

Home Layout

Home

Resources Layout

Resources

Resource Category Layout

Resource Category

Resource Index Layout

Resource Index

Resource Post Layout

Resource Post

About Layout

About

Post Index Layout

Post Index

Post Layout

Post

Imprint Layout

Imprint

Here is a detailed description of all layouts.

Page Type Description
Home Page Presents the latest and most popular design resources as well as all resource categories in different sections.
Resources Page Shows an overview of all resources categories and their latest resources in 4-column grids.
Resource Category Template Shows an overview of all sub categories as well as poster images of all design resources from a category in a 4-column grid layout.
Resource Index Template Shows an overview of all poster images of all design resources from a category in a 4-column grid layout.
Resource Post Template Shows the resource with further information about it, download link as well as related design resources.
About Page Introduces company's philosophy, license and FAQ.
Post Index Template Displays featured news in a 2-column layout followed by the rest of the news in a 4-column grid layout.
Post Template Introduces the post with a hero image. The meta data and the author's name appear right under the title of the post.
Imprint Page Shows legal information about Design Bites.

Styles

Our new theme has a modern material style with box shadows, rounded borders and a bold secondary color. Its vivid color scheme gives it a playful spring look. In addition, thick headlines and thin text typography with a sans-serif font make Design Bites a perfect fit for a creative website.

Default Style

In addition to the default style, Design Bites comes with 5 other style variations, each with a different beautiful color scheme. They all have a white background with vivid foreground colors. You can switch the whole look and feel of your website with just a click. Choose the one that fits your website best!

White-Green Style

White Green

White-Yellow Style

White Yellow

White-Turquoise Style

White Turquoise

White-Orange Style

White Orange

White-Lightgreen Style

White Lightgreen

Handmade Icons

We also handcrafted illustrations that are used as intro images for all categories of our Design Bites theme. You can change their color and use them with any style.

Fonts Icon
Brushes Icon
Vectors Icon
Grphics Icon
Mockups Icon
UI Kits Icon

Background Blobs

Blobs are an absolute design trend right now, so we could not miss the chance to incorporate them in our new theme. Design Bites uses these playful, colorful blobs all over the site. Absolutely positioned in the background and with a slight parallax effect and gradients, blobs are an important part of the look and feel of our new theme.

Blob 01
Blob 02

Content Types and Custom Fields

In addition to the blog and its posts, Design Bites comes with pages and templates for design resources filled with 140+ demo posts. In Joomla this content type is created by assigning custom fields to the Resource category, while in WordPress a Resource custom post type is used.

Resources

Design resources are organized in a two-level category hierarchy. There are 120 design resources sorted into 6 main resources categories: Fonts, Brushes, Vectors, Graphics, Mockups and UI Kits. Each category has up to 5 subcategories.

The first-level resource categories have 2 custom fields which are dynamically mapped into the home page.

Category Field Type (J) Type (WP) Description
Intro Image media image The teaser icon used on the home page
Intro Image Alt Text text - The teaser icon alt text

The resource post type has 8 custom fields which are dynamically mapped into category and single post templates.

Post Field Type (J) Type (WP) Description
Intro Image - image The intro image of the resource
Images repeatable repeater Additional images shown after the full article/featured image with image and image alt text fields
Format list select The format selected from a predefined list (ttf, otf, …)
Licence list select The license selected from a predefined list (CC0, CC BY, …)
Creator Name text text The creator name
Creator Image media image The creator avatar
Download media file A link to the download file
Related Resources articles relationship A handpicked list of related resources

Blog Post

By the way, we added another custom field to the default post type that shows the intro image in the blog overview.

Field Type (WP) Description
Intro Image image The teaser image of the post

Free Quality Stock Images

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

More than 185 lovingly curated and free-to-use images

3rd Party Integrations

With the use of dynamic content, it got more important to us that our demo websites are fully functional solutions and are built the best way possible. This is why we put an extra effort, especially into the WordPress demo package. WordPress has great possibilities to organize content with custom post types and taxonomies but falls short in other features which Joomla has by default. Getting the best result took us a bit longer, but it is definitely worth the wait.

First, we converted articles and categories from Joomla to WordPress custom post types that have their own taxonomies and custom fields. That's the best way to organize your content. To add the missing features we also integrated popular WordPress plugins into YOOtheme Pro and the demo packages. But one thing is still missing. There is no option to show popular posts in WordPress, which is why the ordering is currently set to Id. But we are looking into some 3rd party plugins and will add support very soon.

Here is an overview of all pre-installed and activated plugins in the WordPress and Joomla demo packages.

Plugin System Feature Documentation
Advanced Custom Fields WordPress Create custom fields View
Custom Post Type UI WordPress Create custom post types and taxonomies View
Advanced Posts per Page WordPress Define the number of posts per page for custom post types, taxonomies, the search, date and author archives View
Category Order and Taxonomy Terms Order WordPress Manually sort terms, e.g. categories View
Articles Field Joomla Tease related articles and link them View

Important Notes

Currently, the Design Bites layouts are not available in the layout library. This is because their content is loaded dynamically, and most of the mapped custom fields, content sources or handpicked articles and categories will not be available in your installation. But we are working on a solution to convert these dynamic layouts to static layouts which we will add to the layout library.

The WordPress demo package also uses the Repeater field, which is only available in the Advanced Custom Fields Pro plugin. This is a commercial plugin and is not bundled with the demo package. You can install it afterwards, and the demo website will look just like on our demo server. If you don't have ACF Pro, the demo package will not look the same, but to achieve a similar result, you can create a fixed number of separate custom fields instead.

So these are the features of our new theme Design Bites. Now go ahead and explore it yourself. As always, let us know what you think in the comments below.

  • Resource directory site with 140+ demo posts
  • 9 page builder layouts
  • 6 beautiful styles
  • 2 content types and 11 custom fields
  • 185+ lovingly curated and free-to-use images
  • Powered by the YOOtheme Pro page builder
  • Available as WordPress theme and Joomla template

Related



Join Now
Documentation