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:
|
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
| 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
| 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
| 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
| Basic |
đ Image + Text | Found under Content in left panel controls Block name: Image + Text |  | Display an uploaded image and a text block. Configurable options
| 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
| 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
| Expert |
CMS - Media Element | Found under in left panel controls Block name: Icon + Text |  | Displays text with a title and an image. Configurable options
| 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
| 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
| 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
| 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 |  | 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
Configurable options
| Basic |
Animate in | Found under Misc in left panel controls. Block name: Animate in |  | Adds an animation to a content block. Configurable options
| 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:
| 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
| 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
| 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. |
