Sample elements

This could be an introduction or standfirst to a standard page. It is entered as a Heading 2.

Other text can then flow on below it.

Header

The full screen image above is the “Featured image”, which is uploaded in the panel to the right of the edit screen. Once an image has been set as the featured image, then it is displayed with the title overlaid on it.

You can further edit the header from the header panel, also on the right hand side of the edit screen.

For the header you can set the credit or caption for the image, and determine how the image is positioned when the screen size alters.

General approach

Each section in the page builder has some standard fields, and then other fields that are specific to help you create the layout and content for that type of section. The general fields are:

Admin label – a simple text label that gets added to the section title in the editor. This helps you identify what the rows are when they have been collapsed. It is helpful to collapse the sections to keep the page easy to navigate and it also helps if you want to move the sections around in the page; it’s easier to move if they are small and collapsed. The admin label is not displayed anywhere on the live site.

ID – This is an optional unique identifier that you can place on any section. It should be written all in lower case and with underscores rather than spaces. If used, it allows you to use what’s called a page anchor to link directly to a point within a page. For example you might create an ID called “casts_and_credits” on a show page. You could then link to it as https://wildworks.org.uk/show-name/#casts_and_credits.

Class – Some sections have additional options for how they might display, these are selected in the class list. You can select multiple options by holding down the control key on your keyboard whilst making a selection with your mouse or other pointing device.

Formatting

In the text here, the content has been broken up with the use of headings. These should be used rather than just making text bold as it will help with accessibility and with the site being indexed by search. The top introduction is set as Heading level 2; The other headings in this block are set at Heading level 3.

Please avoid using an underline to emphasise any text as this is reserved for indicating links.

Single image

What follows this section is a single image block. It has the options for texture set on the top and bottom edges.

If the image is to have a credit or caption, then choose the “Base texture with caption” option, rather than just Base texture, as this allows space for the caption text and still allows the texture to appear over the image. If just “Base texture” is used, with a caption text, then the base line of the image may instead appear as a sharp flat line, the texture not appearing over it.

Slideshow

Next is a slideshow. This is primarily images, but you can also choose to make any of the slides launch a video in a full screen lightbox by adding the video share link into the relevant “video lightbox” field.

As with an image, you can also choose to add texture to the top and bottom of the slideshow, rather than leaving  a sharp edge between the slideshow and the surrounding sections.

Reveal panels

A reveal panel consists of content that is hidden until a link is clicked on, and then the content is revealed.

The ‘title’ field is what is shown initially, and is clicked on in order to show the fuller content.

The content consists of a number of columns; 2 columns will show at 50% width on desktop, 4 columns will show at 25% width.

Optionally there can be a textured line show below the block to delineate the content.

Quote

A quote consists of the quote text itself, followed by a citation.