Panels

How to add and style panels.

What Is A Panel?

A Panel is used to divide your page into sections. Panels are positioned alongside the main content of a page, often on the left or right side. These panels can house various types of supplementary content, such as navigation menus, widgets, or additional information.

Location in the Parts Library: Base Parts > Layout > Panel

Panel Example

Why Are Panels Used?

Badges serve several purposes and are commonly used for the following reasons:

1. Enhanced Navigation:

   • Quick Access: Panels can contain navigation menus that provide quick access to different sections or pages of the website. This makes it easier for users to find what they're looking for without scrolling or searching through the main content.

   • Improved Usability: By having a consistent place for navigation, users can quickly learn where to go for specific actions, improving the overall usability of the site.

2. Increased Content Density:

   • Additional Information: Panels allow for the inclusion of extra information, such as related articles, or recent posts, without cluttering the main content area.

   • Parts and Tools: They can house interactive elements like search bars, social media feeds, calendars, and other parts that enhance the functionality of the site.

3. User Engagement:

   • Interactive Elements: Including elements like polls, forms, or integrations in panels can increase user interaction and engagement.

   • Promotional Space: Panels can be used to highlight special offers, featured content, or promotional messages, encouraging users to engage with these elements.

4. Customization and Personalization:

   • User-Specific Content: Panels can display personalized content based on user behavior or preferences, making the browsing experience more relevant and tailored to individual users.

   • Dynamic Updates: Content in panels can be dynamically updated to reflect real-time information, such as stock prices, weather updates, or breaking news.

Adding a Panel

Choose the Panels section most closely aligned with what you need from the Parts Library.

The Panels section can be used as a canvas for the whole page or a discrete section of a page.

Choose your preferred panel variation, select the part where you’d like to add your panel and click ‘+ add to page’.

The Components of Panels

A Panels part (parent) generally consists of a Panel Section (or two) and a Container (children). The Container is the part that houses all of your content.

Here is an example. You'll see a Panel Section on the left; a Container on the right; and both have the Panels part as their parent.

The Structure of a Panels Part

Editing and Formatting the Panel

You can change the background color of the panel, amend the size, and apply formatting such as borders, shadow, opacity, rounding, and spacing using the property editor on the right, once the Panels part or Panel Section has been selected.

Once you've added your content to the Panel Section, edit as needed.

Changing the Slot Position of the Panel Section

To change the position of a panel section, select the panel section, and go to Slot Position. You'll see there is the ability to append or prepend the panel section. Prepending the panel section places it at the beginning, and appending the panel section places it at the end.

Panel Slot Position

Adding a Background Image to Panels or Panel Sections

To add a background image to your panel or panel section, select the panel or panel section, then go to the property editor in the right panel. Go to 'Image', then choose your preferred image from the Media Gallery or upload a new image. You can then adjust the opacity of the background image within the Decoration Editor as needed.

The image will take up the full background space of the panel or panel section it has been added to.

Related Information

Menus

Buttons

Icons

Images

Background images

Text

Lists

Customizing and formatting