Make div defined in index.html of grapesjs-webpage-preset read only

I have downloaded the grapesjs-webpage-preset and I want to customize it according to my requirements so I've added my own html and style in the index.html file to make that UI customizable. Now, how can I make a div in my html code read only. I tried adding data-gjs-editable="false" data-gjs-removable="false" to the div description.

 <div data-gjs-editable="false" data-gjs-removable="false" class="clearfix">
                  <div data-gjs-editable="false" data-gjs-removable="false" class="pull-left col-sm-4 col-md-7 col-lg-6 col-xs-12">
                    <label data-gjs-editable="false" data-gjs-removable="false" for="Username" class="control-label">Email Address<label data-gjs-editable="false" data-gjs-removable="false" class="padding-left-micro ">*</label></label>

and I also tried adding this code to the index.js file under src/components folder:

domc.addType('sign-in-password', {
        model: defaultModel.extend({
                defaults: Object.assign({}, defaultModel.prototype.defaults, {
                   // True if the component is removable from the canvas
    removable: false,

    // Indicates if it's possible to drag the component inside other
    // Tip: Indicate an array of selectors where it could be dropped inside
    draggable: false,

    // Indicates if it's possible to drop other components inside
    // Tip: Indicate an array of selectors which could be dropped inside
    droppable: false,

    // Set false if don't want to see the badge (with the name) over the component
    badgable: false,

    // True if it's possible to style it
    // Tip:  Indicate an array of CSS properties which is possible to style
    stylable: false,

    // Highlightable with 'dotted' style if true
    highlightable: false,

    // True if it's possible to clone the component
    copyable: false,

    // Indicates if it's possible to resize the component (at the moment implemented only on Image Components)
    resizable: false,

    // Allow to edit the content of the component (used on Text components)
    editable: false,

                }),
            },
            {
                isComponent: function (el) {
                    if (el.tagName == 'label') {
                        return {type: 'sign-in-password'};
                    }
                },
            }),
        view: defaultView,
    });

but the divs continue to be editable..