Making and Managing Pages

Click on the Pages – All Pages tab in the left-hand Admin menu.

This takes you to the area where you make manage and edit pages on the site.

Along with the Envira Galleries and the Media Library sections, this is where you will do most of your work editing and adding content to the site.

First let’s look at the interface for the workspace.

The Pages Section

To create or edit Pages, choose Pages Tab on the left hand Admin Menu and you’ll be in the working screen of the Pages Section. On the left of the working screen is a list of folders created with the Folders Pro Plugin. On the middle-right is an alphabetical list of all the pages on the site.

Choose any of the folders on the left and the right hand view is limited or constrained to only the pages in that folder.

Hover your mouse over any page name and you’ll see options pop up. 

If you want to move a page to a folder grab the crossed arrow icon and drag the page to the desired folder.

Keeping the folders in order will help to manage the site as it grows over time.

The other tools that come up when you hover over the page name are:

• Edit – choose this to open and edit the page
• Quick Edit – a set of quick metadata tools. Avoid unless you know what you’re doing.
• Trash – Only if you really mean it. You can always turn the page to draft mode and put it in the “unused” folder.
• View – Gives you a quick look at the page. Use your browser’s back button to return to Pages Section view.
• Duplicate This – From a plugin. Let’s you duplicate the page. The new page has the same name, but is in Draft Mode. Useful in a lot of ways, as a backup, or as the basis for a new page of similar design. Caution: Be sure to change the page title before publishing!

Note: We find Bulk actions of limited use in the Pages Section. But poke around on the page. You may spot something you find useful.

Tools in the Upper Left Corner

The first place to look is the upper left corner. You’ll see (as of this WordPress version. 6.2) six actionable icons:

• The site icon. This is the back button to get back to the Admin section
• A plus sign in a blue box. This is a quick link to bring up the interface for choosing a block to insert. (Only insert a block from here if you know what you’re doing! We’ll show you better ways to insert a block in a bit.)
• A slanted pen icon. This is a toggle for the behavior of your mouse as regards blocks on the page. The slanted pen is for edit mode. When it is showing any block you choose is ready to edit with the editing tools visible. This is the default behavior. Click the icon and it toggles to an Arrow icon to indicate Choose mode. Choose any block and it is highlighted, but the editing tools don’t show. 
• The left and right bent arrows are undo and redo. Note: If you make a mistake you should definitely use these arrows as you go to undo function. Keyboard shortcuts such as control-z or command-z on the Mac can behave erratically in the Page Editor.
• The list view toggle, three stacked horizontal lines. Very important icon. This toggles the list view which shows you all of the blocks on your page as a visual list. (Ignore the outline view.)

Tools in the Upper Right Corner

You’ll find five tools here, one of which is really important.

• Switch to draft – this switches the page from Live on the Site, to draft mode. Caution: if your page is live, using this switch will unpublish the page and it will no longer be visible to users. The best use for this is to archive a page that you no longer want live on the site, but may want to keep.
• Preview – this allows you to preview your page in desktop, tablet, of phone simulations.
• Update – the important one, basically the save button. This updates your work so that it appears online. Remember: 
  • If you navigate away from a page without updating you will lose your edits. 
  • If you switch to draft you will unpublish your page so it’s no longer viewable to users. 
  • When you navigate away from an un-updated page you will be prompted to be sure you want to leave. Consider carefully.
  • If you’ve made a major mistake, leaving without updating can save you. It will revert the page to its last updated state. 
  • When you return to the page you will be prompted at the top of the page that there is an “autosave” version. Going to an autosave is a “pull only in emergency” sort of move. It’s not intuitive and should be avoided except in extreme cases.
  • If you’re going to do extensive re-edits to a published page, it’s best practice to make a duplicate of the page and work on that, not replacing the published page until you’re sure it’s all as you wish.
• The black box with the white tablet inside is a toggle that reveals and hides the settings toolbar on the right side of the page.
• The three vertical dots icon toggles a panel with some powerful page tools. Use only if you know what you’re doing with one exception.
  • The view panel at the top of the box allows you to choose where the block tool bar is located. 
    • Top toolbar toggles the tool bar between appearing on the top of the page or appearing right atop the block you are editing. We find that having the toolbar at the top of the page is easiest, as the tool bar can be distracting when it’s too close to the block. But it’s personal preference.
    • Spotlight mode grays out all blocks except the one highlighted. We never use it.
    • Fullscreen mode reveals or hides the admin tools area to the left.
    • Distraction free makes all toolbars disappear, and is intended to allow you to focus on writing text. Maybe useful for a blog post, but not much use on a page-based site like this one. Important: to get out of this mode, hover your mouse at the top of the page and the top page menu will appear. Toggle your way back to where you want to be.
  • The Editor area allows you to toggle to and from code view. Again, not for the faint of heart or those unfamiliar with HTML. Best avoided.
  • The Tools area is best left to admins.

