Panel

The Panel is the layout element to separate two text sections and highlight important text parts or images. You can customize a panel by adding the background photo and changing the background color, position, size, etc.

Adding a Panel

You can place the Panel into different blocks via Drag & Drop. Follow these steps to add the Panel feature:

• In the Site Editor, hover over the left sidebar and click Build:

• Proceed to Features. Under the Content section, click Layout:

• Drag and drop the Panel to the preferred area of the page:

Customizing a Panel

Hover over a Panel to display the Edit button in its top-right corner and be able to modify the item:

Background Tab

Background Color

• Set the background color for your Panel by clicking the Square icon on the right to Background Color functionality:

• Drag the background slider to choose the transparency level and click Apply:

Background Photo

• Drag and drop the background image onto the Add Photo placeholder:

Please Note: After adding a Photo, an additional Opacity settings slider appears at the bottom.

Alternatively, click the Add Photo placeholder to open the Upload Image dialog and locate the image on your computer:

• Drag and drop the image into the Drag & Drop frame:
• Or click inside the Drag & Drop frame to open the Upload from Your Computer dialog or choose one from Free Photos and select the image to upload:

Opacity

Change the Opacity settings:

Position

You can change a Photo Location by clicking Editand choosing a preferable option among:

• Fill:

• Top:

• Left:

• Right:

• Bottom:

Please Note: After changing a Position, an additional Resize settings slider appears at the bottom.

Resize

You can Resize the image after changing its Position:

Please Note: The option is available only with the following Positions: Top, Left, Right, and Bottom.

Designing a Panel

Hover over a Panel to display the Edit button in its top-right. Proceed to the Design tab.

Border Color

Change the value in the Slide Control to set the Panel border width, and select the color by clicking the Square icon on the right to Slide Control:

• Pick the Border Color and click Apply:

Range of Border

Choose a Border Location for you Panel:

• You can change a separate Border Location by clicking a special Icon and choosing a preferable option among:

• Select the desired Location from the drop-down menu:

Choose a separate Border Location:

• Top:

• Right:

• Bottom:

• Left:

Radius

• Choose a Range of Radius for All Corners:

• You can change a Range of Radius for a separate corner by clicking a special Icon and choosing a preferable option among:

• Select the desired corner from the drop-down menu:

Choose a separate Range of Radius:

• Top left:

• Top right:

• Bottom right:

• Bottom left:

Please Note: Panel Border Radius is calculated as a percentage and is shown as a numeric value in the Slider Control. At 0%, the customer will receive a square panel, and the maximum roundness at  40%.

Shadow Color

Pick a Shadow Color, click Apply and choose a Range of Shadow:

Hover Effects

Hover Effects add dynamic visual effects to the website. It helps to create more engaging and modern experiences for visitors. Enable the toggle, and choose among the following options:

• Sliding Up
• Sliding Down
• Sliding Left
• Sliding Right
• Zoom In
• Zoom Out
• Transparency