Point: What are components?
Components are a feature that lets you register and manage elements you want to reuse and control together as "shared parts" within a project. By using properties, you can switch the data or design for each instance individually.
For an overview of components and how to create them, see Components. For an overview of properties, see Components: Properties.
How display conditions work and the types available
Display conditions for components let you show or hide elements at each placement, based on whether a property has a value.
Display conditions are set based on the properties you add to a component. Here are the available combinations of properties and condition types.
Property | Condition type | Property state |
Text, image, URL, and number properties | is set | Shown when the property has a value |
Text, image, URL, and number properties | is empty | Shown when the property has no value |
Boolean property | is True | Shown when the property is on |
Boolean property | is False | Shown when the property is off |
Tip: For step-by-step instructions using a Boolean property, see Components: Properties.
"is set" and "is empty" conditions
With "is set" and "is empty," you can show or hide an element based on whether the specified property has a value.
Use cases:
Show a caption area only at placements where the "Caption" text property has been filled in
Show text only at placements with no "Icon" image property, and the image at placements that have one
Show a link button only at placements where the "Link URL" property is set
Available properties:
Text property
Image property
URL property
Number property
For details on each property, see Components: Properties.
Set a display condition
Select the element you want to set a display condition on.
Choose an element inside the component that should appear (or not appear) only under certain conditions.
In the right panel, select the [Settings] tab. If the panel is closed, open the right panel.
Click the [Set display condition] field and select the property to use as the condition.
Select the condition. The available conditions change depending on the property type.
Check the result.
Change the property value at each placement of the component and confirm that the box appears and disappears as expected.
Open Live Preview and confirm that it displays correctly.
Check the published site. Once everything looks right, update the site from the publish panel. Changes won't appear on the published site until you do. If the site is already live, see Update your site.
Remove a display condition
In the Design Editor, select the element whose display condition you want to remove.
In the right panel, select the [Settings] tab. If the panel is closed, open the right panel.
Click the "×" to the right of the display condition to remove it.
