Adding Sections

Using Readymade sections

We’ve enriched LiveCanvas with a collection of useful readymade sections to quickly get started in your projects.

Click add new section, the big button on the right bottom of the screen.

As you can see the readymade sections are organised in folders, to ease consultation and choice.

Clicking the thumbnails, you can instantly insert them in the chosen page section, and see how they fit inside your page.

All these readymade sections are just HTML code - and in particular, clean, minimal HTML5 using the Bootstrap classes - meant to maximize speed performance.

You can freely edit them and shape them as you want.

Build your own custom sections via HTML coding

In LiveCanvas you can also build your own sections from scratch.

Just open the HTML Editor feature from the Section’s contextual menu and freely code your masterpiece.

There’s a powerful HTML editor in there that supports auto-indenting, code folding, autocomplete.

You can use the

editable="inline"

and

editable="rich"

attributes to delimitate the areas that have to "stay" editable.

Store and reuse

You can also store your custom sections in a local library, so you can build your own page parts to reuse and remix in your site.

This is done in the WordPress backend going to LiveCanvas > Sections screen.

 

Build your own section from scratch via the Grid builder

When populating new sections, you can use the Grid Builder to divide your horizontal space into columns that vertically stack on screens under a certain width.

Let’s click on Add New Section, and choose the grid builder tab in the panel.

 

As you can see, there are a number of useful readymade grids, covering the typical needs, and customizable via simple options.

 

With the “Container Width” radio button you can decide whether the grid should be housed inside a standard or full width container - as per Bootstrap’s typical structure.

The “Add Section Title Row” checkbox is just a handy feature that will add before your chosen columns scheme a full row with a nice heading and a paragraph that you can easily edit.

 

The columns schema buttons are the real “trigger” of the grid builder.

Upon clicking those buttons your section will be populated with a clean and quite minimal code, implementing the desired grid.

Let's see an example:

 
<div class="container">
<div class="row">
<div class="col-md-12">
<h2 class="display-2 text-center mt-3 mb-0">Section Title</h2>
The subheading text goes here. Explain whats going on in here.</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="lc-block"></div>
<!-- /lc-block --></div>
<!-- /col -->
<div class="col-md-4">
<div class="lc-block"></div>
<!-- /lc-block --></div>
<!-- /col -->
<div class="col-md-4">
<div class="lc-block"></div>
<!-- /lc-block --></div>
<!-- /col --></div>
</div>

As you can see, the grid builder is using plain Bootstrap  classes for the container, the rows and columns.

On another side there are some empty div elements with the .lc-block class.

In LiveCanvas the lc-block class is used to delimitate HTML “blocks”, that we want to be individually editable.

While editing, in practice, the empty lc-block elements that we have in here behave like buttons that open a panel containing a directory of readymade blocks - to let you populate the block itself.