The Component Pane is the backbone of your webpage, and how you configure the components that make up the page. It’s always located on the left side of the Live Preview page.
Clicking on a Component in the Component Pane opens up the Edit Component box in the pane. Changes you make in the box are immediately shown on the Live Preview Page.
You can also edit the component by clicking on the More icon (three dots) to the right of each component.
In the dropdown that opens, you have the following options:
The functions listed above help users leverage their component library across their website on various pages.
To add a component to a page, click the Add Component button at the end of the component list. Clicking it opens a list of existing components and lets you select one to add to the page.
If you have a lot of components available to you, you can use the Search box at the top of the Add Component Pane to quickly find the component you want. The search is live so even typing just one or two letters narrows the list of components to choose from.
Each component has a Preview Component icon next to it. Clicking the icon opens a small preview of the component, giving you a visual of the component before you add it to your page.
Preview Component: Allows you to see a visual of the component.
Components can be sorted in the Component Pane by drag and drop.
Click and hold on the six dots to the left of each component name. Then, drag the component to where you would like to move it on the page, and release the mouse button.
The component in the pane moves and the component on the Live Preview Pane is also relocated to where you placed it in the pane.
To edit a component, click on the name of the component in the Component Pane, which opens the Edit Component Pane.
The configuration options for components are different for each component. Those options are covered in depth in documents about each component type.
The eye icon hides and unhides the particular component on the Live Preview page.
When a component is hidden, it is still displayed in the Component Pane but is grayed out, indicating it is not active on the webpage.
The menu icon opens a drop down with four options: Schedule, Duplicate, Copy and Delete. All of these functions behave exactly as listed above in the Working with Components section.
Beyond that, each Component will have a Properties tab and an Advanced tab. Each tab will have different options depending on the component you are working with.
The Properties tab is where the bulk of the configuration of the component is done and contains basic options for each component.
The Advanced tab is where additional configuration of a component can be done.
Each PageBuilder component is designed for the best possible user experience, with the goal of giving users the maximum amount of control over their content within each component.