In this article, you’ll learn about the Page Fragments interface.
To navigate to the Page Fragments interface,
Go to Site Administration. Make sure the Site where you want to work is selected. If you prefer creating a Fragment that’s available for all Sites, navigate to the Global Site and create your Fragment there. Global Fragments are inherited by child Sites, so they can only be edited from the Global Site. Any resources the Global Fragment references (e.g., image) from the Global Site is copied to a Site that leverages the Fragment.
Select Site Builder → Page Fragments
Fragments are organized in Collections. The main Page Fragments page shows available Collections (out-of-the-box Fragment Collections to start), allows Import and Export, and enables you to create Collections. You can also manage the organization and display of Fragments and Collections you have created.
To create a Fragment, you must first create a Collection.
Click New → Collection to add a Collection.
Give the Collection a Name and Description and click Save.
Collections help you organize Fragments, and can be used to differentiate between different types of Fragments or Fragments used by different groups or departments. Next, create a Fragment inside the Collection you created.
Click on the Collection you created.
Click the Add icon () to create a Fragment.
Choose either Section or Component.
Give it a Name and click Save.
The Fragment development environment appears. Each pane in the editor has a different function:
- The top left pane is for entering HTML.
- The top right pane is for entering CSS.
- The bottom right pane provides a live preview as you work in the other panes.
You can also include resources in your Fragment Collection that your Fragments can reference. This is helpful when exporting/importing Fragments: their resources are automatically included. If they’re stored somewhere else (e.g., Documents and Media), you must export/import them separately. Click the Resources tab for your Collection and add resources (e.g., image, document, etc.) there.
Once added, you can reference resources from your Fragment’s code without worrying about their availability. You can learn more about doing this in Including Default Resources in Fragments.
Next you’ll learn how to import and export Page Fragments.