What Does Each “Block” Do?

Ever wondered what each of the “blocks” do when you're creating a post?
You are here:
Estimated reading time: 5 min

As more members and leaders of Terrasylvae get involved with making posts and writing articles on the website, overcoming the website’s learning curve can be a challenge. Reviewing the How to Post to the Website guide, you’ll learn that each post or article is made up of “Blocks.” Each block is a piece of content, like a paragraph or an image, that you can stack to make a post.

Listed out below are examples of some available block that you can use to build your own posts with, but first, let’s review how to add a block in the first place.

NOTE: This will not cover every single block available, but rather the ones you’re most likely to use. If you would like to learn more about any additional blocks, please reach out to the Sage or one of the Acolytes.

How to Add a Block

Assuming that you’re working on a computer, instead of something like a phone, there are a couple ways you can add a block:

Use the Add Block Button in the Menu

In the top left, you should see a plus icon (+) with a circle around it. Click on that and you’ll open the Block Menu. You can now scroll and hover over each icon to get a small description or example, before clicking on it to add to the page.

Use the Add Block Button in the Post

At the very button of your post, or if you move your mouse icon in between two blocks, you’ll see the same plus icon (+). Click on that and you’ll open up the Block Menu, except it won’t have the descriptions or examples.

Use the Backslash ( / )

Whenever you hit Enter at the bottom of a Block, you’ll automatically create a new space for a Block and can start typing, but if you then type a Backslash ( / ), a quick menu list of some of your most frequently or recently used blocks will appear. You can then quickly click on the one you want and add it right in.

Bonus: Transform Blocks!

When you have a specific Block selected, you’ll be able to see some options for that block, but if you click on the Blocks icon on the left side, you’ll open the Transform menu, which will list out other similar blocks that you can Transform it into.

Examples of Common Blocks

The set of Common Blocks cover some of the most basic pieces who might want to use. They’ll be used constantly and so it pays to be familiar with each of these.

Paragraph Block

The most commonly used Block. This is just a block of text used for each paragraph. You have basic controls like Bold, Italic, Add Link, etc…

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Heading Block

The Heading Block is used for section titles within your post. They help break up the article into more smaller chunks and help highlight what the section is about. Use H2 for main sections and H3 for sections within a section already within an H2.

H2 Heading

H3 Heading

H4 HeadinG

List Block

The List Block allows you to add simple lists to your post. You can use Bullet or Number lists and indent each one with the Indent button.

  • Lorem
    • Ipsum
  • Parale
  1. Lorem
    • Ipsum
  2. Parale

Image Block

The Image Block is simply a block to insert an image. You can upload one of your own, look through the Media Library to find an image that you or someone else might have already uploaded, or use a specific URL as a reference. You can also adjust the alignment and the size of the image to better fit your page or add a caption.

Check out this caption.

Cover Block

The Cover Block allows you to insert an image or video with some text over top of it. You can adjust the color of the text too, if you want.

Cover Block Overlay

File Block

The File Block is a simple way to link to a specific file, like a PDF or image for example, A download button is automatically included and you can adjust the name of the file, so people know what it is before they download.

Gallery Block

The Gallery Block allows you to upload or select from the Media Library several images and compile them together into a gallery. You can decided how many columns you want, how they align, and other settings.

Quote Block

The Quote Block changes a piece of text into a more eye-catching quote with an included citation.

This is the default Quote style

This is the citation

This is the Large Quote style

This is the citation

Audio Block

The Audio Block lets you upload, select, or reference an audio file and inserts an easy to use audio player.

You can even caption it.

Video Block

The Video Block allows you to upload, select, or reference video files and display them on the page. This is not to be confused with a YouTube block which allows you to embed YouTube videos. There is a file size limit of 512 MB when using the Video Block.

Examples of Formatting Blocks

The set of Formatting Blocks can help you repurpose basic text into more specific and less often used formats, hence the formatting.

Accordion Block

The Accordion Block lets you group several blocks into a clickable drawer that will hide whatever is inside until it is open. This page is full of accordion blocks!

Pull Quote

A less common form of quote block is the Pull Quote. Instead of quoting a famous person or saying, a pull quote highlights a quote within the article for dramatic affect.

This is the default pull quote

This is the citation if needed

This is the solid color pull quote

This is the citation

Table Block

The Table Block lets you set up a simple table grid with rows and columns. It’s a very popular way to showcase spreads of information.

HeaderHeaderHeader
StuffBunch of ThingsWhat’s that over there?
ThingsMore StuffWhat? Where?
This is the default table without fixed widths
HeaderHeaderHeader
StuffBunch of ThingsWhat’s that over there?
ThingsMore StuffWhat? Where?
This is the stripes table with fixed widths

Examples of Layout Blocks

The set of Layout Blocks are specifically designed to help you create posts and articles that aren’t just a giant wall of text. It does take a little practice to develop your eye for design, but once you get the hang of it, you’ll find it easy to layout articles the way you want.

Media & Text Block

The Media & Text Block gives you space to pair together media like an image or a video with a block of text or other content.

Heading Block

Paragraph Block with an image on the left side. The text aligned to the top.

Heading Block

Paragraph Block with an image on the right side. The text aligned to the middle.

Heading Block

Paragraph Block with an image on the left side. The text aligned to the bottom.

Spacer Block

The Spacer Block allows you to put space between two blocks. It can help separate content that may be too close together and make it easier to read or notice. I have found that setting it between 20-50 is usually enough. The white space below is set to 50 pixels.

Column Block

The Column Block gives you the options to place blocks in columns next to each other rather than just one top of each other.

Button Block

The Button Block takes what could be a normal link and turns it into a larger button to click on.

More blocks to be added soon!

Tags:
Did you find what you were looking for?
Not really... 0 0 of 0 liked this article.
Views: 13

Do you have any questions on how to add blocks or how any of them are used?

Leave a Comment

Library Topics

Common Tags

Check out these

recent comments

Forum Comments