Using the Panel Widget

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 site, 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,

2. Select Popular from the drop-down menu.

3. Drag a Panel widget onto your page.

User-added image

4. You can customize your Panel widget's Background, Border, Corners, Shadow, Spacing and Fonts. Alternatively, you can also select one of the Preset styles available. .

User-added image

5. When you are finished, click Save in the bottom right-hand corner.

Please note: Adding files, such as .swf, .doc etc, will not display the contents of the file. Instead, a link to the file will be created which visitors to your site can click on to view.

Customizing the Panel widget

Once you've added a Panel widget, you can start exploring the different ways to make your custom panel really stand out! Here are some great ways to do this:

  • Change your background gradient.
  • Upload your own background image or video image.
  • Create a 3D effect by adding shadow to your widget.
  • Edit the font, heading colors, hyperlink colors and size.

Changing the 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 Edit in the top left corner of the widget.
  2. Click the Background tab.
  3. Under "Background", select your background and gradient colors.
  4. Under "Gradient Direction", select which way your gradient will start.
  5. Click Save to finish.


 User-added image


Uploading your own background image

You have the ability to upload your own image background or video background. Here's how to do this:

  1. Under "Background Type", select if you want Image or Video.
  2. Click the Browse button and either select a file from your File Manager or upload a new file.
  3. Once the file is selected, click Select.

You can also customize the background attachment for your image or video. What this does, is move your image/video to different parts of the frame, which changes the way the image/video is displayed.

If you have selected the background image option, you'll see a number of other features open up.

  • Background Size
  • Background Repeat
  • Background Parallax


User-added image

Background Parallax
This may be a term you've never heard before. What Parallax does is allow the items you've placed inside this particular Panel widget scroll up over the background image you've added. Tip: This feature works best on sites where the content area fills up the whole screen.

User-added image


Create a shadow effect

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.

User-added image


Edit 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 style. 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.


User-added image

Was this article helpful?
0 out of 1 found this helpful