1. Your dashboard is the starting page on the website’s back end. It is denoted by a car dashboard icon. You can go to your dashboard by clicking this link: https://www.repierson.com/wp-admin or by clicking on the “W” icon on the upper-left side of the editing screen.
2. Pages in WordPress are built comparably to how one creates Word documents.
3. Elements on a page are called blocks.
   • Examples of these small blocks are heading blocks (large fonts that denote the title of a new section), paragraph blocks, list blocks (a list block is the entire list irrespective of number of individual bullets), image blocks, and spacer blocks (these are blocks that do not have content and are used to add empty, vertical space between blocks).
4. Each block has a corresponding popup menu that becomes visible when you click on the block once.
   • This popup menu has quick customization features specific to the block, like changing the text alignment, transforming it to a hyperlink, set the type to boldface.
   • The very last option in this popup menu (denoted by three stacked dots) has options to duplicate the block, add a blank row above (“Insert before”) or below (“Insert after”) the block, or delete the block.
   • The upward and downward facing arrows allow you to rearrange the blocks.
5. Along with the popup menu, the right hand panel will also allow you to make changes to the active block.
6. WordPress auto-saves your work after five minutes of inactivity. You can also save your progress by clicking on Update.

1. Dashboard > Pages > Add New
2. Replace “Add Title” with the page’s title. This is internal and is not visible to visitors.
3. Under the “Page” panel on the right, click “Template” and select “Master.”
4. Click once on the gray text that says “Type / to choose a block.”
5. Click the blue + icon on the upper left hand side of the page. This icon is to the right of the small R.E. Pierson icon.
6. Click the “Patterns” tab.
7. Click the “Featured” dropdown.
8. Click the “[CBP]” item from the dropdown.
9. Click the thumbnail above the caption that says “Content Page.”
10. The page will then be populated with the elements typically visible in a content page.

1. Click once on the banner (or hero).
2. Click “Container Background” on the “Style” tab under the “Block” panel.
3. Click on the image thumbnail below “Background Image or Video.”
4. If the image that you want to use is already on the media library, search for it and click. Otherwise, click the “Upload files” tab then click the “Select Files” button. Search for the image you want to upload from your computer, and click the “Open” or “Select” button (verbiage changes depending on Operating System).
5. Click the Select button.

1. Click once on the image in the sidebar.
2. Click “Media Library.”
3. If the image that you want to use is already on the media library, search for it and click. Otherwise, click the “Upload files” tab then click the “Select Files” button. Search for the image you want to upload from your computer, and click the “Open” or “Select” button (verbiage changes depending on Operating System).
4. Click the Add to Gallery button.
5. Rearrange the photos by clicking and dragging the thumbnails.
6. If a photo needs to be removed, click the x button of the appropriate thumbnail.
7. Click the Update Gallery button.

1. Click once on the element that’s above where you want to place the photos. (e.g. the last sentence of a paragraph)
2. Click the three dots from the contextual menu that appears.
3. Click “Insert After.”
4. This will create an empty block container below the element, with a placeholder text saying “Type / to choose a block.”
5. Type “/image” (without the double quotes) and click on the first “Image” block.
6. If the image that you want to use is already on the media library, search for it and click. Otherwise, click the “Upload files” tab then click the “Select Files” button. Search for the image you want to upload from your computer, and click the “Open” or “Select” button (verbiage changes depending on Operating System).
7. Click the Select button.
8. Optional: If you want to make the image clickable, click on it once, click the chain icon from the contextual menu, and click “Media File.”

1. Click once on the element that’s above where you want to place the photos. (e.g. the last sentence of a paragraph)
2. Click the three dots from the contextual menu that appears.
3. Click “Insert After.”
4. This will create an empty block container below the element, with a placeholder text saying “Type / to choose a block.”
5. Type “/advanced gallery” (without the double quotes) and click on the blue “Advanced Gallery” block.
6. Click the (+) Select Images button.
7. If the image that you want to use is already on the media library, search for it and click. Otherwise, click the “Upload files” tab then click the “Select Files” button. Search for the image you want to upload from your computer, and click the “Open” or “Select” button (verbiage changes depending on Operating System).
8. Click the Create Gallery button and then the Insert Gallery button.
9. On the “Block” panel on the right, click on the third icon below “Gallery Type.” This will change the style to a carousel.
10. Change the “Columns” to two or three, depending on how many images you want to show side by side.
11. Click the “Link Settings” accordion.
12. Click the dropdown below “Link To” and change it from “None” to “Media File.” (Note: Doing this will make the images clickable. When clicked, a larger version of the clicked image will pop up. If you do not want this functionality, skip this step.)

