Skip to main content Skip to navigation

Page layouts in the Components Editor

The Components Editor enables you to create and edit page layouts yourself by adding and repositioning components, such as layout blocks. There is no need to request a layout, as you do for the old visual editor.

You can undo any changes you make, before publishing the page, by using the undo button in the top-left of the editor.

In this article:

Add a block layout

The Components Editor provides standard layout block components in the left-hand menu. You can use these to create columns of blocks on your page to position your text, images and other content.

  1. Edit the page with the Components Editor.

  2. Place your cursor where you want to add the layout block.

  3. Select Add layout blocks in the left-hand menu:

    The Components Editor screen, with the 'Add layout blocks' menu open

  4. Choose one of the available options:

    • Three block layout - three equal-sized blocks arranged in columns.

    • 1:2 block layout - two blocks arranged in columns, with the first occupying a third of the available space, and the second occupying two-thirds.

    • 2:1 block layout - two blocks arranged in columns, with the first occupying two-thirds of the available space, and the second occupying one third.

    • Two block layout - two equal-sized blocks arranged in columns.

    • Three blocks with images - three equal-sized blocks with images at the top and text below, arranged in columns.

    • 2:1 block layout with image - two blocks arranged in columns. The first occupies two-thirds of the available space, with an image on the left-hand side and text on the right. The second occupies the remaining third of the available space.

    • 1:2 block layout with image - two blocks arranged in columns. The first occupies a third of the available space. The second occupies the remaining third of the available space, with an image on the left-hand side and text on the right.

    • Hero block - a single large image, with or without overlaid text. For more details, see the Add a hero block section below.

  5. The layout blocks component you selected appears on your page, containing placeholder content.

    A block layout component containing placeholder content

  6. Replace the placeholder text with your own content.

  7. To replace any placeholder images in the block layout:

    1. Select the placeholder image, then in the toolbar that appears above it, select Settings:

      A layout block with a placeholder image selected, and the 'Settings' option highlighted

    2. Use the Image pop-up to specify your image settings.

  8. When you've finished editing your page, select Publish.

^ Back to top

Change the appearance of a content block

  1. Place your cursor inside the block.

  2. In the toolbar that appears, select Style:

    A selected layout block displaying its toolbar, with the 'Style' option highlighted

  3. Select the style you want from the available options in the pop-up:

    The 'Block style' pop-up showing the available style options

    • Selecting the Flush to edges of container checkbox removes any margins from the sides of the selected block, allowing it to fill the full available width.

    • The Flush to content above checkbox removes any margin from the top edge, so text or images within the block will appear closer to the content directly above it.

    • Deselecting Include margin below box removes the standard space below the block.

    Tip: If your site or page uses custom CSS styling, you can use the Custom block class field to tell SiteBuilder to use a custom class for the selected block, like this one.

  4. Select Submit.

^ Back to top

Change the number, width, and order of columns in a block layout

Position your cursor in a space between two blocks to select the Block layout component, then select Manage blocks in the toolbar that appears.

The 'Manage blocks' pop-up, showing the settings for three columns of unequal width

In the Manage blocks pop-up:

  • Use thedrag icons to re-order your blocks.

  • Set blocks' relative widths via the drop-down lists.

  • Duplicate an existing block, including its style and content.

  • Delete unwanted blocks.

  • Select Add new block to insert an empty, un-styled content block.

Tip: Each block's width is set as a number of twelfths of the available space. This enables you to divide the space into two, three, or four equal columns.

Note: If the total width of columns is greater than 12, blocks will wrap onto a new row.

^ Back to top

Change the spacing between columns in a block layout

Position your cursor in a space between two blocks to select the Block layout component, then select Settings in the component toolbar:

The Block layout toolbar, with the 'Settings' option highlighted

To remove the space between individual blocks within the block layout, select the Hide gutters between blocks checkbox. To remove space from the side of the sides of the block layout, making it take up the full width of the page, select Flush the edges of the layout row to the edges of the page:

The Block layout settings pop-up

Select Update block layout.

A layout block on a published page, with no gaps between blocks or at the edges of the page

^ Back to top

Add a block style to existing text

If you have a paragraph (or paragraphs) of text and want to add a block style, or to create a single, full-width content block:

  1. Position your cursor in the text you want to add a block style to.

  2. Select Add text & formatting > Block style:

    The 'Add text& formatting' menu, with the 'Block style' option highlighted

  3. Follow the instructions from step 3 of Change the appearance of a content block, above.

^ Back to top

Add a hero block (large image with overlaid text)

  1. Edit the page with the Components Editor.

  2. Place your cursor where you want to add the hero block.

  3. Select Add layout blocks > Hero block in the left-hand menu.

  4. A hero block container appears on your page, containing placeholder content.

  5. Replace the placeholder text with your own.

  6. To replace the placeholder image or format the text overlay:

    1. Select the hero block, then in the toolbar that appears above it, select Settings:

      A selected hero block in the Components Editor, with the 'Settings' option highlighted

    2. Use the Hero pop-up to specify the block settings:

      The 'Hero' pop-up, showing the available options for a hero block

      • To specify the image, do one of the following:

        • Enter the Image URL, or select the button to locate an image already uploaded to your site.

        • Drag and drop a file from your computer into the dotted-line box, or select the Browse button to locate a file on your computer.

        • Select an image under Recently uploaded files, if any are present.

      • Select the relevant checkboxes to make the block Full width (no side margins) or Flush top (no top margin).

      • Specify the Text side margin, change Text colour, enable or disable the Text background or change the Text position on the image.

  7. Select Update hero to apply your changes.

  8. When you've finished editing your page, select Publish.

