Last updated on

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. Login to your BoldGrid website
    2. Add NewNavigate to Pages > Add New
    3. Select blankSelect Blank Page
    4. Text EditorSelect 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. 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. View PageSelect the View Page option in the admin bar
    2. CustomizerSelect the Customize button to open the Customizer
    3. Preview ToolOn 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.




   200+ Design Templates + 1 Kick-ass SuperTheme
   6 WordPress Plugins + 2 Essential Services

Everything you need to build and manage WordPress websites in one Central place.

Leave a Reply

Your email address will not be published. Required fields are marked *