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

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:

Reordering includes

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:

Changing include colour schemes

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:

Changing the image to text alignment of an include

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:

Adding latest posts and events to a landing page

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