Skip to main content

A Panel Box consists of three main components: the Header, Content and Footer. By default, only the Header and Content are displayed. If the Show Footer option is selected during setup, the footer component will display as well.

Simple Panel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit mollis nunc facilisis consequat quis ut enim. Proin rhoncus dui eget tortor venenatis, in iaculis massa aliquam.
Information Panel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit mollis nunc facilisis consequat quis ut enim. Proin rhoncus dui eget tortor venenatis, in iaculis massa aliquam.
Success Panel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit mollis nunc facilisis consequat quis ut enim. Proin rhoncus dui eget tortor venenatis, in iaculis massa aliquam.
Primary Panel 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit mollis nunc facilisis consequat quis ut enim. Proin rhoncus dui eget tortor venenatis, in iaculis massa aliquam.
Warning Panel
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit mollis nunc facilisis consequat quis ut enim. Proin rhoncus dui eget tortor venenatis, in iaculis massa aliquam.
Dark Blue Primary Panel
Add panel-dark-blue to the Custom Class field of a Primary Panel to get the dark blue color. Note: this only works with the Primary Panel. See below for more detail.
Danger Panel 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae elit mollis nunc facilisis consequat quis ut enim. Proin rhoncus dui eget tortor venenatis, in iaculis massa aliquam.

Columns shortcode was used in the above example to lay the boxes out side by side in two columns.


How to Add a Panel Box

  1. Place your cursor where you want the Panel Box to appear.
  2. Select Panels from the Content Elements dropdown menu under Interactive.
    Where to find the Panels button in the editor
  3. Tip: If you don’t see the Content Elements button in the editor, click the Toolbar Toggle button. This toggles the visibility of a collection of buttons in the editor.Toolbar Toggle Button
  4. A dialog box will appear that allows you to configure the panel box settings:
    1. Choose a Style – this correlates to the color of the box.  There are 6 default color options:
      • Simple = light gray box
      • Primary = medium blue box
      • Success = green box
      • Information = light blue box
      • Warning = Yellow box
      • Danger = Red box
    2. Show Footer – enabling this option adds a footer section to the panel box.
    3. Custom Class (optional) – for Primary Boxes only, a custom class can be applied to modify the color:
      1. Dark Blue → add panel-dark-blue.
      2. Note: this custom class only works with the Primary Box.
        Screenshot of the Panel Box settings.
  5. Click the Insert Notification button and the shortcode will be added to the page.

Panel Box Modifications

Any of the components (Header, Content or Footer) of a Panel Box can be deleted. Just be sure to delete that entire section. For example, if you wished to remove the Header, you would delete the following from the shortcode:

[panel-header]Heading Goes Here[/panel-header]

 

AdobeStock_97371093
This panel has a header
Content Goes Here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.

You can add a table to the content area
# First Name Last Name
1 Bob Brown
2 Mike  Brook
3 Richard Smith
Almost anything can be added to the content area