Skip to main content

Search

We are excited to announce the launch of updated product names, logos, and headers within our user interfaces as part of the CivicPlus® Solution Rebranding initiative. These changes mark the first step toward creating a cohesive and seamless user experience across all solutions in our portfolio. As part of this transition, users may notice minor design updates. While the functionality you rely on remains unchanged, we are in the process of updating screenshots and other resources on our Help Centers to reflect the new branding. We appreciate your patience and understanding as we work to complete these updates.

Create and Edit a Button Widget on a Page

  • Updated:

Article Navigation

 

Not finding what you are looking for? View some additional resources.

 

Who can use this feature?

System Administrator | Owner | Publisher | Author

 

Create a Button

  1. Sign in to your site
  2. Navigate to your desired page
  3. Click the Widgets tab
    The tab labeled Widgets in the vertical menu on the left-hand side of the page.
  4. Click and drag the Button widget onto the page
    The widget labeled Button dragged-and-dropped onto a New Row on the page.
  5. Select a Widget Skin or use the Button Appearance fields to select images
    The drop-down menu labeled Widget Skin.
  6. Click the Next button
    The button labeled Next in the bottom-right corner of the Button Appearance tab.
  7. Complete the Button Options fields
  8. Click Done
    The button labeled Done in the bottom-right corner of the Button Options tab.
  9. Click Save Changes
    The floppy disk icon labeled Save Changes in the top-right corner of the screen.

 

Go to Article Navigation

 

Edit a Button

  1. Navigate to the page with the button
  2. Hover the mouse cursor over the button, then click the Options tab
    The tab labeled Button Options in the top-left corner of the widget tab.
  3. Select a Widget Skin or use the Button Appearance fields to select images
    The drop down labeled Widget Skin.
  4. Click the Next button
    The button in the bottom-right corner of the Button Appearance tab labeled Next.
  5. Complete the Button Options fields
  6. Click Done
    The button labeled Done in the bottom-right corner of the Button Options tab.

 

Go to Article Navigation

 

Remove a Button

  1. Navigate to the page with the button
  2. Hover the mouse cursor over the button, then click the Remove icon
    The button labeled Remove this widget in the top-right corner of the button options.
  3. Click OK on the pop-up confirmation
    The button labeled OK in the confirmation modal.
  4. Click Save Changes
    The floppy disk icon labeled Save Changes in the top-right corner of the page.

 

Go to Article Navigation

 

Button Appearance Fields

An example image of the options under the Button Appearance header.

  • Widget Skin: The appearance of the button is based on a widget skin
  • Outer Background Images: Will override those selected in the button's theme
    • Normal: Select an image asset for the default display
    • Hover: Select an image asset for when a user hovers over the button
  • Inner Background Images: Will override those selected in the button's theme
    • Normal: Select an image asset for the default display
    • Hover: Select an image asset for when a user hovers over the button

 

Go to Article Navigation

 

Button Options Fields

An example image of the fields and options under the Button Options header.

  • Default Text: Add default text
      • Hide Text: Select to force text not to appear on the button
    Note: Text describing the button must be included for accessibility compliance.
  • Secondary Text: Add subtext
  • Link: Add a link
  • Open in a new window: Open the link in a new window

 

Go to Article Navigation

Comments

Let us know what was helpful or not helpful about the article.

0 comments

Please sign in to leave a comment.