Theme Documentation

Use the instructions contained herein to build out your awesome websites with our NationBuilder Mega-Theme & Custom Themes.

Layout Tags


You can customize a page's layout by entering tags in that page's Settings  Tags. These tags aren't visible on the website but affect how pages display. Below is a reference for all available layout tags and when you can use them.


All Pages

layout full width: When not showing sidebar, increases page's content area width from 2/3 to 100%.

layout sibling menu: Displays a vertical button menu of all siblings in the sidebar. Not available on action pages.

layout homepage: Shows an excerpt of the page on the homepage.

layout profile: Displays a button linking to this page in the Take Action section on profiles, replacing the Supporter nav → Buttons that appear by default.


Action Pages (Show Sidebar)
You can find more information and demos for all these tags except layout no divider here.

layout no header: Removes normal hero section.

layout full bgThis will wrap any background images or a background video around all page content except the top navigation bar and the footer. Hides some page content.

layout no contentThis will wrap any background images or a background video around the page's action form while hiding all other page content except the top navigation bar and the footer.

layout form left: Moves action form to the left and any content to the right.

layout form center: Moves action form to the center. Requires layout no content.

layout no divider: In rare cases, your page will use layout no header and will have no content below the headline and/or subheadline of the page. The divider that separates the headline/subheadline area from the usual content section will still be displayed and is unnecessary. In this case, use this tag to get rid of the divider.


Partial Action Pages (Show Sidebar)
You can find more information and demos for all these tags except layout no divider here.

layout no header: Removes normal hero section.

layout form left: Moves action form to the left and any content to the right.

layout no divider: In rare cases, your page will use layout no header and will have no content below the headline and/or subheadline of the page. The divider that separates the headline/subheadline area from the usual content section will still be displayed and is unnecessary. In this case, use this tag to get rid of the divider.


Action Pages (No Sidebar)
You can find more information and demos for all these tags except layout no divider here.

layout no header: Removes normal hero section.

layout no content: Removes all content except action forms. Moves normal content into form as subheading.

layout no divider: In rare cases, your page will use layout no header and will have no content below the headline and/or subheadline of the page. The divider that separates the headline/subheadline area from the usual content section will still be displayed and is unnecessary. In this case, use this tag to get rid of the divider.


Partial Action Pages (No Sidebar)
You can find more information and demos for all these tags except layout no divider here.

layout no header: Removes normal hero section.

layout no divider: In rare cases, your page will use layout no header and will have no content below the headline and/or subheadline of the page. The divider that separates the headline/subheadline area from the usual content section will still be displayed and is unnecessary. In this case, use this tag to get rid of the divider.


Home Page
You can find more information and demos for all these tags here.

layout hero survey: Replaces default hero section with a survey and image combination.

layout hero donate: Replaces default hero section with a donation form and image combination.

layout hero slider: Replaces default hero section with a slider using featured content sliders to populate the images and content.

layout form left: Moves hero action content to the left.

layout form center: Moves hero action content to the center (if the layout allows for this).

layout form right: Moves hero action content to the right.


Basic Page Types

layout subpage blocks: Displays excerpts of a page's subpages. View Demo


Blog Page Types

layout videos: Displays a video blog template (for embedded Facebook, Youtube, and/or Vimeo videos). Requires layout full width. Also requires the code snippet in Step 4 hereView Demo

layout homepage blog: Replaces the normal homepage content section with this page's latest blog posts. View Demo


Endorsement Page Types

layout signature count: Displays the total number of endorsements to date after the main content section.


Donation Page Types

layout no amount: Disables showing the chosen donation amount at the bottom of the form.


Petition Page Types

layout signature count: Displays the total number of signatures to date after the main content section.


Recruiting Page Types

layout subpage blocks: Displays excerpts of a page's subpages.

layout recruiting goal {{ number }}: Creates a goal for a signup's number of recruits. Example: layout recruiting goal 10 View Demo


Survey Page Types

layout question count: Displays the number of the current survey question and the total number of questions in the survey. The reason this is only available via this tag and not as a default is because it will not work properly without a small action on your part - you need to toggle the survey's question order in the backend, even if you just drag and drop the question in slot one into the second slot and immediately back again (so the order wouldn't actually change). We highly recommend using this on your survey pages so users aren't in the dark on how many questions there are. Just make sure you understand what you need to do for it to work properly. View Demo

layout no total questions: By default, if you're not using layout question count and there's more than one question in the survey, the survey will display the total number of questions in the survey. To disable this, use this tag.