Bonum theme is a e-commerce ready theme. You can build unique landing page using predefined patterns. Theme can be used for the personal presentations as well, company website, and other general purposes.
Theme installation
The theme can be installed through the WordPress Admin panel.
- Log in to the WordPress admin panel.
- Go to Appearance -> Themes.
- Click on the Add New button, at the top of the screen.
- In the Add Themes screen, click on Upload Theme.
- Click on Choose theme, and then browse for theme file on your computer.
- Click on Install Now to start the installation.
- After the installation is done, click on Activate theme.
A detailed video of theme installation is available here.
Note: If you get the error message “The package could not be installed. The theme is missing the style.css stylesheet.” please unpack the zip file that you have downloaded, and inside the unpacked zip file you will find two more files – a parent and child theme. Install parent theme first, and then child theme. Activate the child theme when the installation is done.
After activating the theme, you will be prompted to install the required plugins. Required plugins are:
- Jetpack
- WooCommerce
Jetpack plugin setup
Jetpack plugin is a required plugin. After installing the plugin, you will need to connect it with your site. When you click the Set up Jetpack button, you will need to log in to your WordPress.com account, or you’ll have to create a free Jetpack account. The official article that explains how to set up the Jetpack plugin is available here.
Theme defined patterns
Patterns are predefined blocks, that can be added in the content. Paterns are group of several blocks, so their content – text and images can be edited.
Besides of standard patterns, Bonum theme is coming with theme-specific patterns.
- Featured
- TK Text
- TK Contact
- TK About
- TK Testimonials
- TK Gallery
- TK Headers
- TK Call to Action
Featured
TK Text Patterns
Styled text patterns are block combinations that allow you to insert outstanding text boxes. They are coming in handy when you need to present some outstanding information or to draw the reader’s attention. There are 9 text patterns, and you can customize text and background color for each of them.
TK Contact Patterns
Contact patterns are coming in handy when you need to deploy a contact page with a click. Several layouts allow you to display contact details either on social networks or to provide a mailing address or both.
TK About Patterns
For presenting team members or creating a showcase about your brand, or people behind it, you can use about and team patterns. They are designed and developed to present information in an eye-catching way and can be customized to match your site design.
TK Testimonials
Testimonial patterns present opinion and feedbacks. They are not linked with any post type.
Full-screen testimonial – Single testimonial, with text and person details.
Single testimonial with large image – Testimonial with large image on the right.
Logos with two column testimonials – Combination of brand logos and testimonials under them.
Three column testimonials – Testimonials displayed in three columns.
TK Gallery Patterns
Gallery patterns are used for manually creating gallery pages. Those patterns are not dependant on Portfolio post type or any other. Just insert your images and you are good to display your work in an outstanding way.
TK Headers Templates
Header templates are used to create a great intro and cover for posts. They are built from a combination of image and text.
TK Call to action
Call to action patterns prompt an immediate response or encourage immediate action.
How we built our demo
Before building homepage, it’s suggested to create your products, product categories, posts and post categories.
First, we have created the following pages:
- Home
- About
- Blog
- Contact Us
WooCommerce plugin will create necessary pages – Shop, Cart, Checkout, My Account, Privacy Policy. These pages are not editable, except for Privacy Policy where you should put your text.
Home page
The homepage is built using several patterns and blocks. The following are instructions on how to build the same homepage as shown in our demo. With little bit planning, you can build a homepage that will fully suit your needs, with more product categories, blog posts, etc.
The homepage is built from several sections. We will explain each section.
- Insert Header pattern 2. Replace the background image with the desired one. Change the text and set text color and size. Do the same for the button that is included in the header.
- Under the header image, insert large text and link.
- In the third element, insert two columns and set width to Wide width. Combine spacer elements with the Featured Category WooCommerce block to create a grid. The background image is set for each block after inserting that block into the grid.
- In Featured Categories we have inserted Featured Product block. Turn off the description for this block.
- New Collection section is using a block from WooCommerce – Hand-Picked Products. Insert heading first(“New Collection”) and then Hand-Picked Products block from WooCommerce blocks.
- Button is a regular WordPress button with an outline design.
- Short paragraph of text with the link is followed by Featured Posts pattern from Query category. For Query Loop you will need to set a number of columns to 3, and then using vertical directional arrows for blocks to create the desired layout.
- Insert Full-screen header pattern with a button, similar as on step 1.
- Finally, insert Logos with a two-column testimonials pattern. Set the number of columns to 4 and edit the text and replace logos with your own.
About
On the About page insert Header 1 element. Set the background image. Insert spacer element above the text and remove smaller text and button. Insert the content in the content area.
Blog
The Blog page is the page where all posts are displayed. There are no elements on this page. This page is using a template Index.
Contact US
Contact Us page contains only text with the contact information.
Working with theme templates
With the new WordPress feature – Full Site Editing – tech-savvy users can easily tweak theme templates using Gutenberg editor, instead of messing with the theme code.
In Bonum theme, only header and footer templates can be tweaked. To start working with theme parts, in WordPress admin panel go to Appearance -> Template Parts. Click on the part that you wish to customize.
Here are example videos on how to perform simple changes in templates.
Useful CSS classes
Bonum theme is coming with pre-defined CSS classees that can animate elements on posts and pages.
Here is a list of those classes:
- h-animate–from-top: element will have fly from the top animation.
- h-animate–from-left: element will have fly from the left animation.
- h-animate–from-right: element will have fly from the right animation.
- h-animate–from-bottom: element will have fly from the bottom animation.
These classes are used on blocks that are placed on the page. To use classes:
- Click on the desired element.
- Expand Advanced panel.
- Copy and paste name of the class.
If you need to use multiple classes, separate them with space.
