Circle Callanish, Isle of Lewis

EPI-storybook : Article page

This page provides an overview over which blocks are available and example of their usage.

This is how anchors look on article pages ↑
Anchors can be added to "advanced" blocks, for example Rich text. Then you need to allow anchors to show on that Article page by ticking the box "include anchors".

Tips to build an Article page

Blocks

  • Almost all block types are available on an Article page, but some of them are old or irrelevant. Please refer to this guide to see which blocks are best practice.

  • Use the content area to drag your blocks. Alternate between Rich Text blocks (to create anchors and titles) and other block types.

  • Do not add other block types to a Rich text block. Even if you can, they won't display correctly.

Other elements

  • Use of CTA

    Always use 1 or more CTA: - What is the purpose of the page? --> go down in the funnel - What is the exit strategy? --> related articles, newsletter signup...

  • The Body field is comparable to a block but is embeded to the page. It will appear above the content area and below the anchors.

  • The anchors will appear at the top, under the head picture.

  • Head picture is optional, head videos are not supported. You can have more than one head picture, they will show as a slideshow.

  • DON'T USE AND ABUSE ICONS

Available blocks for Article pages

Rich text block

This advanced block allows to display text, hyperlinks, tables and add anchors.

You can also drag pictures and blocks to this block, but it is likely that the stying will not display correctly, so please add the block directly to the Article page in the content area. 

Instead use this block for fancy text styling like this: 

 

BreakfastTorget/Main Restaurant

An extensive breakfast buffet including hot dishes, cold cuts, fish, homemade smoothies, energy shots, yoghurt, granolas and fruit jams. Fresh bread, fruit, local cheeses and chef stations such as pancakes or salmon carving.  Coffee/tea/juice/water included. 

Lunch
Traditional husmannskost (traditional rustic dishes) from the region. Every day, a choice of one meat, one fish and one vegetarian main dish is served along with fresh bread and local cheese, and a wide selection of salads, vegetables, cold cuts, salmon, herring and other seafood. Homemade desserts and cakes are also available. Coffee/tea/water included. 

Dinner
Enjoy the best of Norwegian farm-to-table dining with three-course dinners or buffets. The menu varies over an 11-day cycle, with a selection meat, fish or vegan dishes. Water included. Wine packages, local beverages and alcohol-free alternatives available.   

 

Youtube/Vimeo video block

To insert a video to an article page, you need to create a Youtube or Video block (after you uploaded the video on these platforms), and add the url in that block. Then use the block on the page.

Best practices is to upload videos on Vimeo in order to keep the user on the page, as Youtube will suggest videos that are not from our channel.

It will take the full screen, it is not possible to adjust the size.

Our CEO Daniel Skjeldam on BBC

 

Image gallery block

This block allows you to display a number of pictures in a grid display.

Note to developers: we cannot read the captions or click on one of the pictures to have it full screen. Accessibility issue?

 

Article Grid block

Here you can add a number of sub-block that can be linked to other content. 

Get 3 tips from us!

Click on each tile to discover some examples of our sustainability measures, and get three tips in each area on how everyone can help out.

Get 3 tips from us!

Click on each tile to discover some examples of our sustainability measures, and get three tips in each area on how everyone can help out.

Banning single use plastic

Science, innovation & technology

Beach cleanups

Education, research and science programmes

Caring for wildlife

Food waste

Local communities

 

Preview Content Container block

Following is a few examples on how you can use the Preview Content Container block: 

 

Preview Content Container

Without featured blocks

Usage 1:

This block allows you to preview an article and add a CTA to link to the actual article. The work is actually done on the article itself, under the 'Preview content tab'  but you can overide it here.

Usage 2:

The CTA is optional: you can also use this block to show an image or a videowith a text field on the side that can be styled (Bullet points, hyperlinks...).

To add a video, create a Youtube or Vimeo block and drag it to the Media area. Simply dragging an uploaded video won't work.

Keep the text short to fit the media size.

CTA CTA
A curious Gentoo penguin on Deception Island. MS Fram and MS Midnatsol in the background.
A curious Gentoo penguin on Deception Island. MS Fram and MS Midnatsol in the background.
Photo: Andreas Kalvig Anderson

Preview Content Container Block

With featured blocks

The CTA will show at the end of all the featured blocks as a blue button. If there aren't any featured blocks, the CTA will be under the main text as a black button.

If you put several Preview Container blocks, the image and text position will alternate left and right.

