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
  • Choose the heading level of the tag around the title. This will help on your SEO. You can read more about this in our SEO documentation.
  • 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 slider) a specific settings section will show. In this case the Grid settings.
    • Grid settings:
      • Choose the grid layout
      • Show/hide load more
    • ​Slider settings - Choosing this setting will also open a section called "Advanced slider settings" 
      • ​Choose number of visible items in the slider
      • Reveal/Hide slides before and after
      • Gap/No gap between slider items
      • Choose the arrow style and placement
      • Select the indicator style

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.

You can also set the image aspect ratio in the section of the same name.

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.

In the advanced section you can:

  • Choose the content of the list - Show articles or other lists
  • Set the depth of the list - should it show all levels or just the first level 
  • Select the context of the list - This uses tags to choose what articles to show 

The article list column can be used to display related articles. As an example let's say the article is a recipe on a dish containing eggs. The reader might like to read other recipes using eggs.

Using the same structure as the default Swift solution all recipes are placed in a parent article list page called "recipes" with subpages below dividing the recipes into breakfast, lunch, dinner, and so on. 
In this case you choose "Recipes" as the List source. As we want the article list to contain related articles based on the tag "Egg" across the categories, we make sure to set the List depth to "All levels".
In the List context section, you choose the "Egg" tag. This way, the article list will contain all other articles in the recipe folder with the tag "Egg". Using this List context will also filter out the article the list is placed on as it is not related to itself. 

The block quote column is a way to highlight and style a quote. It is especially helpful when working with our articles, as it makes it easier to highlight words from the article in a stylish way.

Figure 7.1 The blockquote column

The blockquote column comes with the following configuration options:

Figure 7.2 The blockquote column configuration options

The column editor lets you:

  • Give the column a title
  • Write the quote to highlight (this field is a required field)
  • Name the quote author (this field is a required field)
  • Write a quote source link label
  • Write/select a quote source link. This can be either an internal or external link
  • Choose a quote author image to be displayed alongside the quote
  • Select the layout of the theme

For styling you have the following options:

  • Select a theme for the quote column
  • Set the space around the content
  • Choose the font size of the quote

The breadcrumb navigation can be used to let customers keep track of their location on the website. 

The breadcrumb navigation column does not have many options for the configuration.

 

In the breadcrumb navigation column you can:

  • Give the column a title
  • Show/hide the product in the breadcrumb navigation - If toggled on a details page, the product will show in the navigation path. It will not be clickable

The breadcrumb navigation column can be used on content pages, product list pages, and product details pages 

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

Figure 9.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 9.2) the following options are possible:

Figure 9.2 The general Carousel Editor

In the options you can:

  • Give the column a title
  • 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 9.3) are the following:

Figure 9.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.

The employee column is an easy way to display employees along side their details, such as email, phone number, social media profiles and much more. All the information displayed on the column is added in the editor of the column.

Figure 11.1 Two employee columns

The employee column comes with the following configuration options:

As general configuration you can:

  • Choose an employee image
  • Write the name and title of the employee
  • Choose the layout
  • Choose the alignment for the employee info

You are also able to add info about the employee such as phone number, email, etc. When you add new information, you can:

  • Choose a link for the listed info. This can be either internal and external links as well as emails and phones. If a phone number should work as link, you need to use the prefix "tel:".  
  • Write the displayed text for the link
  • Select and icon for the listed info

You can sort the order of the information by drag and drop.

For styling options you have a couple of options:

  • Choose a theme for the column 
  • Set the space around the content
  • Choose the heading level of the tag around the title. This will help on your SEO. You can read more about this in our SEO documentation

For styling you can choose a theme for the column as well as the space around the content.

A 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 12.1 but there are many variations over the same theme goin on.

Figure 12.1 4 feature columns side by side

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

Figure 12.2 The settings of the feature column

When configurating the Feature column you can:

  • Select an icon or upload an image
  • Specify an alt-text for accessibility and SEO purposes
  • Choose the size of the icon
  • 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
  • Choose the heading level of the tag around the title. This will help on your SEO. You can read more about this in our SEO documentation
  • Set the title size

For the icon, title, and text you can choose:

  • Color. Choosing foreground will select a color based on the chosen theme. Accent will create an accent color based on the theme
  • Opacity - Choose between 100%, 85%, and 75% opacity

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

Figure 13.1 An image column (right)

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

Figure 13.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 15.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 15.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 15.2 Adding the Google API key to the website

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

 

Figure 15.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 the heading level of the tag around the title. This will help on your SEO. You can read more about this in our SEO documentation
  • Select 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 Navigation column is a column type available in footers & headers - as the name implies, it is used to create navigations (Figure 17.1). 

This column is often used when designing headers and footers, that why the documentation is placed there.  

Figure 17.1 Example of horizontal navigation in the header

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 18.1).

Figure 18.1 A poster column

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

Figure 18.2 The poster column settings

