Do It Yourself – Tutorials – Part 4 – Create our own Website Builder. Web page Builder.

by | Jul 21, 2021 | 0 comments

Do It Yourself – Tutorials – Part 4 – Create our own Website Builder. Web page Builder.

by | Jul 21, 2021 | Do It Yourself - Build Your Own Website | 0 comments

Do It Yourself – Website Tutorials



We are going to customize the default UI of the GrapesJS library by using Bootstrap 5.

00:00 Demo
01:36 Cleaning old code
02:57 Add Bootstrap 5 CSS and JS
03:06 Add Basic Block Plugin
04:16 Create Layout
06:38 Add style for Sidebar
10:36 Add Company Name in Sidebar
11:50 Add button to create new Page
15:00 Add list group to show all pages
27:56 Add Navbar in the main content
30:39 Configure Basic Block
32:18 Customize Library to use our layout
35:50 Add style to hide library default layout

38:12 Change default color of library
40:15 Add panels to show Device Manager and other commands
47:28 Test application

[Medium Blog](https://vshukla684.medium.com/second-story-customize-grapesjs-editor-bbe2d91f5208)

Complete Series
1. https://www.youtube.com/watch?v=eqSDamJ0A0U
2. https://www.youtube.com/watch?v=rzdBImhhMaA
3. https://www.youtube.com/watch?v=MkIzdM9x6-w
5. https://www.youtube.com/watch?v=tZVRRzgBuyM
6. https://www.youtube.com/watch?v=SoBfMXHJOxc
7. https://www.youtube.com/watch?v=3Ylg-qCIjqA
8. https://www.youtube.com/watch?v=4vnpbpOQLnM
9. https://www.youtube.com/watch?v=8A-XzKnV7w0
10. https://www.youtube.com/watch?v=A5CZTA-6oWU

source

0 Comments

Submit a Comment

What Our Clients Are Saying

Juju Hair Lounge

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything...

Leah

Dieno Digital Marketing Services
5
2018-07-09T03:06:21+00:00

Leah

Great class! Not only was it very informative but it was also really entertaining! I can't wait to apply everything I've learned to our Facebook business page!

Uniglobe Travel – Western Canada

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated...

Ciara

Dieno Digital Marketing Services
5
2018-07-10T03:22:20+00:00

Ciara

I enjoyed the workshop, we covered a broad range of topics in a short space of time, but I appreciated that there was some concrete, actionable advice given as well!

North Burnaby Boxing Club

Thanks so much for all the great work you have done in developing our website Leland!

Manny, North Burnaby Boxing Club

Dieno Digital Marketing Services
5
2018-04-27T01:06:02+00:00

Manny, North Burnaby Boxing Club

Thanks so much for all the great work you have done in developing our website Leland!

JB Consulting

Leland built us a great site at a great price. We can’t say enough about how pleasant it was dealing...

Dave, JB Consulting

Dieno Digital Marketing Services
5
2018-04-27T01:06:57+00:00

Dave, JB Consulting

Leland built us a great site at a great price. We can’t say enough about how pleasant it was dealing with him!
5
4
Dieno Digital Marketing Services
[newsletter_form]
<div class="tnp tnp-subscription"> <form method="post" action="https://www.dienodigital.com/?na=s"> <input type="hidden" name="nlang" value=""><div class="tnp-field tnp-field-firstname"><label for="tnp-name">First name or full name</label> <input class="tnp-name" type="text" name="nn" value=""></div> <div class="tnp-field tnp-field-email"><label for="tnp-email">Email</label> <input class="tnp-email" type="email" name="ne" value="" required></div> <div class="tnp-field tnp-field-button"><input class="tnp-submit" type="submit" value="Subscribe" > </div> </form> </div>