Experience Builder best practices

Experience Builder overview

NOTE: Experience builder is currently in private alpha testing.

Experience Builder allows you to create experiences, be it a web page, a frontend app, or a landing page, using your existing design components.

NOTE: Experience Builder requires a preliminary setup. To learn more, refer to Set up experience builder.

The Experience Builder UI includes the following elements:

• Components — Contains registered components — custom components that are defined by the project setup and grouped under custom categories.

NOTE: There are also out-of-the-box components that can be used the same way as registered components.

• Layers tab — View the hierarchy of your experience. Click on a specific component to open the right sidebar where you can change the component’s design and/or content.

• Settings tab — In this tab, you can update your experience name and slug.

• Design tab — Contains visual customizations for the component. You can adjust styling and visual representation of a component within the page.

• Content tab — View and update the content of a specific component.

• Canvas — A workspace in which you can place your components and preview the experience. Drag and drop a component on a canvas, and it is immediately rendered there.

NOTE: Once the component is dropped on the canvas, unless it was dropped into an existing container component, it is wrapped into a “Container” component by default. Container is one of the components provided by Contentful out of the box. By default, container is a full-width component with a variety of options: adjusting the placement of the container itself and components within it, setting background color, borders, and other common styling options.

Bind content 

In the experience builder, you can add content from your entries and assets using UI and without the need to write any code. 

The steps below explain how to update content in a component. We’re using an example of the “Image” component in which we replace the default image with the image from an existing asset.

1. Select the Image component on the canvas and switch to the Content tab in the right sidebar.

2. Click Add content. NOTE: The source of the default image is displayed. We can change the URL by entering it in the URL field.

3. Go to the Reusable tab and click Add asset. In our example, we would like to bind the image from an asset that already exists in our environment in Contentful. NOTE: We recommend binding an image from an asset that is stored in Contentful as a more scalable and reusable option as compared to binding to a direct URL.

4. Click Add existing media to select an existing asset. In our example, we select an existing asset called “Berlin-landscape-1:2-transparency”.

   

5. Select the field in which the image is stored. In our example, the image is stored in the field called “file”. NOTE: Assets as well as entries have multiple fields, so you must specifically indicate which field you want to bind to.

   

6. Click Save to apply changes to your experience. The image from the existing asset is displayed in the canvas.

Adjust ‌image dimension

It might happen that the image you bound isn't rendered properly and requires manual adjustment. With our example image, we would like to adjust its width.

To adjust image width:

1. Select the required Image component on the canvas.

2. Go to the Design tab.

3. In the Width field, update your image's width value. In our example, the Image component has a default value for variable Width set to the number of 500.

Removing the value makes the image stretch to the size of "Container". Now it looks a lot more like we would expect it to be on the real website.

Replace image in asset

If the asset contains a wrong image, we can update the image by editing the asset directly from the Experience Builder.

To replace an image in an asset:

1. Select the required Image component on the canvas.

2. In the Content tab, click on the three-dots actions menu for the selected component.

3. Click Edit icon.

4. In the asset editor, replace the image and click Save to update the asset.

NOTE: Replacing an image in the asset affects all content where this asset is referenced.