Template 2

Header Title with a background image

This template consists of a header title/image, paragraphs, 3 single-item image shortcodes in one row, additional paragraphs, and a media shortcode.

The header title/image is a full-width row with a visual editor widget. Change the text in the visual editor to be your title.

To change the background image, go to the "Design" tab under "Widget Styles" on the right of the screen.  Under this tab you can see a place to select a background image. You will need to download the image to the Media gallery before selecting it as your background image. The "Background Image Display" should be set to "Cover image."

*Be aware, the full-image may not be visible - you may find only a rectangular portion of the image is in this header. If you wish to make the header image larger, change the top and bottom padding in the "Layout" tab under "Widget Styles" (both currently set to 150 px). You can also play around with the "Background Image Display" settings under the "Design" tab.

**Currently, in order to recreate a full-width row without this template, you have to insert a layout with a full-width header title/image from the selection of layouts in Page Builder. After inserting the layout, delete all rows/widgets except for the full-width header row. Delete the widget in this row and replace it with a visual editor widget. Add text and a background image as previously described.

 

These paragraphs are in one visual editor widget in one row beneath the header title/image. You can insert multiple paragraphs into one visual editor widget. There is padding above this widget, which you can view in the "Layout" tab in "Widget Styles." You will see the padding above the widget is 50 px. If you would like there to be more padding on any side of this widget, change the padding here.

 

Below these paragraphs is one row separated into three columns. Each column has a separate visual editor widget. Each widget has a single-item shortcode.

To insert your own item from the DRS, you have two options.

  1. Click on "Add Toolkit Shortcodes" to create a shortcode or double-click on an already existing shortcode. Then,  search for the item in the shortcode editor.
  2. Locate the item in the DRS. Once you have done so, look at the URL and identify the "Project ID" (PID) of the item - the combination of letters and numbers at the end of the URL after "neu:". Copy the PID. Return to the shortcode you wish to replace and insert your item's PID where the existing one is located (after "neu:"). Now your item will be displayed.

 

Double-click on the shortcode to edit the display settings of the single-item shortcode. For more information on these settings, go to the CERES Exhibit Toolkit "Using Shortcodes to Display Your Materials" page.

Additionally, you may notice that the image on the left is lower than the two other images in the row. The visual editor widget on the left has a padding of 50px while the other two visual editor widgets do not have any padding. This demonstrates how the padding can be manipulated.

This is another row with a visual editor widget. Here you can copy and paste additional text for your page. This widget has the same settings as the previous widget with paragraphs.

 

Below this paragraph is another row with a visual editor widget. A media shortcode has been inserted into the widget. To change the shortcode to display your own media, identify the PID of your media and insert it in the shortcode (after "neu:"). Double-click on the shortcode to edit it.

Final Thoughts

To re-arrange the order of the rows, identify which row you would like to move and find the button with the up and down arrows to the upper-right of the row. Click and hold the button to drag and drop the row to where you would like it to be placed.

To add new rows with visual editor widgets, follow the instructions on the CERES Exhibit Toolkit "Using Page Builder" page.