,
junaidte14
7–11 minutes

Add Sections and Customizable Header Layouts to older weebly themes – Weebly Tutorials

Views: 233

With weebly 4 we have new design elements like sections, section layouts and customizable header layouts which gives the functionality to build even more attractive and professional weebly websites. With these new design elements we can add video backgrounds (Pro Members only), parallax sections, team sections, menu sections, call out sections, image headers, video headers and many other pre-built customizable layouts. In this post we will discuss how to add sections and customizable header layouts to older weebly themes. Weebly explains:
  • Sections: Transform your site with stackable, independent sections you can use to create entirely new designs, including parallax and reveal effects. This feature is free and available for all plans, just drag on the section element from the sidebar
  • Section Layouts: A variety of new professionally designed, pre-built layouts for your website.
  • Customizable Headers: Drag elements into your page headers and dynamically resize the header field to create one-of-a-kind pages. Free with all plans.
  • Video Backgrounds: Integrate videos directly into your page layouts to create stunning site designs that will impress visitors and customers. Choose videos from our free video library or upload your own. Video backgrounds are available with Pro Plans and above.
  • New Themes: Our theme gallery has been modernized with a wide selection of new themes and pre built templates.


Log in now to access all the latest updates. ​

Please Note: Sections is not available for older, non-responsive themes or custom themes. ​

As weebly says that these new section elements and customizable header layouts are not available in older themes. So in this blog post we will explain how to make these new section elements integrated in our old / custom weebly themes. Below is the step by step process :

STEP 1 : CREATE A NEW HEADER TYPE

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“borderThickness_each”:[{“borderThickness_index”:0},{“borderThickness_index”:1}],”borderRadius_each”:[{“borderRadius_index”:0},{“borderRadius_index”:1},{“borderRadius_index”:2},{“borderRadius_index”:3},{“borderRadius_index”:4}],”selectHeadline”:”h2″,”headlineAlignment”:”center”,”borderThickness”:2,”borderStyle”:”solid”,”borderColor”:”#8d2424″,”borderRadius”:5,”headlineBgColor”:”#fff”,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “942383847612858366”;

_Element.prototype.element_id = “fee72883-c4de-4769-8c48-402d911cbdb9”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-fee72883-c4de-4769-8c48-402d911cbdb9’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement942383847612858366(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement942383847612858366, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement942383847612858366(); } }); }

Inside weebly editor go into Theme -> Edit Html / Css -> click plus icon against Header Type and click New Header  Type. Rename the newly created header type to whatever name you want, I have renamed it to “newheader”. Now click tall-header.html and copy all code from it and paste it inside newly created Header Type newheader.html (make sure to delete previous code from newheader.html) as shown in below images.

STEP 2 : MODIFY BANNER AND MAIN CONTENT DIV CODES

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“borderThickness_each”:[{“borderThickness_index”:0},{“borderThickness_index”:1}],”borderRadius_each”:[{“borderRadius_index”:0},{“borderRadius_index”:1},{“borderRadius_index”:2},{“borderRadius_index”:3},{“borderRadius_index”:4}],”selectHeadline”:”h2″,”headlineAlignment”:”center”,”borderThickness”:2,”borderStyle”:”solid”,”borderColor”:”#508d24″,”borderRadius”:5,”headlineBgColor”:”#fff”,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “778815862783935378”;

_Element.prototype.element_id = “1e444734-44b9-4d01-b56a-914540f2a71f”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-1e444734-44b9-4d01-b56a-914540f2a71f’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement778815862783935378(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement778815862783935378, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement778815862783935378(); } }); }

Now inside newheader.html, find the code highlighted in below image (first image). (please note that your theme may use different id’s or classes). ​In highlighted code you can easily see the 2 div’s one of them is for banner / header and the other one is for main content. Remove the codes inside these 2 div’s as shown in below image (second image). If your banner / header div is using a class “wsite-background” then remove it as shown in below image (third image).

STEP 3 : ADD NEW CODES

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“borderThickness_each”:[{“borderThickness_index”:0},{“borderThickness_index”:1}],”borderRadius_each”:[{“borderRadius_index”:0},{“borderRadius_index”:1},{“borderRadius_index”:2},{“borderRadius_index”:3},{“borderRadius_index”:4}],”selectHeadline”:”h2″,”headlineAlignment”:”center”,”borderThickness”:2,”borderStyle”:”solid”,”borderColor”:”#248d6c”,”borderRadius”:5,”headlineBgColor”:”#fff”,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “875443083403118741”;

_Element.prototype.element_id = “132c1965-60d4-42d4-bf91-237bd1dec3dc”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-132c1965-60d4-42d4-bf91-237bd1dec3dc’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement875443083403118741(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement875443083403118741, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement875443083403118741(); } }); }

Now add following code in banner / header div:

