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
- Change the appearance of a content block
- Change the number, width, and order of columns in a block layout
- Change the spacing of columns in a block layout
- Add a block style to existing text
- Add a hero block (large image with overlaid text)
- Add a carousel (automatic slideshow with overlaid text)
- Reposition a component
- Duplicate a component
- Delete a component
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.
-
Place your cursor where you want to add the layout block.
-
Select Add layout blocks in the left-hand menu:
-
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.
-
-
The layout blocks component you selected appears on your page, containing placeholder content.
-
Replace the placeholder text with your own content.
-
To replace any placeholder images in the block layout:
-
Select the placeholder image, then in the toolbar that appears above it, select Settings:
-
Use the Image pop-up to specify your image settings.
-
-
When you've finished editing your page, select Publish.
Change the appearance of a content block
-
Place your cursor inside the block.
-
In the toolbar that appears, select Style:
-
Select the style you want from the available options in the pop-up:
-
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.
-
-
Select Submit.
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.
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.
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:
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:
Select Update block layout.
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:
-
Position your cursor in the text you want to add a block style to.
-
Select Add text & formatting > Block style:
-
Follow the instructions from step 3 of Change the appearance of a content block, above.
Add a hero block (large image with overlaid text)
-
Place your cursor where you want to add the hero block.
-
Select Add layout blocks > Hero block in the left-hand menu.
-
A hero block container appears on your page, containing placeholder content.
-
Replace the placeholder text with your own.
-
To replace the placeholder image or format the text overlay:
-
Select the hero block, then in the toolbar that appears above it, select Settings:
-
Use the Hero pop-up to specify the block settings:
-
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.
-
-
-
Select Update hero to apply your changes.
-
When you've finished editing your page, select Publish.
Add a carousel (automatic slideshow of images with overlaid text)
-
Place your cursor where you want to add the carousel.
-
Select Add images/media > Carousel from the left-hand menu.
-
The Add a carousel pop-up appears:
-
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.
-
-
Use the Text colour drop-down to select whether text overlaid on the carousel is Light or Dark.
-
Each slide within the carousel has a section to specify its properties:
-
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.
-
-
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.
-
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.
-
In the Text box, enter the text you want to appear below the heading in the overlaid text box.
-
-
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.
-
To change the order of slides, select the up or down arrow buttons in the top right of the corresponding section.
-
To delete a slide, select Delete slide in the top right of that slide's section.
-
When you've finished editing your slides, select Add carousel.
-
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.
-
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.
-
When you've finished editing your page, select Publish.
Reposition a component
-
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:
-
-
Use the arrows in the component toolbar to move the component up or down the page:
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.
-
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.
-
When you've finished editing your page, select Publish.
Duplicate a component
-
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:
-
-
On the toolbar that appears above the component, select Duplicate:
-
A copy of the component, including any content within it, appears below or next to the existing one.
-
When you've finished editing your page, select Publish.
Delete a component
-
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:
-
-
On the toolbar that appears above the component, select Delete:
-
If the component contains text or other content, a pop-up appears asking whether you want to keep that content, or delete it:
-
When you've finished editing your page, select Publish.