02.03 Content modules

The modules in the editor are the building bricks of your website. They can be combined in infinite ways to build exactly the pages you want on your site. Simply drag and drop the modules on to your page and release them into a placeholder.

A module will automatically open up the first time you apply it to a page. At any time you may copy, delete or edit existing modules on the page by mousing over the module and then choosing one of the options in the appearing menu.

You may link modules to your global data bank. This will make it easy to apply changes across all modules on the site when data is updated (e.g. when a phone number is changed etc.). Read more about how to work with global data under the Account settings-section.

There are four categories of modules: Content modules, Special modules, Social modules and E-commerce modules. Each module has unique functionality and the most important features are described below.

HEADLINE
Use this module to create eye-catching headlines on your pages. The module is shown below:

This is a headline

SUB TITLE
Sub titles are also included in most text modules and works as a nice headline for the body text below. The module is shown below:

This is a sub title

PREAMBLE
The preamble module is well-suited for short highlighted texts. The module is shown below:

This is a preamble. This module is very practical for short highlighted texts on your page. It can also be used to emphasize important information or the like.

BODY TEXT
The Body text module is one of the most commonly used modules for large amounts of texts. Like with all content modules, font type, color alignment and size may be adjusted directly in the text editor field within the module. The module is shown below:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui id leo. Phasellus vel cursus turpis. Nunc tristique justo quis risus eleifend, ac volutpat lacus porta. Donec vitae lorem eget elit tristique rhoncus

TEXT IN A BOX
This module is great for highlighted texts that should stand out on the web page. It contains two text elements: A headline and a normal text. The module looks like below:

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui id leo. Phasellus vel cursus turpis. Nunc tristique justo quis risus eleifend, ac volutpat lacus porta. Donec vitae lorem eget elit tristique rhoncus

IMAGE
The image module is designed to contain images of any size. Once the image is uploaded it can be cropped using the crop feature embedded in the module. Alternative text for search engines may be added as well as a URL if you want the image to be a clickable link.

TWO COLUMNS (text)
The two column text module may be added to any placeholder on your page. The module consists of two headlines and two bodytext-fields placed next to each other like shown below. 

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui id leo.

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui id leo.

THREE COLUMNS (text)
The three column text module is a variation of the 2-column module described above. The module may be added to any placeholder on your page. The module consists of three headlines and three bodytext-fields placed next to each other like shown below. 

Headline Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui id leo.

Headline Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui id leo.

Headline Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui id leo.

FOUR COLUMNS (text)
The four column text module is another variation of the 2- and 3-column text modules described above. This module may be added to any placeholder on your page. The module consists of four headlines and four bodytext-fields placed next to each other like shown below. On wide screen this module may span the whole width of the screen. On smaller or more narrow screens (like smart phones) each column-section will be stacked on top of each other. 

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui

IMAGE AND TEXT (two columns)
The two column 'Image and text'-module may be added to any placeholder on your page. Each column section of the module contains an image, a headline and a bodytext field. You may add a unique link/URL to each section af the module. Images may be uploaded cropped to the desired size and then described directly in the module.

 

On wide screens this module spans accross the entire width of the placeholder it is placed within. On smaller screens (like for example on a smart phone) each column-section will act in a responsive way and automatically be stacked on top of the other in a "sky scraber"-format.

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat

Read more

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat

Read more

IMAGE AND TEXT (three columns)
The three column 'Image and text'-module may be added to any placeholder on your page. Each column section of the module contains an image, a headline and a bodytext field. You may add a unique link/URL to each section af the module. Images may be uploaded cropped to the desired size and then described directly in the module.

On wide screens this module spans accross the entire width of the placeholder it is placed within. On smaller screens (like for example on a smart phone) each column-section will act in a responsive way and automatically be stacked on top of the other in a "sky scraber"-format.

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat

Read more

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat

Read more

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat

Read more

IMAGE AND TEXT (Four columns)
The four column 'Image and text'-module may be added to any placeholder on your page. Each column section of the module contains an image, a headline and a bodytext field. You may add a unique link/URL to each section af the module. Images may be uploaded cropped to the desired size and then described directly in the module.

 

