Close
We use cookies to improve your experience. By closing this you agree to our cookie policy.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Menu

Sample elements

Header caption
Buy Tickets

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.

Credit line for the image

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.

Single video

Videos can be placed singly as well as part of a slideshow. As with a slideshow, a video element consists of an image that is shown full width as a placeholder for the video and the play button. The play button then loads the “lightbox video” specified when clicked.

There is a further option to have a background video as well. This would be playing in a loop behind the play button. This isn’t currently available, although the field is there.

Play video

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.

 

Title for the reveal - 2 columns of content

This is a column of content for the reveals

Maecenas accumsan pellentesque varius. Curabitur tempor rhoncus fringilla. Nullam posuere luctus ultricies. In tristique iaculis pellentesque. Vestibulum ullamcorper ultricies fermentum. Fusce ante arcu, condimentum non malesuada eget, fringilla et mi. Proin tortor nibh, rutrum non vehicula eu, sodales id augue. Nunc sed neque eros, quis tempus diam. In pharetra congue mi vel volutpat. Aliquam quis sodales magna. Ut elementum tincidunt suscipit. Sed eu quam lorem. Proin id nulla nec eros ultrices fermentum id id nunc. Duis non felis ligula.

This is a column of content for the reveals

Maecenas accumsan pellentesque varius. Curabitur tempor rhoncus fringilla. Nullam posuere luctus ultricies. In tristique iaculis pellentesque. Vestibulum ullamcorper ultricies fermentum. Fusce ante arcu, condimentum non malesuada eget, fringilla et mi. Proin tortor nibh, rutrum non vehicula eu, sodales id augue. Nunc sed neque eros, quis tempus diam. In pharetra congue mi vel volutpat. Aliquam quis sodales magna. Ut elementum tincidunt suscipit. Sed eu quam lorem. Proin id nulla nec eros ultrices fermentum id id nunc. Duis non felis ligula.

Title for the reveal - 4 columns of content

This is a column of content for the reveals

Maecenas accumsan pellentesque varius. Curabitur tempor rhoncus fringilla. Nullam posuere luctus ultricies. In tristique iaculis pellentesque. Vestibulum ullamcorper ultricies fermentum. Fusce ante arcu, condimentum non malesuada eget, fringilla et mi. Proin tortor nibh, rutrum non vehicula eu, sodales id augue. Nunc sed neque eros, quis tempus diam. In pharetra congue mi vel volutpat. Aliquam quis sodales magna. Ut elementum tincidunt suscipit. Sed eu quam lorem. Proin id nulla nec eros ultrices fermentum id id nunc. Duis non felis ligula.

This is a column of content for the reveals

Maecenas accumsan pellentesque varius. Curabitur tempor rhoncus fringilla. Nullam posuere luctus ultricies. In tristique iaculis pellentesque. Vestibulum ullamcorper ultricies fermentum. Fusce ante arcu, condimentum non malesuada eget, fringilla et mi. Proin tortor nibh, rutrum non vehicula eu, sodales id augue. Nunc sed neque eros, quis tempus diam. In pharetra congue mi vel volutpat. Aliquam quis sodales magna. Ut elementum tincidunt suscipit. Sed eu quam lorem. Proin id nulla nec eros ultrices fermentum id id nunc. Duis non felis ligula.

This is a column of content for the reveals

Maecenas accumsan pellentesque varius. Curabitur tempor rhoncus fringilla. Nullam posuere luctus ultricies. In tristique iaculis pellentesque. Vestibulum ullamcorper ultricies fermentum. Fusce ante arcu, condimentum non malesuada eget, fringilla et mi. Proin tortor nibh, rutrum non vehicula eu, sodales id augue. Nunc sed neque eros, quis tempus diam. In pharetra congue mi vel volutpat. Aliquam quis sodales magna. Ut elementum tincidunt suscipit. Sed eu quam lorem. Proin id nulla nec eros ultrices fermentum id id nunc. Duis non felis ligula.

This is a column of content for the reveals

