How-To

Welcome to the Gutenberg editor for WordPress. With Gutenberg, you can put together a bunch of Blocks into any layout you choose. This page has a many blocks on it, and if you edit the ‘How-To’ page in the back-end of WordPress, you will be able to see them. This drop cap was added with Gutenberg: nifty!

Headings and Paragraphs (This is an H5)

I’m a Heading

Notice that what you see in the backend matches what you’ll get in the front-end. Colors, fonts, and sizes have all been set to match your site.

I’m a Smaller Heading

You can change headings between H1, H2, H3, H4, H5, and H6.

I’m a still smaller heading. Ooh, I’m left-aligned.

In between these headings are simple paragraph blocks. You can change the color of these blocks, from the SBC’s predefined color palette. Just click ‘color settings’ in the Block tab to change the text color. If you select a bad color combination, WordPress will warn you that it may be hard for people to read.

Here’s an example of a paragraph in the SBC accent font, Gibson. Gibson can be used as accent text: set it to the same line height so that it can occupy similar spaces to Freight Text, but use it for reduced emphasis areas where you need a clean sans-serif (atom-level, primarily) To set this font, just add the CSS class ‘accent’ under the Advanced section of this Block’s settings tab.

Button Blocks

You can add buttons to your page:

You can choose between Solid, Quiet, Invisible, and Text. Since all of these can be added with no coding experience, you can create your own layouts nicely. Most blocks have pre-defined styles, but you can also set custom backgrounds on some blocks. For example:

You can select text and background styles for certain blocks in the Color Settings section of the Block tab.

Accordion Blocks

Accordions can be added, too

Blockquotes

This is a test quote with a tweetable button.

Tweet

This is a test blockquote (without a tweetable button)

Jonathan Howe

This is a pullquote that offsets from the rest of the text.

The citation below is optional.

Jonathan Howe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ut blandit dolor. Proin sed leo lorem. Aenean cursus, magna ac auctor venenatis, lectus quam ultrices mauris, id suscipit diam turpis vel velit. Integer ornare nisl in mi viverra, dictum euismod elit suscipit. Sed tempus lacus nunc, sed dapibus ipsum cursus in. Duis gravida congue finibus. Donec eu sollicitudin lorem. Integer ac dui interdum, tincidunt felis non, scelerisque nulla.

Aliquam tempor, tortor quis suscipit tempor, sem ex feugiat mi, eget pharetra lorem ligula sit amet nulla. Fusce eget orci mi. Suspendisse in facilisis urna. Proin sollicitudin, enim in malesuada lobortis, nisi metus aliquet arcu, quis blandit nunc ex fringilla libero. Vivamus at orci malesuada, congue nisi at, condimentum erat. Quisque finibus at ligula sit amet sodales. Cras leo erat, lacinia eu ante sed, posuere tincidunt nulla. Sed interdum non ligula et finibus. Donec bibendum, erat ac euismod accumsan, justo tellus bibendum libero, at fringilla justo metus vitae eros. Donec finibus, mauris eu cursus rutrum, enim tortor sagittis erat, quis ornare nisi magna quis erat. Nulla auctor tortor id quam dapibus, in posuere nisi fringilla. Vivamus cursus volutpat magna, gravida luctus elit dignissim nec. In nunc risus, faucibus a convallis ut, elementum ut massa. Morbi non feugiat lectus, in fermentum metus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Morbi a orci a metus sagittis condimentum nec a odio.

Tweaking Block Layouts

There are a few tools at your disposal for making complex layouts. First, the columns block:

Once you’ve created columns, you can fill them with any sort of block, so you can put anything next to anything!

Groups can be started from scratch, or you can make a group out of a selection of blocks. Once you have a group, you can set width and background options:

Highlight & File Blocks

Use the file block for downloads, instead of just a plain link. It will display the filename and a download link, like this:

The highlight block lets you highlight text. By default, it’s a pale yellow text, but you can set any of the SBC colors in there, too.

Adding Blocks

When you are editing a page, click the blue plus that appears between blocks to add a new block, or click the plus in the upper-left of the page. If you want to be really speedy, type Enter and then the / character. This will bring up an autocomplete menu for your typed selection. For example, /accordion will bring up the Accordion block, like so:

Here’s a full list of blocks that you may find useful, and can call with the / autocomplete shortcut:

Editing your work

You can highlight and select blocks to cut and paste them around your page. Or, you can use the arrows and grip bar that show up on the left-hand side when you hover over each block to move them.

Setting Custom Page Features

After your gutenberg editor, scrolling down in the edit post screen brings you to the Tagline and Description fields. These can be set on interior pages to show some sort of sub-heading or description text. You can see those fields in action on this page, in the header.

If you would like to feature a different title than is used in the navigation, you can use the ‘Swap Headline and Title’ option to use the Page Title in menus, and the page Tagline as the actual, visually-emphasized ‘title’ that’s shown at the top of the page.

The CTA Link and CTA Text fields let you set a button which will show up in the header area.

SEOPress

Every page on the site can be edited for SEO using the SEOPress plugin. There are a million features here, but SEOPress has their own great support center for how to use that section.