How to create BoldGrid Blocks – Adding Content

This tutorial covers creating a custom WordPress Block with the Post and Page Builder.

After mastering the basic structure of a Block, the next step is to add content to your Block within the columns you have laid out. The following guide will walk you through adding content that uses the responsive breakpoints set up within the Boldgrid Theme Framework. We will be using the following example Block that will show 4 full width columns on your phone, 2 rows with 2 columns in each on your tablet, and 1 row with 4 columns on your desktop.

This is the example code we used in the first guide which explains the Block Structure, and we will be adding images to it.

Adding content

1. 1. Login to your BoldGrid website
   2. Navigate to Pages > Add New
   3. Select Blank Page
   4. Select the text editor
   5. Paste your HTML code with images added into the text editor. You will find an example of the code we used below.

1. 1. Select Publish

Congratulations! You now know how to add content to your Block.

Checking the Breakpoints

To check the different screen sizes, and ensure that your Block is set up correctly for them, you can use the viewport preview tool that is built into the Customizer. The following guide will explain how to use the preview tool to check all 3 screen sizes.

1. 1. Select the View Page option in the admin bar
   2. Select the Customize button to open the Customizer
   3. On the bottom left, use the 3 options to select the screen size you want to preview
   4. Move through all 3 device icons to ensure that the Block is showing what you expect

Congratulations! You now know how to add content to your custom Block, and preview it across multiple device types. The next step is to style your custom Block content.