The Block Tools

Each type of block has its own set of tools that display either at the top of the page or right atop the block itself, depending on how the toggle is set.

These are different from the Settings on the right, but like Settings the available tools they change depending upon the type of block you’re working in.

Let’s go over the tools for Container blocks, Headline blocks, Image blocks and Paragraph blocks. These are the most common types you will use.

Container Blocks

• Select a Container block and you will see five block tools
  • The first is the type of block, here it is set to Container.
    • If you click on this icon you can change the block to one of several similar blocks. In this case either a standard Columns block or a Group of blocks. We recommend you always leave this set to Container.
  • The next tool is the move tool, an up or down arrow that actually allows you to move the block up or down. You can also move containers and blocks by dragging and dropping in the list view. But warning, it can be tricky. You can accidentally nest one block within another and have trouble getting it where you want to go. Moving blocks with the tool or dragging and dropping takes a bit of practice.
  • The next is the Align tool. On this site we usually leave this set to “None.” Instead we use the Settings tools at the right to control alignment.
  • Text align. This will set the alignment of any text in the container to either left, center or right justified.
  • The Three Vertical Dots toggle a menu of choices:
    • Copy block
    • Duplicate (can be useful)
    • Insert [block] before
    • Insert after
    • Move to
    • Copy styles
    • Past styles
    • Lock
    • Create reusable blocks
    • Group
    • Remove container
    • We seldom use anything but Duplicate and Remove.

Note: there are two best ways to insert a new Container of Block:

1. Duplicate it in list view then edit
2. Choose the block in the list view. Below the block in the page view you will see a black box with a white arrow. This will insert a new block directly below and inline with the block above.

Headline Blocks, Paragraph Blocks

The Headline Block is the GenerateBlocks version of the default Heading block. It gives you a lot more controls and parameters.

Headlines on a Web page follow a hierarchical order. This site uses three heading sizes:

• H1, there is only one of these per page. On most pages, except the Home Page, the H1 header is part of the Feature Image element described in the Elements section.
• H2 is the most commonly used headline size on the site. You can have as many as you need. Most of the sections on the About Page, for example, have an H2 headline, such as Adams House, Mineral Springs Park, etc. 
• H3 is the smallest of the headlines used on the site. They are usually a subheading for an H2. There are in all six levels of headlines available in all. Though we only use three.

Note: It is in these sectional headlines that you need to add the Page Anchors that allow the page menus to function.

The Headline and Default Paragraph Blocks have very similar block tools. The only difference is that Headline Blocks allow you to choose what level of headline you wish to use. The default is H2. If you want H3 choose that in the Block Tools. You will see all six levels of headlines here, plus one that says Paragraph.

Best practice is to use the Default WordPress Paragraph block for body text. If you need extra control in a special case you can use the Paragraph version of a headline. 

And that’s pretty much it. We recommend you work with:

• The Block tool bar at the top of the page
• The list view open on the left
• The Page/Block Settings Tools open on the right

Image Blocks

To add images to pages on this site we use the Image Block that comes with the GenerateBlocks plugin. This gives you all of the controls you have with other types of GenerateBlocks elements, plus some setting specific to the image.

Choose any of the several methods for inserting a block and choose the blue Image block.

The default block offers a selection of images sources. You can Upload a file from your computer, choose an image for the Image Library or even insert it from an online URL.

Once the image is on the page you can use the Block Tools to set the alignment, create a caption (the CC box) or, if you don’t like the image you chose, use Replace to insert a different image.

In the Block Settings on the right you can set:

Size. This is a dropdown that allows you to set, Thumbnail, Medium, Large and Full Size. 

Width and Height. The settings allow you to set the width and height of the image. We normally use Pixels, but there are other units you can choose. If you enter a value in only one of the two boxes, the value for the other box will be calculated automatically.

Object-Fit. These are CSS settings. Just leave it at the default.

