Content Blocks

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

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

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 Settings → Slug 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

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

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

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

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|donate. IMPORTANT: 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 here. NOTE: 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

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|donate. IMPORTANT: 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

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 here. NOTE: 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-donation-one" %}
9. Paste the following shortcode into Theme → Files → _nm-blocks.scss: @import "nm-block-block-button-donation-one";

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

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

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

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-donation-one" %}
8. Paste the following shortcode into Theme → Files → _nm-blocks.scss: @import "nm-block-block-button-donation-one";

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

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

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

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

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|vote. 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 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 here. NOTE: 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

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|vote. 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 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

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

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

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

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

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

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

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

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

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

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

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

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

Blog Post Cards With Featured Description

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-featured-one" %}
4. Paste the following shortcode into Theme → Files → _nm-blocks.scss: @import "nm-block-blog-post-cards-with-featured-one";
5. Paste the following shortcode into Theme → Files → _nm-blocks-js.html: {% include "nm-block-blog-post-cards-with-featured-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-featured-one.html

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

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

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

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

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

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

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

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

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 here. NOTE: 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

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

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

Blockquote Description

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. Go to this page's Settings → Social Media.
5. OPTIONAL: In the Excerpt for Facebook, search engines field, enter the block's subheadline.
6. OPTIONAL: 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|donate. IMPORTANT: There should be no space between the | symbol and the slug, or else the button won't work.
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-blockquote-one" %}
8. Paste the following shortcode into Theme → Files → _nm-blocks.scss: @import "nm-block-blockquote-one";

Options

To change the color of text to your theme's primary or secondary color, wrap the text with <span class="text-primary"></span> or <span class="text-secondary"></span> like so:

Lorem Ipsum <span class="text-primary">Dolor</span> Sit Amet

Lorem <span class="text-secondary">Ipsum Dolor Sit</span> Amet

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

Structure: _nm-block-blockquote-one.html

Styling: _nm-block-blockquote-one.scss

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

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

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

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

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 +  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

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

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 Settings → Social media → Excerpt 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

Image Gallery Description

Instructions coming soon.

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