Read this first
This guide shows you how we at Granitor use blocks to build pages.
This page type is called "Base page". A base page is generally used for all subpages and is entirely based on blocks. Building a page using blocks gives us great freedom in how we visualise content, but to make the user experience for our visitors as good as possible, it is important that you know how the blocks work. A list of all the blocks and how they can be used can be found below.
You can find information about each block in the respective block as well as in the explanatory text under the block (see explanation in the list below).
- Block (if space is available, enter brief information about the block here)
- Explanatory text (more detailed information about the block)
General blocks
In addition to our blocks listed below, there are also 7 general blocks that you can find on the right in the CMS under "For This Site" and the folder called "General blocks". These blocks are general, which means that they do not contain any specific information. The most commonly used general block is called "Line break". As the name suggests, it is used to break lines, but unlike a line break in, for example, a Word document, line break is used here to create a vertical space between two blocks.
After reading this guide, you will understand that some blocks adapt to each other and others do not. This means that only certain blocks appear next to each other and adjust their height, while other blocks completely ignore whether there is a block just above or below, and instead always take up the entire width of the page and then the block above or below automatically implements a line break.
The general blocks are:
- Line break
- Spacer (1 col)
- Spacer (2 col)
- Spacer (3 col)
- Spacer (4 col)
- Spacer (5 col)
- Spacer (6 col)
If a line break creates space in the form of a line break, what does a "Spacer" do? A spacer is used to create a space to the right or left of the current block and the numbers indicate how much space (1 col = 1 column width, etc.). Note that not all blocks support space to the right or left. You can read more about this under each block.
Eyebrow
Heading
Introduction: This block is called "Intro". It is mainly used to introduce a page. In this block you should always write a heading (Heading) and then you can choose whether you want to add an image/video ("Main image/Mobile image or "Desktop video/Mobile video"), "Eyebrow" (approx. 1–3 words), "Intro", and "Content". Remember not to write too much here. The introduction should complement the headline and further reading on the page.
Content: You can add additional text here if necessary. As you can see, there is already quite a lot of text. At the bottom of this block you can add a link to another page.
Link textIntro block
Here above you can see the block called "Intro" - This block is mainly used to introduce a page. Only this block automatically contains H1 in the form of Heading. This is important from an SEO perspective. Want to know more about SEO? Learn more about it here.
Will the size of the block be adjusted if I place other blocks above/below?
Yes, this block will adjust its width if you place other blocks directly above or below it. If you want to use the block solely to introduce a page as above, you need to place a "Line break" under the block.
Link block
The block shown above is called "Link" - This block is used to link the visitor to another page. Unlike creating a link directly in the body text(such as this text), you can visualise content in a few different ways that hopefully entice the visitor to click on.
The link block should always contain a heading, and you can then choose how you want to supplement it with additional text and/or images.
Will the size of the block be adjusted if I place other blocks above/below?
Yes, this block will adjust its width if you place it alone and/or next to other blocks. You can place up to three link blocks together in succession. If you want to use the block individually, you need to place a "Line break" above and below the block. If you want to adjust the size of the block, you can do this by moving the mouse pointer over the block, clicking on the hamburger icon ("Display menu") and selecting "Display as", and then marking how much of the area the block should use.
Eyebrow
Heading
Short text: This block is called "Article carousel". The block is mainly used when you want to link to two or more pages within a certain area, e.g. news or reference projects. Unlike "Link block", the Article carousel always takes up the entire width of the page. This block must always contain a "Heading" and can be supplemented with this text (Short text), an “Eyebrow” (approx. 1–3 words), and one or more links.
Article carousel
The above block is called an "Article carousel". This is known as a "block-in-block", which means that there needs to be a block inside the block in order for it to work as intended. An alternative to creating a block-in-block is to drag and drop other pages that are directly listed as visually clickable pages. To make sure it is correct, you need to fill in “Heading for listings” on the page you want to link to and add an image under the “List info” tab. You an also insert an icon under the List info tab on the relevant page. The icon then appears in the beige box shown at the top of the pages listed in the block.
Will the size of the block be adjusted if I place other blocks above/below?
No, this block always takes up the entire width of the page.
Heading
Ingress
Content: This block is called "Text & image(s)". It is mainly used when you want to display one or more images together with a shorter text. The block must always contain a heading ("Heading") and can be supplemented with an introduction and this text ("Content"). You can also add a link ("Link text") to another page.
Link textText & image(s)
The block above is called "Text & image(s)". This block is used to display one or more images together with a shorter message in the form of a Heading, Introduction, and Content. You can also add a link if you want to link to another page. This block always takes up the entire width of the page.
Will the size of the block be adjusted if I place other blocks above/below?
No, this block always takes up the entire width of the page.
Button block
The block above is called "Button". This block can be used for two different purposes. The first is to link the visitor to another page. The second is to open an EpiServer form. The block can be visualised in three different colours as shown above.
Will the size of the block be adjusted if I place other blocks above/below?
No, this block has a fixed width and adjusts in height depending on how much text you write. The recommended number of words is 1-10. Note that the block can be placed next to other blocks even if it is not adjusted in width. If you want to use the block individually, you need to place a “Line break” above and below the block.
Content: This block is called "Bulletin". The block can contain both plain text and text with a link to another page. It is also possible to add an icon in this block.
Bulletin
The block shown above is called "Bulletin". This block is used to highlight text and/or link the visitor to another page. The block can be styled in 7 different colours (light blue, dark blue, beige, green, white, brown, and orange). The block can also contain an icon.
Will the size of the block be adjusted if I place other blocks above/below?
No, this block always takes up the entire width of the page.
Eyebrow
Heading
Content: This block is called "Quick facts". It is used to visualise text and/or to link the visitor to another page. The block can be styled with different colours and can be displayed with a smaller/larger heading (Theme). The block must always contain a heading (Heading) and the text you write (Content), and can be supplemented with an “Eyebrow” (approx. 1–3 words) and a link.
Heading
Content: This block is called "Quick facts". It is used to visualise text and/or to link the visitor to another page. The block can be styled with different colours and can be displayed with a smaller/larger heading (Theme). The block must always contain a heading (Heading) and the text you write (Content), and can be supplemented with an “Eyebrow” (approx. 1–3 words) and a link.
Eyebrow
Heading
Content: This block is called "Quick facts". It is used to visualise text and/or to link the visitor to another page. The block can be styled with different colours and can be displayed with a smaller/larger heading (Theme). The block must always contain a heading (Heading) and the text you write (Content), and can be supplemented with an “Eyebrow” (approx. 1–3 words) and a link.
Quick facts
The block above is called "Quick facts". It is used to visualise text and icons. The block can link the visitor to another page. Unlike "Link block", this block cannot contain an image. It can be used with two different themes, Normal or Large. When using the block with the "Normal" theme, Eyebrow, Heading, Content, and Link text are displayed, while when using the "Large" theme, only Heading and/or Content is displayed.
Will the size of the block be adjusted if I place other blocks above/below?
Yes, this block will adjust its width if you place it alone and/or next to other blocks. The Quick facts block can be placed up to three times in a row. If you want to use the block individually, you need to place a "Line break" above and below the block. If you want to adjust the size of the block, you can do this by moving the mouse pointer over the block, clicking on the hamburger icon ("Display menu") and selecting "Display as", and then marking how much of the area the block should use.
Feature
The block above is called “Feature”. This is known as a “block-in-block”, which means that there needs to be a block inside the block in order for it to work as intended. The block is intended to visualise an image that is displayed in full width over the entire page, and which in turn contains texts relating to a particular topic. In the example above, there are three different blocks in the block. If you click on one of these, you will see that it expands, allowing the visitor to read more information.
Will the size of the block be adjusted if I place other blocks above/below?
No, this block always takes up the entire width of the page.
Heading
Heading: Benefit icon item 1
You can write a short description of the benefit here.
Heading: Benefit icon item 2
You can write a short description of the benefit here.
Heading: Benefit icon item 3
You can write a short description of the benefit here.
Heading: Benefit icon item 4
You can write a short description of the benefit here.
Benefit icons
The block above is called “Benefit icons”. It is used to display icons together with a short text in the form of a heading and description. The block is designed, using icons and text, to describe the benefits of something, but it can also be used for other purposes. It is a "block-in-block", which means that you need to add blocks inside the block in order for it to work properly. The block should always contain a heading and at least one “Benefit icon item”.
It is recommended that you always place four icons with associated texts inside the block.
Will the size of the block be adjusted if I place other blocks above/below?
Yes, this block will adjust its width if you place it alone and/or next to other blocks. If you want to use the block individually, you need to place a “Line break” above and below the block. If you want to adjust the size of the block, you can do this by moving the mouse pointer over the block, clicking on the hamburger icon ("Display menu") and selecting “Display as”, and then marking how much of the area the block should use.
Contacts heading: Heading for contact persons
Contacts heading: Heading for contact persons
Offices and contacts list
The block above is called "Offices and contacts list". It is used to display contact details of an office and/or employee. It is a "block-in-block", which means that you need to add blocks inside the block in order for it to work properly. In this block, drag-and-drop contact cards and/or offices/locations into the block to view the contact details. You yourself decide whether you want to use the block to display contact details for one or more employees and/or for one or more offices and whether you want to split the contact details or show both employees/offices in the same block.
There is no limit to the number of contact cards that can be dragged in, but we recommend that, if you have more than 10 contact cards, you divide them into several different blocks with clear headings in each, making it easier for visitors to find the right one.
Will the size of the block be adjusted if I place other blocks above/below?
Yes, this block will adjust its width if you place it alone and/or next to other blocks. If you want to use the block individually, you need to place a "Line break" above and below the block. If you want to adjust the size of the block, you can do this by moving the mouse pointer over the block, clicking on the hamburger icon ("Display menu") and selecting "Display as", and then marking how much of the area the block should use.
Heading: Heading for contacts
Heading: Heading for contacts
Contacts
The block shown above is called "Contacts". It is used to display the contact details of one or more contact persons. It is a "block-in-block", which means that you need to add blocks inside the block in order for it to work properly. This can be done in two different ways. The first way, creating a block in block, is used if you want to show contact details for the contact person together with an image or icon. The second method, in which you drag (drag-n-drop) the contact card into the block, is used if you only want to show contact details of the contact person in question.
There is no limit to the number of contact cards, but we recommend that, if you have more than 3 contact cards, you divide the contact cards into several different blocks with clear headings in each, making it easy for visitors to find the right one.
Will the size of the block be adjusted if I place other blocks above/below?
Yes, this block will adjust its width if you place it alone and/or next to other blocks. If you want to use the block individually on a line, you need to place a "Line break" above and below the block, and if you want to adjust the size of the block, you can do this by hovering your mouse over the block, clicking on the hamburger ("Display menu") and selecting "Display as" and then marking how much of the area the block should utilise.
Heading
First name Last name
Job title
First name 2 Last name 2
Job title 2
First name Last name
Job title
First name 2 Last name 2
Job title 2
First name Last name
Job title
Testimonial carousel
The above block is called a "Testimonial carousel". This block is used to visualise customers/partners and/or our employees. Although the block is called "Testimonial", it can be used as a contact information area. As you can see, you can either provide contact details (grey field on the cards) or just enter information such as title, name, and a short text. This block is a "block-in-block", which means that you need to create blocks inside the block in order for it to work properly. It is recommended to use this block when you want to show 3 or more contacts.
Will the size of the block be adjusted if I place other blocks above/below?
No, this block always takes up the full width of the page and cannot be placed next (horizontally) to other blocks.
Heading for downloads
Granitor Hållbarhetsredovisning 2022.pdfGranitor Sustainability Report 2022-web.pdfDownloads
The block above is called "Downloads". It is used to list and download files. The files are uploaded under "Media" in the structure on the right and should be placed in the appropriate folder. If you are unsure about how files should be handled, contact your line manager.
It is recommended that you always work with a heading that tells visitors what is listed in the block.
Will the size of the block be adjusted if I place other blocks above/below?
Yes, this block adapts to other blocks and can be placed next (horizontally) to other blocks. If you want to separate it on a separate line as described above, add a "Line break".
Heading
Content: This block is called “Header & divider”. It is used to headline a new part of the page and should always contain a heading (Heading) and can be supplemented with this text (Content) and a link to another page.
Link textHeader & divider
The block above is called “Header & divider”. It is used as a divider and to display text in the form of header and/or text (Content) and link (Link text). The block also functions as a separator (divider), which means that all blocks are to be placed directly above/below the line break. This block has no special styling and looks like ordinary body text, but unlike “Text block”, it always breaks a line that is placed above/below and Heading and Content are placed next (horizontally) to each other.
Will the size of the block be adjusted if I place other blocks above/below?
No, this block has a fixed width and cannot be placed next (horizontally) to other blocks.
Heading facility or service list
Heading facility or service list
Facility or service list
The block above is called "Facility or service list". It is used to list and link to other pages. Although the block’s name may indicate that it is to be used for services and/or facilities, it can also be used to list and link to other pages. The block only has two fields, "Heading" and "Items". In Heading, enter the heading you want to use, and in Items you can either scroll to the page you want to be listed or drag (drag-n-drop) the page you want to be listed and linked to. In order for the pages to be listed correctly, you may need to fill in/change the information under "List info" on the page you are dragging in. As you can see above, the text "Heading for listings" and "Short description for listings" is displayed next to the heading on the page that has been dragged and dropped. This is the information you need to fill in/change if you want it to be shown as in the example above.
Will the size of the block be adjusted if I place other blocks above/below?
Yes, this block adjusts its width both if you place it individually and/or next to other blocks. If you want to use the block individually, you need to place a "Line break" above and below the block, and if you want to adjust the width of the block, you can do this by hovering your mouse over the block, clicking on the hamburger ("Display menu") and selecting "Display as", and then marking how much of the surface the block should use.
Image caption: Write something short here
Image caption: Zoomable Image
Image / video
The above block is called "Image/video". It is used to display an image or to play a video from YouTube. To play a video, you must always add a thumbnail to the block. So you can't just add a link or an ID to your YouTube clip, you also need to add a thumbnail. If you just want to show an image, this can be done in two ways, either as a completely standard image, or as a clickable image (Zoomable Image) - see figure on the far right. The small text in the white box below the image is optional and is indicated under "Image caption".
Will the size of the block be adjusted if I place other blocks above/below?
Yes, this block adjusts its width both if you place it individually and/or next to other blocks. If you want to use the block individually, you need to place a "Line break" above and below the block, and if you want to adjust the width of the block, you can do this by hovering your mouse over the block, clicking on the hamburger ("Display menu") and selecting "Display as", and then marking how much of the surface the block should use.
Text
This block is called "Text". It is used when you want to write a text directly on the page. This is the most common block and in this guide has been used as elements under each block to explain how the various different blocks work. In addition to text, a text block can also contain images, illustrations, tables, video, and embedded material. The block can also be used in four different layouts (Layouts):
- "None", this is the layout you can see now (most common)
- "Facts", the layout you use to enter short information in list form
- "Contact info", the layout you use to add contact details next to text
- "Image", which you use when you want to place an image next to text.
Note that the most common layout is "None", i.e. plain text.
You can also choose to have a "Read more" button (Read more button caption) if you don't want to show the entire text directly, requiring the visitor to click "Read more" in order to see the entire text. Note that the input field for the Read more button caption is set by default, so make sure to remove it if you don't want to use it.
Will the size of the block be adjusted if I place other blocks above/below?
Yes, this block adjusts its width and height both if you place it individually and/or next to other blocks. If you want to use the block individually, you need to place a "Line break" above and below the block, and if you want to adjust the width of the block, you can do this by hovering your mouse over the block, clicking on the hamburger ("Display menu") and selecting "Display as", and then marking how much of the surface the block should use.
See all images
Image gallery
The above block is called "Image Gallery". It is used to display multiple images in an image gallery. The images are displayed in rectangular boxes, all with the same rectangular cropping. This means that the images are always displayed rectangularly, even if you select an image template that is vertical. This block is a "block-in-block", which means that you need to create blocks in the block and where each block-in-block, in this case, contains an image. The images are automatically clickable and open a dialogue box with the image in enlarged mode, arrows to the right and left, and thumbnails of the images in the gallery below. There is no limit to the number of images that can be added, but only the first five images are displayed without the visitor having to actively click. Also note that the first image in the sequence is always shown the biggest.
Will the size of the block be adjusted if I place other blocks above/below?
No, this block has a fixed width and cannot be placed next (horizontally) to other blocks.
Project status
The block above is called "Project status". It is used when you want to show an event sequence of something and is designed to show the status of a project. The block is a "block-in-block", which means that you need to create blocks in the block in order for it to work as intended. Each "dot/circle" is a block that describes part of the sequence of events. You can choose to have blue, green, or brown as the colour of the circles/dots.
Will the size of the block be adjusted if I place other blocks above/below?
Yes, this block adjusts its width and height both if you place it individually and/or next to other blocks. If you want to use the block individually, you need to place a "Line break" above and below the block, and if you want to adjust the width of the block, you can do this by hovering your mouse over the block, clicking on the hamburger ("Display menu") and selecting “Display as”, and then marking how much of the surface the block should use.
This could be a quote. Nullam sit amet porttitor tortor. Quisque ullamcorper pulvinar enim, vitae tincidunt dui condimentum non. Proin gravida lorem eget posuere convallis.
Adam Jernberg
Quote block
The above block is called "Quote block". It is used to place a single quote on a page and through a block. The block may contain a quotes, name of author, and an image.
Will the size of the block be adjusted if I place other blocks above/below?
No, this block always takes up the entire width of the page.
Map & point-of-interest
The block above is called "Map & point-of-interest". It acts like the map function in Google Maps and can show a specific location and what is near that location. It is also possible to enter directions to another destination.
Will the size of the block be adjusted if I place other blocks above/below?
No, this block always takes up the entire width of the page.
Sammanfattning
You have now reviewed all of our most common editorial blocks. However, there are some blocks that cannot be visualised in the same way. These are:
- News list block
Automatically lists news items that are tagged with the company name to which the news relates. - Open positions list block
Automatically lists the positions tagged with the company name to which the position relates. - Iframe
Used when you need to iframe something from another page. - Forms container
Used to create forms.
In addition to the above, there are also special block-in-blocks, as well as blocks built for a specific page template and which are linked to integrations for a specific transaction. For more information, contact adam.jernberg@granitor.se