Custom block on standard page
Custom blocks allow editors to add more specialised or advanced functions to a standard page. Some examples include direct children as cards and dialog pop-up boxes.
When to use custom blocks
Do
- Use custom blocks to add advanced functionality to a page.
Don't
- Use custom blocks that have been developed specifically to be used only by a particular agency – unless that agency is yours.
- Custom blocks variations that are not included in this guide shouldn't be used. Custom block legacy variations that should no longer be used include:
- Content Statistics Block
- DCS Agency Social Channels Block – use the Contact block instead.
How to add a custom block
To add a custom block to a standard page:
- Go to the Edit screen of your standard page and scroll down to the Add block button.
- There is a drop down arrow on the Add block button. Click the arrow to expand the drop down options in the Add block button and select Custom block.
- The Custom block will be generated. By default the Type will be set to Advanced block. You can leave this setting.
- In the Plugin field select the type of custom block you want to add, then follow the instructions for that block type:
To add Direct children as cards:
- In the Plugin dropdown, under the Navigation heading select Direct children as cards.
- In Column layout use the drop down to select either 2, 3 or 4 cards across. See How Direct children as cards displays in each variation.
- In Entity select Entity from route for the child pages of the page you are editing to display as cards.
To add a Webform:
In the Plugin dropdown, under the Webform heading select Webform.
In the Webform look up field start typing the name of an existing webform that you would like to add to your page. A dropdown of available forms should be generated. Select your form. Your webform must already have been created. If there is not an existing webform, see instructions for how to create a new webform.
To add a Dialog:
In the Plugin dropdown, under the heading DCS select Dialog.
From the Variant dropdown select either Simple or Callout. See How Dialog displays to see the difference.
In the Open button label add the text for the button that will be on your webpage that will open the dialog.
If you have selected Callout as your variant you also add text in the optional Copy field. Ignore this step if you have selected Variant > Simple.
The Dialog type should have the Single call of action option selected from the dropdown.
Add a Dialog title. This will be the heading at the top of your dialog.
The Dialog body is an optional field where you can add information that you would like displayed within your dialog.
The Legal dislaimer is optional. If you would like it to display, tick the Display legal disclaimer box and add your legal message in the Body field below it.
Scroll to Action buttons.
Add a Primary button label. This is the text that will be on the button within your dialog that links to another URL.
Add a Primary button link. This is the link that customers will go to if they press the button within the dialog.
To add a Hubspot subscribe block:
- In the Plugin field select Hubspot subscribe.
- In the Heading field enter the heading you would like to appear. For example, ‘Subscribe to our enews’. This will appear as an H3 heading on the page.
- In the Text field enter a description about your subscription. For example, ‘Stay up-to-date with the latest news and events by subscribing to our weekly newsletter.’
- In the Form GUID field you will need to enter your Hubspot GUID. This will be found in your Hubspot account and copy/pasted into this field.
- To locate your form's GUID: In your HubSpot account, navigate to Marketing > Lead Capture > Forms. If you have a free HubSpot account, click Marketing > Forms. For more help with the GUID number you will need to contact Hubspot.
After you have embedded and saved your page, submit a test of the subscription component and check that the data is coming into your Hubspot account correctly.
5. Scroll to the bottom of the page and click the Save button.
Child 1 heading
Child page 1 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
Child 2 heading
Child page 2 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
Child 3 heading
Child page 3 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
Child 4 heading
Child page 4 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
Three per row
Child 1 heading
Child page 1 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
Child 2 heading
Child page 2 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
Child 3 heading
Child page 3 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
Child 4 heading
Child page 4 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
Four per row
Child 1 heading
Child page 1 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
Child 2 heading
Child page 2 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
Child 3 heading
Child page 3 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
Child 4 heading
Child page 4 summary text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
How a webform displays
Example of a very basic form added with Custom block.
How dialog with simple variation displays
Dialog title
Dialog body: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
How dialog with callout variation displays
Copy field (only available in callout variation).
Dialog title
Dialog body: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.
How dialog with callout variation displays with legal message
Copy field (only available in callout variation).
Dialog title
Dialog body: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies erat ut tortor efficitur iaculis.