Components are crucial building blocks within Oxygen. With Components, you can create designs that can be used across your entire website. Additionally, with Component Properties, you can decide what content can be updated for each Component when it is used.

After you’ve designed a Component, any design changes you make to the Component will be applied to all instances of that Component on your site.

Here’s a video that explains how to use components:

Editing Components

You can add any content you’d like to a Component. This can include static elements (like text or images) or dynamic elements using Dynamic Data (such as post content, custom fields, or items inside a Loop).

Components also support Component Properties, which let you define editable options for each instance of the Component. For example, you might create a card Component where the layout and styles remain consistent, but the title, image, and link can be customized through Component Properties.

Previewing Content

When working on a Component, you can use the preview settings in the Quick Navigator to control what content is displayed inside the Component while editing.

Preview Size Options

While editing a Component, you can use the Preview Size control to adjust how you view its content. These settings are only for the editing experience and do not affect how the Component appears on the live site.

• Constraint Preview Size: Set the width and height of the previewed content.
• Background Color: Add a background color to the area surrounding the previewed content.
• Vertically Center: Center the previewed content within the canvas.

Component Properties

Use Component Properties to define content that can be modified when adding the Component to a page and what can and cannot be modified for each Component you create.

Creating a Component Property

You can turn any Element control into a property using the + symbol next to the control.

1. Click the + symbol next to the control’s input.
2. Then, click the ∨ symbol to open the Property Settings.
3. Set a Label for the Property. This is what will be seen when setting the values for the property when using the Component elsewhere in Oxygen.
4. Set a Property Key. Set the Key for the Property that will be used for store and retrieve Property values. By default, Oxygen will generate a random string for you, but you can define your own key for greater control.

Using Component Properties

After creating Component Properties, when you use that Component elsewhere in Oxygen, you’ll be able to set the values for those Properties.

1. Add a Component element to the Builder.
2. In the Properties Panel, edit the available Component Properties.
3. Save the Builder.

Component Child Element Visibility Toggle

You can add a visibility toggle for individual child elements within a Component, allowing them to be shown or hidden on a per-instance basis. For example, you may have a card component with a button at the bottom, but only want to display the button on some instances.

To enable this, edit the Component and select the child element you want to control. Open the Conditions tab, then hover over the Visible control and click the small icon that appears next to it. In the popup, add a descriptive label so it’s easy to identify what the toggle controls.

The visibility toggle will then appear when editing each instance of the Component, allowing you to show or hide that child element without modifying the main Component.

Inline Editing

When working on a page or template, you can edit a Component inline. This makes it simple to create new Components or update existing ones without interrupting your workflow.

There are two ways to begin inline editing:

• Click the Edit Component button found inside the Component control for the element you’re working on.
• Double-click the Component in the Canvas to start editing it directly.

To exit inline editing, you can do one of the following:

• Click the Stop Editing button in the Component control.
• Double-click anywhere on the canvas outside of the Component.
• Click the back button in the Quick Navigator.

When you exit inline editing, your changes are saved automatically and will update across every instance of that Component.

Note: While editing Components inline, you won’t be able to use Preview Size settings, since the Component is already shown in the correct design context.