Page Builder Features
(For notes about writing style, please see our Style Guide.)
All content below this line is contained in Page builder sections.
Page Builder features
The following segments show how (some of) the Page Builder tools display their content.
(The specific features available in the Page Builder vary depending on the Content Type you are currently working on, so that a Basic Page does not offer the same set of tools as, say, a News page.)
Without this heading, the text gets too close to the image
The image above is a Full-width image. The preferred dimensions of the source image are 1800 x 800 pixels. It will rarely be displayed at that size (on current monitors) but oversize images scale down well, while images that are too small get blocky, grainy, and/or fuzzy when scaled up.
Here's some random text for purposes of padding out the page. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Other image sizes
The image of the Radcliffe Camera is set to show to the left of the text at 50% of the width of the whole column.
The source image should be 900 px wide or more. Height is not important.
Here's some random text for purposes of padding out the page. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
The stock image of people in conversation image here is set to display to the right of the text at 25% of the width of the column.
The source image should be 450 px wide or more. Height is not important.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Using 'Add video' in Page Builder
This is the tool to use for featuring a single video.
NB. If an overlay is added, then the video won't play directly. Also, if 'Show in waypoints' is set, the item will be listed, but the jump link won't work.)
Some random text for purposes of padding out the page, as you wouldn't normally expect to find all the features grouped together one after the other. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Featured row - Transparent background
This is a transparent feature row, added using the Page Builder. The linked content is not relevant here, but is shown merely to illustrate how the feature is displayed.
Some random text for purposes of padding out the page, as you wouldn't normally expect to find all the features grouped together one after the other. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
A sample video
A second sample video
And a third
Some random text for purposes of padding out the page, as you wouldn't normally expect to find all the features grouped together one after the other. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Text with highlight
Main paragraph text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Highlight text: This text can be used to accompany a link to a downloadable file, such as the sample used here.
Some random text for purposes of padding out the page, as you wouldn't normally expect to find all the features grouped together one after the other. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Basic Accordion
This is the basic accordion feature.
The link shown here can be either internal - to another page on the site - or external to a different website.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
External Featured row
This is intended for use as a gateway to external content, but of course there's no reason why it couldn't be used by an editor wanting to adopt this particular presentational style to offer a route to a page on this site, by using the full url.
While it is possible to put an ordinary link in the text like this one (which just goes to the top of this page) the standard link treatment for this kind of box is illustrated below, in which a specially-formatted link appears at the bottom of the block.
As you can see, there is no need to include a thumbnail image here.
There is also no requirement to actually offer a link to any other content, which means that it would be possible to use this feature just to offer a nugget of text like this (or indeed up to three columns of text) in a particular style.
As the text is created using the standard Edit tool - unlike some of these Page Builder elements - it is possible to offer the usual formatting variations, and to include ordinary linked text.
In fact, it may be used as a more flexible alternative to the 'Featured row - transparent' tool.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.