1. Setting up panels

1.1. Panel creation flow

1.2. See how to configure

1.3. Steps to create a panel

1.3.1. Add a panel

1. Header/Footer - Use a relevant header/footer format in the template if necessary.
2. Alignment - Change the alignment of the panel elements within to left, right, or center.
3. Background color - Set the background color of your panel template to white or other solid colors.

Note: Once you've added a panel template to the page builder, the relevant ZML coding will be displayed in the Code tab of the Panel Configuration pane.

The code can be manipulated to highly customize and design the panel further using our in-house markup language.

1.3.2. Add panel elements

1. Click the arrow () icon in the top left corner of the Panel Configuration pane. The three panel elements, Text, Image, and Button, are listed with different available customizations.

1. Text - Choose from differently sized, italicized, or emboldened templates.
   
2. Image - Click Image to view the preset image templates. Choose if the image should be placed in a square, a square with rounded edges, or in a circle. Else, select and drop a preset icon template.
   
3. Button - Click Button to view the preset button templates. Choose a Rectangular or Rounded button.
   

1. Display - A value for the static/dynamic text, image, or button that is embedded on the panel.
2. Action - An action that can be initiated on the click of the panel or a specific panel element.
3. Style - The visual properties such as padding, color, margins, and so on, for the panel or panel elements.

2. Managing panels and panel elements

1. Add Element Name - Click the pencil () icon in the top left corner of the Panel Configuration pane to edit the element's name. This name can be used to locate the specific element in the page builder among others.
   
2. Delete panel elements - Select the target panel element or container in the panel builder and click Delete Element in the bottom right corner to remove them.
   
3. Relocate panel elements - Drag and drop panel elements elsewhere on the panel builder to relocate them.
   
   
4. Resize panels elements - Drag along the vertical margins of a panel container to resize the dimensions of the panel container. This can be done only if more than one panel element is placed in a row in the panel builder.
   
   

Once you're done managing the panel elements and configuring the panel, click the  icon to navigate back to the page builder. You can further manage the panel from there, such as relocating its position on the page, giving it a live mode title, and more.

1. Adding a panel title - Click the T icon to give a title for your panel. This will appear as a heading above the panel in the live mode of the application. Once inserted, click the panel title to format it using the below options:
   
1. Font family - Choose from six different font types in the dropdown.
2. Font size - Choose a size from 12 - 40 px in the dropdown. The default value is 20px.
3. Bold - Click the B icon to embolden the title.
4. Font style - Click the I icon to italicize the title.
5. Font color - Click the A icon to choose a matching color for the panel title.
6. Update title - Double click the inserted title to update it.
7. Remove title - Select the panel and click the T icon again to remove it. Alternately, use the delete key on your keyboard to remove the element.
   

1. Duplicating panel - Click the Duplicate icon to create another panel with the same configuration.
2. Deleting panel - Click the bin icon to remove the panel from the page.
3. Relocating panels - Drag and drop panels elsewhere on the page builder to relocate them.
   
4. Resize panel - Drag along the vertical margins of a panel to resize the width of the element. This can be done only if more than one page element is placed adjacently in the page builder.
   

3. Related topics