Start a conversation

What are Widgets and how to use them?

Widgets are used to add content to your website, custom page, or bulletin. There are lots of different types.

How to add a widget

1. While editing the website, custom page, or bulletin, please click on the button named Content.

2. This will display a list of widgets. If you click on the arrows, you can collapse or expand each group.  There are two icons on the widgets:

  • + (Plus icon) - This means the widget will be created when you drag it over to the page. 
  • Magnify glass - This means the Widget is existing. When you click on the magnify glass, it provides you with a preview of the content of the Widget.

3. Click and hold your mouse button down on the widget you would like to use.

4. Drag your mouse over to an area which says Drop Here or over top of an existing widget.

5. Top drop the widget, let go of the mouse button.

How to edit a widget and it's options

1. To edit a widget, click on it. This brings you into the editor.

2. To see the widget's options, hover over top of it and you will see a few icons:

  • Box with an arrow - This allows you to edit the widget by adding more content by the online editor or by creating/selecting other content.
  • Gear - The properties of the widget.
  • X - Removes the widget. You can add it back again if needed from the right.

Note: By clicking on the White X, it does not delete the widget. It just removes it from the page or bulletin.

List of widgets

  • Preformatted Widgets - These provide the option to display content on the page in different formats without the need to know how to use code.
    • Left/Right Image with Text - A widget with text box with an image to the left/right.
    • Image with Caption - An image with a text box below it.
    • Triple Image Above Text - Three images with a text box below each one.
    • Article with Left/Right Image - A text box with a image to the left/right of it, with a title and a button.
    • Text Only - A text box.
    • Triple/Double Column Text - Three/Two text boxes in columns.
    • Single Button - A button which can be used to create a link.
    • Call To Action - A header with three buttons in a row below it which can be used to create links.

Note - Text boxes can contain text, images, and more.

  • Essentials - Popular widgets to have on the page:
    • Custom Pages - Displays a list of Custom Pages which are selected to be shared on the home page.
    • Home Page Photo Albums - Displays a list of Photo Albums which are selected to be shared on the home page.
    • Home Page Stories - Displays a list of Stories which are selected to be shared on the home page.
    • Contact Us - A small form which a person can fill out to send an email to a set email address. The email address is not displayed on the page.
    • Carousel - A widget which has rotating images pulled from a Photo Album.
  • Links - A widget which displays a list of links you add into it.
  • Events - A widget which displays a list of upcoming events.
  • Bulletin & PR - Widgets which have to do with the bulletin and public relations:
    • All Sponsors - A list of all sponsors pulled from the Sponsors module.
    • Animated Sponsors - A box with rotating sponsors, pulled from the Sponsors module.
    • Single Sponsor - A single sponsor pulled from the Sponsors module. When the page gets refreshed, it displays a different sponsor.
    • Bulletins - A list of selected bulletins.
    • Facebook Like Button - When a site visitor clicks the icon to "Like" the page, it links to the visitor's Facebook account. Depending on the visitor's Facebook settings, this may appear in their Facebook news feed and link others to your page.
    • RSS - A custom RSS feed.
  • Custom Widgets (Global) - This widget allows you to add custom content in it. It could be text, images, website code, and more. The Global means, the same widget can be displayed and updated on other custom pages. This is helpful if you want the same content to be displayed on multiple pages.
  • Custom Widgets (Page Specific) - This widget allows you to add custom content in it. It could be text, images, website code, and more. The Page Specific means, the widget cannot be displayed or updated on other custom pages. It is only available on this page.

Back to top

Widget properties

After clicking on the gear icon, it takes you into the widget's properties. Some widgets have different properties than others. Below is the most common:

  • General
    • Show Boarder - Displays a boarder around the widget, based on the website's theme.
    • Padding Left - Adds padding/spacing on the left of the widget.
    • Padding Right - Adds padding/spacing on the right of the widget.
    • Padding Top - Adds padding/spacing on the top of the widget.
    • Padding Bottom - Adds padding/spacing on the bottom of the widget.
    • Border Style - Different styles of borders can be selected.
    • Border Thickness - How many pixels the border thickness is.
    • Border Color - The color of the border around the widget.
  • Header Properties
    • Title - The name/title of the widget.
    • Show Title - This displays the title of the widget on the page.
    • Background Color - The color of the title's background.
  • Content Properties
    • Content Background Color - The color of the background.
    • Font - The type of font used in the widget's content
    • Color - The color of the content in the widget.
    • Content Title Link Color - The color of the content's title.

Back to top

Choose files or drag and drop files
  1. David H.

  2. Posted