Developer

component

block-component or -block-component: true

Stand-alone piece that can be added throughout a template.

Is shown as part of a library on the left sidebar
A Component can always be removed
A dashed red line is shown where a Component can be dropped in
A dashed red outline is shown when mousing over a Component along with its options

Example


      <a href="#" class="block-component" data-style="button" style="background-color: #333333; padding: 5px 10px; color: #fff;">Call to Action</a>

style

data-style="variable-name" or -style-var: 'variable-name'

Multiple versions of a Component that can be switched between.

The same variable name should be used for all Style blocks that apply to its Component
Style blocks should be adjacent to each other
Numbered tabs are shown to switch between the available Styles
Optionally, use Stored Content for content to get updated within each Style version

Example


      <a href="#" class="block-component" data-style="button" style="background-color: red; padding: 5px 10px; color: #fff;">

      <a href="#" class="block-component" data-style="button" style="background-color: blue; padding: 5px 10px; color: #fff;">

      <a href="#" class="block-component" data-style="button" style="background-color: yellow; padding: 5px 10px; color: #fff;">Call to Action</a>

Implementation Support

Need help implementing your template? Here are some options:

Watch a video tutorial of a live implementation
Take a look at an example template made fully editable
Message us – we'll setup a screen share to review your template

Components

component

Example

style

Example

Implementation Support