Depending on the visuals and construction of your website’s graphic button components, you may desire additional help with updating those pieces (seasonally or on an as-need basis).
CivicPlus can evaluate your graphic buttons and determine if a button template could be useful moving forward. The template and instructions will always be unique, but the outline below will give you an idea of what to expect and what CivicPlus provides.
Visual Resources
If you need help on where to start with collecting new visual components, check out the following potential options:
Free Icon Resources:
Paid-for Icon/Image Resources:
Adobe XD Graphic Button Template
Access to Adobe XD (Experience Design) will be required to open and manipulate your provided template. Please let your CivicPlus representative know if you do not have access to this program.
Once you receive your XD template, you should be able to open the file to access the graphics and update as needed. Please note to review the notes and document layer names, as instructions on what to update.
Ensure that the new icon you place into the template is the appropriate color. This setting is found on the right-hand side of the XD interface when you’re clicked into the icon layer.
Saving your Files
Icon-based visuals: SVG (PNG is the second alternative)
Image-based visuals: JPG
Tips for Updating a Graphic Button Within Your Website
Always start with a copy of an existing button. This will ensure that the structure, style, and hover effect(s) stay consistent, without having to build your new button entirely from scratch.
Identify which layer the original file is living within (Background “(outer)” vs “Background (inner)” and modify that image asset.
