Skip to main content
Skip table of contents

Exploring available block types

Purpose and scope

Each WebShop page is built by combining a number of different sections to showcase your company and product to its best advantage. Each section can contain blocks, pages or links, or a combination of these three items.

You can use either Pages (found in Management Interface) or Visual Page Builder (found in WebShop) to create new or edit existing blocks. In Pages, a block is one or more elements stored under the same branch in the content navigational tree. In Visual Page Builder, a block is an element that you drag and drop from the controls on left panel to the main content body. The same set of blocks are used in both methods.

The purpose of this article is to list and explain the purpose of each block type.

Terms and concepts used in this article

Term

Definition

Block

one or more elements that are stored under the same branch within the navigational tree.

Branch

set of nodes where a node can be a link, a page or a block.

Navigational tree

file directory that contains WebShop content consisting of branches and node.

Mode

specifies which set of blocks are available for use when you use Visual Page Builder. Two modes are available:

  • Basic - contains the default set of blocks

  • Expert - contains an extra set of blocks which offer additional functionality

Really Simple Syndication

(RSS), a standardised system for distributing content from an online publisher.

Slider

a control that allows you to scroll horizontally through a number of items without changing the display format or other information on the screen.

WYSIWYG editor

a text editor that displays your content as you would see it on WebShop.

Available blocks

The same set of blocks are used in both Pages and Visual Page Builder.

  • In Management Interface, select Pages, and then either select New Block or open an existing block. This opens the WYSIWYG editor, allowing you to create a new or edit an existing block.

  • In WebShop, click Visual Page Builder [beta] on the bottom right of your screen. This opens Visual Page Builder, which presents the default set of blocks available (Basic mode). An extra set of blocks is available in Expert mode.

While this page lists the block types available in both Pages and Visual Page Builder, read our step by step guides on how to build content in Pages and Visual Page Builder.

In both cases, the list of block types available are:

Block name

in Pages

Block name

in Visual Page Builder

Block icon

in Visual Page Builder

Description

Mode

CMS - Section

Found under Layout in left panel controls.

Block name: Full Width

Displays a full width content block.

Basic

CMS - Grid Column and/or CMS - Grid (With Columns)

nested in a CMS - Section

Found under Layout in left panel controls.

Block name: One column

Displays a one column content block.

Basic

CMS - Grid Column and/or CMS - Grid (With Columns)

nested in a CMS - Section

Found under Layout in left panel controls.

Block name: Two columns

Displays a two column content block.

Basic

CMS - Grid Column and/or CMS - Grid (With Columns)

nested in a CMS - Section

Found under Layout in left panel controls.

Block name: Three columns

Displays a three column content block.

Basic

CMS - Grid Column and/or CMS - Grid (With Columns)

nested in a CMS - Section

Found under Layout in left panel controls.

Block name: Four columns

Displays a four column content block.

Basic

CMS - Grid Column and/or CMS - Grid (With Columns)

nested in a CMS - Section

Found under Layout in left panel controls.

Block name: Six columns

Displays a six column content block.

Basic

Banner - Grid

Found under Banner in left panel controls

Block name: Banner

Displays a preselected banner as a single item or in columns (2,3,4 or 6).

Key points

Banner sets must be configured before using this block. To configure a banner set, click Banners in Management Interface.

Configurable options

  • Column size

  • Whether or not to show tiles

  • Padding

Basic

Banner - Slider

Found under Banner in left panel controls

Block name: Banner Slider

Displays preselected banners as a slider item or in columns (2,3,4 or 6).

Key points

Banner sets must be configured before using this block. To configure a banner set, click Banners in Management Interface.

Configurable options

  • Which banner set you wish to display

  • Grey scale hover

  • Transition style

  • Time between transitions

  • Whether you wish to paginate it or not

  • Whether you wish to drag the slider left to right

  • Size of each grid for small, medium or default screen sizes

Basic

Banner - Slider Hero

Found under Banner in left panel controls

Block name: Slider Hero

Displays the image as a large full width Hero Banner. Offers different transition styles, automatic pagination and selectable transition time.

Key points

Banner sets must be configured before using this block. To configure a banner set, click Banners in Management Interface.

Configurable options

  • Transition style - one of slide, back slide, fade, fade up or go down

  • Time between transitions

  • Whether you wish to paginate it or not

  • Whether you wish to drag it or not

Basic

CMS - Content

Found under Content in left panel controls

Block name: Text

Use a WYSIWYG editor to create content for display.

Basic

CMS - Image Overlay

Found under Content in left panel controls

Block name: Image

Display an uploaded image.

Configurable options

  • Add a background colour

Basic

🆕 Image + Text

Found under Content in left panel controls

Block name: Image + Text

Display an uploaded image and a text block.

Configurable options

  • Include title and body text

  • Modify the text colour

  • Modify the background colour

  • Specify the location of the text, either to the left or on top of the image.

Basic

CMS - Latest Grid

Found under in left panel controls

Block name: Latest Listing

Displays child pages of a selected page as a single block. The main page can be selected, view all button, and a publication date.

Configurable options

  • CMS page where the latest news articles are extracted from

  • Number of articles in the grid

  • Whether or not to show a “View all“ button. When clicked, all articles contained in the listed CMS page are displayed

  • Show published date

Basic

CMS - Latest Slider

Found under Content in left panel controls.