On wide screens this module spans accross the entire width of the placeholder it is placed within. On smaller screens (like for example on a smart phone) each column-section will act in a responsive way and automatically be stacked on top of the other in a "sky scraber"-format.

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat

Read more

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat

Read more

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat

Read more

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat

Read more

TEXT AND IMAGE (small image)
This module is an elegant way to present a complete "snippet" of content (e.g. a product teaser or news update) on a page. The module contains a small image, a headline, a body text, an optional date-field and a link-button leading to another page. If no link is entered, the "read more"-button will not appear.

The "show as column" check box will determine whether long texts should wrap underneath the image or not.

There´s an option to choose whether the image should be aligned to the left or to the right of the text. The default alignment is left - like shown in the example below:

11.11.2014

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus

Read more

TEXT AND IMAGE (Medium image)
This module is an elegant way to present a complete "snippet" of content (e.g. a product teaser or news update) on a page. The module contains a medium sized image, a headline, a body text, an optional date-field and a link-button leading to another page. If no link is entered, the "read more"-button will not appear.

 

The "show as column" check box will determine whether long texts should wrap underneath the image or not.

There´s an option to choose whether the image should be aligned to the left or to the right of the text. The default alignment is left - like shown in the example below:

11.11.2014

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui id leo. Phasellus vel cursus turpis. Nunc tristique justo quis risus eleifend, ac volutpat lacus porta.

Read more

TEXT AND IMAGE (large image)
This module is an elegant way to present a complete "snippet" of content (e.g. a product teaser or news update) on a page. The module contains a large image, a headline, a body text, an optional date-field and a link-button leading to another page. If no link is entered, the "read more"-button will not appear.

 

The "show as column" check box will determine whether long texts should wrap underneath the image or not.

There´s an option to choose whether the image should be aligned to the left or to the right of the text. The default alignment is left - like shown in the example below:

11.11.2014

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui id leo. Phasellus vel cursus turpis. Nunc tristique justo quis risus eleifend, ac volutpat lacus porta. Donec vitae lorem eget elit tristique rhoncus

Read more

TWO COLUMN IMAGE
The two column image-module may be added to any placeholder on your page. Each column section of the module contains an image. Images may be uploaded cropped to the desired size and then described directly in the module.

On wide screens this module spans accross the entire width of the placeholder it is placed within. On smaller screens (like for example on a smart phone) each column-section will act in a responsive way and automatically be stacked on top of the other in a "sky scraber"-format.

THREE COLUMN IMAGE
The three column image-module may be added to any placeholder on your page. Each column section of the module contains an image. Images may be uploaded cropped to the desired size and then described directly in the module.

On wide screens this module spans accross the entire width of the placeholder it is placed within. On smaller screens (like for example on a smart phone) each column-section will act in a responsive way and automatically be stacked on top of the other in a "sky scraber"-format.

FOUR COLUMN IMAGE
The four column image-module may be added to any placeholder on your page. Each column section of the module contains an image. Images may be uploaded cropped to the desired size and then described directly in the module.

 

On wide screens this module spans accross the entire width of the placeholder it is placed within. On smaller screens (like for example on a smart phone) each column-section will act in a responsive way and automatically be stacked on top of the other in a "sky scraber"-format.

SPOT BOX
The 'spot box'-module contains a headline, a preamble and an image. See example of this module below.

This is a headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui id leo. Phasellus vel cursus turpis. Nunc tristique justo quis risus eleifend, ac volutpat lacus porta. Donec vitae lorem eget elit tristique rhoncus

JUMBOTRON
The Jumbotron module is a multifunctional module that can be used for many purposes and with great creativity. The module spans the whole width of the page (if applied to a wide placeholder) which is ideal for branding effects on homepage etc.

The module allows you to upload multiple images - just like in a picture gallery. Once uploaded, you can click on each of the thumbnails to expand and add content to the image. You can also swap the sequence of the images by simply dragging each thumbnail around until it is in the desired position.

When clicking on a thumbnail you get the option to add content to the image. The text overlay will be displayed on top of the image and you may choose the alignment of the text (right, left, centered). You can also adjust the font color and the background color for the text overlay (e.g. a light font color on a dark background works well).

You may also add a button (large or normal sized). A button-text and URL can be added so that the button is clickable.

