@innovastudio/gb v1.0.7
Readme
To get started with basic example, please open example.html
(please open from localhost or on your hosting).
If you want to use the builder in a ready to run application, you can install the Simple CMS project on your website. Simple CMS project runs on PHP hosting. You can download the project from your account area:
https://gridlessbuilder.com/my-account/Please check also the step-by-step implementation guide on:
https://gridlessbuilder.com/simple-cms/For usage in React or Vue, please download the example projects in your account area.
Documentation
The package contains 3 libraries:
- GridlessBuilder.js ver 1.3.23 (the builder)
- Gridless CSS framework ver 1.9 (the gridless css framework)
- Template library (templates that you can use for your content)
GridlessBuilder.js
Usage:
Include the required js & css:
<link href="assets/gridless/gridless.css" rel="stylesheet" type="text/css" />
<link href="dist/gridlessbuilder.css" rel="stylesheet" type="text/css" />
<script src="dist/gridlessbuilder.min.js"></script>Run:
var builder = new GridlessBuilder({
wrapper: '.is-wrapper',
});You can see sample implementation in example.html.
For documentation on options, methods & events, see below.
Gridless CSS framework
As you can see on the usage above, a css named gridless.css is used. This css is part of Gridless CSS framework, a framework to implement responsive design without the need of css grid.
Gridless CSS framework contains 2 files: gridless.css and gridless.js (located in assets/gridless/ folder). You need to use:
- gridless.css => on the builder page and in production.
- gridless.js => on production only (not needed by the builder)Built-in template library
GridlessBuilder.js comes with built-in templates. When using the builder, you can add section from templates by clicking the (+) add button on the top right toolbar, and then select "Templates".
The templates library is in the form of JSON file:
assets/sections/templates.jsYou can add your own templates by modifying this JSON file. Just use the same JSON structure as in the existing templates.
Some of the template uses icons from Ionicon. You will also need to include the icon css on the builder page and in the production (for viewing content):
<link href="assets/ionicons/css/ionicons.min.css" rel="stylesheet">What's needed in production (for viewing the result)
When editing using the builder, you can view the result by clicking ... more button on the top right toolbar, and then click the "Preview" button. A separate page named preview.html is opened showing your page result (as in production website).
You can use the preview.html as example on how you can view the result in production (please check the preview.html code).
For viewing the content, you need to include:
1) Gridless CSS framework
<link href="assets/gridless/gridless.css" rel="stylesheet" type="text/css" />
<script src="assets/gridless/gridless.js"></script>2) Ionicon css
<link href="assets/ionicons/css/ionicons.min.css" rel="stylesheet">3) Optional Scripts:
Note: GridlessBuilder has slider feature, scroll animation and Lottie support. These features requires some additional scripts.
a) Glide Slider: (use this if you want to enable the slider feature. You also need to include this on the builder page)
<link rel="stylesheet" href="assets/scripts/glide/css/glide.core.min.css">
<link rel="stylesheet" href="assets/scripts/glide/css/glide.theme.css">
<script src="assets/scripts/glide/glide.min.js"></script>
b) Skrollr: (use this if you want to enable the scroll animation feature. You also need to include this on the builder page)
<script src="assets/scripts/skrollr/skrollr.min.js"></script>
<script>
setTimeout(function () {
window.skrollr = skrollr.init({
forceHeight: false,
mobileCheck: function () { return false; },
smoothScrolling: true,
smoothScrollingDuration: 1500
});
window.skrollr.refresh();
}, 100);
</script>
IMPORTANT NOTE:
Usage of Skrollr script is experimental.
We cannot guarantee future support of this feature as it uses external script.
c) Lottie Player: (use this if you want to enable lottie animation. Don't use this on the builder page. Use this on production only.)
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js" integrity="sha512-BB7rb8ZBAxtdJdB7nwDijJH9NC+648xSzviK9Itm+5APTtdpgKz1+82bDl4znz/FBhd0R7pJ/gQtomnMpZYzRw==" crossorigin="anonymous"></script>Folder Structure:
assets/ fonts/ ............. the builder asset: font preview images for easy font selection mockups/ ........... the builder asset: mockup images that can be inserted on content styles/ ............ the builder asset: typography style set for content lang/ .............. the builder asset: language file sections/ .......... built-in templates library library/ ........... built-in free sample images for content ionicons/ .......... icon css for content scripts/ ........... scripts used by the content and the builder gridless/ .......... the gridless css framework gridless.css gridless.js dist/ ................... gridlessbuilder script gridlessbuilder.css gridlessbuilder.min.js scss/ ................... gridlessbuilder source (scss) gridlessbuilder.scss src/ .................... gridlessbuilder source (js) => included in source code license package uploads/ ................ default folder for users' uploaded files (images, videos or Lottie files)
example.html ............ example => START WITH THIS!
example.php ............. example in PHP savepage.php ............ needed by example.php for saving content
uploadimage.php ......... a simple image upload handler in PHP uploadvideo.php ......... a simple video upload handler in PHP uploadlottie.php ........ a simple Lottie file upload handler in PHP
example.aspx ............ example in ASP.NET uploadimage.ashx ........ a simple image upload handler in .NET uploadvideo.ashx ........ a simple video upload handler in .NET savecontent.ashx ........ Used by example.aspx (a handler for saving content)
images.html ............. example of image file selector videos.html ............. example of video file selector lottiefiles.html ........ example of Lottie file selector
readme.txt (this file) license.txt whatsnew.txt readme-sourcecode.txt (only in source code license package)
More Examples
For example in PHP, in addition to the basic HTML example (example.html), you may want to check the step-by-step guide on:
https://gridlessbuilder.com/simple-cms/ (This step-by-step project is a ready to use simple CMS in PHP that implements the GridlesBuilder.js)
For usage in React or Vue, please download the example projects in your account area.
GridlessBuilder.js Documentation (Options, Methods & Events)
Options:
var builder = new GridlessBuilder({
wrapper: '.is-wrapper',
// onImageUpload: function() {},
// onVideoUpload: function() {},
// onLottieUpload: function() {},
uploadImageHandler: 'uploadimage.php', // optional: if used, will enable image upload
uploadVideoHandler: 'uploadvideo.php', // optional: if used, will enable video upload
uploadLottieHandler: 'uploadlottie.php', // optional: if used, will enable Lottie json upload
customval: '', // optional: in case you want to pass custom variable for the upload handler
colors: ['#f9a825', '#ef6c00', '#e43838'], // default color palette
fontAssetPath: 'assets/fonts/',
mockupPath: 'assets/mockups/',
contentStylePath: 'assets/styles/',
iconAssetPath: 'assets/ionicons/',
gridlessPath: 'assets/gridless/',
imageLibraryPath: 'assets/library/',
scriptPath: 'assets/scripts/',
previewUrl: 'preview.html', // used for previewing your content
templates: [
[1, 'With Examples', 'assets/sections/templates.js', 'assets/sections/'],
[2, 'Base Templates', 'assets/sections/templates-base.js', 'assets/sections/']
], // List of templates installed
showEditTextInfo: 'once', // once | always
paste: 'text', // text | html-without-styles | html
elementSelection: true, // Specifies the behavior of CTRL/CMD-A for text selection
codeFormatting: true, // Use advanced code editor or simple textarea
parallaxControl: true, // Show/hide parallax control
includes: ['assets/scripts/glide/css/glide.core.min.css',
'assets/scripts/glide/css/glide.theme.css',
'assets/scripts/glide/glide.min.js',
'assets/scripts/skrollr/skrollr.min.js',
'https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js'], // List of script to be included for previewing content within the builder (here we use a slider, scroll animation & lottie player script)
imageSelect: 'images.html',
videoSelect: 'videos.html',
lottieSelect: 'lottiefiles.html',
imageLibrarySelect: 'library.html',
fileSelect: 'files.html'
// onImageSelectClick: function() {},
// onVideoSelectClick: function() {},
// onLottieSelectClick: function() {},
// onFileSelectClick: function() {},
// onSave: function() {},
// onSaveAndFinish: function() {},
// onCloseClick: function() {},
onRender: function() {},
onChange: function() {},
useExternalScriptsAndStyles: false,
includeExternalScripts: '',
includeExternalStyles: '';
});wrapper = '.is-wrapper'
Selector for editable area. This makes the element editable
uploadImageHandler (optional)
Allows you to specify your own image upload handler. PHP example provided:
new GridlessBuilder({ uploadImageHandler: 'uploadimage.php', .. });
uploadVideoHandler (optional)
Allows you to specify your own video upload handler. PHP example provided:
new GridlessBuilder({ uploadVideoHandler: 'uploadvideo.php', .. });
uploadLottieHandler (optional)
Allows you to specify your own Lottie json upload handler. PHP example provided:
new GridlessBuilder({ uploadLottieHandler: 'uploadlottie.php', .. });
colors = '#f9a825', '#ef6c00', ...
The default swatch colors shown in color selector.
customval
This option can be useful if you want to pass custom variable to server side-related interaction. For example, during image upload, this custom variable is also submitted so you read the value from your image handler.
fontAssetPath = 'assets/fonts/'
The location of font preview images used by the builder.
mockupPath = 'assets/mockups/'
The location of mockup images used by the builder to allow you to insert mockups.
contentStylePath = 'assets/styles/'
The location of typography style set used by the builder to give you typography style selection for your content.
templates = [ 1, 'With Examples', 'assets/sections/templates.js', 'assets/sections/', 2, 'Base Templates', 'assets/sections/templates-base.js', 'assets/sections/', 3, 'Saved Templates', 'http://.../your_template_data.php', '' // you can also have dynamic templates (from other location) ]
List of templates that you want to register. Data for each template item: - numbered id - Name - Location of template's JSON file. - Location of template's assets. The value will replace %IMAGE_PATH% tag found in templates.js to give flexibitlity to change the image path/location.
During editing you can choose active template from the Templates dialog.
iconAssetPath = 'assets/ionicons/'
The location of icon asset.
gridlessPath = 'assets/gridless/'
The location of gridless.css
imageLibraryPath = 'assets/library/'
The location of image library used for image select dialog example.
scriptPath = 'assets/scripts/'
The location of additional scripts used by the builder (ex. Monaco Editor script for code editing).
previewUrl = 'preview.html'
The location of preview page. Preview page is used to view the edited content as users see (outside the builder).
pageUrl
If set, the responsive preview (desktop, tablet or mobile) will open this url.
closeUrl
If set, will show 'Close without Saving' link under the Preview button. The link will open the closeUrl value.
showEditTextInfo = 'once'
This option specifies how the notification info "Double click/tap the block to edit" is displayed.
Possible values:
- 'once' The info will be displayed once (first time use only).
- 'always' The info will be displayed each time the builder starts.
paste = 'text' // text | html-without-styles | html
The behavior of paste content.
Possible values:
- 'text' Pasted content will be text only (no html or formatting styles).
- 'html-without-styles' Pasted content will include html but without formatting styles.
- 'html' Paste as is which includes html and its formatting styles.
codeFormatting = true
Enable code formatting & coloring.
This option specifies js or css files to be included for previewing content during editing. The default values are already set to include Glide slider and Skrollr plugin.
elementSelection = true
Specifies the behavior of CTRL/CMD-A for text selection. If set true, the selection will be on the current element (not all text). Pressing the CTRL/CMD-A again will select the parent element, and so on. Setting this option to false makes the selection always covers all text.
theme = ''
Theme for the UI.
Possible values:
- '' (empty) for light theme
- 'dark' for dark theme
parallaxControl = true
Show parallax switch for applying parallax animation on background image. The switch will add or remove 'parallax' class on the div element which has the background image.
imageLibrarySelect = 'library.html'
Set the location of the built-in image library.
Image library contains a collection of illustration images you can use for your website. The default value is 'library.html' which you can customize to add your own custom library. The library.html is similar as 'images.html' (default value of imageSelect parameter). The difference is the purpose: - imageLibrarySelect => is for showing ready made image collection - imageSelect => is for custom image/asset manager you may have (for example, with upload, delete, etc)
imageSelect
Set the location of your custom image manager.
videoSelect
Set the location of your custom video manager.
lottieSelect
Set the location of your custom lottie json file manager.
fileSelect
Set the location of your custom file select.
useExternalScriptsAndStyles = false
To enable/disable Code Settings dialog. Code Settings dialog can be opened via HTML source editor. The dialog allows you to enter external js or css files (for example, you want to include external js file from CDN).
To enable this feature, you will need to save the the external js & css values entered for use on the page. To get the entered values, use externalScripts() and externalStyles() methods. The saved values then can be rendered as js and css includes on the page using the builder and on the production. The saved values also needs to be use in includeExternalScripts and includeExternalStyles parameters.
A working example on how to use useExternalScriptsAndStyles can be seen in the Simple CMS that you can download in your Account area. The Simple CMS shows how to use these parameters & methods: - useExternalScriptsAndStyles - externalScripts() - externalStyles() - includeExternalScripts - includeExternalStyles
includeExternalScripts = ''
Use this param if useExternalScriptsAndStyles is set true (See useExternalScriptsAndStyles parameter info).
includeExternalScripts param should be set with the saved external scripts value (in comma delimited string). This will be the initial values and will be shown in Code Settings dialog.
includeExternalStyles = ''
Use this param if useExternalScriptsAndStyles is set true (See useExternalScriptsAndStyles parameter info).
includeExternalStyles param should be set with the saved external scripts value (in comma delimited string). This will be the initial values and will be shown in Code Settings dialog.
dataCustom
To add custom block or element.
Example:
new GridlessBuilder({
...,
dataCustom: {
'blocks': [
{
'button': '<button title="My Block 1"><span><svg class="is-icon-flex"><use xlink:href="#icon-align-full"></use></svg></span>My Block 1</button>',
onClick: function() {
alert('Custom Function Called');
}
},
{
'button': '<button title="My Block 2"><span><svg class="is-icon-flex"><use xlink:href="#icon-align-full"></use></svg></span>My Block 2</button>',
'url': 'assets/custom/modal.html'
},
{
'button': '<button title="My Block 3"><span><svg class="is-icon-flex"><use xlink:href="#icon-align-full"></use></svg></span>My Block 3</button>',
'html': '<div class="is-block is-text fit-content" style="top:30%;left:25%;width:37%;"><h1 class="size-32" style="font-weight: 200;">Create Awesome Things, Your Way</h1></div>',
'elementHtml': '<h1 class="size-32" style="font-weight: 200;">Create Awesome Things, Your Way</h1>',
'css': '',
'elementCss': ''
},
]
}
});
The above example show how to add 3 types of button:
1. Button with onClick event. Here you can add you custom code.
2. Button that opens external url in a modal dialog. In this example, we specify the url with a custom page:
assets/custom/modal.html
From this page you can have functionality to insert custom content into the page. Please check the modal.html code.
To insert content, use addContent() method.
To hide the modal, use hideModal() method.
3. Button that insert immediately custom html.
Parameters:
- html: for inserting HTML as a block.
- elementHtml (optional): for inserting HTML as an element.
- css (optional): css for block html.
- elementCss (optional): css for element html.
Here is another example for custom block that has <script> tag (to add your custom Javascript code):
new GridlessBuilder({
...,
dataCustom: {
'blocks': [
{
'button': '<button title="My Block"><span><svg class="is-icon-flex"><use xlink:href="#icon-align-full"></use></svg></span>My Block</button>',
'html': `<div class="is-block is-text fit-content" style="top:30%;left:25%;width:37%;">
<h1 class="size-32" style="font-weight: 200;">Create Awesome Things, Your Way</h1>
<div data-html="${encodeURIComponent(`
<div id="{id}"></div>
<script>
var elm = document.querySelector('#{id}');
if (elm) elm.innerHTML = 'Hello World!';
</script>
`)}">
</div>
</div>`,
'elementHtml': `<h1 class="size-32" style="font-weight: 200;">Create Awesome Things, Your Way</h1>
<div data-html="${encodeURIComponent(`
<div id="{id}"></div>
<script>
var elm = document.querySelector('#{id}');
if (elm) elm.innerHTML = 'Hello World!';
</script>
`)}">
</div>`,
'css': '',
'elementCss': ''
},
]
}
};blockOverlap: true
If set true, a newly added block will have 'allow overlap' behavior. If set false, a newly added block will be auto adjusted to prevent overlap on different screen sizes.
This block behavior can be changed during editing.
For example, a block with long text may expand its height on smaller screen. if there is another text block below it, they can be overlapped. To prevent this, you can switch off the 'allow overlap' for the block via Block Settings panel.
usePageOptions: true
To enable/disable Page Options & Print View buttons. Page Options allows you to select page sizes for print. If you want to open Page Options or Print View dialog from your application, please use openPageOptions() and openPrintView() methods.
basePath: ''
If Print View dialog shows broken images, it could be that you may change the location of the assets folder. In this case, you need to specify the basePath. For example, if assets folder location is at:
somewhere/myfolder/assets/Then, you need to set:
basePath: 'somewhere/myfolder/
Methods
html()
To get the HTML content.
styles()
To get the content style.
js()
To get the content script.
loadHtml(html, css, js) {
Programmatically load HTML, css & js.
loadExternalScripts(list, callback)
Programmatically load external scripts (js files). Parameters: - list (comma delimited string) - callback (callback function on scripts loaded)
loadExternalStyles(list)
Programmatically load external styles (css files) Parameters: - list (comma delimited string)
loadContent(html, css, js, listOfExternalStyles, listOfExternalScripts)
Programmatically load HTML, css, js, list of external scripts and list of external styles (all at once)
Parameters: - html - css - js - listOfExternalStyles (comma delimited string) - listOfExternalScripts (comma delimited string)
externalScripts()
Use this method if useExternalScriptsAndStyles is set true (See useExternalScriptsAndStyles parameter info).
To get external js files entered in Code Settings dialog (in comma delimited string format). Code Settings dialog is disabled by default. To enable it, set useExternalScriptsAndStyles parameter to true.
externalStyles()
Use this method if useExternalScriptsAndStyles is set true (See useExternalScriptsAndStyles parameter info).
To get external css files entered in Code Settings dialog (in comma delimited string format). Code Settings dialog is disabled by default. To enable it, set useExternalScriptsAndStyles parameter to true.
destroy()
Destroying the builder instance.
updateAsset()
See onImageUpload, onVideoUpload & onLottieUpload events.
showInfo(message)
To show custom info.
Example:
var obj = new GridlessBuilder({ wrapper: '.is-wrapper', onSave: function() { obj.showInfo('Saving...'); // Your saving process here } });
hideInfo()
To hide custom info.
Example:
var obj = new GridlessBuilder({ wrapper: '.is-wrapper', onSave: function() { obj.showInfo('Saving...'); // Your saving process here obj.hideInfo(); } });addContent(html, htmlElement, css, cssElement)
To insert custom html content into the page.
Two parameters needed:
- html (html for block insert)
- htmlElement (html for element insert)
- css (css for block insert)
- cssElement (css for element insert)
addBlock(html)
To insert custom block into the page.
addElement(html)
To insert custom element into a block.
Note: an element in a block must be selected. The addElement() will add the custom element below the current selected element.
addCss(css)
To insert custom css
hideModal()
Hide custom opened modal. See dataCustom parameter.
openPageOptions()
Opens Page Options dialog for selecting page sizes.
openPrintView()
Opens Print View dialog
getPageWidth()
Get page width. For example, if page option is set for 'Web', it returns '1440px'. If page option is set 10x10, it returns '10in'.
getPageHeight()
Get page height. For example, if page option is set for 'Web', it returns '744px'. If page option is set 10x10, it returns '10in'.
Events
onSave Triggered when save button clicked. Example:
var obj = new GridlessBuilder({ wrapper: '.is-wrapper', onSave: function() { var html = obj.html(); var css = obj.styles(); var js = obj.js(); // Your saving process here } });
onSaveAndFinish Triggered when 'Save & Finish' button clicked. Example:
var obj = new GridlessBuilder({ wrapper: '.is-wrapper', onSaveAndFinish: function() { var html = obj.html(); var css = obj.styles(); var js = obj.js(); // Your saving process here } });onCloseClick Triggered when 'Close without Saving' button clicked. Example:
var obj = new GridlessBuilder({ wrapper: '.is-wrapper', onCloseClick: function() { window.location.href = '.'; }, });onRender Triggered when new block added (or content changed). If you have custom extensions/plugins applied to the content, re-init the plugins here.
onChange Triggered when content changed.
onImageSelectClick If set, a select button will be shown in image input url. The event is triggered when the button is clicked.
onVideoSelectClick If set, a select button will be shown in video input url. The event is triggered when the button is clicked.
onFileSelectClick If set, a select button will be shown in hyperlink input url. The event is triggered when the button is clicked.
onLottieSelectClick If set, a select button will be shown in Lottie json input url. The event is triggered when the button is clicked.
onImageUpload If set, will be triggered when a user select a local image (for example, for changing image, background, etc). This event is useful if you need to implement your own upload handling (not using the uploadImageHandler parameter). Example:
var builder = new GridlessBuilder({ onImageUpload: function(e) { var file = e.target.files[0]; // Your custom image upload process here builder.updateAsset(url); // Then, the uploaded image url should be used to update the content using updateAsset() method. }, .. });onVideoUpload If set, will be triggered when a user select a local video (for example, for changing video, background, etc). This event is useful if you need to implement your own upload handling (not using the uploadVideoHandler parameter). Example:
var builder = new GridlessBuilder({ onVideoUpload: function(e) { var file = e.target.files[0]; // Your custom image upload process here builder.updateAsset(url); // Then, the uploaded image url should be used to update the content using updateAsset() method. }, .. });onLottieUpload If set, will be triggered when a user select a local Lottie json file (for changing lottie animation). This event is useful if you need to implement your own upload handling (not using the uploadLottieHandler parameter). Example:
var builder = new GridlessBuilder({ onLottieUpload: function(e) { var file = e.target.files[0]; // Your custom Lottie json upload process here builder.updateAsset(url); // Then, the uploaded Lottie json url should be used to update the content using updateAsset() method. }, .. });
Language file
To enable translation using language file, include the language file before gridlessbuilder.js include:
You can add your translation by creating a language file similar to the provided en.js and include it on the builder page.
Gridless CSS framework Documentation
Note that you can disregard this part and just start implementing the builder. But if you want to know how the responsive behavior is produced, you can read further below.
Gridless CSS is a framework to implement responsive design using absolute-positioning. It includes 2 files: - gridless.css - gridless.js
Absolute positioned style gives you freedom in design. It allows you to place elements anywhere in the content. Normally, absolute positioned elements won't produce responsive content. One approach you may see in online site building application is forcing user to manually re-design pages for each different screen size. The freedom of free positioned elements will cost significant ammount of work to make it responsive.
So until now, grid system is considered the ideal framework used by modern builders. However, it is not as flexible as free-positioned elements. In site building application, drag & drop elements inside grid-constrained area is not always easy.
Gridless CSS tries to make absolute-positioned elements responsive by solving its problems. The mission is to give you the freedom to design web pages with free-positioned elements, while keeping it responsive to multiple devices without significant rework.
Below is quick start guide on using gridless css to create a responsive page. We'll start by seeing the page structure needed.
The page structure is simple. Within a container (div.is-wrapper), you can have multiple sections (div.is-section).
<div class="is-wrapper">
<div class="is-section">
... section 1 ...
</div>
<div class="is-section">
... section 2 ...
</div>
...
</div>Section's default height is 100% viewport. You can place content (absolute-positioned blocks) inside each section.
<div class="is-section">
<div class="is-block is-text" style="top:30%;left:25%;width:50%;">
<h1>Title Here</h1>
</div>
</div>Each block has "is-block" class and followed by block type class ("is-text", "is-img", etc).
As you can see, positioning is made by using top & left values in percentage. This approach makes the block resized according to screen sizes. But this is not enough to produce responsive content. Normally, you will notice that reducing screen size makes text blocks' height increased which makes a problem with blocks alignment, conflict (overlap) with other blocks or makes the content exceeds it section. However, with gridless css framework, all these issues have been resolved so you don't have to worry about the responsive result. Gridless css will auto adjust blocks' position based on changes of its dimension, prevent conflict between blocks, adjust alignment, etc to make the page responsive.
Now, here are blocks that you can use:
Text Block ("is-text")
Example:
<div class="is-block is-text" style="top:30%;left:25%;width:50%;"> <h1>Title Here</h1> </div>Image Block ("is-img")
Example:
<div class="is-block is-img" style="top:30%;left:30%;width:30%;height:30%;"> <div style="background-image:url(example.jpg);"> </div> </div>Iframe Block ("is-iframe")
With iframe block, you can embed Google map or place iframe-type code.
Example:
<div class="is-block is-iframe" style="top:30%;left:30%;width:30%;height:30%;"> <div class="embed-responsive"> <iframe width="100%" height="400" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" class="mg1" src="https://maps.google.com/maps?q=Melbourne,+Victoria,+Australia&hl=en&sll=-7.981898,112.626504&sspn=0.009084,0.016512&oq=melbourne&hnear=Melbourne+Victoria,+Australia&t=m&z=10&output=embed"> </iframe> </div> </div>
Useful classes that you can add on blocks:
fixed
"fixed" class allows you to make a block kept its position in mobile screen. This class is useful for ornament blocks or blocks that functions as design elements.
For example, if added to a text block, the block will not auto adjust in screen sizes, so you can make overlapping text. However, for text block only, the block will adjust to normal hierarchical display in mobile screen.
overlap
Allows block overlapping. Without this class, blocks will be auto adjusted to prevent overlapping.
Note: When using the builder, you can switch on/off "Allow Overlap" in Block Settings panel. This will add/remove overlap class on the selected block.
fit-content
Block height will fit its content. If a text block doesn't use this fit-content class, and block is larger that its content, the content will be on the center of the block. You can set the content position using flex, for example:
Section Background
To add image background in a section:
<div class="is-section">
<div class="is-overlay">
<div class="is-img-bg" style="background-image: url('example.jpg');">
</div>
</div>
</div>
To add video background in a section:
<div class="is-section">
<div class="is-overlay">
<video class="is-video-bg" playsinline="" autoplay="" muted="" loop="">
<source src="assets/library/example1.mp4" type="video/mp4">
</video>
</div>
</div>Support
Email us at: support@innovastudio.com
---- IMPORTANT NOTE : ---- Custom Development is beyond of our support scope. Our support doesn't cover custom integration into users' applications. It is users' responsibility.
Once you get the HTML content, then it is more of to user's custom application (eg. posting it to the server for saving into a file, database, etc).