1. Home
  2. Using the AccessAlly Theme with Gutenberg

Using the AccessAlly Theme with Gutenberg

Skill Level: Beginner

Gutenberg is the built-in page builder used in WordPress. This builder is drag-and-drop, beginner friendly, and flexible. We recommend using Gutenberg with the AccessAlly Theme as they work great together.

This article will cover the basics as related to AccessAlly.

If you’d like a comprehensive tutorial on Gutenberg, check out this free training from WPBeginner.

Offering Page Design

With the AccessAlly Theme and Gutenberg, you have the flexibility to create different page design layouts to fit your needs. Each page is designed using Gutenberg and you bring AccessAlly items in (like objective checklists, private notes, and media) using the Shortcode Generator.

Before building your page design layouts in Gutenberg, it may be helpful to map out what you’d like on each page.

The AccessAlly Theme

When using the AccessAlly Theme, your sidebar will display the Offering icon, progress bar, and list all pages in your Offering, this is created automatically for you in the AccessAlly Theme.

Gutenberg blocks are used to design the right side content section of your pages.

Offering Page Layout Example

Here is an example of a page created in Gutenberg. This page uses multiple block types to create the design look and feel of the page.

Base page example in AccessAlly Theme

Gutenberg Blocks Used in Layout Example

There are 10 Gutenberg blocks used to create the page design layout shown above. You can follow the list below as a guide, or experiment with different blocks to customize your Offering pages.

  1. Page Title – this is the name of the page you created in the Offering
  2. Heading – holds welcome to the course message
  3. Paragraph – holds a text intro to the course
  4. Shortcode or Custom HTML
    • Shortcode block (Pro + Community Users) for the AccessAlly media shortcode to display video
    • Custom HTML (Essentials Users) holds your video embed code
  5. Spacer – adds space after the video
  6. Heading – holds progress wording
  7. Spacer – adds space after heading
  8. Shortcode – (Pro + Community users) holds a ProgressAlly Objective checklist
  9. Spacer – adds space after shortcode
  10. Shortcode – holds the Offering Navigation shortcode for previous and next buttons

Using Gutenberg Blocks

Click the settings icon (shown by orange arrow in image below) to bring up the side panel. There are two ways to add blocks.

  1. Click the blue “+” to bring up the blocks side panel with drag and drop blocks
  2. Click the black “+” to add blocks in the exact spot on the page

You can hover over any section of the page to create new blocks and the “+” button will appear.

After placing blocks, you can move them up or down, duplicate them, and customize them to your liking within each block.

Gutenberg Block Styles

Here are some of our favorite Gutenberg blocks for building Offering content pages.

  1. Page Title – name of the page
  2. Heading – add headings to call attention
  3. Paragraph – add text and links
  4. Shortcode – most often used with the AccessAlly Shortcode Generator
  5. Spacer – create space between items
  6. Image – add and link images
  7. List – create bulleted or numbered lists
  8. Columns – create a grid effect and add text, buttons, or images
  9. Buttons – add buttons with your choice of link and button text
  10. Custom HTML – perfect for video embed code if using AccessAlly Essentials
  11. Classic – adds a visual editor, text editor, and shortcode generator in a single block

Page Title

The page title is created by AccessAlly when adding pages to an Offering. You can edit or make changes to the page title if you’d like.

Page Title Block in Gutenberg


Here’s an example of the heading block. You can add items from the AccessAlly Shortcode Generator to a heading to create a personalized experience.

Headings are great for breaking up page copy to create sections.


Easily add text, links, and page copy with the paragraph block.


This block type is useful when adding items like progress objectives or video to your pages. You can get the shortcodes from the AccessAlly Shortcode Generator and paste them in.

Shortcode block in Gutenberg


Add images to your pages.

Image block in Gutenberg


This handy block lets you add space between items.

Spacer block in Gutenberg


Use this to add bullet point or numbered lists to your pages.

List block in Gutenberg


This block style is used to add multiple columns to a page. You can select a pre-set column style and add more columns by clicking the “+” between columns.

After adding columns click the “+” in a column to fill with your desired blocks.

Columns in Gutenberg


Add buttons with text and links to your pages.

Buttons in Gutenberg

Custom HTML

Add custom HTML using this block type. If using AccessAlly Essentials this block type is perfect for embedding videos.

Custom HTML block in Gutenberg


The classic block is the original rich text/HTML content editor used by WordPress before Gutenberg was released. This block style offers the AccessAlly Shortcode Generator, visual tab, and text tab.

This block style is quick and easy to use, but does not offer drag-and-drop, columns, or buttons.

Sales & Landing Pages

In every AccessAlly Offering you have the option to create public pages, these pages are most often used to create sales pages and landing pages.

If you are looking for a drag-and-drop page builder with pre-made layouts to create sales and landing pages, we recommend the Spectra plugin.

This plugin works well with the AccessAlly Theme and Gutenberg blocks!

Updated on June 7, 2024
Was this article helpful?


If you have any questions, we're just an email away.

We take your success seriously, and you'll always get a speedy reply from a real person during business hours.

Laptop with the AccessAlly demo site

AccessAlly is the most flexible way to sell and elegantly deliver digital offerings. All in one place.


You'll get follow-up emails about AccessAlly and new features. Opt out anytime. Full privacy policy here.