If you can’t find a suitable block in the block library – or you’re simply feeling creative – choose a Custom block and fill it with your own content. The Custom block lets you create a unique layout by arranging block elements (widgets) your own way, for example an image next to a form, or a video next to a button.
Adding a Custom block
The Custom block is at the top of the block library. Once you’ve added it to the canvas, click the yellow Add widget button to add the widgets you need.
Which widgets are available?
Widgets are grouped into sections for easy navigation. You can also search for the widget you need using the search field at the top of the Widget library.
Grid & Columns
Grid & Columns widgets shape the layout of your Custom block – they act as dividers with containers that you then add other widgets into. Use one to split the block into vertical sections. If you want widgets stacked on top of each other rather than side by side, you can skip this section.
- 2 columns: splits the block vertically into two columns, each with its own widgets.
- 3 columns: splits the block into three columns.
- 4 columns: splits the block into four columns.
- Media on the right/left: mimics the About us block layout, with more space between columns than the 2-column widget – improving readability when a large media element sits next to text.
You can change the number of columns per row or switch the element layout in the block settings.
Note: you can only add one Grid & Columns widget per Custom block – for example, you can’t place a 2-column widget above or inside a 3-column widget. You can, however, add two Custom blocks and use a different grid in each.
Column settings
Once you’ve added a column, you can add widgets to it. Select a column and open its settings to change that column’s colour scheme, alignment, border, shadow, corners and spacing – as well as settings for all columns in the block: layout, alignment, columns per row, column width, column height, borders, shadows, corners and spacing.
Hovering over a setting’s name shows a tooltip with extra guidance. Widget settings may vary depending on alignment – for example, resizing a left-aligned image keeps it left-aligned, while resizing a centred image automatically centres the content, including text.
Stretch columns
This setting stretches all columns to the same height and width as the tallest column in each row, giving an even, consistent design when rows contain boxes of varying number and size. If you’ve set column width to “Fixed” or column height to “Hug”, you can adjust the alignment manually to centre columns as needed.
Basic
These widgets are the building blocks of any site:
- Text: add any text, including links.
- Image: add an image to the block.
- Button: add a button you can link.
- 2 Buttons: add two buttons at once, editable separately.
- Spacer: add adjustable extra space between two widgets.
- Form: add a contact form.
- Quote: a text element, a small image element (for a photo) and a second text element for a name.
- Icon: add a social media icon or any other icon from our collection.
- List with icons: combines icons with text – great for listing services. Items can be duplicated.
- HTML: add custom code to the block.
Media
- Image: add an image to the block.
- Video: place a playable video in the block.
- Music: embed an audio track, for example from SoundCloud, via a link or embed code.
- Embed: embed any third-party solution that works via an iframe code, such as a Google Doc, Google Calendar or Elfsight widget. For non-iframe code, use the HTML widget.
Social
- Social icons: four of the most popular social media icons in one place – swap or remove them as you like.
- Follow us: the same as Social icons, plus an editable “Follow us” text element.
Customising block settings
Click the block, then the Block settings icon. The Layout tab isn’t active for the Custom block, since you set the layout with Grid & Columns. In the Appearance tab you can change:
- Block style: the block’s colour scheme.
- Block spacing: the space above and below the block.
- Vertical alignment: align content to the top, middle or bottom.
- Columns layout: the number of items per row.
- Background settings: add a background image to the block.
Click Save to confirm.
Duplicating widgets
Hover over any widget inside the Custom block and click Duplicate. Items within a List with icons widget can also be duplicated individually. Duplicating a column also duplicates all widgets inside it.
Resizing widgets
Image, Video and Music widgets can be resized by clicking the widget and dragging the resize handle at the bottom. The Text widget can be resized by dragging the handles on its sides.
Moving a widget
Hover over a widget, click Move and drag it to its new position. Moving a column also moves all widgets inside it.
Deleting a widget
Hover over a widget and click Delete. Deleting a column also deletes all widgets inside it.
Editing text, images and buttons
Click a text element to replace the demo content, or paste in text from elsewhere. You can replace demo images with your own photos, and edit buttons to link to other pages on your site or an external URL.