Note: This article refers to the legacy version of the Website Builder. If you signed up to the HostPapa Website Builder after March 11 2020, you’re on the new version of the Website Builder. For help, go here.
Using the Custom Panel Widget allows you to create unique sections on your website’s pages. 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.
How it works
Once you’ve added the Custom 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 Custom Panel Widget.
Here’s how to add it to your page:
- Drag the Panel Widget onto your page (located in Widgets > Popular).
- Select a preset background colour from the options provided.
- Go through the Background, Border, Corners, Shadow, Spacing and Fonts tabs to further customize your widget.
- 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 Custom Panel Widget
Here are some ways to customize your Custom Panel Widget:
- Change your background gradient
- Upload your own background image
- Create a 3D effect by adding shadow to your widget
- Edit the font, heading colours, hyperlink colours and size
Changing the background gradient
The term gradient is used for a gradual blend of colour which can be considered as the even change in colour intensity from dark to light (or vice versa). To edit your gradient:
- Click Edit in the top left corner of the widget.
- Click on the Background tab.
- Under Background, select your background and gradient colours.
- Under Gradient Direction, select which way your gradient will start.
- Click Save to finish.
Changing the background image
If you’ve uploaded a background image, you can choose whether to repeat the image (also known as tiling) and which direction you’d like the tiling to go. You can also customize the background attachment which moves your image to different parts of the frame changing the way the image is displayed.
To edit your background image:
- Click Edit in the top left corner of the widget.
- Click on the Background tab.
- Under Background Image, select Upload or Browse.
- Once you have added your image, the repeat and attachment options will be visible.
- Click Save to finish.
Create a shadow effect
You can create a 3D effect by creating an outer or inner shadow for your custom panel. In the Shadow menu, you will find four sliders and a colour 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 custom panel.
Edit fonts
If you have added multiple Text Widgets to your Custom Panel Widget, using this menu is an easy way to format all the text at once instead of having to format each Text Widget individually.
You can also customize your heading colour, font colour, link colour, link hover colour, font size and font style. All of 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 Custom Panel, you need to create your headers in the Text Widget first. Here’s how to do it:
- Drag the Text Widget into your Custom Panel Widget.
- Click inside the Text Widget to bring up the Text Editing Toolbar.
- Select the Font Format option.
- Select the type of heading format you’d like to use. Each heading will automatically correspond with the fonts you’ve selected in your Custom Panel Widget for your various headers.
- When you are finished, simply click outside the Text Widget to hide the Text Editing Toolbar.
If you no longer want all your text to be the same style, you can also edit each Text Widget individually by clicking Edit in the top left-hand corner of the widget and using the Text Editing Toolbar.
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 is that 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 website builder 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.