Maecenas accumsan pellentesque varius. Curabitur tempor rhoncus fringilla. Nullam posuere luctus ultricies. In tristique iaculis pellentesque. Vestibulum ullamcorper ultricies fermentum. Fusce ante arcu, condimentum non malesuada eget, fringilla et mi. Proin tortor nibh, rutrum non vehicula eu, sodales id augue. Nunc sed neque eros, quis tempus diam. In pharetra congue mi vel volutpat. Aliquam quis sodales magna. Ut elementum tincidunt suscipit. Sed eu quam lorem. Proin id nulla nec eros ultrices fermentum id id nunc. Duis non felis ligula.

Quote

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

This is the large text of a quote. Vestibulum suscipit metus et nunc condimentum condimentum. Cras a metus ac sem egestas fringilla et vel dui.
Person quote by

Partner logos

The logos section consists of a number of logo images, as many as are required. Logos are typically all sorts of shapes and sizes so, to help make the logos work together, there is an option to set the height of each image to constraint how they display.

A caption can be placed below the logos section.

Caption text

Project introduction

This displays as an image with text alongside it. The text is displayed as a large banner, similar to a heading.

This is the text of a project intro. It doesn’t need any extra formatting and will display quite large, similar to a heading piece of text.

Form lightbox

This will create a button link that loads the content into a lightbox over the site. This can link to the office forms, but in fact can link to any page that you’d like.

Donorbox embed

This will embed a donorlink into the page. If you want to link to a donorbox in a lightbox, then use the form lightbox option instead as this will format up better than their ligthbox option. You will need the link to the donorbox project page. You don’t need any of the embed code, just the share link.

Project title

This is the description of the project when it first ran and so forth

Is this always a contact us link? Or will it go somewhere?

Key info:1 hour audio visual experience with headphones

Audience:30 people (but scalable depending on site)

Participation:Contributers to soundscape and performance

Show running:5 - 10 performers or volunteers, 3 tech team, 4 front of house/stewards

Budget:£30- 60K (depending on duration of run and community engagement

Ticket price:Pay what you can

Frequently Asked Questions

This is a question

This is an answer  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum eros id mauris vehicula accumsan. Maecenas accumsan pellentesque varius. Curabitur tempor rhoncus fringilla. Nullam posuere luctus ultricies. In tristique iaculis pellentesque. Vestibulum ullamcorper ultricies fermentum. Fusce ante arcu, condimentum non malesuada eget, fringilla et mi. Proin tortor nibh, rutrum non vehicula eu, sodales id augue. Nunc sed neque eros, quis tempus diam. In pharetra congue mi vel volutpat. Aliquam quis sodales magna. Ut elementum tincidunt suscipit. Sed eu quam lorem. Proin id nulla nec eros ultrices fermentum id id nunc. Duis non felis ligula.

Another question

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum eros id mauris vehicula accumsan. Maecenas accumsan pellentesque varius. Curabitur tempor rhoncus fringilla. Nullam posuere luctus ultricies. In tristique iaculis pellentesque. Vestibulum ullamcorper ultricies fermentum. Fusce ante arcu, condimentum non malesuada eget, fringilla et mi. Proin tortor nibh, rutrum non vehicula eu, sodales id augue. Nunc sed neque eros, quis tempus diam. In pharetra congue mi vel volutpat. Aliquam quis sodales magna. Ut elementum tincidunt suscipit. Sed eu quam lorem. Proin id nulla nec eros ultrices fermentum id id nunc. Duis non felis ligula.

And another, longer question that can go onto multiple lines

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum eros id mauris vehicula accumsan. Maecenas accumsan pellentesque varius. Curabitur tempor rhoncus fringilla. Nullam posuere luctus ultricies. In tristique iaculis pellentesque. Vestibulum ullamcorper ultricies fermentum. Fusce ante arcu, condimentum non malesuada eget, fringilla et mi. Proin tortor nibh, rutrum non vehicula eu, sodales id augue. Nunc sed neque eros, quis tempus diam. In pharetra congue mi vel volutpat. Aliquam quis sodales magna. Ut elementum tincidunt suscipit. Sed eu quam lorem. Proin id nulla nec eros ultrices fermentum id id nunc. Duis non felis ligula.