Documentation

Landing Framework

Landing page templates

Landing page templates can be found in the templates/landingpages/ directory.

Best practice

You can copy a directory, and update the config.php, index.blade.php and preview-01.png files. The _boilerplate directory uses the latest best practice for JavaScript and CSS includes.

-x- classes

Templates and blocks use regular html. Some elements can be made editable in the editor by applying css classes.

These classes are currently available:

  • -x-block: apply to section elements (blocks) that can be moved.
  • -x-text: apply to elements that contain text, e.g. div, p, h1.
  • -x-link: apply to a elements.
  • -x-img: apply to img elements.
  • -x-icon: apply to i elements for font icons.
  • -x-frame: apply to iframe elements.
  • -x-list: apply to div or ul elements, define the child repeater with the data-repeat="a" attribute.
  • -x-frame: apply to iframe elements.
  • -x-video: use to show videos in an iframe and keep correct aspect ratio. Use like this:
<div class="-x-video embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="//www.youtube.com/embed/Vg6DHIdfW-A" allowfullscreen=""></iframe>
</div>
  • -x-countdown: use to show a countdown timer. Use like this:
<h1 class="display-4 mt-3 -x-countdown" data-countdown="{{ \Carbon\Carbon::now('UTC')->addDays(2)->format('Y-m-d H:i:s') }}">
  <span class="day">_</span> day(s) and <span class="hour">__</span>h <span class="minute">__</span>m <span class="second">__</span>s
</h1>
  • -x-share: social share buttons. Use like this:
<div class="-x-share" data-url="" data-title="" data-description="" data-media="" data-hashtags="" data-via="">
  <a href="javascript:void(0);" class="btn btn-sm min-width-40 btn-twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a>
  <a href="javascript:void(0);" class="btn btn-sm min-width-40 btn-facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a>
  <a href="javascript:void(0);" class="btn btn-sm min-width-40 btn-gplus"><i class="fa fa-google-plus" aria-hidden="true"></i></a>
  <a href="javascript:void(0);" class="btn btn-sm min-width-40 btn-linkedin"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
  <a href="javascript:void(0);" class="btn btn-sm min-width-40 btn-pinterest"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
</div>

Edit button position

Sometimes you want to position the edit button on an element, for example because it overlaps another element. You can do this with these attributes:

  • data-attachment: possible values top, right, bottom, left or combinations like bottom right, top left
  • data-target-attachment: possible values top, right, bottom, left or combinations like bottom right, top left

Example usage:

<div class="-x-text" data-attachment="bottom right" data-target-attachment="top right">

Dropdown position

Sometimes you want to position the dropdown that appears when clicking on the edit button on an element. You can do this with this attribute:

  • data-dropdown-position: possible values top or left

Example usage:

<div class="-x-text" data-dropdown-position="left">

Clear cache

If you've updated the screenshot of a template, but you already viewed the preview in the framework, you need to clear the cache in order to generate the updated screenshot. The cached images for landing page templates previews can be found in the directory public\landingpages\template.