How to use website builder widgets

The following applies to using widget in Website Builder.

You can add many different types of widgets to your Website Builder website.

A widget is an element you can insert onto your webpage that runs a function or access to a service.

To insert a widget using Website Builder, you simply enter the Design mode and click on the ‘Widgets’ tab found on the left side bar. You can then choose between ‘Text and Image’, ‘Content’, ‘Form’, ‘Social’, ‘e-Commerce’ and ‘Templates’ widgets to add to your webpage.

For example, to add a drop down selection box, you click on ‘Form’. Once selected, you can drag the widget to the area of the page you wish it to be displayed. A gray new form box will appear and you can fill up the Title, Description, text that appears, and Internal and External links. Once completed, click on the ‘Create form’ button.

The widget is now placed on your webpage. You can change the settings, styles, CSS and any database back to it by clicking on the cog icon.

You can add other widgets as simply as the form types just shown. For example, social widgets like Twitter feed can be selected and then dragged onto your page. It will place the Twitter feed onto your webpage and you can then click the cog to change the settings, styles and CSS of the feed.

Using the Templates widgets will allow you to set editable areas on your pages, which will apply your changes on each page. Not unlike the Header and Footer system on your word processing software, template widgets mean there are uniform areas on your pages. These are especially useful to use mastheads and navigation panels.

To create a template, click on the ‘Templates’ bar in the ‘Widgets’ menu. Then click the ‘Add’ button. You can name your new template widgets here.

Drag and drop your new widgets onto the page. Unlock the template by double clicking, then drag other widgets into the template.

You can drag and drop the template widgets onto any other page and the content will be replicated. Any changes you make to the content will take effect on all other pages that feature this widget.

A final example can be seen in the form of setting up a payment method on your webpage. To add a payment method select the one you want from the ‘e-Commerce’ section and click on it. You will then see a ‘Settings’ box appear and you will need to fill out any details required. Once this is filled, drag the widget from the left side bar to your webpage design. The payment method will then appear on your webpage.

You can, as shown previously, click on the cog icon to adjust the settings for your payment method.