Documentation

Landing Page Platform

Create and add your own HTML web blocks

File naming conventions

Web blocks are Bootstrap based sections and can be found in the /blocks/ directory. Currently these categories are available:

  • /blocks/actions/
  • /blocks/content/
  • /blocks/footers/
  • /blocks/forms/
  • /blocks/headers/
  • /blocks/images/
  • /blocks/maps/
  • /blocks/navigation/

They're named like actions-01-00.php, the file name can be broken down like this:

  • actions: this is the same name as the directory
  • 01: primary number, increasing number and starting with 01
  • 00: secondary number used if there're multiple variations of a block, increasing number and starting with 00

If you wanted to create a new action block, you could name it actions-03-00.php.

Thumbnail image

Every web block has a corresponding thumbnail image which can be found in the /blocks/assets/screenshots/ directory. The image is 250 pixels wide and named like [web block name]-250.png. In the case of the example above it would be actions-03-00-250.png.

Web block anatomy

The easiest way to create a new web block, is to copy an existing one and modify it. If you open up a web block file, you'll notice they all start with a <section> tag and end with a </section> tag. That's required.

<section>
    <div class="bg-img-editable">
        <div class="bg-color-editable bg-color-start-white">
            <div class="web-block">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-sm-6 text-md-right">
                            <a href="#" class="link-editable btn btn-primary btn-lg btn-xs-block btn-md-inline-block">Call us today</a>
                        </div>
                        <div class="col-xs-12 col-sm-6 margin-xs-t-20 margin-sm-t-0">
                            <a href="#" class="link-editable btn btn-default btn-lg btn-xs-block btn-md-inline-block">Buy this</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

CSS Classes

Furthermore, you'll notice certain CSS classes. These CSS classes are used to define user editble content.

Class Element Editor Options
.text-editable div, p, h1, h2, h3 WYSIWYG -
.img-editable img Image browser -
.bg-img-editable div Image browser -
.link-editable a Text / link popover use .href-editable to disable text
.icon-editable i Icon browser -
.iframe-editable iframe Generic iframe -
.bg-color-editable div Color picker -

WYSIWYG

To make texts editable you can use the .text-editable class. This can be put on a div containing the text, in which case the full featured editor will show once clicking the element, or directly on a text element (p, h1, h2, etc.), in which case a compact version of the editor will show.

You can use Font Awesome 4.2 in the content.

Examples
<div class="text-editable">
    <h1>This head is editable</h1>
    <p>This paragraph too, all with the full featured editor!</p>
<div>
<h1 class="text-editable">This head is editable</h1>
<p class="text-editable">This paragraph too, with the compact editor!</p>

Images

Images can be made editable by applying the img-editable class.

Example
<img class="img-editable img-fluid" src="path/to/image.jpg">

Background images

Background images can be made editable by applying the bg-img-editable class.

Example
<div class="bg-img-editable" style="background-image:url(path/to/image.jpg)">

Sometimes you only want to make a link (i.e. button) editable. This can be done with the .link-editable class. This will make both the href as the text editable. If you only want to make the href editable, add the class .href-only.

Examples
<a href="#" class="link-editable btn btn-default">This is a button</a>
<a href="#" class="link-editable href-only btn btn-default"><i class="icon-button"></i></a>

Icons

For icons the Icons Mind library is used. Make an icon editable with the .icon-editable class.

Example
<i class="icon-editable icon-Add-Cart"></i>

IFrames

With the .iframe-editable class users can manually update the source of the iframe.

Example
<iframe class="iframe-editable" src="about:blank"></iframe>



Related