How to Efficiently Decorate & Layout BoxShop Themes: A Comprehensive Guide (04)

Welcome to this tutorial! Today we're going to dive into how to decorate and layout the BoxShop theme, which is a powerful and flexible WordPress theme. Unlike previous themes, this time we'll focus on how to edit and set up the theme in the backend using WPBakery Page Builder. In this guide, we'll break down each step in detail to help you quickly grasp how to efficiently manage and customize your BoxShop theme to make your website more attractive and functional.

Steps: Website Backend→Pages→Home→WPBakery Page Builder

First find pages and then find HOME, as follows

According to the different templates, the name of the home page will be different, please recognize that there is Front Page (home), this is the home page is set up, generally set up, if not, to go elsewhere to adjust it!

Click on Edit to enter, as above

Then we will get a such interface, in fact, it is also WPBakery Page Builder editor to edit, before the Basel theme is also WPBakery Page Builder editor, but that is the front-end visual editor, and this only supports back-end editing, you need to keep the settings in the back-end, and then go to the front-end to see the results, so there will be Advantages and disadvantages, the advantage is that the front and back end are separated, so there will be no results caused by misuse, the disadvantage is that you can't see the direct effect of moreBasel Theme WPBakery Page Builder EditorIt can be viewed through the link

Let's get on with it.

This is the back end.

Corresponding front-end effects

Set up the corresponding picture, the picture is very simple, it will be explained in detail here, you can go to see theBasel Theme WPBakery Page Builder EditorThe content is clear, or you can translate it to make it understandable.

This is a module for products with multiple options, if you need to add options, then you need to add Tabs, select the + sign to add, or the + sign after the option to add

Select the new option to add a product module

Section (part) here to set the name of the new option, please make sure that the following ids are not the same for each degree, otherwise it will not be able to lead to the inability to jump!

The effect is then realized as follows

Steps: Website Backend→Pages→Home→TS Banner2

banner is also the picture, can be understood as a banner, this is nothing to say, but just pay attention to one point, the size of the picture to be consistent, otherwise it looks crooked, you can use some picture tools to crop to a uniform specification!

As shown above, this looks better, but of course the display of different screens is different, the above picture is the monitor

Below is the laptop screen, you'll need to make a trade-off as it is adaptive

Settings, mainly the jump links for the images are set up just fine

Here there is a mouse touch effect, that is, touch the picture, we adjust according to the actual situation!

As for the product module, as shown above

Choose a good product name, you can write the name in the product module, you can also when the degree to add a title or text to write the name, in the selection of product categories, if not selected, the default display of all products, automatic sorting, and then the product display style, as well as some of the content and details of the display, we can according to the translation!

As for blogs and videos it's pretty easy too. As in the picture above

Steps: Backend → pages → Home → TS Blog

Blog if you do not want to show a specific classification of the blog's articles, do not check the box, his default is checked, so in the emergence of the default article deleted, but your new blog does not show, that is, here is set out the problem!

Steps: Website backend→Pages→Home→Video Player

The video inserted here is in the form of a link, not an embedded shortcode, so look for it!

This is the theme comes with the subscription module, the following chart, he has several styles to choose from, but generally choose the default, more in line with this template

Just choose the content and style, you can also add a background image if you need one, but it is recommended to be the default one

summarize

That's it for this installment of the tutorial, we hope that through this detailed explanation, you have a clearer understanding and ability to operate the BoxShop theme's decoration and layout. In the next issue, we will continue to explore how to use the BoxShop theme comes with features to customize the settings, to create a more unique site to meet your needs. Thank you for your attention and we will see you in the next installment!