Content Columns

Content Columns define the type of content on your page. The types of columns available depends on what content you are about to create. Some are available when you create your header, others when you create your footer and landing page. The following column types are available:

You can read more about each column type below.

Accordion is often used when making a FAQ site. This allows you to structure a big piece of text by dividing it into pieces with suiting headers. This will make it less confusing for the reader.

Figure 2.1 The accordion column - here used as a FAQ

The accordion column comes with the configuration options shown on (Figure 2.2).

Figure 2.2 The accordion editor

Using these options, you can:

  • Change the title of the accordion
  • Decide whether to hide the title or not
  • Add, edit or delete accordion items

For styling options, you can:

  • Chose the theme of your accordion
  • Set the space around the accordion
  • Change the title size.

The App column is used to create a column with an app attached:

This column type is used to create the product list and product details pages in the examples shops (Figure 3.1).

Figure 3.1 An app in frontend - here the product catalog app

In general the app column is used during the design phase to add more advanced features to a website. It is not typically used for day-to-day operations.

When added, this column features two tabs (Figure 3.2).

Figure 3.2 The App column

On the first tab you can:

  • Write a title
  • Choose a theme
  • Add space around the column

On the second tab you can:

  • Select an app

The article list column is used to display a list of written articles on your site. It can display either articles or article list pages. On Figure 4.1 it’s used to display three different article list pages, that will lead the reader to articles from those three categories. For examples on the different use of this column, check this example guide.

Figure 4.1 An example on how to use the article list column

The article list column can be designed in various ways.

Figure 4.2 The settings of the article list column

In the column settings you can:

  • Give the column a title
  • Choose how the article will be sorted
  • Set the maximum number of items in the list
  • Show/Hide the button
  • Choose the layout for each item in the list
  • Select the layout for the list.
  • Depending on the choice on the layout of the list (grid or carousel) a specific settings section will show. In this case the Grid settings.

The layout on mobile devices will align with the design choices made for the desktop users. Meaning if you choose a grid layout for desktop, it will show as grid on mobiles as well.

In styling, you can:

  • Choose the item shape
  • Set the title size for the items
  • Choose a theme for the column
  • Choose a theme for the items only

It’s also possible to change the theme individually on each item in the list as shown in the example above. This is done in the styling section on the page content of each specific article/article list page.

The most important thing to change in the column settings are in the advanced section. Here you’ll need to set a list source. This can either be the folder your article list pages are placed in or the article list page your articles are placed in.

The carousel column can be used as a tool to display new items or campaigns (Figure 5.1). It allows you to display various items without needing the ekstra space on the page.

Figure 5.1 The carousel column

The carousel column lets you customize both the general settings of the carousel and options for each carousel items. In the general settings (Figure 5.2) the following options are possible:

Figure 5.2 The general Carousel Editor

In the options you can:

  • Give the column a logo
  • Customize how the items are displayed. This includes arrows, animation, autoplay and interval
  • Add, edit or remove the items of the carousel.

The editor also lets you style the column. This can be done by chosen different image sizes, button sizes and more.

 

The options for each individual column item (Figure 5.3) are the following:

Figure 5.3 The individual Carousel Editor
  • Select the image for the item
  • Choose a title and subtitle, these can be hidden should you want that
  • If you want a title and subtitle displayed, you can choose where you want it displayed on the image
  • If you want a button, choose what text you want displayed on the button and where you want it to link the customer to

Additionally, you can also set the theme of the item and choose what kind of styling the button should follow. You can also toggle image filter and text readability on/off.

feature is a type of content featuring (heh) an icon or an image alongside some text. Features are often arranged in columns like in Figure 7.1 but there are many variations over the same theme goin on.

Figure 7.1 4 Features

The feature column comes with the following configuration options (Figure 7.2)

Figure 7.2 The Feature column

When configurating the Feature column you can:

  • Select an icon or an image
  • Provide a title and a text
  • Add a link
  • Select a layout

This column type also comes with a number of styling options:

  • Select a theme
  • Set space around
  • Set the title size

The Image column is built for adding an image to a row (Figure 8.1), here combined with a Poster column left.

Figure 8.1 An image column (right)

The Image column comes with the configuration options in Figure 8.2.

Figure 8.2 The Image column

When configurating the Image column you can:

  • Select/upload an image
  • Set a focal point on the image
  • Set the image aspect ratio
  • Specify an alt-text for accessibility and SEO purposes
  • Write a title (for the paragraph, not shown in frontend)
  • Choose the link type and destination

  • You can only use one location map column per page

The location map column can be used to show the location of various things. Most often it’s used to show the location of shops, warehouses, or dealers.