Alt Text (Alternative Text). This is where you add alternative text to improve the site’s accessibility. It’s text attached to an image that is read out loud by the page reader software often used by the blind or visually impaired. It is not visible to regular users. Alt text should be a short description (under 100 characters) that describes what’s actually seen in the image. Keep descriptions specific, for example: Circa 1870 sepia, visitors gather at ornate spring house pavilion. Learn more about accessibility here.

Title Attribute. This brings in text from the image file name. When users hover their cursor over the image this text displays. We suggest that you add a short description here. It also helps with SEO.

That’s pretty much it. Use the other Block Settings controls to add space around your image so text doesn’t crowd in on it.

How Pages are Constructed

Note: The view you see in the page builder area only approximates what you’ll see on the live site. In addition it gets squeezed when you have the lists and settings windows open.

To see what your page will look like live, you can toggle the preview button on upper right tool bar. 

If it’s a new page you can actually publish the page to see what it will look like, opening it in a separate tab or browser window and hitting refresh to gauge your progress as you build pages. Remember, even if you publish a page, most people will not be able to see it until you add the page to a menu and make it part of the navigation.

If you’re making extensive changes to an existing published page that is part of the menu, it’s advisable to make a duplicate of the page and follow the procedures above.

Building Pages

WordPress pages today, and all the pages in this site, are built in boxes called “blocks.” The type of content you wish to display dictates the type of block you use. 

There are three ways to add any type of block to your page. One is the blue button with the plus sign in it on the upper left of the page. The other two ways are to click on the three vertical dots to the far right of either the Block Toolbar or a block chosen in the List View to the left, which gives you a dropdown where you can insert a block before or after the current block. You can also duplicate a block here which makes and exact copy with all the content and settings preserved. All you need to do is change the content, and you have a new block with the same settings as the previous block.

Content Blocks

Many types of content blocks are included with WordPress. There are blocks for mundane stuff like text blocks for headlines, paragraphs, lists, and the like. There are media blocks for images, audio files, pdf files, video, etc. You can display YouTube and other social media content with Embed blocks. You can expand the types of content you can display by combining certain plugins with something called “shortcode.” These are short snippets of code that can be cut and pasted into a shortcode block. With this method, there are few limits to what type of content you can display on a WordPress page.

Design Blocks

WordPress also provides a special set of blocks that help you organize the layout and display properties of your page and the of the content blocks. These Design blocks include buttons, columns, rows, page breaks and more.

We rarely use the default WP Design Blocks.

Instead, this site uses a plugin called GenerateBlocks for building the structure of pages.

GenerateBlocks is a set of six, powerful and lightweight design blocks that offer a huge amount of control over how you layout and display the elements that make up a page.

In all cases we use the blocks from the GenerateBlocks plugin instead of the default WordPress Design blocks.

Your GenerateBlocks are, in order of importance:

1. Container Blocks – These are the basic building blocks of every page, album or element on this site. They are basically wrappers within which you nest your content. The container offers local, block level control over many important things.
2. Grid Blocks – These allow you to easily set up columns and rows and intricate combinations of the same to help you layout a page. 
3. Headline Blocks – These are the headers for your content. They are used instead of the default Heading Block. Again, the idea is ultimate control. Most of your Headline Blocks will be either H1, H2, or H3 level headlines. 
4. Image Blocks – This block allows you to display images in your content. You can upload files directly from your computer or choose an existing image from the Media Gallery. You can also add captions to images in this block.
5. Button Blocks – These are clickable blocks that you insert into content. In accessible Web design there is a distinction between links that take you to another location and buttons that involve a call to action, such as calling up a form to fill in. The Button Block offers many options to allow you style buttons as you wish.
6. Query Loops – These blocks allow you to dynamically and automatically organize how posts, such as blog posts are displayed. This site does not have a blog, and does not use post content in any other way, so we won’t go into Query Loops further. 

Using Blocks

The Settings panel on the right of the page toggles between Page and Block view. When you choose a block, it automatically toggles to Block view.

Every block has its own group of settings. This tutorial will only cover the settings for the blocks you will use the most.

Container Blocks in the List View

Open up the left side list view on the About page and you will see a bunch of blocks labelled “Container.”

Every bit of content on the site is nested within a container block.

Click on the top container in the list. It turns blue to indicate it is chosen. In the middle page view, note that there is now a transparent blue-lined box around the headline to show that it is selected.

