@innovastudio/contentbox 1.4.22 → 1.4.24

package/public/contentbox/contentbox.esm.js

@@ -3670,8 +3670,8 @@ class EditSection {
     this.builderStuff = builderStuff;
     let html = '<div class="is-modal delsectionconfirm" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width: 450px;">' + '<div style="margin: 20px 0 30px;text-align:center;font-size: 14px;">' + out('Are you sure you want to delete this section?') + '</div>' + '<button title="' + out('Delete') + '" class="input-ok classic">' + out('Delete') + '</button>' + '</div>' + '</div>' + '' + '<div class="is-modal editsection" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div class="is-modal-content" style="max-width:313px;padding:0;">' + '<div class="is-modal-bar is-draggable">' + out('Section Settings') + '</div>' + '<div class="is-tabs clearfix" style="padding-top:37px;" data-group="sectionsettings">' + '<a id="tabSectionGeneral" title="' + out('General') + '" href="" data-content="divSectionGeneral" class="active">' + out('General') + '</a>' + '<a id="tabSectionAnimation" title="' + out('Animation') + '" href="" data-content="divSectionAnimation">' + out('Animation') + '</a>' + '<a id="tabSectionScrollButton" title="' + out('Scroll') + '" href="" data-content="divSectionScrollButton">' + out('Scroll') + '</a>' + '</div>';
     html += '<div id="divSectionGeneral" class="is-tab-content active" data-group="sectionsettings" style="display:flex;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Move Section') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Move Up') + '" class="cmd-section-up" style="">&#8593;</button>' + '<button title="' + out('Move Down') + '" class="cmd-section-down">&#8595;</button>' + '<button title="' + out('Move to Top') + '" class="cmd-section-top"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8676;</span></button>' + '<button title="' + out('Move to Bottom') + '" class="cmd-section-bottom"><span style="transform:rotate(90deg);position:absolute;top:13px;left:15px;">&#8677;</span></button>' + '<button title="' + out('Duplicate') + '" class="cmd-section-duplicate" style="margin-left:20px;"><svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#ion-ios-copy-outline"></use></svg></button>' + '</div>' + '</div>';
-    html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
-    html += '<div class="div-section-bgcolor" style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
+    html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Height') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Auto') + '" class="cmd-section-height" data-value="0">' + out('Auto') + '</button>' + '<button title="20%" class="cmd-section-height" data-value="20">20%</button>' + '<button title="25%" class="cmd-section-height" data-value="25">25%</button>' + '<button title="30%" class="cmd-section-height" data-value="30">30%</button>' + '<button title="40%" class="cmd-section-height" data-value="40">40%</button>' + '<button title="50%" class="cmd-section-height" data-value="50">50%</button>' + '</div>' + '<div style="display:flex">' + '<button title="60%" class="cmd-section-height" data-value="60" style="border-left:none;border-top:none;">60%</button>' + '<button title="70%" class="cmd-section-height" data-value="70" style="border-left:none;border-top:none;">70%</button>' + '<button title="75%" class="cmd-section-height" data-value="75" style="border-left:none;border-top:none;">75%</button>' + '<button title="80%" class="cmd-section-height" data-value="80" style="border-left:none;border-top:none;">80%</button>' + '<button title="90%" class="cmd-section-height" data-value="90" style="border-left:none;border-top:none;">90%</button>' + '<button title="100%" class="cmd-section-height" data-value="100" style="border-left:none;border-top:none;">100%</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Spacing') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('xxs') + '" class="cmd-box-spacing" data-value="xxs">' + out('xxs') + '</button>' + '<button title="' + out('xs') + '" class="cmd-box-spacing" data-value="default">' + out('xs') + '</button>' + '<button title="' + out('sm') + '" class="cmd-box-spacing" data-value="sm">' + out('sm') + '</button>' + '<button title="' + out('m') + '" class="cmd-box-spacing" data-value="m">' + out('m') + '</button>' + '<button title="' + out('lg') + '" class="cmd-box-spacing" data-value="lg">' + out('lg') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-box-spacing" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
+    html += '<div class="div-section-spacesettings" style="display:flex;flex-direction:column;">' + '<div class="div-multi-boxes">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Between Boxes') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('space') + '" class="cmd-betweenbox-spacing" data-value="space">' + out('space') + '</button>' + '<button title="' + out('no space') + '" class="cmd-betweenbox-spacing" data-value="no-space">' + out('no space') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Stack') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('top') + '" class="cmd-section-stack" data-value="top">' + out('top') + '</button>' + '<button title="' + out('middle') + '" class="cmd-section-stack" data-value="middle">' + out('middle') + '</button>' + '<button title="' + out('bottom') + '" class="cmd-section-stack" data-value="bottom">' + out('bottom') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-stack" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Background Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Background Color') + '" class="input-section-bgcolor is-btn-color" style="margin-right:15px"></button>' + '<button title="' + out('Gradient') + '" class="input-section-gradient classic" data-value="+">' + out('Gradient') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionAnimation" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Start') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-start" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-start" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-start" data-value="zoom-in">' + out('Zoom In') + '</button>' + // '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-start" data-value="zoom-out">' + out('Zoom Out') + '</button>' +
     '<button title="' + out('Clear') + '" class="cmd-section-anim-start" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>';
     html += '<div style="display:flex;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('End') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button title="' + out('Slide Left') + '" class="cmd-section-anim-end" data-value="slide-left">' + out('Slide Left') + '</button>' + '<button title="' + out('Slide Right') + '" class="cmd-section-anim-end" data-value="slide-right">' + out('Slide Right') + '</button>' + '<button title="' + out('Slide Back') + '" class="cmd-section-anim-end" data-value="slide-back">' + out('Slide Back') + '</button>' + '<button title="' + out('Overlap') + '" class="cmd-section-anim-end" data-value="overlap">' + out('Overlap') + '</button>' + '<button title="' + out('Zoom In') + '" class="cmd-section-anim-end" data-value="zoom-in">' + out('Zoom In') + '</button>' + '<button title="' + out('Zoom Out') + '" class="cmd-section-anim-end" data-value="zoom-out">' + out('Zoom Out') + '</button>' + '<button title="' + out('Clear') + '" class="cmd-section-anim-end" data-value=""><svg class="is-icon-flex"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '<div id="divSectionScrollButton" class="is-tab-content" data-group="sectionsettings" style="display:none;padding-top:0">' + '<div style="display:none;flex-direction:column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + '<label for="chkScrollIcon" style="margin:0;"><input id="chkScrollIcon" type="checkbox" /> ' + out('Scroll Icon') + '</label>' + '</div>' + '<div style="display:flex;padding-top:10px;">' + '<button title="' + out('Light') + '" class="cmd-section-scroll" data-value="light" style="min-width:80px;">' + out('Light') + '</button>' + '<button title="' + out('Dark') + '" class="cmd-section-scroll" data-value="dark" style="border-left:none;min-width:80px;">' + out('Dark') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction:column;padding-bottom:3px;">' + '<div style="padding-top:20px;padding-bottom:3px;">' + out('Scroll Button') + ':</div>' + '<div style="display:flex;flex-flow:wrap;">' + '<button class="cmd-scroll-preset" data-value="1" title="' + out('Apply') + '" type="button">1</button>' + '<button class="cmd-scroll-preset" data-value="2" title="' + out('Apply') + '" type="button">2</button>' + '<button class="cmd-scroll-preset" data-value="3" title="' + out('Apply') + '" type="button">3</button>' + '<button class="cmd-scroll-preset" data-value="4" title="' + out('Apply') + '" type="button">4</button>' + '<button class="cmd-scroll-preset" data-value="5" title="' + out('Apply') + '" type="button">5</button>' + '<button class="cmd-scroll-preset" data-value="6" title="' + out('Apply') + '" type="button">6</button>' + '<button class="cmd-scroll-preset" data-value="7" title="' + out('Apply') + '" type="button">7</button>' + '<button class="cmd-scroll-preset" data-value="8" title="' + out('Apply') + '" type="button">8</button>' + '<button class="cmd-scroll-preset" data-value="9" title="' + out('Apply') + '" type="button">9</button>' + '<button class="cmd-scroll-preset" data-value="10" title="' + out('Apply') + '" type="button">10</button>' + '<button class="cmd-scroll-preset" data-value="11" title="' + out('Apply') + '" type="button">11</button>' + '<button class="cmd-scroll-preset" data-value="12" title="' + out('Apply') + '" type="button">12</button>' + '<button class="cmd-scroll-preset" data-value="13" title="' + out('Apply') + '" type="button">13</button>' + '<button class="cmd-scroll-preset" data-value="14" title="' + out('Apply') + '" type="button">14</button>' + '<button class="cmd-scroll-preset" data-value="" title="' + out('Remove') + '" type="button"><svg class="is-icon-flex" style="flex:none;width:10px;height:10px;"><use xlink:href="#icon-clean"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>' + '</div>';
     html += '<div class="is-modal editmodule" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:900px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Module Settings') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-bottom:60px solid transparent;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '<input id="hidModuleCode" type="hidden" />' + '<input id="hidModuleSettings" type="hidden" />' + '<button class="input-ok classic" style="height:60px;position:absolute;left:0;bottom:0;">' + out('Ok') + '</button>' + '</div>' + '</div>' + '' + '';
