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 donation 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 donation page!

    1. Under your new site, go to +New Page, select Volunteer and name your page accordingly.
    2. Navigate to Settings > Page Settings, make this new volunteer 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;

      Do you support free speech on campus? | to support our right to freedom of expression | Become a volunteer

      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 Do you support free speech on campus? 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 "action_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 "Volunteer today" text, 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 "Volunteer today ____________" 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