Coming soon: Landing Framework - White label marketing for agencies.

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