@@ -3829,6 +3829,55 @@ class EditSection {
         } //Trigger Change event
 
 
+        this.builder.settings.onChange();
+      });
+    });
+    const btnBetweenBoxSpacing = modalEditSection.querySelectorAll('.cmd-betweenbox-spacing');
+    btnBetweenBoxSpacing.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        let val = btn.getAttribute('data-value');
+        const activeSection = this.builder.activeSection;
+
+        if (val == 'space') {
+          dom$k.removeClass(activeSection, 'space-around');
+        } else {
+          dom$k.addClass(activeSection, 'space-around');
+        }
+
+        let btns = modalEditSection.querySelectorAll('.cmd-betweenbox-spacing');
+        btns.forEach(btn => {
+          dom$k.removeClass(btn, 'on');
+        });
+        dom$k.addClass(btn, 'on'); //Trigger Change event
+
+        this.builder.settings.onChange();
+      });
+    });
+    const btnSectionStack = modalEditSection.querySelectorAll('.cmd-section-stack');
+    btnSectionStack.forEach(btn => {
+      btn.addEventListener('click', () => {
+        this.builder.editor.saveForUndo();
+        let val = btn.getAttribute('data-value');
+        const activeSection = this.builder.activeSection;
+        dom$k.removeClass(activeSection, 'stack-top');
+        dom$k.removeClass(activeSection, 'stack-middle');
+        dom$k.removeClass(activeSection, 'stack-bottom');
+
+        if (val == 'top') {
+          dom$k.addClass(activeSection, 'stack-top');
+        } else if (val == 'middle') {
+          dom$k.addClass(activeSection, 'stack-middle');
+        } else if (val == 'bottom') {
+          dom$k.addClass(activeSection, 'stack-bottom');
+        }
+
+        let btns = modalEditSection.querySelectorAll('.cmd-section-stack');
+        btns.forEach(btn => {
+          dom$k.removeClass(btn, 'on');
+        });
+        dom$k.addClass(btn, 'on'); //Trigger Change event
+
         this.builder.settings.onChange();
       });
     });
