Index > The Custom Panel Widget

What is the Custom Panel Widget?

Using the Custom 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 Custom 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 colour to the fonts.

How does it work?

Once you've added the Custom Panel Widget to your page, you can start adding other widgets to it.

Here's how to add it to your page:
  1. Drag the Custom Panel Widget onto your page.
  2. As a first step, select a preset background colour from the options provided.
  3. Go through the Background, Border, Corners, Shadow, Spacing and Fonts tabs to further customise your widget.
  4. When you are finished, click "Save" in the bottom right-hand corner.

Customising the Custom Panel Widget

Once you've added the Custom 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.
  • Edit the font, heading colours, hyperlink colours and size.

Changing the background gradient

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

To edit your gradient:
  1. Click "Edit" in the top left corner of the widget.
  2. Click on the "Background" tab.
  3. Under "Background", select your background and gradient colours.
  4. Under "Gradient Direction", select which way your gradient will start.
  5. Click "Save" to finish.
Please note: If you build your site using a browser such as Google Chrome and you view your site using Internet Explorer, you will notice that the Custom Panel looks different. For example, rounded corners, background gradient and shadowing do not display. The reason for this was provided by one of our engineers on our community forum, and here is an extract of his explanation:

"The Panel Widget makes use of a new web standard, CSS3, for some of it's more advanced visual features. CSS3 is not supported in IE7 and IE8, and is only partially supported in IE9. Because enabling CSS3 in IE9 requires an opt-in rendering choice instead of progressive enhancement across the board (you'll notice that our own SiteBuilder doesn't have rounded corners in IE), turning it on runs a significant risk of breaking existing sites in unpredictable ways.

For this reason, when editing the Panel Widget in IE, all of the features that are powered by CSS3 are turned off - and their editing interfaces aren't displayed. These features are background gradient, rounded corners and shadows. When these features are turned off, the widget will still display the same primary background colour, border style, margin, padding and background image - and for the most part, will still look good - though not quite as good as is possible in more advanced browsers."