Blocks are the basic building unit of the template. Everything inside the template is made up of blocks. This speeds up the creation and editing of the template, making it solid and in one style.
Blocks are added via popup adding a block, which is accessible by clicking the plus button on the toolbar.
Here is an example of how you can create a block and place an image and text component in it.
Revolvapp.add('block', 'block.block-name', {
mixins: ['block'],
type: 'block-name',
title: 'My block',
icon: '<svg ...></svg>',
section: 'misc',
build: function() {
// block
this.block = this.app.create('tag.block', {
padding: '40px'
});
// components
var image = this.app.create('tag.image', {
placeholder: true
});
var text = this.app.create('tag.text', {
html: this.lang.get('placeholders.lorem'),
margin: '10px 0 0 0'
});
// add
this.block.add(image);
this.block.add(text);
}
});
The block has several parameters:
one
, two
, three
are sections by the number of columns in a block; and misc
for any other blocks.Here is an example of how to connect a block file. Just connect a link to the block js file after the Revolvapp file. The block will be added to Revolvapp automatically and will appear in popup of block adding.
<!DOCTYPE html>
<html>
<head>
<title>Revolvapp</title>
<meta charset="utf-8">
<!-- revolvapp css -->
<link rel="stylesheet" href="/revolvapp-dist/revolvapp.min.css" />
</head>
<body>
<!-- element -->
<div id="myemail"></div>
<!-- revolvapp js -->
<script src="/revolvapp-dist/revolvapp.min.js"></script>
<!-- my new block -->
<script src="/path-to-blocks/my-block.js"></script>
<!-- call -->
<script>
Revolvapp('#myemail', {
editor: {
path: '/revolvapp-dist/',
template: '/my-folder/template.html'
}
});
</script>
</body>
</html>