XM Quickstart

Basic steps to begin building your site in Experience Manager (XM)

The Pages functionality in XM enables page-level content layout and editing for your site. Reusable components such as image carousels and rich text containers created by your developer can be quickly arranged, populated, saved and published.

 

Build a page

Launch XM from the Copilot application.

Select Pages in the left column and click the Add page button at the top of the page.

In the Page type drop down, select the option to best categorize this page.

For the Page name, enter something descriptive so it can easily be recognized in the list or searched.

Page version name should also be descriptive such as “Production V1” or “Winter promo 2021”.

The URL should be the name you want to see after your domain such as “/contact” or “/registration/terms"

After hitting the Save button you will be redirected to a new blank page.

 

NOTE: All these entries can be modified later if required.

New page data entry
New page data entry

 

Populate the page

In the left column, click the Add components selection to see a list of component options. These choices will vary based on what your developers have created for your deployment.

Component menu
Component menu

We will pick the As Seen In Component and begin populating the fields. As you add text and image content, it will appear in the preview window to the right.

Text can be entered manually or you can paste text copied from another source. Content will be automatically formatted and placed on the page per the design parameters of that component.

Images can be uploaded into XM for display from your desktop, or you can enter a link if your images are hosted at other public online locations.

Component content entry
Component content entry

To preserve your edits, periodically click the Save button in the upper right corner. If you do not want to save the edits, click Sections or Back to all pages in the left column. If you want to make the page live for viewing, click the Publish button.

XM provides a form to enter titles, descriptions and other metadata terms that will enhance the visibility of your pages to search engines. This data becomes part of the code (HTML) used to create the page but it is not displayed on the page to visitors.

 

Populate your metadata

Launch XM from the Copilot application.

Select Pages in the left column and mouse over the page you want to modify. Click the vertical ellipsis (⋮) to bring up the menu and select Edit details.

In the left panel of the Create Page modal box select SEO and metadata.

Enter your data in each field. The title and description should be unique for each page.

SEO and metadata
SEO and metadata
SEO title is a few words that will appear in tab of a browser. Choose title text that reads naturally and effectively communicates the topic of the page's content.
XM browser title
XM browser title

SEO description is the brief description of the webpage that will appear on a search engine listing. Write a description that would both inform and interest users if they read it as a snippet in a search result.

XM search result
XM search result

Metadata will be the name of a tag and the relevant content. You can add metadata by clicking the + sign. Examples.

Name

Content

keyword

content management

author

Bill Shakespeare

 

Select Save and to update the page settings.

This information can also be completed when building a new page.

XM contains a rich text editor component which can be used to stylize the text within a page or global element. It is accessed by clicking the pencil icon in the left panel.

Rich text editor main screen
Rich text editor main screen

The rich text editor has standard capabilities for basic stylings such as bold, italic, underline, strikethrough, numbered list, and bulleted list. You can also indent and outdent text.

Basic styling
Basic styling

Two advanced formatting features are available with predetermined styles for application to a block of text or inline. Each style is represented visually in the pulldown menu.

Block styles include italic title, subtitle and special container.

Block styles
Block styles

Inline styles include marker, big and small text, typewriter, computer code, variable, deleted text, inserted text, cited work, inline quotation, and language RTL (right to left) and LTR (left to right).

Inline styles
Inline styles

You can add elements such as HTML links to external pages and anchors to reference another part of the same page.

Link tools
Link tools

Insert images, table and horizontal lines as desired. Clicking the Omega character will provide a menu with several special characters such as copyright symbols.

Insert items
Insert items

You can adjust the alignment of content to left, center, right, and justified.

<
Content alignment
Content alignment

To view a larger canvas of text, click the maximize icon to expand the page to full size in the browser.

Rich text editor full screen
Rich text editor full screen

Lastly, clicking the Source button will show you the HTML tags applied to your content. Styling is configured by the developers per your requirements to provide a consistent look throughout your site content.

Rich text editor source view
Rich text editor source view

XM provides the ability to create templates by duplicating an existing page for reuse. This can be a blank page used as a form to populate with new content or a completed page with minor variants made to the content.

 

Multiple individual pages

These templates would be used for the same type of page, but each item is its own page on the site, such as blog articles or product pages.

 

Create Page Type

Creating a Template page type will enable categorizing pages into collections as well as easy organization and filtering in lists.

To add a new page type, click the Add page type button at the top of the page and complete the two fields in the modal box.

  • Page type name - Descriptive text based on your site categorization such as Blog Template or Product Template.

  • Prefix - Descriptive directory style name such as /blog or /product.

 

Page template

The initial templates will be created based on the components available on your deployment of XM. When creating a page to be duplicated for use as a template, you should include a description to indicate the use such as template - make a copy to use in the title. On the page itself, you can include instructions or placeholder text in the components as desired.

 

Create initial template

From the XM home screen click the vertical ellipsis (⋮) of the overall template (without clicking the dropdown to show versions) and select Make a copy.

In the dialog box, enter New page name (i.e. BBQ Chicken Recipe), URL, and click Save.

Duplicate page
Duplicate page

Edit the new page

The new page will then show in the XM home screen with the same versions as the original template. You will then be able to select a version to Edit, and the page will have all the same components configured as the template as a starting point. The user will also be able to change/swap components for that specific page if desired

 

Variations of a single page

These templates would be used for pages that there are only one of, but would have different versions for various reasons, such as a homepage or header/footer content.

 

Create initial template

The initial templates will be created based on the components available on your deployment of XM. When creating a new version of a page for use as a template, you should include a description to indicate the use such as template - make a copy to use in the title. On the page itself, you can include instructions or placeholder text in the specific components to be modified in each version.

From the XM home screen, click the drop down of the page you wish to modify, select the vertical ellipsis () of the specific version to duplicate, and select Make a copy.

In the dialog box, enter Version name (i.e. Black Friday Homepage) and click Save.

Duplicate page version
Duplicate page version

Edit the version

The new version will then show in dropdown of that page. You will then be able to select Edit, and the page will have all the same components configured as the original version as a starting point for the user to edit the content of. The user will also be able to change/swap components for that specific version if desired.

 

Other considerations for the templates

All components created will be available to use on any page across XM.

For all components, the users will work with fabric to assign what they want to be able to customize for each component (i.e. color, image, font, size, etc.).

The template functionalities can also be used across headers and footers as well (Global Elements).

fabric XM has integrated with a Digital Asset Manager (DAM) to make all your assets available while crafting content for your experiences. Note: This feature is only for DAM integrated customers.

Presently, XM will render these file formats.

  • JPG/JPEG

  • PNG

  • GIF

  • Webp

  • TIFF

  • SVG

  • AI

  • EPS

 

Add an asset

In a component that has an image attribute, click on the plus icon in the left column.

In the modal box, you will see thumbnails of the assets available in your DAM.
Asset modal
Asset modal

Filter assets

You can use the Sections and Label in your DAM to filter and quickly find specific assets you want to leverage. Both filters can be used at the same time to narrow down the results.

To use Sections to filter, click on the specific section button.

Asset filter button
Asset filter button

 

To select a Label, click the dropdown and click on the specific label to filter.

Asset filter label
Asset filter label

Add image to page

Once you select an image, you have the option to click View Image Detail on the left column navigation to review the metadata.

When you are ready to add the image to your XM page, click on the image and press the Save button.
Select asset
Select asset

The image will appear as part of the component on your XM page. This example is a background for a page heading.

Asset used on XM page
Asset used on XM page

 

Last update: May 18, 2022

Have any questions?
Let's Talk.