@@ -3905,6 +3954,7 @@ class EditSection {
   }
 
   edit() {
+    this.builder.hideTools();
     this.builder.sidebar.closeSidebar();
     const activeSection = this.builder.activeSection;
     const modalEditSection = this.modalEditSection; // const elms = this.builder.doc.querySelectorAll('.section-active');
@@ -3915,6 +3965,7 @@ class EditSection {
     dom$k.addClass(activeSection, 'section-active');
     this.builder.showModal(modalEditSection, false, () => {
       dom$k.removeClass(activeSection, 'section-active');
+      this.builder.showTools();
     });
     modalEditSection.focus(); // Clean old unused is-bg-light/dark
 
@@ -4027,16 +4078,48 @@ class EditSection {
     }
 
     btns = modalEditSection.querySelectorAll('.cmd-box-spacing');
-    const divSectionBgColor = this.modalEditSection.querySelector('.div-section-bgcolor');
+    const divSectionSpaceSettings = this.modalEditSection.querySelector('.div-section-spacesettings');
     btns.forEach(btn => {
       dom$k.removeClass(btn, 'on');
     });
 
     if (dom$k.hasClass(activeSection, 'box-space')) {
-      if (dom$k.hasClass(activeSection, 'box-space-sm')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="sm"]'), 'on');else if (dom$k.hasClass(activeSection, 'box-space-m')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="m"]'), 'on');else if (dom$k.hasClass(activeSection, 'box-space-lg')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="lg"]'), 'on');else dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="default"]'), 'on');
-      divSectionBgColor.style.display = 'flex';
+      if (dom$k.hasClass(activeSection, 'box-space-sm')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="sm"]'), 'on');else if (dom$k.hasClass(activeSection, 'box-space-xxs')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="xxs"]'), 'on');else if (dom$k.hasClass(activeSection, 'box-space-m')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="m"]'), 'on');else if (dom$k.hasClass(activeSection, 'box-space-lg')) dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="lg"]'), 'on');else dom$k.addClass(modalEditSection.querySelector('.cmd-box-spacing[data-value="default"]'), 'on');
+      divSectionSpaceSettings.style.display = 'flex';
+    } else {
+      divSectionSpaceSettings.style.display = 'none';
+    }
+
+    const divMultiBoxes = this.modalEditSection.querySelector('.div-multi-boxes');
+
+    if (dom$k.hasClass(activeSection, 'is-box')) {
+      divMultiBoxes.style.display = 'none';
+    } else {
+      divMultiBoxes.style.display = 'block';
+    }
+
+    btns = modalEditSection.querySelectorAll('.cmd-betweenbox-spacing');
+    btns.forEach(btn => {
+      dom$k.removeClass(btn, 'on');
+    });
+
+    if (dom$k.hasClass(activeSection, 'space-around')) {
+      dom$k.addClass(modalEditSection.querySelector('.cmd-betweenbox-spacing[data-value="no-space"]'), 'on');
     } else {
-      divSectionBgColor.style.display = 'none';
+      dom$k.addClass(modalEditSection.querySelector('.cmd-betweenbox-spacing[data-value="space"]'), 'on');
+    }
+
+    btns = modalEditSection.querySelectorAll('.cmd-section-stack');
+    btns.forEach(btn => {
+      dom$k.removeClass(btn, 'on');
+    });
+
+    if (dom$k.hasClass(activeSection, 'stack-top')) {
+      dom$k.addClass(modalEditSection.querySelector('.cmd-section-stack[data-value="top"]'), 'on');
+    } else if (dom$k.hasClass(activeSection, 'stack-middle')) {
+      dom$k.addClass(modalEditSection.querySelector('.cmd-section-stack[data-value="middle"]'), 'on');
+    } else if (dom$k.hasClass(activeSection, 'stack-bottom')) {
+      dom$k.addClass(modalEditSection.querySelector('.cmd-section-stack[data-value="bottom"]'), 'on');
     }
 
     btns = modalEditSection.querySelectorAll('.cmd-scroll-preset');