Look to the right and you’ll see that the top item in the Settings Toolbar now says “Container.” All of the settings below it are things that can be applied to the block you. Whatever container or block you choose, the Settings Toolbar will change to show you the parameters you are able to adjust. More on this in a bit.

For now, back on the left side list view, click on the little “crow’s foot” > next to that top container in the list to expand the view and show you what is inside the container. The crow’s feet are progressive, opening or closing one level at a time.

• The first thing you see is… another container! This is called the Inner Container. While it is not necessary to have an inner container, they can be very useful. 
  • They allow the top level container to maintain the block’s integrity in relation to other blocks on the page
  • While within the inner block you can do whatever you want while having minimal impact on the other blocks on the page.
  • For example, say you wanted a small box of content at the center of the page with nothing surrounding it. If you used just one container and reduced its size, other blocks on the page might slide into the empty space and mess things up.
  • With an Inner Container you make that one small, change the background color, etc. and no other content on the page will interfere.
• Click the crow’s foot by the inner block and it will reveal the contents of the Inner Container. In this case, a Headline Block.

Now choose a top level container further down the page and open it up.

Most of the top level containers on the About page have:

• An Inner Container
• A Grid Block
• Two containers under the Grid Block
  • These have content, such as images, headlines, paragraphs and buttons.

We’re not going to go through every tool for every type of block. As we mentioned, we have recreated the About page. We urge you to explore the existing blocks and check out the settings. If you want to change settings to see what they do, it’s best to do this on your own duplicate copy of the page.

Here are some general notes on working with the Settings Tools that should prove helpful.

• If you don’t see the settings you expect, it is likely that you are in Page mode. To get back to Block mode, simply choose a block to see the Block settings.
• Before changing sections, make sure you have selected the correct box. Otherwise you might apply settings to the wrong box! We find keeping List view on the left open and selecting blocks there is the safest way to make sure you’re where you want to be.
• At the very top of the Settings block are three icons. The first is Desktop, the next is tablet, and last is phone.
  • These icons not only change the view to simulate the device, they dictate what the settings below adjust
  • Settings are inherited. What you choose for Desktop is the default for Tablet and Phone. If you change something in Tablet view it will not affect desktop, but will be inherited by Phone. Note: this applies ONLY to the settings. If you change the text in a headline or paragraph, it changes for all devices.
  • By controlling settings by device, you can fine tweak your pages to make sure they look good and respond well to all sizes of screen.
• The Setting toolbar has Crow’s feet that open up and down to reveal the sections.
• The Layout section pretty much stays the same for elements on this site. And most of you can avoid it. Should you decide to become more expert in WordPress and GenerateBlocks, there is a display mode called Flex that is very versatile and powerful. But it is beyond the scope of this manual at this point. On a “tech note,” Grid Blocks are just Flex boxes with very easy controls.
• In the Spacing settings section you control things like:
  • Padding, which control the space inside the block such as distance from the Top, Right, Bottom or Left sides of the box.
  • Margin controls the space between boxes.
  • Many sections here and elsewhere allow you to choose what units your spacing uses. The choices are normally: Pixels, Ems or Percentage.
    • We recommend trying to use Ems whenever possible.
    • An em is equal to the size of the paragraph text default size for the site.
    • The default for this site is 18px. So a 1em space is 18 pixels wide.
    • .5 em would be 9 pixels, 2em would be 36 pixels, 2.3 ems would be around 41pixels (you can have fractions of ems, but not fractions of pixels!)
    • What makes ems important is that they change proportionally when the screen size changes
    • Be aware that on this site the default setting is pixels. Some settings must be in pixels. But when given a choice of measurement units, always choose em. At present it is not possible to change the default for the whole site to em. For now, just watch out for it. In general, if you think you’re in em but it’s actuially in pixels it will be obvious fairly quickly. Changing something 1 pixel is hardly noticeable. Changing something one em makes something happen!

That should take care of the major things you might not see for yourself as you go through the toolbar.

If there’s anything we didn’t cover that you’d like to learn more about, scroll down the Settings tools to Documentation. It will take you to the GeneratePress/GenerateBlocks documentation, which is excellent.

When you’ve finished your tour, tested things out and kicked the tires, it’s time to start making pages on your own!

Remember, after you make a page you must add it to the site menu. If it’s not on a menu, then visitors will not be able to find it.