You can: 

  • Select the poster image 
  • Specify an alt-text for accessibility and SEO purposes
  • Set a title and a subtitle
  • Select a layout 
  • Choose the poster height 

You have the option of adding either one or two buttons to the Poster column. If you want to add a button you must write both a button label and a button link. If you want to add two buttons, you must write the button label and link for both, otherwise only one button will show. 

The poster column also comes with styling options:

  • Select a theme for the column
  • Set the image filter on/off
  • Choose the button style for each individual button
  • Choose the button size of both buttons
  • Set space around
  • Toggle/Untoggle text readability 

In the settings there is a section for specific title and subtitle settings. These are:

  • Title:​
    • Choose the heading level of the tag around the title. This will help on your SEO. You can read more about this in our SEO documentation
    • The size of the title  - Choose from Display-1 to H6. The H1 to H6 are not to be confused with the heading level explained above. The title size setting ONLY controls the size of the title NOT the heading level
    • The Color of the title. Choosing foreground will select a color based on the chosen theme. Accent will create an accent color based on the theme
    • Title opacity - Choose between 100%, 85%, and 75% opacity
  • Subtitle
    • ​The size of the subtitle. Choose between FS-1 to FS-6
    • The Color of the subtitle. Choosing foreground will select a color based on the chosen theme. Accent will create an accent color based on the theme
    • Subtitle opacity - Choose between 100%, 85%, and 75% opacity of the subtitle

The Products group slider is based on the Swiffy slider, which is why you will see many of the same features and settings as in our Slider column. Though instead of creating slides to be displayed, you select groups or subgroups of products to be displayed.

Figure 19.1 The product groups slider column

The product group slider column allows you to do the following configuration:

Figure 19.2 The settings of the product group slider

In the column editor you can:

  • Write a header title and subtitle – and choose to hide them
  • Choose what type group you want the slider to be based upon
    • Choose between subgroups of selected groups, selected groups, and subgroups of the current group the customer is located in. 

In the Slider settings section, you can:

  • Choose how many slider items that should be visible
  • Choose the ratio of the slider
  • Specify if slides should be revealed before and after
  • Specify if there should be gaps between slider items
  • Select an arrow style and placement
  • Choose the indicator style

In the Styling section you can:

  • Choose a theme for the column
  • Choose a theme for the group displayed
  • Select the button alignment, style, size and if the link should be stretched or not
  • Set a Title and subtitle size
  • Set the Text readability to max width on or off

In the Advanced Slider Settings, you can focus on the smaller details of the slider:

  • You have a variety of different smaller settings you can tick on or off
  • Choose if there should be an animation of each slide item
  • Choose if you want Autoplay and how long the interval should be

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 20.1).

Figure 20.1 A product slider and grid view

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

Figure 20.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

In the Slider Settings you can choose the surrounding details:

  • Choose if slides should be revealed before and after the displayed slides
  • Select the arrow style
  • Select the arrow placement
  • Choose the indicator style

In the Advanced Slider Settings, you can focus on the smaller details of the slider

  • You have a variety of different smaller settings you can tick on or off

As this is a slider/grid consisting of products, you also have the option to display ecommerce badges on the products. This is done in the Badges section.

  • Select the new badge
  • Choose the sale badge and what type of sale to display
  • Choose the campaign badges that needs to be displayed

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 21.1).

Figure 21.1 A search field column

The search field column comes with the following configuration options:

Figure 21.2 A search field column

You can:

  • Set the paragraph name 
  • Select the pages related to displaying search results:
    • Search results page
      • ​The results shown in the search field depends on which service page you link to. Read more about that here. 
    • 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 22.1).

Figure 22.1 A section header

The section header column comes with the following configuration options: 

Figure 22.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
  • Choose the heading level of the tag around the title. This will help on your SEO. You can read more about this in our SEO documentation.
  • Set the title size and subtitle size
  • Toggle/Untoggle the text readability

For the title and subtitle you can choose:

  • Color. Choosing foreground will select a color based on the chosen theme. Accent will create an accent color based on the theme
  • Opacity - Choose between 100%, 85%, and 75% opacity

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 23.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 23.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 23.2 Simple map settings

You can:

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

For styling options you can:

  • Choose the heading level of the tag around the title. This will help on your SEO. You can read more about this in our SEO documentation
  • Set the size for the title 

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 Slider column let you create different slides and displays them in a carousel. The slider column comes with a lot of different design and styling options, meaning that you can customize the slider to your likening.

Figure 25.1 The Slider column

The slider column comes with the following configuration options:

Figure 25.2 The settings of the slider column

The settings are divided into different section:

In the General settings:

  • Give the column a title
  • Add and manage slider items, this will be explained later in the documentation
  • Choose how many slider items that are visible
  • Choose the slider ratio

In the Slider Settings you can choose the surrounding details:

  • Choose if slides should be revealed before and after
  • Choose if there should be gaps between items
  • Select the arrow style
  • Select the arrow placement
  • Choose the indicator style