A curious Gentoo penguin on Deception Island. MS Fram and MS Midnatsol in the background.
A curious Gentoo penguin on Deception Island. MS Fram and MS Midnatsol in the background.
Photo: Andreas Kalvig Anderson

John Doe

Exploration guide Norwegian

Usage 3:

You can feature an "Expedition Team Member" block. It will always appear first.

Inspirational quote from John Doe

Usage 4: 

You can also feature an "article preview grouping" block.

This allows you to add a picture and a text, that you can format as a "quote" by ticking a box.

 

Red deer in the British Isles

Link to article block

Last edited: 10/18/2021 11:09 AM

Link to article block

You can hide the 'last edited' feature. Keep this text very short.

Frequently asked questions block

This block is high maintenance as it requires to add a lot of sub-blocks with their own headers. It is an advanced block with possibility for anchors.

Relax and take a walk for a minute :)

By the way this text field is also formatable.

  • Bullet points
  • Hyperlinks
  • Tables...

 

Main message block

It was designed for Health and Safety as a bullet point module.

It was not really meant to be repurposed so don't use it if it doesn't fit your needs perfectly. We have another USP block that could work for you.

NB: This block can be used with or without icons, with a standard of 2 columns.

This is a message block:

 

Left header

  • Header

    Icons are optional

  • Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Right header

  • Lorem ipsum

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus rhoncus ante. Nam eget turpis nisi. Nulla auctor id lorem ut volutpat. Aenean id molestie nunc. Nam risus enim, pretium et pulvinar vel, suscipit id justo. Proin vitae laoreet felis. In at purus eu libero tristique scelerisque id at elit. In hac habitasse platea dictumst. Aenean metus arcu, varius in ipsum nec, fermentum dignissim urna. Donec sed tempor odio.

 

USP block

This block is meant to present a USP as clear, visual and concise as possible.

This is a USP block:

Book with confidence with Hurtigruten

This header and intro are optional.

  • Free cancellation
    Example without text dropdown

 

Simple linked list block

This block  allows to link articles  with a simple text link. The block supports anchors.

This is a simple linked list block:

 

Offer card block

Use this block and nothing else for featuring offers!

There is no restriction on how many offers you can link. When the offer expires, the card will disappear on this page automatically.

Note to developers: the tags are not on-brand, need to be changed to the green or blue color code.

Our exciting offers

Expandable information block

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus rhoncus ante. Nam eget turpis nisi. Nulla auctor id lorem ut volutpat. Aenean id molestie nunc. Nam risus enim, pretium et pulvinar vel, suscipit id justo. Proin vitae laoreet felis. In at purus eu libero tristique scelerisque id at elit. In hac habitasse platea dictumst. Aenean metus arcu, varius in ipsum nec, fermentum dignissim urna. Donec sed tempor odio.

 

Script block

You can use a script block for different reasons: 

  • Add a form. CRM will provide you the script

Example of a form:

 

  • Add a brochure. You get the script from zmag. You can use this code bit before the zmag script to make it take the whole page (you can't add other things then) 

<p>&nbsp;</p>
<div id="myViewerContent" style="position: fixed; top: 0px; left: 0px; height: 100%; width: 100%;">&nbsp;</div>
<p>

Example of an embeded brochure:

 

 

Writing styles

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, repellat sint! Ipsa temporibus reiciendis, mollitia laborum quo autem dolorum minima commodi sint voluptate. Voluptas totam quo ipsa iste earum porro.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, repellat sint! Ipsa temporibus reiciendis, mollitia laborum quo autem dolorum minima commodi sint voluptate. Voluptas totam quo ipsa iste earum porro.

Lists

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, repellat sint! Ipsa temporibus reiciendis, mollitia laborum quo autem dolorum minima commodi sint voluptate. Voluptas totam quo ipsa iste earum porro.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, repellat sint! Ipsa temporibus reiciendis, mollitia laborum quo autem dolorum minima commodi sint voluptate. Voluptas totam quo ipsa iste earum porro.
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, repellat sint! Ipsa temporibus reiciendis, mollitia laborum quo autem dolorum minima commodi sint voluptate. Voluptas totam quo ipsa iste earum porro.
  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  2. Aliquid, repellat sint! Ipsa temporibus reiciendis, mollitia laborum quo autem dolorum minima commodi sint voluptate.
  3. Voluptas totam quo ipsa iste earum porro.

 

Examples of  notable articles

:) Norway's Coastal Kitchen: great imagery, lot of content but good use of blocks and spaces. CTAs with further reading (related inspiration article block).

:( Earth day: Very text-heavy, no CTA