{{#header}}
                  <div class=”container”>
                        <div class=”banner”>{content}</div>
                    </div>
{{/header}}

as shown in below image (first image). Add following code in main content div:

{{#sections}}
                <div class=”container”>{content}</div>
{{/sections}}

as shown in below image (second image).

STEP 4 : SAVE AND PUBLISH

if (typeof _W.loadedPlatformDependencies === ‘undefined’) { _W.loadedPlatformDependencies = []; }

if (typeof _W.platformElements === ‘undefined’) { _W.platformElements = []; }

if (typeof _W.platformElements[platform_element_id] === ‘undefined’) { _W.platformElements[platform_element_id] = {}; _W.platformElements[platform_element_id].deferredObject = new $.Deferred(); _W.platformElements[platform_element_id].deferredPromise = _W.platformElements[platform_element_id].deferredObject.promise(); }

if(_.intersection(_W.loadedPlatformDependencies, dependencies).length !== dependencies.length){ _.reduce(dependencies, function(promise, nextScript){ _W.loadedPlatformDependencies.push(nextScript); return promise.then(function(){ return $.getScript(nextScript); }); }, $().promise()).then(function(){ _W.platformElements[platform_element_id].deferredObject.resolve(); }); }

if (dependencies.length === 0){ _W.platformElements[platform_element_id].deferredObject.resolve(); }

_W.platformElements[platform_element_id].deferredPromise.done(function(){ var _ElementDefinition = /** * This is required for element rendering to be possible * @type {PlatformElement} * * we normalize the styles on initial load. */

(function() { var SEOHeadlines = PlatformElement.extend({ initialize: function() { // we normalize the styles on initial load. $(document).ready(function() { this.fixStyles(); }.bind(this));

this.fixStyles(); },

/** * Lots of styles are applied by default to editable areas of * the editor. To make the element looks how you want, some styles * need to be overwritten. */ fixStyles: function() { this.$(‘.editable-text’).each(function(index, value) { $(value).attr(‘style’, ”); });

this.$(‘.element’).each(function(index, value) { $(value).attr(‘style’, ”); }); } });

return SEOHeadlines; })();;

if (typeof _ElementDefinition == ‘undefined’ || typeof _ElementDefinition == ‘null’) { var _ElementDefinition = PlatformElement.extend({}); }

var _Element = _ElementDefinition.extend({ initialize: function() { // we still want to call the initialize function defined by the developer // however, we don’t want to call it until placeholders have been replaced this.placeholderInterval = setInterval(function() { // so use setInterval to check for placeholders. if (this.$(‘.platform-element-child-placeholder’).length == 0) { clearInterval(this.placeholderInterval); this.constructor.__super__.initialize.apply(this); } }.bind(this), 100); } });

_Element.prototype.settings = new PlatformElementSettings({“borderThickness_each”:[{“borderThickness_index”:0},{“borderThickness_index”:1}],”borderRadius_each”:[{“borderRadius_index”:0},{“borderRadius_index”:1},{“borderRadius_index”:2},{“borderRadius_index”:3},{“borderRadius_index”:4}],”selectHeadline”:”h2″,”headlineAlignment”:”center”,”borderThickness”:2,”borderStyle”:”solid”,”borderColor”:”#81c94c”,”borderRadius”:5,”headlineBgColor”:”#fff”,”headlineColor”:”#000″}); _Element.prototype.settings.page_element_id = “657811978544722107”;

_Element.prototype.element_id = “c6fbd1c5-fe2f-48e2-9aff-b026f4f61537”; _Element.prototype.user_id = “13952731”; _Element.prototype.site_id = “157540419447505247”; _Element.prototype.assets_path = “//marketplace.editmysite.com/elements/307215191696725706-1.0.0/assets/”; new _Element({ el: ‘#element-c6fbd1c5-fe2f-48e2-9aff-b026f4f61537’ }); }); }); }

if (typeof document.documentElement.appReady == ‘undefined’) { document.documentElement.appReady = 0; }

if (document.documentElement.appReady || (window.inEditor && window.inEditor())) { setupElement657811978544722107(); } else if (document.createEvent && document.addEventListener) { document.addEventListener(‘appReady’, setupElement657811978544722107, false); } else { document.documentElement.attachEvent(‘onpropertychange’, function(event){ if (event.propertyName == ‘appReady’) { setupElement657811978544722107(); } }); }

Hit save button. Now go into pages and create new page for testing and name it whatever you want and make sure to change its layout type to newheader or whatever name you entered for new header type as shown in below image (first image). That’s all now you can see the new Header / Banner and sections functionality is integrated. see below images (second and third images).

Tags

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Search

Categories

Recent Posts

Tags

angular block theme BlockTheme block themes CodoBookings c programming data science docker expressjs fastapi full site editing FullSiteEditing gutenberg java learn angular learn html & html5 learn nextjs learn wordpress machine learning mongodb n8n beginner guide n8n tutorial nginx nodejs react research methodologies R programming theme.json ubuntu versana companion plugin vps vps server website migration weebly app weebly apps weebly tutorials wordpress blocks wordpress block theme wordpress news wordpress plugin development wordpress plugins wordpress security wordpress templates wordpress theme development wordpress tutorials