Last edited: 10/18/2021 11:09 AM
Link to article block
You can hide the 'last edited' feature. Keep this text very short.
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 CTAAlways 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 RestaurantAn 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 Dinner |
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.
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.
Preview Content Container block
Following is a few examples on how you can use the Preview Content Container block:
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.
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.
Here is the CTA
Link to article block
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 ipsumLorem 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 cancellationExample 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:
Simple linked list
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
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> </p>
<div id="myViewerContent" style="position: fixed; top: 0px; left: 0px; height: 100%; width: 100%;"> </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.
- 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.
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