In the advanced section of the module you can set the overall behavior of the module. This setting applies to all images uploaded. If you have uploaded more than one image you may set the module to change between the images with a certain frequency (minimum 1 second). Furthermore it´s possible to set the "animation" to stop when the user mouses over an image.

An example of how the Jumbotron module looks like on a page is pictured below.

GALLERY (large thumbs)
This gallery module is ideal if you have a series of images that you want to display on the page.

Images can be uploaded either one-by-one or in bulks by choosing multiple images from a folder. You may change the order of the images once they are uploaded by simply dragging them around until they are in the sequence you wish.

Once uploaded each image can be edited and described inside the modules 'image setting section' (to open this section click on each individual image inside the module).

In the image settings you may add description and alt text to each image. You may also crop both the thumbnail-version as well as the large version of each image.

In the bottom section of the gallery module you will find advanced settings. Here you may set the general settings that will apply to the whole module. Choose how many images should be displayed per page (for example 8 or 12). If you upload 24 images to the module, but only set 8 images to display for each page in the advanced settings, the module will add paging so that the user may click to the next section of 8 images in the gallery.

Finally you may also name the gallery (e.g. "My images") and then check the "show text"-box below if you want to display the title on the page.

GALLERY (square thumbs )
This gallery module is ideal if you have a series of images that you want to display on the page. The thumbnail images are square-formed.

Images can be uploaded either one-by-one or in bulks by choosing multiple images from a folder. You may change the order of the images once they are uploaded by simply dragging them around until they are in the sequence you wish.

Once uploaded each image can be edited and described inside the modules 'image setting section' (to open this section click on each individual image inside the module).

In the image settings you may add description and alt text to each image. You may also crop both the thumbnail-version as well as the large version of each image.

In the bottom section of the gallery module you will find advanced settings. Here you may set the general settings that will apply to the whole module. Choose how many images should be displayed per page (for example 8 or 12). If you upload 24 images to the module, but only set 8 images to display for each page in the advanced settings, the module will add paging so that the user may click to the next section of 8 images in the gallery.

Finally you may also name the gallery (e.g. "My images") and then check the "show text"-box below if you want to display the title on the page.

GALLERY (Slider)
This gallery module is ideal if you have a series of images that you want to display on the page. The images are displayed one at the time with a slider-function that allows you to click to the next image in the gallery.

Images can be uploaded either one-by-one or in bulks by choosing multiple images from a folder. You may change the order of the images once they are uploaded by simply dragging them around until they are in the sequence you wish.

Once uploaded each image can be edited and described inside the modules 'image setting section' (to open this section click on each individual image inside the module).

In the image settings you may add description and alt text to each image. You may also crop each image.

In the bottom section of the gallery module you will find advanced settings. Here you may name the gallery (e.g. "My images") and then check the "show text"-box below if you want to display the title on the page.

CAROUSEL (slider w text on images - w slide show functionality)
This gallery module is ideal if you want a series of images to automatically change on your page. This is a great feature on a front page of a site.

Images can be uploaded either one-by-one or in bulks by choosing multiple images from a folder. You may change the order of the images once they are uploaded by simply dragging them around until they are in the sequence you wish.

Once uploaded each image can be edited and described inside the modules 'image setting section' (to open this section click on each individual image inside the module).

In the image settings you may add a text that will be displayed as an overlay on top of the image. Each image may have it´s own unique text. You may choose between four alignments of the overlay-text.

In the bottom section of the gallery module you will find advanced settings. Here you may set the general settings that will apply to the whole module. Choose the frequency of the image shifts in the module. If you choose 5 seconds the images will automatically change each five seconds to the next uploaded image in the gallery. If only one image is uploaded the frequency-setting has no effect.

GALLERY (Three-column "Fashion"-design)
This gallery module is ideal if you have a series of images that you want to display on the page. The images are displayed one at the time with a slider-function that allows you to click to the next image in the gallery. The edges of the next and previous images in the gallery are displayed to the left and right of the main image.

Images can be uploaded either one-by-one or in bulks by choosing multiple images from a folder. You may change the order of the images once they are uploaded by simply dragging them around until they are in the sequence you wish.

Once uploaded each image can be edited and described inside the modules 'image setting section' (to open this section click on each individual image inside the module).