The Slider Styling is about theme and text styling

  • Choose the button size
  • Set the Space around
  • Select the Title and subtitle size
  • Choose the theme for the column

In the Advanced Slider Settings, you can focus on the smaller details of the slider

  • You have a variety of different smaller settings you can tick on or off
  • Choose if there should be an animation of each slide item
  • Choose if you want Autoplay and how long the interval should be

The slider obviously only works with Slide items to display. In the Slide item options you have the following options:

Figure 25.3 The settings of the slider item

You can:

  • Select and image for the item
  • Write an alt-text for accessibility and SEO purposes
  • Choose the item layout
    • Please note that the last layout option is meant for displaying logos and other small images. Using this layout on larger images will result most likely affect the image quality. For larger images we recommend using one of the first three layout options.  
  • Choose the content alignment
  • Write a title, subtitle, and text
  • If you want a button displayed, write a button label
  • Choose between a stretched link or not
  • Choose the link type and where it will link to

For styling options, you can:

  • Choose a theme for the item
  • Select the button style
  • Toggle text readability on/off

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

Figure 27.1 A text column

The text column comes with the following configuration options:

Figure 27.2 The settings of the text column

You can:

  • Provide a title, a subtitle, and a text
  • Select a layout

You also have some button settings. If the button fields are left empty, no buttons will appear on the column. This means that to get buttons on the column, you must enter information about only button 1 or both button 1 and 2 depending on the number of buttons you want.

This column type also comes with additional styling options:

  • Select a theme and a button style
  • Set space around the content
  • Choose the heading level of the tag around the title. This will help on your SEO. You can read more about this in our SEO documentation
  • Set the title size and subtitle size
  • Toggle max-width on or off

For the title, subtitle, and text you can choose:

  • Color. Choosing foreground will select a color based on the chosen theme. Accent will create an accent color based on the theme
  • Opacity - Choose between 100%, 85%, and 75% opacity

The Text Advanced is, as the name suggest, a more advanced version of the Text column. This means that you will have additional features alongside the features known from the Text column.

Figure 28.1 The Text Advanced column

The Text Advanced column has a lot of different features allowing you to configurating the column to your likening.

Figure 28.2 The settings of the Text Advanced column

As general settings you can:

  • Write an Eyebrow text, Title, Subtitle, and text
  • Choose a theme for the whole column

For button settings you can add and edit two buttons:

  • Give the button a label
  • Choose where it should link to
  • Select an icon and the icon position in relation to the label
  • Choose the style of the button

To add buttons to the Text Advanced column you must fill out the label and link fields. Otherwise, the buttons will not be added to the column.

In the content settings section, you can:

  • Choose the content, and text alignment
  • Set the spacing around the content. This can be individually configured for each side and for different devices
  • Add Css classes to the content

The eyebrow, title, subtitle, and text settings are similar. In these sections you can:

  • Choose the heading level of the tag. This will help your SEO. You can read more about this in our SEO documentation
  • Choose the text size, color, and opacity. The text color is based on the theme chosen.
  • Set the bottom spacing. This can be set differently for different devices.

 

The Text Advanced also allows custom CSS. This uses your CSS collections. You can read more about those here.
In the CSS section in these settings, you can assign the relevant CSS collections to this Text Advanced column. 

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 29.1 Example Text and image

This column comes with the following configuration options: 

You can do the following:

  • Provide a title, a subtitle, and a text
  • Select an image - and set the image aspect ratio
  • Specify an alt-text for accessibility and SEO purposes
  • Select a layout for the column

You also have some button settings. If the button fields are left empty, no buttons will appear on the column. This means that to get buttons on the column, you must enter information about only button 1 or both button 1 and 2 depending on the number of buttons you want.

This column type also comes with additional styling options:

  • Select a theme
  • Choose the button style for each button
  • Set image resize and fit setting to either clip or resize
  • Set space around the content
  • Choose the heading level of the tag around the title. This will help on your SEO. You can read more about this in our SEO documentation
  • Set the title size and subtitle size
  • Toggle/Untoggle text readability 

For the title, subtitle, and text you can choose:

  • Color. Choosing foreground will select a color based on the chosen theme. Accent will create an accent color based on the theme
  • Opacity - Choose between 100%, 85%, and 75% opacity

The vertical navigation column is used to create a vertical navigation (Figure 30.1).

Figure 30.1 The vertical navigation column - here used in the customer center

The Vertical navigation editor let you configure a few things: 

Figure 30.2 The settings of the vertical navigation

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

Figure 31.1 The Video Player column

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

Figure 31.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 32.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 32.1 The Video Poster column

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

In the editor you can customize the following things:

  • The source for the video poster.
  • The title, subtitle, and button label.
  • 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 and size of the button
  • The poster height
  • Set the space around the content
  • Choose the heading level of the tag around the title. This will help on your SEO. You can read more about this in our SEO documentation
  • Set the size for the title and the subtitle
  • Toggle/Untoggle text readability 

 

Figure 32.3 The settings of the Video Poster column