How to Add Different Layout Blocks in WordPress

WordPress

The WordPress editor offers a variety of layout element blocks, such as Buttons and Spacers, that can enhance the visual appeal of your pages and posts. You can locate them in the Layout Elements section of the Add block menu. Now, let’s explore the process of adding 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

To incorporate images into your pages or posts in WordPress using the block editor, simply follow these instructions.

  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 are able to include a video block in your posts or pages on 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 want to include several images on your WordPress site, you can insert an image gallery block into your posts or pages.

  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

A custom HTML block can be incorporated into your WordPress site.

  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 consists of a collection of blocks that offer a fast way to incorporate media-rich content into a WordPress page.

  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 consists of a collection of blocks organized in a set layout to display products on your website. You can specify a title, description, price, and include an image within 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 the latest updates and posts.