^ Back to top

Add a carousel (automatic slideshow of images with overlaid text)

  1. Edit the page with the Components Editor.

  2. Place your cursor where you want to add the carousel.

  3. Select Add images/media > Carousel from the left-hand menu.

    The 'Add images/media' menu, with the 'Carousel' option highlighted

  4. The Add a carousel pop-up appears:

    The 'Add a carousel' pop-up

  5. Select the required check-boxes for the following display properties:

    • Full width: The carousel spans the available space, with no margin either side.

    • Flush top: Remove any space between the carousel and the component above it, or the top of the page, depending where it's placed.

  6. Use the Text colour drop-down to select whether text overlaid on the carousel is Light or Dark.

  7. Each slide within the carousel has a section to specify its properties:

    1. To select the image for the slide, do one of the following:

      • Use the Image text field to enter the URL of the image you want to display. You can use relative or absolute URLs.

      • Select the button to locate an image that's already been uploaded to your site.

      • Drag and drop files into the dotted-line box.

      • Select the Browse button to locate and upload a file on your computer.

      • Select an image under Recently uploaded files, if any are present.

    2. Optionally, in the Link to box, specify a web address that the Heading text will link to. You can enter the address directly in the box, or select the button to choose another page in your site.

    3. In the Heading box, enter the text you want to appear as the heading for the text box overlaid on this image in the carousel.

    4. In the Text box, enter the text you want to appear below the heading in the overlaid text box.

  8. To add another slide, select the Add slide button. There is one of these buttons at the top and bottom of the pop-up, to add slides at either end of the carousel.

  9. To change the order of slides, select the up or down arrow buttons in the top right of the corresponding section.

  10. To delete a slide, select Delete slide in the top right of that slide's section.

  11. When you've finished editing your slides, select Add carousel.

  12. The carousel appears on your page. Visitors to the page can use the controls within the text box overlay to pause the slideshow, scroll through the slides, or select a specific slide by its number in the sequence.

    An example of a carousel component, with the slide controls highlighted

  13. To make changes, select the Carousel in the editor, then select Settings in the toolbar that appears above it to reopen the carousel pop-up.

  14. When you've finished editing your page, select Publish.

^ Back to top

Reposition a component

  1. Edit the page with the Components Editor.

  2. Place your cursor within the component you want to reposition. If this is a parent component (a component containing at least one other component), either:

    • Position your cursor in the space between two child components to focus on the parent

    • On the toolbar for the child component, select the name of the parent component:

      A selected child component, with the parent component name highlighted in the toolbar
  3. Use the arrows in the component toolbar to move the component up or down the page:

    The component toolbar with the repositioning arrows highlighted

    Note: To reposition text, first highlight it, then click on it and drag it to the new position. You can also reposition objects that sit inline with text (icons, for example) by selecting them and dragging. It's not currently possible to reposition other components in this way.

  4. Each time you click one of the arrows, the component will be moved to a position immediately above or below the adjacent component, as appropriate.

    Tip: To reposition child components within a Block layout component, select the parent component so that its toolbar is visible, then select Manage blocks. In the pop-up that appears, drag and drop the items to reposition them.

  5. When you've finished editing your page, select Publish.

^ Back to top

Duplicate a component

  1. Edit the page with the Components Editor.

  2. Select the component you want to duplicate. If you want to duplicate a parent component (a component containing at least one other component), either:

    • Position your cursor in the space between two child components to focus on the parent

    • On the toolbar for the child component, select the name of the parent component:

      A selected child component, with the parent component name highlighted in the toolbar

  3. On the toolbar that appears above the component, select Duplicate:

    A component toolbar, with the 'Duplicate' option highlighted

  4. A copy of the component, including any content within it, appears below or next to the existing one.

  5. When you've finished editing your page, select Publish.

^ Back to top

Delete a component

  1. Edit the page with the Components Editor.

  2. Select the component you want to duplicate. If you want to delete a parent component (a component containing at least one other component), either:

    • Position your cursor in the space between two child components to focus on the parent

    • On the toolbar for the child component, select the name of the parent component:

      A selected child component, with the parent component name highlighted in the toolbar

  3. On the toolbar that appears above the component, select Delete:

    A component toolbar, with the 'Delete' option highlighted

  4. If the component contains text or other content, a pop-up appears asking whether you want to keep that content, or delete it:

    The pop-up asking whether a component's content should be kept or deleted
  5. When you've finished editing your page, select Publish.

^ Back to top

Related articles

Support

Email webteam@warwick.ac.uk
How to report a problem