Back to Bootstrap 4 Page Builder Support

Francesco
Francesco

Hi, i'm trying to add a custom block but this cause a break in the builder

CustomBlock.add('my-first-block', {
  label: 'Simple block',
  category: 'Basic',
  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>',
});

is it possible to add other templates and snippets? will you add more?

Thanks

Last updated

Vladimir
Vladimir

Hi.

I advise you to enclose the component content in inverted commas (``).

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

Thanks, it works i have some problem with the template. If you modify/add something, something in mobile design will break

Vladimir
Vladimir

i have some problem with the template. If you modify/add something, something in mobile design will break

Show me an example. Demo site: http://b4demo.pkurg.ru/backend/cms demo|demo

Last updated

Francesco
Francesco

For example

  • http://b4demo.pkurg.ru/urban i have changed the background image with a custom image but if you go to HTML and change something and then APPLY you loose the image

  • when you highlight some part of the page you see a BOX name but i dont't find the way to create new BOX (are this the container?)

  • sometimes uploaded images disappear from the library (for example if i create a new page i have to upload them again)

Vladimir
Vladimir

Thanks for your reply!

  • 1) Fixed. Now after saving html styles are not lost.

  • 2) BOX is just <div ... >...</div>. But I added the BOX component.

  • 3) Now all files uploaded by the user will go to the library.

Update plugin and check.

Francesco
Francesco

Thank you Vladimir, very useful update. I have discovered 2 issue 1) All the images have absolute path, when i moved my website from my local server to the production server, i had to select the images again (image are present in the media)

2) Sometimes when i select an element i see the 'box' selection in wrong position Image

Last updated

Vladimir
Vladimir

Hi!

  1. Now uploaded images have relative paths.
  2. Honestly, I don’t know what is the reason. In a future version, I will update grapesjs, maybe this will solve the problem.
Francesco
Francesco

I see the update, thanks if you are curious the website is online http://synthpanels.design/ i'm not satisfied by the code, i don't know why text arre surrounded by many html tags however, this builder promises well!

image

Last updated

Vladimir
Vladimir

Nice site!

I have already fixed the problem with constantly lengthening id for Page Bulder. Now I will fix it for Bootstrap 4 Page Bulder.

I noticed in your page source a lot of built-in styles.

In the last plugin update, I eliminated the need to add to layout

        <style type="text/css">
        {{ this.page.page_builder_styles | raw }}    
        </style>

Now assets with styles are generated by plugin.

<link rel="stylesheet" href="http://synthpanels.design/b4bulder.css?page=home.htm">

Updated Docs: https://b4builder.pkurg.ru/docs#item-1-2

Last updated

1-10 of 10