Using the location map column, you’re able to display some information about the selected user group. You can display:

  • Name
  • Address
  • State/Region
  • Phone number
Figure 10.1 The location map column

The location map column is built using Google Maps, which is why you must add a Google API key to your website settings (Figure 10.2). To do this, you’ll need to:

  1. Click the three vertical dots next to your webpage name.
  2. Click Edit in the dropdown menu.
  3. Scroll down and locate the Google Maps section. Add your Google API key to the empty box.
  4. Remember to hit save before leaving the page.
Figure 10.2 Adding the Google API key to the website

The following configurations are possible in the location map column (Figure 10.3):​

 

Figure 10.3 The location map settings

You can:

  • Add a title
  • Choose which users to be displayed on the map
  • In the settings section you can:

  • Choose the default map center
  • Set the initial zoom level
  • Choose the region code
  • Choose the style of the map

In styling, you can choose a theme for the column. 

  • The most important thing to change in the settings is the default map center. If the “Override retrieved coordinates” box isn’t checked, then the map won’t work. Clicking the pin icon will open a map that will help you set the correct default map center.

The Logo column is used to add a logo or text to a footer or header (Figure 12.1).

Figure 12.1 A logo column in frontend

The logo column comes with the following configuration options:

Figure 12.2 Configuring a logo column

You can:

  • Set a logo name or image
  • Set the logo width
  • Select a horizontal alignment
  • Set a link to direct visitors to when the logo is clicked

The logo column also comes with styling options - you can select a theme.

The Navigation column is a column type available in footers & headers - as the name implies, it is used to create navigations (Figure 13.1). 

Figure 13.1 Example of horizontal navigation in the header

The navigation column comes with the configuration options: 

Figure 13.2 Navigation column

You can:

  • Provide a title for the paragraph (it can be hidden)
  • Select a navigation root - all level pages under the navigation root will appear as nodes in the menu
  • Select a navigation orientation, navigation alignment, and a layout

The column also comes with several styling option sections - you can:

  • Link styling:
    • Set link font weight
    • Set link casing
    • Set link font size
  • Navigation title styling:
    • Set ​navigation title font weight
    • Set navigation title casing
    • Set navigation title font size
  • Styling:

An off-canvas navigation is a navigation which appears from off the canvas when an icon is clicked (Figure 14.1). It is available in the header only.

Figure 14.1 An off-canvas navigation

The off-canvas navigation column comes with the following configuration options:

Figure 14.2 Off-Canvas Navigation config options

