Breadcrumbs

Exploring available block types

Purpose and scope

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

You can use either Pages (found in the Management Interface) or Visual Editor (found in WebShop) to add, edit, or delete blocks. In Pages, a block is one or more elements stored under the same branch in the content navigational tree. In Visual Editor, 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 is 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 block

The same set of blocks is used in both Pages and Visual Editor. This article lists the blocks available in both Pages and Visual Editor. Read our step-by-step guides on how to build content in Pages and Visual Editor. In both cases, the list of block types available is:

Block name

in Pages

Block name

in Visual Page Builder

Block icon

in Visual Page Builder

Description

Mode



CMS - Section

Found under Layout in the panel on the left.

Block name: Full Width
Layout_Full_Width.png

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 the panel on the left.

Block name: One column
Layout_One_Column.png

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 the panel on the left.

Block name: Two columns
Layout_Two_Columns.png

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 the panel on the left.

Block name: Three columns
Layout_Three_Columns.png

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 the panel on the left.

Block name: Four columns
Layout_Four_Columns.png

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 the panel on the left.

Block name: Six columns
Layout_Six_Columns.png

Displays a six-column content block.

Basic



Banner - Grid

Found under Banner in the panel on the left.

Block name: Banner


Banner_Banners.png

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, select Banners in the Management Interface.

Configurable options

  • Column size

  • Whether or not to show tiles

  • Padding

Basic



Banner - Slider

Found under Banner in the panel on the left.

Block name: Banner Slider
Banner_Banners_Slider.png

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, select Banners in the 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 the panel on the left.

Block name: Slider Hero
Banner_Slider_Hero.png

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 the 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 the panel on the left.

Block name: Text
AvailableBlocks-TextBlcok.png


Use a WYSIWYG editor to create content for display

Basic

Use a WYSIWYG editor to create content for display.

Basic

CMS - Image Overlay

Found under Content in the panel on the left.

Block name: Image
Content_Image.png

Display an uploaded image.

Configurable options

  • Add a background colour

Basic



Image + Text

Found under Content in the panel on the left.

Block name: Image + Text
Content_Image_Text.png

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 Content in the panel on the left.

Block name: Latest Listing
Content_Latest_Listing.png

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

Expert



CMS - Latest Slider

Found under Content in the panel on the left.

Block name: Latest Listing Slider
Expert_Latest_Listing_Slider.png

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 Content in the panel on the left.

Block name: Icon + Text
Content_Icon_Text.png

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 the panel on the left.

Block name: CMS Slider
Expert_CMS_Slider.png

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-sized screens

  • Include padding around the block

Expert



CMS - Tabs

Found under Content in the panel on the left.

Block name: Tabs
Expert_Tabs.png

Add tabs.

Expert



Category - Browse Categories

Found under Category in the panel on the left.

Block name: Browse Categories
Vertical_Browse_categories.png

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 the panel on the left.

Block name: Categories
Category_Categories.png

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 the panel on the left.

Block name: Preselected categories
Expert_Preselected_Categories.png

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 the panel on the left.

Block name: Category Grid with Highlight
Category_Categories_Highlight.png

Displays one main category and four sub-categories.

Basic



Deep Search

Found under Misc in the panel on the left.

Block name: Deep Search
Vertical_Deep_Search.png

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 the panel on the left.

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 the panel on the left.

Block name: RSS Feed
Misc_RSS_Feed.png

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 the panel on the left.

Block name: Animate in
Expert_Misc_Animate_In.png

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 the panel on the left.

Block name: Wufoo Form
Third_Party_Wufoo.png

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 the panel on the left.

Block name: Video
Misc_Video.png

Adds video.

Basic



Product - Add to Cart

Found under Product in the panel on the left.

Block name: Add to Cart
Expert_Product_Add_Cart.png

Adds “Add to Cart” block with quantity field.

Expert



Product - Grid

Found under Product in the panel on the left.

Block name: Products
Product_Products.png

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 the panel on the left.

Block name: Product Slider
Product_Products_Slider.png

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 the panel on the left.

Block name: Reviews.io
Third_Party_Reviews.png

Adds a reviews.io feed to your WebShop.

Basic



Trust Pilot

Found under Third Party in the panel on the left.

Block name: Trustpilot
Third_Party_Trustpilot.png

Adds a Trustpilot feed to your WebShop.

Basic



Flockler

Found under Third Party in the panel on the left.

Block name: Flockler
Third_Party_Flockler.png

Adds a Flockler feed to your WebShop. Read Adding a Flockler social media feed to WebShop for 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.



Related content