@@ -4290,32 +4373,42 @@ class EditSection {
 
   boxSpacing(s) {
     const activeSection = this.builder.activeSection;
-    const divSectionBgColor = this.modalEditSection.querySelector('.div-section-bgcolor');
+    const divSectionSpaceSettings = this.modalEditSection.querySelector('.div-section-spacesettings');
 
     if (s == '') {
       dom$k.removeClass(activeSection, 'box-space');
+      dom$k.removeClass(activeSection, 'box-space-xxs');
       dom$k.removeClass(activeSection, 'box-space-sm');
       dom$k.removeClass(activeSection, 'box-space-m');
       dom$k.removeClass(activeSection, 'box-space-lg');
-      divSectionBgColor.style.display = 'none';
+      divSectionSpaceSettings.style.display = 'none';
     } else {
       dom$k.addClass(activeSection, 'box-space');
-      divSectionBgColor.style.display = 'flex';
+      divSectionSpaceSettings.style.display = 'flex';
     }
 
     if (s === 'sm') {
+      dom$k.removeClass(activeSection, 'box-space-xxs');
       dom$k.removeClass(activeSection, 'box-space-m');
       dom$k.removeClass(activeSection, 'box-space-lg');
       dom$k.addClass(activeSection, 'box-space-sm');
+    } else if (s == 'xxs') {
+      dom$k.removeClass(activeSection, 'box-space-m');
+      dom$k.removeClass(activeSection, 'box-space-sm');
+      dom$k.removeClass(activeSection, 'box-space-lg');
+      dom$k.addClass(activeSection, 'box-space-xxs');
     } else if (s == 'm') {
+      dom$k.removeClass(activeSection, 'box-space-xxs');
       dom$k.removeClass(activeSection, 'box-space-sm');
       dom$k.removeClass(activeSection, 'box-space-lg');
       dom$k.addClass(activeSection, 'box-space-m');
     } else if (s == 'lg') {
+      dom$k.removeClass(activeSection, 'box-space-xxs');
       dom$k.removeClass(activeSection, 'box-space-sm');
       dom$k.removeClass(activeSection, 'box-space-m');
       dom$k.addClass(activeSection, 'box-space-lg');
     } else if (s == 'default') {
+      dom$k.removeClass(activeSection, 'box-space-xxs');
       dom$k.removeClass(activeSection, 'box-space-sm');
       dom$k.removeClass(activeSection, 'box-space-m');
       dom$k.removeClass(activeSection, 'box-space-lg');
@@ -9942,7 +10035,7 @@ class EditBox {
     '<div style="display:flex">' + '<button title="' + out('Typography Style') + '" class="cmd-box-typography" data-value="+"> ' + out('Typography Style') + ' </button>' + '<br style="clear:both">' + '</div>' + '</div>' : '') + '</div>' + '<div id="divBoxContentContainer" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="padding-top:10px;">' + '<label for="chkParallaxContent" style="margin:0;"><input id="chkParallaxContent" type="checkbox" /> ' + out('Parallax') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkFadeContent" style="margin:0;"><input id="chkFadeContent" type="checkbox" /> ' + out('Fade') + '</label>' + '</div>';
     html += '<div style="display:flex;flex-direction: row;">' + '<div style="display:flex;flex-direction: column;margin-right:20px;">' + '<div style="padding-top:13px;padding-bottom: 3px;">' + out('Position') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Top Left') + '" class="cmd-box-content-pos" data-value="topleft" style="width:40px;">&#8598;</button>' + '<button title="' + out('Top Center') + '" class="cmd-box-content-pos" data-value="topcenter" style="width:40px;border-left:none;">&#8593;</button>' + '<button title="' + out('Top Right') + '" class="cmd-box-content-pos" data-value="topright" style="width:40px;border-left:none;">&#8599;</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Middle Left') + '" class="cmd-box-content-pos" data-value="middleleft" style="width:40px;border-top:none;">&#8592;</button>' + '<button title="' + out('Middle Center') + '" class="cmd-box-content-pos" data-value="middlecenter" style="width:40px;border-left:none;border-top:none;">&#9737;</button>' + '<button title="' + out('Middle Right') + '" class="cmd-box-content-pos" data-value="middleright" style="width:40px;border-left:none;border-top:none;">&#8594;</button>' + '</div>' + '<div style="display:flex">' + '<button title="' + out('Bottom Left') + '" class="cmd-box-content-pos" data-value="bottomleft" style="width:40px;border-top:none;">&#8601;</button>' + '<button title="' + out('Bottom Center') + '" class="cmd-box-content-pos" data-value="bottomcenter" style="width:40px;border-left:none;border-top:none;">&#8595;</button>' + '<button title="' + out('Bottom Right') + '" class="cmd-box-content-pos" data-value="bottomright" style="width:40px;border-left:none;border-top:none;">&#8600;</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 1px;">' + out('Height') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Auto') + '" class="cmd-content-height" data-value="" style="width:60px">Auto</button>' + '<button title="' + out('Full') + '" class="cmd-content-height" data-value="100" style="width:40px">Full</button>' + '</div>' + '<div class="div-content-justify">' + '<div style="padding-top:10px;padding-bottom: 1px;">' + out('Justify') + ':</div>' + '<div style="display: flex;flex-direction: row;flex-wrap: wrap;">' + '<button title="' + out('Top') + '" class="cmd-content-justify" data-value="flex-start" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-up"></use></svg></button>' + '<button title="' + out('Bottom') + '" class="cmd-content-justify" data-value="flex-end" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-arrow-bar-to-down"></use></svg></button>' + '<button title="' + out('Space Between') + '" class="cmd-content-justify" data-value="space-between" style="width:40px"><svg class="is-icon-flex" style="width:14px;height:14px;"><use xlink:href="#icon-space-between"></use></svg></button>' + '</div>' + '</div>' + '</div>' + '</div>';
     html += '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Vertical Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-y" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-y" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-y" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Horizontal Adjustment') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-content-edge-x" data-value="-" style="width:40px;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-content-edge-x" data-value="+" style="width:40px;border-left:none;">+</button>' + '<button title="' + out('Not Set') + '" class="cmd-box-content-edge-x" data-value="" style="display:none;width:40px;border-left:none;min-width:100px;">' + out('Not Set') + '</button>' + '</div>' + '</div>' + '<div style="padding-top:13px;">' + '<label for="chkAutofitContent" style="margin:0;"><input id="chkAutofitContent" type="checkbox" /> ' + out('Autofit Content on Mobile') + '</label>' + '</div>' + '</div>';
-    html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + ' & ' + out('Scale') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg2" style="margin:0;"><input id="chkParallaxBg2" type="checkbox" /> ' + out('Parallax') + ' ' + out('(visible on preview)') + '</label>' + '</div>';
+    html += '<div id="divBoxImage" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + (this.builder.settings.onCoverImageSelectClick != null ? '<div style="padding-top:20px;">' + '<button class="cmd-box-selectasset" style="width:120px;">' + out('Select Image') + '</button>' + '</div>' + '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>' : '<div style="padding-top:20px;">' + '<label for="chkAnimateBg" style="margin:0;"><input id="chkAnimateBg" type="checkbox" /> ' + out('Ken Burns Effect') + '</label>' + '</div>') + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg" style="margin:0;"><input id="chkParallaxBg" type="checkbox" /> ' + out('Parallax') + ' & ' + out('Scale') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkParallaxBg2" style="margin:0;"><input id="chkParallaxBg2" type="checkbox" /> ' + out('Parallax') + ' ' + out('(visible on preview)') + '</label>' + '</div>' + '<div style="padding-top:10px;">' + '<label for="chkZoomOnHover" style="margin:0;"><input id="chkZoomOnHover" type="checkbox" /> ' + out('Zoom on Hover') + '</label>' + '</div>';
     html += '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Color') + ':</div>' + '<div style="display:flex;">' + '<button title="' + out('Overlay Color') + '" class="input-box-overlaycolor is-btn-color" style="margin-right:15px"></button>' + '</div>' + '<div style="display:flex;flex-direction: column;">' + '<div style="padding-top:20px;padding-bottom: 3px;">' + out('Overlay Transparency') + ':</div>' + '<div style="display:flex">' + '<button title="' + out('Decrease') + '" class="cmd-box-overlayopacity" data-value="-" style="width:40px;border-left:none;">-</button>' + '<button title="' + out('Increase') + '" class="cmd-box-overlayopacity" data-value="+" style="width:40px;">+</button>' + '<button title="' + out('None') + '" class="cmd-box-overlayopacity" data-value="0" style="border-left:none;min-width:100px;">' + out('None') + '</button>' + '</div>' + '</div>' + '</div>' + '<div id="divBoxAnimate" class="is-tab-content" data-group="boxsettings" style="padding-top:0">' + '<div style="display:flex;flex-direction: column;">' + '<select class="cmd-box-animate">' + '<option value="">' + out('None') + '</option>' + '<option value="is-pulse">pulse</option>' + '<option value="is-bounceIn">bounceIn</option>' + '<option value="is-fadeIn">fadeIn</option>' + '<option value="is-fadeInDown">fadeInDown</option>' + '<option value="is-fadeInLeft">fadeInLeft</option>' + '<option value="is-fadeInRight">fadeInRight</option>' + '<option value="is-fadeInUp">fadeInUp</option>' + '<option value="is-flipInX">flipInX</option>' + '<option value="is-flipInY">flipInY</option>' + '<option value="is-slideInUp">slideInUp</option>' + '<option value="is-slideInDown">slideInDown</option>' + '<option value="is-slideInLeft">slideInLeft</option>' + '<option value="is-slideInRight">slideInRight</option>' + '<option value="is-zoomIn">zoomIn</option>' + '</select>' + '<label for="chkAnimOnce" style="margin:10px 0 0;"><input id="chkAnimOnce" type="checkbox" /> ' + out('Once') + '</label>' + '</div>';
     html += '<div>' + '<label style="padding-top:20px;">' + out('Delay') + ': ' + '<select class="cmd-box-animatedelay" style="margin-top:3px;">' + '<option value="">' + out('None') + '</option>' + '<option value="delay-0ms">0s</option>' + '<option value="delay-100ms">100ms</option>' + '<option value="delay-200ms">200ms</option>' + '<option value="delay-300ms">300ms</option>' + '<option value="delay-400ms">400ms</option>' + '<option value="delay-500ms">500ms</option>' + '<option value="delay-600ms">600ms</option>' + '<option value="delay-700ms">700ms</option>' + '<option value="delay-800ms">800ms</option>' + '<option value="delay-900ms">900ms</option>' + '<option value="delay-1000ms">1000ms</option>' + '<option value="delay-1100ms">1100ms</option>' + '<option value="delay-1200ms">1200ms</option>' + '<option value="delay-1300ms">1300ms</option>' + '<option value="delay-1400ms">1400ms</option>' + '<option value="delay-1500ms">1500ms</option>' + '<option value="delay-1600ms">1600ms</option>' + '<option value="delay-1700ms">1700ms</option>' + '<option value="delay-1800ms">1800ms</option>' + '<option value="delay-1900ms">1900ms</option>' + '<option value="delay-2000ms">2000ms</option>' + '<option value="delay-2100ms">2100ms</option>' + '<option value="delay-2200ms">2200ms</option>' + '<option value="delay-2300ms">2300ms</option>' + '<option value="delay-2400ms">2400ms</option>' + '<option value="delay-2500ms">2500ms</option>' + '<option value="delay-2600ms">2600ms</option>' + '<option value="delay-2700ms">2700ms</option>' + '<option value="delay-2800ms">2800ms</option>' + '<option value="delay-2900ms">2900ms</option>' + '<option value="delay-3000ms">3000ms</option>' + '</select></label>' + '</div>' + '<div style="padding-top:20px">' + '<button class="cmd-box-animate-test" style="width:100%">' + out('Test') + '</button>' + '</div>' + '</div>' + '</div>' + '</div>' + '' + '<div class="is-modal pickphoto" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">' + '<div style="max-width:1000px;height:570px;padding:0;box-sizing:border-box;position:relative;">' + '<div class="is-modal-bar is-draggable" style="position: absolute;top: 0;left: 0;width: 100%;z-index:1;">' + out('Photos') + '</div>' + '<iframe style="position: absolute;top: 0;left: 0;width:100%;height:100%;border:none;border-top:40px solid transparent;margin:0;box-sizing:border-box;" src="about:blank"></iframe>' + '</div>' + '</div>' + '';
     dom$j.appendHtml(builderStuff, html); // Box Tool
@@ -10907,6 +11000,20 @@ class EditBox {
       this.builder.editor.saveForUndo();
       this.boxParallaxBg2(); //Trigger Change event
 
+      this.builder.settings.onChange();
+    });
+    const chkZoomOnHover = modalEditBox.querySelector('#chkZoomOnHover');
+    chkZoomOnHover.addEventListener('click', () => {
+      this.builder.editor.saveForUndo();
+      let activeBox = this.builder.activeBox;
+
+      if (chkZoomOnHover.checked) {
+        activeBox.classList.add('hover-zoom');
+      } else {
+        activeBox.classList.remove('hover-zoom');
+      } //Trigger Change event
+
+
       this.builder.settings.onChange();
     });
     const btnBoxOverlayOpacity = modalEditBox.querySelectorAll('.cmd-box-overlayopacity');
