Page elements can be created once and then used on multiple pages or multiple times on the same page.

For example, your site comes with a few page elements: Menu, Header, and Footer. So you can add a link to your blog in the Menu, and the link will appear on every page that uses the Menu.

You can also use page elements with specific widgets—like with the Search Results widget to customize how your search results are displayed. (Add a search results element.)

Page elements are listed on the left, under Pages > Page Elements:

Each page is broken into four zones: Header, Menu, This page, and Footer. The Header, Menu, and Footer zones each contain their own page element. So any changes you make in those zones (like adding widgets) are displayed on every page.

Each page has a Header, Menu, This page, and Footer zone. To add widgets to only one page, drag them into the This page zone. Widgets you add to the other zones appear on every page.

Read more about page zones.

To edit these standard elements, you can either:

• Edit the element right on the page:

• Or navigate to the element under Pages > Page Elements:

You can also create your own page elements.

To create a new page element:

1. Under Pages > Page Elements, click + Page Element.

1. Next, enter a Name for the element, and click Add New Page Element.

1. Next, just customize the page element like you would any page: add widgets and add content—even preview it and publish it when you’re ready.

Once you’ve built a page element (even before you’ve published it), you can add it to a page.

While certain widgets (like the Search Results widget) use page elements, you can also add page elements to a page directly. Just use the Page Element widget.

To add a page element to a page:

1. First, open the Widgets tab: click the Widgets button in the upper right.
2. Then find and add the widget: in the Search box, type page element, and then drag the Page Element widget onto the page.
3. Next click the widget to open its Settings on the right, and then select your Page Element.

Note   While you can edit the Header, Menu, and Footer page elements on any page. But to edit your custom element, you’ll have to navigate back to the element directly (on the left under Page Elements, click on your page element).

You can use page elements anytime you want to display the same elements on several pages. Another common use is to display search results.

If you’re using a content set, setting up search is pretty simple. You’ll:

• Create a search results element
• Add & set up a Search Results widget
• Add & set up a Search Box widget

Create a search results element

First create the page element:

1. To create a new page element, under Pages > Page Elements, click + Page Element.
2. For the Element Name, enter anything you want—like blog search.
3. Now you’re looking at a blank element. So add widgets, and then connect them to a content set. (Learn more about content sets.) You probably want this to display a the item’s title, and a short description with a link; think of Google search results. Some commonly used widgets are:

• Heading. Set this widget to display the content set title:

• Listing. Use this widget for the posted date (if applicable). Set the Type to Date, and you can set the format of the date using syntax of the PHP strftime() function. For example, to display Monday, January 12, 2015 use: %A, %B %#d, %Y.

• Image. Set this to display a main image (if applicable). You can also link the image to the appropriate article (or post, product, etc.). The link should look like: /page-slug?id=Content Set: _id. (Read more about content sets and URLs.)

• Listing. You can use another Listing widget to display a shortened version of a description or body field. In the widget, set Type to Text and set the format using syntax of the PHP sprintf() function. For example %.200s… will display only the first 200 characters followed by an ellipsis (…).

• Link. This is the Read link that comes after the summary. Just like with the Image widget, this link should look like: /page-slug?id=Content Set: _id. (Read more about content sets and URLs.)

That’s it for the element. Depending on what widgets you used and how you styled them, it probably looks something like:

Here, in the studio you’ll only see one content item (e.g., blog post or product). But don’t worry—once you hook it up to the Search Results widget, it will use this one page element to display several items.

Now that you’ve created the element, create a search results page and then add the Search Box widget.

Add & set up a Search Results widget

Once you’ve build a search results element, create a page to display the search results and using the Search Results widget.

So to set up the Search Results widget:

• Add the Search Results widget, and then in the widget’s Settings, add your page element and select the content set.

You don’t need to configure the other options, but you can later if you want to customize the search results page a bit more.

Next, add a Search Box widget.

Add & set up a Search Box widget

Add the Search Box widget to the Search Results page (or really any page). And then set it up:

• Select the content set and the search results page you just made. (Also, add some placeholder text if you like.)

Once you’ve added the Search Box, try it out.