Using the Custom Block Option
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}} 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:
|
Welcome to the rave7 on-line documentation.
Use the links at the left side of this page to navigate through the documentation.
In order to edit anything in a rave7 managed web site, you first must assign security rights to the desired users.