Skip to main content
Skip table of contents

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

Purpose and scope

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

This step by step guide outlines how you use Visual Page Builder to create, edit or delete blocks.

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.

Step by step

Step 1: Log into Aphix WebShop

Login

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

Step 2: Open Visual Page Builder

Open

Click Switch to Visual Editor [beta], located at the bottom right of your screen. This opens Visual Page Builder.

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: Add a block

Add

The blocks structure allows you to nest different block types so you can create complex page layouts and designs.

  • Drag the block you wish to add from the controls on left panel to where you want to drop it on the page.

  • Block Controls are found at the top right of each block. Use them to move the block, edit block settings or delete the block.

Example

You would like to add your product categories to the landing page of Aphix WebShop.

Drag the block named “Categories” and drop it into the page.

Click the Edit settings icon in Block Controls. This opens the options you can modify in the left panel of Visual Page Builder. Options available for the Categories block are shown:

Make changes as required.

Changes are made automatically and immediately to Aphix WebShop.

Action 2: Edit a block

Edit

To edit an existing block, select the block and click the Edit Settings icon in the Block controls.

Changes are made automatically and immediately to your WebShop.

Action 3: Configure device visibility for specific device type

Configure device visiblity
  • Drag and drop a Full Width block on the page.

  • Select the device that you wish this block to be hidden on.

  • Switch the Hide on Device setting on.

Action 4: Delete a block

Delete

To delete an existing block, select the block and click the Delete icon in the Block Controls.

Changes are made automatically and immediately to Aphix WebShop.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.