Skip to main content
All CollectionsActionButton
How to enable the ActionButton advocacy page template in NationBuilder - Stock theme users
How to enable the ActionButton advocacy page template in NationBuilder - Stock theme users

Learn how to apply the advocacy template to a Momentum website.

Updated over a month ago

๐Ÿ“Œ Note: the following instructions will ONLY work for websites that are built on the Momentum theme in nations that have activated ActionButton. If you are not using the Momentum theme you will need to switch to the Momentum theme before this will work on your site.
โ€‹

How to enable Advocacy template for websites with a stock theme

If your Momentum theme has been customized please see this article for alternative instructions.

Using the default Basic page type template

If your Basic page type template has been customized please see below for additional instructions.

The advocacy template is automatically applied whenever a Basic page is saved with an ActionButton embedded through the editorโ€™s ActionButton widget. So all you need to do is:


โ€‹Step 1: Go to your ActionButton account and copy your ActionButton ID.
โ€‹

"Copy button ID" highlighted in menu within ActionButton's admin

Step 2: Paste it into the ActionButton widget in your Nation's content editor. The Button ID will be a series of letters and characters like this: SPK-SEBEQA==

Open ActionButton modal with Button ID input within NationBuilder's page content tab

Step 3: Voila! That's it, now this page will take on the attributes of the ActionButton Advocacy theme which removes all menu items and includes a great space for a background image, a few lines for a headline, and text. The page also places your button as the focal point on the page, especially when viewed on a mobile.

ActionButton Advocacy theme with text content listed on the left and the actionbutton shown on the right

๐Ÿ“Œ Please note only one ActionButton will display per template. The topmost ActionButton on the page will be used and all others will be ignored.

Using a custom Basic page type template

Step 1: Update existing theme files

In Files, find the following files and make changes as noted. Screenshots reflect changes made to stock Momentum theme files.

pages_show_basic.html

This change applies the ActionButton template to the Basic page type.

code updates are highlighted within pages_show_basic.html

Copy & Paste Code

<style>

/* hide body content while template loads */

.page-type-basic {

opacity: 0;

}

</style>

{% assign ignore_ab_template = false %}

{% assign ignore_ab_background = false %}

{% if page.tags_count > 0 %}

{% for tag in page.tags %}

{% if tag.name == "ignore ab template" %}

{% assign ignore_ab_template = true %}

{% break %}

{% endif %}

{% if tag.name == "ignore ab background" %}

{% assign ignore_ab_background = true %}

{% endif %}

{% endfor %}

{% endif %}

{% assign has_actionbutton = false %}

{% if page.basic.content contains 'iframe class="actionbutton"' %}

{% assign has_actionbutton = true %}

{% endif %}

{% if has_actionbutton and ignore_ab_template == false %}

{% include "actionbutton_basic_template", ignore_ab_background: ignore_ab_background %}

{% else %}

<script>

document.querySelector('.page-type-basic').style.opacity = 1;

</script>

{% endif %}

pages_show_basic_wide.html

This change applies the ActionButton template to the Basic (wide) page type.

code updates are highlighted within pages_show_basic_wide.html

Copy & Paste Code

<style>

/* hide body content while template loads */

.page-type-basic {

opacity: 0;

}

</style>

{% assign ignore_ab_template = false %}

{% assign ignore_ab_background = false %}

{% if page.tags_count > 0 %}

{% for tag in page.tags %}

{% if tag.name == "ignore ab template" %}

{% assign ignore_ab_template = true %}

{% break %}

{% endif %}

{% if tag.name == "ignore ab background" %}

{% assign ignore_ab_background = true %}

{% endif %}

{% endfor %}

{% endif %}

{% assign has_actionbutton = false %}

{% if page.basic.content contains 'iframe class="actionbutton"' %}

{% assign has_actionbutton = true %}

{% endif %}

{% if has_actionbutton and ignore_ab_template == false %}

{% include "actionbutton_basic_template", ignore_ab_background: ignore_ab_background %}

{% else %}

<script>

document.querySelector('.page-type-basic').style.opacity = 1;

</script>

{% endif %}

Step 2: Now follow the instructions listed under Using the default Basic page type template

How to change page content

Logo

Automatically pulled from site settings

Where to apply logo changes

To change all ActionButton Basic pages within a nation, add the relevant css declarative (i.e. display: none;) from below to .brand-logo within actionbutton-basic-template.scss [line 43].

To change a single ActionButton Basic page, create a custom template, add the relevant code block from below inside the <style></style> tags at the top of the template.

How to hide the logo:

section#actionbutton-basic-template .brand-logo {

display: none;

}

How to center the logo:

section#actionbutton-basic-template .brand-logo {

display: block;

margin-left: auto;

margin-right: auto;

}

How to resize the logo:

Adjust min-height and max-height values as needed

section#actionbutton-basic-template .brand-logo {

min-height: 32px;

max-height: 250px;

}

Headline

Settings > Page settings > Headline

Subhead, including embedded ActionButton

Content > Content

Background Image

How to to change background image:

Add new background image under Files

  • File name must contain the text: actionbutton-background

  • Ideal background size ratio is 16:9

  • Ideal image size is no smaller than 1920 pixels x 1080 pixels

How to remove the background image:

Add page tag: ignore ab background

How to disable the Advocacy template on a Basic page

Add page tag: ignore ab template

"ignore ab background" and "ignore ab template" page template tags highlighted

Troubleshooting

The page becomes unresponsive after an ActionButton is embedded.

In the editor, switch to the Source code view and make sure that the ActionButton iframe is enclosed within a single <p> tag. Remove any additional HTML elements, such as <span>, that wrap the iframe.

Did this answer your question?