This plugin allows end users to build web pages without coding.
Builder comes with already built-in blocks for Bootstrap 5 framework, but you can easily customize it for another css framework or use your own styles and blocks.
Key features
- Can be used with CMS Pages and Static Pages
- RainLab.Translate Plugin is supported
- RainLab.Builder Plugin is supported
- Page Builder is a form widget and can be used in any of your backend forms
Table of Contents
- Using with CMS Pages
- Using with Static Pages
- Frontend PageBuilder Component
- Custom blocks
- RainLab.Builder Support
- Demo
1) Using with CMS Pages
Enable Builder for CMS Pages
Settings->Bootstrap 5 Page Builder->Use builder for CMS Pages
Create layout
builder-layout.htm
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> {% styles %} </head> <body> {% page %} <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script> {% scripts %} </body> </html>
Alternatively, you can use Bootstrap 5 starter template from Market https://octobercms.com/theme/pkurg-bootstrap5startertemplate
2) Using with Static Pages
Enable Builder for Static Pages
Settings->Bootstrap 5 Page Builder->Use builder for CMS Pages
Create layout
static-builder-layout.htm
[staticPage] useContent = 1 default = 0 == <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> {% styles %} </head> <body> {% page %} <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script> {% scripts %} </body> </html>
Alternatively, you can use Bootstrap 5 starter template from Market https://octobercms.com/theme/pkurg-bootstrap5startertemplate
Builder supported RainLab.Translate Plugin.
3) Frontend PageBuilder Component
Create layout
builder-layout.htm
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> {% styles %} </head> <body> {% page %} <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script> {% scripts %} </body> </html>
Alternatively, you can use Bootstrap 5 starter template from Market https://octobercms.com/theme/pkurg-bootstrap5startertemplate
Create content or partial file. For example, empty partial main.htm
You can use language suffixes(Need RainLab Translate Plugin)
- main.en.htm will contain the content in English.
- main.ru.htm will contain the content in Russian.
- main.fr.htm will contain the content in French.
Create cms page and add Frontend PageBuilder Component.
title = "Index" url = "/" layout = "builder-layout" is_hidden = 0 [FrontendPageBuilder] savedatato = "partial" file = "main" button_text = "EDIT ME" == {% component 'FrontendPageBuilder' %}
Go to the front end and start editing your page.
4) Custom blocks
Go to Builder settings and add your custom blocks code
Example of adding custom blocks. More docs https://grapesjs.com/docs/api/block_manager.html#add
'my-first-block' is the ID of the block
Block example:
CustomBlock.add('my-first-block', { label: 'Simple block', category: 'Basic', content: '<div class="my-block">This is a simple block</div>', });
5) RainLab.Builder Support
Page Builder is a form widget and can be used in any of your beckend forms.
Plugin provides two form widgets
- pkurg_builder_page_builder_widget - Page Builder widget
- pkurg_builder_m_l_page_builder_widget - Multilingual Page Builder widget(Need RainLab Translate Plugin)
The supported options are:
- height
Example:
pkurg_builder_page_builder_widget: height: '50vh'
6) Demo
http://b5demo.pkurg.ru/backend/cms
login: demo
pass: demo
-
This plugin has not been reviewed yet.
-
1.0.1 |
Initialize plugin. Jan 10, 2021 |
---|