Theme Documentation

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

Homepage Hero Section

You can choose from eight different homepage hero section layouts. Except for Layout Eight: Action Page Form, your home page should be of type Basic.

Layout One

Signup Form

Assuming your site has a Pages → Defaults → Primary signup page assigned, the default layout is a signup form aligned to the left if you've implemented a background image/background video or the center if not.

Options:
  • You can align your form to the left, center, or the right by going to your home page's Settings → Tags and giving it the tag layout form left, layout form center, or layout form right.
  • To change the actual signup form options (like whether or not it asks for Postal Code/Address), navigate to your site's primary signup page's → Signup settings and adjust the settings. If you don't know what your site's primary signup page is, find out by going to Pages → Defaults → Primary signup page.
  • By default, if someone is logged in, the page's headline will be Thanks for Joining! To customize this, place a | (vertical pipe symbol, usually found on the right side of the keyboard) after the home page's normal Settings → Headline followed by the logged in headline. For example, this might look like Join Us Today!|Spread the Word!

View Demo

Layout Two

Buttons

If your site does not have a Pages → Defaults → Primary signup page assigned and you do have top navigation buttons, the default layout is big action buttons aligned to the left if you've implemented a background image/background video or the center if not.

NOTE: When using this layout, we highly recommend using a maximum of two buttons.

Options:
  • You can align your content to the left, center, or the right by going to your home page's Settings → Tags and giving it the tag layout form left, layout form center, or layout form right.
  • To change the button text or the page the buttons link to, use the instructions for the top navigation buttons.
  • By default, if someone is logged in, the page's headline will be Thanks for Joining! To customize this, place a | (vertical pipe symbol, usually found on the right side of the keyboard) after the home page's normal Settings → Headline followed by the logged in headline. For example, this might look like Join Us Today!|Spread the Word!

View Demo

Layout Three

Bottom Signup Form

Assuming your site has a Pages → Defaults → Primary signup page assigned, this layout is a signup form aligned to the center and positioned at the very bottom of your hero section.

To use this layout:

  1. Make sure this page has at least one background image or a background video.
  2. Go to your home page's Settings → Tags and give it the tag layout hero bottom signup.
Options:
  • You can align your form to the left or the right by going to your home page's Settings → Tags and giving it the tag layout form left or layout form right.
  • To change the actual signup form options (like whether or not it asks for Postal Code/Address), navigate to your site's primary signup page's → Signup settings and adjust the settings. If you don't know what your site's primary signup page is, find out by going to Pages → Defaults → Primary signup page.
  • By default, if someone is logged in, the page's headline will be Thanks for Joining! To customize this, place a | (vertical pipe symbol, usually found on the right side of the keyboard) after the home page's normal Settings → Headline followed by the logged in headline. For example, this might look like Join Us Today!|Spread the Word!

View Demo

Layout Four

Bottom Buttons

If your site does not have a Pages → Defaults → Primary signup page assigned and you do have top navigation buttons, this layout is big buttons aligned to the center and positioned at the very bottom of your hero section.

To use this layout:

  1. Make sure this page has at least one background image or a background video.
  2. Go to your home page's Settings → Tags and give it the tag layout hero bottom signup.

NOTE: When using this layout, we highly recommend using a maximum of two buttons.

Options:
  • You can align your content to the left or the right by going to your home page's Settings → Tags and giving it the tag layout form left or layout form right.
  • To change the button text or the page the buttons link to, use the instructions for the top navigation buttons.
  • By default, if someone is logged in, the page's headline will be Thanks for Joining! To customize this, place a | (vertical pipe symbol, usually found on the right side of the keyboard) after the home page's normal Settings → Headline followed by the logged in headline. For example, this might look like Join Us Today!|Spread the Word!

View Demo

Layout Five

Homepage Survey

This layout will have a big image on one side and a survey form on the other.

To use this layout:

  1. Go to your home page's Settings → Tags and give it the tag layout hero survey.
  2. Make sure this page has at least one background image.
  3. Next, either create a new survey page or choose an existing one. Go to that page's Settings → Tags and tag it layout hero survey survey.
  4. OPTIONAL: If you want the big image part of this section to link to a page when clicked, go to whatever page you want it to link to's Settings → Tags and tag it layout hero survey link.
  5. IMPORTANT: Paste the following code into Theme → Files → _nm-blocks.scss:@import "nm-block-two-block-homepage-survey-one";
  6. IMPORTANT: Paste the following code into Theme → Files → _nm-blocks-js.html:{% include "nm-block-two-block-homepage-survey-one-js" %}
Options:

By default, the survey is on the right and the image is on the left. You can align your form to the left and the image to the right by going to your home page's Settings → Tags and tagging it layout form left.

View Demo

Layout Six

Homepage Donate

This layout will have a big image on one side and a donation form on the other.

