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 layout blocks to display your content in columns

The Components Editor provides standard layout blocks 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, then choose one of:
    • Three block layout - three blocks arranged in columns, with each occupying a third of the available width.
    • 1:2 block layout - two blocks arranged in columns, with the first occupying a third of the available width and the second occupying two thirds.
    • 2:1 block layout - two blocks arranged in columns, the first occupying two thirds of the available width and the second occupying a third.
    • Three blocks with images - three bocks, each with an image at the top and text below, arranged in columns, all occupying a third of the available width.
  4. The layout blocks component you selected appears on your page, containing placeholder content.

    Tip: to change the number of columns, position your cursor in a space between two blocks to select the overall container and select Layout in the toolbar that appears, then select the option you want in the pop-up:

    • For Three block layout, 1:2 block layout or 2:1 block layout select the number of columns and their relative sizes:
      • 2 columns - 1:1
      • 2 columns - 1:2
      • 2 columns - 2:1
      • 2 columns - 3:1
      • 2 columns - 1:3
      • 3 columns - 1:1:1
    • For Three blocks with images, select a number of items per line, from 2 to 5.
  5. Replace the placeholder text with your own content.
  6. Replace any placeholder images with your own:
    1. Select the image, then in the toolbar that appears above it, select Settings.
    2. Follow the steps to specify the image and associated settings.
  7. Optionally, you can change the styling of a block that contains text:
    1. Place your cursor within the block.
    2. In the toolbar that appears above it, select Style.
    3. Select the style you want in the popup.
  8. When you've finished editing your page, select Publish.

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 component appears on your page, containing placeholder content.
  5. Replace the placeholder text with your own.
  6. To replace the placeholder image, select the hero block, then Settings in the toolbar that appears above it.
  7. A pop-up appears for you to specify the image. You can:
    • Select the magnifying glass button to find an image that's already uploaded to your website.
    • Drag and drop an image from your computer into the dotted-line box.
    • Select the Browse button within the above box to choose a file on your computer.
    • Select an image under Recently uploaded files, if any are present.
  8. You can also select or unselect the checkboxes for the following display properties of the image:
    • Full width (no side margins) - the image spans the page, with no space either side.
    • Flush top (no top margin) - there is no space between the image and the component above it, or the top of the page, depending on where it's placed.
  9. Optionally, in the same Settings pop-up, you can change the following properties of the text:
    1. Text side margin - the space between the sides of the text box and the edges of the image, as a proportion of the width of the image.
    2. Text colour - choose whether the text appears Light or Dark. If you have Text background selected below, light text appears in a dark shaded box and dark text appears in a light shaded box.
    3. Text background - select the checkbox to have the text box shaded, or unselect it to have it transparent.
    4. Text position - determines the position of the text box within the image and the alignment of the text within the box, taking the Text side margin into account.
  10. Select Edit hero to apply your changes.
  11. When you've finished editing your page, select Publish.

A carousel contains at least three slides consisting of a large image overlaid with a text box. Each slide is displayed for about 4 seconds, in sequence. When the last slide is reached, the carousel loops back round to the first. You can optionally specify a web address to link to from the heading you specify for the text box on each slide.

  1. Edit the page with the Components Editor.
  2. Place your cursor where you want to add the carousel.
  3. Select Add images, media files and carousels > Carousel in the left-hand menu.
  4. A pop-up appears. Select or unselect the checkboxes for the following display properties:
    • Full width - the carousel spans the page, with no space either side.
    • Flush top - there is no space between the carousel and the component above it, or the top of the page, depending on where it's placed.
  5. Each slide within the carousel has a box in the pop-up to specify its properties:
    1. To select the image for the slide, do one of the following:
      • Select the magnifying glass button next to the Image box to find an image that's already uploaded to your website.
      • Drag and drop an image from your computer into the dotted-line box.
      • Select the Browse button within the above box to choose 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 text in the Heading box below will link to. You can enter the address directly in the box or select the magnifying glass button and choose the appropriate page in a pop-up.
    3. In the Heading box, enter the text you want to appear as a heading within the text box that will be overlaid on the image.
    4. In the Text box, enter the text you want to appear below the above heading.
  6. To add another slide, select the Add slide button.

    Tip: to change when a slide appears within the sequence, select the up or down button in the top right of the corresponding box. The slide at the top of the list appears first and the slide at the bottom appears last.

  7. To delete a slide, select Delete slide in the top right of the box for the relevant image.
  8. When you've finished adding slides, select Add carousel.
  9. The carousel appears on your page.

    Note: visitors to the page are able to use the controls within the text box on each slide to pause the slideshow, change to the next or previous slide or select a specific slide by its number in the sequence.
  10. To make changes, select the carousel, then select Settings in the toolbar that appears above it. This brings the pop-up back up
  11. When you've finished editing your page, select Publish.

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 a space between two child components to focus the parent component
    • On the toolbar for the child component, select the up arrow to focus the parent component.
  3. Click and release the four-headed arrow in the toolbar for the component you want to move.

    Note: to reposition text, first highlight it, then click on it and drag it to the new position. You can also reposition components that sit inline with text, and do not have the four-headed arrow in their toolbars, by clicking on them and dragging. It's not currently possible to reposition other components in this way.

  4. You see the text Moving component - click to place and a dotted line representing the target position of the component. Move your cursor to the position you want to place the component and click.
  5. The component appears in the new position.
  6. Alternatively, in the toolbar for the component you want to reposition, select the up arrow or down arrow. These move the component up or down within the order of the components on the page.

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

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

Duplicate a component

  1. Edit the page with the Components Editor.
  2. Place your cursor within the component. If you want to duplicate a parent component (a component containing at least one other component - a child component), either:
    • Position your cursor in a space between two child components to focus the parent component
    • Or, on the toolbar for the child component, select the up arrow to focus the parent component.
  3. On the toolbar that appears above the component select Duplicate.
  4. A copy of the component, including any content you added, appears below or next to the existing one.
  5. When you've finished editing your page, select Publish.

    Delete a component

    1. Edit the page with the Components Editor.
    2. Place your cursor within the component. If you want to delete a parent component (a component containing at least one other 'child' component), either:
      • Place your cursor in a space between two child components to focus the parent component
      • Or, place your cursor within a child component, then on the toolbar above it select the up arrow to focus the parent component.
    3. On the toolbar that appears above the component select Delete.
    4. The component is removed from your page. If necessary, you can undo this by selecting the undo button on the left of the toolbar at the top of the editor.

      Note: if the component contains text, you're prompted to choose whether to:

      • Keep contents - the surrounding component is deleted but the text it contained is kept on the page.
      • Delete contents - the surrounding component and all text it contained are deleted.
    5. When you've finished editing your page, select Publish.

    Support

    Email webteam at warwick dot ac dot uk
    How to report a problem