Mastering WPBakery Page Builder: a basic guide to easily renovating Basel themes (08)

In a previous post, we explained in detail how to set up your website'sROWrespond in singingColumn. Today, we will continue to explore the settings of the modules, especially the Revolution Slider (poster). By differentiating the modules by color, we can get a clearer picture of the functions and settings of each module.

Today we talk about module setup

Steps Website Front End → Revolution Slider (Poster)

As in the picture above, you can also differentiate by color, the modules are all green

As stated before, the poster (Revolution Slider) The specific settings are not in the editor, so the editor doesn't have much functionality

Here we are talking about some of the basic front-end modules, such as products, product categories, images, headlines and text, buttons and these basic building blocks.

Step Products (grid or carousel)→Pen symbols (edit)

As shown in the picture above, the website product module editing

Step Products (grid or carousel) Settings→General

As shown above, I will name some of the basic features of the product one by one

Products view: the product display style, there are three kinds of people according to the need to adjust the

Data source: Product data source

You can set up the data source as needed

If you don't want to use its data source, you can set the categories you want to display as well as the tags, but the(provided you have this product category and product labels), it's DIYable here, so the playability is still great!

ltems per page: the number of product modules displayed, adjusted according to the actual needs of the

Step Products (grid or carousel) Settings→Design

Products hover: mouse hover style

Columns: the number of columns from the product to the right, the following figure is 4 columns

lmages size: the image size can be left untouched because theWooCommerce PluginAble to set a fixed size, all product images can be automatically cropped (we will talk about it later)

Sale countdown: product countdown, you can set as needed

Step Products (grid or carousel) Settings→Data Settings

As shown above, you can set some specific details of the product data source, as well as you can individually exclude some products, hide out-of-stock products, etc., you can understand according to the translation, very simple.Please remember that all options have to be saved changes to take effect!

Next, we talk about product classification

StepsProduct categories→Pen symbols (editing)

As in the image above we go to Edit

As shown above, not every module has several functions, for example, this is only one, here you can set the title and name, of course, you can also set up a separate separate title or name, do not have to set up in the module here!

Let's focus on the circle setting, the rest can be understood according to the translation, it is relatively simple

Layout: style of categorization

Categories design: category design, you can understand the location of the category name selection

Space between categories: the space between categories, which you can interpret as the gap between the first and second category.

Slides per view: the number of categories displayed in the category module, you can adjust it according to your needs.

Step Product categories Settings→Categories

As in the picture above, you can choose the name of your warrior, enter the name of the category or ID can be, if you do not choose it will be displayed in accordance with the default way, if you do not like to enter their own.Please remember that all options have to be saved changes to take effect!

Next we tell about the pictures

Step Single lmage→Pen symbol (Edit)

Go to edit as above

Let's talk about the circled elements, the other according to the translation to understand on the line, the title you can set up here or set up a separate title module, but I generally do not use the title of the module, because it is very single, if you choose the title module has a lot of styles to choose from, which will be described later to the

lmage source: the source of the image, in the figure the media library is selected

lmage: click below to add the image you need to display

lmage alignment: position of the image display

lmage style: the style of the picture, generally the default, we adjust as needed

On click action: you can understand the feedback of clicking on the image, the above is the option of jumping to the link

Link Target: the option to jump to the link, the above is in the current window, there is an option to open in a new window.

CSS Animation: This is the module's animation effect, which was previously described in theROWpeaceColumnTold. You can follow the link to see

Step Single lmage→Design Options

As shown above, this setup is the same as the previousROWpeaceColumnTalked about. Follow the link and remember that all options have to be Save changes to take effect!

Next, we'll talk about titles and text
Step Section title → Pen symbol (edit)

Step Section title Settings→General

As shown above, this is the title module, we change in the Title on the line, the<strong>The title name "Best Sales" shown above is a short code, so don't worry about it. The rest is understood according to the translation

Design Options: design options are the same, there is no need to say, you can see the picture above the module also said the
text module
Step Text Block→Pen Symbol (Edit)

Steps Text Block Settings→General

The text module you can set up as needed, for example, the above is a red font

Color Scheme: Color Scheme

Front-end presentation effects

Step Button → Pen Symbol (Edit)

As above, we tell one more button module

Text: button name

URL (Link): button jump link

Style: style of the button

Shape: you can link to the style of the button's border

Color: the color of the button

Size: the size of the button

Alignment: the position of the button

Well, the above describes some of the basic elements of the site to build, Basel theme basic building elements, here we can basically decorate a simple website, the above description is to replace some of the modules of the demo template.

summarize

Through the above introduction, I believe you have mastered some basic module settings for the front-end of the website.Basel theme provides a wealth of modules and setting options, enough to help you create a beautiful and practical website. In the next article, we will further explore custom add elements and other advanced features of Basel theme, stay tuned.