Header title

This landing page contains an overview of the available content blocks and all the possibilities within them. Below is an instruction on how to create and add a content block. You can also use the Optimizely environment of this page to check how blocks have been created. 

Instructions for creating a content block: 

• In Optimizely, the menu on the left gives an overview of the page structure and the menu on the right is the place where content blocks can be stored in a structured way. 
• Click on 'Blocks' in the menu on the right at the top
• Select the folder of the page you want to edit. All folders are already in here (in alphabetical order), so you can quickly choose the folder you need.
• If you create a new page, you can create a new folder for it. Make sure it is added in the right place. 
• Below the folder tree, click + New block or the + sign. 
• Choose the block you want to create and fill in all the information. Below you can see what each block looks like. 
• Click Create or Publish. The block has not yet been placed anywhere.
• Drag the block from the right menu to 'Main content' in the middle menu, the menu where you process all information and content blocks. 
• Click Publish again. 
• You can also always wait to publish until the entire page is ready. The content you've placed in blocks and on pages will remain. 

Button use: 

Look at each situation to see what is most suitable, but in general you can follow these guidelines. 

• Read more button: for Call to action, for example 'Request a quote now'
• Read more link: for example at 'Read more' or 'More information'

Half Screen

Half Screen Block

Cluster half | Two options

Cluster

Facts

Inspiration Grid

• Insert 2, 4 or 6 images (Portrait M or Landscape M)
• Select option 'Big image first' to adjust the order

Inspiration Grid image types: 

1. portrait of portraiti
2. landscapem
3. landscapem
4. landscapem
5. landscapem
6. portrait of portraiti

Paragraph

Title: Header 4

• The running text is written in the font 'Paragraph' 
• Content block alignment options: Wide, Normal, Narrow

Options to place quotes next to text

You can add a fact and a quote in a paragraph. It is best to place it above the text in the paragraph in the settings: 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Parallax

• Insert Image | headerxxl
• Insert button text

List/Downloads in columns

• Option 1: 'Show harmonica' not selected
• Option 2: 'Show harmonica' is selected via 'Content' tab

Quote

Option 1: Content block = Quote

Option 2: Content block = Quote image

Section

• When using a 'Section' content block, the title of this block is also displayed at the top of the page. By clicking on this option on top of the page, the visitor is led directly to this part of the page. 

History (Card Component)

• The basic block is content block 'History'.
• To place content in it and turn it into a slider, add content blocks 'History Card Component'.
• This content block was originally conceived to represent a timeline. This can also be used for other purposes.  
• Alignment adjustment: Wide, Normal, Narrow

Image Buttons + Image Buttons Media

• The basic block is content block 'Image Buttons'
• To fill it with content, add 'Image Buttons Media'
  • Image: Landscape M
  • Title
  • Text
  • Display of link: Button | Read more | Dangerous
• You can add as many Image Buttons Media as you want. The alignment of the blocks remains the same. 

Expander Block + Expander Item Block + Product Overview Page + Sustainability Page

• The base block is content block 'Expander Block'
• To fill it with content, add 'Expander Item Block'
  • This consists of:
    • Title
    • Text (bold)
    • Buttons
    • Main Content
      • Fill with Content Block "Page Overview Block"
      • Fill the "Page Overview Block" with "Sustainability page" content blocks
• Fill the 'Sustainability Page' content block with: 
  • Image: Landscapem
  • Overview Title
  • Overview Text
  • Overview Link
    • Text (for example: Read more)
    • Dangerous
    • Type of link: Read more of Link

This is how you get a layout:

Expander Block

• • Topic 1 = Expander Item Block
    • Page Overview Block 
    • Subtopic 1 = Sustainability Page
    • Subtopic 2 = Sustainability Page
    • Subtopic 3 = Sustainability Page
  • Topic 2 = Expander Item Block
    • Page Overview Block
    • Subtopic 1 = Sustainability Page
    • Subtopic 2 = Sustainability Page
    • Subtopic 3 = Sustainability Page
  • Topic 3 = Expander Item Block
    • Page Overview Block 
    • Subtopic 1 = Sustainability Page
    • Subtopic 2 = Sustainability Page
    • Subtopic 3 = Sustainability Page

You can also only use the Product Overview Block and Sustainability Pages. See example two.