Block name: Latest Listing Slider

Displays child pages of a selected page as a single block with slider option.

Configurable options

  • CMS page where the latest news articles are extracted from

  • Number of articles in the slider

  • Whether or not to show a “View all“ button. When clicked, all articles contained in the listed CMS page are displayed

  • Show published date

  • Time between transitions

  • Whether you wish to paginate it or not

  • Whether you wish to drag the slider left to right

  • Size of each grid for different screen sizes

  • Number of columns for different size screens

  • Include padding around the block

Expert

CMS - Media Element

Found under in left panel controls

Block name: Icon + Text

Displays text with a title and an image.

Configurable options

  • Change icon colour, if the uploaded icon is has .png or .svg format

  • Change background colour

  • Add text

  • Select location of icon (either above or to the left of the text)

Basic

CMS - Slider

Found under Content in left panel controls.

Block name: CMS Slider

Use a WYSIWYG editor to create content for display with a slider option

Configurable options

  • Transition style

  • Transition time

  • Whether you wish to paginate it or not

  • Whether you wish to drag the slider left to right

  • Number of columns for different size screens

  • Include padding around the block

Expert

CMS - Tabs

Found under Content in left panel controls.

Block name: Tabs

Add tabs.

Expert

Category - Browse Categories

Found under Category in left panel controls.

Block name: Browse Categories

Include a section containing category names and an image for each category. Each row can have 1 to 6 categories displayed as circles.

Configurable options

  • Include a title.

  • Add categories, with between one and six categories displayed as circles on each row.

Available as part of the Machinery and Spare Parts SmartPack.

Category - Grid Select

Found under Category in left panel controls

Block name: Categories

Displays chosen category as a single item or columns (2,3,4,6).

Configurable options

Categories can be added one by one. Adding more categories within a selected columns amount adds additional row.

Basic

Category - Grid

Found under Category in left panel controls.

Block name: Preselected categories

Displays chosen category as a single item or columns (2,3,4,6).

Configurable options

  • Select the top level category from your category tree, and all categories underneath that level is displayed

  • Select how many columns you wish to display categories in (between 2 and 6 columns).

Expert

Category - Grid with Highlight

Found under Category in left panel controls.

Block name: Category Grid with Highlight

Displays one main category and four sub-categories.

Basic

Deep Search

Found under Misc in left panel controls.

Block name: Deep Search

Improved category and category child search by providing two drop-down boxes which are populated with a category and its children and an additional search box where your customer can further refine what they are searching for.

Available as part of the Machinery and Spare Parts SmartPack.

Twig Block

Found under Misc in left panel controls.

Block name: Twig Block

TWIG-block.png

Use the in-built Twig editor to extend the look and feel of your WebShop pages by using our templating language, Twig. Twig consists of a standard syntax that uses expressions, variables and tags to control the content and logic of each template. See an example of this here.

External Page Feed (RSS)

Found under Misc in left panel controls.

Block name: RSS Feed

Adds a RSS feed to your WebShop.

Key points

  • The URL you enter must be a specific RSS feed URL

  • The content that supplies the feed must be hosted externally

  • You must include a value in the Page Limit field

  • Typically, external RSS feeds are text only

Configurable options

  • In Desktop view, the number of columns displayed.

Basic

Animate in

Found under Misc in left panel controls.

Block name: Animate in

Adds an animation to a content block.

Configurable options

  • Specify animation type (fade, zoom, flip)

  • Specify animation direction (left, right, up, down)

Expert

Form - Wufoo

Found under Third Party in left panel controls.

Block name: Wufoo Form

Adds a Wufoo form to your WebShop.

Key points

Before adding this block, you must:

  1. Have a Wufoo account

  2. Integrate Wufoo with Experlogix Digital Commerce

Basic

Media - Video

Found under Content in left panel controls.

Block name: Video

Adds video.

Basic

Product - Add to Cart

Found under Product in left panel controls.

Block name: Add to Cart

Adds “Add to Cart” block with quantity field.

Expert

Product - Grid

Found under Product in left panel controls.

Block name: Products

Select specific products from your product list, which are displayed as single item.

Configurable options

  • Use ‘Selected’ option to pick products from you product list.

  • Use your pre-configured Featured list

  • Display products in 1, 2,3, 4 or 6 columns

Basic

Product - Slider

Found under Product in left panel controls.

Block name: Product Slider

Select specific products from your product list, which are displayed as single item with slider option.

Configurable options

  • Use ‘Selected’ option to pick products from you product list

  • Use your pre-configured Featured list

  • In Desktop view, display products in 1, 2,3, 4 or 6 columns

  • Select pagination

  • Select transition time in seconds

Basic

Reviews IO

Found under Third Party in left panel controls.

Block name: Reviews.io

Adds a reviews.io feed to your WebShop.

Basic

Trust Pilot

Found under Third Party in left panel controls.

Block name: Trustpilot

Adds a Trustpilot feed to your WebShop.

Basic

Flockler

Found under Third Party in left panel controls.

Block name: Flockler

Adds a Flockler feed to your WebShop. Read Adding a Flockler social media feed to WebShopfor more information about Flockler social media feed.

Key points

Before adding this block, you must have a Flockler social media feed.

Available as part of the Digital Marketing SmartPack.

Tasks

JavaScript errors detected

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

If this problem persists, please contact our support.