Drupal, instruktioner för redaktörer

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 6 Next »

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-block” (three options).
    2. “Three-block”.
    3. “Single-block”.
    4. “Full-width”.“
  4. Configure sectionSpecify 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 “Text box” 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 (specify which sections)
    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 (specify which sections)
    Select the “Promo – external (link)” component. Enter the heading in the “Title” field and the link address in the “Link” field. Click “Add component”.
  10. 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. “Promo – internal (link)” component (specify which sections)
    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:
    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
  12. “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”.
  13. “Text box” component (specify which sections)
    Select the “Text box” component.
    1. Add your text in the editor.
    2. Click “Add component”.


  • No labels