Working with Borders in BoldGrid Premium Blocks

While our blocks are professionally designed to work out of the box, sometimes you may want to further customize them to fit the look and feel of your site.

Today we’re going to learn how to work with borders. In this example, we will change the design of a specific premium block in BoldGrid’s Post and Page Builder Premium Plugin. Keep in mind that what you learn in this article can be used to create a border on any block!

Start by creating a new page, and click the Add Block button. From the drop-down menu on the right side of the screen, select the Premium under Type and your desired industry under Category. Since the blocks are randomly generated, you may have to scroll to find the block we’re learning about today. It looks roughly like this (we are using BoldGrid Crio.)

First we’re going to change the borders – starting at the top. Move your mouse between the top border and the Heading 2 box, until a blue popover appears above the border. Click the hamburger menu and then select Advanced Control.

The 3rd icon down is for the border – from here you can change the border type, width, and color.

To keep the overall design intact, we recommend you only change the elements we are changing.

For reference, these are the starting values:

We decided to change the Border Type to Double, set the Border Width on Top and Left to 15 instead of 4, and changed the border color to match the buttons. When you click the Border Color at the bottom of the panel, you will be able to use your palette colors easily, or pick any color you’d like.

The top border has been changed and our section now looks like this:

Now we will make the bottom border match the top. Move your mouse between the bottom of the box and the border, and click the blue popover’s hamburger menu. Repeat the steps above to change the same border controls on this column, but this time only the Right and Bottom positions will have a border.

Congratulations! You have successfully changed the style and color of your border. After repeating these steps for each border on the page, we have this:

How to Remove a Border

If you’d like to try a slightly different style you can remove two of the borders from the bottom row. We’re going to make this box match the top by removing the top right and lower left borders.

Move your mouse between the box and the border you’d like to remove. Click the blue popover’s hamburger menu and then Advanced Controls. From the border controls, set the Border Type to None.

This new design looks a little cleaner than the other one, but less attention is drawn towards the bottom row.

Feel free to experiment with different borders on these boxes, they are perfect for learning. And remember – border controls for most elements can be found under its’ Advanced Controls.

Get Post and Page Builder Premium

The Post and Page Builder Premium Plugin is also available as part of the suite of plugins, tools and services activated by the BoldGrid Premium Connect Key.