This article from Naibabiji introduces how to install the Blocksy Theme on a WordPress website to build an enterprise official website.
Blocksy Theme Introduction
Blocksy is a fast, modern WordPress Theme, supports advanced WooCommerce, and is fully compatible with the Block Editor.
Naiba hasn't done a specific comparison, but intuitively feels that Blocksy is more lightweight than Astra. Naiba also frequently uses Blocksy to build websites.
Blocksy comes with a free version and a Pro version. Naiba sells the Pro version here. If needed, you canClick here to purchase。
Advantages of Blocksy:
- Extreme loading speed (lightweight code architecture)
- Perfect compatibility with Gutenberg Editor, Elementor, Brizy, and other page builders
- Live Customizer provides an intuitive visual editing experience
- Optimized for WooCommerce, suitable for e-commerce websites
- Fully responsive design, adapts to all devices
Blocksy Theme Installation and Basic Configuration
Blocksy Theme Installation Tutorial
In the WordPress Admin Dashboard (if you don't have a WordPress website yet, go build one first, seeWordPress Tutorials):
- Log in to the WordPress Admin Dashboard, go to „Appearance“ > „Themes“
- Click „Add New Theme“, search for „Blocksy“
- After finding the Blocksy Theme, click the „Install“ button
- After installation is complete, click „Activate“ to enable the theme
Activate Theme Companion Plugins
Blocksy's theme features are implemented through companion Plugins, similar to the Astra Theme, divided into free plugins and paid plugins. If you purchased the Pro version, simply upload the Pro plugin in the Plugins section.
If using the free version, just click the Install Blocksy Companion button to install the plugin.
The Pro version has more features, so we uploaded the Pro version. If you don't see the corresponding settings mentioned in the tutorial below, it means the free version does not support them.
Blocksy Companion Plugin Introduction
After installing and activating Blocksy Companion, you can see the Blocksy menu in the Admin Dashboard menu.
The Dashboard menu is the interface for all Blocksy Theme settings, functions, and documentation.
- Home - Quick access to Theme settings interface and related documentation
- Starter Sites - Pre-built demo templates
- Extensions - Some features that can be individually enabled for the Theme
- Useful Plugins - Some plugins recommended by the Theme
- Changelog - Theme update records
If you are a beginner and don't know how to design your website's appearance, it's a good choice to import a design you like from Starter Sites and then modify it.
In Extensions, if you need a cookies notice, you can enable it.Cookies Consent, so the website will have a cookies popup.
If you need a mega menu, you can enableAdvanced Menufeature to all customers.
Shortcuts BarThis feature can also be enabled, so that when accessing the website on mobile devices, there is a shortcuts bar with contact information at the bottom.
Building a Website from Scratch with Blocksy
Considering that the vast majority of viewers of this tutorial are beginners, asking you to start decorating from a blank website is quite difficult, and the final result may not look very professional. Therefore, we recommend starting by importing a pre-made template and then making detailed modifications.
Import Demo Data
Path to import demo data: WordPress Admin Dashboard → Blocksy → Dashboard → Starter Sites
Considering most friends are in the foreign trade industry, we have chosen to import the free Business template here.
During import, you will be asked to select a Page Builder. InBasic Concepts and Terminology of WordPressthe article, we introduced what a Page Builder is:
A WordPress page builder plugin is a tool used to create and edit website pages. It helps users easily create and edit website pages without writing code. Page builder plugins typically have a visual interface, allowing users to create and edit pages through drag-and-drop and placement.
The Blocksy Theme supports three page builders: Gutenberg, Brizy, and Elementor.
For beginners, it is recommended to choose Elementor.。
In terms of performance, Gutenberg should be the fastest, and it is the editor currently promoted by WordPress officially, so its compatibility will also be better.However, Gutenberg's current operation method is not as flexible as Elementor's. What a beginner can figure out with Elementor in a day might take several days to figure out with Gutenberg. Therefore, beginners should not dwell on that slight performance difference. A black cat or a white cat, the one that catches mice is a good cat. The builder you can use is the best builder.
Select all to import this content, then directlyNext
and thenInstallthe plugins needed.
Create Pages & Modify Navigation Menu
Create Page
The pages from the demo data definitely won't match the pages your business website needs, so let's first create the necessary pages and modify the navigation menu.
We can see that the imported demo data includes four main pages: Home, About, Blog, and Contact. Our business website typically also has Product and Service pages.
Here, we'll first add a Service page; Products will be covered separately later.
For this tutorial demonstration, we have created these three pages: Our Services, Service 1, and Service 2. You only need to add the page title and publish it; specific decoration will be introduced later.
The Sample Page and the extra Privacy Policy page can be deleted.
Modify Navigation Menu
Modification path: WordPress Admin Dashboard → Appearance → Menu
We add the service page we just created to the navigation menu and drag to sort it. ThenSave Menu。
At this point, return to the website frontend, and you can see the navigation menu that has taken effect.
Modify Theme Colors
Modification Path: WordPress Admin Dashboard → Appearance → Customize → Colors
You can also quickly enter by clicking 'Customize' in the top navigation menu directly from the frontend.
After making these changes, some colors on the webpage may not have changed yet. This will be covered later when introducing Elementor page editing. Please watch the tutorial carefully.
Modify Header
Modification Path: WordPress Admin Dashboard → Appearance → Customize → Header
The default header consists of 3 rows: Top Row, Main Row, and Bottom Row.
- The Top Row, often called the topbar, is conventionally designed to hold contact information and social media links.
- The Main Row is for placing the navigation menu and buttons.
- The Bottom Row is generally used less frequently.
Select each row to see its settings interface.
To add any element to the header, simply drag and drop it into the corresponding position.
Click the header icon next to the elements on the left side of the screenshot for more header setting options, such as:
- Sticky Functionality - Whether to fix it to the top of the screen
- Transparent Functionality - Whether it is transparent
Modify Footer
Modification Path: WordPress Admin Dashboard → Appearance → Customize → Footer
The method for setting up the footer is similar to the header. The content in the widget area shown in the image above can be set more conveniently via WP Admin → Appearance → Widgets.
If you find designing with the theme's built-in footer effects troublesome, you can also create one using Elementor, which will be mentioned later.
Modify Page Content
After setting up the header and footer, we can start modifying specific pages.
Modification Path:
- Website Frontend → Top Admin Bar → Edit with Elementor
- WP Admin → Pages → All Pages → Edit with Elementor
Before modifying the page content, let's first adjust Elementor's global colors and fonts.
After entering the Elementor editor, click the Elementor icon in the top-left corner, then select Site Settings.
Mainly set the global colors and global fonts. You can set other items if you wish; if you don't understand them, keep the defaults for now.
The theme demo data we imported still uses Section design. The latest Elementor has fully adopted Container layout, so you will see a 'Convert to container' button. You can click it to convert.
After conversion, delete the previous Sections. (Some styles may change after conversion and need manual adjustment. If you don't know how to adjust, do not convert—keep using Sections for now, or pay Naiba to help you handle it.)
The basic use of Elementor is very simple: click where you want to modify, then edit the content and adjust styles in the left editing area.
After adjustments, click the Publish button in the top-right corner to update the page.
Design for Blank Pages
Let's take the Our Services page created earlier as an example to introduce how to use Elementor to edit page design.
Modification path: WP Admin → Pages → All Pages → Edit
After opening the edit page as shown above, first click the Blocksy page settings button at position 1. Items that usually need to be set are as follows:
- Page Title → Disable
- Content Area Vertical Spacing → Disable
After setting is completeSave, then „Edit with Elementor”
After entering the Elementor editor, the content is empty, so you need to create it yourself.
For beginners, creating from scratch might be troublesome. A simple method is to copy designs you like from pages already designed with Elementor in the theme: right-click to copy, then return to this new page, right-click to paste, and then modify the content.
If you need to design yourself, first select a container or grid from position 1, then drag the required elements into the container.
Add Product Management Functionality
As introduced in the „Add Product Management" section of the WordPress tutorial, there are several ways to implement product management:
- WooCommerce Plugin
- Portfolio
- Custom Page
- Using ACF Custom Fields
- Naibabiji B2B Product Management Plugin
A simpler approach here is to use WooCommerce orNaibabiji B2B Product Showcasetwo methods to achieve this.
| Solutions | Technical Difficulty | Disadvantages |
| WooCommerce | Medium | Bloated, resource-intensive on hardware configuration |
| Portfolio | Simple | Design limitations, more case-oriented |
| Custom Page | Simple | Requires design skills, not suitable for a large number of products |
| ACF Custom Fields | 难 | Not beginner-friendly |
| B2B Product Management Plugin | Simplest | May not be compatible with the Theme you are using, requires style adjustments |
If you plan to sell products directly later or want more customization options, consider WooCommerce. If you only need simple product management and display, considerNaibabiji B2B Product Showcase
Website Optimization
After the website is built, the necessary optimization work doesn't require overthinking for beginners; just do what you can.
1. Install an SEO Plugin
Operation path: WordPress Admin Dashboard → Plugins → Add New, search for SEO, any of the popular plugins that appear can be installed.
The principles of SEO plugins are the same; there's no guarantee that using a specific one is better. Just install any one.
2. Clean up unused pages
Not every page from the demo data import is needed; delete the ones you don't require.
3. Install speed optimization plugins
Operation path: WordPress Admin Dashboard → Plugins → Add New → search for „Converter for Media“
To convert images to webp format, you can install Converter for Media. If you are a Baota Panel user, you need to manually modify the nginx configuration. Refer to:Modify Baota Panel nginx configuration to support Converter for Media Plugin
Cache plugin: WordPress Admin Dashboard → Plugins → Add New → search for „cache“, install any popular one that appears.
If your hosting comes with a built-in cache plugin, use the hosting's built-in cache plugin directly. Don't blindly believe in paid cache plugins (it's fine to buy and use them if you have the money; they have some effect).
If you are a Baota Panel user, you can also consider using:Enable Nginx FastCGI Cache for WordPress in Baota Panel
Summary
This concludes the Blocksy Theme tutorial. If you have any questions, feel free to leave a comment.
