Author Experience Builder (XB)
CrafterCMS’ Experience Builder (XB) enables authors with in-context editing (ICE) for all the model fields defined in the content types of pages and components.
This article gave an overview of the Experience Builder panel in Studio.
In this section, we describe how authors can use the Experience Builder for adding/editing content.
To turn on Experience Builder, simply click on the pencil (Edit mode), which will turn green when enabled,
or the two sets of three vertical dots (Move Mode), which will turn blue when enabled, at the top right of
Studio. Enabling Edit mode or Move mode turns on the Experience builder panel on the right
side of the screen.
Edit mode
Edit Mode allows editing the content directly in its preview for configured sections of the project.
It also provides short-cut menus to open specific pieces of the content form, and the experience builder
panel on the right side of Studio.
To edit content directly in its preview, simply hover your mouse on sections that have been wired for editing content directly and a pencil will show up instead of the mouse cursor. For editing text sections, double click on the section and a cursor should then appear allowing you to edit it directly. Notice too that the editable section will be inside a blue box like below:
For editable non-text sections, clicking on it will give the user options to edit, cancel, etc. and also highlight the section in a green box
Move mode
Move Mode allows you to drag around a items from one position to a different position and also
provides short-cut menus to open specific pieces of the content form, and the experience builder
panel on the right side of Studio, just like the Edit Mode.
To move items around, move your mouse over to the item/section you want to move until a blue box appears around it. Click and hold your mouse then drag the item to desired position. A red line will appear on possible positions to drag your item to, and a trash bin in case you want to remove your item.
Using the Experience Builder Panel
Let’s take a look at an example of editing a post using the experience builder (XB) panel in a project
created using the Wordify blueprint from the Marketplace.
We’ll change the picture in the Bio section of one of the posts. Let’s preview the post
How to Find the Video Games of Your Youth. Turn on the XB panel by clicking on the pencil icon
(Edit mode) at the top right. The pencil should turn green and the XB panel visible on the right
hand side.
We’ll highlight the Author Bio area in post to figure out which image we want to change. In the
XB panel, click on Component Drop Targets. Select Bio from the dropdown. Notice you’ll see
Author Bio listed as one of the drop targets. Scroll down the page and you should find an area
highlighted in a green box. This is the area where we want to change the image
Let’s now change the image for author John Doe. In the XB panel, click on Search. We can
scroll through the items listed there to look for a new image for John Doe, or, we can also type
image in the search box to narrow down items we’re scrolling through to just images in the project.
We’ll pick the image person_2.jpg to replace the current Profile Pic in the Bio section.
To replace the image, simply drag person_2.jpg image from the XB panel to the profile pic on the
page. The Bio section should now have a new image.
Another way to browse for images to replace the Bio picture is by browsing items under Assets in
the XB panel. Scroll through the items, then when you find a suitable image, simply drag it on to the
page to the image section you want to replace. Notice that as you’re dragging an image from the XB panel,
some other sections may be highlighted in a green box. This indicates that an image may be dropped
into that area.
