Technical Explanation

1. Our page builder is built using GrapesJS plugin with added customization. It helps us to build HTML templates without any knowledge of coding.

2. Page builder contains two main sections. (i.e.) Top Panel, Right Panel

3. The Top panel contains different device sizes, to test the template’s responsiveness across various devices

4. The top panel also has a few action icons on the right side to perform the required operation.

5. The Right panel contains three different sections. (i.e.) Style Manager, Layer Manager, Blocks

6. The complete HTML in the page builder is contained inside a container with id="wrapper".

7. The blocks section contains various elements that can be dragged directly onto the wrapper container or inside other containers.

8. Each time a block is dragged, it would consist of single or multiple components.

9. Each component has traits defined that are visible and functional through the settings section.

10. Layer Manager in the right panel helps to structure the HTML by drag and drop feature. It also has the ability to show/hide an element on a particular device size.

11. By clicking any component in the canvas, we can access the Style Manager where it helps to modify/update any style of the component.

12. After making all the changes, the page can be saved by clicking on the Save page button in the top panel.

For more information about our web-building framework, see the documentation at https://grapesjs.com/.