How to Add Different Layout Blocks in WordPress

There are many layout element blocks available in the WordPress editor, from Buttons to Spacer, that can help create visually impactful pages and posts. They can be found in the Add block menu in the Layout Elements section. Let’s find out how to add a generic block in WordPress.

  1. Open the block editor or click on the add post button.
  2. Locate and select the Add block icon.
  3. From the accordian list of blocks, choose the one you want to use.
  4. Each block has it’s own settings you can change, which are in the right menu bar.
  5. You can preview the changes you made by clicking the Preview button.
  6. Once you have finished adding the blocks you need, select Publish.

1. Add an Image Block in WordPress

You can add images to your pages or posts in WordPress with the block editor by following these steps.

  1. Open the block editor.
  2. Select Add block.
  3. Select Image from the Common Blocks section.
  4. Choose how you want to add the image:
    • Upload – Select images stored on your own computer.
    • Insert from URL – Provides a field to paste the URL of an image that is already hosted online.
    • Media Library – Allows access to Stock Photos and the Media Library.
  5. You’ll either need to select the Import or Select button, based on where you’re adding the image from.
  6. You’ve now added an image to your page or post!

2. Add a Video Block in WordPress

You can add a video block to your pages or posts in WordPress.

  1. Open the block editor.
  2. Select Add block.
  3. Select Video from the Common Blocks section.
  4. Choose how you want to add the video:
    • Upload – Select media stored on your own computer.
    • Media Library – Allows access to Stock Photos and the Media Library.
    • Insert from URL – Provides a field to paste the URL of a video that is already hosted online(e.g. YouTube), this is the most common choice for videos.
  5. Select Insert from URL.
  6. Paste the URL for your video into the provided field.
  7. Select Apply.

3. Add an Image Gallery Block in WordPress

If you need to add multiple images to your WordPress website, you can add an an image gallery block to your pages or posts.

  1. Open the block editor.
  2. Select Add block.
  3. Select Gallery from the Common Blocks section.
  4. Choose how you want to add images to the gallery:
    • Upload – Select images stored on your own computer.
    • Media Library – Allows access to Stock Photos and the Media Library.
  5. You’ll either need to select the Import or Select button, based on where you’re adding the image from.
  6. Select Create a new gallery.
  7. You can reorder your images, add a caption as well as the meta data for your images.
  8. Select Insert gallery.

4. Add a Custom HTML Block in WordPress

You can add a block with custom HTML to your WordPress website.

  1. Open the block editor.
  2. Select Add block.
  3. Select Custom HTML from the Formatting section.
  4. Paste your HTML code snippet into the field provided.
  5. You can preview the code by selecting the Preview tab.

5. Add a CoBlocks Media Block in WordPress

The CoBlocks Media & Text block is a group of blocks which provide a quick method to add media rich content to a page in WordPress.

  1. Open the block editor.
  2. Select Add block.
  3. From the Layout Elements section, select the Media & Text block.
  4. Add blocks within this group as needed to express your intent. Pressing the Enter key will add space for another block if necessary.
  5. Once you’re finished, select Update to publish the changes.

6. Add a CoBlocks Food & Drinks Block in WordPress

The Food & Drinks block is a grouping of blocks arranged in a pre-defined pattern to showcase products on your site. You can define a title, description, price as well as add an image in the block.

  1. Open the block editor.
  2. Select Add block.
  3. From the CoBlocks section, select the Food & Drinks block.
  4. Place the cursor in the Menu title and type the title.
  5. For each menu item, add a title, description and price.
  6. Optional: To use the icons, in the block settings, expand the Item settings and check the boxes for the ones you want to use.
  7. Optional: To add an image, in the block settings, toggle Image.
  8. Optional: To include additional menu selections, continue filling in the blocks.
  9. Once you’re finished, select Update to publish the changes.

You can also add additional Menu sections by adding a new Food & Drinks block.

Thanks for visiting. For queries and suggestions, emails are welcome at learnweb@hostingcolumn.com.

Subscribe to Hosting Column for latest updates and posts.