A custom component is a block you build once and place anywhere. Edit it in one place and every page that uses it changes, or repeat it for every item in a list.
Use a custom component for a block that repeats: a product card shown once per product, or a call-to-action band that appears on several pages and should stay identical.
Text inside a custom component cannot be edited from the page builder. Build a page's own sections directly on the page, so their copy stays easy to change, and keep custom components for blocks that are really reused.
1
Open Components
In the admin menu, open Pages and Menus and choose Components.
2
Click Create component
Enter a Unique name and confirm.
3
Open its content
Choose Content in the component's row menu. The Component Builder opens.
4
Build it
Click Choose a template to start from a ready-made block, or start from an empty stack and add elements.
5
Click Save Component
Every page using the component shows the new version.
A component has its own Component Configuration, with its own variables and events, like a page.
In the page builder, open the element picker and choose Custom component under Reusable. In its settings, pick the component in Select Custom Component.
The component also receives a copy of the page's variables, so placeholders inside it can show page values.
1
Build the card for one item
Inside the component, write placeholders for the fields of a single item, such as name or price. Each copy can also use item for the whole entry and index for its position, starting at 1.
2
Prepare the list on the page
Add a page variable of type Array and fill it with a page event that runs a function.
3
Inject the variable
In the Custom component element, choose the array in Inject Page Variable.
4
Set the layout
Under Repeat for each item, choose how many copies sit side by side on computer, tablet and mobile, and the Space between items.
An array renders the component once per entry, and an empty array renders nothing. An object renders it once, with the object's fields as variables. An item's own fields win over page variables with the same name.
A few points that save time when you build lists with custom components.
Make sure the function behind the list returns every field the card shows, including any identifier its buttons link to.
A button inside the component can open a modal that is also inside the component. Each copy then opens its own modal.
