Documentation
This is the documentation for how to set up new sites using this starter structure and theme.
Initial site set up
There are two main steps to getting a new site up and running and ready. Once these steps have been completed you can then move on to styling and adding content. The two steps are documented below:
The first stage in creating a new site on the Bridge network is to clone the starter site structure. The following video takes you through this process:
Once you've copied the starter structure the second stage in creating a new site on the Bridge network is to clone the starter theme. The following video takes you through this process:
General styling
Once you have created your new site, it's now time to apply the core styling to it. The theme files required to do this are as follow, with detailed documentation found below:
- Colours: _variables_colours.scss
- Main logo: General site settings
- Typography: _variables_typography.scss
- Header, body and footer colour schemes, alternate logos and general variables: _variables_general.scss
- Social media links: _variables_social_links.scss
- Google map styles: _variables_maps.scss
The following video takes you through the process of defining colours for your theme so you can begin to alter the aesthetics of the new site to suit your required branding. The file required to change colour schemes is found in the theme files and is called '_variables_colours.scss'.
The following video takes you through the process of setting a general logo and favicon for your site:
The following video takes you through the process of defining fonts for your theme so you can begin to alter the aesthetics of the new site to suit your required branding. The file required to change typography is found in the theme files and is called '_variables_typography.scss'.
The following video takes you through the process of defining general setting for your theme, so you can begin to alter the aesthetics of the new site to suit your required branding. The file required to change the general settings is found in the theme files and is called '_variables_general.scss'.
The following video takes you through the process of adding social media links to your site. The file required to add social media links is found in the theme files and is called '_variables_social_links.scss'.
There are two stages to adding a styled Google Map to an event page.
Firstly, you need to generate an API Key in your Google Cloud Console. This video talks to you through that process:
Once your map is working, you can then change the colours and marker that appears on it. The following video takes you through that process.
The file required to change map colours is found in the theme files and is called '_variables_maps.scss'.
Header image section
This section shows you how to add a header image or content slider to a page and add additional features to it.
Below is a video explaining how the featured content slider functionality can be used to create a header image on your page:
You can add an introductory paragraph to the header section of your page taken from the social media settings of your page.
To display the excerpt add the tag 'add intro' to the page.
You can add Call to Action buttons to the header section of your page in two ways:
You can add the main site buttons, set in the 'Supporter nav' section of your site by adding the tag 'add main buttons' to the page.
You can add up to three, page specific buttons to the header section by adding the tags 'button 1:', 'button 2:' and 'button 3:' followed by the url you want to link to. So for example to add button 1 linking to The Space Room website by adding the tag 'button 1:https://thespaceroom.com'.
By default the label on the button will read 'Find out more'. You can add a custom label to the button by appending '**' to the tag followed by the label you want to use. So using our example, if we wanted the label to read 'Visit The Space Room website' the tag would be 'button 1:https://thespaceroom.com**Visit The Space Room website'.
The following video explains this process in more detail:
You can add a short video background to the header section of a page by following these steps:
- Upload the video to the 'Files' section of your page. Note: the file must be less than 10mb in size.
- Adding the tag 'video header' to the page.
Here is a video explaining that process in more detail:
In the featured content slider you may want to add a short excerpt of the page that you're linking to. You can do this by following these steps:
- Add an excerpt to the SEO settings of the linked page or pages.
- Add the tag 'add features excerpt' to the page with the featured slider.
This video explains that process in more detail:
You can display the featured content slider in a grid layout if you'd prefer.
To do this you need to add your featured content slides and then add the tag 'features grid' to your page.
This video explains the process in more detail:
General page options
For action pages (pretty much anything that has a form), you can divide the page so that text is on the left and contentis on the right by adding the tag 'divide page'. If this tag is added it will also be reflected on any landing page where that action page is also included.
The following video explains this principle in more detail:
Creating landing pages
NationBuilder doesn't have a landing page building feature, so in order to construct more complicated layouts for our pages we can use an include tag.
Include tags can be used on any basic page. In their most basic form they involve adding a tag with the following structure to the page in question:
include:[SLUG OF CONTENT TO DISPLAY]
For instance if I had a an 'About' page on my site with the slug 'about' I could include an excerpt of it on my page using the tag include:about.
The following video illustrates this principle:
You can change the order that include appear on your page by appending a number followed by an underscore to the front of the tag.
For example, if you have two include tags on your landing page 'include:about' and 'include:events' and you want to ensure that the about include appears first you would change the tags to '1_include:about' and '2_include:events'. You can continue this process for as many includes as you want.
This video illustrates that process:
There are four available colourways, defined by our theme colour variables (see previous video) which we can use to style our include tags if we require.
To change the default styling of an include tag we would append '**colour:[1, 2 or 3]' to it. The number we choose would depend on the colourway we want to use, e.g. '1_include:events**colour:3'.
This video illustrates that process in more detail:
By default on a larger browser width, for certain types of include, text aligns to the left of the image. We can change that so the image appears on the right and the text on the left by appending '**align:right' to our include tag, e.g. '1_include:about**align:right'.
The following video takes you through this process in more detail:
You can add the latest posts or events from any blog or calendar page to landing page by using the tag 'include:[SLUG OF BLOG OR CALENDAR PAGE]'.
So for example, if we had a blog with the slug 'news', in its most basic form you could add the tag 'include:news' to display the three latest posts from the News section in a grid form.
In addition to this latest posts or events can be displayed in three additional 'styles' by appending '**style:[1,2 or 3]'.
- **style:1 displays the 5 latest posts or events in a condensed form, without a featured image. This is good for saving space.
- **style:2 displays just the latest post or event in a more expanded layout.
- **style:3 is a comibination of 1 and 2, displaying a featured post or event in expanded form, followed by a condensed grid of the next four latest.
You can also append colour and alignment attributes to the include as described elsewhere in this documentation.
The following video explains this process in more detail:
https://youtu.be/oTaWmLn12LE