theme guide

Header Section

The header section has the following;

  • Logo
  • Brief intro headline
  • Hero image
  • Call to action buttons/text

We'll step through how to add each of them, and create our petition page along the way!


First we need to add the logo to our site. This is the small image that appears just above the main homepage headline. If you don't have a logo, or don't want to include one, that is fine - Advance functions perfectly without one.

  1. Navigate to Site Settings > Logo and upload your logo;
Brief intro headline

Next is changing the page headline, but first, we have to add a petition page!

    1. Under your new site, go to +New Page, select Petition and name your page accordingly.
    2. Navigate to Settings > Page Settings, make this new petition page the homepage, and uncheck the "show sidebar" box (this will make sure the correct theme template is applied);
    3. Now, to change the headline text, we need to modify the default Headline text of your new page under Settings > Page Settings.
    4. This headline text has to follow a certain structure. So, you should copy and paste the following "headline template" into your headline section;

      Will you take this important action? | to make sure you're involved | Sign the petition

      We have had to structure things a little differently here. If you look back up at the full-page image with captions, you can see that we have multiple "page headlines" throughout the page in the different sections. Because this is a simple one page theme, we need to be able to list a lot of headlines on the one page, but NationBuilder pages only allow for one headline (rightly so). 

      So, how this works is that we have split up the "headlines" by using the "|" character (as you can see in the snippet above).

    5. Finally, to modify the intro headline, you should replace the Will you take this important action? text, with whatever headline you want (but keep the rest of the "headline template" in the headline, the code for the page knows how to separate the headlines because we use the character). It should look something like this;

Hero Image
  1. To add a hero image, all we have to do is upload the image under the Files tab for the new petition page;

    Just like the "headlines", we have lots of different "images" on the page. We will eventually add them all to this Files tab, and the Advance theme can tell which one is which because of how we name them.

    You should rename your desired header image to make sure it ends with "_header". For our example, we named the file "koala_header.png".
Call to action text

Lastly, we need to change the call to action text. This is the text we are talking about;

Advance will automatically pull in the current petition signatures number, along with the buttons.

  1. Now, the text in the above screenshot doesn't make a whole lot of sense, but it does look familiar. It is part of the text from the "headline template" we added above.
  2. The Advance theme will populate "17,492 have signed the petition ____________" and the blank space is the text from your "headline" that we entered earlier.
  3. So, to change this text, you should change the Headline text for this section, under your petition Page Settings