{"id":32330,"date":"2021-01-25T01:45:44","date_gmt":"2021-01-25T01:45:44","guid":{"rendered":"https:\/\/codex-themes.com\/thegem\/?page_id=32330"},"modified":"2021-10-29T10:41:49","modified_gmt":"2021-10-29T10:41:49","slug":"header-and-footer","status":"publish","type":"page","link":"https:\/\/codex-themes.com\/thegem\/header-and-footer\/","title":{"rendered":"Header and Footer"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row_content&#8221; full_height=&#8221;yes&#8221; columns_placement=&#8221;top&#8221; css=&#8221;.vc_custom_1562767668406{background-image: url(https:\/\/codex-themes.com\/thegem\/wp-content\/uploads\/2019\/07\/6-1.png?id=32340) !important;}&#8221;][vc_column][vc_row_inner][vc_column_inner]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 146px;\"><\/div><div class=\"centered-box gem-image-centered-box\"><div class=\"gem-image gem-wrapbox gem-wrapbox-style-default gem-wrapbox-position-centered\"  style=\"\"><div class=\"gem-wrapbox-inner \" ><img class=\"gem-wrapbox-element img-responsive\" src=\"https:\/\/codex-themes.com\/thegem\/wp-content\/uploads\/2019\/07\/4-1.png\" alt=\"\"\/><\/div><\/div><\/div><div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 22px;\"><\/div>[\/vc_column_inner][\/vc_row_inner][vc_row_inner el_class=&#8221;custom-row&#8221;][vc_column_inner width=&#8221;1\/6&#8243; offset=&#8221;vc_hidden-md vc_hidden-sm vc_hidden-xs&#8221;][\/vc_column_inner][vc_column_inner css=&#8221;.vc_custom_1562768796695{background-image: url(https:\/\/codex-themes.com\/thegem\/wp-content\/uploads\/2019\/07\/builder.png?id=32344) !important;}&#8221; offset=&#8221;vc_col-lg-8&#8243;]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 26px;\"><\/div><script type=\"text\/javascript\">(function() { function TheGemHeading() { this.selector = '.thegem-heading'; this.animateClass = 'thegem-heading-animate'; this.animatedClass = 'thegem-heading-animated'; this.rotatingSelector = '.thegem-heading-rotating'; } TheGemHeading.prototype = { initialize: function () { let items = document.querySelectorAll(this.selector); if ('IntersectionObserver' in window) { let intersectionObserver = new IntersectionObserver((entries, observer)=>{ entries.forEach((entry)=> { if (entry.isIntersecting) { this.startAnimation(entry.target); intersectionObserver.unobserve(entry.target); } }); }); items.forEach((item)=>{ intersectionObserver.observe(item); setTimeout(()=>this.prepareAnimation(item), 300); }); } else { items.forEach((item)=>{ this.prepareAnimation(item); this.startAnimation(item); }); } }, startAnimation: function (element) { if (element.classList.contains(this.animateClass)) { setTimeout(()=>{ element.classList.remove(this.animateClass); element.classList.add(this.animatedClass); }, 300); } let rotatingItem = element.querySelector(this.rotatingSelector); if (typeof(rotatingItem) != 'undefined' && rotatingItem != null) { this.rotating(rotatingItem); } }, isRotating: function (element) { return element.querySelector(this.rotatingSelector) !== null; }, prepareAnimation: function (element) { if (!element || this.isRotating(element)) { return; } const animationName = element.dataset.animationName; const animationDelay = parseInt(element.dataset.animationDelay) || 0; const animationInterval = parseInt(element.dataset.animationInterval) || 0; switch (animationName) { case 'lines-slide-up': case 'lines-slide-up-random': const animationLineTagWrap = '<span class=\"thegem-heading-line-wrap\">'; function animationLineTag (index) { let styles = ''; if (animationName === 'lines-slide-up' && (animationDelay > 0 || animationInterval > 0)) { styles = `animation-delay: ${(animationDelay + (animationInterval*(index+1)))}ms;`; } return '<span class=\"thegem-heading-line\"' + (styles!== '' ? ' style=\"'+styles+'\"' : '') + '>'; } let nodes = element.childNodes; let currentOffset = nodes[0].offsetTop; let index = 0; let idx = 0; let html = animationLineTagWrap + animationLineTag(index); for (let i = 0; i < nodes.length; i++) { if (nodes[i].nodeType === 3) continue; if (nodes[i].offsetTop > currentOffset + nodes[i].scrollHeight\/2) { index++; html += '<\/span><\/span>' + animationLineTagWrap + animationLineTag(index); currentOffset = nodes[i].offsetTop; if (animationName === 'lines-slide-up-random') idx = 0; } if (animationName === 'lines-slide-up-random' && (animationDelay > 0 || animationInterval > 0)) { nodes[i].style.animationDelay = (animationDelay + animationInterval*(idx+1)) + 'ms'; } html += nodes[i].outerHTML + ' '; if (animationName === 'lines-slide-up-random') idx++; } html += '<\/span><\/span>'; element.innerHTML = html; break; } }, rotating: function (element,) { let current = element.querySelector('.thegem-heading-rotating-text'); element.style.width = element.clientWidth+'px'; current.style.width = element.clientWidth+'px'; setInterval(()=>{ let next = current.nextElementSibling !== null ? current.nextElementSibling : element.childNodes[0]; let nextWidth = next.clientWidth; let currentWidth = current.clientWidth; element.style.width = nextWidth + 'px'; current.style.width = '1px'; current.style.opacity = 0; next.style.width = '1px'; setTimeout(()=>{ current.style.position = 'absolute'; current.style.width = currentWidth + 'px'; next.style.position = 'relative'; next.style.opacity = 1; next.style.width = nextWidth + 'px'; current = next; }, 500); }, 2500); } }; window.theGemHeading = new TheGemHeading(); document.addEventListener('DOMContentLoaded', function(event) { window.theGemHeading.initialize(); }); if (window.parent.vc) { window.parent.vc.events.on('shortcodeView:updated', function (event) { let element = event.view.el.querySelector('.thegem-heading'); window.theGemHeading.prepareAnimation(element); window.theGemHeading.startAnimation(element); }); window.parent.vc.events.on('app.render', function () { window.theGemHeading.initialize(); }); }\n})();<\/script><div id=\"thegem-heading-69e09cea43963\" class=\"thegem-heading title-h3 letters-scale-out thegem-heading-animate\" style=\"text-align: center;\" ><span class=\"thegem-heading-word\" style=\"color: #ffffff;\"><span class=\"thegem-heading-letter\" style=\"animation-delay: 240ms\">H<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 280ms\">e<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 320ms\">a<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 360ms\">d<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 400ms\">e<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 440ms\">r<\/span><\/span> <span class=\"thegem-heading-word\" style=\"color: #ffffff;\"><span class=\"thegem-heading-letter\" style=\"animation-delay: 480ms\">&<\/span><\/span> <span class=\"thegem-heading-word\" style=\"color: #ffffff;\"><span class=\"thegem-heading-letter\" style=\"animation-delay: 520ms\">F<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 560ms\">o<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 600ms\">o<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 640ms\">t<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 680ms\">e<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 720ms\">r<\/span><\/span><\/div><style type=\"text\/css\">#thegem-heading-69e09cea43963 {margin: 0;}#thegem-heading-69e09cea43963 {margin-left: auto; margin-right: auto;}#thegem-heading-69e09cea43963 {font-size: 46px;}#thegem-heading-69e09cea43963 {letter-spacing: 2.16px;}#thegem-heading-69e09cea43963, #thegem-heading-69e09cea43963 .light {text-transform: uppercase;}#thegem-heading-69e09cea43963 .thegem-heading-letter {animation-duration: 1000ms;}<\/style><div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 30px;\"><\/div><div id=\"thegem-heading-69e09cea43a21\" class=\"thegem-heading title-xlarge custom-text letters-scale-out thegem-heading-animate\" style=\"text-align: center;\" ><span class=\"thegem-heading-word\" style=\"color: #00bcd4;\"><span class=\"thegem-heading-letter\" style=\"animation-delay: 560ms\">b<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 620ms\">u<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 680ms\">i<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 740ms\">l<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 800ms\">d<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 860ms\">e<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 920ms\">r<\/span><\/span><\/div><style type=\"text\/css\">#thegem-heading-69e09cea43a21 {margin: 0;}#thegem-heading-69e09cea43a21 {margin-left: auto; margin-right: auto;}#thegem-heading-69e09cea43a21 {font-size: 100px;}#thegem-heading-69e09cea43a21 {letter-spacing: 2.11px;}#thegem-heading-69e09cea43a21, #thegem-heading-69e09cea43a21 .light {text-transform: uppercase;}@media screen and (max-width: 767px) {#thegem-heading-69e09cea43a21 {font-size: 57px;}}#thegem-heading-69e09cea43a21 .thegem-heading-letter {animation-duration: 1000ms;}<\/style><div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 49px;\"><\/div>[\/vc_column_inner][vc_column_inner width=&#8221;1\/6&#8243; offset=&#8221;vc_hidden-md vc_hidden-sm vc_hidden-xs&#8221;][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 29px;\"><\/div><div class=\"centered-box gem-image-centered-box\"><div class=\"gem-image gem-wrapbox gem-wrapbox-style-default gem-wrapbox-position-centered\"  style=\"\"><div class=\"gem-wrapbox-inner \" ><img class=\"gem-wrapbox-element img-responsive\" src=\"https:\/\/codex-themes.com\/thegem\/wp-content\/uploads\/2019\/07\/5-1.png\" alt=\"\"\/><\/div><\/div><\/div><div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 139px;\"><\/div>[\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/12&#8243;][\/vc_column][vc_column width=&#8221;5\/6&#8243; css=&#8221;.vc_custom_1562933821802{margin-top: 90px !important;padding-right: 0px !important;}&#8221;]<div class=\"gem-dropcap gem-dropcap-shape-circle gem-dropcap-style-big\"><span class=\"gem-dropcap-letter\" style=\"color: #ffffff;background-color: #00bcd4;\">1<\/span><\/div>[vc_column_text css=&#8221;.vc_custom_1562766781984{padding-top: 30px !important;}&#8221;]<\/p>\n<h2>Create your template<\/h2>\n<p>[\/vc_column_text]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 20px;\"><\/div><div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 20px;\"><\/div>[vc_column_text]<\/p>\n<div class=\"styled-subtitle\">Using an intuitive front-end visual editor, create any imaginable layout and design for your page title or footer and save it as a template.<\/div>\n<p>[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/12&#8243;][\/vc_column][\/vc_row][vc_row el_class=&#8221;box-shadow&#8221;][vc_column el_class=&#8221;remove-divider&#8221; css=&#8221;.vc_custom_1562933231711{padding-right: 0px !important;padding-left: 0px !important;}&#8221;]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: -36px;\"><\/div><div class=\"centered-box gem-image-centered-box\"><div class=\"gem-image gem-wrapbox gem-wrapbox-style-default gem-wrapbox-position-centered\"  style=\"\"><div class=\"gem-wrapbox-inner \" ><img class=\"gem-wrapbox-element img-responsive\" src=\"https:\/\/codex-themes.com\/thegem\/wp-content\/uploads\/2019\/07\/7-1.png\" alt=\"\"\/><\/div><\/div><\/div><div class=\"clearboth\"><\/div><div class=\"gem-divider display-none-on-phone\" style=\"margin-top: -122px;\"><\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/12&#8243;][\/vc_column][vc_column width=&#8221;5\/6&#8243; css=&#8221;.vc_custom_1562933255248{padding-right: 0px !important;}&#8221;]<div class=\"gem-dropcap gem-dropcap-shape-circle gem-dropcap-style-big\"><span class=\"gem-dropcap-letter\" style=\"color: #ffffff;background-color: #00bcd4;\">2<\/span><\/div>[vc_column_text css=&#8221;.vc_custom_1562766843090{padding-top: 30px !important;}&#8221;]<\/p>\n<h2>Use your template on page<\/h2>\n<p>[\/vc_column_text]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 20px;\"><\/div><div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 20px;\"><\/div>[vc_column_text]<\/p>\n<div class=\"styled-subtitle\">Choose your saved template for page title or footer in page options and enrich it with individual per page settings if needed.<\/div>\n<p>[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/12&#8243;][\/vc_column][\/vc_row][vc_row el_class=&#8221;box-shadow&#8221;][vc_column el_class=&#8221;remove-divider&#8221; css=&#8221;.vc_custom_1562933718025{padding-right: 0px !important;padding-left: 0px !important;}&#8221;]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: -36px;\"><\/div><div class=\"centered-box gem-image-centered-box\"><div class=\"gem-image gem-wrapbox gem-wrapbox-style-default gem-wrapbox-position-centered\"  style=\"\"><div class=\"gem-wrapbox-inner \" ><img class=\"gem-wrapbox-element img-responsive\" src=\"https:\/\/codex-themes.com\/thegem\/wp-content\/uploads\/2019\/07\/8-1.png\" alt=\"\"\/><\/div><\/div><\/div><div class=\"clearboth\"><\/div><div class=\"gem-divider display-none-on-phone\" style=\"margin-top: -122px;\"><\/div>[\/vc_column][\/vc_row][vc_row][vc_column width=&#8221;1\/12&#8243;][\/vc_column][vc_column width=&#8221;5\/6&#8243; css=&#8221;.vc_custom_1562933255248{padding-right: 0px !important;}&#8221;]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 20px;\"><\/div><div class=\"gem-dropcap gem-dropcap-shape-circle gem-dropcap-style-big\"><span class=\"gem-dropcap-letter\" style=\"color: #ffffff;background-color: #00bcd4;\">3<\/span><\/div>[vc_column_text css=&#8221;.vc_custom_1562766873157{padding-top: 30px !important;}&#8221;]<\/p>\n<h2>Or use it throughout the website<\/h2>\n<p>[\/vc_column_text]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 44px;\"><\/div>[vc_column_text]<\/p>\n<div class=\"styled-subtitle\">You can also set to use the created templates for page title and footer globally throughout the website. Each new page will get this selected custom title or footer automatically.<\/div>\n<p>[\/vc_column_text][\/vc_column][vc_column width=&#8221;1\/12&#8243;][\/vc_column][\/vc_row][vc_row el_class=&#8221;box-shadow&#8221;][vc_column css=&#8221;.vc_custom_1562933712417{padding-right: 0px !important;padding-left: 0px !important;}&#8221;]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: -37px;\"><\/div><div class=\"centered-box gem-image-centered-box\"><div class=\"gem-image gem-wrapbox gem-wrapbox-style-default gem-wrapbox-position-centered\"  style=\"\"><div class=\"gem-wrapbox-inner \" ><img class=\"gem-wrapbox-element img-responsive\" src=\"https:\/\/codex-themes.com\/thegem\/wp-content\/uploads\/2019\/07\/9-1.png\" alt=\"\"\/><\/div><\/div><\/div>[\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row_content&#8221; full_height=&#8221;yes&#8221; columns_placement=&#8221;top&#8221; css=&#8221;.vc_custom_1562767668406{background-image: url(https:\/\/codex-themes.com\/thegem\/wp-content\/uploads\/2019\/07\/6-1.png?id=32340) !important;}&#8221;][vc_column][vc_row_inner][vc_column_inner][\/vc_column_inner][\/vc_row_inner][vc_row_inner el_class=&#8221;custom-row&#8221;][vc_column_inner width=&#8221;1\/6&#8243; offset=&#8221;vc_hidden-md vc_hidden-sm vc_hidden-xs&#8221;][\/vc_column_inner][vc_column_inner css=&#8221;.vc_custom_1562768796695{background-image: url(https:\/\/codex-themes.com\/thegem\/wp-content\/uploads\/2019\/07\/builder.png?id=32344) !important;}&#8221; offset=&#8221;vc_col-lg-8&#8243;][\/vc_column_inner][vc_column_inner width=&#8221;1\/6&#8243; offset=&#8221;vc_hidden-md vc_hidden-sm vc_hidden-xs&#8221;][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][\/vc_column_inner][\/vc_row_inner][\/vc_column][\/vc_row][vc_row][vc_column&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/pages\/32330"}],"collection":[{"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/comments?post=32330"}],"version-history":[{"count":14,"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/pages\/32330\/revisions"}],"predecessor-version":[{"id":36829,"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/pages\/32330\/revisions\/36829"}],"wp:attachment":[{"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/media?parent=32330"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}