Visual Page Builder in WebShop

Purpose and scope

Visual Page Builder allows you to customize the content in your WebShop using intuitive drag and drop functionality and interactive configuration controls so that your brand and content shine. Content can be created for WebShop using Pages in Management Interface or Visual Page Builder in WebShop.

The purpose of this feature guide is to describe how to use Visual Page Builder to build great content pages directly in WebShop. Next, read How do I create, edit or delete blocks using Visual Page Builder?for a step by step guide on how to build a page using blocks. Read Exploring available block typesfor a full list of blocks and their purpose.

During your product onboarding, our consultants guide, educate and support you in how to use our tools to build content for your WebShop.

Benefits

Key benefits are:

• When you launch, you have access to a simple, fully functioning WebShop that allows your customers to browse your catalogue, find out about your brand and place orders.

• You can enhance this WebShop with additional functionality that will raise your WebShop to the next level through the use of blocks, pages and links. Visual Page Builder has an intuitive, interactive interface that gets you creating content quickly and efficiently.

• Any changes you make can be done at a time that suits you.

• Any changes that you make are live immediately, so it is quick and easy to update your WebShop as you go along.

How it fits together

To use Visual Page Builder (VPB),

• You must have been assigned permissions to use Pages. Read More about permissions in Screen layout: Administrators for more information.

• You must be using our latest theme. Contact our support team for more information.

Visual Page Builder allows you to create your WebShop layout using drag and drop functionality. Once you open Visual Page Builder, the screen consists of two key elements:

• Controls on left panel

• Main content body

Controls on left panel

Use the controls on the left panel to

• Exit Visual Page Builder.

• Preview your changes in different devices.

• Modify Settings.

• Drag and drop the block you require into the main content body, and configure the block. Read our feature guide on available blocks for a full list of blocks and how they operate.

More information

Limitations

• Currently, it is not possible edit the following using Visual Page Builder

  • Catalogue content (such as product details, category names and so on),

  • Main menu,

  • Header, and

  • Footer

Step by step

Step 1: Log into WebShop

Log in

Log into WebShop with your username and password. This opens WebShop's dashboard.

Step 2: Open Visual Page Builder [beta]

Open

Click Switch to Visual Editor [Beta] i the bottom right of the screen.

Check that you have permission to view Pages (see Screen layout: Administrators) if you can not see the Switch to Visual Editor [Beta] option.

Action 1: Verify and modify settings

Modify

1. View mode

   • Select to view what your B2B, b2C or guest customer see when they open WebShop.

2. Enable Expert Mode

   • By default, Visual Page Builder opens in Basic mode, which contains a default set of blocks. Enable expert mode to get access to additional blocks for more advanced functionality. The extra blocks that are usable once enabled are:

     • Preselected categories

     • Latest Listing Slider

     • CMS Slider

     • Tabs

     • Animate In

     • Add to Cart

3. Show Permission Blocks

   • Displays blocks with the message “Hidden for <customer type>” if permissions on that block are different from the selected view.

4. Show Invisible Blocks

   • Each block that you drag and drop into the main content body can be hidden. This means that it is not visible in your WebShop. You can view all hidden or invisible blocks by using this option.

     

5. Show Device Visibility

   • Applicable for Full Width block only. Each Full Width block has an setting (called “Hide on Device“) which allows you to specify whether the block is visible or invisible on which device (Mobile, Tablet or Desktop). You can view blocks that are invisible for a particular device using this option.

     

6. Show Layer Manager

   • Displays a navigational tree in a panel to the right of the screen.

     

7. Show Layout Outline

   1. Displays a dashed box around each section on the page.

      

Tasks

• How do I create, edit or delete blocks using Visual Page Builder?