Every so often you’re going to want to refresh the content on your homepage. And we get it… it can be hard to recall where to change every single detail. In this post, we’re outlining exactly how to update each piece of content on your Pioneer theme homepage. If you’re not using the Pioneer theme, check out how to adjust the homepage content in other themes.

To revise anything on your website, you’ll first need to be logged in to access the back end of your site. Use the labeled photo for reference and the jump navigation below to find instructions for how to revise each specific section you’d like to update on your homepage.

It’s worth noting that there are certain sections you can choose whether or not to display, but you won’t be able to customize the order in which the sections appear.

A screenshot of the different sections of the homepage in the Pioneer theme.

The header image is the large image you see as soon as your homepage loads. You can use the toggle at the top of the first tabbed section to decide whether you’d like the image to appear full bleed or not.

  • With the full bleed option, the navigation will appear on top of the image.
  • Alternatively, the header image can start below the navigation, creating a white background for the logo and navigation items.
A screenshot of the header image options as a Full Bleed header image and a Header image beginning below the navigation.

You can swap out your header image by first cropping a photo at 1920 pixels wide x 608 pixels tall. Upload it to the section labeled “Header Image” in the back end of your website.

  • Hover over the current image in the back end and click on the “x” in the upper right-hand corner to remove the existing image.
  • Click the new ”Add Image” button that has shown up.
  • Drag the new desired homepage hero image into the upload box.
  • Don’t forget to add an Image Title and Alt Title.
  • Click the “Update” button on the upper right corner of the screen before closing out.
A GIF of the The Header Image section in the Homepage Content in the back end of a website, demonstrating how to opt for a Full Bleed image

Edit the Tagline Text

You can update the Tagline text that displays overlapping your hero image. This option is located in the second tab in the back end of your Homepage. This text should give your site visitors a concise overview of exactly what your organization is all about.

A screenshot of a Full Bleed image displaying the Header Image Section, Tagline Section and the Main CTAs Section in The Pioneer theme.

To edit this required text, use the editor field to type new content. The text will be styled automatically on the front end, so you won’t have the opportunity to bold or italicize specific text.

A screenshot of the Pioneer theme homepage in the back end of a website, highlighting the Tagline Section.

Update the Main CTAs Section

The Main CTAs Section is the third tab option in the back end of your Homepage. These two calls-to-action are required for the homepage, so you’ll need to decide which ones you want to showcase right now. They can always be changed later.

Adding background images is optional, but a short 1 to 3-word title and link to a page on your site is required. Sending users to the Donate or Volunteer pages are two great options for this section. You could also promote ticket sales for an upcoming event.

A screenshot of a Full Bleed header image and a Header image beginning below the navigation pointing out the Main CTA Section with background photos.
  • Enter a short title into each Title field.
  • Crop images at 950 pixels wide by 325 pixels tall. Upload the appropriately sized images to the section labeled Background for both calls to action.
  • In the Link section, choose a page of your site for each call to action to link to.
  • Click the Update button to see the changes you’ve made.
A screenshot of the Pioneer theme homepage in the back end of a website, highlighting the Main CTAs Section.

Revise the Flexible Content Section

The Flexible Content Section is the fourth tab down on the Homepage in the back end. There are two of these flexible sections that you can choose to show (or hide) on your homepage, and they both work nearly identically.

A screenshot of The Flexible Content Section #1 in the Pioneer theme.

To see how this section looks when you add a photo or video, jump down to the Flexible Content Section #2 description.

Both Flexible Content Sections include a spot for an optional image or video and a spot for information. If you add a photo or video, it will appear to the side of the text you enter, and the text will be left justified within the space. If you elect to not show a photo or video, your heading and text will appear in the center. Follow the instructions below to update this section.

  • Click the Show/Hide toggle at the top under “Show Flexible Content Section” to activate or deactivate the section on the front end. If you decide to display this section, a heading and content text are required.
  • Input a heading into the section called “Section Heading.”
  • Enter your descriptive copy into the field called “Content” to explain your call to action or information in more detail.
  • Use the editor to bold or italicize a certain piece of text if you wish. You can also add links to the text or format the content as a quote.
  • If you want to add an image, make sure the “Image” option is selected under the “Display and Image or Video?” dropdown menu. We suggest uploading an image that’s 720 pixels wide, and the height can be whatever makes the most sense for your imagery.
  • If you’d rather embed a video, make sure the “Video” option is selected under the “Display and Image or Video?” dropdown menu. Paste in the URL of the video you’d like to show, such as a link from YouTube.
  • Click the Update button to save your changes.
A GIF demonstrating how to Show or Hide the Flexible Content Section #1 and add a video or image in the back end of a homepage.

Edit the Events Section

FEATURE AVAILABILITY

The Event System is available for Grow and Amplify plan websites. Change your plan in the Account & Billing section of your website Dashboard.

Set up the Events Section

The Events Section is the fifth tab down on the homepage template in the back end. This section pulls content in automatically from a custom post type called Events. You can select whether or not to show this section on your homepage by clicking the Show/Hide toggle at the top.

A screenshot of the Event Section in the homepage of the Pioneer theme, highlighting the Side Call to Action.

If you don’t have any content in the Events section of your website, or if you’re on the Core plan, nothing will show on the homepage for this section. Your homepage will smoothly transition to the next section you’ve opted to show.

In this homepage tab, you’ll see an input field for a heading. If you choose to use the Events section of the website, you can title this section to be more customized to your nonprofit, such as “Community Events” or “Upcoming Fundraisers.”

A button will automatically show at the end of your events list to send visitors to your main Events page. You can customize the call to action copy by editing the “View All Events Button Text” field.

 A screenshot of the Pioneer theme homepage in the back end of a website, highlighting the Events Section form field.

Edit the Side Call to Action

If you’ve elected to display the Events section of your homepage, you also have the option to show a unique vertical call to action to the right of your upcoming events list. If you choose to hide this call to action (CTA), your events list will span full width, and your visitors won’t know that there was even an option for something else to show up there.

A screenshot of the Event Section in the homepage of the Pioneer theme, highlighting the Side Call to Action.

If you show this call to action, you can add a background image to spruce it up, and customize all of the text as well as the link. Use the following steps to activate this call to action:

  • Where it says “Show Side Call to Action?” make sure the toggle says “Show” to reveal additional editing options.
  • Add heading text for the CTA.
  • Add a short description to entice people to click.
  • Paste a link into the Link field.
  • Add new text to the “Button Text” field, which will appear as a button to your users on the front end.
  • A background image is optional. If you’d like to include one, crop an image to at least 450 pixels wide by 380 pixels tall and upload it into the “Background Image” field. If you do not add an image, the background will be a solid color.
A GIF demonstrating how to show Side Call to Action in the back end of a homepage in the Pioneer theme.

Update the Programs Section

You can find the Programs section in the sixth tab down in the back end of your Homepage. This section gives you the option to showcase a minimum of three images and link to any page you want on the site. If you add more than three tiles to this section, they’ll drop down to the next row, growing three across until you’ve added as many as you like.

We recommend keeping this section focused on one topic or area of your site. It’s a great place to display your nonprofit’s programs, services or impact stories.

 A screenshot of the Header Section in the homepage of the Pioneer theme.
  • Toggle the Show/Hide switch to determine whether or not you’d like to show the Programs Section.
  • Enter a heading for the section as a whole into the Section Heading field.
  • Enter a description for the section in to the Description field.
  • Type a title for each tile.
  • Crop your images to 767 pixels wide by 483 pixels tall. Upload cropped images for each tile in the “Image” column.
  • Copy and paste a link for each tile in the column labeled “Link.” This ideally would be a link within your site, but can also be an external link to another site.
  • Add or remove tiles by clicking the + or – button that shows up when you hover over the tiles in the back end.
A screenshot of the Pioneer theme home page in the backend of a website, highlighting the Programs Section form field

Edit the Flexible Content Section #2

This section works identically to Flexible Content Section #1, except that the image shows up on the right side of the page instead of the left. Navigate to the seventh tab on your homepage in the back end of your site, and follow the instructions above to update this section.

A screenshot of the Flexible Content Section #2 in the homepage of the Pioneer theme.

Edit the Statistics Section

Statistics are a great way to highlight the need for your organization’s services or to demonstrate the impact you have in your community. If you opt to show the Statistics Section on your site, you’ll need to come up with three numbers to share. Be sure the statistics are formatted in such a way that the number displays prominently on top of the description.

A screenshot of the Statistics Section in the homepage of the Pioneer theme.
  • Use the toggle to show or hide the section as a whole.
  • Type a Section Heading in its respective form field.
  • For each statistic, you can add an optional prefix or suffix plus a required number. An example of a prefix would be a dollar or pound sign, and a suffix would likely be a percent symbol.
  • Add a description to the statistic to explain the number above. For instance, your whole statistic might read something like “ 98% of students want to enroll in another one of our classes.”
  • All three statistics are required to display this section.
A screenshot of the Pioneer theme home page in the backend of a website, highlighting the Statistics Section form field

Update the Blog Section

The last tab of Homepage options is for presenting your most recent blog posts. Similarly to the Events section, your most recent blog posts are pulled onto the homepage automatically from another section of your site.

A screenshot of the Blog Section in the homepage of the Pioneer theme.

Any time you publish a new blog post, the newest post will automatically appear on the left side and move to the right as others are published. The two most recent posts will show here on the homepage. If your blog is empty and you do not post any blog posts, this section will disappear from your homepage.

On the Homepage in the back end of your site, you’ll find the Blog Section on the ninth and final tab.

  • Click the toggle button to dictate whether or not blog posts are pulled onto the homepage.
    • If you have not published any blog posts, this section will automatically be turned off and will not appear on the front end of your site.
  • Update the heading using the “Section Heading” field. For example, you might change the Blog Heading to “Recent News” or “Community Stories.”
  • Update the text for the button that appears at the end of this section taking people to your blog landing page. Under the “See More Button Text” field, you might write something like “Explore Our Blog” or “View All Stories.”
A GIF demonstrating how to show or hide the Blog Section in the back end of  a homepage in the Pioneer theme.

Still Have Questions?

The quickest way to get support is to reach out to us within your website’s admin dashboard. Log into your website and then fill out the Request Help form. You’ll hear back from us within one business day.