1. From the Dashboard, hover over Projects and click “Add New.”
2. Give the project a title (overwrite “Add Title”).
3. At the Page panel on the right, click on the category/ies this project will be filed under. (The seven categories appear under “Most Used.”)
4. Click on the gray box that says “Set featured Image.”
5. If the image that you want to use is already on the media library, search for it and click. Otherwise, click the “Upload files” tab then click the “Select Files” button. Search for the image you want to upload from your computer, and click the “Open” or “Select” button (verbiage changes depending on Operating System).
6. Click Set Featured Image
7. Click the blue + icon on the upper left hand side of the page. This icon is to the right of the small R.E. Pierson icon.
8. Click the “Patterns” tab.
9. Click the “Featured” dropdown.
10. Click the “[CBP]” item from the dropdown.
11. Click the thumbnail above the caption that says “Project.”
12. The page will then be populated with the elements typically visible in a project page.
    • Select the two main photos by clicking on each blank box individually and selecting the appropriate image from your media library.
    • Select the three supplementary photos (below the green section) by double-clicking on an empty gray box. This will take you to your media library.
    • To edit the photo gallery, click once on the R.E. Pierson logo below the “Project Gallery” heading.
      • Next, click on the pencil icon from the popup menu.
      • Click “Add to Gallery” on the left of the media picker.
      • Select the photos you want to add to the gallery by clicking on them once. (A checkmark on the top right of the thumbnail indicates that it has been selected. Uncheck if you want to remove it.)
      • Click Add to gallery.
      • Click the x button on the R.E. Pierson logo to remove this picture from the gallery.
      • Click Update gallery

Part 1: Google Maps

1. Go to https://maps.google.com
2. Put in the address for the new location and search for it.
3. Once Google Maps drops a pin to the location and centers in on it, click the “Share” button on the left sidebar.
4. From the popup panel, click the “Embed a map” tab.
5. Change the dropdown from “Medium” to “Custom size.” Change the dimensions 800 x 450. Then click “Copy HTML.”

Part 2: R.E. Pierson Website

6. Login to the website as normal.
7. From the dashboard, hover over “Pages” and click “All Pages.”
8. Look for the Contact page from the list, and click on it.
9. (Assuming that the new location will be placed below the Kutztown office.) Click on the space below it that says “Type / to choose a block.”
10. Type “/custom html” (without the double quotes). Click on the Custom HTML block.
11. Paste the Google Maps HTML that was copied in step 5.
12. In the code that was just pasted, modify width=”800” to width=”100%”. This ensures that the map will be responsive regardless of the visitor’s screen size.
13. Locate the popup menu above the code. If you don’t see this, click anywhere inside the code once.
14. Click the three dots at end of the popup menu.
15. Select “Insert after.”
16. If done correctly, you will see a blank row that says “Type / to choose a block.”
17. Click on this block, type “/20px spacer” (no double quotes) and click on the block. This adds a spacer that’s 20 pixels tall.
18. Next, click on the “Kutztown Office” header once. Clicking will display its popup menu.
19. Click the three dots at the end, and click “Duplicate.”
20. A duplicate Kutztown Office header will appear below the original. Edit this to say the name of the new location.
21. Next, click the downward arrow to move the header down one block. Repeat until it is below the spacer you created in step 17.
22. Once the header is in the correct place, click the three dots, and click “Insert after.”
23. This new block is for the address and telephone number. You don’t have to search for a block; you can go ahead and start typing (or copy-pasting) the information. Note: The paragraph block has a different set of options in its popup menu, including text alignment.
24. Do Part 3: Google Maps below before continuing.
25. Highlight the address, click the icon on the popup menu that looks like a chain, paste the link that you copied in step 24 on the provided text field, and click on it once to set the link live.
26. Toggle the tab that says Open in new tab to active.
27. Finally, click Update to save the changes.

Part 3: Google Maps

1. Click the “Share” button in Google Maps once again. You should be in the “Send a link” tab.
2. Click “Copy Link.”