Like our legacy race websites, style options for your Website V2 allow you to fully brand your site. This means the colors used, logos, images, and styles can be customized to match your organization branding – just like a professionally built WordPress website. You can update these customizations anytime, but we recommend doing it at the start of your website build so you can see accurate colors and images as you add content. Once you’ve set your style, you can structure your website with pages and menus, and create custom content pages.
Updating Your Theme
You can access your Theme make updates from the right-hand menu on your website builder. These options will look similar (but not the same) as you found under Theme in legacy race websites.
Jump to a section to learn more about that theme option:
Adding your Logo
This allows you to upload your logo for the site. If you had a custom logo previously added to your legacy website, it should automatically show as the default logo in Website Builder. Otherwise, simply upload your logo – this will be displayed on the top left of your website. If you don’t have a logo of your own, yet, you can also select one of our default icons as a logo:
Additionally, you can now add a custom Favicon here! A favicon is the small icon that shows in a browser tab when someone is on your website. By default, the favicon shows the RunSignup “R”, but you can add a logo or other small image that represents your event.
Color Scheme
Next, you can set your own custom color scheme from the Theme menu. This section will look like the color scheme options in legacy race websites. If you set a color scheme for your legacy website, those settings will carry over to your V2 website. Otherwise, you can chose one of our pre-set color schemes, or add a fully custom color scheme.
Pro tip: When adding a custom color, you can scroll to options to input the color via RBG color codes, Hex Code or HSL. Even easier, use the eyedrop icon to hover over the color elsewhere (like in your logo) to automatically update the color code.
To see the impact of a color scheme on the overall look of your website, take a look at the same website page using 3 different color schemes:
Fall Theme
Spring Theme
Pale Blue Theme
Homepage Banner
Your homepage banner is exactly what it sounds like; the banner image that goes on your homepage. With Websites V2 your homepage defaults to your (fully customizable) peer-to-peer fundraising event info page. This is the banner that shows on that race info page. The recommended size for a Homepage Banner is 1200×400.
With Websites V2 comes additional options for displaying your banner. The Layout Options let you choose between:
- Default Banner Layout: This layout uses shading on your image and displays key fundraising event details (name, location, date) on top of the banner image (although you can opt to hide details elsewhere on this page)
- Stacked Layout: This layout does not shade the banner image, and includes the key race details below the banner image. It does not resize the image for mobile devices – use this option if you have text ON your image that is important/should not be cutoff.
- Full Height Layout: This new layout option extends the image up to the top of your website, overlaying your logo and menu on top of the image. Note that this option also defaults to displaying key fundraising event details over the banner image, and requires a darkening shade over the top of the image to ensure the menu is visible.
Hover over the image below and use the arrow to see how the default, stacked, and full-height layouts look using the same banner image and race details.
Banner Event Details
In addition to customizing the homepage banner image, you can customize the race details, including Banner Name (typically your race name), Banner Date (typically your race date), Banner Location (typically your race location), and social media icons. For many races, you can simply leave the defaults selected, and this will pull from the race information you entered in the wizard. Circumstances for which you may want to customize this information include:
- To include “10th Annual” in the race name on the banner, even though you followed best practices and did not make that a part of the race name/URL.
- Virtual races where you want the location to show as “everywhere” without a town listed
- Races with different start times for different distances where you want to be clear that the “5K starts at 8:00am; 10K starts at 8:30am”
In certain circumstances, you may also opt to hide some or all of the banner information. Just know that these details are included automatically because they are very important if you want to get people to your event. Hide them with caution.
Page Banner
One major upgrade from legacy websites to Websites V2 is the inclusion of an option for a page banner. This gives you the option to customize a second that you want to show on your regular content pages. The options for your page banner are similar to, but not the same as the options for your homepage banner. This is because your homepage is designed to grab attention and create excitement through an inspiring image, while your content pages are designed to inform. You want your page banner to keep the focus on your content.
The differences between a homepage banner and a page banner include:
- You can opt for a page banner with or without a background image.
- Page banners with images are more narrow, with a recommended size of 1200×230
- There are only 2 banner layouts: default banner and stacked layout (use stacked layout if you have text that cannot be cutoff).
- By default, race details like name, date, and location, are hidden to avoid adding creating too much distraction with the banner. You can enable these if needed.
Page banner with no background image.
Page banner with a background image.
Footer
Finally, within the “Theme Options”, you are able to customize your footer. You can add up to 350 characters (including links) that you want to include in the footer across all your website pages.
Your footer will now show your menu options, along with your custom content.
If you want to review the full blog series on creating a website with GiveSignup Websites V2, please use these links: