Content Blocks

The following content blocks are available for use on our themes. Some price packages contain a specific subset of these content blocks while others come with all of them.

How to Use This Page

Each content block below contains a short title and description of the content block along with instructions for implementing it in your theme. Below that is a live demo of the content block.

As you implement the blocks on your website/theme, you'll start to notice patterns in implementation. This should mean they become progressively quicker to implement as you'll rely on the instructions less and less.

We add new content blocks all the time so check back often.

Big Cards

This block combines powerful imagery and links to internal pages on your website with social sharing functionality.

Use This Content Block

Big Cards


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings → Featured content sliders to create your first big card.
  3. In the Page to feature field, enter the slug of the page the big card's button will link to.
  4. In the Label field, you have two options:
    1. Enter only the button text. In this case, the headline that goes inside the image will be automatically populated by the Page to feature page's Settings → Headline.
    2. Enter the headline that goes inside the image, followed by the | symbol (vertical pipe bar, usually found on the right side of your keyboard), followed by the button text. For example, if you wanted the headline to say Donate and the button to say Donate Today, you’d enter Donate|Donate Today.
  5. In the Headline field, you have two options:
    1. Leave it blank. In this case, the text section will be populated by the Page to feature page’s Settings → Social Media → Excerpt for Facebook, search engines field if it has content or will not appear at all.
    2. Enter the verbiage for the text section.
  6. Click Choose File and upload the big card's background image.
  7. Save.
  8. Repeat Steps 3 through 7 for as many big cards as you want.
  9. OPTIONAL: If you want the block to have a headline, subheadline, or both:
    1. In the page's Settings → Headline field, enter a headline for this block.
    2. In the page's Settings → Social Media → Excerpt for Facebook, search engines, enter the block's subheadline.
  10. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of the page: {% subpage "your_slug_here" with "nm-block-big-cards-one" %}
  11. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-big-cards-one";

Options
  • If you want to hide the social sharing buttons, type no social into the page's Content → Content box.

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-big-cards-one.html

Styling: _nm-block-big-cards-one.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sed Ut Perspiciatis

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Medium Cards

This block combines powerful but not overpowering imagery and links to internal pages on your website. Can include social sharing buttons.

Use This Content Block

Medium Cards


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings → Featured content sliders to create your first medium card.
  3. In the Page to feature field, enter the slug of the page the medium card's button will link to.
  4. In the Label field, you have two options:
    1. Enter only the button text. In this case, the headline that goes inside the image will be automatically populated by the Page to feature page's Settings → Headline.
    2. Enter the headline that goes inside the image, followed by the | symbol (vertical pipe bar, usually found on the right side of your keyboard), followed by the button text. For example, if you wanted the headline to say Donate and the button to say Donate Today, you’d enter Donate|Donate Today.
  5. In the Headline field, you have two options:
    1. Leave it blank. In this case, the text section will be populated by the Page to feature page’s Settings → Social Media → Excerpt for Facebook, search engines field if it has content or will not appear at all.
    2. Enter the verbiage for the text section.
  6. Click Choose File and upload the medium card's background image.
  7. Save.
  8. Repeat Steps 3 through 7 for as many big cards as you want.
  9. Go to the page's Content.
  10. In the Content box, type medium cards.
  11. OPTIONAL: If you want the block to have a headline, subheadline, or both:
    1. In the page's Settings → Headline field, enter a headline for this block.
    2. In the page's Settings → Social Media → Excerpt for Facebook, search engines, enter the block's subheadline.
  12. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of the page: {% subpage "your_slug_here" with "nm-block-big-cards-one" %}
  13. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-big-cards-one";

Options
  • If you want to hide the social sharing buttons, type no social into the page's Content → Content box.

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-big-cards-one.html

Styling: _nm-block-big-cards-one.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Intro with Video

This is a good introductory block that combines a link to an internal website page with a piece of media.

Use This Content Block

Intro with Video


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the block's headline.
  4. In the Title field, enter the button's text followed by the | symbol (the vertical pipe symbol, usually found on the right side of your keyboard) followed by the SettingsSlug of the page the button will link to. For example, this might look like Donate Today|donate. IMPORTANT: There should be no space between the | symbol and the slug, or else the button won't work.
  5. Go to this page's Settings → Social Media.
  6. In the Excerpt for Facebook, search engines field, enter the block's subheadline.
  7. Go to this page's Content.
  8. In the Content box, place either an embed (like a video) or an image.
  9. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-intro-with-video-one" %}
  10. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-intro-with-video-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-intro-with-video-one.html

Styling: _nm-block-intro-with-video-one.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Learn More

Intro With Video and Donate

This is a good introductory block that combines easy donation functionality with a piece of media.

Use This Content Block

Intro With Video and Donate


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the block's headline.
  4. If you're linking to an external donation page, follow this step (4). If you're using a normal NationBuilder donation page, skip this step and go to step 5:
    1. In the Settings → Title, 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
  5. 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, after your donation form's headline (see step 3), 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
  6. Go to this page's Settings → Social Media.
  7. In the Excerpt for Facebook, search engines field, enter the block's subheadline.
  8. Go to this page's Content.
  9. In the Content box, place either an embed (like a video) or an image.
  10. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-intro-with-donate-one" %}
  11. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-intro-with-donate-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-intro-with-donate-one.html

Styling: _nm-block-intro-with-donate-one.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Intro With Donate Background Image

This is a good introductory block that serves as a strong yet digestible call to donate and design element.

Use This Content Block

Intro With Donate Background Image


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the block's headline.
  4. If you're linking to an external donation page, follow this step (4). If you're using a normal NationBuilder donation page, skip this step and go to step 5:
    1. In the Settings → Title, 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 3 or 6 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|5,10,25,50,250,2500
    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
  5. 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, after your donation form's headline (see step 3), 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
  6. Go to this page's Settings → Social Media.
  7. In the Excerpt for Facebook, search engines field enter the block's subheadline.
  8. To implement your background image, follow the steps here. NOTE: This block only displays one background image, not multiple.
  9. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-intro-with-donate-two" %}
  10. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-intro-with-donate-two";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-intro-with-donate-two.html

Styling: _nm-block-intro-with-donate-two.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Intro With Donate

This is a good introductory block that serves as a strong yet digestible call to donate and design element.

Use This Content Block

Intro With Donate


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the block's headline.
  4. If you're linking to an external donation page, follow this step (4). If you're using a normal NationBuilder donation page, skip this step and go to step 5:
    1. In the Settings → Title, 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 3 or 6 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|5,10,25,50,250,2500
    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
  5. 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, after your donation form's headline (see step 3), 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
  6. Go to this page's Settings → Social Media.
  7. In the Excerpt for Facebook, search engines field enter the block's subheadline.
  8. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-intro-with-donate-two" %}
  9. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-intro-with-donate-two";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-intro-with-donate-two.html

Styling: _nm-block-intro-with-donate-two.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.

Block Button With Background

The is a minimalist block that serves as a strong yet digestible call to action and design element.

Use This Content Block

Block Button With Background


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the block's headline.
  4. In the Title field, enter the button's text followed by the | symbol (the vertical pipe symbol, usually found on the right side of the keyboard) followed by the Settings → Slug of the page the button will link to. For example, this might look like Donate Today|donateIMPORTANT: There should be no space between the | symbol and the slug, or else the button won't work.
  5. OPTIONAL: Go to this page's Settings → Social Media.
  6. In the Excerpt for Facebook, search engines field enter the block's subheadline.
  7. To implement your background image, follow the steps hereNOTE: This block only displays one background image, not multiple.
  8. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-block-button-one" %}
  9. Paste the following code into Theme → Files → _nm-blocks.scss@import "nm-block-block-button-one";

Options

To have an image overlay with your theme's secondary color instead of the primary color, skip steps 8 and 9 above and follow the below steps (the only difference is changing one to two in both file names).

  1. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-block-button-two" %}
  2. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-block-button-two";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-block-button-one.html

Styling: _nm-block-block-button-one.scss

Or if you followed the above steps under Options:

Structure: _nm-block-block-button-two.html

Styling: _nm-block-block-button-two.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Join Today

Block Button

The is a minimalist block that serves as a strong yet digestible call to action and design element.

Use This Content Block

Block Button


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the block's headline.
  4. In the Title field, enter the button's text followed by the | symbol (the vertical pipe symbol, usually found on the right side of the keyboard) followed by the Settings → Slug of the page the button will link to. For example, this might look like Donate Today|donateIMPORTANT: There should be no space between the | symbol and the slug, or else the button won't work.
  5. OPTIONAL: Go to this page's Settings → Social Media.
  6. In the Excerpt for Facebook, search engines field enter the block's subheadline.
  7. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-block-button-one" %}
  8. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-block-button-one";

Options

To have a background color with your theme's secondary color instead of the primary color, skip steps 7 and 8 above and follow the below steps (the only difference is changing one to two in both file names).

  1. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-block-button-two" %}
  2. Paste the following code into Theme → Files → _nm-blocks.scss@import "nm-block-block-button-two";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-block-button-one.html

Styling: _nm-block-block-button-one.scss

Or if you followed the above steps under Options:

Structure: _nm-block-block-button-two.html

Styling: _nm-block-block-button-two.scss

Sed ut perspiciatis unde omnis iste natus error sit voluptatem.

Volunteer Today

Block Button Donate With Background

The is a minimalist block that serves as a strong yet digestible call to donate and design element.

Use This Content Block

Block Button Donate With Background


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the block's headline.
  4. If you're linking to an external donation page, follow this step (4). If you're using a normal NationBuilder donation page, skip this step and go to step 5:
    1. In the Settings → Title, 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 3 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
  5. 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, after your donation form's headline (see step 3), 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
  6. OPTIONAL: Go to this page's Settings → Social Media. In the Excerpt for Facebook, search engines field enter the block's subheadline.
  7. To implement your background image, follow the steps hereNOTE: This block only displays one background image, not multiple.
  8. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-block-button-donate-one" %}
  9. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-block-button-donate-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-block-button-donate-one.html

Styling: _nm-block-block-button-donate-one.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Button Donate

The is a minimalist block that serves as a strong yet digestible call to donate and design element.

Use This Content Block

Block Button Donate


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the block's headline.
  4. If you're linking to an external donation page, follow this step (4). If you're using a normal NationBuilder donation page, skip this step and go to step 5:
    1. In the Settings → Title, 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 3 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
  5. 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, after your donation form's headline (see step 3), 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
  6. OPTIONAL: Go to this page's Settings → Social Media. In the Excerpt for Facebook, search engines field enter the block's subheadline.
  7. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-block-button-donate-one" %}
  8. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-block-button-donate-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-block-button-donate-one.html