Using these options you can:

  • Provide a title (for the backend, won't be shown in frontend)
  • Select an icon for the button which opens the navigation
  • Set the navigation alignment
  • Select a main navigation root - these are the nodes shown first in the navigation
  • Select a secondary navigation root - these nodes are shown after the main navigation root nodes
  • Select a utility navigation root - the nodes under here are shown at the top of the off-canvas navigation panel

This column also comes with additonal styling options:

  • Select a theme for the navigation button
  • Select a theme for the off-canvas navigation panel

The Poster column is used to create posters, which is a content type normally consisting of an image with text on it, and a button that links to either an internal or external page (Figure 15.1).

Figure 15.1 A poster column

The Poster column comes with the following configuration options (Figure 15.2):

Figure 15.2 The poster column settings

You can: 

  • Select the poster image 
  • Set a title and a subtitle
  • Select a layout 
  • Choose the poster height 
  • Set a button label 
  • Choose the stretch of the link and where it'll link to

The poster column also comes with styling options:

  • Select a theme for the column
  • Set the image filter on/off
  • Choose the button style and size
  • Set space around
  • Set the title and subtitle size
  • Toggle/Untoggle text readability 

The product slider/Grid view column is used to create a product slider in frontend – typically to promote specific products, list trending products, and so on (Figure 16.1).

Figure 16.1 A product slider and grid view

The product slider/Grid view column comes with the following configuration options:

Figure 16.2 The product slider/grid view is configured using the configuration options above

You can:

  • Set a title, a subtitle, and a button label
  • Specify the product count – the number of products to show in this slider
  • Set the image aspect ratio
  • Choose the layout of the slider/grid
  • Select the type of product to show
    • Variants
    • Most sold
    • Trending
    • Latest
    • Frequently bought
    • Selected products
    • Related products (One slider/grid for each group)

The relation section is used to relate the slider to e.g. a group or a product – see the table below for details:

Type of slider

Type of relation

Notes

Variants Product

This type of relation shows the variants of the product. Leave blank if used on a product details page

Most sold

Group

This type of slider shows the most sold products in one or more groups – you select which groups here.

Trending

Group

This type of slider shows trending products in one or more groups – you select which groups here.

Latest

Group

This type of relation shows the latest add products in the specific group

Frequently bought

Product

This type of slider shows products which are frequently bought alongside a specific product – you select which product here. Leave blank if used on a product details page.

Selected products

Specific products

This type of slider shows specific products. Select the products here.

Related products Product

This type of relation shows products related to the original product. Leave blank if used on a product details page

The product slider/grid column also comes with styling options:

  • Select a theme (general, product, image) and a button style
  • Set space around
  • See the title and subtitle size
  • Text readability - toggle max width on/off

You can use the advanced settings to override which pages the product slider directs a user to – see setting descriptions for default values.

The search field column is used to create a search field, typically in a header or footer (Figure 17.1).

Figure 17.1 A search field

The search field column comes with the following configuration options:

Figure 17.2 A search field column

You can:

  • Set the paragraph name 
  • Select the pages related to displaying search results:
    • Search results page
    • Product list page
    • Product details page
  • Select a search bar alignment
  • Select a layout

The Section Header column is used to, well, create a section header (Figure 18.1).

Figure 18.1 A section header

The section header column comes with the following configuration options: 

Figure 18.2 A Section Header column

You can:

  • Specify a title and a subtitle
  • Select a layout

This column also comes with additional styling options:

  • Select a theme
  • Set space around
  • Set the title size and subtitle size
  • Toggle/Untoggle the text readability

A simple map is used to show only one location on the page. As an example, it could show where your HQ is located (Figure 19.1).

The simple map has no customization options and only lets you add one location. The upside is that you can use this column without a Google API.

Figure 19.1 Simple map

As mentioned, you have no styling options when using the simple map. Which is why you only have the following configuration options:

Figure 19.2 Simple map settings

You can:

  • Give the column a title and choose whether to show it or not
  • Add an address as the focal point for the map
  • If you want to display the location of your company, you can enter the company name on the selected address
  • Style the title of the column

You can only use company names registered on the written address. If you write a company name, that doesn’t exist, the map won’t work.

If you leave the company name field empty, the written address will be shown instead.

The Text column is used to create text & optionally add a button under the text (Figure 21.1).

Figure 21.1 A text column

The text column comes with the following configuration options:

Figure 21.2 Example

You can:

  • Provide a title, a subtitle, and a text
  • Set a button label and a button link
  • Select a layout

This column type also comes with additional styling options:

  • Select a theme and a button style
  • Set space around
  • Set the title size and subtitle size
  • Toggle max-width on or off

The Text and image column is a content type typically used to create text-heavy content, e.g. blog posts, newsletter sections, case presentations, etc.

Figure 22.1 Example Text and image

This column comes with the following configuration options: 

You can do the following:

  • Provide a title, subtitle, and a text
  • Add a button label and button link
  • Select an image - and set the image aspect ratio and alt-text
  • Select a layout for the column
  • Choose the stretch of the link and where it'll link to

This column type also comes with additional styling options:

  • Select a theme and a button style
  • Set image resize and fit setting to either clip or resize
  • Set space around
  • Set the title size and subtitle size
  • Toggle/Untoggle text readability 

The text banner column is used to create text banners in footers or headers (Figure 23.1).

Figure 23.1 A text banner

This column comes with the following configuration options:

You can:

  • Enter a banner text and select a banner link
  • Specify the text banner font size
  • Set a layout

This column also comes with additional styling options - you can select a theme.

The Video Player column (Figure 24.1) is mainly used when you want to display smaller (on-screen size) videos as part of your page content.

Figure 24.1 The Video Player column

The editor of the Video Player (Figure 24.2) allows you to customize the following things:

Figure 24.2 The Video Player Editor

You can:

  • Give the column a title
  • Choose the Video source provider

The editor also allows you to style the column with a theme and set the Aspect ratio of the video.

You can choose to display the video inline or with a Video Poster and Modal display.

The Video Poster column (Figure 25.1) is often used at the top on the landing page. This way it will work as an eye-catching poster, that will keep the customers on the page. It can also be used to guide customers to new products or campaigns shown in the video. The video displayed in a Video Poster column will be looped - keep this in mind when choosing what to display. 

Figure 25.1 The Video Poster column

The different options for the Video Poster column (Figure 25.2) are the following:

Figure 25.2 The editor of the Video Poster

In the editor you can customize the following things:

  • The source for the video poster.
  • The title, subtitle, and button labels.
  • The layout of the video
  • How wide you want your clickable area to be and where you want your video to redirect your customers to

As additional styling options you can choose:

  • The theme for the column
  • Toggle poster image filter on/off
  • The style of the button
  • Sizes for the video, button, title and subtitle
  • Set the space around the column
  • Toggle/Untoggle text readability