Articles in this section

Using a Panel widget

  • Updated
Follow

What is the Panel widget?

Using the Panel widget allows you to create unique sections on your website's pages and is a great way to really make your site stand out. Using panels on your site can be very helpful if you need to draw attention to a specific part of your website such as an invitation to a special event or a new product in your online store.

The Panel widget acts as a base onto which you can drag other widgets and it's highly customizable - you can edit everything from the background color to the fonts and, if you can't decide on a background color, you can upload an image instead.

How does it work?

Once you've added the Panel widget to your page, you can start adding other widgets to it. For example, you can create a multimedia section on your page by grouping a Picture widget, YouTube widget and MP3 widget in one Panel widget. Or, you can add a Columns widget and Picture widgets and create a gallery inside your custom panel.

Here's how to add it to your page:

  1. In your Sitebuilder, go to Widgets > Popular.
  2. Drag a Panel widget onto your page.

You will see a number of available options for you. We’ll go through each section.

Background

This allows you to add a background color, background gradient, an image or even a video image to your Panel widget.

Add a solid background color:

  1. If your Panel widget isn’t already open, click Edit on the top left corner of your Panel widget.
  2. On the Background tab, you'll see a section to enter the hex code of the color you wish to use or click on the grey arrow to select a color to set up the background color. 
  3. You can also determine the opacity of your background by sliding the bar under the Background Opacity option.
  4. Click Save.

Add a background gradient

The term "gradient" is used for a gradual blend of color which can be considered as the even change in color intensity from dark to light (or vice versa).

If you are using a color background and would like to edit the gradient you can choose another color as your gradient color. This will be blended into your current background color, in the direction you select. If you would like a more subtle effect, you can keep the background and gradient color similar.

To edit your gradient:

  1. Click the Background tab in the Panel widget. 

  2. Under "Background", select your background and gradient colors.

  3. Under "Gradient Direction", select which way your gradient will start.

  4. Click Save to finish.

Add a background image

If you would like to add a background image, please follow these steps:

  1. Click the Background tab in the Panel widget. 

  2. Under "Background Type", select Image.

  3. Click Browse. The File Manager will open up allowing you to select an already existing image or you can click Upload Files to upload a new image. If you are a premium user, you can also click Add Stock Media to browse through our stock images.

  4. Once you have added your image, the Background Size, Background Repeat, Background Attachment, and Background Parallax options will be available.

    1. Background Size allows you to select auto, cover, contain.  

    2. Background Repeat enables you to determine if you want the image repeated.

    3. Background Attachment moves your image to different parts of the frame, which changes the way the image is displayed.

    4. Background Parallax is a feature where the content you put on top of your Panel widget scrolls over the background image. If you want to use this feature, toggle the button to the right. 

  5. Click Save to finish.

Add a video background

Similar to adding a background image, you can add a video to your Panel widget background which will play automatically when your visitors land on the page.

Please follow these steps:

  1. Click the Background tab in the Panel widget. 
  2. Under "Background Type", select Video.
  3. Click Browse. The File Manager will open up allowing you to select an already existing video (it must be mp4 format) or you can click Upload Files to upload a new video. If you are a premium user, you can also click Add Stock Media to browse through our stock videos.
  4. Once you have added your video, a Video Alignment option will appear. This moves your video to different parts of the frame, which changes the way the video is displayed.
  5. Click Save to finish.

Border

You can add a border to your Panel widget. You can determine the width (thickness), color and style. You can also just put a border on a particular side (Top, Bottom, Right, or Left).

Corners

This feature allows you to add rounded corners to your Panel widget. You can either input the values for each corner manually or use the slider to assign equal values to all corners.

Shadow

You can create a 3D effect by creating an outer or inner shadow for your panel. In the "Shadow" menu, you will find four sliders and a color selector:

  • Shadow Y: When you move the slider, this shadow moves up and down.
  • Shadow X: When you move the slider, this shadow moves from left to right.
  • Shadow width: This allows you to choose between a thin shadow or a wider, more dispersed shadow.
  • Shadow opacity: This is the transparency level of the shadow.

The outer shadow displays outside of your custom panel and creates a 3D effect, while the inner shadow works in a similar way to the gradient effect but is limited to the edges of the panel.

Spacing

This allows you to determine the spacing outside and inside your Panel widget, as well as the inside width of the content, height, and alignment of your content.

  • Padding
    This allows you to determine the spacing inside your Panel widget between the edge of the Panel widget and the content you’ve added inside the Panel widget.
  • Margin
    Margin allows you to input the spacing values you want to be displayed between the edge of the Panel widget and the Content area of your Sitebuilder. You can either input values individually or use the slider bar to add equal values on all sides.
  • Content Width
    You are able to determine if you want the content added to the Panel widget to span the across the entire length of the widget or a certain width. You can input a percentage value or a fixed value.
  • Minimum Height
    When you enforce a minimum height, this ensures that the Panel widget height will be always displayed at the minimum height value. The Panel widget could grow longer if the content added is taller than the minimum height displayed but it will never be smaller. You have the option of using VH (viewport height) values which are dynamic or px values which is static. For example, if you use 100vh, this is equal to 100% of the current window height. Since this value is dynamic, the view changes proportionally if you resize the window. If you, for example, wanted a banner that covered 50% of the viewport, at a minimum, you would specify 50vh. If you use a px value, it would remain at the assigned size no matter what window size is used.
  • Alignment
    You have the ability to determine the alignment of content in your Panel widget. You can control this vertically and horizontally. Click on the drop-down menu to make your selection.


Fonts

If you add a Text widget to your Panel widget and you wish to set the font apart from the rest of your site, you can customize your Heading Color, Font Color, Link Color, Link Hover Color, Font Size, and Font Family. All the settings you choose in this menu will be applied to existing text inside the widget, so you don't have to do anything manually.

In order to use the Header editing feature on the Panel widget, you need first create your headers in the Text widget. Here's how to do it:

  1. Drag a Text widget into your Panel widget.

  2. Click inside the Text widget to bring up the Text Editing Toolbar.

  3. Select the "Paragraph Format" option.

  4. Select the type of heading format you'd like to use. Each heading will automatically correspond with the fonts and font colors you've selected in your Panel widget.

  5. When you are finished, simply click outside the Text widget to hide the Text Editing Toolbar.

Presets

This is a neat feature where you can either select from pre-designed styles or create your own style and save it a preset for you to use next time.

To save as your own custom preset, create your design then click the Save Preset button. A thumbnail image of your design will display under “My Presets”.

Please note if you log out of your Sitebuilder or clear the cache in your browser, the custom presets will no longer display. If this should happen, you can go to an existing Panel widget that you want to utilize and click the Save Preset button and it will add a thumbnail image again.

Related articles