Using the Editor - Gutenberg

This is a powerful editor that allows you to edit and preview at the same time. This means that some editing controls are a bit hidden. Taking a few minutes with tutorial will save you time in the future!

The structure of your website - important concepts

Your website is a heavily customized version of wordpress, but the structure and controls are similiar to other wordpress websites.

Header: The top of your website is called the header, within the header is the menu. The menu contains the links at the top of your site. The header can be customized under Appearance -> Customize. The menu can be customized there as well.
Main Content: Next you'll see the page or post content in the middle of the page. Pages and posts have their own links from the admin dashboard. Editing this content is done with the gutenberg editor which we're discussing in more detail below
Sidebars: Your site may have a sidebar on some content. Whether a sidebar shows is controlled under appearance -> Customize -> Layout.The content of the sidebar is controlled under appearance -> Widgets
Footer: The bottom of your site is the footer
Customizing Layout, Colors, Fonts, Homepage Template: Layout and style changes are all done under the customizer. From your site dashboard click Appearance -> Customize

Editing Content with the Gutenberg Editor

On your site dashboard look under the "shortcuts" block to easily edit important items such as your homepage.
Under Pages you'll find your homepage marked as "front page" as well as other built in pages
Under Posts you'll find pre-built blog and informational content

What is a Block?

Each piece of content is considered a "block". Each block has different formatting options - they can all be moved, deleted, duplicated. When we design content we typically will place all the blocks in rows with columns.

Undoing Edits

Click around and check things out, there is an undo button! Ctrl + Z / Command + Z Or use the buttons at the top left of the edit screen.

Saving Your Changes

In the upper right hand of your screen you'll see options for Saving a Draft of Publishing if your content is not currently published. If it's already published the button will say "Update"

Reusable Blocks

Reusable blocks allow content to used in multiple places around your site without having to re-create edits. Simply click the edit button, make your edits to the block and then save.

Content Controls

Editing text is as simple as clicking and making edits with your keyboard. If you want to change text alignment change a photo etc. Start by clicking on the content to edit, then look for the block's content controls.

button controls allow you to remove or add a link by clicking the paper clip looking icon

the split content controls have a pencil icon that allow you to change the photo. For most media blocks the icon to swap images is a little photo icon.

Basic Text Editing

Use the block toolbar to change alignment, bold, italics, add links
Hold SHIFT + ENTER to create a new line. ENTER creates a separate paragraph block

Rows / Columns / Background Images

When we build content for you, most blocks are placed inside a ROW (think of this as a set of nested blocks). A row can have one column or many columns. A row can have background images. You may want to change these background images.

To select a row, click wide on the screen near the section you want to edit. For example the upper left hand corner.

Block Navigator

If you're having trouble selecting the element you want, use the block navigator. For example lets say you want to select a an entire row, but you can't find it. Start by clicking inside the row (on a paragraph for example). Then select the block navigator from the top toolbar.

Your currently selected item will be outlined in black

Deleting or Duplicating a Block

Make sure your select the entire section you want to delete or duplicate. For example, do you want to delete a single element, or do you want to remove a whole row.

Moving a Block

Select the block you want to move. Either click the move arrows to move it up or down in the layout, or click and drag on the move icon, and slowly pull the block where you want it.

Adding a New Block

There are several methods to insert a new block.

The easiest method to insert a block into current content is to click on the nearest element above where you want to insert. Then hit ENTER. You'll then get a new spot to add a block. Click the + Icon, or hit the / key as a shortcut

You can also hit the block inserter from the top toolbar. Your new block will be added to the end of the page, then you can click and drag the block where you want it.

Block Types

We use a custom block library combined with the default Wordpress Blocks. We have also removed some unnecessary or duplicate blocks. Here are a few important ones to know about

Row - When you're building a completely new section, I recommend starting with a ROW. This will give you the option for columns.
Paragraph - add simple text that can include links
Image - display an image with an optional caption. Almost always an image should be place in a Row with columns, or instead use the split content block.
Cover - This is a great block for banner type image. It is automatically cropped to look good on a variety of screens. You can easily add text on top of it, or use the block controls on the right hand column to reduce the opacity of the overlay for a nice photo banner
Split Content - We automatically some theme styling to this block. It's an alternative to adding Row + Columns for having nicely formatted text and photos next to one another
Classic - This is the classic text editor that is more similiar to Word or other familiar text editors. In this editor you can easily add lists, insert headings all within one block. For a simple text block, I recommend just using Paragraph, but if you want to do a lot of formatting, the "Classic" block is nice
Spacer / Divider - In a paragraph block you can hit shift + enter to create line breaks, but sometimes you may want more space! By default it shows a small divider line. Use the block controls in the right column to change the height of the space, and to choose whether you show the line.
File - This is an easy way to add a PDF or other file with a simple download button
YouTube / Vimeo - Easily add embedded videos
Advanced Gallery - Easily made beautiful photo galleries - make sure to checkout the controls in the right hand sidebar