This is the really fun part of Websites V2. Unlike legacy RunSignup race websites, Websites V2 allows you to create content-rich, professional looking website pages for every page on your website. No coding needed! The Website Builder for Websites V2 operates in an easy-to-use, familiar fashion, with point-and-click options to add sections and components and drag-and-drop capabilities for rearranging your content.
By the time you are creating website custom content pages, we recommend that you have already set your style via theme options, and setup your website structure.
Jump to a specific section below:
Sections and Components
There are two main organizational blocks for your website custom content.
- Sections are one or two column blocks that house one or more components. A section is entirely one or two columns – if you need to change the number of columns for your content, you want to add a new section.
- Components are the content blocks that fill up sections. A section can house just one component or more than one component. There’s more about the type of static and dynamic components available to you below.
This diagram shows you how sections and components work together:
To add a new section, simply click on the plus sign by “Add New Section” at the top or bottom of your page in website builder. Then, choose the appropriate number of columns.
Section Settings
To access the settings for an entire section, click on the gear at the top right of the section. Your section settings have a number of customizations that you can activate to improve the functionality and look of your website page.
Section Setting options include:
- Hide or Publish Later: the option to hide content or publish it at a future date. This is useful in between events when you aren’t yet sure what updates need to be made. By hiding or publishing later, you avoid starting from scratch each year.
- Section URL: the section URL creates an anchor link that you can use to jump to that specific content on the page. Number-based section URLs will be automatically created, but you can customize them to match the content they’re jumping to.
- Section Width: section width determines how much of the screen is taken up by that section. Opting for restricted width leaves space between your content and the edge of the page (maximum width of 1170 pixels), whereas full width content extends to the edges o the screen. Full width is often used for images and videos.
- Padding: adding padding increases the extra space between this section and the next section.
- Section height: the section height determines if there is a dynamic minimum height for your section that scales up on larger screens. Enable this for a visually pleasant experience across devices when you have minimal or no content.
- Rounded corners: enabling rounded corners adds a soft rounding to the edge of your section. This option is only available on restricted width content.
- Border: adds a thin border to the edge of your section. This option is only available on restricted width content.
- Background options: allow you to set a color from your website color scheme. Alternatively, you can upload an image to use as a background for the section. The picture of the park in the images below is added as a background image, not using an image component. That ensures it fills the complete area.
To get an idea how the same page can look with different style options applied, take a look below:
Restricted Width Sections with Medium Rounding
Full Width Sections (no rounding for full-width sections)
Mixture of full-width and restricted width sections.
Components
By itself, a section is just blank space. Once you’ve created a section, you need to fill it with one or more components. Some components are static, and built off only the information you input when you add it, while others are dynamic and tied to your race data. More components will be available over time. To see more about what’s to come, view this blog. For now, we’re looking at this batch of available components for your website custom content:
More components are coming! The most commonly used component that is not yet available is event tiles. You can use buttons or cards in place of event tiles. However, if you need the strong call to action (and dynamic pricing details) available on event tiles, you may want to wait before launching your website V2.
Basic Content Components
- Text: this self explanatory component allows you to add text. The text editor is allows you to set Header tags, customize the font size, link text, and add formatting like bullet points and italics.
- Button: add the universal call-to-action: a clickable button that you can link to virtually anywhere.
- Image: include an image to your website. You can crop your image as you upload it. When adding an image to your website, you can upload a new one or grab one from image gallery. Image gallery houses all the images you’ve previously used on your website or in email V2, as well as generic event images that are free for use.
- Image, Text, Button: while you can use the components above together, this component makes it fast and easy for you to add a images, text, and buttons to your website quickly and easily.
- Contact Form: pull in the standard race “Contact Us” form. This allows people to reach your race director’s email inbox through a simple contact form.
- Cards: create visually appealing content with simple cards. Cards allow you to add up to 4 sets of images, text, and links in a single row. Caution: cards look great, but they resize based on browser size, so you’ll want to text any card images on multiple devices to make sure they work the way you think.
Cards used to display sponsor options:
Cards used to show event options
Informational Components
- Event Description: add the description from your race wizard. This allows you to easily add the description without re-creating the content.
- Event Location: display the event location from your race wizard to allow you to easily add details about the location.
- Map Location: feature the location data from your race wizard to present a clickable image that shows the event location via Google Maps.
- Strava Map: add an interactive Strava Map to your website to show off various looks at your course, including a flyover and course profile. If you have a Strava club to promote, you can also link to that here.
- Sponsor List: grab data about the sponsors added in the Sponsor Management platform to instantly add sponsors to your website.
FOMO-Inducing Components
- Countdown Clock: count down to a key time for your event. You can set it based on the event start or end time, registration open or close time, or any custom time.
- Slideshow: feature your best event photographs via an interactive image slider.
- YouTube Video: add a YouTube video directly to your page via the YouTube identifier.
- YouTube Playlist: add a series of videos directly to your page from a YouTube Playlist.
- Spotify and Apple Music Playlists: include fun, themed music on your playlists to inspire your participants to train (or race) to them!
- Donation thermometer: inspire more giving with a real-time look at your donation progress
- Photos: this component pulls in photo albums that were uploaded to RunSignup. While you can always add a page for photos, the component makes it easy for participants to find photos by displaying them on a main content page. This pulls in photo albums from all years of the race.
Component Settings
Components also have their own setting options, available from the gear at the top right of the component. These settings will vary depending on the component. Some, like text, also have background color and padding options, while other settings are specific to the type of dynamic content being featured.
Moving Page Content
There are two ways to move your website custom content around on the page. The first is to use the grid icon on the top left of the section or component to drag and drop it elsewhere on the page. The second is to use the arrows on the top left to simply move it up or down within the content. It’s important to note that while you can move both sections and component, components can only be moved within the section they were created in. You cannot move a component from one section to another – you would need to recreate it.
If you want to review the full blog series on creating a website with RunSignup Websites V2, please use these links: