Adjusting Homepage Content on Pioneer

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.

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.

 

Pioneer Homepage Sections

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.

Header Options

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.

  1. 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.
  2. Click the new ”Add Image” button that has shown up.
  3. Drag the new desired homepage hero image into the upload box.
  4. Don’t forget to add an Image Title and Alt Title before clicking the blue “Select” button in the bottom right-hand corner of the screen.
  5. Click the “Update” button on the right side of the screen before closing out.

Header 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.

Pioneer Top Section

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.

Pioneer Tagline

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.

Main CTA Section

  1. Enter a short title into each Title field.
  2. Crop images at 950 pixels wide by 425 pixels tall. Upload the appropriately sized images to the section labeled Background for both calls to action.
  3. In the Link section, choose a page of your site for each call to action to link to.
  4. Click the Update button to see the changes you’ve made.

Main CTA Back End

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.

Flexible Content

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.

  1. 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.
  2. Input a heading into the section called “Section Heading.”
  3. Enter your descriptive copy into the field called “Content” to explain your call to action or information in more detail.
  4. 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.
  5. You can manually add a button in if you’d like to link to a certain page.
  6. 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.
  7. 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.
  8. Click the Update button to save your changes.

Flexible Content Back End

Edit the Events Section

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.

Events Section

If you don’t have any content in the Events section of your website, 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.

Event Section Back End

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.

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:

  1. Where it says “Show Side Call to Action?” make sure the toggle says “Show” to reveal additional editing options.
  2. Add heading text for the CTA.
  3. Add a short description to entice people to click.
  4. Paste a link into the Link field.
  5. Add new text to the “Button Text” field, which will appear as a button to your users on the front end.
  6. 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.

Side CTA Back End

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 3 images and link to any page you want on the site. If you add more than 3 tiles to this section, they’ll drop down to the next row, growing 3 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.

Programs Section

  1. Toggle the Show/Hide switch to determine whether or not you’d like to show the Programs Section.
  2. Enter a heading for the section as a whole into the Section Heading field.
  3. Enter a description for the section in to the Description field.
  4. Type a title for each tile.
  5. Crop your images to 767 pixels wide by 483 pixels tall. Upload cropped images for each tile in the “Image” column.
  6. 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.
  7. Add or remove tiles by clicking the + or – button that shows up when you hover over the tiles in the back end.

Programs Section Back End

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.

Flexible Content Section 2

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 3 numbers to share. Be sure the statistics are formatted in such a way that the number displays prominently on top of the description.

Statistics Section

  1. Use the toggle to show or hide the section as a whole.
  2. Type a Section Heading in its respective form field.
  3. 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.
  4. 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.”
  5. All three statistics are required to display this section.

Statistics Section Back End

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.

Blog Section

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.

  1. Click the toggle button to dictate whether or not blog posts are pulled onto the homepage.
    1. 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.
  2. Update the heading using the “Section Heading” field. For example, you might change the Blog Heading to “Recent News” or “Community Stories.”
  3. 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.”

Blog Section Back End

 

Still Have Questions?

Reach out to us within your Dashboard. Log into your website and then fill out the Website Support form. You’ll hear back from one of Wired Impact’s team members within one business day.