{"id":21095,"date":"2020-10-14T19:59:15","date_gmt":"2020-10-14T19:59:15","guid":{"rendered":"https:\/\/codex-themes.com\/thegem\/?page_id=21095"},"modified":"2021-10-29T10:29:23","modified_gmt":"2021-10-29T10:29:23","slug":"features-one-click-demo-import","status":"publish","type":"page","link":"https:\/\/codex-themes.com\/thegem\/features\/features-one-click-demo-import\/","title":{"rendered":"One Click Demo Import"},"content":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1571136560826{margin-bottom: 0px !important;background-image: url(https:\/\/codex-themes.com\/thegem\/wp-content\/uploads\/2016\/04\/one_click_demo_background.jpg?id=21098) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221; el_class=&#8221;custom-button&#8221;][vc_column el_class=&#8221;text-align&#8221;]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 200px;\"><\/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-69d2b9320304e\" class=\"thegem-heading title-xlarge letters-scale-out thegem-heading-animate\" style=\"text-align: center;\" ><span class=\"thegem-heading-word\" style=\"color: #ffd655;\"><span class=\"thegem-heading-letter\" style=\"animation-delay: 250ms\">O<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 300ms\">n<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 350ms\">e<\/span><\/span> <span class=\"thegem-heading-word\" style=\"color: #ffd655;\"><span class=\"thegem-heading-letter\" style=\"animation-delay: 400ms\">C<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 450ms\">l<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 500ms\">i<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 550ms\">c<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 600ms\">k<\/span><\/span> <span class=\"thegem-heading-word\" style=\"color: #ffd655;\"><span class=\"thegem-heading-letter\" style=\"animation-delay: 650ms\">D<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 700ms\">e<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 750ms\">m<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 800ms\">o<\/span><\/span><\/div><style type=\"text\/css\">#thegem-heading-69d2b9320304e {margin: 0;}#thegem-heading-69d2b9320304e {margin-left: auto; margin-right: auto;}#thegem-heading-69d2b9320304e .thegem-heading-letter {animation-duration: 1000ms;}#thegem-heading-69d2b9320304e .thegem-heading-letter {animation-timing-function: cubic-bezier(0,1,0.3,1);}<\/style><div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 26px;\"><\/div><div id=\"thegem-heading-69d2b932030ec\" class=\"thegem-heading title-xlarge vc_custom_1635503357381 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: 660ms\">I<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 720ms\">m<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 780ms\">p<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 840ms\">o<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 900ms\">r<\/span><span class=\"thegem-heading-letter\" style=\"animation-delay: 960ms\">t<\/span><\/span><\/div><style type=\"text\/css\">#thegem-heading-69d2b932030ec {margin: 0;}#thegem-heading-69d2b932030ec {margin-left: auto; margin-right: auto;}#thegem-heading-69d2b932030ec {max-width: 410px;}#thegem-heading-69d2b932030ec .thegem-heading-letter {animation-duration: 1000ms;}#thegem-heading-69d2b932030ec .thegem-heading-letter {animation-timing-function: cubic-bezier(0,1,0.3,1);}<\/style><div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 85px;\"><\/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\/2016\/04\/one_click_demo_finger.png\" alt=\"\"\/><\/div><\/div><\/div><div class=\"gem-button-container gem-button-position-center thegem-button-69d2b9320329b3120 fancy\" ><a class=\"gem-button gem-button-size-medium gem-button-style-flat gem-button-text-weight-normal\" style=\"border-radius: 30px;background-color: #00bcd4;color: #ffffff;\" onmouseleave=\"this.style.backgroundColor='#00bcd4';this.style.color='#ffffff';\" onmouseenter=\"this.style.backgroundColor='#ffffff';this.style.color='#00bcd4';\" href=\"\" target=\"_self\">Check this in action<\/a><\/div> <div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 37px;\"><\/div>[vc_column_text]<\/p>\n<div class=\"styled-subtitle\" style=\"text-align: center;\"><span style=\"color: #ffffff;\">We deliver our theme with all demo pages, templates &amp; slideshows you can see on this demo<br \/>\nwebsite. If you don\u2019t know where to start and like our pages you can just import our demo<br \/>\ncontent in an easy one-click way.<\/span><\/div>\n<p>[\/vc_column_text]<div class=\"clearboth\"><\/div><div class=\"gem-divider \" style=\"margin-top: 140px;\"><\/div>[vc_raw_html]JTNDc2NyaXB0JTNFJTBBdmFyJTIwcmVhZHklMjAlM0QlMjAlMjhjYWxsYmFjayUyOSUyMCUzRCUzRSUyMCU3QiUwQSUwOWlmJTIwJTI4ZG9jdW1lbnQucmVhZHlTdGF0ZSUyMCUyMSUzRCUyMCUyMmxvYWRpbmclMjIlMjklMjBjYWxsYmFjayUyOCUyOSUzQiUwQSUwOWVsc2UlMjBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyJTI4JTIyRE9NQ29udGVudExvYWRlZCUyMiUyQyUyMGNhbGxiYWNrJTI5JTNCJTBBJTdEJTNCJTBBJTBBcmVhZHklMjglMjglMjklMjAlM0QlM0UlMjAlN0IlMEElMDl2YXIlMjBlbGVtJTIwJTNEJTIwZG9jdW1lbnQucXVlcnlTZWxlY3RvciUyOCUyMi5mYW5jeSUyMGElMjIlMjklM0IlMEElMDllbGVtLnNldEF0dHJpYnV0ZSUyOCUyN2RhdGEtZmFuY3lib3glMjclMkMlMjAlMjclMjclMjklM0IlMEElMDllbGVtLnNldEF0dHJpYnV0ZSUyOCUyN2RhdGEtdHlwZSUyNyUyQyUyMCUyN2lmcmFtZSUyNyUyOSUzQiUwQSUwOWVsZW0uc2V0QXR0cmlidXRlJTI4JTI3ZGF0YS1zcmMlMjclMkMlMjAlMjdodHRwcyUzQSUyRiUyRmNvZGV4LXRoZW1lcy5jb20lMkZ0aGVnZW0lMkZ3cC1jb250ZW50JTJGdXBsb2FkcyUyRjIwMTklMkYwOSUyRm5ldzMubXA0JTI3JTI5JTNCJTBBJTdEJTI5JTNCJTBBJTNDJTJGc2NyaXB0JTNF[\/vc_raw_html][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row full_width=&#8221;stretch_row&#8221; css=&#8221;.vc_custom_1571136560826{margin-bottom: 0px !important;background-image: url(https:\/\/codex-themes.com\/thegem\/wp-content\/uploads\/2016\/04\/one_click_demo_background.jpg?id=21098) !important;background-position: center !important;background-repeat: no-repeat !important;background-size: cover !important;}&#8221; el_class=&#8221;custom-button&#8221;][vc_column el_class=&#8221;text-align&#8221;][vc_column_text] We deliver our theme with&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":15,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/pages\/21095"}],"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=21095"}],"version-history":[{"count":11,"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/pages\/21095\/revisions"}],"predecessor-version":[{"id":36822,"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/pages\/21095\/revisions\/36822"}],"up":[{"embeddable":true,"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"https:\/\/codex-themes.com\/thegem\/wp-json\/wp\/v2\/media?parent=21095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}