• Miva Docs
• Reference Guide
• Miva 10 Page Builder Components Overview

PageBuilder - Components Overview

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.

On this Page

• Working with Components
• Adding a Component
• Component Sorting
• Component Editing

Working with Components

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:

• Edit: Opens the Edit Component box.
• Hide: Allows you to hide the component on the Live Preview page. The component is still shown in the Component Pane, but is greyed out to show it as hidden.
• Schedule: Allows you to schedule when the component is displayed or not on your page. For more information about scheduling components in PageBuilder, click here.
• Duplicate: Makes a duplicate of the selected component and puts it on the same page.
• Copy: Makes a copy of the selected component and allows you to paste it on the current page or a different page.
• Delete: Deletes the selected component.

The functions listed above help users leverage their component library across their website on various pages.

Adding a Component

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.

Component Sorting

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.

Component Editing

To edit a component, click on the name of the component in the Component Pane, which opens the Edit Component Pane.



Note

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.

Note

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.

Note

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.

Next Section

• PageBuilder - Hero Banner Component