Block Editor Basics

TL;DR

What Is a Block?

When you edit a page or post on your Frame site, everything you add to that page is a block. A block is a single piece of content — a paragraph of text, a photo, a heading, a video, a button, or even a contact form. Think of blocks like building with LEGOs: each piece is its own unit, and you stack and arrange them to build the page you want.

This approach makes it easy to create rich, organized content without any coding or design experience. Whether you're sharing a sermon, adding a bulletin, announcing an upcoming event, or welcoming visitors to your church's homepage, blocks give you the tools to do it simply and beautifully.

Choosing the Right Block

With so many blocks available, it can feel overwhelming at first — but don't worry. Most of the time, the right block is pretty intuitive.

First ask yourself: What am I trying to add to this page?

• A sentence or paragraph of text? Use the Paragraph block.

• A title or section header? Use the Heading block.

• A weekly bulletin? Use the File block.

• A photo? Use the Image block.

• Multiple photos together? Use the Gallery block.

• A YouTube or Vimeo video? Use the YouTube or Video embed block.

• A list of items? Use the List block.

• A call-to-action link? Use the Buttons block.

• Side-by-side content? Use the Columns block.

• A photo and text? Use a Grid Block

If you're not sure which block to use, try searching for what you're trying to do. The block names are straightforward, and hovering over any block in the inserter shows a short description and preview.

Let's Do It Together!

Step 1: Add a Block

1. Position your cursor where you want to add a block.

2. Click the black plus button to add a block.

3. Alternatively, use the blue add button in the upper left corner.

Now you can see the available blocks listed or search for a specific one.

Step 2: Use Slash Commands

1. Type / followed by the block type you want to add.

2. For example, type /file to add a file block.

This allows for faster block insertion without navigating menus.

Step 3: Drag and Drop Blocks

1. To rearrange blocks, click and hold the drag button.

2. Drag the block to your desired location on the page.

This provides an easy way to organize your content layout.

Step 4: Customize Blocks

1. Use the down arrow to shift a block down, or the up arrow to move it up.

2. Adjust headings and text by selecting them and using formatting options.

Now your blocks are customized to fit your design needs.

Step 5: Access Document Overview

1. Press Shift + Alt + O to access the Document Overview.

2. This provides a comprehensive view of all blocks.

You can move blocks directly from this overview.

Step 6: Common Slash Commands

1. Use /heading for headings, /image for images, and /button for buttons.

2. Explore other commands like /quote and /columns.

This will help you efficiently add various elements to your site.

Step 7: Create Links

1. Highlight the text you want to turn into a link.

2. Click on the link button to add your URL.

Your text is now a clickable link for your audience.

Important Notes

• In Frame to build out your page is like building with LEGOs to layout and organize your content.

• First ask yourself, what are you wanting to add to the page?

• In the editor you can't click and drag copy, images, form directly onto the page. They have to be place in their corresponding block

• The block inserter is intuitive when searching for the right block to use.