4
$50
Add to project

Product support

Get help in the plugin support forum.

Categories

Visit the live demo site

B5HALF (50%) PRICE

1.0.2: Adds initial support for October v2.0

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.

You can also use the Tailwind CSS Blocks Pack plugin which extends the Page Builder plugins and allows you to create pages using Tailwind CSS.

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

Demo

Please, try plugin on demo site and make enquiries before you purchase, to ensure it adequately meet your requirements.

October 1 http://b5demo.pkurg.ru/backend/cms
login: demo
pass: demo

October 2 http://b5demo2.pkurg.ru/backend/pkurg/builder/editor
login: demo
pass: demo

Table of Contents

  1. Using with CMS Pages
  2. Using with Static Pages
  3. Frontend PageBuilder Component
  4. Custom blocks
  5. RainLab.Builder Support
  6. Demo
  7. Examples

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>',
});

B4Bulder blocks

/* remove all blocks */

Editor.BlockManager.getAll().reset();

/* Adds B4Builder blocks */

$.getScript("https://b4builder.pkurg.ru/data/grapesjs-pkurg-bootstrap4-plugin.js", function() { PB4( Editor) });

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

7) Examples

1.0.3

Adds Static Pages Snippets support

Dec 28, 2021
1.0.2

Adds initial support for October v2.0

Apr 21, 2021
1.0.1

Initialize plugin.

Jan 10, 2021