Styling: _nm-block-block-button-donate-one.scss

Sed ut perspiciatis unde omnis iste natus error sit voluptatem.

Icons Text

This block displays an icon, a headline, a text block, and an optional button. Good introductory block.

Use This Content Block

Icons Text


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings → Featured content sliders to create your first icon and text block.
  3. In the Label field, enter the headline that will appear beneath the icon.
  4. OPTIONAL: If you want a button to display underneath the text: In the Label field after the label you entered in Step 3, enter the | symbol (vertical pipe bar, usually found on the right side of your keyboard), followed by the button text.
  5. In the Headline field, enter the main text that will display below the headline.
  6. In the Page to feature field:
    1. If you have a button displaying underneath the text, enter the slug of the page the button will link to.
    2. If you do not have a button displaying, enter the slug of this page (the page you created in Step 1).
  7. Save.
  8. Repeat Steps 3 through 7 for as many icon and text blocks as you want. IMPORTANT: This should be divisible by 3 or it'll look weird.
  9. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of the page: {% subpage "your_slug_here" with "nm-block-icons-text-one" %}
  10. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-icons-text-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-icons-text-one.html

Styling: _nm-block-icons-text-one.scss

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.

Donate Today

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Volunteer Today

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Learn More

Countdown with Background

The block displays a countdown to an important event along with and optional call to action button related to that event.

Use This Content Block

Countdown with Background


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the countdown's purpose (i.e. Days Left to Vote).
  4. OPTIONAL: To display a call to action button in this block:
    1. In the Title field, enter the button's text.
    2. Then place a | symbol (the vertical pipe symbol, usually found on the right side of the keyboard).
    3. Then enter the Settings → Slug of the page the button will link to. For example, this might look like Vote Today|voteIMPORTANT: There should be no space between the | symbol and the slug, or else the button won't work.
  5. Go to this page's Settings → Social Media.
  6. In the Excerpt for Facebook, search engines field enter the countdown's Eastern Standard Time end date in the following format:
    If you were counting down to March 4th, 2018 at 9:30am PST (NOTE the accommodation of the time difference): 2018/03/04 06:30:00. Another example for October 22nd, 2018 at 9:05pm EST: 2018/10/22 21:05:00
  7. To implement your background image, follow the steps hereNOTE: This block only displays one background image, not multiple.
  8. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-countdown-one" %}
  9. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-countdown-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-countdown-one.html

Styling: _nm-block-countdown-one.scss

Days Left to Vote


Vote Now

Countdown

The block displays a countdown to an important event along with and optional call to action button related to that event.

Use This Content Block

Countdown


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the countdown's purpose (i.e. Days Left to Vote).
  4. OPTIONAL: To display a call to action button in this block:
    1. In the Title field, enter the button's text.
    2. Then place a | symbol (the vertical pipe symbol, usually found on the right side of the keyboard).
    3. Then enter the Settings → Slug of the page the button will link to. For example, this might look like Vote Today|voteIMPORTANT: There should be no space between the | symbol and the slug, or else the button won't work.
  5. Go to this page's Settings → Social Media.
  6. In the Excerpt for Facebook, search engines field enter the countdown's Eastern Standard Time end date in the following format:
    If you were counting down to March 4th, 2018 at 9:30am PST (NOTE the accommodation of the time difference): 2018/03/04 06:30:00. Another example for October 22nd, 2018 at 9:05pm EST: 2018/10/22 21:05:00
  7. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-countdown-one" %}
  8. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-countdown-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-countdown-one.html

Styling: _nm-block-countdown-one.scss

Days Left to Vote


Vote Now

Hero Slider

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

Use This Content Block

Hero Slider


NOTE: If you're using this block as the hero section on your home page, use the instructions here. Otherwise:

  1. Create a Basic page with Status hidden.
  2. Go to the 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. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-hp-hero-slider-one" %}
  10. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-hp-hero-slider-one";
  11. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-hp-hero-slider-one-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-hp-hero-slider-one.html

Styling: _nm-block-hp-hero-slider-one.scss

Slider Options: _nm-block-hp-hero-slider-one-js.html

Donate

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Donate Today

Volunteer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Volunteer Today

Endorsements

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Endorse Today

Petition

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sign the Petition

Sign Up

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Join Today

Slider

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

Use This Content Block

Slider


NOTE: If you're using this block as the hero section on your home page, use the instructions here. Otherwise:

  1. Create a Basic page with Status hidden.
  2. Go to the 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. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-hero-slider-one" %}
  10. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-hero-slider-one";
  11. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-hero-slider-one-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-hero-slider-one.html

Styling: _nm-block-hero-slider-one.scss

Slider Options: _nm-block-hero-slider-one-js.html

Donate

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Donate Today

Volunteer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Volunteer Today

Endorsements

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Endorse Today

Petition

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sign the Petition

Sign Up

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Join Today

Picture and Survey

This is an elegant action block combining easy opinion and information gathering functionality with powerful imagery.

Use This Content Block

Picture and Survey


NOTE: If you're using this block as the hero section on your home page, use the instructions here. Otherwise:

  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the image's headline.
  4. OPTIONAL: Go to this page's Settings → Social Media.
  5. In the Excerpt for Facebook, search engines, field enter the image's subheadline.
  6. Make sure this page has at least one background image. This block can accommodate multiple.
  7. Next, either create a new survey page or choose an existing one.
  8. Go to this survey page's Settings → Tags and tag it layout hero survey survey.
  9. OPTIONAL: If you want the image part of this block 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.
  10. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-two-block-homepage-survey-one" %}
  11. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-two-block-homepage-survey-one";
  12. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-two-block-homepage-survey-one-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-two-block-homepage-survey-one.html

Styling: _nm-block-two-block-homepage-survey-one.scss

Slider Options: _nm-block-two-block-homepage-survey-one-js.html

Lorem ipsum dolor sit amet, consectetur adipiscing elit?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.

Picture and Donate

This is an elegant action block combining easy donation functionality with powerful imagery.

Use This Content Block

Picture and Donate


NOTE: If you're using this block as the hero section on your home page, use the instructions here. Otherwise:

  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings.
  3. In the Headline field, enter the image's headline.
  4. OPTIONAL: Go to this page's Settings → Social Media. In the Excerpt for Facebook, search engines field enter the image's subheadline.
  5. Make sure this page has at least one background image. This block can accommodate multiple.
  6. Go to your this page's Subpages.
  7. Create a new Basic subpage with Name "Hero Donate Content" and Slug "hero_donate_content" with Status hidden.
  8. In this subpage's Settings → Headline field, enter the headline for the donation form.
  9. In this subpage's Settings → Social media → Excerpt for Facebook, search engines, enter the subheadline for the donation form.
  10. If you're linking to an external donation page, follow this step (10). If you're using a normal NationBuilder donation page, skip this step and go to step 11:
    1. In the Settings → Title, 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 6 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|5,10,25,50,250,2500
    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
  11. 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, after your donation form's headline (see step 3), 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
  12. 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.
  13. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-two-block-homepage-donate-one" %}
  14. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-two-block-homepage-donate-one";
  15. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-two-block-homepage-donate-one-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-two-block-homepage-donate-one.html

Styling: _nm-block-two-block-homepage-donate-one.scss

Slider Options: _nm-block-two-block-homepage-donate-one-js.html

Image Block

This block contains one or more powerful, full-width images.

Use This Content Block

Image Block


  1. Create a Basic page with Status hidden.
  2. To implement your background images, follow the steps here. This block accommodates multiple.
  3. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-full-width-picture-one" %}
  4. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-full-width-picture-one";
  5. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-full-width-picture-one-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-full-width-picture-one.html

Styling: _nm-block-full-width-picture-one.scss

Material Cards

This block shows excerpt-type cards that links to internal pages on your website.

Use This Content Block

Material Cards


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings → Featured content sliders to create your first card.
  3. In the Label field, enter the card's headline.
  4. In the Headline field, enter the card's verbiage.
  5. In the Page to feature field, enter the slug of the page the card will link to.
  6. Click Choose File and upload the card's image.
  7. Save.
  8. Repeat Steps 3 through 7 for as many cards as you want.
  9. OPTIONAL: If you want the block to have a headline, subheadline, or both:
    1. In the page's Settings → Headline field, enter a headline for this block.
    2. In the page's Settings → Social Media → Excerpt for Facebook, search engines, enter the block's subheadline.
  10. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-material-cards-one" %}
  11. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-material-cards-one";
  12. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-material-cards-one-js" %}

NOTE: The cards may not display in the exact order you have them arranged in the backend. This is because the code is taking into account both the order you have them arranged and their individual heights.


For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-material-cards-one.html

Styling: _nm-block-material-cards-one.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Mixitup

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Use This Content Block

Mixitup


  1. Create a Basic page with Status hidden.
  2. Go to the page's Content.
  3. In the Content box, enter your filters in the following format: {{ filter one title }}|{{ filter one page type slug }},{{ filter two title }}|{{ filter two page type slug }},...
    For example:
    Endorsements|endorsement,Petitions|petition,Volunteering|volunteer_signup
    NOTE: The page type slugs are simply the page type names lowercased and with spaces replaced by underscores. Find a list of the page type names here.
  4. Go to this page's Subpages.
  5. Create the pages that will show up in the widget.
  6. OPTIONAL: If you want the block to have a headline, subheadline, or both:
    1. In the page's Settings → Headline field, enter a headline for this block.
    2. In the page's Settings → Social Media → Excerpt for Facebook, search engines, enter the block's subheadline.
  7. OPTIONAL: If you want to be able to search/filter by the page's name, type search into the block page's Settings → Title field, replacing what's there.
  8. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-mixitup-one" %}
  9. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-mixitup-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-mixitup-one.html

Styling: _nm-block-mixitup-one.scss

Small Cards

This is a sleek, minimalist block that links to important internal pages on your website.

Use This Content Block

Small Cards


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings → Featured content sliders to create your first card.
  3. In the Label field, enter the card's headline.
  4. In the Page to feature field, enter the slug of the page the card will link to.
  5. Click Choose File and upload the card's background image.
  6. Save.
  7. Repeat Steps 3 through 6 for as many cards as you want.
  8. OPTIONAL: If you want the block to have a headline, subheadline, or both:
    1. In the page's Settings → Headline field, enter a headline for this block.
    2. In the page's Settings → Social Media → Excerpt for Facebook, search engines, enter the block's subheadline.
  9. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-small-cards-one" %}
  10. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-small-cards-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-small-cards-one.html

Styling: _nm-block-small-cards-one.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Wide Small Cards

This is a sleek, minimalist block that links to important internal pages on your website. It takes slightly longer headlines than the Small Cards block.

Use This Content Block

Wide Small Cards


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings → Featured content sliders to create your first card.
  3. In the Label field, enter the card's headline.
  4. In the Page to feature field, enter the slug of the page the card will link to.
  5. Click Choose File and upload the card's background image.
  6. Save.
  7. Repeat Steps 3 through 6 for as many cards as you want.
  8. OPTIONAL: If you want the block to have a headline, subheadline, or both:
    1. In the page's Settings → Headline field, enter a headline for this block.
    2. In the page's Settings → Social Media → Excerpt for Facebook, search engines, enter the block's subheadline.
  9. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-feed-cards-one" %}
  10. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-feed-cards-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-feed-cards-one.html

Styling: _nm-block-feed-cards-one.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Call to Action Boxes

This is a sleek, minimalist block that links to important internal pages on your website.

Use This Content Block

Call to Action Boxes


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings → Featured content sliders to create your first card.
  3. In the Label field, enter the card's headline.
  4. In the Page to feature field, enter the slug of the page the card will link to.
  5. Click Choose File and upload the card's background image.
  6. Save.
  7. Repeat Steps 3 through 6 for as many cards as you want.
  8. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-cta-cards-one" %}
  9. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-cta-cards-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-cta-cards-one.html

Styling: _nm-block-cta-cards-one.scss

Alternating Picture and Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Use This Content Block

Alternating Picture and Text


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings → Featured content sliders to create your first section.
  3. In the Page to feature field, enter the slug of the page the button will link to.
  4. In the Label field, you have two options:
    1. Enter only the button's text. In this case, the headline of the text section will be automatically populated by the Page to feature page's Settings → Headline.
    2. Enter the headline of the text section, followed by the | symbol (vertical pipe bar, usually found on the right side of the keyboard), followed by the button's text. If you wanted the headline to say Donate and the button to say Donate Today, you’d put Donate|Donate Today.
  5. In the Headline field, you have two options:
    1. Leave it blank. In this case, the text section will be populated by the Page to feature page’s Settings → Social Media → Excerpt for Facebook, search engines field.
    2. Enter the verbiage for the text section.
  6. Click Choose File and upload the section's image.
  7. Save.
  8. Repeat Steps 3 through 7 for as many sections as you want.
  9. OPTIONAL: If you want the block to have a headline, subheadline, or both:
    1. In the page's Settings → Headline field, enter a headline for this block.
    2. In the page's Settings → Social Media → Excerpt for Facebook, search engines, enter the block's subheadline.
  10. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-pictures-text-one" %}
  11. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-pictures-text-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-pictures-text-one.html

Styling: _nm-block-pictures-text-one.scss

Lorem Ipsum Dolor

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

About

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua do eiusmod tempor incididunt.

Learn More

Events

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua do eiusmod tempor incididunt.

View All Events

Volunteer

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua do eiusmod tempor incididunt.

Volunteer Today

Donate

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua do eiusmod tempor incididunt.

Donate Today

Video Blog

This block displays your latest videos.

Use This Content Block

Video Blog


  1. Make a Video Blog if you haven't already or choose an existing one. [For instructions on creating a new one, click here and scroll down to Blog Page Types.]
  2. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your video blog page: {% subpage "your_slug_here" with "nm-block-video-blog-one" %}
  3. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-video-blog-one";
  4. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-video-blog-one-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-video-blog-one.html

Styling: _nm-block-video-blog-one.scss

Videos

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Demo Video Eleven

Demo Video Twelve

Demo Video Nine

Demo Video Eight

Demo Video Ten

Demo Video Seven

Demo Video Four

Demo Video Six

Demo Video Two

Demo Video Three

Blog Post Cards With Pictures & Text

This block displays excerpts of your latest blog posts with or without background images. It's great for a Latest News or Updates section.

Use This Content Block

Blog Post Cards With Pictures & Text


  1. Make a blog page if you haven't already or choose an existing one.
  2. OPTIONAL: Give your individual blog posts background images that will display in the cards.
  3. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your blog page: {% subpage "your_slug_here" with "nm-block-blog-post-cards-with-pictures-one" %}
  4. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-blog-post-cards-with-pictures-one";
  5. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-blog-post-cards-with-pictures-one-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-blog-post-cards-with-pictures-one.html

Styling: _nm-block-blog-post-cards-with-pictures-one.scss

Updates

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum Dolor Sit Amet Ut

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem Ipsum Sit Amet Dolor Ut Consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut Enim Ad minima Veniam, Quis Nostrum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Ut Enim Ad Minim Veniam, Quis Nostrud Exercitation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sed Ut Perspiciatis Unde Omnis Iste Natus Error

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Duis Aute Irure Dolor In Reprehenderit In Voluptate Velit Esse Cillum Dore

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Lorem Ipsum Dolor Sit Ame Elit, Sed Do Eiusmod Dolore Magna Aliqua

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.

Excepteur Sint Occaecat Cupidatat Non Proident, Sunt In Culpa Qi Officia Deserunt Mollit Anim Id Est Laborum

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit.

Amet Sit Lorem Dolor Se Tempor

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blog Post Cards With Pictures

This block displays your latest blog posts with or without background images. It's great for a Latest News or Updates section.

Use This Content Block

Blog Post Cards With Pictures


  1. Make a blog page if you haven't already or choose an existing one.
  2. OPTIONAL: Give your individual blog posts background images that will display in the cards.
  3. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your blog page: {% subpage "your_slug_here" with "nm-block-blog-post-cards-with-pictures-two" %}
  4. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-blog-post-cards-with-pictures-two";
  5. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-blog-post-cards-with-pictures-two-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-blog-post-cards-with-pictures-two.html

Styling: _nm-block-blog-post-cards-with-pictures-two.scss

Blog Post Cards Big

This block displays excerpts of your latest blog posts. It's great for a Latest News or Updates section.

Use This Content Block

Blog Post Cards Big


  1. Make a blog page if you haven't already or choose an existing one.
  2. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your blog page: {% subpage "your_slug_here" with "nm-block-blog-post-cards-one" %}
  3. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-blog-post-cards-one";
  4. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-blog-post-cards-one-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-blog-post-cards-one.html

Styling: _nm-block-blog-post-cards-one.scss

Updates

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem Ipsum Dolor Sit Amet Ut

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem Ipsum Sit Amet Dolor Ut Consectetur

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Ut Enim Ad minima Veniam, Quis Nostrum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Ut Enim Ad Minim Veniam, Quis Nostrud Exercitation

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Sed Ut Perspiciatis Unde Omnis Iste Natus Error

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Duis Aute Irure Dolor In Reprehenderit In Voluptate Velit Esse Cillum Dore

Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Lorem Ipsum Dolor Sit Ame Elit, Sed Do Eiusmod Dolore Magna Aliqua

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem.

Excepteur Sint Occaecat Cupidatat Non Proident, Sunt In Culpa Qi Officia Deserunt Mollit Anim Id Est Laborum

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit.

Amet Sit Lorem Dolor Se Tempor

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Blog Post Cards Small

This block discreetly displays excerpts of your latest blog posts. It's great for a Latest News or Updates section.

Use This Content Block

Blog Post Cards Small


  1. Make a blog page if you haven't already or choose an existing one.
  2. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your blog page: {% subpage "your_slug_here" with "nm-block-blog-post-cards-two" %}
  3. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-blog-post-cards-two";
  4. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-blog-post-cards-two-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-blog-post-cards-two.html

Styling: _nm-block-blog-post-cards-two.scss

Blog Post Excerpts

This block displays excerpts of your latest blog posts. It's great for a Latest News or Updates section.

Use This Content Block

Blog Post Excerpts


  1. Make a blog page if you haven't already or choose an existing one.
  2. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your blog page: {% subpage "your_slug_here" with "nm-block-blog-post-excerpts-one" %}
  3. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-blog-post-excerpts-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-blog-post-excerpts-one.html

Styling: _nm-block-blog-post-excerpts-one.scss

News

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Demo Post One

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Demo Post Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Demo Post Three

mega-theme-demo-sydney-3.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Demo Post Four

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Demo Post Five

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Calendar Excerpts

This block displays excerpts of your upcoming events.

Use This Content Block

Calendar Excerpts


  1. Make a Calendar page if you haven't already or choose an existing one and populate it with at least one event.
  2. Paste the following code into Theme → Files → _nm-blocks.html, replacing your_slug_here with the Settings → Slug of your calendar page: {% subpage "your_slug_here" with "nm-block-calendar-excerpts-one" %}
  3. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-calendar-excerpts-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-calendar-excerpts-one.html

Styling: _nm-block-calendar-excerpts-one.scss

Events

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Official Event
Thursday, April 05, 2018 at 06:00 PM
La Tour Eiffel in Paris, France

Demo Event Three

mega-theme-demo-eiffel-tower-2-cropped.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Official Event
Thursday, April 05, 2018 at 06:00 PM
UK Parliament in London, United Kingdom

Demo Event Two

mega-theme-demo-big-ben-6-cropped.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Official Event
Thursday, April 05, 2018 at 06:00 PM
Parliament of Canada in Ottawa, ON, Canada

Demo Event Five

mega-theme-demo-house-of-commons-1-cropped.jpg

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

More Events

Map With Sub-Calendars

This block is for when you have a master calendar with at least a few subcalendars. The map will display all upcoming events with defined locations while the list will display button links to the subcalendars.

Use This Content Block

Map With Sub-Calendars


  1. Make a Calendar page if you haven't already or choose an existing one.
  2. Under this page's Calendar settings, make sure to check Include all events, not just the ones under this page.
  3. Go to this page's Events & subpages → Subpages → New subpage.
  4. Create a sub-calendar, which is simply a Calendar page that is a subpage of the "master" calendar page.
  5. Repeat this so you have at least a few sub-calendars.
  6. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your calendar page: {% subpage "your_slug_here" with "nm-block-map-subcalendars" %}
  7. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-map-subcalendars";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-map-subcalendars.html

Styling: _nm-block-map-subcalendars.scss

Find events near you

Find events near you

Signup Bar With Background

This block contains a background image and signup form - we love using it near the footer of a website as a final call to action.

Use This Content Block

Signup Bar With Background


  1. Create a signup page if you haven't already or choose an existing one.
  2. This signup page's Settings → Headline will be the block's headline.
  3. OPTIONAL: The Settings → Social media → Excerpt for Facebook, search engines will be the block's subheadline.
  4. To implement your background image, follow the steps hereNOTE: This block only displays one background image, not multiple.
  5. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your signup page: {% subpage "your_slug_here" with "nm-block-footer-signup-one" %}
  6. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-footer-signup-one";

Options

