Hero Section

You can choose from seven different hero section layouts. Except for Layout Seven: 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 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 for 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 → 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 on right of keyboard) after the non-logged in headline followed by the logged in headline. For example, this might look like Take Action Today!|Spread the Word!

Layout Two: Buttons

If your site does not have a Pages → Defaults → Primary signup page assigned AND you do have top navigation buttons in place, the default layout is big action buttons aligned to the left if you've implemented a background image 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 for right.
  • To change the button text or what 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 on right of keyboard) after the non-logged in headline followed by the logged in headline. For example, this might look like Take Action Today!|Spread the Word!

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. HOW GET THIS>>>TAGS???

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 for 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 → 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 on right of keyboard) after the non-logged in headline followed by the logged in headline. For example, this might look like Take Action Today!|Spread the Word!

Layout Four: 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 link.

Options:

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

Layout Five: 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 Subpages.
  4. Create a new subpage titled Hero Donate Content with slug hero_donate_content with Status hidden.
  5. In the Settings → Headline field, enter the headline for the donation form.
  6. In the Settings → Social media → Excerpt for Facebook, search engines, enter the subheadline for the donation form.
  7. If you're linking to an external donation page, follow the instructions under step 8. Else if you're using a normal NationBuilder donation page, follow the instructions under step 9.
  8. If you're linking to an external donation page, follow these instructions:
    1. In the Settings → Title, paste in the appropriate URL for a pre-filled amount WITHOUT the amount. For example, on Anedot 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 ActBlue 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=25. 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 on right of keyboard) after this URL.
    3. After the pipe symbol, enter up to 6 comma-separated amounts.
    4. Overall, the Title field should follow this format: url-for-prefilled-amount|5,10,25,50
    5. Steps vi. through x. are OPTIONAL: they will create an additional donate button that links to you donation page without a pre-selected amount.
    6. In the Settings → Headline field, after your donation form's headline (see step 5), place a | (vertical pipe symbol, usually on right of keyboard).
    7. Enter the button text.
    8. Enter a ~ (squiggly symbol) after the button text.
    9. Then paste in the URL of your external donation page.
    10. Overall, the Headline field would follow this format: Quick Donate|Donate Today~donation-page-url

  9. Else if you're using a normal NationBuilder donation page, follow these instructions:

    1. Make sure you have a primary donation page created and assigned in Pages → Defaults → Primary donation page.

    2. Steps iii. through vii. are OPTIONAL: they will create an additional donate button that links to you donation page without a pre-selected amount.

    3. In the Settings → Headline field, after your donation form's headline (see step 5), place a | (vertical pipe symbol).

    4. Enter the button text.

    5. Overall, the Headline field would follow this format: Quick Donate|Donate Today

    6. 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 link.

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 by going to your home page's Settings → Tags and tagging it layout form left.

Layout Six: Homepage Slider

This layout will feature big slider images that fade 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 the page's Settings → Featured Content Sliders.

  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 on right of keyboard), followed by the button 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'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 ad choose the slide's background image.

  7. Click Save featured content slider.

  8. Repeat steps 3 through 7 for as many slides as you want.

Layout Seven: Action Page Form

This layout features a full NationBuilder action page form (like a petition form, signup form, volunteer form, vote pledge form, etc).

To use this layout:

  1. Either create a new action page and or choose an existing action page and go to its Settings.
  2. Check Make this the home page.
  3. Give it at least one background image or a background video.
  4. In Settings → Tags, tag it layout full bg.

results matching ""

    No results matching ""