Aspicio 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.

  1. Log in to the WordPress admin panel.
  2. Go to Appearance -> Themes.
  3. Click on the Add New button, at the top of the screen.
  4. In the Add Themes screen, click on Upload Theme.
  5. Click on Choose theme, and then browse for theme file on your computer.
  6. Click on Install Now to start the installation.
  7. 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:

  1. Jetpack
  2. 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 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.

  1. Featured
  2. TK Text
  3. TK Contact
  4. TK About
  5. TK Testimonials
  6. TK Gallery
  7. TK Headers
  8. TK Call to Action

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.

Intro with two columns – Heading with text in two columns.

Two rows with headings – Text in two rows with inline headings on the left.
Heading and text in two columns – Side by side heading with short text on the right.
Large heading text with short paragraph – Large heading text with short paragraphs in two columns.
Heading with two text columns – Heading with text in two columns.
Heading with three columns – Large heading with text in three columns.
Heading and paragraph in two columns – Longer heading and paragraph inline in two columns.
Heading with three columns and buttons – Large heading with three columns and buttons.
Heading and paragraph in two columns – Small title and paragraphs in two columns

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.

Email link with social icons – Large text with email link and social icons.
Contact text with email – Short text with email link.
Email with social links menu 1 – Large title with email and social links menu.
Email with social links menu 2 – Large title with email and social links menu in two columns.
Contact details with address – Contact details with social links menu and postal address.

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.

Full screen section in two columns with single image and text.
Boxed pattern with image and text – Boxed pattern section in two columns with single image and text.
Full screen section with single columns – Full screen pattern in single column with image and text.
Full screen section with large image – Full screen pattern with full-width image and text.
About section in two columns – Two columns with text and images.
Team pattern 1 – Two columns with text on the left and four images on the right.
Team pattern 2 – Pattern with large text with three images.
Shuffled team pattern – Shuffled images with text pattern.

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.

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.

Four columns gallery – Gallery pattern with large title and four columns.
Four + three columns gallery – Gallery pattern with four and three columns.
Mosaic gallery – Gallery with mosaic images and large title
Two column gallery – Gallery in two asymetric columns.
Shuffle gallery – Shuffled gallery in two columns.
Two column gallery with text – Gallery in two columns with text in the middle

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.

Header pattern 1 – Header template with background image, two columns, and button.
Header pattern 2 – Full screen heading with button.
Header pattern 3 – Two columns template with image on the left and text and button on the right.
Header pattern 4 – Heading with button sorted in two columns.

TK Call to action

Call to action patterns prompt an immediate response or encourage immediate action.

Call to action pattern 1 – CTA pattern with large heading and two buttons.
Call to action pattern 2 – Full screen CTA pattern in two columns with button on the right.
Call to action pattern 3 – Boxed CTA in two columns with button on the right.
Call to action pattern 4 – Stripe CTA with heading and button.
Call to action pattern 5 – CTA with background image, heading, and button.

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:

  1. Home
  2. About
  3. Blog
  4. 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.

  1. Insert Header pattern 4. Replace the text and image with your own, and set desired colors for the block background and text.
  2. Second block is heading, where we added two spacer elements above and under it.
  3. In the next section, you need to insert a columns block. Set block width to Wide Width, and set the number of columns to 5. Make sure to set columns 1,3 and 5 widths to 30%, while columns 2 and 4 should have a width of 5%. In columns 1,3 and 5 insert the image and heading under the image. The images that we used in our demo were prepared in Photoshop(rounded top).
  4. For the best sellers section, insert a full-width group block, and set the background color. Insert header and text, and under them insert Handpicked products block from WooCommerce.
  5. Final section contains a hand-picked product, so you will need to use Header pattern 4, and link it to the desired product.


About page should present a short story about the brand. For building About page we have used:

  1. Heading element
  2. Header pattern 3 element
  3. About section in two columns pattern
  4. Header pattern 2


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 Contact pattern 1 with image that is inserted under it.

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-in from the top animation.
  • h-animate–from-left: element will have fly-in from the left animation.
  • h-animate–from-right: element will have fly-in from the right animation.
  • h-animate–from-bottom: element will have fly-in from the bottom animation.
  • -desktop-only – element will appear on desktop devices only.
  • l-touch-only – element will appear on devices with touch screen.
  • l-above-mobile-only – element will appear on all devices that are not mobile.
  • l-mobile-only – element will appear on mobile devices only.
  • l-center-margin-auto – element will get left and right margin, so it becomes centered.
  • l-no-margin-top – removes top margin.
  • l-no-margin-bottom – removes bottom margin.
  • background-color–transparent – sets transparent background for the element.
  • padding–horizontal-default – sets left and right padding:50px for all devices, except for mobile devices. For mobile devices padding is set to 30px.
  • no-padding–top – removes top padding.
  • no-padding–bottom – removes bottom padding.
  • no-padding–horizontal-on-touch – removes left and right padding for all devices with touch screen.
  • no-padding–horizontal-on-mobile – removes left and right padding for all mobile devices.

These classes are used on blocks that are placed on the page. To use classes:

Click on the image for larger image.
  • 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.

Was this article helpful?

Need help with the setup?

In case you don’t want to spend your time building your site from the ground up and perfecting its design, we’d be happy to do it for you. Explore our services and choose the option that suits you best.

Our Services:
  • Theme installation$59i
    • Database setup
    • WordPress installation
    • WordPress activation
    • Theme installation
    • Final test

  • Theme installation & demo setup$79i
    • Database setup
    • WordPress installation
    • WordPress activation
    • Theme installation
    • Demo setup
    • Final test

  • Must-have plugins$69i
    • Yoast SEO plugin installation and setup
    • Google Analytics plugin installation and setup
    • Google XML Sitemaps plugin installation and setup
    • iThemes security plugin installation and setup
    • Final test

  • Ready-to-use website setup$290i
    • Database setup
    • WordPress installation
    • WordPress activation
    • Theme installation
    • Custom logo and colors setup
    • Content import (6 pages max.)
    • Final test

View our Services page