This article is also available in:
If this is your first time using Website Builder, we will assist you in getting started with building your amazing website, as well as familiarizing yourself with the interface and basic functions of Website Builder.

In this article

A. Access the Website Builder
B. Overview of the Website Builder interface
C. Header bar
D. Web front
E. Side bar settings
F. Layer panel
G. Insert panel
H. Quick bar settings
I. Styling settings

A. Access the Website Builder

You can access the Website Builder when creating a new product or page on your website.

Create a product

From your ShopBase Creator admin, go to Products. Then, click Add product and create your product.


Once your product is created, click Design sales page to access the Website Builder and start building your product page.


In the template selection page, search and select a suitable template for your product. Then, click Apply to use the template on your web page.


Please refer to this article for more information about template on Website Builder.
Create a page

From your ShopBase Creator admin, go to Website > Pages. Then, click Add new page and create your page.


In Look & Feels section, click Customize.


You can also click Customize in the section of your page on the Pages list to access its Website Builder.


In the template selection page, search and select a suitable template for your product. Then, click Apply to use the template on your web page.


Please refer to this article for more information about template on Website Builder.

B. Overview of the Website Builder interface

The Website Builder interface can be divided into 3 main sections:

The Header bar displayed on top of the interface holds all sorts of options and commands related to files, selections, layers, type, and more.


The Side bar displays all content and style attribute settings for each element of your web page.


The Web front is the area where you view and edit your web page. You can click and drag each element to rearrange them on the web page as desired.



C. Header bar

Refer to the list below for all options and commands on the Header bar.


Exit: Close the Website Builder and return to your dashboard.
Layer button: Enable the Layer panel.
Style button: Enable the Styling settings panel.
Insert button: Enable the Insert panel where you can add more elements to the web page.
The name of the web page you are editing.
Save status message.
Undo button.
Redo button.
Preview button: Preview the page on your website.
Switch device button: Switch between desktop and mobile view.
Save button.
Preferences button: Advanced setting functions.

D. Web front


This section displays the complete website interface when your page is published. You can select to display it in desktop or mobile view for easy visualization.

You can click and drag each design block within the Web front section to rearrange them on your website.


When displayed on desktop and mobile, all content and values of each design block will be synchronized, but Website Builder also includes a function that allows customers to adjust different colors, styles, and sizes for each device type.

E. Side bar settings


This section includes the Side bar settings, Layer panel, and Insert panel that allows you to easily set up the values and properties of each section, row, column and block.

Check out our guides to:

Set up sections on Website Builder.
Set up blocks on Website Builder.

F. Layer panel


In the Layer panel, you can view the list of layers of the web page you are designing:

Each layer will have the following structure: Section > Row > Column > Block.
Each layer can contain smaller sublayers which can be configured to your preference.
The layer list is displayed in the order of the elements on your web page from top to bottom. You can easily drag and drop to rearrange the order of layers.


When you insert new elements into the web page, they will also be displayed in the Layer panel.

Check out our guides to:

Set up sections on Website Builder.
Set up blocks on Website Builder.

G. Insert panel

The Insert panel allows you to add more blocks and sections into your web page.

You can select a block or section from our prebuilt library to use and customize.
Blocks and sections that are saved to your library are also listed here for you to easy select and set up your web page coherently.



H. Quick bar settings

You can use the quick bar settings to quickly edit each element of your web page. Depending on the element's actual use and properties, different quick bar settings are available for them. Below is the list of the most common quick bar settings:


Move the element one layer forward/backward.
Hide the selected element.
Duplicate the selected element.
Save the element to your library.
Delete the selected element.

I. Styling settings



Styling settings, which includes Site styles and Page styles, allows customers to easily set the same color, font and button style for the entire Website. These settings helps the Website to have a uniform and consistent interface.

When there is a need to design a Web page with separate styles and colors, you can use Page Style, the function will create a separate style for the current Page without affecting the overall style of the entire website.

After setting up a styling setting, you can also save it to your library for later use.

Check out our guide to:

Understand styling settings in Website Builder.
Was this article helpful?
Cancel
Thank you!