• Document Under Review
  • Updated On 4.0.0

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.

Getting Started - XB Panel Enabled

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

Getting Started - XB 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:

Getting Started - Edit text content via XB

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

Getting Started - Edit non-text section via XB

Move mode

Getting Started - XB 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.

Getting Started - Move item via XB

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

Getting Started - Using XB to display drop target area

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.

Getting Started - Bio picture changed via XB

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.

Getting Started - Assets list in XB