Template 1

Header Title with a background image

This template consists of a header title/image, paragraphs, three rows with variations of single-item shortcodes and paragraphs on the left/right, a media shortcode, and a final paragraph section.

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.

 

This row is divided into two columns with a visual editor widget in each column. The left column's visual editor widget has a single-item shortcode. The right column's visual editor widget (this widget) is where you can copy and paste your paragraph(s).

The following two rows consist of the same format, although the next row has the single-item shortcode in the right column's widget, and the paragraphs are in the left column's widget.

Each widget in these rows has the "top" padding set to 50px to provide more space between the rows. To change this setting, go to the "Layout" tab in "Widget Styles."

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.

You may notice that this text is somewhat centered with the image to the left. This is because the padding for this visual editor widget is 75px while the image's widget padding is still set to 50px. This is one of the ways padding can be manipulated.

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.

Also, you may notice the space between the row with the media shortcode is close to this two-columned row. This is because the visual editor widget with the media shortcode has no padding unlike the other rows/widgets. To add padding, open the visual editor widget with the media shortcode and change the padding in the "Layout" tab under "Widget Styles."

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.