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

This article will take you step-by-step through the process of masteringWPBakery Page Builder Editor, used to decorate the Basel theme. Every step and setting is explained in detail, from the Revolution Slider to the use of rows (ROW).

Next we'll officially begin

WPBakery Page Builder editor to start decorating Basel theme

Steps Website Frontend → Edit with WPBakery Page Builder

As shown above into the front-end edit page, we can see that there are different modules, the above shows the revolution slider (poster banner)

There are also functions such as ROW and Column.

Let me tell you all about it.

1. we first talk about the revolution slider (Revolution Slider) this is the home page of the poster function, this is not set here, so we do not need to move it

As shown above we go to the edit page

1. Steps site front-end → pen symbol (edit)

Just select the template poster (banner) that we imported for the demo data

2. ROW

3. Columns

Rows and columns are basically the same module, of course, you can put the module directly, but you can not control the size of the module as well as some of the display features, we will slowly talk about later!

ROW (row) is to control the whole module, no matter how many modules are inside, he is a whole, and the settings inside him are also whole rather than individual, subsequently we will talk about the column (Column), you'll see.

As demonstrated above, he is able to drag the entire module

Step rows → symbols (expansion)

Step row → Pen symbol (edit)

Steps Row Settings→General

As shown above on the edit page, I'll write an explanation of some of the basic functions circled above

Row stretch: can be interpreted as the size of the whole module.

Stretch row and content and Stretch row and content (no paddings) are full width (all inclusive) and content not full width

Default and Stretch row are the difference between a default and a gap, which is the center position.

As the above picture shows, you adjust according to the actual need

Columns gap: can be understood as a gap, the general situation does not need to move, but if the front end is more crowded, everyone adjusted as necessary

Content position: the position of the content, usually the default.

As shown above, adjust according to the actual situation, set up remember to Save changes to save!

Steps Row Settings→Design Options

Let's talk about Design Options, where the background and color are adjusted, as well as the top, bottom, left and right spacing.

Border color: the color of the border

Border style: the style of the border (style)

Border radius: the gap of the border (generally do not need to adjust)

None of the above need to be adjusted for simple cases

Background: background color and background image to add, as well as the display effect of the image

Adjust the background of the whole module to suit the situation, as shown above

The above image if showing a display without a background and a display with a background

Step Row Settings→CSS box

As shown in the figure above, here to adjust the upper and lower as well as left and right gaps, can be used for the front-end display of the adjustment, as well as the style of the module, in general, does not need to be adjusted, the general upper and lower modules will be used in the case of congestion, the above has the outer frame has been adjusted within the module frame, we generally adjust the margin outside the frame of the gap, you can add a positive value or a negative value, to achieve gap

Step ROW → three symbols (number of rows format)

Row layout: select the number of rows (examples shown above: one, two, two left wide, right narrow, and three), you can see according to the icon

Enter custom layout for your row: you can add the number of rows yourself (molecular form is fine)

As the icon behind the picture above means →
+: add module, clone entire row, copy row, paste, close, everyone understands according to the buttons as well as the translation

Above describes the WPBakery Page Builder editor ROW function, I will tell more about the editor's function to decorate the Basel theme, this article only describes some of the basic functions, more suitable for beginners, if you have more in-depth study of the decoration Basel theme, welcome to discuss with me!

summarize

The above is an introduction to the basic features of Row (ROW) in WPBakery Page Builder editor. In the next post, we will continue to explain more features of the editor to help you fully renovate Basel theme, stay tuned.

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