Drupal, instruktioner för redaktörer

The Layout Builder

Owned by Mattias Jacobsson
Last updated: Jun 05, 2024 by Elin Lindeberg
6 min read

This manual is no longer in use. Instead, you can find guidelines and instructions for working on gu.se, the Student Portal, and the Hotel Portal in Redaktörsmanual Drupal.

Description

Layout builder makes it easy to build flexible pages and layouts using the special functions available in Drupal. Here you can create page layouts freely but be careful not to overuse the different features. Pages are divided into sections, which in turn can be divided into a number of blocks, which are then filled with components. Layout Builder gives editors an opportunity to help visitors to find the right information.

Layout Builder can be used as a complement for information pages and pages about research projects/groups. In the case of rich pages, however, Layout Builder is a must if you’re to create a decent page.

Layout Builder is used the same regardless of the content type being edited. There are, however, differences in which components are available depending on the content type. For example, you can add a fact box to an information page but not to a rich page. The Information section is only available for information and research project/group pages. And the Editor component is only available in the Information section. Read more under Rules for sections and components.

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.



    1. Select component
      In this example, we choose to add the “Text box” component from the list on the right. Click the “Textbox” link.

    2. Configure component
      Enter the text in the box that opens in the editor and click the blue “Add component” button to save.

  6. Now add content to the right of the two blocks. Click the “Add component” link.




    1. Select component
      In this example, we choose to add the “Video” component. Click the “Video” link.

    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.



  7. Now publish the changes made to the page by selecting “Published” and then clicking the blue “Save changes” button.



  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. “Blurb – external (link)” component
    Select the “Blurb – 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 blurb by clicking “Open image library”.
  10. “Blurb – internal (link)” component
    Select the “Blurb – 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 blurb 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.