Page elements are similar to pages, but you can use the same element on multiple pages. Use page elements for content that you want to display in multiple places.
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:
You can also create your own page elements.
To create a new page element:
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:
page element
, and then drag the Page Element widget onto the page.
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:
First create the page element:
%A, %B %#d, %Y
.
/page-slug?id=Content Set: _id
. (Read more about content sets and URLs.)
%.200s…
will display only the first 200 characters followed by an ellipsis (…).
/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.
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:
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 the Search Box widget to the Search Results page (or really any page). And then set it up:
Once you’ve added the Search Box, try it out.