Introduction Last updated: 2020-04-27

Introduction

Backend Page Builder

Create layout.

builder-layout.htm


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    {% styles %}            
  </head>
  <body>

    {% page %}

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    {% framework extras %}
    {% scripts %}
  </body>
</html>

Video manual:

Frontend Content Builder

Create layout.

builder-layout.htm


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    {% styles %}            
  </head>
  <body>

    {% page %}

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    {% framework extras %}
    {% scripts %}
  </body>
</html>

Create content file. example empty main.htm

Create cms page and add ContentBuilder component.

main.htm


title = "main"
url = "/"
layout = "builder-layout"
is_hidden = 0
robot_index = "index"
robot_follow = "follow"

[ContentBuilder]
file = "main.htm"
==
{% component 'ContentBuilder' %}

Go to frontend and edit your page.

Video manual:

Static Page

Turn on "Use builder for Static Pages" switcher
Layout example:

static-layout.html


[staticPage]
useContent = 1
default = 0
==
<!doctype html>
  <html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>{{ this.page.meta_title }}</title>
    <meta name="description" content="{{ this.page.meta_description }}">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    {% styles %}
  </head>
  <body>
    
    {% page %}

    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>    
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    {% framework extras %}
    {% scripts %}    
  </body>
  </html>

Video manual:

Marketplace themes for Bootstrap 4 Page Builder

You can also use ready-made themes specially made for Bootstrap 4 Page Builder

Video manual:

Custom blocks

Go to Builder settings and add your custom blocks code
Custom block

Example of adding custom blocks. More docs.

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


It is recommended that you enclose the contents of the component in inverted commas (` `).

Test block example:


CustomBlock.add('my-test-block', {
label: 'test block',
category: 'Custom Blocks',  
attributes: { class: 'fa fa-id-card-o' },
content: `<section id="about-video" class="about-video">
  <div class="container" data-aos="fade-up">

    <div class="row">

      <div class="col-lg-6 video-box align-self-baseline" data-aos="fade-right" data-aos-delay="100">
        <img src="assets/img/about-video.jpg" class="img-fluid" alt="">
        <a href="https://www.youtube.com/watch?v=jDDaplaOz7Q" class="venobox play-btn mb-4" data-vbtype="video" data-autoplay="true"></a>
      </div>

      <div class="col-lg-6 pt-3 pt-lg-0 content" data-aos="fade-left" data-aos-delay="100">
        <h3>Voluptatem dignissimos provident quasi corporis voluptates sit assumenda.</h3>
        <p class="font-italic">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
          magna aliqua.
        </p>
        <ul>
          <li><i class="bx bx-check-double"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat.</li>
          <li><i class="bx bx-check-double"></i> Duis aute irure dolor in reprehenderit in voluptate velit.</li>
          <li><i class="bx bx-check-double"></i> Voluptate repellendus pariatur reprehenderit corporis sint.</li>
          <li><i class="bx bx-check-double"></i> Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate trideta storacalaperda mastiro dolore eu fugiat nulla pariatur.</li>
        </ul>
        <p>
          Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
          velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum
        </p>
      </div>

    </div>

  </div>
</section>`,
});

Add Google Fonts

Add Roboto, sans-serif example:


Editor.on('load', function () {
    styleManager = Editor.StyleManager;

    fontProperty = styleManager.getProperty('typography', 'font-family');

    var list = [];
    fontProperty.set('list', list);
    list = [                     
        fontProperty.addOption({value: "Arial, Helvetica, sans-serif", name: 'Arial'}),
        fontProperty.addOption({value: "Arial Black, Gadget, sans-serif", name: 'Arial Black'}),
        fontProperty.addOption({value: "Brush Script MT, sans-serif", name: 'Brush Script MT'}),
        fontProperty.addOption({value: "Comic Sans MS, cursive, sans-serif", name: 'Comic Sans MS'}),
        fontProperty.addOption({value: "Courier New, Courier, monospace", name: 'Courier New'}),
        fontProperty.addOption({value: "Georgia, serif", name: 'Georgia'}),
        fontProperty.addOption({value: "Helvetica, serif', cursive", name: 'Helvetica'}),
        fontProperty.addOption({value: "Impact, Charcoal, sans-serif", name: 'Impact'}),
        fontProperty.addOption({value: "Lucida Sans Unicode, Lucida Grande, sans-serif", name: 'Lucida Sans Unicode'}),
        fontProperty.addOption({value: "Tahoma, Geneva, sans-serif", name: 'Tahoma'}),
        fontProperty.addOption({value: "Times New Roman, Times, serif", name: 'Times New Roman'}),
        fontProperty.addOption({value: "Trebuchet MS, Helvetica, sans-serif", name: 'Trebuchet MS'}),
        fontProperty.addOption({value: "Verdana, Geneva, sans-serif", name: 'Verdana'}),
        fontProperty.addOption({value: "Roboto, sans-serif", name: 'Roboto'}),
        

    ];
    fontProperty.set('list', list);
    styleManager.render();
    
    var head = Editor.Canvas.getDocument().head;
	head.insertAdjacentHTML('beforeend', `<style>
	@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;1,100&family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300&display=swap');
	</style>`);
        
});							

Video manual:

RTL

Create RTL layout.

See more: https://bootstrap.rtlcss.com/

rtl-builder-layout.htm


<!doctype html>
<html lang="en">
   <head>
      <!-- Required meta tags -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
      <link rel="stylesheet" href="https://cdn.rtlcss.com/bootstrap/v4.2.1/css/bootstrap.min.css" integrity="sha384-vus3nQHTD+5mpDiZ4rkEPlnkcyTP+49BhJ4wJeJunw06ZAp+wzzeBPUXr42fi8If" crossorigin="anonymous">
      {% styles %}
      <style type="text/css">
         {{ this.page.page_builder_styles | raw }}    
         * {
         direction: rtl !important;
         }
      </style>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://cdn.rtlcss.com/bootstrap/v4.2.1/js/bootstrap.min.js" integrity="sha384-a9xOd0rz8w0J8zqj1qJic7GPFfyMfoiuDjC9rqXlVOcGO/dmRqzMn34gZYDTel8k" crossorigin="anonymous"></script>
   </head>
   <body>
      {% page %}
      {% framework extras %}
      {% scripts %}
   </body>
</html>
Video manual:

Language suffixes for partials and content (Need RainLab Translate Plugin


Introduction
Introduction
Video manual:

B4Buider translation support for Static Pages


Video manual:

Demo

demo: http://b4demo.pkurg.ru/backend/cms

login: demo

pass: demo

Examples

Creating a couple of pages with a navigation menu

Video manual:

Creating a Blog Using Bootstrap 4 Page Builder

Video manual:

Using Plugins Components with Page Builder in Frontend

Video manual:

Page Sections

Video manual:

Our Team Site

Video manual: