Explaining Expected HTML Markup for Custom Blocks

BoldGrid Blocks is already known for being easy to customize so that you can quickly and efficiently create spectacular web designs that will make your site stand out. But sometimes, it may be necessary to use a Block that isn’t pre-designed by BoldGrid.

When this happens, you will need to create a custom Block for your special purpose.

Luckily, this is a fairly easy thing to accomplish, provided you have a working knowledge of HTML and CSS. With that in mind, here’s a primer to help you create custom BoldGrid Blocks.

Creating Custom HTML Blocks

Before we begin, you should realize that the BoldGrid Block system is based on Bootstrap and works as a grid system. If you have some familiarity with Bootstrap, then this should be simple to pick up.

This system allows the Blocks that you custom design to fit correctly on a screen regardless of that’s screen size and dimensions. So, let’s first look at the code for layout for a basic Block:

With this code, the second line (class=”container”) defines the width of the page as being fixed. The width is pre-determined by the Cascading Style Sheet (CSS) that was created when you chose your theme for the page.

Bootstrap uses a layout that is built around rows that are a total of 12 columns wide. You can, therefore, have one long row that is 12 columns wide, or you can split the row up proportionally, such as having two rows 6 columns wide, three rows that are 4 columns wide, and so on. But the total length of the rows can never exceed 12 column blocks on the grid. With this in mind, if you want to create a content Block that is full length (12 columns wide), then you would use the following code.

This code will display one full-width row that will display in that manner, regardless of what device it is seen on. In other words, it will display the same on a desktop computer as well as mobile devices such as a smartphone or tablet. If you wish to change the number of rows or width of those rows, then you would simply manipulate the code to achieve your desired Block layout.

Adding the Content to Your Site

In order to add this content to your BoldGrid website, simply log into your site and maneuver through the menus to Add a Page. Once you do this, select Text Editor and then paste in the HTML code you need for the custom Block along with any images that you want to be placed on the page.  For instance, it might look like this example:

After you enter this code into the text editor, select Publish and your custom Block with content will be added to your BoldGrid page. From here, you can continue to add more Blocks with content until you create the website design that you desire.

Creating custom designed Blocks for your BoldGrid Blocks-based website is fairly easy once you get started. If you have a working knowledge of HTML, it will obviously be easier, but by following these templates and samples, even a novice will be able to create Blocks that work best for their needs.