Zero Code Implementation: Publishing Beautiful Product Showcase Pages with Blocksy Theme

If you are using the WordPress building a website and want to create a product showcase page that is both good looking and functional, but can't write code.Blocksy A theme is just the right tool for the job. This article will introduce the Blocksy theme step by step to help you quickly complete the creation of your product showcase page.

图片[1]-零代码打造产品展示页:Blocksy 使用指南

Why Blocksy?

图片[2]-零代码打造产品展示页:Blocksy 使用指南

Blocksy is a free, lightweight, customizable WordPress theme. It is similar to Gutenberg editors or page builders such as Elementor work well together. Using Blocksy, this is possible:

  • Customize page structure and layout
图片[3]-零代码打造产品展示页:Blocksy 使用指南
  • Setting up full-width or cassette inner packagings
图片[4]-零代码打造产品展示页:Blocksy 使用指南
  • Add modules for product images, profiles, prices, etc.
图片[5]-零代码打造产品展示页:Blocksy 使用指南
  • Display multiple product information using card style

II. Preparatory work

Before you begin, complete the following:

1. Install and enable Blocksy theme
Go to Backend → Appearance → Themes → Add Theme → Search for "Blocksy", click Install and enable it.

图片[6]-零代码打造产品展示页:Blocksy 使用指南

2. Install the Blocksy Companion plug-in
After installation you will be prompted to activate the Blocksy Companion plugin, click to confirm. This plugin provides additional modules and page templates.

图片[7]-零代码打造产品展示页:Blocksy 使用指南

3. Preparation of product materials
beforehandProduct Pictures, title, price, features, etc. for quick subsequent editing.

Third, the new product display page

  • Create new page
    Backend → Pages → New → Enter a page name, such as "Product Showcase".
图片[8]-零代码打造产品展示页:Blocksy 使用指南
  • set upPage templatesFor full-width layouts
    In the Settings column on the right side of the page, select the template as "Blocksy - Full Width Page".
图片[9]-零代码打造产品展示页:Blocksy 使用指南
  • Adding Display Content

The Gutenberg editor is recommended:

  • Insertion of "column" modules, e.g., two- or three-column structures
图片[10]-零代码打造产品展示页:Blocksy 使用指南
  • Add an image, title, introductory text, and a button such as "Buy Now" in each column.

You can also use the "Media & Text" module to achieve a clear structure for side-by-side presentation of graphics and text.

图片[11]-零代码打造产品展示页:Blocksy 使用指南

Or choose Blocksy's Starter Sites Template function:

  • Go to Blocksy → Starter Sites
图片[12]-零代码打造产品展示页:Blocksy 使用指南
  • Choose a demo site template with a product showcase (e.g. "Shop" or "Business")
  • Import with one click and then directly modify the content of the content
图片[13]-零代码打造产品展示页:Blocksy 使用指南

IV. Adjusting style details

  • Modify color scheme and fonts
    Go to Appearance → Customize → Colors & Fonts to set the background color, button color, text style and other parameters.
图片[14]-零代码打造产品展示页:Blocksy 使用指南
  • Enable image rounded corners and shadow effects
    The block's style settings allow you to enable rounded corners and card shadows for images to make the page more aesthetically pleasing.
图片[15]-零代码打造产品展示页:Blocksy 使用指南
  • Adaptation of pages to various devices
    Blocksy hasresponsiveLayout features, no extra settings, the page can adapt to cell phones and tablets and other terminals.

V. Page publishing and menu management

Once the design is complete, click the Publish button in the upper right corner of the page. Then go to the Appearance → menu and add the page to the main sitenavigation menuIt is easy for visitors to browse product information.

图片[16]-零代码打造产品展示页:Blocksy 使用指南

VI. Summary

Blocksy The theme makes it easy for every WordPress user to create a product showcase page. From template selection, content addition to style adjustment, do not need any development skills, just simple operation can be completed. Whether you are displaying a single product or multiple product information, you can achieve a professional level of visual effect.

Open the backend now and create your own product showcase page with Blocksy.


Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!
客服微信
Customer Service
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) E-mail: [email protected]
Working hours: Monday to Friday, 9:30-18:30, holidays off
© Reprint statement
This article was written by lmx
THE END
If you like it, support it.
kudos153 share (joys, benefits, privileges etc) with others
commentaries sofa-buying

Please log in to post a comment

    No comments