The Experience Page is a tool that allows you to create unique pages in real-time. Instead of switching between the Standard Editor and your live site to view changes, you can edit all the content on a page dynamically and choose from preloaded templates that you can customize to create one-of-a-kind pages. In this article, we'll cover the basic functionality of activating and creating pages using this exciting new tool.
The Experience Page offers beautiful, full-screen-width templates that can be used as sections on your page, as well as fully customizable, dynamic elements within the On-Site Content Builder Tools that are embedded within the page sections.
Table of Contents
How to Add an Experience Page on your site.
Log in to your Art Storefronts Site Manager and Click on Add page.
You will see a pop-up asking for the name of your page type that you’d like to create. Please give your page a name in the Name field. Then select Experience Page as the page type and click on Create.
For the purpose of this tutorial, we’ll use Studio as the sample page name.
You will be rerouted to a new page where you can manage Page name and highlight text, control if the item is to be visible on the navigation bar and other functions like SEO options and Scripts.
Adding content to an Experience Page
Once you are in the Experience page back-end, please find the tab named Content. This will allow you to allow the header and footer to be visible on this page. You’ll also find the Edit Content area. Clicking on Click Here will allow you to go to a new page where you can create your page content.
On the new page, you'll find a blank “canvas” for you to create your content. On the top left hand side of the page, you will find a + icon. Clicking this will give you an entire list of content templates that you could use. The templates provided are a guide on how to layout your content then you can modify the content.
Selecting one of these templates will get you started on your content creation journey.
The Studio Example
In this example, we’ll take you through how to create an image slider with sample content and a descriptive text of the studio content.
While in the Experience page, click on the + icon to choose the template. In this case we want an image slider so we’ll go to the Slider tab and select our template.
This will add an entire row of the slider and sample content. To change the images, please click on the gear icon (⚙) at the bottom of the row.
You’ll see a new pop-up with the current images on the slider. You can click on the x icons on each image to remove the template images.
Next, please click on the Choose File to upload your own images from your computer
Once done uploading the images, click on the OK button to apply those images to your current slider. Don't forget to click on the Save button to save your current progress.
Now, we are going to change the text description images.
You can change the location of this text content by clicking on the wrench icon at the bottom of the section (🔧). This will pop-up the Box Settings.
In the Content tab of the pop-up, you can assign a location for your text content
Next, we are going to add a write-up about our Studio. By clicking on the + icon at the top of the page will relaunch our templates. For the purpose of this tutorial, we’ll add an article template and add that to our page.
The new content will be added as a row.
Edit the text and save the content
Once done, you can preview the page the way your audience will be viewing the page by clicking on Visit Site using Custom Domain.
Removing content from an Experience Page
While in the Experience page, scroll down to the content you’d like to remove. There are two ways of removing content from your Experience page.
Removing a specific content box
For this, you’ll need to scroll to the specific item you’d like to remove.
Clicking inside the box containing the box should highlight your content.
Please click on the X icon should give you a prompt asking you if you want to delete the content.
Click on the Delete button to remove the box content.
b. Removing an entire section.
i. Scroll down to the intended section.
ii. On the right-hand side, you should see the X icon. Clicking on this should give you a prompt asking you if you want to delete the content.
iii. Click on the Delete button to remove the box content.