You can also dynamically use your site's Pages → Defaults → Primary signup page as the signup page that populates this block. This is the option we use instead of step 5 above:

  1. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    {% subpage site.signup_page.slug with "nm-block-footer-signup-one" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-footer-signup-one.html

Styling: _nm-block-footer-signup-one.scss

Signup Bar

This block contains is a full-width signup bar, perfect for layouts that don't use a signup form in the homepage hero section.

Use This Content Block

Signup Bar


  1. Create a signup page if you haven't already or choose an existing one.
  2. The Settings → Headline will be the block's headline.
  3. OPTIONAL: The Settings → Social media → Excerpt for Facebook, search engines will be the block's subheadline.
  4. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your signup page: {% subpage "your_slug_here" with "nm-block-signup-bar-one" %}
  5. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-signup-bar-one";

Options

You can also dynamically use your site's Pages → Defaults → Primary signup page as the signup page that populates this block. This is the option we use instead of step 4 above:

  1. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    {% subpage site.signup_page.slug with "nm-block-signup-bar-one" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-signup-bar-one.html

Styling: _nm-block-signup-bar-one.scss

Signup Bar No Content

This is an extremely minimal signup form that takes only email as an input.

Use This Content Block

Signup Bar No Content


  1. Create a signup page if you haven't already or choose an existing one.
  2. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your signup page: {% subpage "your_slug_here" with "nm-block-signup-bar-two" %}
  3. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-signup-bar-two";

Options

You can also dynamically use your site's Pages → Defaults → Primary signup page as the signup page that populates this block. This is the option we use instead of step 2 above:

  1. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    {% subpage site.signup_page.slug with "nm-block-signup-bar-two" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-signup-bar-two.html

Styling: _nm-block-signup-bar-two.scss

Quotes Slider

This is a great block for presenting social proof in the form of testimonials or otherwise presenting quotes related to your cause or campaign.

Use This Content Block

Quotes Slider


  1. Create a Basic page with Status hidden.
  2. Go to the page's Content.
  3. In the Content box:
    1. Enter the quote.
    2. If the quote has an attribution, put a squiggle ~ (squiggle symbol) after the quote.
    3. Enter the attribution name.
    4. If you have another quote, put a | symbol (usually found on the right side of the keyboard).
    5. Repeat steps a through d for as many quotes as you want.

      Here's what this looks like (feel free to copy and paste this, replacing the demo content with your own):

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      ~
      Elon Musk, CEO - SpaceX
      |
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      ~
      Steve Jobs, Founder - Apple Inc.
      |
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
      ~
      Bill Gates, Founder - Microsoft Corporation
  4. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-quotes-slider-one" %}
  5. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-quotes-slider-one";
  6. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-quotes-slider-one-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-quotes-slider-one.html

Styling: _nm-block-quotes-slider-one.scss

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Elon Musk, CEO - SpaceX

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Steve Jobs, Founder - Apple Inc.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Bill Gates, Founder - Microsoft Corporation

Logos Color

This block allows you to cleanly display logos. Great for "As Seen In" or "Our Sponsors" type content.

Use This Content Block

Logos Color


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings → Featured content sliders to create your first logo.
  3. In the Label field, enter something descriptive like the name of the organization the logo belongs to. This will not show up on the site.
  4. OPTIONAL: If you want the logo to function as a link: In the Headline field, enter the URL the logo will link out to. For example, if the logo is Facebook's logo and you're linking to Facebook, you'd enter https://www.facebook.com/. IMPORTANT: Don't forget to include https:// or http:// at the front.
  5. In the Page to feature field, enter the slug of the page you created in Step 1.
  6. Save.
  7. Repeat Steps 3 through 6 for as many logos as you want.
  8. OPTIONAL: If you want the block to have a headline, subheadline, or both:
    1. In the page's Settings → Headline field, enter a headline for this block.
    2. In the page's Settings → Social Media → Excerpt for Facebook, search engines, enter the block's subheadline.
  9. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of the page: {% subpage "your_slug_here" with "nm-block-logos-one" %}
  10. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-logos-one";

Options
  • Small Logos: If you want the logos to be small, type small logos into the page's Content → Content box.

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-logos-one.html

Styling: _nm-block-logos-one.scss

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Logos Grayscale

This block allows you to cleanly display logos that start as grayscale and return to their normal color on hover. Great for more uniform looking "As Seen In" or "Our Sponsors" type content.

Use This Content Block

Logos Grayscale


  1. Create a Basic page with Status hidden.
  2. Go to this page's Settings → Featured content sliders to create your first logo.
  3. In the Label field, enter something descriptive like the name of the organization the logo belongs to. This will not show up on the site.
  4. OPTIONAL: If you want the logo to function as a link: In the Headline field, enter the URL the logo will link out to. For example, if the logo is Facebook's logo and you're linking to Facebook, you'd enter https://www.facebook.com/. IMPORTANT: Don't forget to include https:// or http:// at the front.
  5. In the Page to feature field, enter the slug of the page you created in Step 1.
  6. Save.
  7. Repeat Steps 3 through 6 for as many logos as you want.
  8. OPTIONAL: If you want the block to have a headline, subheadline, or both:
    1. In the page's Settings → Headline field, enter a headline for this block.
    2. In the page's Settings → Social Media → Excerpt for Facebook, search engines, enter the block's subheadline.
  9. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of the page: {% subpage "your_slug_here" with "nm-block-logos-two" %}
  10. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-logos-two";

Options
  • Small Logos: If you want the logos to be small, type small logos into the page's Content → Content box.

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-logos-two.html

Styling: _nm-block-logos-two.scss

Twitter Slider

This slider is an elegant way to display your latest Tweets. It offers native replying, retweeting, and favoriting functionality directly on the widget.

Use This Content Block

Twitter Slider


  1. Make sure your Twitter account is connected to your website properly.
  2. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    {% include "nm-block-twitter-slider-one" %}
  3. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-twitter-slider-one";
  4. Paste the following shortcode into Theme → Files → _nm-blocks-js.html{% include "nm-block-twitter-slider-one-js" %}

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-twitter-slider-one.html

Styling: _nm-block-twitter-slider-one.scss

Social Bar

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Use This Content Block

Social Bar


  1. Create a Basic page with Status hidden.
  2. Go to this page's Content.
  3. Input your social media accounts according to the following format (feel free to copy and paste the demo content, replacing it with your own):

    facebook + Like Nation Media ~https://www.facebook.com/#
    |
    twitter + Follow @NationMedia ~https://twitter.com/#
    |
    youtube.com +  Watch Nation Media ~https://youtube.com/#
    |
    email + Contact Us ~contact


    NOTE: If you’re linking to a page within the website, just put the slug, like in the last example with contact.

    NOTE: There is no space between the ~ (squiggle symbol) and the link/slug.

  4. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-social-bar-one" %}
  5. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-social-bar-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-social-bar-one.html

Styling: _nm-block-social-bar-one.scss

Powered By

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Use This Content Block

Powered By


This block will display a list of your most recent supporters that have explicitly authorized your nation’s use of their Facebook information. It is limited to these supporters for technical reasons. What this means is you should only use this block if you expect lots of supporters to explicitly authorize your nation’s use of their Facebook information.

  1. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    {% include "nm-block-powered-by-one" %}
  2. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-powered-by-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-powered-by-one.html

Styling: _nm-block-powered-by-one.scss

Powered by People Like You

Instagram Feed

This block enables you to display your latest Instagram content in a minimalist and elegant fashion.

Use This Content Block

Instagram Feed


  1. Go to https://lightwidget.com/.
  2. At the top right, click the big Log In button.
  3. Follow the appropriate prompts, if any.
  4. It might make you log in again. If so, do it and this time you'll be taken to the widget creation page.
  5. Back at the widget creation page, create your widget with 6 columns (not required, just recommended) and either 1 or 2 rows.
  6. Select your image hover effect.
  7. Make the space between pictures 0 (not required, just recommended).
  8. Check Use image preloader.
  9. Click Add.
  10. Change the max-width to 991.
  11. Make the columns 4 and the rows 3 (NOTE: Make sure the number of pictures in each version is the same. So if you did 6 and 2 in the first version and 4 and 3 in the second, 6x2=12 and 4x3=12, so that’s good. But if you have 6x1=6 and 4x3=12, that would not be good and you’d want to adjust accordingly.)
  12. Choose the same hover effect.
  13. Make the spacing 0 again (not required, just recommended).
  14. Check Use the image preloader again.
  15. Repeat steps 9 through 14 one more time, changing the max-width to 767 and making the columns 2 and the rows 6 (again, bearing in mind that all versions should have the same number of pictures).
  16. When finished, click Preview.
  17. Then click Get Code.
  18. Copy this code from where <iframe begins. See the example below, where you’d copy the bold and discard the non-bold (NOTE: if you don’t discard the non-bold when pasting it, the widget won't work):

    <!-- LightWidget WIDGET --><script src="//lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/6588d362044bf65e87e3f66218e89ae05c67f88.html" id="lightwidget_6533f36204" name="lightwidget_65887d6204" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>

  19. Create a Basic page with Status hidden.
  20. OPTIONAL: If you want the block to have a headline, subheadline, or both:
    1. In the page's Settings → Headline field, enter a headline for this block. If you want the headline to link somewhere (like the actual Instagram page), paste the URL in this page's Settings → Title field.
    2. If you want the block to have a subheadline, go to the page's Content → Content and enter your content. It will display as plain text, so if you bold something or implement other formatting, it won't show up.
  21. Paste the code you copied in step 18 into the page’s SettingsSocial mediaExcerpt for Facebook, search engines field.
  22. Save.
  23. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    replacing your_slug_here with the Settings → Slug of your page, replacing your_slug_here with the Settings → Slug of your page: {% subpage "your_slug_here" with "nm-block-instagram-light-widget-one" %}
  24. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-instagram-light-widget-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-instagram-light-widget-one.html

Styling: _nm-block-instagram-light-widget-one.scss

 

@NationMedia

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Social Feeds

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Use This Content Block

Social Feeds


  1. Make sure your Facebook and Twitter accounts are connected to your website properly.
  2. Paste the following shortcode into one of the following Theme → Files (if you're not sure which file you should paste into, see Content Blocks Placement):
    • _nm-hp-blocks-before-content.html
    • _nm-hp-blocks-after-content.html
    • _nm-ip-blocks-before-content.html
    • _nm-ip-blocks-after-content.html
    • _nm-ap-blocks.html
    {% include "nm-block-social-feeds-one" %}
  3. Paste the following shortcode into Theme → Files → _nm-blocks.scss@import "nm-block-social-feeds-one";

For those who wish to edit code, the following block files can be found in Theme → Files:

Structure: _nm-block-social-feeds-one.html

Styling: _nm-block-social-feeds-one.scss