Page Comparison

Do as follows:

In this example, we describe how to use Layout Builder with an existing rich page and how to add the “Text box” and “Video” components in a two-block section

1. With the page open, click “Layout” in the row of tabs.
   
   
   
   
2. Add section
   Underneath the fixed fields you can create your layout by first adding what are known as sections. 
   1. Click the “Add section” link at the bottom right of the page or use the pre-selected “Two-block section” on the page.
      
      
      
      
3. Section type
   You can now choose how many blocks the section is to have by clicking one of the different layouts to the right of the page.
   1. “Two-column” (three options).
   2. “Threecolumn”.
   3. “Single-column
   4. “Full width”.“
      
      
      
      
4. Configure section
   Specify the section heading, background colour (none or grey) and whether there is to be a margin between it and the section above. This applies to all new sections with the exception of the “Full-width” type, which doesn’t have any settings.
   1. Click the blue “Add section” button.
      
      
5. Fill the section with content and add components
   You can now start filling the section you just added with content.
   Click the “Add component” link on the left of the two-block section.
   
   Image Added
   
   
   1. Select component
      In this example, we choose to add the “Text box” component from the list on the right. Click the “Text box” “Textbox” link.
      
      Image Added
   2. Configure component
      Enter the text in the box that opens in the editor and click the blue “Add component” button to save.
      
      Image Added
6. Now add content to the right of the two blocks. Click the “Add component” link.
   
   Image Added
   
   
   
   1. Select component
      In this example, we choose to add the “Video” component. Click the “Video” link.
      
      Image Added
   2. Configure component
      1. Title
         Enter the video’s name/heading in the “Title” field (required). This text will appear under the video.
      2. Video URL
         Enter the URL of the video by pasting the address in the “Video URL” field (required).
      3. Video length
         Enter the length of the video using the format m:s (minutes and seconds) or h:m:s (hours, minutes and seconds) in the “Video length” field.
      4. Video cover
         Add an image to be used as a cover image for the video before it’s played in the “Video cover” field (required). Click the grey “Open image library” button.
      5. Add component
         Click the blue “Add component” button.
         
         Image Added
         
         
7. Now publish the changes made to the page by selecting “Published” and then clicking the blue “Save changes” button.
   
   Image Added
   
   
8. “Image” component
   Select the “Image” component.
   1. Click “Open image library”.
   2. Choose an image from the library, highlight the image and click “Select images”.
   3. Enter an alternative text (required). Images that are purely decorative or carry no information are not to have an alt text.
   4. Click “Add component”.
9. “Promo – external (link)” component
   Select the “Promo – external (link)” component. Enter the heading in the “Title” field and the link address in the “Link” field. Click “Add component”.
   1. You can also choose to:
   2. Add a label in the “Label/Category” field to help visitors.
   3. Write a shorter summary in the “Introduction” field.
   4. Add an image to be displayed in the promo by clicking “Open image library”.
10. “Promo – internal (link)” component
    Select the “Promo – internal (link)” component. Enter the heading in the “Title” field and the link address in the “Link” field. Click “Add component”.
    1. You can also choose to:
       1. Add a label in the “Label/Category” field to help visitors.
       2. Write a shorter summary in the “Introduction” field.
       3. Add an image to be displayed in the promo by clicking “Open image library
11. “Video” component (specify which sections)
    Select the “Video” component.
    1. Enter the video title in the “Title” field (required).
    2. Paste a link from, for example, YouTube, Vimeo or GU Play in the “Video URL” field (required).
    3. Enter the length of the video in the “Video length” field (required).
    4. Add an image to be used as a cover image for the video before it’s played in the “Video cover” field (required).
    5. Click “Add component”.
12. “Text box” component
    Select the “Text box” component.
    1. Add your text in the editor.
    2. Click “Add component”.
13. “Document” component
    Select the “Document” component.
    1. Enter the heading in the “Heading” field.
    2. Click “Add document”.
    3. Click the “Browse existing documents” link to specify a file or to search for an existing file. 
    4. Check the checkbox and click the “Select document” button.
    5. You can also choose to upload a new document:Click the “Upload a new document” link.
       1. Click the “Upload a new document” link.
       2. Enter the title in the “Title” field.
       3. Click the “Browse…” button in the “File” field and search for your document.
       4. Enter a short summary describing the document.
       5. Specify a “Cover image” if you want to add an image to the left of the document link.
14. “Link list” component
    Select the “Link list” component.
    1. Enter the link list heading in the “Heading” field”
    2. Enter the link to the page in the “URL” field and the link text in the “Link text” field.
    3. Click the “Add more alternatives” button to add more links.
    4. You can change the order of the links by clicking the “Show row weights” button.
15. “Editor” component (this component can only be used on information pages and in the left section)
    Select the “Editor” component.
    1. Add your text in the editor.
    2. Click “Add component”.
16. “Accordion” component
    Select the “Accordion” component.
    1. Specify the heading and heading level (H2–H4) of the accordion in the “Heading” field.
    2. Add the facts in the editor under “Content”.
    3. Click “Add component”.
    4. Use the “Save changes” button to save your changes.
17. “Fact box” component
    Select the “Fact box” component. 
    1. Enter the title in the “Title” field.
    2. Add the fact box text in the editor in the “Facts” field.
    3. Click “Add component”.
18. “Text box” component
    Select the “Text box component.
    1. Add the text in the editor.
    2. Click “Add component”.
19. Don’t forget to save your changes.
    
    Image Added