@@ -11442,6 +11549,7 @@ class EditBox {
   }
 
   edit() {
+    this.builder.hideTools();
     this.targetBox = null;
     this.builder.sidebar.closeSidebar();
     const builderStuff = this.builderStuff;
@@ -11589,6 +11697,12 @@ class EditBox {
       } else {
         modalEditBox.querySelector('#chkParallaxBg2').checked = false;
       }
+
+      if (activeBox.classList.contains('hover-zoom')) {
+        modalEditBox.querySelector('#chkZoomOnHover').checked = true;
+      } else {
+        modalEditBox.querySelector('#chkZoomOnHover').checked = false;
+      }
     }
 
     if (dom$j.hasClass(activeBox, 'is-section')) {
@@ -11735,6 +11849,7 @@ class EditBox {
     dom$j.addClass(activeBox, 'box-active');
     this.builder.showModal(modalEditBox, false, () => {
       dom$j.removeClass(activeBox, 'box-active');
+      this.builder.showTools();
     });
     modalEditBox.focus();
 
@@ -11966,8 +12081,6 @@ class EditBox {
 
     if (dom$j.hasClass(activeSection, 'noedit')) {
       chkBoxAddText.style.display = 'none';
-    } else {
-      chkBoxAddText.style.display = 'flex';
     } // Content Height & Justify
 
 
@@ -12495,6 +12608,7 @@ class EditBox {
       overlayBg.removeAttribute('data-top-bottom');
       overlayBg.style.transform = 'translateY(0) scale(1)';
       overlayBg.style.transform = '';
+      overlayBg.style.transition = '';
       let s = overlayBg.outerHTML;
       overlayBg.parentNode.removeChild(overlayBg);
       dom$j.appendHtml(overlay, s);
@@ -18543,7 +18657,9 @@ class Util {
 
   repositionColumnTool(transition) {
     let columnTool = this.builder.colTool.columnTool;
+    if (!columnTool) return;
     let col = this.builder.activeCol;
+    if (!col) return;
 
     if (transition) {
       columnTool.style.transition = 'all 100ms ease';
@@ -62102,6 +62218,7 @@ class Image$1 {
                             <button title="3x4" data-crop-size="0.75" style="width: 45px;height: 60px;">3x4</button>
                             <button title="6x4" data-crop-size="1.5" style="width: 60px;height: 40px;">6x4</button>
                             <button title="4x6" data-crop-size="0.6666" style="width: 40px;height: 60px;">4x6</button>
+                            <button title="16x9" data-crop-size="1.77" style="width: 60px;height: 35px;">16x9</button>
                             <button title="${util.out('Free')}" data-crop-size="" style="width: 60px;height: 45px;">${util.out('Free')}</button>
                         </div>
                         <div class="imageedit-preview" style="max-width:1000px;width:100%;max-height:550px;">
@@ -63417,7 +63534,7 @@ class ButtonEditor {
                     ${util.out('Button')}
                     <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
                 </div>
-                <div style="padding:0">
+                <div style="padding:0;height:100%;">
                     <div class="is-tabs" data-group="button" style="position:relative;z-index:1">
                         <a title="${util.out('General')}" href="" data-content="divButtonGeneral" class="active">${util.out('General')}</a>
                         <a title="${util.out('Hover')}" href="" data-content="divButtonHover">${util.out('Hover')}</a>
@@ -63724,8 +63841,8 @@ class ButtonEditor {
         let elm = e.target;
         this.builder.colorPicker.open(color => {
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          activeButton.style.backgroundColor = color;
-          activeButton.setAttribute('data-bg', color);
+          activeButton.style.backgroundColor = color; // activeButton.setAttribute('data-bg', color);
+
           dom.removeClassesByPrefix(activeButton, 'bg-');
           elm.style.backgroundColor = color; // preview
           //Trigger Change event
@@ -63789,10 +63906,20 @@ class ButtonEditor {
         let elm = e.target;
         this.builder.colorPicker.open(color => {
           const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-          activeButton.setAttribute('data-hover-bg', color);
+
+          if (color === '') {
+            activeButton.removeAttribute('data-bg');
+            activeButton.removeAttribute('data-hover-bg');
+            activeButton.removeAttribute('onmouseover');
+            activeButton.removeAttribute('onmouseout');
+          } else {
+            activeButton.setAttribute('data-bg', activeButton.style.backgroundColor);
+            activeButton.setAttribute('data-hover-bg', color);
+            activeButton.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
+            activeButton.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
+          }
+
           dom.removeClassesByPrefix(activeButton, 'hover:bg-');
-          activeButton.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
-          activeButton.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
           elm.style.backgroundColor = color; // preview
           //Trigger Change event
 
@@ -64249,15 +64376,20 @@ class ButtonEditor {
 
         dom.removeClass(activeButton, 'active');
         dom.removeClass(activeButton, 'elm-active');
-        const dataBg = activeButton.getAttribute('data-bg');
-        const dataHoverBg = activeButton.getAttribute('data-hover-bg');
-        const color = activeButton.style.color;
+        let dataBg = activeButton.getAttribute('data-bg'); // if(!dataBg) {
+        //     if(activeButton.style.backgroundColor) dataBg=activeButton.style.backgroundColor;
+        // }
+
+        const dataHoverBg = activeButton.getAttribute('data-hover-bg'); // const color = activeButton.style.color;
+
+        const cssText = activeButton.style.cssText;
         mybuttons.push({
           id: mybuttons.length,
           className: activeButton.className,
           bg: dataBg ? dataBg : '',
           hoverBg: dataHoverBg ? dataHoverBg : '',
-          color: color ? color : ''
+          // color: color?color:'',
+          cssText: cssText
         });
         localStorage.setItem('_savedbuttons', JSON.stringify(mybuttons));
         this.renderMyButtons();
@@ -64292,6 +64424,14 @@ class ButtonEditor {
           this.getVisibleBgColor(item.replace('hover:', ''), color => {
             btnHoverBgColor.style.backgroundColor = color;
             activeButton.setAttribute('data-hover-bg', color); //new inline
+
+            if (!activeButton.hasAttribute('data-bg')) {
+              // fix needed data-bg
+              activeButton.setAttribute('data-bg', btnBgColor.style.backgroundColor); // needed by hover
+            }
+
+            activeButton.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
+            activeButton.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
           });
         }
 
@@ -64318,7 +64458,13 @@ class ButtonEditor {
     } // NEW: inline color
 
 
-    if (activeButton.style.backgroundColor) btnBgColor.style.backgroundColor = activeButton.getAttribute('data-bg'); //activeButton.style.backgroundColor;
+    if (activeButton.hasAttribute('data-bg')) {
+      btnBgColor.style.backgroundColor = activeButton.getAttribute('data-bg');
+    } else {
+      if (activeButton.style.backgroundColor) {
+        btnBgColor.style.backgroundColor = activeButton.style.backgroundColor;
+      }
+    }
 
     if (activeButton.getAttribute('data-hover-bg')) btnHoverBgColor.style.backgroundColor = activeButton.getAttribute('data-hover-bg');
     if (activeButton.style.color) btnTextColor.style.backgroundColor = activeButton.style.color;
@@ -64516,7 +64662,95 @@ class ButtonEditor {
   }
 
   renderTemplates() {
-    const templates = [{
+    const templates = [
+    /* rounded */
+    {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded-full tracking-125">Read More</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded-full border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded-full" style="color: rgb(255, 255, 255);">Get Started</a>
+                `
+    },
+    /* colors */
+    {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded-full ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
+                `
+    },
+    /* square */
+    {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed rounded tracking-125">Read More</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 text-black leading-relaxed rounded border-transparent hover:border-transparent font-normal tracking-125" style="background-color: rgb(240, 240, 240);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(255, 127, 0);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(83,98,208);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 mt-1 uppercase py-2 size-14 px-8 border-current hover:border-current font-normal leading-relaxed tracking-125 rounded" style="color: rgb(255, 255, 255);">Get Started</a>
+                `
+    },
+    /* colors */
+    {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(0, 200, 218);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(55, 148, 59);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(255, 255, 255); background-color: rgb(233,2,0);">Get Started</a>
+                `
+    }, {
+      html: `
+                <a href="#" role="button" class="transition-all inline-block cursor-pointer no-underline border-2 border-solid mr-1 py-2 px-8 font-normal leading-relaxed border-transparent rounded ml-0 mt-1 size-14 tracking-125 hover:border-transparent uppercase" style="color: rgb(0, 0, 0); background-color: rgb(254, 222, 76);">Get Started</a>
+                `
+    }, {
       text: 'Order Now',
       className: 'transition-all inline-block cursor-pointer no-underline border-2 border-solid rounded-full border-current ml-1 mr-1 px-8 py-2 text-pink-600 hover:text-white  bg-white hover:bg-pink-500 hover:border-transparent size-18 font-semibold tracking-75 leading-relaxed'
     }, {
@@ -64568,7 +64802,11 @@ class ButtonEditor {
     let html = '';
 
     for (let i = 0; i < templates.length; i++) {
-      html += `<a class="${templates[i].className}" href="#" role="button" tabindex="0">${templates[i].text}</a>`;
+      if (templates[i].html) {
+        html += templates[i].html;
+      } else {
+        html += `<a class="${templates[i].className}" href="#" role="button" tabindex="0">${templates[i].text}</a>`;
+      }
     }
 
     document.querySelector('#divButtonTemplateList').innerHTML = html;
@@ -64576,10 +64814,30 @@ class ButtonEditor {
     Array.prototype.forEach.call(btns, btn => {
       btn.addEventListener('click', e => {
         this.builder.uo.saveForUndo();
-        const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
-        this.applyStyles(activeButton, btn);
-        this.cleanupOldClasses(activeButton);
-        this.builder.opts.onChange();
+        const activeButton = this.builder.activeButton || this.builder.activeLinkButton; // this.applyStyles(activeButton, btn);
+        // this.cleanupOldClasses(activeButton);
+
+        activeButton.removeAttribute('style');
+        activeButton.removeAttribute('onmouseover');
+        activeButton.removeAttribute('onmouseout');
+        activeButton.removeAttribute('data-bg');
+        activeButton.removeAttribute('data-hover-bg');
+        activeButton.setAttribute('class', btn.getAttribute('class'));
+        if (btn.hasAttribute('style')) activeButton.setAttribute('style', btn.getAttribute('style'));
+        if (btn.hasAttribute('onmouseover')) activeButton.setAttribute('onmouseover', btn.getAttribute('onmouseover'));
+        if (btn.hasAttribute('onmouseout')) activeButton.setAttribute('onmouseout', btn.getAttribute('onmouseout'));
+
+        if (btn.hasAttribute('data-bg')) {
+          activeButton.setAttribute('data-bg', btn.getAttribute('data-bg'));
+          activeButton.style.backgroundColor = btn.getAttribute('data-bg');
+        }
+
+        if (btn.hasAttribute('data-hover-bg')) {
+          activeButton.setAttribute('data-hover-bg', btn.getAttribute('data-hover-bg'));
+        }
+
+        activeButton.classList.remove('active');
+        this.realtime();
         e.preventDefault();
         return false;
       });
@@ -64593,14 +64851,26 @@ class ButtonEditor {
     let html_mybuttons = '';
 
     for (let i = 0; i < mybuttons.length; i++) {
-      html_mybuttons += `<a data-id="${mybuttons[i].id}" data-bg="${mybuttons[i].bg}" data-hover-bg="${mybuttons[i].hoverBg}" class="${mybuttons[i].className}" href="#" style="color:${mybuttons[i].color};background-color:${mybuttons[i].bg}">Button<span class="is-button-remove"><svg class="is-icon-flex" style="fill:rgba(255, 255, 266, 1);width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></span></a>`;
+      let sDataBg = '';
+      if (mybuttons[i].bg !== '') sDataBg = ` data-bg="${mybuttons[i].bg}"`;
+      let sDataHoverBg = '';
+      if (mybuttons[i].hoverBg !== '') sDataHoverBg = ` data-hover-bg="${mybuttons[i].hoverBg}"`;
+
+      if (sDataHoverBg !== '' && sDataBg === '') {
+        sDataBg = ' data-bg=""';
+      }
+
+      html_mybuttons += `<a data-id="${mybuttons[i].id}"${sDataBg}${sDataHoverBg} class="${mybuttons[i].className}" href="#" style="${mybuttons[i].cssText}">Button<span class="is-button-remove"><svg class="is-icon-flex" style="fill:rgba(255, 255, 266, 1);width:20px;height:20px;"><use xlink:href="#ion-ios-close-empty"></use></svg></span></a>`;
     }
 
     document.querySelector('#divMyButtonList').innerHTML = html_mybuttons;
     let btns = this.buttonModal.querySelectorAll('#divMyButtonList a');
     Array.prototype.forEach.call(btns, btn => {
-      btn.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
-      btn.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
+      if (btn.getAttribute('data-hover-bg')) {
+        btn.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
+        btn.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
+      }
+
       btn.addEventListener('click', e => {
         this.builder.uo.saveForUndo();
         const activeButton = this.builder.activeButton || this.builder.activeLinkButton;
@@ -64608,10 +64878,31 @@ class ButtonEditor {
         Array.prototype.forEach.call(links, link => {
           dom.removeClass(link, 'active');
         });
-        dom.addClass(btn, 'active');
-        this.applyStyles(activeButton, btn);
-        this.cleanupOldClasses(activeButton);
+        dom.addClass(btn, 'active'); // this.applyStyles(activeButton, btn);
+        // this.cleanupOldClasses(activeButton);
+
+        activeButton.removeAttribute('style');
+        activeButton.removeAttribute('onmouseover');
+        activeButton.removeAttribute('onmouseout');
+        activeButton.removeAttribute('data-bg');
+        activeButton.removeAttribute('data-hover-bg');
+        activeButton.setAttribute('class', btn.getAttribute('class'));
+        if (btn.hasAttribute('style')) activeButton.setAttribute('style', btn.getAttribute('style'));
+        if (btn.hasAttribute('onmouseover')) activeButton.setAttribute('onmouseover', btn.getAttribute('onmouseover'));
+        if (btn.hasAttribute('onmouseout')) activeButton.setAttribute('onmouseout', btn.getAttribute('onmouseout'));
+
+        if (btn.hasAttribute('data-bg')) {
+          activeButton.setAttribute('data-bg', btn.getAttribute('data-bg'));
+          activeButton.style.backgroundColor = btn.getAttribute('data-bg');
+        }
+
+        if (btn.hasAttribute('data-hover-bg')) {
+          activeButton.setAttribute('data-hover-bg', btn.getAttribute('data-hover-bg'));
+        }
+
+        activeButton.classList.remove('active');
         this.builder.opts.onChange();
+        this.realtime();
         e.preventDefault();
         return false;
       });
@@ -64672,23 +64963,15 @@ class ButtonEditor {
   }
 
   applyDefault(link) {
-    const dom = this.dom;
-    dom.addClass(link, 'transition-all');
-    if (!dom.hasClass(link, 'flex')) dom.addClass(link, 'inline-block');
-    dom.addClass(link, 'cursor-pointer'); // dom.addClass(link, 'border-2');
-
-    dom.addClass(link, 'border-solid');
-    dom.addClass(link, 'leading-relaxed'); // dom.addClass(link, 'mt-2');
-    // dom.addClass(link, 'mb-2');
-    // link.removeAttribute('style');
-    // link.removeAttribute('onmouseover');
-    // link.removeAttribute('onmouseout');
-
+    // const dom = this.dom;
+    // dom.addClass(link, 'transition-all');
+    // if(!dom.hasClass(link,'flex')) dom.addClass(link, 'inline-block');
+    // dom.addClass(link, 'cursor-pointer');
+    // dom.addClass(link, 'border-solid');
+    // dom.addClass(link, 'leading-relaxed');
     link.removeAttribute('data-hover-bgcolor');
     link.removeAttribute('data-hover-color');
     link.removeAttribute('data-hover-bordercolor');
-    link.setAttribute('onmouseover', 'if(this.getAttribute(\'data-hover-bg\'))this.style.backgroundColor=this.getAttribute(\'data-hover-bg\');');
-    link.setAttribute('onmouseout', 'if(this.getAttribute(\'data-bg\'))this.style.backgroundColor=this.getAttribute(\'data-bg\');else this.style.backgroundColor=\'\'');
   }
 
   cleanupOldClasses(link) {
@@ -93765,7 +94048,7 @@ class ContentBox {
       useCssClasses: true,
       useButtonPlugin: false,
       enableDragResize: true,
-      simpleTextSettings: true,
+      simpleTextSettings: false,
 
       /* Old Version (backward compatible) */
       onAddSectionOpen: function () {},
@@ -94986,6 +95269,38 @@ class ContentBox {
   */
 
 
+  hideTools() {
+    // hide tools
+    let tools = this.doc.querySelectorAll('.is-tool');
+    Array.prototype.forEach.call(tools, tool => {
+      tool.style.display = '';
+    });
+    let tool = this.doc.querySelector('.is-column-tool');
+    tool.style.display = 'none';
+    tools = this.doc.querySelectorAll('.is-row-tool');
+    tools.forEach(tool => {
+      tool.style.display = 'none';
+    });
+    tools = this.doc.querySelectorAll('.is-rowadd-tool');
+    tools.forEach(tool => {
+      tool.style.opacity = 0;
+    });
+  }
+
+  showTools() {
+    this.editor.util.repositionColumnTool();
+    let tool = this.doc.querySelector('.is-column-tool');
+    tool.style.display = '';
+    let tools = this.doc.querySelectorAll('.is-row-tool');
+    tools.forEach(tool => {
+      tool.style.display = '';
+    });
+    tools = this.doc.querySelectorAll('.is-rowadd-tool');
+    tools.forEach(tool => {
+      tool.style.opacity = '';
+    });
+  }
+
   positionTool(box) {
     if (!box) return; // Zoom