Harper - Custom Pages

The Harper theme has three custom pages created using Gutenberg:

Below we'll go over how to set these up. If you imported the demo content, all of these pages are already set up for you! Go to WordPress > Pages and edit each page with your own information.

About Page

  1. Go to WordPress > Pages > Add New. Give your page a name (i.e. "About Me").
  2. Set the individual page layout to full-width.
  3. Add a Gutenberg Columns Block and set it to 2 columns.
  4. In the right column, add an Image Block and select your image.
  5. In the left column, add a Custom HTML Block. Add the script font code.
  6. Still in the left column, add a Paragraph Block and add your text. The demo About page also has a Quote Block in the left column.

Contact Page

  1. Make sure the Ninja Forms plugin is installed and activated. 
  2. Set the individual page layout to full-width.
  3. Go to WordPress > Pages > Add New. Give your page a name (i.e. "Contact Me").
  4. Add a Gutenberg Columns Block and set it to 2 columns.
  5. In the right column, add a Ninja Forms Block and select a form.
  6. In the left column, add a Heading Block, a Paragraph Block, and an Image Block.

Services Page

  1. Go to WordPress > Pages > Add New. Give your page a name (i.e. "Services").
  2. Set the individual page layout to full-width.
  3. Add a Gutenberg Columns Block and set it to 2 columns.
  4. In the left column, add an Image Block and select your image.
  5. In the right column, add a Paragraph and add your text. The demo Services page also displays a couple of Headings in the right column.
  6. To add the pricing table, add a Custom HTML Block beneath the Columns Block. Find the code for the pricing table in your Harper theme file (Custom Codes folder). Paste the pricing table code in the Custom HTML Block and fill in your information.