In the image settings you may add description and alt text to each image. You may also crop each image.

In the bottom section of the gallery module you will find advanced settings. Here you may name the gallery (e.g. "My images") and then check the "show text"-box below if you want to display the title on the page.

DIVIDERS
The divider module is one of the most practical modules for the web designer. It allows you to insert a division element spanding the whole width of the placeholder between two other modules on the page. The divider module has four different settings:

Solid: A solid line will be displayed

Dotted or thin line: A dotted line will be displayed

Blank: A blank space will be inserted

Spacer with variable height: A blank space will be inserted. You can set how many pixels the height of the blank space should be.

BAR (Headline divider)
The 'Bar divider'-module is used to create separations between page sections or sections in a list or index. The module contains visual lines as dividers and a headline can be added. This module works very well in combination with both the download module or the link-module. 

This is a bar headline


LARGE BUTTONS
Large buttons come in very handy in many contexts. In this module you can choose bewteen four different design styles of buttons and set the alignment of the button. You may add a custom text and a link/URL to the button. See examples below: 

BUTTON
The small buttons has two different design styles. You can set the alignment and add a custom text and a link/URL to the button. See examples of the different styles below:

CALL OR EMAIL BUTTON
This module adds a call button or email button to the page. On smart phone devices the call button automatically initiates a phone call when the user tabs the button. The email button automatically initiates the native email client on the user client device (laptop, tablet or phone etc.).

First choose the type of the button - either email or call. Then add the text you want to be displayed in the button.

The module is default linked to the 'global data bank'. This means that you don´t have to input any phone or email details if you have already updated your phone number and email address in your global data bank.

Add your telephone number or email address if these are not already entered in the global data bank.

PRODUCT WITH PRICE
This module is ideal as a product teaser or menu item. Although this particular module cannot be directly coupled to the E-commerce feature it is still very practical to display all kinds of products or services.

The main features of the 'product with price'-module are: Image, headline, preamble, body text and a price tag. Furthermore the module has an optional link feature if you want to link to a subpage or product description somewhere else.

Product name

Lorem ipsum dolor sit amet, consectetur adipiscing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium, dui ut vulputate euismod, erat leo commodo lacus, in congue erat dui id leo. Phasellus vel cursus turpis. Nunc tristique justo quis risus eleifend, ac volutpat lacus porta.

$300

PRODUCT LIST
This module is ideal if you want to display a large product catelogue or a restaurant menu. The module works just like a gallery module, with sliders that enable the user to click to the next set of items in the catalogue or menu.

Each product has an image, a text and a link-button that may lead the user to a subpage or a shop. Click on each individual image to open the image specific settings where you may add a link, image description or crop the image.

The advanced settings in the bottom of the module allows you to define how many products should be displayed per page.

TESTIMONIALS
The testimonial module is a must have if you want to build credibility and customer trust around your business or product. The module displays quotes in brackets with an image of the person expressing the opinon. This module is very handy on landing page-types of websites. See example below: 

This is the best product I have ever tried

Person 1

I will come back to this product again and again

Person 2

UNIQUE SELLING POINTS (USPs)
Unique selling points are keywords about what makes your business great and special. The module displays these keywords in an eyecatching way that will enable the visitor to decode your services and/or advantages very quickly. You may enter as many unique selling points as you wish.

As an optional feature, each unique selling point or keyword may be linked to the product- and service-fields in your global data bank, which makes them easy and fast to maintain and update.

  • Unique selling point
  • Unique selling point
  • Unikt selling point
  • Unikt selling point
  • Unikt selling point
  • Unikt selling point

DISPLAY
The display module is designed to make it easy to emphasize a piece of text on your web page. You can enter your text and then specify both font color and the background color of the text. You do this by entering the hex color code in the 'font color'- and 'background color'-fields like this: #333333. You may find hexcodes for each color variant by searching on the web or through your image editing software (e.g. Photoshop or the like): 

This is the fantastic
Display module

This is the fantastic
Display module

SPOTBOX W BUTTON
The spotbox module displays a preamble-sized text within a box. The module may include an optional button underneath the box with an attached link. See example below:

THIS IS A TEASER
DISPLAY WITH
WRITTEN IN TEXT EDITOR
 

READ MORE