Widgets
Concept Information
Tasks
Enabling and Disabling a Website Module
Add/Remove Yourself to/from a Waitlist
News and Article Administration
Related Topics
Widgets are used to display content from other modules on either a custom page or your home page.
Select Widgets to see the following pop-out menu:
Widgets are inserted into cells and display content you add or create (text, images, links) or content from other modules on your website. To add a widget to a cell, select and drag the widget into the cell. If content or another widget is already in the cell, an alert displays confirming the existing content will be replaced.
The following widgets are available:
If you have copied content from one cell, the option to paste that content will appear as a widget in the Widgets menu. Drag the Paste widget into the cell to copy the content from your clipboard to the cell. If content already exists in the cell, you will be prompted to confirm replacing the existing content with the copied content.
Alternatively, select the Paste icon at the top of the Widgets menu to paste the content into the cell.
Text that can be edited using the plain, formatted or advanced text editor.
Select the type of text you want to use for the cell to determine the text editor you will use: plain, formatted or advanced. Save your changes in any editor to apply the changes to the cell.
When editing previously inserted text, if the original text was edited using the Plain Text Editor, all three options (Plain, Formatted and Advanced Text Editors) will display. If the original text was edited using the Formatted Text Editor, only the Formatted and Advanced Editor options will display. If the text was edited using the Advanced Text Editor, only the Advanced Editor option will display.
For more information, see Editing Text.
Insert a link to another website or content on your website. Links available are based on modules enabled on your website.
The link builder supports several types of links, and track clicks for each:
- Built-in Module - Link directly to any of the built-in modules (or extra cost modules, if enabled). The next field is a drop-down list of available modules.
- Custom Page - Link to any custom pages you have created. The next field is a drop-down list of custom pages.
- Photo Album - Link to a photo album. The next field is a drop-down list of categories; once you select a category, you can select a photo album within that category.
- Future Event - Link to an event. The next field is a drop-down list of categories; once you select a category, you can select an event within that category.
- Document –Link to a document stored in your documents module. The next field is a drop-down list of categories; once you select a category, you can select a document within that category.
- Donation - Link to any donation fund. The next field is a drop-down list of available funds.
- Survey - Link to any survey. The next field is a drop-down list of available surveys.
- External Page – This is a link to a web page stored on another website. The next field will prompt for the External URL, the address of the website you wish to go to.
- Email – The next field will prompt for the Email Address.
- Anchor – Place a named anchor at the cursor.
- Link to Anchor – Select the “Link To Anchor” option to create a link to an anchor within the page (for example, from a mini-index at the top of the page down to a section heading, or from the end of a section back to the top of the page.)
- Blog - Link to any blog. The next field is a drop-down list of available blogs.
- Quick Link - Link to external sites and some internal functions using a shortened url. To add external sites to the list of available links, see Quick Links
- Volunteering Opportunity - Link to any volunteering opportunity. The next field is a drop-down list of available opportunities.
- Resource Scheduler - Link to any resource available for reservations. The next field is a drop-down list of available resources.
- Ad Hoc Form - Link to any ad hoc form. The next field is a drop-down list of available forms.
- Storefront - Link to any active product in your website's Storefront. Choose a category, then choose a product in that category.
Links can be represented in three ways, using text, a button or an image. If you select Text or Button, the next field prompts for the text to be used. If you select Image, the field is replaced by a button that displays the Image Selector pop-up window.
For linking to another ClubExpress module, a custom web page or a photo page, or an external website, you also have the option of having the target page appear in the same window (customary for another ClubExpress module, web page or photo page) or a new browser window (customary for linking to an external website.)
Choose whether to track link clicks. Clicks can be viewed and link tracking can be managed through Link Tracking. Enter a title for the link; this is only shown on the Link Tracking admin screen.
Images from Web Graphics, Photos or your local hard drive.
Select Insert Graphic to display the following image selector pop-up window:
Search through Web Graphics, Photos or upload a new photo from your local hard drive. Select Save to save your changes.
To resize an image that has been inserted, select and drag the double arrow at the bottom right corner of the image. You can also resize the image using Cell Actions.
An image floated to a position you specify, with text that wraps the image.
Select Add Image to display the image selector pop-up window:
Search through Web Graphics, Photos or upload a new photo from your local hard drive. Select Save to save your changes. Select the Image Position.
Edit text using the Formatted Text Editor.. Select Apply Changes to save your changes.
An image with a text caption underneath.
Select Add Image to display the image selector pop-up window:
Search through Web Graphics, Photos or upload a new photo from your local hard drive. Select Save to save your changes.
Edit text using the Formatted Text Editor. Select Apply Changes to save your changes.
Text with an image as the background.
Select Add Image to display the image selector pop-up window:
Search through Web Graphics, Photos or upload a new photo from your local hard drive. Select Save to save your changes.
Edit text using the Formatted Text Editor. Select Apply Changes to save your changes.
Insert a list of upcoming events.
Enter a title to display at the top of the widget. Enter the number of days out to show upcoming events. Choose a width that spans the width of the cell, or a fixed width, and a maximum height. Choose to include all event categories, or only specific categories. Select Apply Changes to save your changes.
Insert a list of recent blog posts.
Enter the title of the widget and the time period to display information. Enter the width of the widget, either the width of the content box or a specified width, and the maximum height of the widget. Determine if the widget will display all blogs or only select blogs. Select Apply Changes to save your changes.
Insert a list of recent news articles posted in the News & Articles module.
Enter a title to display at the top of the widget. Enter the number of days past to show recently posted articles. Choose a width that spans the width of the cell, or a fixed width, and a maximum height. Choose to include all news article categories, or only one category. Select Apply Changes to save your changes.
Insert a list of members who have recently joined or renewed their membership.
For organizations where members join through their business lives, you'll see the option to display the business name instead of the individual member name.
Select the members to display, either new or renewed. Remember, if your members join through their business lives and you select "Member Name", you'll be prompted to confirm whether you want to show the business name or individual member name.
Enter the widget title to display, the time period and the width of the widget. Enter the font to be used for the member names. Select Save to save your changes.
Insert a list of upcoming member birthdays and anniversaries.
Enter the title of the widget and the time period to display information. Enter the width of the widget, either the width of the content box or a specified width, and the maximum height of the widget. Determine if the widget will display birthdays, anniversaries, and for primary members only or to include secondary and tertiary members. Select Apply Changes to save your changes.
Display a carousel slideshow with a text overlay which can include a link. The individual images used will come from your Web Graphics library.
Select Add Slide to add a slide to the carousel, then select the Settings (gear) icon to configure the slide.
Next, you'll add an image by browsing your Web Graphics library. If you select the Include Overlay checkbox, you'll also be able to add and configure a text overlay and link.
The trash can icon deletes the panel. Click Apply Changes to save your changes.
Insert sections of text in a tabbed format, where users can select a tab to display different content within the same cell.
Select Add Tab to add a tab of text. A new set of icons will appear:
Select the settings icon to configure the panel settings:
Enter the title of the tab. Select the font and size for the tab, as well as the background, hover and border colors.
Select the edit icon to add text to the panel. This is the text that will be visible when the user clicks the tab on the custom page. Use the Formatted Text Editor to edit the text.
The trash can icon deletes the panel. Click Apply Changes to save your changes.
Show a photo slideshow.
Select Insert Slideshow to show the Slideshow pop-up window.
Choose the Photo Album category to browse for a photo album to use for the slideshow. Set the width and height of the slideshow, and choose to display a border and navigation buttons, or the images only. Select Save to save your changes.
Administrators: July 2023 - Twitter has recently changed its API policy and requires that all users be logged in to view tweets. Due to this policy change, existing Twitter widgets will not function properly on your website. If you feel the widget and feed were important to your organization, we urge you to voice your opinion with Twitter in hopes of a policy reversal.
Insert a list of recent Twitter posts.
Choose a height and width for the widget, and enter the Twitter username.
Insert expanding and collapsing text.
Select Add Panel to add a panel of text. A new set of icons will appear:
Select the settings icon to configure the panel settings:
Enter the title of the panel and the width. Select the font and size for the panel. Select the icon to be used to indicate further text is available (expand icon). Select the font color and background color for the title of the panel.
Select the edit icon to add text to the panel. This is the text that will be visible when the user clicks the "expand" icon on the custom page. Use the Formatted Text Editor to edit the text.
The trash can icon deletes the panel. Click Apply Changes to save your changes.
Inserts a horizontal line spanning the width of the cell.
Inserts an empty widget (no content) into the cell.