Types of Blocks

Jayla Nelson
|
52 steps
|
4 minutes

Tarleton

Paragraph

When you first log in to the editor, if you just start typing, you'll be using the "Paragraph" block. This is used for large sections of text. You can add lists here as well.

Image

The "Image" block is used to add a picture

You can choose to upload from your device or browse the Media Library

Choose the image you want to add to the page

Click "Select"

This caption can be removed. If you choose to keep it, make sure it is descriptive. For this image I would type "Statue of Tarleton's Class Ring"

Insert Before / After

To add something after a block, select the three dots on the right side of the block options

Select "Insert After" To add something above the block you are currently working on, you'd select "Insert Before"

You can also select the black "+" button to pull up block options

Media & Text

A media text block is useful for adding context to an image. The most common use for this block type is employee contact information, but it can also be utilized for other content

Choose where you want to get your image from - uploaded from your device or from browsing the media library

Select the image you want to add

Click "Select"

You can use these small dots to adjust the size of the image

Click here to add your content

Here I have added Dr. Lewis' contact information, but I want to give him a job title.

Paragraph into Header

I typed his job title (AVP), then I highlighted the word I wanted to turn into a Heading

Click the Paragraph icon, the select "Heading" from the dropdown

YouTube Embeds

The "YouTube" block can be used to embed YouTube videos onto your webpage

You'll copy the video's URL and paste it into the block. You do not need to get the embed code. All you need it the URL that appears in your browser.

Vimeo Embed

Vimeo works in the same way as YouTube. The Vimeo block can be used to embed Vimeo videos onto your webpage.

Browse All Blocks

Selecting "Browse all" will pull up all the blocks that WordPress has to offer

Accordions

Click "Advanced Accordion"

You can change the "Header text" to whatever you want that section to be called

Click "Type / to choose a block". In here, you can add whatever content you want. Accordions can hold images, lists, text, buttons, etc. You can also modify the color and the icon of accordions by using the toolbar that appears on the far right hand side of the screen.

Tabbed Content

Click "Advanced Tabs"

Click "Type / to choose a block". In here, you can add whatever content you want. Tabs can hold images, lists, text, buttons, etc. You can also modify the color and the icon of tabs by using the toolbar that appears on the far right hand side of the screen.

Select the Tab to edit the title of each tab

Tables

Click "Advanced Table"

Adjust the number of columns and rows that you will need, then select "Create" You can always adjust the size of the table after initially creating it.

Add whatever content you want into each cell of the table.

Columns

Click "Columns Manager"

Choose the dimension of the columns that you want. We recommend only going to 4 columns maximum based on the content you are putting in there.

Click "Add block" (the + sign) Columns typically hold text, images, and lists.

Buttons

Choose "Advanced Buttons" There are other button options, but our team has found that the advanced buttons are the easiest to use and have the most features

You can change the words that appear on the button. Use this space to tell your audience exactly what they are going to see when they click the button

NEVER use "Click Here", "More", "Read More" Instead use "Learn More About Financial Aid", or "Apply for Graduation"

The Link URL is where the button is going to send the user when they click on it.

The icon with a thick bar between two smaller bars is used to adjust the width and alignment of buttons

"Background color" is used to change the color of a button

Spacer

A "Spacer" is used to add white space or padding between blocks

Use the dot to adjust the width of the white space. Note: the width in the editor will not be an exact match to how it will look on the live site

Separator

"Separator" is used to add space between blocks, but with a visible separating line

The thick bar between two thinner bars can be used to adjust the alignment of the separator

Social Media

Click "Social Links" (There are other social media options but this one is the easiest to use)

Select the "link" icons and use the icons on the far right hand side to change the social icon

WordPress already lists the most popular social medias, but you can also upload one if you don't see the one you need

Click the "Enter social link…" field and copy/paste the URL of the social

Delete a Block

To delete a block, click slightly above the block that you are wanting to delete.

The small bar should appear above the block you want to delete. Select the three small dots

Click "Remove Advanced Button"

For something like a Media & Text block or Columns, make sure you capture the entire block and not just a small section. A bar should appear all around the edges of the entire block to ensure you've selected the whole thing.

Follow the previous steps and Click "Remove Columns Manager Shift+Alt+Z"