About a week ago we released Business3ree, a business / portfolio theme for WordPress. In this theme we introduced a new way of building your homepage in a visual way. Drag and drop systems in WordPress aren’t something new but that doesn’t mean that they work as they should. Most of them are complicated, with a ton of features making things for the end user hard and occasionally impossible to comprehend and actually use them. In an effort to provide our users with a drag and drop system we decided to use the default drag and drop functionality already available in WordPress, specifically in the widgets section.
Take a look at Business3ree’s homepage. There’s a header area containing the logo, the main navigation bar and the slider. The slider is a custom post type and you can tweak its settings through our custom options panel. Every other piece of information under the slider is a widget dropped in a predefined widgetized area called “Front page widgets”. Here’s a screenshot.
In Business3ree you will find 6 custom post types. Portfolio, Features, Services, Team, Testimonials and Partners. Business3ree comes with WooCommerce support which means that one more custom post type is supported, products. Now in order to display content from any of these post types (also the default WordPress post types, posts and pages) we had to develop some custom widgets. Let’s see how they work.
Building the “Services” section with CI Items
Here’s an animated gif showing the CI Items widget in action. It lets you add as many “items” as you want from any post type and also there’s an option there to select the number of columns (2,3 or 4). That was easy, wasn’t?
Displaying a “Feature” using the CI Split Content widget
As you can see in our demo under the services there’s a section with a title, a bit of text, a button and an image. You can create this kind of content using the “Features” custom post type and again, display as many items as you want on your homepage this time using our CI Split Content widget. Watch it in action:
Just use the CI Items widget exactly like you used it on the “Services” section. This time instead of services, select portfolio items. Voila!
Just use the CI Testimonials widget. Take a look at the following screenshot and check its settings.
Call to action section and the CI Hero widget
Every website needs a call to action and Business3ree takes care of it. The following screenshot shows all available settings found in the CI Hero custom widget.
As you can see in the previous screenshot there’s an option to enable a parallax effect (you need of course to upload a background image) as well!
I guess you get the idea. Drag, drop, select items, done. From now on we will be using this system on every new theme so if you have any suggestions, feel free to get in touch.