How to build your Business3ree homepage using widgets

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.

widgets

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?

ci_item

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:
ci_sc

Portfolio Section

Just use the CI Items widget exactly like you used it on the “Services” section. This time instead of services, select portfolio items. Voila!

Testimonials Section

Just use the CI Testimonials widget. Take a look at the following screenshot and check its settings.

testimonials

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.

ci_hero

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.

7 comments

  1. hakonzen says:

    Great tutorial on a good looking theme :-)

  2. E.J. says:

    Thanks for the post. I love the theme but would like to know what it would entail to change my theme from Business2 to Business3? Is it a fairly straight forward process?

    Thanks! E.J.

    1. Gerasimos Tsiamalos says:

      Hi E.J.

      Business2 and Business3 are two completely different themes. You could just grab Business3, activate it, adjust your content and see if it fits your needs :)

  3. A Francis says:

    Hi, nice, well organized them. I am having trouble with your CI Hero Widget. When adding a background image it crops it to 300×125. I haven’t made any modifications to any sizes anywhere. The original is being imported to the gallery via the unsplash plugin at a width of 2000px. Therefore the width of the photo I am trying to use for the parallax background is 2000px. Thanks for any help.

    A

    1. A Francis says:

      Never-mind, I figured it out!

  4. Adri says:

    Hi, is it possible to change the font used in this theme?

  5. Dear admin,

    Business 3 is awesomely cool. i have used it to build a website for a private equity organisation.

    and also my bulk SmS site.

    Regards

    Oyekan

Leave a Reply

Your email address will not be published. Required fields are marked *