📌 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.
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==
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.
📌 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
Reference: code change screenshots
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.
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.
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
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.