Using the Custom Block Option

If you are a web developer then the custom block option allows you to create your own re-usable blocks. Our Page Builder uses Yahoo Bootstrap so a working knowledge of bootstrap is required. To begin, drag the custom block onto the desired page.   This will immediately open the block setup window:

The Block Template area is where you enter the bootstrap based HTML. By default, the block will already be wrapped with div class="content" and div class="row". So all you need to do is provide the desired columns. To begin with a simple example, you you wanted to create a single column with a full browser width image you would enter:

Notice the use of the {{image1}} macro. This is a place hold that allows you to dynamically change the the desired image using the block editor tools. (more on this later). If you wanted to create 2 side-by-side images, you would first, change the col-md-12 to col-md-6, then click on the "edit block items" button:

Doing so will display the area that allows you to edit the various elements of a block record.

When we initially created this block, we used the {{image1}} macro. So currently, we have 1 record with the ability to edit the image. Since we want two side-by-side images, we would click on the "Save As New" button to create the second record:

We now have 2 records that we can edit and since our block HTML code has a single 6 column div, it will result in two 6 column divs.

Let's build on this example. Let's add a title under the image. To do so, edit the block, go back into the "Edit Block Properties" button and make the following adjustments:

Once you, when you go back into the "Edit Block Items" area, you will now have a title entry field where you can enter the desired title for the block. So by using the {{fieldname}} macro, the system dynamically adjusts the block item edit form.

Here's a list of all the fields you can use for your blocks:

{{{image1}}
{{{image2}}
{{{image3}}
{{title}}
{{description}}
{{title2}}
{{link1}}
{{link2}}
{{linktext1}}
{{linktext2}}
{{videolink1}}
{{videolink2}}
{{icon1}}
{{icon2}}
{{buttonbackground1}}
{{buttonbackground2}}
{{buttonforeground1}}
{{buttonforeground2}}
{{buttontext1}}
{{buttontext2}}

To add styles, add the desired IDs and classes to you HTML, and use the global CSS editor to enter your CSS:

Consider the following block:

Here's the code: