Design Bites Theme for YOOtheme Pro
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 🥳🎉.
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.
Here is a detailed description of all layouts.
|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.|
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.
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!
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.
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.
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.
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 (
|Licence||list||select||The license selected from a predefined list (
|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|
By the way, we added another custom field to the default post type that shows the intro image in the blog overview.
|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.
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 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 of all, 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.
|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|
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