To use this layout:

  1. Go to your home page's Settings → Tags and give it the tag layout hero donate.
  2. Make sure this page has at least one background image.
  3. Go to your home page's or block folder's (if you have one) Subpages.
  4. Create a new Basic subpage with Name Hero Donate Content and Slug hero_donate_content with Status hidden.
  5. In the Settings → Headline field of this subpage, enter the headline for the donation form.
  6. OPTIONAL: In the Settings → Social media → Excerpt for Facebook, search engines for this subpage, enter the subheadline for the donation form.
  7. If you're linking to an external donation page, follow this step (7). If you're using a normal NationBuilder donation page, skip this step and go to step 8:
    1. In the Settings → Title of this subpage, paste in the appropriate URL for a pre-filled amount without the amount. For example, on the Anedot donation platform the pre-filled amount URL follows this format: https://causes.anedot.com/single?amount=5. Which means you'll want to paste in this: https://causes.anedot.com/single?amount=. On the ActBlue donation platform the pre-filled amount URL follows this format: https://secure.actblue.com/contribute/page/surefire?amount=25. Which means you'll want to paste in this: https://secure.actblue.com/contribute/page/surefire?amount=. You can find your specific donation processor's pre-filled amount URL format in their help and support area.
    2. Next, place a | (vertical pipe symbol, usually found on the right side of the keyboard) after this URL.
    3. After the pipe symbol, enter up to 4 comma-separated amounts. IMPORTANT: There should be no space between the | symbol and the amounts. Overall, the Title field should follow this format: url-for-prefilled-amount|25,50,100
    4. OPTIONAL: To create an additional donate button that links to your external donation page without a pre-selected amount:
      1. In the Settings → Headline field, after your donation form's headline (see step 3), place a | (vertical pipe symbol, usually found on the right side of the keyboard).
      2. Enter the button text.
      3. Enter a ~ (squiggle symbol) after the button text.
      4. Then paste in the full URL of your external donation page or, if your external donation page has an associated NationBuilder Redirect page, enter the slug of this page. IMPORTANT: There should be no space between the ~ symbol and the external donation page URL or the Redirect page's slug. Overall, the Headline field should follow this format: Quick Donate|Donate Today~donation-page-url
  8. Follow this step if you're using a normal NationBuilder donation page:
    1. Make sure you have a primary donation page created and assigned in Pages → Defaults → Primary donation page.
    2. OPTIONAL: To create an additional donate button that links to your donation page without a pre-selected amount:
      1. In the Settings → Headline field of this subpage, after your donation form's headline (see step 5), place a | (vertical pipe symbol, usually on the right side of the keyboard).
      2. Enter the button text. Overall, the Headline field should follow this format: Quick Donate|Donate Today
  9. OPTIONAL: If you want the big image part of this section to link to a page when clicked, go to whatever page you want it to link to's Settings → Tags and tag it layout hero donate link.
  10. IMPORTANT: Paste the following code into Theme → Files → _nm-blocks.scss:@import "nm-block-two-block-homepage-donate-one";
  11. IMPORTANT: Paste the following code into Theme → Files → _nm-blocks-js.html:{% include "nm-block-two-block-homepage-donate-one-js" %}
Options:

By default, the donation form is on the right and the image is on the left. You can align your form to the left and the image to the right by going to your home page's Settings → Tags and tagging it layout form left.

View Demo

Layout Seven

Slider

This layout will feature big slider images that rotate by fading in and out while linking to other pages on the site.

To use this layout:

  1. Go to your home page's Settings → Tags and give it the tag layout hero slider.
  2. Go to your home page's Settings → Featured content sliders to create your first slide.
  3. In the Label field, you have two options:
    1. Enter only the button text. In this case, the slide's headline will be automatically populated by the Page to feature page's Settings → Headline.
    2. Enter the slide's headline, followed by the | (vertical pipe symbol, usually found on the right side of the keyboard), followed by the button's text. For example, it might say Donate|Donate Today.
  4. In the Headline field, you have two options:
    1. Leave it blank - in this case, the slide's subheadline will be populated by the Page to feature page's → Settings → Social media → Excerpt for Facebook, search engines
    2. Enter the slide's subheadline.
  5. In the Page to feature field, enter the slug of the page the button will link to.
  6. Click Choose File and upload the slide's background image.
  7. Save.
  8. Repeat steps 3 through 7 for as many slides as you want.
  9. IMPORTANT: Paste the following code into Theme → Files → _nm-blocks.scss:@import "nm-block-hp-hero-slider-one";
  10. IMPORTANT: Paste the following code into Theme → Files → _nm-blocks-js.html:{% include "nm-block-hp-hero-slider-one-js" %}

View Demo

Layout Eight

Action Page Form

Follow the instructions for the Full Background or No Content action page layouts.

View Demo