CINXE.COM

Step-by-Step Tutorial: Using a Drag and Drop Email Builder for WooCommerce

<!doctype html> <html lang="en-US"> <head><meta charset="UTF-8"><script>if(navigator.userAgent.match(/MSIE|Internet Explorer/i)||navigator.userAgent.match(/Trident\/7\..*?rv:11/i)){var href=document.location.href;if(!href.match(/[?&]nowprocket/)){if(href.indexOf("?")==-1){if(href.indexOf("#")==-1){document.location.href=href+"?nowprocket=1"}else{document.location.href=href.replace("#","?nowprocket=1#")}}else{if(href.indexOf("#")==-1){document.location.href=href+"&nowprocket=1"}else{document.location.href=href.replace("#","&nowprocket=1#")}}}}</script><script>(()=>{class RocketLazyLoadScripts{constructor(){this.v="1.2.6",this.triggerEvents=["keydown","mousedown","mousemove","touchmove","touchstart","touchend","wheel"],this.userEventHandler=this.t.bind(this),this.touchStartHandler=this.i.bind(this),this.touchMoveHandler=this.o.bind(this),this.touchEndHandler=this.h.bind(this),this.clickHandler=this.u.bind(this),this.interceptedClicks=[],this.interceptedClickListeners=[],this.l(this),window.addEventListener("pageshow",(t=>{this.persisted=t.persisted,this.everythingLoaded&&this.m()})),this.CSPIssue=sessionStorage.getItem("rocketCSPIssue"),document.addEventListener("securitypolicyviolation",(t=>{this.CSPIssue||"script-src-elem"!==t.violatedDirective||"data"!==t.blockedURI||(this.CSPIssue=!0,sessionStorage.setItem("rocketCSPIssue",!0))})),document.addEventListener("DOMContentLoaded",(()=>{this.k()})),this.delayedScripts={normal:[],async:[],defer:[]},this.trash=[],this.allJQueries=[]}p(t){document.hidden?t.t():(this.triggerEvents.forEach((e=>window.addEventListener(e,t.userEventHandler,{passive:!0}))),window.addEventListener("touchstart",t.touchStartHandler,{passive:!0}),window.addEventListener("mousedown",t.touchStartHandler),document.addEventListener("visibilitychange",t.userEventHandler))}_(){this.triggerEvents.forEach((t=>window.removeEventListener(t,this.userEventHandler,{passive:!0}))),document.removeEventListener("visibilitychange",this.userEventHandler)}i(t){"HTML"!==t.target.tagName&&(window.addEventListener("touchend",this.touchEndHandler),window.addEventListener("mouseup",this.touchEndHandler),window.addEventListener("touchmove",this.touchMoveHandler,{passive:!0}),window.addEventListener("mousemove",this.touchMoveHandler),t.target.addEventListener("click",this.clickHandler),this.L(t.target,!0),this.S(t.target,"onclick","rocket-onclick"),this.C())}o(t){window.removeEventListener("touchend",this.touchEndHandler),window.removeEventListener("mouseup",this.touchEndHandler),window.removeEventListener("touchmove",this.touchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",this.touchMoveHandler),t.target.removeEventListener("click",this.clickHandler),this.L(t.target,!1),this.S(t.target,"rocket-onclick","onclick"),this.M()}h(){window.removeEventListener("touchend",this.touchEndHandler),window.removeEventListener("mouseup",this.touchEndHandler),window.removeEventListener("touchmove",this.touchMoveHandler,{passive:!0}),window.removeEventListener("mousemove",this.touchMoveHandler)}u(t){t.target.removeEventListener("click",this.clickHandler),this.L(t.target,!1),this.S(t.target,"rocket-onclick","onclick"),this.interceptedClicks.push(t),t.preventDefault(),t.stopPropagation(),t.stopImmediatePropagation(),this.M()}O(){window.removeEventListener("touchstart",this.touchStartHandler,{passive:!0}),window.removeEventListener("mousedown",this.touchStartHandler),this.interceptedClicks.forEach((t=>{t.target.dispatchEvent(new MouseEvent("click",{view:t.view,bubbles:!0,cancelable:!0}))}))}l(t){EventTarget.prototype.addEventListenerWPRocketBase=EventTarget.prototype.addEventListener,EventTarget.prototype.addEventListener=function(e,i,o){"click"!==e||t.windowLoaded||i===t.clickHandler||t.interceptedClickListeners.push({target:this,func:i,options:o}),(this||window).addEventListenerWPRocketBase(e,i,o)}}L(t,e){this.interceptedClickListeners.forEach((i=>{i.target===t&&(e?t.removeEventListener("click",i.func,i.options):t.addEventListener("click",i.func,i.options))})),t.parentNode!==document.documentElement&&this.L(t.parentNode,e)}D(){return new Promise((t=>{this.P?this.M=t:t()}))}C(){this.P=!0}M(){this.P=!1}S(t,e,i){t.hasAttribute&&t.hasAttribute(e)&&(event.target.setAttribute(i,event.target.getAttribute(e)),event.target.removeAttribute(e))}t(){this._(this),"loading"===document.readyState?document.addEventListener("DOMContentLoaded",this.R.bind(this)):this.R()}k(){let t=[];document.querySelectorAll("script[type=rocketlazyloadscript][data-rocket-src]").forEach((e=>{let i=e.getAttribute("data-rocket-src");if(i&&!i.startsWith("data:")){0===i.indexOf("//")&&(i=location.protocol+i);try{const o=new URL(i).origin;o!==location.origin&&t.push({src:o,crossOrigin:e.crossOrigin||"module"===e.getAttribute("data-rocket-type")})}catch(t){}}})),t=[...new Map(t.map((t=>[JSON.stringify(t),t]))).values()],this.T(t,"preconnect")}async R(){this.lastBreath=Date.now(),this.j(this),this.F(this),this.I(),this.W(),this.q(),await this.A(this.delayedScripts.normal),await this.A(this.delayedScripts.defer),await this.A(this.delayedScripts.async);try{await this.U(),await this.H(this),await this.J()}catch(t){console.error(t)}window.dispatchEvent(new Event("rocket-allScriptsLoaded")),this.everythingLoaded=!0,this.D().then((()=>{this.O()})),this.N()}W(){document.querySelectorAll("script[type=rocketlazyloadscript]").forEach((t=>{t.hasAttribute("data-rocket-src")?t.hasAttribute("async")&&!1!==t.async?this.delayedScripts.async.push(t):t.hasAttribute("defer")&&!1!==t.defer||"module"===t.getAttribute("data-rocket-type")?this.delayedScripts.defer.push(t):this.delayedScripts.normal.push(t):this.delayedScripts.normal.push(t)}))}async B(t){if(await this.G(),!0!==t.noModule||!("noModule"in HTMLScriptElement.prototype))return new Promise((e=>{let i;function o(){(i||t).setAttribute("data-rocket-status","executed"),e()}try{if(navigator.userAgent.indexOf("Firefox/")>0||""===navigator.vendor||this.CSPIssue)i=document.createElement("script"),[...t.attributes].forEach((t=>{let e=t.nodeName;"type"!==e&&("data-rocket-type"===e&&(e="type"),"data-rocket-src"===e&&(e="src"),i.setAttribute(e,t.nodeValue))})),t.text&&(i.text=t.text),i.hasAttribute("src")?(i.addEventListener("load",o),i.addEventListener("error",(function(){i.setAttribute("data-rocket-status","failed-network"),e()})),setTimeout((()=>{i.isConnected||e()}),1)):(i.text=t.text,o()),t.parentNode.replaceChild(i,t);else{const i=t.getAttribute("data-rocket-type"),s=t.getAttribute("data-rocket-src");i?(t.type=i,t.removeAttribute("data-rocket-type")):t.removeAttribute("type"),t.addEventListener("load",o),t.addEventListener("error",(i=>{this.CSPIssue&&i.target.src.startsWith("data:")?(console.log("WPRocket: data-uri blocked by CSP -> fallback"),t.removeAttribute("src"),this.B(t).then(e)):(t.setAttribute("data-rocket-status","failed-network"),e())})),s?(t.removeAttribute("data-rocket-src"),t.src=s):t.src="data:text/javascript;base64,"+window.btoa(unescape(encodeURIComponent(t.text)))}}catch(i){t.setAttribute("data-rocket-status","failed-transform"),e()}}));t.setAttribute("data-rocket-status","skipped")}async A(t){const e=t.shift();return e&&e.isConnected?(await this.B(e),this.A(t)):Promise.resolve()}q(){this.T([...this.delayedScripts.normal,...this.delayedScripts.defer,...this.delayedScripts.async],"preload")}T(t,e){var i=document.createDocumentFragment();t.forEach((t=>{const o=t.getAttribute&&t.getAttribute("data-rocket-src")||t.src;if(o&&!o.startsWith("data:")){const s=document.createElement("link");s.href=o,s.rel=e,"preconnect"!==e&&(s.as="script"),t.getAttribute&&"module"===t.getAttribute("data-rocket-type")&&(s.crossOrigin=!0),t.crossOrigin&&(s.crossOrigin=t.crossOrigin),t.integrity&&(s.integrity=t.integrity),i.appendChild(s),this.trash.push(s)}})),document.head.appendChild(i)}j(t){let e={};function i(i,o){return e[o].eventsToRewrite.indexOf(i)>=0&&!t.everythingLoaded?"rocket-"+i:i}function o(t,o){!function(t){e[t]||(e[t]={originalFunctions:{add:t.addEventListener,remove:t.removeEventListener},eventsToRewrite:[]},t.addEventListener=function(){arguments[0]=i(arguments[0],t),e[t].originalFunctions.add.apply(t,arguments)},t.removeEventListener=function(){arguments[0]=i(arguments[0],t),e[t].originalFunctions.remove.apply(t,arguments)})}(t),e[t].eventsToRewrite.push(o)}function s(e,i){let o=e[i];e[i]=null,Object.defineProperty(e,i,{get:()=>o||function(){},set(s){t.everythingLoaded?o=s:e["rocket"+i]=o=s}})}o(document,"DOMContentLoaded"),o(window,"DOMContentLoaded"),o(window,"load"),o(window,"pageshow"),o(document,"readystatechange"),s(document,"onreadystatechange"),s(window,"onload"),s(window,"onpageshow");try{Object.defineProperty(document,"readyState",{get:()=>t.rocketReadyState,set(e){t.rocketReadyState=e},configurable:!0}),document.readyState="loading"}catch(t){console.log("WPRocket DJE readyState conflict, bypassing")}}F(t){let e;function i(e){return t.everythingLoaded?e:e.split(" ").map((t=>"load"===t||0===t.indexOf("load.")?"rocket-jquery-load":t)).join(" ")}function o(o){function s(t){const e=o.fn[t];o.fn[t]=o.fn.init.prototype[t]=function(){return this[0]===window&&("string"==typeof arguments[0]||arguments[0]instanceof String?arguments[0]=i(arguments[0]):"object"==typeof arguments[0]&&Object.keys(arguments[0]).forEach((t=>{const e=arguments[0][t];delete arguments[0][t],arguments[0][i(t)]=e}))),e.apply(this,arguments),this}}o&&o.fn&&!t.allJQueries.includes(o)&&(o.fn.ready=o.fn.init.prototype.ready=function(e){return t.domReadyFired?e.bind(document)(o):document.addEventListener("rocket-DOMContentLoaded",(()=>e.bind(document)(o))),o([])},s("on"),s("one"),t.allJQueries.push(o)),e=o}o(window.jQuery),Object.defineProperty(window,"jQuery",{get:()=>e,set(t){o(t)}})}async H(t){const e=document.querySelector("script[data-webpack]");e&&(await async function(){return new Promise((t=>{e.addEventListener("load",t),e.addEventListener("error",t)}))}(),await t.K(),await t.H(t))}async U(){this.domReadyFired=!0;try{document.readyState="interactive"}catch(t){}await this.G(),document.dispatchEvent(new Event("rocket-readystatechange")),await this.G(),document.rocketonreadystatechange&&document.rocketonreadystatechange(),await this.G(),document.dispatchEvent(new Event("rocket-DOMContentLoaded")),await this.G(),window.dispatchEvent(new Event("rocket-DOMContentLoaded"))}async J(){try{document.readyState="complete"}catch(t){}await this.G(),document.dispatchEvent(new Event("rocket-readystatechange")),await this.G(),document.rocketonreadystatechange&&document.rocketonreadystatechange(),await this.G(),window.dispatchEvent(new Event("rocket-load")),await this.G(),window.rocketonload&&window.rocketonload(),await this.G(),this.allJQueries.forEach((t=>t(window).trigger("rocket-jquery-load"))),await this.G();const t=new Event("rocket-pageshow");t.persisted=this.persisted,window.dispatchEvent(t),await this.G(),window.rocketonpageshow&&window.rocketonpageshow({persisted:this.persisted}),this.windowLoaded=!0}m(){document.onreadystatechange&&document.onreadystatechange(),window.onload&&window.onload(),window.onpageshow&&window.onpageshow({persisted:this.persisted})}I(){const t=new Map;document.write=document.writeln=function(e){const i=document.currentScript;i||console.error("WPRocket unable to document.write this: "+e);const o=document.createRange(),s=i.parentElement;let n=t.get(i);void 0===n&&(n=i.nextSibling,t.set(i,n));const c=document.createDocumentFragment();o.setStart(c,0),c.appendChild(o.createContextualFragment(e)),s.insertBefore(c,n)}}async G(){Date.now()-this.lastBreath>45&&(await this.K(),this.lastBreath=Date.now())}async K(){return document.hidden?new Promise((t=>setTimeout(t))):new Promise((t=>requestAnimationFrame(t)))}N(){this.trash.forEach((t=>t.remove()))}static run(){const t=new RocketLazyLoadScripts;t.p(t)}}RocketLazyLoadScripts.run()})();</script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <meta name='robots' content='index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <!-- This site is optimized with the Yoast SEO Premium plugin v24.0 (Yoast SEO v24.0) - https://yoast.com/wordpress/plugins/seo/ --> <title>Step-by-Step Tutorial: Using a Drag and Drop Email Builder for WooCommerce</title><link rel="preload" data-rocket-preload as="style" href="https://fonts.googleapis.com/css?family=DM%20Sans%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7COpen%20Sans%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CInter%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=swap" /><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=DM%20Sans%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7COpen%20Sans%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CInter%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=swap" media="print" onload="this.media='all'" /><noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=DM%20Sans%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CRoboto%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7COpen%20Sans%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic%7CInter%3A100%2C100italic%2C200%2C200italic%2C300%2C300italic%2C400%2C400italic%2C500%2C500italic%2C600%2C600italic%2C700%2C700italic%2C800%2C800italic%2C900%2C900italic&#038;display=swap" /></noscript> <meta name="description" content="Customize WooCommerce emails with Spark Editor, a powerful drag and drop builder that enhances your brand’s email marketing" /> <link rel="canonical" href="https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/" /> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="article" /> <meta property="og:title" content="Step-by-Step Tutorial: Using a Drag and Drop Email Builder for WooCommerce" /> <meta property="og:description" content="Customize WooCommerce emails with Spark Editor, a powerful drag and drop builder that enhances your brand’s email marketing" /> <meta property="og:url" content="https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/" /> <meta property="og:site_name" content="Spark Editor" /> <meta property="article:published_time" content="2024-08-28T14:56:49+00:00" /> <meta property="article:modified_time" content="2024-11-15T12:10:29+00:00" /> <meta property="og:image" content="https://sparkeditor.com/wp-content/uploads/2024/08/Step-by-step-tutorial.png" /> <meta property="og:image:width" content="1436" /> <meta property="og:image:height" content="720" /> <meta property="og:image:type" content="image/png" /> <meta name="author" content="Rishikesh Pandiyan" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:label1" content="Written by" /> <meta name="twitter:data1" content="Rishikesh Pandiyan" /> <meta name="twitter:label2" content="Est. reading time" /> <meta name="twitter:data2" content="10 minutes" /> <script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"Article","@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#article","isPartOf":{"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/"},"author":{"name":"Rishikesh Pandiyan","@id":"https://sparkeditor.com/#/schema/person/9b231a2b12a45c6bd83b2ca7d3f7fb72"},"headline":"Step-by-Step Tutorial: Using a Drag and Drop Email Builder for WooCommerce","datePublished":"2024-08-28T14:56:49+00:00","dateModified":"2024-11-15T12:10:29+00:00","mainEntityOfPage":{"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/"},"wordCount":1694,"publisher":{"@id":"https://sparkeditor.com/#organization"},"image":{"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#primaryimage"},"thumbnailUrl":"https://sparkeditor.com/wp-content/uploads/2024/08/Step-by-step-tutorial.png","keywords":["Drag and Drop Email Builder","WooCommerce"],"articleSection":["WooCommerce"],"inLanguage":"en-US"},{"@type":["WebPage","FAQPage"],"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/","url":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/","name":"Step-by-Step Tutorial: Using a Drag and Drop Email Builder for WooCommerce","isPartOf":{"@id":"https://sparkeditor.com/#website"},"primaryImageOfPage":{"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#primaryimage"},"image":{"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#primaryimage"},"thumbnailUrl":"https://sparkeditor.com/wp-content/uploads/2024/08/Step-by-step-tutorial.png","datePublished":"2024-08-28T14:56:49+00:00","dateModified":"2024-11-15T12:10:29+00:00","description":"Customize WooCommerce emails with Spark Editor, a powerful drag and drop builder that enhances your brand’s email marketing","breadcrumb":{"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#breadcrumb"},"mainEntity":[{"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933367959"},{"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933444549"},{"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933454099"},{"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933466471"},{"@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933473275"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#primaryimage","url":"https://sparkeditor.com/wp-content/uploads/2024/08/Step-by-step-tutorial.png","contentUrl":"https://sparkeditor.com/wp-content/uploads/2024/08/Step-by-step-tutorial.png","width":1436,"height":720,"caption":"Step-by-step tutorial"},{"@type":"BreadcrumbList","@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://sparkeditor.com/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://sparkeditor.com/blog/"},{"@type":"ListItem","position":3,"name":"Step-by-Step Tutorial: Using a Drag and Drop Email Builder for WooCommerce"}]},{"@type":"WebSite","@id":"https://sparkeditor.com/#website","url":"https://sparkeditor.com/","name":"Spark Editor","description":"WooCommerce Email Customizer","publisher":{"@id":"https://sparkeditor.com/#organization"},"alternateName":"WooCommerce Email Customizer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://sparkeditor.com/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https://sparkeditor.com/#organization","name":"Spark Editor","url":"https://sparkeditor.com/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://sparkeditor.com/#/schema/logo/image/","url":"https://sparkeditor.com/wp-content/uploads/2024/09/WPMailplus-Logo.png","contentUrl":"https://sparkeditor.com/wp-content/uploads/2024/09/WPMailplus-Logo.png","width":162,"height":38,"caption":"Spark Editor"},"image":{"@id":"https://sparkeditor.com/#/schema/logo/image/"}},{"@type":"Person","@id":"https://sparkeditor.com/#/schema/person/9b231a2b12a45c6bd83b2ca7d3f7fb72","name":"Rishikesh Pandiyan","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https://sparkeditor.com/#/schema/person/image/","url":"https://secure.gravatar.com/avatar/9178469d5cabc27ae5d5bcf8836c7126?s=96&d=mm&r=g","contentUrl":"https://secure.gravatar.com/avatar/9178469d5cabc27ae5d5bcf8836c7126?s=96&d=mm&r=g","caption":"Rishikesh Pandiyan"},"description":"Rishi is a dedicated technical writer with a passion for creating clear and engaging technical content. Combining their love for writing with a knack for simplifying complex ideas, they deliver impactful work. Outside writing, they enjoy playing football and staying active."},{"@type":"Question","@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933367959","position":1,"url":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933367959","name":"What is a Drag and Drop Email Builder for WooCommerce?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"A Drag and Drop Email Builder for WooCommerce is a tool that allows you to create and customize email templates for your WooCommerce store using an easy drag-and-drop interface.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933444549","position":2,"url":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933444549","name":"How does a Drag and Drop Email Builder for WooCommerce improve email design?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Using a Drag and Drop Email Builder for WooCommerce simplifies the email design process, enabling users to create professional, responsive emails without coding knowledge.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933454099","position":3,"url":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933454099","name":"What are the benefits of using a Drag and Drop Email Builder in WooCommerce?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"The benefits include ease of use, design flexibility, no coding required, and the ability to create responsive and visually appealing emails.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933466471","position":4,"url":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933466471","name":"What are the top features to look for in a Drag and Drop Email Builder for WooCommerce?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Key features to consider include ease of use, responsive design, template library, and integration options with WooCommerce. Spark Editor offers all the above-said features.","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933473275","position":5,"url":"https://sparkeditor.com/blog/drag-and-drop-email-builder-for-woocommerce/#faq-question-1724933473275","name":"Are there any pre-designed templates in a Drag and Drop Email Builder for WooCommerce?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Yes. Plugins like Spark offer pre-designed templates that can easily be dragged and dropped into your templates.","inLanguage":"en-US"},"inLanguage":"en-US"}]}</script> <!-- / Yoast SEO Premium plugin. --> <link rel='dns-prefetch' href='//fonts.gstatic.com' /> <link rel='dns-prefetch' href='//www.clarity.ms' /> <link href='https://fonts.gstatic.com' crossorigin rel='preconnect' /> <link data-minify="1" rel='stylesheet' id='wc-blocks-integration-css' href='https://sparkeditor.com/wp-content/cache/min/1/wp-content/plugins/woocommerce-subscriptions/vendor/woocommerce/subscriptions-core/build/index.css?ver=1734497555' media='all' /> <link data-minify="1" rel='stylesheet' id='wc-stripe-blocks-checkout-style-css' href='https://sparkeditor.com/wp-content/cache/min/1/wp-content/plugins/woocommerce-gateway-stripe/build/upe_blocks.css?ver=1734497555' media='all' /> <link rel='stylesheet' id='wp-block-library-css' href='https://sparkeditor.com/wp-includes/css/dist/block-library/style.min.css?ver=6.7.1' media='all' /> <style id='classic-theme-styles-inline-css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 13px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36px;--wp--preset--font-size--x-large: 42px;--wp--preset--font-family--inter: "Inter", sans-serif;--wp--preset--font-family--cardo: Cardo;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link data-minify="1" rel='stylesheet' id='fly-bundle-order-api-css' href='https://sparkeditor.com/wp-content/cache/min/1/wp-content/plugins/bundle-order-api/assets/css/bundle-order-api.css?ver=1734497555' media='all' /> <link data-minify="1" rel='stylesheet' id='woocommerce-layout-css' href='https://sparkeditor.com/wp-content/cache/min/1/wp-content/plugins/woocommerce/assets/css/woocommerce-layout.css?ver=1734497555' media='all' /> <link data-minify="1" rel='stylesheet' id='woocommerce-smallscreen-css' href='https://sparkeditor.com/wp-content/cache/min/1/wp-content/plugins/woocommerce/assets/css/woocommerce-smallscreen.css?ver=1734497555' media='only screen and (max-width: 768px)' /> <link data-minify="1" rel='stylesheet' id='woocommerce-general-css' href='https://sparkeditor.com/wp-content/cache/background-css/sparkeditor.com/wp-content/cache/min/1/wp-content/plugins/woocommerce/assets/css/woocommerce.css?ver=1734497555&wpr_t=1734497900' media='all' /> <style id='woocommerce-inline-inline-css'> .woocommerce form .form-row .required { visibility: visible; } </style> <link rel='stylesheet' id='hello-elementor-css' href='https://sparkeditor.com/wp-content/themes/hello-elementor/style.min.css?ver=3.1.1' media='all' /> <link rel='stylesheet' id='hello-elementor-theme-style-css' href='https://sparkeditor.com/wp-content/themes/hello-elementor/theme.min.css?ver=3.1.1' media='all' /> <link rel='stylesheet' id='hello-elementor-header-footer-css' href='https://sparkeditor.com/wp-content/themes/hello-elementor/header-footer.min.css?ver=3.1.1' media='all' /> <link rel='stylesheet' id='elementor-frontend-css' href='https://sparkeditor.com/wp-content/plugins/elementor/assets/css/frontend.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='elementor-post-7-css' href='https://sparkeditor.com/wp-content/uploads/elementor/css/post-7.css?ver=1733904297' media='all' /> <link rel='stylesheet' id='widget-text-editor-css' href='https://sparkeditor.com/wp-content/plugins/elementor/assets/css/widget-text-editor.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='widget-image-css' href='https://sparkeditor.com/wp-content/plugins/elementor/assets/css/widget-image.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='widget-icon-box-css' href='https://sparkeditor.com/wp-content/plugins/elementor/assets/css/widget-icon-box.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='e-animation-fadeIn-css' href='https://sparkeditor.com/wp-content/plugins/elementor/assets/lib/animations/styles/fadeIn.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='widget-mega-menu-css' href='https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/css/widget-mega-menu.min.css?ver=3.25.4' media='all' /> <link rel='stylesheet' id='widget-woocommerce-menu-cart-css' href='https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/css/widget-woocommerce-menu-cart.min.css?ver=3.25.4' media='all' /> <link rel='stylesheet' id='widget-nav-menu-css' href='https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/css/widget-nav-menu.min.css?ver=3.25.4' media='all' /> <link rel='stylesheet' id='widget-social-icons-css' href='https://sparkeditor.com/wp-content/plugins/elementor/assets/css/widget-social-icons.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='e-apple-webkit-css' href='https://sparkeditor.com/wp-content/plugins/elementor/assets/css/conditionals/apple-webkit.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='widget-heading-css' href='https://sparkeditor.com/wp-content/plugins/elementor/assets/css/widget-heading.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='widget-divider-css' href='https://sparkeditor.com/wp-content/plugins/elementor/assets/css/widget-divider.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='widget-progress-tracker-css' href='https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/css/widget-progress-tracker.min.css?ver=3.25.4' media='all' /> <link rel='stylesheet' id='widget-post-info-css' href='https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/css/widget-post-info.min.css?ver=3.25.4' media='all' /> <link rel='stylesheet' id='widget-icon-list-css' href='https://sparkeditor.com/wp-content/plugins/elementor/assets/css/widget-icon-list.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='widget-author-box-css' href='https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/css/widget-author-box.min.css?ver=3.25.4' media='all' /> <link rel='stylesheet' id='widget-post-navigation-css' href='https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/css/widget-post-navigation.min.css?ver=3.25.4' media='all' /> <link rel='stylesheet' id='widget-table-of-contents-css' href='https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/css/widget-table-of-contents.min.css?ver=3.25.4' media='all' /> <link data-minify="1" rel='stylesheet' id='swiper-css' href='https://sparkeditor.com/wp-content/cache/min/1/wp-content/plugins/elementor/assets/lib/swiper/v8/css/swiper.min.css?ver=1734497555' media='all' /> <link rel='stylesheet' id='e-swiper-css' href='https://sparkeditor.com/wp-content/plugins/elementor/assets/css/conditionals/e-swiper.min.css?ver=3.25.10' media='all' /> <link rel='stylesheet' id='e-popup-style-css' href='https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/css/conditionals/popup.min.css?ver=3.25.4' media='all' /> <link rel='stylesheet' id='elementor-post-983-css' href='https://sparkeditor.com/wp-content/uploads/elementor/css/post-983.css?ver=1733984776' media='all' /> <link rel='stylesheet' id='elementor-post-1848-css' href='https://sparkeditor.com/wp-content/uploads/elementor/css/post-1848.css?ver=1734431421' media='all' /> <link rel='stylesheet' id='elementor-post-673-css' href='https://sparkeditor.com/wp-content/cache/background-css/sparkeditor.com/wp-content/uploads/elementor/css/post-673.css?ver=1733904303&wpr_t=1734497900' media='all' /> <link data-minify="1" rel='stylesheet' id='pmw-public-elementor-fix-css' href='https://sparkeditor.com/wp-content/cache/min/1/wp-content/plugins/woocommerce-google-adwords-conversion-tracking-tag/css/public/elementor-fix.css?ver=1734497555' media='all' /> <link data-minify="1" rel='stylesheet' id='j2sp_store-css' href='https://sparkeditor.com/wp-content/cache/min/1/wp-content/plugins/wp-j2store-products/assets/css/store.css?ver=1734497555' media='all' /> <link rel='stylesheet' id='hello-elementor-child-style-css' href='https://sparkeditor.com/wp-content/themes/hello-theme-child-master/style.css?ver=2.0.0' media='all' /> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin><script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/woocommerce/assets/js/jquery-blockui/jquery.blockUI.min.js?ver=2.7.0-wc.9.1.4" id="jquery-blockui-js" defer data-wp-strategy="defer"></script> <script id="wc-add-to-cart-js-extra"> var wc_add_to_cart_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","i18n_view_cart":"View cart","cart_url":"https:\/\/sparkeditor.com\/cart\/","is_cart":"","cart_redirect_after_add":"yes"}; </script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart.min.js?ver=9.1.4" id="wc-add-to-cart-js" defer data-wp-strategy="defer"></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/woocommerce/assets/js/js-cookie/js.cookie.min.js?ver=2.1.4-wc.9.1.4" id="js-cookie-js" defer data-wp-strategy="defer"></script> <script id="woocommerce-js-extra"> var woocommerce_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%"}; </script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js?ver=9.1.4" id="woocommerce-js" defer data-wp-strategy="defer"></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-includes/js/dist/hooks.min.js?ver=4d63a3d491d11ffd8ac6" id="wp-hooks-js"></script> <script id="wpm-js-extra"> var wpm = {"ajax_url":"https:\/\/sparkeditor.com\/wp-admin\/admin-ajax.php","root":"https:\/\/sparkeditor.com\/wp-json\/","nonce_wp_rest":"28520983b4","nonce_ajax":"ea9513fcc1"}; </script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/woocommerce-google-adwords-conversion-tracking-tag/js/public/wpm-public.p1.min.js?ver=1.44.2" id="wpm-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" data-minify="1" data-rocket-src="https://sparkeditor.com/wp-content/cache/min/1/wp-content/plugins/wp-j2store-products/assets/js/store.js?ver=1734497555" id="j2sp_store-js" data-rocket-defer defer></script> <link rel='shortlink' href='https://sparkeditor.com/?p=843' /> <noscript><style>.woocommerce-product-gallery{ opacity: 1 !important; }</style></noscript> <meta name="generator" content="Elementor 3.25.10; features: e_font_icon_svg, additional_custom_breakpoints, e_optimized_control_loading, e_element_cache; settings: css_print_method-external, google_font-enabled, font_display-swap"> <script type="rocketlazyloadscript" data-rocket-type="text/javascript"> (function(c,l,a,r,i,t,y){ c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)}; t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i; y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y); })(window, document, "clarity", "script", "njfqvqbl0e"); </script> <!-- Google Tag Manager --> <script type="rocketlazyloadscript">(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-WF4K8HQK');</script> <!-- End Google Tag Manager --> <!-- Google tag (gtag.js) --> <script type="rocketlazyloadscript" async data-rocket-src="https://www.googletagmanager.com/gtag/js?id=AW-16748716230"> </script> <script type="rocketlazyloadscript"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-16748716230'); </script> <!-- Google tag (gtag.js) --> <script type="rocketlazyloadscript" async data-rocket-src="https://www.googletagmanager.com/gtag/js?id=G-1WLKCHXFHW"></script> <script type="rocketlazyloadscript"> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-1WLKCHXFHW'); </script> <!-- START Pixel Manager for WooCommerce --> <script type="rocketlazyloadscript"> window.wpmDataLayer = window.wpmDataLayer || {}; window.wpmDataLayer = Object.assign(window.wpmDataLayer, {"cart":{},"cart_item_keys":{},"version":{"number":"1.44.2","pro":false,"eligible_for_updates":false,"distro":"fms","beta":false,"show":true},"pixels":{"google":{"linker":{"settings":null},"user_id":false,"ads":{"conversion_ids":{"AW-16748716230":"YjqpCIH1luAZEMbBtLI-"},"dynamic_remarketing":{"status":true,"id_type":"post_id","send_events_with_parent_ids":true},"google_business_vertical":"retail","phone_conversion_number":"","phone_conversion_label":""},"tcf_support":false,"consent_mode":{"is_active":true,"wait_for_update":500,"ads_data_redaction":false,"url_passthrough":true}}},"shop":{"list_name":"Blog Post | Step-by-Step Tutorial: Using a Drag and Drop Email Builder for WooCommerce","list_id":"blog_post_step-by-step-tutorial-using-a-drag-and-drop-email-builder-for-woocommerce","page_type":"blog_post","currency":"USD","selectors":{"addToCart":[],"beginCheckout":[]},"order_duplication_prevention":true,"view_item_list_trigger":{"test_mode":false,"background_color":"green","opacity":0.5,"repeat":true,"timeout":1000,"threshold":0.8000000000000000444089209850062616169452667236328125},"variations_output":true,"session_active":false},"page":{"id":843,"title":"Step-by-Step Tutorial: Using a Drag and Drop Email Builder for WooCommerce","type":"post","categories":[{"term_id":34,"name":"WooCommerce","slug":"woocommerce","term_group":0,"term_taxonomy_id":34,"taxonomy":"category","description":"","parent":0,"count":21,"filter":"raw","cat_ID":34,"category_count":21,"category_description":"","cat_name":"WooCommerce","category_nicename":"woocommerce","category_parent":0}],"parent":{"id":0,"title":"Step-by-Step Tutorial: Using a Drag and Drop Email Builder for WooCommerce","type":"post","categories":[{"term_id":34,"name":"WooCommerce","slug":"woocommerce","term_group":0,"term_taxonomy_id":34,"taxonomy":"category","description":"","parent":0,"count":21,"filter":"raw","cat_ID":34,"category_count":21,"category_description":"","cat_name":"WooCommerce","category_nicename":"woocommerce","category_parent":0}]}},"general":{"user_logged_in":false,"scroll_tracking_thresholds":[],"page_id":843,"exclude_domains":[],"server_2_server":{"active":false,"ip_exclude_list":[]},"consent_management":{"explicit_consent":false},"lazy_load_pmw":false}}); </script> <!-- END Pixel Manager for WooCommerce --> <style> .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+4):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } @media screen and (max-height: 1024px) { .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } } @media screen and (max-height: 640px) { .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload), .e-con.e-parent:nth-of-type(n+2):not(.e-lazyloaded):not(.e-no-lazyload) * { background-image: none !important; } } </style> <style class='wp-fonts-local'> @font-face{font-family:Inter;font-style:normal;font-weight:300 900;font-display:fallback;src:url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/fonts/Inter-VariableFont_slnt,wght.woff2') format('woff2');font-stretch:normal;} @font-face{font-family:Cardo;font-style:normal;font-weight:400;font-display:fallback;src:url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/fonts/cardo_normal_400.woff2') format('woff2');} </style> <link rel="icon" href="https://sparkeditor.com/wp-content/uploads/2024/09/WPMailPlus-512x512-1-100x100.png" sizes="32x32" /> <link rel="icon" href="https://sparkeditor.com/wp-content/uploads/2024/09/WPMailPlus-512x512-1-300x300.png" sizes="192x192" /> <link rel="apple-touch-icon" href="https://sparkeditor.com/wp-content/uploads/2024/09/WPMailPlus-512x512-1-300x300.png" /> <meta name="msapplication-TileImage" content="https://sparkeditor.com/wp-content/uploads/2024/09/WPMailPlus-512x512-1-300x300.png" /> <noscript><style id="rocket-lazyload-nojs-css">.rll-youtube-player, [data-lazy-src]{display:none !important;}</style></noscript><style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style> <noscript> <style id="wpr-lazyload-bg-nostyle">.woocommerce .blockUI.blockOverlay::before{--wpr-bg-279ed541-17bd-4d01-b52f-0b3bcfae06de: url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/images/icons/loader.svg');}.woocommerce .loader::before{--wpr-bg-0b2d9bf6-1571-4773-88e3-00e63cebf899: url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/images/icons/loader.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa{--wpr-bg-182fb776-dd74-40ec-80d0-ee0d7e35c64c: url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/visa.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard{--wpr-bg-2cbd413f-40be-4cd8-acca-9dee6c5e9c74: url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/mastercard.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser{--wpr-bg-977a09b4-39e3-43d1-b9fc-0103eba90c55: url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/laser.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub{--wpr-bg-c4409c14-991d-4898-8135-f3a5c5c1634f: url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/diners.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro{--wpr-bg-9324f3d7-7357-48fa-9707-ae129ba8ee22: url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/maestro.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb{--wpr-bg-33d06c0a-c54f-48df-b600-f350574f076d: url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/jcb.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex{--wpr-bg-11570bea-55d2-492e-9ce1-c4d2471c0a25: url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/amex.svg');}#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover{--wpr-bg-7031a9ea-7f18-4a7a-9dbe-91a76163a63f: url('https://sparkeditor.com/wp-content/plugins/woocommerce/assets/images/icons/credit-cards/discover.svg');}.elementor-673 .elementor-element.elementor-element-3a80f48b .new-cta-block{--wpr-bg-98db1b1a-5b17-4930-9677-ffc505bfa404: url('https://sparkeditor.com/wp-content/uploads/2024/09/Blog-BG-CTA.png');}</style> </noscript> <script type="application/javascript">const rocket_pairs = [{"selector":".woocommerce .blockUI.blockOverlay","style":".woocommerce .blockUI.blockOverlay::before{--wpr-bg-279ed541-17bd-4d01-b52f-0b3bcfae06de: url('https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg');}","hash":"279ed541-17bd-4d01-b52f-0b3bcfae06de","url":"https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg"},{"selector":".woocommerce .loader","style":".woocommerce .loader::before{--wpr-bg-0b2d9bf6-1571-4773-88e3-00e63cebf899: url('https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg');}","hash":"0b2d9bf6-1571-4773-88e3-00e63cebf899","url":"https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/loader.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.visa,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.visa,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.visa{--wpr-bg-182fb776-dd74-40ec-80d0-ee0d7e35c64c: url('https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/visa.svg');}","hash":"182fb776-dd74-40ec-80d0-ee0d7e35c64c","url":"https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/visa.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.mastercard,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.mastercard{--wpr-bg-2cbd413f-40be-4cd8-acca-9dee6c5e9c74: url('https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/mastercard.svg');}","hash":"2cbd413f-40be-4cd8-acca-9dee6c5e9c74","url":"https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/mastercard.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.laser,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.laser,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.laser{--wpr-bg-977a09b4-39e3-43d1-b9fc-0103eba90c55: url('https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/laser.svg');}","hash":"977a09b4-39e3-43d1-b9fc-0103eba90c55","url":"https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/laser.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.dinersclub,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.dinersclub{--wpr-bg-c4409c14-991d-4898-8135-f3a5c5c1634f: url('https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/diners.svg');}","hash":"c4409c14-991d-4898-8135-f3a5c5c1634f","url":"https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/diners.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.maestro,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.maestro{--wpr-bg-9324f3d7-7357-48fa-9707-ae129ba8ee22: url('https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/maestro.svg');}","hash":"9324f3d7-7357-48fa-9707-ae129ba8ee22","url":"https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/maestro.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.jcb,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.jcb{--wpr-bg-33d06c0a-c54f-48df-b600-f350574f076d: url('https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/jcb.svg');}","hash":"33d06c0a-c54f-48df-b600-f350574f076d","url":"https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/jcb.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.amex,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.amex,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.amex{--wpr-bg-11570bea-55d2-492e-9ce1-c4d2471c0a25: url('https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/amex.svg');}","hash":"11570bea-55d2-492e-9ce1-c4d2471c0a25","url":"https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/amex.svg"},{"selector":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover","style":"#add_payment_method #payment div.payment_box .wc-credit-card-form-card-cvc.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-expiry.discover,#add_payment_method #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-cart #payment div.payment_box .wc-credit-card-form-card-number.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-cvc.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-expiry.discover,.woocommerce-checkout #payment div.payment_box .wc-credit-card-form-card-number.discover{--wpr-bg-7031a9ea-7f18-4a7a-9dbe-91a76163a63f: url('https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/discover.svg');}","hash":"7031a9ea-7f18-4a7a-9dbe-91a76163a63f","url":"https:\/\/sparkeditor.com\/wp-content\/plugins\/woocommerce\/assets\/images\/icons\/credit-cards\/discover.svg"},{"selector":".elementor-673 .elementor-element.elementor-element-3a80f48b .new-cta-block","style":".elementor-673 .elementor-element.elementor-element-3a80f48b .new-cta-block{--wpr-bg-98db1b1a-5b17-4930-9677-ffc505bfa404: url('https:\/\/sparkeditor.com\/wp-content\/uploads\/2024\/09\/Blog-BG-CTA.png');}","hash":"98db1b1a-5b17-4930-9677-ffc505bfa404","url":"https:\/\/sparkeditor.com\/wp-content\/uploads\/2024\/09\/Blog-BG-CTA.png"}]; const rocket_excluded_pairs = [];</script><meta name="generator" content="WP Rocket 3.17.3.1" data-wpr-features="wpr_lazyload_css_bg_img wpr_delay_js wpr_defer_js wpr_minify_js wpr_lazyload_images wpr_minify_css wpr_desktop wpr_dns_prefetch wpr_preload_links" /></head> <body class="post-template-default single single-post postid-843 single-format-standard theme-hello-elementor woocommerce-no-js elementor-default elementor-kit-7 elementor-page-673"> <a class="skip-link screen-reader-text" href="#content">Skip to content</a> <div data-rocket-location-hash="2602db342522c5a9bcf79363fe51a887" data-elementor-type="header" data-elementor-id="983" class="elementor elementor-983 elementor-location-header" data-elementor-post-type="elementor_library"> <div class="elementor-element elementor-element-8939046 e-flex e-con-boxed e-con e-child" data-id="8939046" data-element_type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;sticky&quot;:&quot;top&quot;,&quot;sticky_offset_tablet&quot;:0,&quot;sticky_offset_mobile&quot;:0,&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;laptop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_offset&quot;:0,&quot;sticky_effects_offset&quot;:0,&quot;sticky_anchor_link_offset&quot;:0}"> <div data-rocket-location-hash="da3b654b339ed49f0234db69a353a170" class="e-con-inner"> <div class="elementor-element elementor-element-b890938 elementor-widget__width-initial elementor-widget-mobile__width-inherit elementor-widget elementor-widget-text-editor" data-id="b890938" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Christmas Offer.<br /><strong>20% OFF</strong> for a <strong>limited period</strong>. Hurry!</p> </div> </div> <div class="elementor-element elementor-element-1eb5d65 elementor-widget__width-auto elementor-widget elementor-widget-html" data-id="1eb5d65" data-element_type="widget" data-widget_type="html.default"> <div class="elementor-widget-container"> <div class="countdown"> <div class="time-box"> <div class="time" id="days"> <span class="digit">0</span><span class="digit">0</span> </div> <div class="label">Days</div> </div> <div class="time-box"> <div class="time" id="hours"> <span class="digit">0</span><span class="digit">0</span> </div> <div class="label">Hours</div> </div> <div class="time-box"> <div class="time" id="minutes"> <span class="digit">0</span><span class="digit">0</span> </div> <div class="label">Minutes</div> </div> <div class="time-box"> <div class="time" id="seconds"> <span class="digit">0</span><span class="digit">0</span> </div> <div class="label">Seconds</div> </div> </div> <style> .countdown { display: flex; align-items: center; font-family: "Inter"; gap: 10px; } .time-box { display: flex; align-items: center; flex-direction: column; } .time { display: flex; justify-content: center; } .digit { background-color: #fff; padding: 4px 6px; border-radius: 4px; font-size: 16px; font-weight: bold; color: #EA2D2B; margin: 0 2px; text-align: center; width: 25px; } .label { text-align: center; color: #fff; font-weight: 600; font-size: 14px; margin-top: 2px; } </style> <script type="rocketlazyloadscript"> document.addEventListener('DOMContentLoaded', function () { const fixedStartDate = new Date('2024-12-06T00:00:00'); function updateTimer() { const now = new Date(); const timeSinceStart = now - fixedStartDate; const msInThreeDays = 7 * 24 * 60 * 60 * 1000; const timeLeft = msInThreeDays - (timeSinceStart % msInThreeDays); const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24)); const hours = Math.floor((timeLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); document.getElementById('days').innerHTML = String(days).padStart(2, '0').split('').map(num => `<span class="digit">${num}</span>`).join(''); document.getElementById('hours').innerHTML = String(hours).padStart(2, '0').split('').map(num => `<span class="digit">${num}</span>`).join(''); document.getElementById('minutes').innerHTML = String(minutes).padStart(2, '0').split('').map(num => `<span class="digit">${num}</span>`).join(''); document.getElementById('seconds').innerHTML = String(seconds).padStart(2, '0').split('').map(num => `<span class="digit">${num}</span>`).join(''); } updateTimer(); setInterval(updateTimer, 1000); }); </script> </div> </div> <div class="elementor-element elementor-element-29ab191 elementor-hidden-tablet elementor-widget elementor-widget-button" data-id="29ab191" data-element_type="widget" data-widget_type="button.default"> <div class="elementor-widget-container"> <div class="elementor-button-wrapper"> <a class="elementor-button elementor-size-sm" role="button"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-text">Coupon: <strong>XMAS20</strong></span> </span> </a> </div> </div> </div> <div class="elementor-element elementor-element-0a94107 elementor-widget elementor-widget-button" data-id="0a94107" data-element_type="widget" data-widget_type="button.default"> <div class="elementor-widget-container"> <div class="elementor-button-wrapper"> <a class="elementor-button elementor-button-link elementor-size-sm" href="https://sparkeditor.com/pricing/"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-text">Buy Now</span> </span> </a> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-0ef76e6 e-flex e-con-boxed e-con e-parent" data-id="0ef76e6" data-element_type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;,&quot;sticky&quot;:&quot;top&quot;,&quot;sticky_offset&quot;:75,&quot;sticky_offset_tablet&quot;:100,&quot;sticky_offset_mobile&quot;:205,&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_effects_offset&quot;:0,&quot;sticky_anchor_link_offset&quot;:0}"> <div data-rocket-location-hash="db09287dc3941bcac9abe956715ef14a" class="e-con-inner"> <div class="elementor-element elementor-element-53073bb elementor-widget-mobile__width-initial elementor-widget__width-auto elementor-widget elementor-widget-image" data-id="53073bb" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <a href="https://sparkeditor.com/"> <img width="162" height="50" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20162%2050'%3E%3C/svg%3E" class="attachment-full size-full wp-image-1955" alt="Spark Editor" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/09/Spark-Email-Editor-.png" /><noscript><img loading="lazy" width="162" height="50" src="https://sparkeditor.com/wp-content/uploads/2024/09/Spark-Email-Editor-.png" class="attachment-full size-full wp-image-1955" alt="Spark Editor" /></noscript> </a> </div> </div> <div class="elementor-element elementor-element-5483b9c e-con-full e-flex e-con e-child" data-id="5483b9c" data-element_type="container"> <div class="elementor-element elementor-element-c341af5 e-fit_to_content elementor-widget__width-auto elementor-widget-tablet__width-initial elementor-hidden-tablet elementor-hidden-mobile e-n-menu-layout-horizontal e-n-menu-tablet elementor-widget elementor-widget-n-menu" data-id="c341af5" data-element_type="widget" data-settings="{&quot;menu_items&quot;:[{&quot;item_title&quot;:&quot;Pricing&quot;,&quot;_id&quot;:&quot;3ed911e&quot;,&quot;item_link&quot;:{&quot;url&quot;:&quot;https:\/\/sparkeditor.com\/pricing\/&quot;,&quot;is_external&quot;:&quot;&quot;,&quot;nofollow&quot;:&quot;&quot;,&quot;custom_attributes&quot;:&quot;&quot;},&quot;item_dropdown_content&quot;:&quot;no&quot;,&quot;item_icon&quot;:{&quot;value&quot;:&quot;&quot;,&quot;library&quot;:&quot;&quot;},&quot;item_icon_active&quot;:null,&quot;element_id&quot;:&quot;&quot;},{&quot;item_title&quot;:&quot;Support&quot;,&quot;item_link&quot;:{&quot;url&quot;:&quot;https:\/\/sparkeditor.com\/support\/&quot;,&quot;is_external&quot;:&quot;&quot;,&quot;nofollow&quot;:&quot;&quot;,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;8da872d&quot;,&quot;item_dropdown_content&quot;:&quot;no&quot;,&quot;item_icon&quot;:{&quot;value&quot;:&quot;&quot;,&quot;library&quot;:&quot;&quot;},&quot;item_icon_active&quot;:null,&quot;element_id&quot;:&quot;&quot;},{&quot;item_title&quot;:&quot;Add-ons&quot;,&quot;item_link&quot;:{&quot;url&quot;:&quot;https:\/\/sparkeditor.com\/add-ons\/&quot;,&quot;is_external&quot;:&quot;&quot;,&quot;nofollow&quot;:&quot;&quot;,&quot;custom_attributes&quot;:&quot;&quot;},&quot;_id&quot;:&quot;98678b0&quot;,&quot;item_dropdown_content&quot;:&quot;no&quot;,&quot;item_icon&quot;:{&quot;value&quot;:&quot;&quot;,&quot;library&quot;:&quot;&quot;},&quot;item_icon_active&quot;:null,&quot;element_id&quot;:&quot;&quot;},{&quot;item_title&quot;:&quot;Resources&quot;,&quot;_id&quot;:&quot;b87903d&quot;,&quot;item_dropdown_content&quot;:&quot;yes&quot;,&quot;item_link&quot;:{&quot;url&quot;:&quot;&quot;,&quot;is_external&quot;:&quot;&quot;,&quot;nofollow&quot;:&quot;&quot;,&quot;custom_attributes&quot;:&quot;&quot;},&quot;item_icon&quot;:{&quot;value&quot;:&quot;&quot;,&quot;library&quot;:&quot;&quot;},&quot;item_icon_active&quot;:null,&quot;element_id&quot;:&quot;&quot;}],&quot;content_width&quot;:&quot;fit_to_content&quot;,&quot;item_position_horizontal&quot;:&quot;end&quot;,&quot;item_position_horizontal_mobile&quot;:&quot;center&quot;,&quot;horizontal_scroll_mobile&quot;:&quot;disable&quot;,&quot;item_position_horizontal_tablet&quot;:&quot;center&quot;,&quot;menu_item_title_distance_from_content_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;menu_item_title_distance_from_content_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:0,&quot;sizes&quot;:[]},&quot;open_animation&quot;:&quot;fadeIn&quot;,&quot;menu_item_title_distance_from_content&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;content_horizontal_position&quot;:&quot;center&quot;,&quot;item_layout&quot;:&quot;horizontal&quot;,&quot;open_on&quot;:&quot;hover&quot;,&quot;horizontal_scroll&quot;:&quot;disable&quot;,&quot;breakpoint_selector&quot;:&quot;tablet&quot;}" data-widget_type="mega-menu.default"> <div class="elementor-widget-container"> <nav class="e-n-menu" data-widget-number="204" aria-label="Menu"> <button class="e-n-menu-toggle" id="menu-toggle-204" aria-haspopup="true" aria-expanded="false" aria-controls="menubar-204" aria-label="Menu Toggle"> <span class="e-n-menu-toggle-icon e-open"> <svg class="e-font-icon-svg e-eicon-menu-bar" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M104 333H896C929 333 958 304 958 271S929 208 896 208H104C71 208 42 237 42 271S71 333 104 333ZM104 583H896C929 583 958 554 958 521S929 458 896 458H104C71 458 42 487 42 521S71 583 104 583ZM104 833H896C929 833 958 804 958 771S929 708 896 708H104C71 708 42 737 42 771S71 833 104 833Z"></path></svg> </span> <span class="e-n-menu-toggle-icon e-close"> <svg class="e-font-icon-svg e-eicon-close" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M742 167L500 408 258 167C246 154 233 150 217 150 196 150 179 158 167 167 154 179 150 196 150 212 150 229 154 242 171 254L408 500 167 742C138 771 138 800 167 829 196 858 225 858 254 829L496 587 738 829C750 842 767 846 783 846 800 846 817 842 829 829 842 817 846 804 846 783 846 767 842 750 829 737L588 500 833 258C863 229 863 200 833 171 804 137 775 137 742 167Z"></path></svg> </span> </button> <div class="e-n-menu-wrapper" id="menubar-204" aria-labelledby="menu-toggle-204"> <ul class="e-n-menu-heading"> <li class="e-n-menu-item"> <div id="e-n-menu-title-2041" class="e-n-menu-title"> <a class="e-n-menu-title-container e-focus e-link" href="https://sparkeditor.com/pricing/"> <span class="e-n-menu-title-text"> Pricing </span> </a> </div> </li> <li class="e-n-menu-item"> <div id="e-n-menu-title-2042" class="e-n-menu-title"> <a class="e-n-menu-title-container e-focus e-link" href="https://sparkeditor.com/support/"> <span class="e-n-menu-title-text"> Support </span> </a> </div> </li> <li class="e-n-menu-item"> <div id="e-n-menu-title-2043" class="e-n-menu-title"> <a class="e-n-menu-title-container e-focus e-link" href="https://sparkeditor.com/add-ons/"> <span class="e-n-menu-title-text"> Add-ons </span> </a> </div> </li> <li class="e-n-menu-item"> <div id="e-n-menu-title-2044" class="e-n-menu-title"> <div class="e-n-menu-title-container"> <span class="e-n-menu-title-text"> Resources </span> </div> <button id="e-n-menu-dropdown-icon-2044" class="e-n-menu-dropdown-icon e-focus" data-tab-index="4" aria-haspopup="true" aria-expanded="false" aria-controls="e-n-menu-content-2044" > <span class="e-n-menu-dropdown-icon-opened"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-up" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"></path></svg> <span class="elementor-screen-only">Close Resources</span> </span> <span class="e-n-menu-dropdown-icon-closed"> <svg aria-hidden="true" class="e-font-icon-svg e-fas-angle-down" viewBox="0 0 320 512" xmlns="http://www.w3.org/2000/svg"><path d="M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z"></path></svg> <span class="elementor-screen-only">Open Resources</span> </span> </button> </div> <div class="e-n-menu-content"> <div id="e-n-menu-content-2044" data-tab-index="4" aria-labelledby="e-n-menu-dropdown-icon-2044" class="elementor-element elementor-element-eae311a e-con-full e-flex e-con e-child" data-id="eae311a" data-element_type="container"> <div class="elementor-element elementor-element-064ebfd e-flex e-con-boxed e-con e-child" data-id="064ebfd" data-element_type="container" data-settings="{&quot;background_background&quot;:&quot;classic&quot;}"> <div data-rocket-location-hash="547ec2470d2bda10abb0f19dcabad963" class="e-con-inner"> <div class="elementor-element elementor-element-9a38e71 elementor-position-left header-icon elementor-mobile-position-left elementor-hidden-mobile elementor-vertical-align-middle elementor-view-default elementor-widget elementor-widget-icon-box" data-id="9a38e71" data-element_type="widget" data-widget_type="icon-box.default"> <div class="elementor-widget-container"> <div class="elementor-icon-box-wrapper"> <div class="elementor-icon-box-icon"> <a href="https://sparkeditor.com/blog/" class="elementor-icon elementor-animation-" tabindex="-1"> <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="none"><g clip-path="url(#clip0_32_4)"><path d="M95.8112 82.8528C96.567 82.8492 97.3228 82.8455 98.1015 82.8417C100.618 82.8307 103.134 82.8268 105.65 82.823C107.461 82.8167 109.272 82.8101 111.082 82.8031C117.012 82.7821 122.941 82.7717 128.871 82.7617C130.916 82.7577 132.961 82.7536 135.006 82.7494C144.611 82.7303 154.215 82.7161 163.82 82.7078C174.896 82.698 185.972 82.6716 197.048 82.6313C205.619 82.6011 214.19 82.5863 222.761 82.583C227.876 82.5806 232.991 82.5717 238.107 82.5465C242.918 82.5232 247.728 82.519 252.539 82.5293C254.301 82.5298 256.064 82.5235 257.826 82.5097C276.099 82.3753 276.099 82.3753 282.496 88.412C287.437 93.8798 288.483 99.074 288.301 106.219C287.717 111.616 286.055 115.273 281.871 118.789C275.622 123.133 271.385 124.123 263.759 124.138C262.663 124.142 262.663 124.142 261.545 124.147C259.096 124.155 256.646 124.156 254.197 124.158C252.441 124.162 250.685 124.168 248.929 124.173C245.145 124.184 241.362 124.193 237.578 124.199C231.589 124.21 225.6 124.23 219.61 124.252C202.578 124.314 185.546 124.368 168.514 124.401C159.109 124.42 149.704 124.449 140.298 124.489C135.324 124.51 130.35 124.526 125.376 124.528C120.692 124.53 116.008 124.546 111.323 124.573C109.611 124.58 107.898 124.582 106.185 124.578C87.9466 124.548 71.7065 128.704 58.135 141.463C44.2372 155.505 40.8335 174.213 40.8663 193.253C40.8629 194.727 40.8629 194.727 40.8594 196.23C40.8531 199.494 40.8539 202.759 40.8547 206.024C40.8517 208.375 40.8483 210.726 40.8445 213.078C40.8357 219.445 40.8334 225.813 40.8327 232.181C40.8319 236.83 40.829 241.479 40.8259 246.128C40.8176 258.636 40.8139 271.143 40.8146 283.651C40.8146 284.714 40.8146 284.714 40.8147 285.799C40.8147 286.864 40.8147 286.864 40.8148 287.95C40.8152 299.46 40.8056 310.97 40.7915 322.48C40.7772 334.318 40.7703 346.155 40.7711 357.992C40.7715 364.63 40.7686 371.269 40.758 377.907C40.7483 384.148 40.7482 390.388 40.7555 396.629C40.7565 398.916 40.7542 401.204 40.7481 403.492C40.7404 406.619 40.7451 409.746 40.7528 412.874C40.7476 413.774 40.7425 414.675 40.7372 415.603C40.7742 422.436 40.9372 429.803 45.3125 435.375C50.1305 440.081 53.8513 441.614 60.5273 442.047C72.6106 441.818 83.4813 427.79 91.7695 420.02C110.097 402.846 110.097 402.846 122.732 402.862C124.087 402.858 124.087 402.858 125.47 402.853C128.51 402.845 131.549 402.844 134.589 402.842C136.764 402.838 138.939 402.832 141.113 402.827C145.805 402.816 150.496 402.807 155.188 402.801C162.615 402.79 170.041 402.77 177.468 402.748C187.889 402.717 198.311 402.688 208.733 402.662C209.725 402.66 209.725 402.66 210.738 402.657C220.769 402.633 230.801 402.614 240.833 402.599C252.492 402.58 264.151 402.551 275.81 402.511C281.978 402.49 288.145 402.474 294.313 402.472C300.123 402.47 305.933 402.454 311.744 402.427C313.868 402.42 315.992 402.418 318.117 402.422C338.699 402.449 358.517 400.28 374 385C380.45 377.689 384.815 370.192 388 361C388.412 359.824 388.825 358.649 389.25 357.438C391.144 348.756 391.149 339.831 391.211 330.98C391.239 328.719 391.268 326.458 391.297 324.197C391.338 320.677 391.375 317.158 391.401 313.638C391.429 310.21 391.475 306.783 391.523 303.355C391.527 302.305 391.53 301.255 391.533 300.173C391.64 293.801 392.209 289.095 396.648 284.172C402.48 279.369 406.786 277.498 414.441 277.691C421.304 278.519 425.607 282.1 429.871 287.316C432.221 290.82 432.141 294.039 432.177 298.129C432.19 299.396 432.203 300.662 432.216 301.967C432.224 303.355 432.231 304.744 432.238 306.133C432.242 306.837 432.246 307.541 432.251 308.267C432.271 312.008 432.286 315.749 432.295 319.491C432.304 322.555 432.325 325.62 432.357 328.684C432.692 361.456 432.692 361.456 428 375C427.723 375.84 427.446 376.68 427.16 377.545C418.014 402.914 398.864 422.991 374.883 434.801C356.685 443.288 337.922 444.303 318.188 444.097C316.121 444.083 314.055 444.071 311.989 444.059C307.565 444.033 303.141 444.003 298.717 443.969C291.709 443.918 284.701 443.895 277.694 443.88C275.913 443.876 275.913 443.876 274.097 443.872C271.672 443.866 269.246 443.861 266.821 443.856C250.526 443.82 234.233 443.769 217.939 443.626C206.918 443.53 195.898 443.484 184.877 443.495C179.057 443.499 173.239 443.478 167.42 443.396C161.944 443.319 156.473 443.308 150.998 443.347C148.999 443.349 147.001 443.328 145.003 443.281C135.274 443.062 127.984 443.283 120.431 449.934C117.98 452.331 115.665 454.812 113.418 457.4C111.648 459.398 109.718 461.147 107.687 462.875C106.784 463.645 106.784 463.645 105.863 464.43C105.248 464.948 104.634 465.466 104 466C102.908 466.963 102.908 466.963 101.793 467.945C89.0481 478.775 73.8926 484.836 57.0547 484.277C40.7629 482.798 27.4085 476.757 16 465C15.3542 464.363 14.7083 463.726 14.043 463.07C3.55524 452.057 -0.478212 437.604 -0.387693 422.731C-0.393079 421.652 -0.398464 420.572 -0.404012 419.46C-0.418228 415.871 -0.411204 412.283 -0.404066 408.695C-0.409773 406.11 -0.416738 403.525 -0.424864 400.94C-0.442 394.664 -0.442902 388.388 -0.43765 382.112C-0.433596 377.005 -0.435065 371.897 -0.440397 366.79C-0.441145 366.061 -0.441899 365.332 -0.442671 364.581C-0.444202 363.099 -0.445734 361.618 -0.447279 360.136C-0.460986 346.262 -0.455583 332.388 -0.444097 318.515C-0.434176 305.856 -0.447087 293.197 -0.471029 280.538C-0.495486 267.507 -0.505015 254.477 -0.49838 241.446C-0.494902 234.143 -0.49703 226.841 -0.514631 219.538C-0.530994 212.665 -0.526065 205.791 -0.507322 198.918C-0.503655 196.406 -0.506692 193.895 -0.51721 191.383C-0.638208 160.078 7.23985 134.036 29 111C47.173 94.1194 70.7616 82.8462 95.8112 82.8528Z" fill="#155033"></path><path d="M491.312 41.6875C502.669 51.3819 510.884 65.4486 512.221 80.4907C512.711 91.7989 512.668 102.493 508 113C507.599 113.926 507.198 114.851 506.785 115.805C500.121 129.442 486.955 140.202 476.343 150.834C474.901 152.282 473.459 153.731 472.017 155.18C467.325 159.893 462.627 164.601 457.93 169.309C456.301 170.942 454.672 172.574 453.043 174.207C445.39 181.88 437.734 189.55 430.075 197.217C421.281 206.021 412.496 214.832 403.718 223.65C396.899 230.5 390.071 237.343 383.238 244.179C379.172 248.247 375.11 252.318 371.055 256.398C367.238 260.239 363.41 264.071 359.575 267.895C358.183 269.288 356.793 270.683 355.407 272.083C341.483 286.139 326.664 297.988 309 307C308.395 307.317 307.79 307.633 307.167 307.959C288.431 317.693 267.061 322.963 246 324C244.992 324.053 243.984 324.106 242.945 324.16C235.19 324.383 229.508 323.791 223.25 318.812C218.45 312.812 216.323 307.423 216.563 299.75C216.576 298.981 216.589 298.213 216.603 297.421C217.697 261.202 231.848 224.983 256.677 198.494C258.795 196.22 260.856 193.909 262.912 191.58C268.994 184.815 275.426 178.409 281.851 171.972C283.23 170.587 284.609 169.201 285.988 167.815C290.483 163.299 294.984 158.788 299.484 154.277C301.042 152.716 302.6 151.154 304.158 149.592C311.475 142.256 318.794 134.922 326.117 127.591C334.537 119.161 342.949 110.722 351.354 102.277C357.876 95.725 364.405 89.1811 370.94 82.6428C374.833 78.748 378.722 74.85 382.603 70.9437C386.255 67.2683 389.916 63.6027 393.585 59.944C394.922 58.6081 396.255 57.2687 397.584 55.9256C424.125 29.1243 458.283 17.221 491.312 41.6875ZM434.183 78.1889C433.546 78.8187 432.909 79.4484 432.253 80.0972C430.133 82.1993 428.032 84.3188 425.93 86.4387C424.409 87.9544 422.887 89.4691 421.365 90.9827C417.237 95.0916 413.126 99.2161 409.017 103.344C404.706 107.672 400.381 111.988 396.059 116.305C388.796 123.564 381.542 130.833 374.295 138.108C365.941 146.494 357.57 154.865 349.191 163.227C341.11 171.292 333.041 179.367 324.978 187.448C321.557 190.876 318.132 194.3 314.703 197.721C310.654 201.762 306.615 205.814 302.583 209.873C301.111 211.352 299.635 212.828 298.155 214.301C279.776 232.6 264.495 253.858 260 280C283.155 278.582 303.69 263.841 320.004 248.553C320.656 247.944 321.307 247.334 321.978 246.706C328.885 240.213 335.607 233.542 342.307 226.838C343.662 225.486 345.018 224.134 346.373 222.782C350.003 219.161 353.63 215.537 357.255 211.912C359.526 209.642 361.797 207.373 364.069 205.104C372.005 197.177 379.94 189.246 387.872 181.313C395.25 173.934 402.634 166.561 410.021 159.19C416.387 152.838 422.748 146.481 429.107 140.122C432.895 136.333 436.685 132.546 440.479 128.764C444.036 125.215 447.589 121.663 451.139 118.106C452.44 116.804 453.743 115.503 455.047 114.205C456.83 112.43 458.606 110.649 460.381 108.866C460.896 108.356 461.411 107.846 461.942 107.321C467.492 101.718 471.101 96.7374 471.312 88.75C471.239 82.5592 469.945 79.1023 465.609 74.5352C461.508 70.8111 457.561 69.2784 452.125 68.6875C444.274 69.4726 439.52 72.7425 434.183 78.1889Z" fill="#155034"></path><path d="M100.839 282.823C101.876 282.813 101.876 282.813 102.934 282.803C105.222 282.783 107.509 282.772 109.797 282.762C110.971 282.756 110.971 282.756 112.169 282.749C116.314 282.729 120.459 282.714 124.604 282.705C128.875 282.694 133.146 282.659 137.418 282.62C140.71 282.593 144.003 282.585 147.296 282.582C148.87 282.577 150.444 282.565 152.017 282.547C154.227 282.522 156.434 282.523 158.644 282.53C159.898 282.524 161.153 282.518 162.445 282.512C168.182 283.299 172.697 286.021 176.375 290.563C176.857 291.141 177.339 291.72 177.836 292.316C181.318 297.353 180.612 304.182 180 310C178.055 315.148 174.68 319.103 170 322C165.307 323.569 161.211 324.255 156.274 324.275C154.979 324.284 153.684 324.294 152.349 324.304C150.953 324.303 149.557 324.302 148.16 324.301C146.71 324.305 145.259 324.309 143.808 324.314C140.777 324.321 137.745 324.321 134.713 324.316C130.845 324.31 126.978 324.327 123.11 324.35C120.117 324.365 117.124 324.366 114.13 324.363C112.705 324.363 111.28 324.368 109.855 324.378C100.751 324.435 93.1932 324.354 85.6875 318.688C80.8567 313.857 79.809 310.245 79.625 303.5C79.8059 297.363 80.4139 293.581 84.875 289.129C90.254 284.215 93.4618 282.881 100.839 282.823Z" fill="#155034"></path><path d="M100.839 202.823C101.876 202.813 101.876 202.813 102.934 202.803C105.222 202.783 107.509 202.772 109.797 202.762C110.971 202.756 110.971 202.756 112.169 202.749C116.314 202.729 120.459 202.714 124.604 202.705C128.875 202.694 133.146 202.659 137.418 202.62C140.71 202.593 144.003 202.585 147.296 202.582C148.87 202.577 150.444 202.565 152.017 202.547C154.227 202.522 156.434 202.523 158.644 202.53C159.898 202.524 161.153 202.518 162.445 202.512C168.182 203.299 172.697 206.021 176.375 210.562C176.857 211.141 177.339 211.72 177.836 212.316C181.318 217.353 180.612 224.182 180 230C178.055 235.148 174.68 239.103 170 242C165.307 243.569 161.211 244.255 156.274 244.275C154.979 244.284 153.684 244.294 152.349 244.304C150.953 244.303 149.557 244.302 148.16 244.301C146.71 244.305 145.259 244.309 143.808 244.314C140.777 244.321 137.745 244.321 134.713 244.316C130.845 244.31 126.978 244.327 123.11 244.35C120.117 244.365 117.124 244.366 114.13 244.363C112.705 244.363 111.28 244.368 109.855 244.378C100.751 244.435 93.1932 244.354 85.6875 238.688C80.8567 233.857 79.809 230.245 79.625 223.5C79.8059 217.363 80.4139 213.581 84.875 209.129C90.254 204.215 93.4618 202.881 100.839 202.823Z" fill="#155034"></path></g><defs><clipPath id="clip0_32_4"><rect width="512" height="512" fill="white"></rect></clipPath></defs></svg> </a> </div> <div class="elementor-icon-box-content"> <h3 class="elementor-icon-box-title"> <a href="https://sparkeditor.com/blog/" > Blogs </a> </h3> <p class="elementor-icon-box-description"> Thoughts, Ideas, Reflections </p> </div> </div> </div> </div> <div class="elementor-element elementor-element-5f17ec1 elementor-position-left header-icon elementor-mobile-position-left elementor-hidden-mobile elementor-vertical-align-middle elementor-view-default elementor-widget elementor-widget-icon-box" data-id="5f17ec1" data-element_type="widget" data-widget_type="icon-box.default"> <div class="elementor-widget-container"> <div class="elementor-icon-box-wrapper"> <div class="elementor-icon-box-icon"> <a href="https://sparkeditor.com/video-tutorials/" class="elementor-icon elementor-animation-" tabindex="-1"> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 46 46" fill="none"><path d="M29.5478 18.9283L20.9228 13.1783C20.7063 13.0338 20.4546 12.9508 20.1946 12.9383C19.9346 12.9257 19.676 12.9839 19.4465 13.1068C19.217 13.2296 19.0252 13.4125 18.8915 13.6359C18.7578 13.8592 18.6873 14.1147 18.6875 14.375V25.875C18.6873 26.1353 18.7578 26.3908 18.8915 26.6141C19.0252 26.8375 19.217 27.0204 19.4465 27.1432C19.676 27.2661 19.9346 27.3243 20.1946 27.3117C20.4546 27.2992 20.7063 27.2162 20.9228 27.0717L29.5478 21.3217C29.745 21.1905 29.9067 21.0126 30.0185 20.8038C30.1304 20.595 30.1889 20.3618 30.1889 20.125C30.1889 19.8882 30.1304 19.655 30.0185 19.4462C29.9067 19.2374 29.745 19.0595 29.5478 18.9283ZM21.5625 23.1887V17.0703L26.1589 20.125L21.5625 23.1887ZM38.8125 7.1875H7.1875C6.425 7.1875 5.69373 7.4904 5.15457 8.02957C4.6154 8.56873 4.3125 9.3 4.3125 10.0625V30.1875C4.3125 30.95 4.6154 31.6813 5.15457 32.2204C5.69373 32.7596 6.425 33.0625 7.1875 33.0625H38.8125C39.575 33.0625 40.3063 32.7596 40.8454 32.2204C41.3846 31.6813 41.6875 30.95 41.6875 30.1875V10.0625C41.6875 9.3 41.3846 8.56873 40.8454 8.02957C40.3063 7.4904 39.575 7.1875 38.8125 7.1875ZM38.8125 30.1875H7.1875V10.0625H38.8125V30.1875ZM41.6875 37.375C41.6875 37.7562 41.536 38.1219 41.2665 38.3915C40.9969 38.6611 40.6312 38.8125 40.25 38.8125H5.75C5.36875 38.8125 5.00312 38.6611 4.73353 38.3915C4.46395 38.1219 4.3125 37.7562 4.3125 37.375C4.3125 36.9938 4.46395 36.6281 4.73353 36.3585C5.00312 36.0889 5.36875 35.9375 5.75 35.9375H40.25C40.6312 35.9375 40.9969 36.0889 41.2665 36.3585C41.536 36.6281 41.6875 36.9938 41.6875 37.375Z" fill="#165134"></path></svg> </a> </div> <div class="elementor-icon-box-content"> <h3 class="elementor-icon-box-title"> <a href="https://sparkeditor.com/video-tutorials/" > Video Tutorials </a> </h3> <p class="elementor-icon-box-description"> Visual Learning Guide </p> </div> </div> </div> </div> <div class="elementor-element elementor-element-91cc6c0 elementor-position-left header-icon elementor-mobile-position-left elementor-hidden-mobile elementor-vertical-align-middle elementor-view-default elementor-widget elementor-widget-icon-box" data-id="91cc6c0" data-element_type="widget" data-widget_type="icon-box.default"> <div class="elementor-widget-container"> <div class="elementor-icon-box-wrapper"> <div class="elementor-icon-box-icon"> <a href="http://docs.sparkeditor.com/" target="_blank" class="elementor-icon elementor-animation-" tabindex="-1"> <svg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 46 46" fill="none"><path d="M26.0402 3.83337C27.0567 3.83359 28.0316 4.2376 28.7503 4.95654L37.2105 13.4167C37.9294 14.1354 38.3334 15.1103 38.3337 16.1269V38.3334C38.3337 39.35 37.9298 40.3251 37.2109 41.0439C36.492 41.7628 35.517 42.1667 34.5003 42.1667H11.5003C10.4837 42.1667 9.50864 41.7628 8.78975 41.0439C8.07086 40.3251 7.66699 39.35 7.66699 38.3334V7.66671C7.66699 6.65004 8.07086 5.67502 8.78975 4.95613C9.50864 4.23724 10.4837 3.83337 11.5003 3.83337H26.0402ZM23.0003 7.66671H11.5003V38.3334H34.5003V19.1667H25.8753C25.1128 19.1667 24.3816 18.8638 23.8424 18.3246C23.3032 17.7855 23.0003 17.0542 23.0003 16.2917V7.66671ZM28.7503 26.8334C29.2587 26.8334 29.7462 27.0353 30.1056 27.3948C30.4651 27.7542 30.667 28.2417 30.667 28.75C30.667 29.2584 30.4651 29.7459 30.1056 30.1053C29.7462 30.4648 29.2587 30.6667 28.7503 30.6667H17.2503C16.742 30.6667 16.2545 30.4648 15.895 30.1053C15.5356 29.7459 15.3337 29.2584 15.3337 28.75C15.3337 28.2417 15.5356 27.7542 15.895 27.3948C16.2545 27.0353 16.742 26.8334 17.2503 26.8334H28.7503ZM19.167 19.1667C19.6753 19.1667 20.1628 19.3686 20.5223 19.7281C20.8817 20.0875 21.0837 20.575 21.0837 21.0834C21.0837 21.5917 20.8817 22.0792 20.5223 22.4387C20.1628 22.7981 19.6753 23 19.167 23H17.2503C16.742 23 16.2545 22.7981 15.895 22.4387C15.5356 22.0792 15.3337 21.5917 15.3337 21.0834C15.3337 20.575 15.5356 20.0875 15.895 19.7281C16.2545 19.3686 16.742 19.1667 17.2503 19.1667H19.167ZM26.8337 8.46021V15.3334H33.7068L26.8337 8.46021Z" fill="#165134"></path></svg> </a> </div> <div class="elementor-icon-box-content"> <h3 class="elementor-icon-box-title"> <a href="http://docs.sparkeditor.com/" target="_blank" > Help Docs </a> </h3> <p class="elementor-icon-box-description"> Understand, Setup, Maximize </p> </div> </div> </div> </div> <div class="elementor-element elementor-element-a612557 elementor-position-left header-icon elementor-mobile-position-left elementor-hidden-mobile elementor-vertical-align-middle elementor-view-default elementor-widget elementor-widget-icon-box" data-id="a612557" data-element_type="widget" data-widget_type="icon-box.default"> <div class="elementor-widget-container"> <div class="elementor-icon-box-wrapper"> <div class="elementor-icon-box-icon"> <a href="https://sparkeditor.com/whats-new/" class="elementor-icon elementor-animation-" tabindex="-1"> <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512" fill="none"><path d="M367.49 251.776L289.163 222.898L260.222 144.508C258.009 138.506 254.009 133.326 248.761 129.668C243.513 126.01 237.27 124.049 230.873 124.049C224.476 124.049 218.233 126.01 212.985 129.668C207.737 133.326 203.737 138.506 201.524 144.508L172.646 222.898L94.256 251.776C88.2539 253.989 83.0747 257.989 79.4164 263.237C75.7582 268.485 73.7969 274.728 73.7969 281.125C73.7969 287.522 75.7582 293.765 79.4164 299.013C83.0747 304.261 88.2539 308.261 94.256 310.474L172.583 339.352L201.524 417.742C203.737 423.744 207.737 428.923 212.985 432.582C218.233 436.24 224.476 438.201 230.873 438.201C237.27 438.201 243.513 436.24 248.761 432.582C254.009 428.923 258.009 423.744 260.222 417.742L289.1 339.415L367.49 310.474C373.492 308.261 378.672 304.261 382.33 299.013C385.988 293.765 387.949 287.522 387.949 281.125C387.949 274.728 385.988 268.485 382.33 263.237C378.672 257.989 373.492 253.989 367.49 251.776ZM267.964 306.988C265.406 307.931 263.083 309.417 261.156 311.345C259.228 313.272 257.742 315.595 256.799 318.153L230.873 388.346L205.01 318.153C204.067 315.595 202.581 313.272 200.653 311.345C198.726 309.417 196.403 307.931 193.845 306.988L123.652 281.125L193.845 255.262C196.403 254.319 198.726 252.833 200.653 250.905C202.581 248.978 204.067 246.655 205.01 244.097L230.873 173.904L256.736 244.097C257.679 246.655 259.165 248.978 261.093 250.905C263.02 252.833 265.343 254.319 267.901 255.262L338.094 281.125L267.964 306.988ZM274.842 117.812C274.842 112.815 276.827 108.022 280.361 104.488C283.895 100.954 288.688 98.9687 293.686 98.9687H312.529V80.125C312.529 75.1273 314.515 70.3343 318.049 66.8005C321.583 63.2666 326.375 61.2813 331.373 61.2812C336.371 61.2812 341.164 63.2666 344.698 66.8005C348.232 70.3343 350.217 75.1273 350.217 80.125V98.9687H369.061C374.058 98.9687 378.851 100.954 382.385 104.488C385.919 108.022 387.904 112.815 387.904 117.812C387.904 122.81 385.919 127.603 382.385 131.137C378.851 134.671 374.058 136.656 369.061 136.656H350.217V155.5C350.217 160.498 348.232 165.291 344.698 168.825C341.164 172.358 336.371 174.344 331.373 174.344C326.375 174.344 321.583 172.358 318.049 168.825C314.515 165.291 312.529 160.498 312.529 155.5V136.656H293.686C288.688 136.656 283.895 134.671 280.361 131.137C276.827 127.603 274.842 122.81 274.842 117.812ZM450.717 193.187C450.717 198.185 448.732 202.978 445.198 206.512C441.664 210.046 436.871 212.031 431.873 212.031H425.592V218.312C425.592 223.31 423.607 228.103 420.073 231.637C416.539 235.171 411.746 237.156 406.748 237.156C401.75 237.156 396.958 235.171 393.424 231.637C389.89 228.103 387.904 223.31 387.904 218.312V212.031H381.623C376.625 212.031 371.833 210.046 368.299 206.512C364.765 202.978 362.779 198.185 362.779 193.187C362.779 188.19 364.765 183.397 368.299 179.863C371.833 176.329 376.625 174.344 381.623 174.344H387.904V168.062C387.904 163.065 389.89 158.272 393.424 154.738C396.958 151.204 401.75 149.219 406.748 149.219C411.746 149.219 416.539 151.204 420.073 154.738C423.607 158.272 425.592 163.065 425.592 168.062V174.344H431.873C436.871 174.344 441.664 176.329 445.198 179.863C448.732 183.397 450.717 188.19 450.717 193.187Z" fill="#165134"></path></svg> </a> </div> <div class="elementor-icon-box-content"> <h3 class="elementor-icon-box-title"> <a href="https://sparkeditor.com/whats-new/" > What's New </a> </h3> <p class="elementor-icon-box-description"> Improvements, Features </p> </div> </div> </div> </div> </div> </div> </div> </div> </li> </ul> </div> </nav> </div> </div> <div class="elementor-element elementor-element-fe99c2c elementor-widget__width-auto elementor-widget elementor-widget-html" data-id="fe99c2c" data-element_type="widget" data-widget_type="html.default"> <div class="elementor-widget-container"> <style> .elementor-menu-cart__container .elementor-lightbox , .elementor-menu-cart__main { display: none !important; } </style> <script type="rocketlazyloadscript"> document.addEventListener('DOMContentLoaded', function() { // Update login status text var loginStatusDiv = document.getElementById('login-status'); if (loginStatusDiv) { if (document.body.classList.contains('logged-in')) { loginStatusDiv.textContent = 'My Account'; } else { loginStatusDiv.textContent = 'Sign In'; } } // Update cart button link var cartButton = document.getElementById('elementor-menu-cart__toggle_button'); if (cartButton) { cartButton.href = 'https://sparkeditor.com/cart/'; cartButton.addEventListener('click', function(event) { event.preventDefault(); window.location.href = 'https://sparkeditor.com/cart/'; }); } }); </script> </div> </div> <div class="elementor-element elementor-element-cd8fdd9 elementor-hidden-mobile elementor-widget elementor-widget-button" data-id="cd8fdd9" data-element_type="widget" data-widget_type="button.default"> <div class="elementor-widget-container"> <div class="elementor-button-wrapper"> <a class="elementor-button elementor-button-link elementor-size-sm" href="https://sparkeditor.com/my-account/"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-text"><div id="login-status">Sign In</div></span> </span> </a> </div> </div> </div> <div class="elementor-element elementor-element-a824f19 toggle-icon--custom elementor-menu-cart--cart-type-mini-cart elementor-hidden-mobile elementor-menu-cart--items-indicator-bubble elementor-widget elementor-widget-woocommerce-menu-cart" data-id="a824f19" data-element_type="widget" data-settings="{&quot;cart_type&quot;:&quot;mini-cart&quot;,&quot;open_cart&quot;:&quot;click&quot;}" data-widget_type="woocommerce-menu-cart.default"> <div class="elementor-widget-container"> <div class="elementor-menu-cart__wrapper"> <div class="elementor-menu-cart__toggle_wrapper"> <div class="elementor-menu-cart__container elementor-lightbox" aria-hidden="true"> <div class="elementor-menu-cart__main" aria-hidden="true"> <div class="elementor-menu-cart__close-button"> </div> <div class="widget_shopping_cart_content"> </div> </div> </div> <div class="elementor-menu-cart__toggle elementor-button-wrapper"> <a id="elementor-menu-cart__toggle_button" href="#" class="elementor-menu-cart__toggle_button elementor-button elementor-size-sm" aria-expanded="false"> <span class="elementor-button-text"><span class="woocommerce-Price-amount amount"><bdi><span class="woocommerce-Price-currencySymbol">&#36;</span>0.00</bdi></span></span> <span class="elementor-button-icon"> <span class="elementor-button-icon-qty" data-counter="0">0</span> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M17.9797 4.59922C17.921 4.52901 17.8476 4.47254 17.7648 4.4338C17.6819 4.39506 17.5915 4.37498 17.5 4.375H4.89688L4.42188 1.76328C4.39571 1.61927 4.31984 1.48901 4.20748 1.39521C4.09512 1.30141 3.9534 1.25002 3.80703 1.25H1.875C1.70924 1.25 1.55027 1.31585 1.43306 1.43306C1.31585 1.55027 1.25 1.70924 1.25 1.875C1.25 2.04076 1.31585 2.19973 1.43306 2.31694C1.55027 2.43415 1.70924 2.5 1.875 2.5H3.28125L5.27813 13.4602C5.33695 13.7852 5.4806 14.0889 5.69453 14.3406C5.39926 14.6164 5.18613 14.9686 5.0788 15.3581C4.97146 15.7477 4.9741 16.1593 5.08643 16.5474C5.19876 16.9355 5.41638 17.2849 5.71518 17.5569C6.01397 17.8289 6.38225 18.0128 6.77919 18.0883C7.17612 18.1637 7.5862 18.1278 7.96395 17.9844C8.34169 17.841 8.67235 17.5958 8.91925 17.276C9.16615 16.9562 9.31965 16.5742 9.36273 16.1725C9.4058 15.7707 9.33677 15.3649 9.16328 15H12.7117C12.5719 15.2927 12.4995 15.6131 12.5 15.9375C12.5 16.3701 12.6283 16.7931 12.8687 17.1528C13.109 17.5125 13.4507 17.7929 13.8504 17.9585C14.2501 18.1241 14.6899 18.1674 15.1143 18.083C15.5386 17.9986 15.9284 17.7902 16.2343 17.4843C16.5402 17.1784 16.7486 16.7886 16.833 16.3643C16.9174 15.9399 16.8741 15.5001 16.7085 15.1004C16.5429 14.7007 16.2625 14.359 15.9028 14.1187C15.5431 13.8783 15.1201 13.75 14.6875 13.75H7.12266C6.97629 13.75 6.83457 13.6986 6.72221 13.6048C6.60985 13.511 6.53398 13.3807 6.50781 13.2367L6.26016 11.875H15.3227C15.7618 11.8749 16.1869 11.7208 16.524 11.4394C16.8611 11.158 17.0887 10.7672 17.1672 10.3352L18.1172 5.11172C18.1333 5.02144 18.1293 4.92872 18.1055 4.84015C18.0818 4.75158 18.0388 4.66933 17.9797 4.59922ZM8.125 15.9375C8.125 16.1229 8.07002 16.3042 7.967 16.4583C7.86399 16.6125 7.71757 16.7327 7.54627 16.8036C7.37496 16.8746 7.18646 16.8932 7.0046 16.857C6.82275 16.8208 6.6557 16.7315 6.52459 16.6004C6.39348 16.4693 6.30419 16.3023 6.26801 16.1204C6.23184 15.9385 6.25041 15.75 6.32136 15.5787C6.39232 15.4074 6.51248 15.261 6.66665 15.158C6.82082 15.055 7.00208 15 7.1875 15C7.43614 15 7.6746 15.0988 7.85041 15.2746C8.02623 15.4504 8.125 15.6889 8.125 15.9375ZM15.625 15.9375C15.625 16.1229 15.57 16.3042 15.467 16.4583C15.364 16.6125 15.2176 16.7327 15.0463 16.8036C14.875 16.8746 14.6865 16.8932 14.5046 16.857C14.3227 16.8208 14.1557 16.7315 14.0246 16.6004C13.8935 16.4693 13.8042 16.3023 13.768 16.1204C13.7318 15.9385 13.7504 15.75 13.8214 15.5787C13.8923 15.4074 14.0125 15.261 14.1667 15.158C14.3208 15.055 14.5021 15 14.6875 15C14.9361 15 15.1746 15.0988 15.3504 15.2746C15.5262 15.4504 15.625 15.6889 15.625 15.9375ZM15.9375 10.1117C15.9113 10.2561 15.835 10.3867 15.7222 10.4805C15.6094 10.5744 15.4671 10.6255 15.3203 10.625H6.03281L5.12422 5.625H16.7508L15.9375 10.1117Z" fill="#165134"></path></svg> <span class="elementor-screen-only">Cart</span> </span> </a> </div> </div> </div> <!-- close elementor-menu-cart__wrapper --> </div> </div> <div class="elementor-element elementor-element-a7c08b7 e-transform elementor-widget elementor-widget-button" data-id="a7c08b7" data-element_type="widget" data-settings="{&quot;_transform_scale_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.020000000000000017763568394002504646778106689453125,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_scale_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}" data-widget_type="button.default"> <div class="elementor-widget-container"> <div class="elementor-button-wrapper"> <a class="elementor-button elementor-button-link elementor-size-sm" href="https://wordpress.org/plugins/email-editor-plus/" target="_blank"> <span class="elementor-button-content-wrapper"> <span class="elementor-button-text">Try Lite Now - it’s free</span> </span> </a> </div> </div> </div> <div class="elementor-element elementor-element-a56bf5e elementor-nav-menu--stretch elementor-hidden-desktop elementor-nav-menu__text-align-aside elementor-nav-menu--toggle elementor-nav-menu--burger elementor-widget elementor-widget-nav-menu" data-id="a56bf5e" data-element_type="widget" data-settings="{&quot;full_width&quot;:&quot;stretch&quot;,&quot;layout&quot;:&quot;dropdown&quot;,&quot;submenu_icon&quot;:{&quot;value&quot;:&quot;&lt;svg class=\&quot;e-font-icon-svg e-fas-angle-down\&quot; viewBox=\&quot;0 0 320 512\&quot; xmlns=\&quot;http:\/\/www.w3.org\/2000\/svg\&quot;&gt;&lt;path d=\&quot;M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z\&quot;&gt;&lt;\/path&gt;&lt;\/svg&gt;&quot;,&quot;library&quot;:&quot;fa-solid&quot;},&quot;toggle&quot;:&quot;burger&quot;}" data-widget_type="nav-menu.default"> <div class="elementor-widget-container"> <div class="elementor-menu-toggle" role="button" tabindex="0" aria-label="Menu Toggle" aria-expanded="false"> <svg aria-hidden="true" role="presentation" class="elementor-menu-toggle__icon--open e-font-icon-svg e-eicon-menu-bar" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M104 333H896C929 333 958 304 958 271S929 208 896 208H104C71 208 42 237 42 271S71 333 104 333ZM104 583H896C929 583 958 554 958 521S929 458 896 458H104C71 458 42 487 42 521S71 583 104 583ZM104 833H896C929 833 958 804 958 771S929 708 896 708H104C71 708 42 737 42 771S71 833 104 833Z"></path></svg><svg aria-hidden="true" role="presentation" class="elementor-menu-toggle__icon--close e-font-icon-svg e-eicon-close" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M742 167L500 408 258 167C246 154 233 150 217 150 196 150 179 158 167 167 154 179 150 196 150 212 150 229 154 242 171 254L408 500 167 742C138 771 138 800 167 829 196 858 225 858 254 829L496 587 738 829C750 842 767 846 783 846 800 846 817 842 829 829 842 817 846 804 846 783 846 767 842 750 829 737L588 500 833 258C863 229 863 200 833 171 804 137 775 137 742 167Z"></path></svg> <span class="elementor-screen-only">Menu</span> </div> <nav class="elementor-nav-menu--dropdown elementor-nav-menu__container" aria-hidden="true"> <ul id="menu-2-a56bf5e" class="elementor-nav-menu"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-363"><a href="https://sparkeditor.com/pricing/" class="elementor-item" tabindex="-1">Pricing</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-364"><a href="https://sparkeditor.com/support/" class="elementor-item" tabindex="-1">Support</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1801"><a href="https://sparkeditor.com/add-ons/" class="elementor-item" tabindex="-1">Add-ons</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1606"><a href="#" class="elementor-item elementor-item-anchor" tabindex="-1">Resources</a> <ul class="sub-menu elementor-nav-menu--dropdown"> <li class="menu-item menu-item-type-post_type menu-item-object-page current_page_parent menu-item-724"><a href="https://sparkeditor.com/blog/" class="elementor-sub-item" tabindex="-1">Blogs</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1607"><a href="https://sparkeditor.com/video-tutorials/" class="elementor-sub-item" tabindex="-1">Video Tutorials</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-813"><a href="http://docs.wpmailplus.com" class="elementor-sub-item" tabindex="-1">Help Docs</a></li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2919"><a href="https://sparkeditor.com/whats-new/" class="elementor-sub-item" tabindex="-1">What’s New</a></li> </ul> </li> </ul> </nav> </div> </div> </div> </div> </div> </div> <div data-rocket-location-hash="b7bf26690d76fb4a11b6cbc49bfad627" data-elementor-type="single-post" data-elementor-id="673" class="elementor elementor-673 elementor-location-single post-843 post type-post status-publish format-standard has-post-thumbnail hentry category-woocommerce tag-drag-and-drop-email-builder tag-woocommerce" data-elementor-post-type="elementor_library"> <div class="elementor-element elementor-element-38b3c376 e-con-full e-flex e-con e-parent" data-id="38b3c376" data-element_type="container" data-settings="{&quot;sticky&quot;:&quot;top&quot;,&quot;sticky_offset&quot;:138,&quot;sticky_offset_tablet&quot;:140,&quot;sticky_offset_mobile&quot;:248,&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;,&quot;mobile&quot;],&quot;sticky_effects_offset&quot;:0,&quot;sticky_anchor_link_offset&quot;:0}"> <div class="elementor-element elementor-element-5db1770f elementor-widget elementor-widget-progress-tracker" data-id="5db1770f" data-element_type="widget" data-settings="{&quot;direction&quot;:&quot;ltr&quot;,&quot;type&quot;:&quot;horizontal&quot;,&quot;relative_to&quot;:&quot;entire_page&quot;}" data-widget_type="progress-tracker.default"> <div class="elementor-widget-container"> <div class="elementor-scrolling-tracker elementor-scrolling-tracker-horizontal elementor-scrolling-tracker-alignment-"> <div class="current-progress"> <div class="current-progress-percentage"></div> </div> </div> </div> </div> </div> <div data-rocket-location-hash="0d92708e24f957fed1a206aa7551f6b9" class="elementor-element elementor-element-376307b1 e-flex e-con-boxed e-con e-parent" data-id="376307b1" data-element_type="container"> <div data-rocket-location-hash="29743844a7df5f50a85b29dbbb22a255" class="e-con-inner"> <div class="elementor-element elementor-element-2d142cf0 elementor-widget__width-auto elementor-widget elementor-widget-post-info" data-id="2d142cf0" data-element_type="widget" data-widget_type="post-info.default"> <div class="elementor-widget-container"> <ul class="elementor-inline-items elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-620fce2 elementor-inline-item" itemprop="about"> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-terms"> <span class="elementor-post-info__terms-list"> <span class="elementor-post-info__terms-list-item">WooCommerce</span> </span> </span> </li> </ul> </div> </div> <div class="elementor-element elementor-element-47d5eaca elementor-widget elementor-widget-theme-post-title elementor-page-title elementor-widget-heading" data-id="47d5eaca" data-element_type="widget" data-widget_type="theme-post-title.default"> <div class="elementor-widget-container"> <h1 class="elementor-heading-title elementor-size-default">Step-by-Step Tutorial: Using a Drag and Drop Email Builder for WooCommerce</h1> </div> </div> <div class="elementor-element elementor-element-a0b6c78 elementor-align-left elementor-widget elementor-widget-post-info" data-id="a0b6c78" data-element_type="widget" data-widget_type="post-info.default"> <div class="elementor-widget-container"> <ul class="elementor-inline-items elementor-icon-list-items elementor-post-info"> <li class="elementor-icon-list-item elementor-repeater-item-463001f elementor-inline-item" itemprop="author"> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-author"> Rishikesh Pandiyan </span> </li> <li class="elementor-icon-list-item elementor-repeater-item-a78c061 elementor-inline-item" itemprop="datePublished"> <span class="elementor-icon-list-text elementor-post-info__item elementor-post-info__item--type-date"> <span class="elementor-post-info__item-prefix">•</span> <time>28 Aug, 2024</time> </span> </li> </ul> </div> </div> </div> </div> <div data-rocket-location-hash="6a3d0714e3e802d3b7f1ca4d8a9cddb9" class="elementor-element elementor-element-12a8d7e3 e-flex e-con-boxed e-con e-parent" data-id="12a8d7e3" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-280798df e-con-full e-flex e-con e-child" data-id="280798df" data-element_type="container"> <div class="elementor-element elementor-element-3a80f48b elementor-widget elementor-widget-theme-post-content" data-id="3a80f48b" data-element_type="widget" data-widget_type="theme-post-content.default"> <div class="elementor-widget-container"> <p>In the competitive world of eCommerce, standing out from the crowd is crucial. One effective way to differentiate your brand is through customized email communications. With WooCommerce, businesses can leverage tools like a drag and drop email builder for WooCommerce to create stunning, personalized emails that resonate with their audience. Spark Editor is one such tool that makes this process seamless. This article will guide you through using Spark to design and customize your WooCommerce emails, ensuring they look professional and enhance customer engagement.</p> <div class="wp-block-group new-cta-block has-background is-nowrap is-layout-flex wp-container-core-group-is-layout-2 wp-block-group-is-layout-flex" style="background-color:#2b3d55"> <div class="wp-block-group wp-container-content-1"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <p class="has-text-align-left text-title has-white-color has-text-color has-link-color wp-elements-e37870e6b1b8b17dbca51393612ba250">Create custom WooCommerce Emails easily using the drag and drop editor of Spark plugin.</p> <div class="wp-block-buttons is-horizontal is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button has-custom-font-size text-link is-style-outline is-style-outline--1" style="font-size:20px"><a class="wp-block-button__link has-white-background-color has-text-color has-background has-text-align-left wp-element-button" href="https://sparkeditor.com/pricing/" style="border-radius:8px;color:#2b3d55" target="_blank" rel="noreferrer noopener">Download Now</a></div> <div class="wp-block-button has-custom-font-size text-link demo-btn is-style-outline is-style-outline--2" style="font-size:20px"><a class="wp-block-button__link has-white-color has-text-color has-background has-text-align-left wp-element-button" href="https://demo.wpmaileditor.com/" style="border-radius:8px;background-color:#ffffff00" target="_blank" rel="noreferrer noopener">Live Demo</a></div> </div> </div></div> </div> <h2 class="wp-block-heading">What is a Drag and Drop Email Builder for WooCommerce?</h2> <p>A drag and drop email builder is a user-friendly tool that allows you to design emails visually by dragging elements like text, images, buttons, and more into your email template. These builders simplify the email design process, eliminating the need for coding knowledge. Spark Editor, a powerful drag and drop email builder for WooCommerce, offers an intuitive interface that makes creating custom email templates for WooCommerce easy and efficient.</p> <h3 class="wp-block-heading">Advantages for WooCommerce Users</h3> <p>For WooCommerce users, the ability to customize emails is a game-changer. It allows you to maintain brand consistency across all customer communications, making your emails more recognizable and professional. With Spark, you can create emails that are visually appealing and tailored to specific customer interactions, such as order confirmations, shipping notifications, and more. This WooCommerce email customization leads to higher open rates, better customer engagement, and more conversions.</p> <h2 class="wp-block-heading">Setting Up a Drag and Drop Email Builder for WooCommerce</h2> <p>The drag and drop email customizer in WooCommerce that we are going to elaborate is the Spark Editor. Here are the steps to set up the plugin in your WordPress site.&nbsp;</p> <h3 class="wp-block-heading">Install Spark Editor Plugin</h3> <p>Spark Editor comes in two variants. One is the ‘Core’ version which is free to download and use and the other is ‘Pro’ which is a paid version. Here are the steps to install the plugin.&nbsp;</p> <p><strong>a) Core Plugin Installation (Free)</strong></p> <ol class="wp-block-list"> <li>Go to ‘<strong>WordPress</strong>’ and click on ‘<strong>Plugins</strong>.’&nbsp;</li> <li>Click the ‘<strong>Add New Plugin</strong>’ button and enter ‘<strong>Spark Editor</strong>’ in the search tab.&nbsp;</li> <li>Look for the plugin in the search results; click ‘<strong>Install Now</strong>’ and select ‘<strong>Activate</strong>.’&nbsp;</li> </ol> <p>After this, you can find the Spark Editor plugin on the left-side menu of your WordPress site.&nbsp;</p> <p><strong>b) Pro Plugin Installation (Paid)</strong></p> <p>Since the Core version of Spark only has limited functions, you need to purchase <a href="https://sparkeditor.com/pricing/" target="_blank" rel="noreferrer noopener">Spark&#8217;s Pro version</a> to unlock its full features. Ensure you have installed the core version of Spark before getting into the procedure.&nbsp;</p> <p>After buying the pro version, the Spark Pro’s downloadable ZIP file will be sent either to your Email address or can be accessed through your Spark Editor account. Along with it, the License Key to the product will also be sent.&nbsp;</p> <ol class="wp-block-list"> <li>Download the Spark Editor Pro plugin’ ZIP file.&nbsp;</li> <li>Then, go to <strong>WordPress</strong> -&gt; <strong>Plugins</strong> -&gt; <strong>Add New</strong>.&nbsp;</li> <li>Select the ‘<strong>Upload Plugin</strong>’ button at the top.&nbsp;</li> <li>Click ‘<strong>Browse</strong>’ -&gt; Select the ‘<strong>Spark Editor ZIP file</strong>’ -&gt; Click ‘<strong>Install Now</strong>’.&nbsp;</li> <li>After this, tap on ‘<strong>Activate Plugin</strong>.’</li> </ol> <div class="wp-block-image"> <figure class="aligncenter size-full"><img fetchpriority="high" fetchpriority="high" decoding="async" width="980" height="436" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20980%20436'%3E%3C/svg%3E" alt="Activate WPMail Plus Pro plugin" class="wp-image-880" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Activate-WPMail-Plus-Pro-plugin.png 980w, https://sparkeditor.com/wp-content/uploads/2024/08/Activate-WPMail-Plus-Pro-plugin-300x133.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Activate-WPMail-Plus-Pro-plugin-768x342.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Activate-WPMail-Plus-Pro-plugin-600x267.png 600w" data-lazy-sizes="(max-width: 980px) 100vw, 980px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Activate-WPMail-Plus-Pro-plugin.png" /><noscript><img fetchpriority="high" fetchpriority="high" decoding="async" width="980" height="436" src="https://sparkeditor.com/wp-content/uploads/2024/08/Activate-WPMail-Plus-Pro-plugin.png" alt="Activate WPMail Plus Pro plugin" class="wp-image-880" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Activate-WPMail-Plus-Pro-plugin.png 980w, https://sparkeditor.com/wp-content/uploads/2024/08/Activate-WPMail-Plus-Pro-plugin-300x133.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Activate-WPMail-Plus-Pro-plugin-768x342.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Activate-WPMail-Plus-Pro-plugin-600x267.png 600w" sizes="(max-width: 980px) 100vw, 980px" /></noscript></figure></div> <p>6. Then, go to the ‘<strong>Spark Editor</strong>’ plugin -&gt; Click ‘<strong>Settings</strong>’ -&gt; ‘<strong>Enter your license key</strong>.’</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><img decoding="async" width="1024" height="490" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20490'%3E%3C/svg%3E" alt="Click-Spark Editor-Settings" class="wp-image-2474" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-300x144.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-768x368.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-600x287.png 600w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings.png" /><noscript><img decoding="async" width="1024" height="490" src="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings.png" alt="Click-Spark Editor-Settings" class="wp-image-2474" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-300x144.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-768x368.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-600x287.png 600w" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></figure></div> <p>7. Enter the license key sent to your email address and tap ‘<strong>Activate</strong>’.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><img decoding="async" width="898" height="425" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20898%20425'%3E%3C/svg%3E" alt="Enter-license-key-and-activate-Spark editor-email-customizer" class="wp-image-2476" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Enter-license-key-and-activate-Spark-editor-email-customizer.png 898w, https://sparkeditor.com/wp-content/uploads/2024/08/Enter-license-key-and-activate-Spark-editor-email-customizer-300x142.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Enter-license-key-and-activate-Spark-editor-email-customizer-768x363.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Enter-license-key-and-activate-Spark-editor-email-customizer-600x284.png 600w" data-lazy-sizes="(max-width: 898px) 100vw, 898px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Enter-license-key-and-activate-Spark-editor-email-customizer.png" /><noscript><img decoding="async" width="898" height="425" src="https://sparkeditor.com/wp-content/uploads/2024/08/Enter-license-key-and-activate-Spark-editor-email-customizer.png" alt="Enter-license-key-and-activate-Spark editor-email-customizer" class="wp-image-2476" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Enter-license-key-and-activate-Spark-editor-email-customizer.png 898w, https://sparkeditor.com/wp-content/uploads/2024/08/Enter-license-key-and-activate-Spark-editor-email-customizer-300x142.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Enter-license-key-and-activate-Spark-editor-email-customizer-768x363.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Enter-license-key-and-activate-Spark-editor-email-customizer-600x284.png 600w" sizes="(max-width: 898px) 100vw, 898px" /></noscript></figure></div> <p>Now, you have activated the Spark Editor Pro plugin and you can customize your emails using it.&nbsp;</p> <h2 class="wp-block-heading">Customizing WooCommerce Emails Using Drag and Drop</h2> <p>Now that you’ve set up Spark Editor let’s walk through how to customize your WooCommerce emails using the drag and drop feature of Spark Editor.&nbsp;</p> <h3 class="wp-block-heading">Step 1: Select Custom Email Template</h3> <p>1. Go to WordPress -&gt; Spark Editor -&gt; Templates.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><img decoding="async" width="959" height="479" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20959%20479'%3E%3C/svg%3E" alt="Drag-and-drop-email-templates-for-WooCommerce-mails" class="wp-image-2477" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-for-WooCommerce-mails-1.png 959w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-for-WooCommerce-mails-1-300x150.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-for-WooCommerce-mails-1-768x384.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-for-WooCommerce-mails-1-600x300.png 600w" data-lazy-sizes="(max-width: 959px) 100vw, 959px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-for-WooCommerce-mails-1.png" /><noscript><img loading="lazy" loading="lazy" decoding="async" width="959" height="479" src="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-for-WooCommerce-mails-1.png" alt="Drag-and-drop-email-templates-for-WooCommerce-mails" class="wp-image-2477" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-for-WooCommerce-mails-1.png 959w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-for-WooCommerce-mails-1-300x150.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-for-WooCommerce-mails-1-768x384.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-for-WooCommerce-mails-1-600x300.png 600w" sizes="(max-width: 959px) 100vw, 959px" /></noscript></figure></div> <p>2. Choose a template from the list. For demonstration, let us choose ‘<strong>New order</strong>.’ This will take you to the screen where you can see the email layout.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><img decoding="async" width="1024" height="490" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20490'%3E%3C/svg%3E" alt="Click-Spark Editor-Settings" class="wp-image-2481" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-1.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-1-300x144.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-1-768x368.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-1-600x287.png 600w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-1.png" /><noscript><img loading="lazy" loading="lazy" decoding="async" width="1024" height="490" src="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-1.png" alt="Click-Spark Editor-Settings" class="wp-image-2481" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-1.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-1-300x144.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-1-768x368.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Spark-Editor-Settings-1-600x287.png 600w" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></figure></div> <h3 class="wp-block-heading">Step 2: Drag and Drop Email Elements/Content</h3> <p>In the following screen, you can drag and drop contents to your email.Here are the&nbsp; steps to do it.&nbsp;</p> <p>1. Click on the ‘<strong>Contents</strong>’ section provided to the left.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><img decoding="async" width="909" height="505" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20909%20505'%3E%3C/svg%3E" alt="Drag-and-drop-email-contents-for-WooCommerce" class="wp-image-2479" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-contents-for-WooCommerce-1.png 909w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-contents-for-WooCommerce-1-300x167.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-contents-for-WooCommerce-1-768x427.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-contents-for-WooCommerce-1-600x333.png 600w" data-lazy-sizes="(max-width: 909px) 100vw, 909px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-contents-for-WooCommerce-1.png" /><noscript><img loading="lazy" loading="lazy" decoding="async" width="909" height="505" src="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-contents-for-WooCommerce-1.png" alt="Drag-and-drop-email-contents-for-WooCommerce" class="wp-image-2479" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-contents-for-WooCommerce-1.png 909w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-contents-for-WooCommerce-1-300x167.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-contents-for-WooCommerce-1-768x427.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-contents-for-WooCommerce-1-600x333.png 600w" sizes="(max-width: 909px) 100vw, 909px" /></noscript></figure></div> <p>2. Scroll to the sub-section you want to. Layout, Elements and Store Elements are the three sub-sections you can find.&nbsp;</p> <p><strong>a) Add Columns</strong></p> <p>To add <strong>Columns</strong> to your email template, click on the specific column and drag it to the email template.&nbsp;</p> <p>For example, if you want to add ‘<strong>Two Column</strong>’ click and drag it to the position you want on the email template. Once you have added a column, you can add elements like text or images to it.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><img decoding="async" width="1024" height="523" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20523'%3E%3C/svg%3E" alt="Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor" class="wp-image-2480" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-300x153.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-768x392.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-600x306.png 600w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor.png" /><noscript><img loading="lazy" loading="lazy" decoding="async" width="1024" height="523" src="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor.png" alt="Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor" class="wp-image-2480" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-300x153.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-768x392.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-600x306.png 600w" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></figure></div> <p><strong>b) Add Elements</strong></p> <p>From the elements section, you can add Texts, Headings, Buttons, Images, Divider, Footer and Social icons.&nbsp;</p> <p>Click and drag the particular element and put it on the email template. You can either drag and drop the elements into a column or anywhere within the email template.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><img decoding="async" width="1024" height="523" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20523'%3E%3C/svg%3E" alt="Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor" class="wp-image-2480" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-300x153.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-768x392.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-600x306.png 600w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor.png" /><noscript><img loading="lazy" loading="lazy" decoding="async" width="1024" height="523" src="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor.png" alt="Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor" class="wp-image-2480" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-300x153.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-768x392.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Drag-and-drop-email-templates-on-WooCommerce-using-Spark-Editor-600x306.png 600w" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></figure></div> <p>If you drop an element at any point in the template, it becomes a separate block itself.&nbsp;</p> <p><strong>c) Add Store Elements</strong></p> <p>Elements like Address and Order Summary can also be dragged and dropped to the store. Just click; drag and drop it to the place you want to.&nbsp;</p> <h3 class="wp-block-heading">Step 3: Add Styles</h3> <p>Once you have added all the necessary elements to the email template, select the style you want to.&nbsp;</p> <p>1. Tap on the block you want to edit.&nbsp;</p> <p>2. Click on the ‘<strong>Styles</strong>’ sub-section.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><img decoding="async" width="1024" height="456" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20456'%3E%3C/svg%3E" alt="Click-Styles-on-the-Email-customizer-plugin-Click-Styles-on-the-Email-customizer-plugin-" class="wp-image-2483" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Styles-on-the-Email-customizer-plugin-.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Styles-on-the-Email-customizer-plugin--300x134.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Styles-on-the-Email-customizer-plugin--768x342.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Styles-on-the-Email-customizer-plugin--600x267.png 600w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Styles-on-the-Email-customizer-plugin-.png" /><noscript><img loading="lazy" loading="lazy" decoding="async" width="1024" height="456" src="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Styles-on-the-Email-customizer-plugin-.png" alt="Click-Styles-on-the-Email-customizer-plugin-Click-Styles-on-the-Email-customizer-plugin-" class="wp-image-2483" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Click-Styles-on-the-Email-customizer-plugin-.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Styles-on-the-Email-customizer-plugin--300x134.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Styles-on-the-Email-customizer-plugin--768x342.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-Styles-on-the-Email-customizer-plugin--600x267.png 600w" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></figure></div> <p>3. Select the feature you want to edit. You can edit background color, font size, color, padding, etc.&nbsp;</p> <p>4. Once done, click on the ‘<strong>Preview</strong>’ option to see how the template looks.Make changes if you are not satisfied with the output.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><img decoding="async" width="1024" height="438" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20438'%3E%3C/svg%3E" alt="Preview-Email-templates-with-Spark Editor-email-customizer-plugin" class="wp-image-2485" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Preview-Email-templates-with-Spark-Editor-email-customizer-plugin.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Preview-Email-templates-with-Spark-Editor-email-customizer-plugin-300x128.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Preview-Email-templates-with-Spark-Editor-email-customizer-plugin-768x329.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Preview-Email-templates-with-Spark-Editor-email-customizer-plugin-600x257.png 600w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Preview-Email-templates-with-Spark-Editor-email-customizer-plugin.png" /><noscript><img loading="lazy" loading="lazy" decoding="async" width="1024" height="438" src="https://sparkeditor.com/wp-content/uploads/2024/08/Preview-Email-templates-with-Spark-Editor-email-customizer-plugin.png" alt="Preview-Email-templates-with-Spark Editor-email-customizer-plugin" class="wp-image-2485" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Preview-Email-templates-with-Spark-Editor-email-customizer-plugin.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Preview-Email-templates-with-Spark-Editor-email-customizer-plugin-300x128.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Preview-Email-templates-with-Spark-Editor-email-customizer-plugin-768x329.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Preview-Email-templates-with-Spark-Editor-email-customizer-plugin-600x257.png 600w" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></figure></div> <p>5. After this, click the ‘<strong>Save</strong>’ button provided at the top-right and complete the changes.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><img decoding="async" width="1024" height="456" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20456'%3E%3C/svg%3E" alt="Click-the-Save-button" class="wp-image-2486" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Click-the-Save-button-1.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-the-Save-button-1-300x134.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-the-Save-button-1-768x342.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-the-Save-button-1-600x267.png 600w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Click-the-Save-button-1.png" /><noscript><img loading="lazy" loading="lazy" decoding="async" width="1024" height="456" src="https://sparkeditor.com/wp-content/uploads/2024/08/Click-the-Save-button-1.png" alt="Click-the-Save-button" class="wp-image-2486" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Click-the-Save-button-1.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-the-Save-button-1-300x134.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-the-Save-button-1-768x342.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Click-the-Save-button-1-600x267.png 600w" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></figure></div> <h2 class="wp-block-heading">Advanced Customization Techniques</h2> <p>For those looking to take their email customization to the next level, Spark offers several advanced features.</p> <p>With more customers checking emails on mobile devices, it’s essential that your emails look great on any screen size. Spark ensures that all your custom emails are fully responsive, automatically adjusting their layout for optimal viewing on both desktop and mobile devices. This feature is crucial for maintaining a consistent WooCommerce email branding across all devices.</p> <p>To access this, click on the ‘<strong>Mobile</strong>’ icon at the top. This will show how the template will look like on a mobile phone.</p> <div class="wp-block-image"> <figure class="aligncenter size-full"><img decoding="async" width="1024" height="453" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201024%20453'%3E%3C/svg%3E" alt="Advanced-Customization-Techniques-" class="wp-image-2487" data-lazy-srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Advanced-Customization-Techniques-.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Advanced-Customization-Techniques--300x133.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Advanced-Customization-Techniques--768x340.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Advanced-Customization-Techniques--600x265.png 600w" data-lazy-sizes="(max-width: 1024px) 100vw, 1024px" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/08/Advanced-Customization-Techniques-.png" /><noscript><img loading="lazy" loading="lazy" decoding="async" width="1024" height="453" src="https://sparkeditor.com/wp-content/uploads/2024/08/Advanced-Customization-Techniques-.png" alt="Advanced-Customization-Techniques-" class="wp-image-2487" srcset="https://sparkeditor.com/wp-content/uploads/2024/08/Advanced-Customization-Techniques-.png 1024w, https://sparkeditor.com/wp-content/uploads/2024/08/Advanced-Customization-Techniques--300x133.png 300w, https://sparkeditor.com/wp-content/uploads/2024/08/Advanced-Customization-Techniques--768x340.png 768w, https://sparkeditor.com/wp-content/uploads/2024/08/Advanced-Customization-Techniques--600x265.png 600w" sizes="(max-width: 1024px) 100vw, 1024px" /></noscript></figure></div> <div class="wp-block-group new-cta-block has-background is-nowrap is-layout-flex wp-container-core-group-is-layout-4 wp-block-group-is-layout-flex" style="background-color:#2b3d55"> <div class="wp-block-group wp-container-content-2"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <p class="has-text-align-left text-title has-white-color has-text-color has-link-color wp-elements-0e7624eb01ca5b3d028892b599916beb">Make your WooCommerce store stand out by creating personalized emails using the Spark Editor plugin.</p> <div class="wp-block-buttons is-horizontal is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button has-custom-font-size text-link is-style-outline is-style-outline--3" style="font-size:20px"><a class="wp-block-button__link has-white-background-color has-text-color has-background has-text-align-left wp-element-button" href="https://sparkeditor.com/pricing/" style="border-radius:8px;color:#2b3d55" target="_blank" rel="noreferrer noopener">Download Now</a></div> <div class="wp-block-button has-custom-font-size text-link demo-btn is-style-outline is-style-outline--4" style="font-size:20px"><a class="wp-block-button__link has-white-color has-text-color has-background has-text-align-left wp-element-button" href="https://demo.wpmaileditor.com/" style="border-radius:8px;background-color:#ffffff00" target="_blank" rel="noreferrer noopener">Live Demo</a></div> </div> </div></div> </div> <p>Best Practices for WooCommerce Email Design</p> <p>To make the most of your custom email designs, follow these best practices:</p> <h3 class="wp-block-heading">a) Effective Email Layouts</h3> <ul class="wp-block-list"> <li><strong>Keep It Simple:</strong> Avoid clutter by sticking to a clean, simple layout. Focus on delivering your message clearly and concisely.</li> <li><strong>Use High-Quality Images:</strong> Ensure all images used in your emails are high-resolution and relevant to the content.</li> <li><strong>Prioritize Content:</strong> Place the most important information at the top of the email to ensure it’s seen first.</li> </ul> <h3 class="wp-block-heading">b) Ensuring Mobile Compatibility</h3> <p>Since a significant portion of email opens happen on mobile devices, ensuring your emails are mobile-friendly is crucial. Spark Editor automatically generates mobile-responsive designs, but you should still preview and test your emails on different devices to ensure they look and function as intended.</p> <h3 class="wp-block-heading">c) Email Branding and Aesthetics</h3> <p>Consistent branding across all customer touchpoints reinforces your brand identity. Make sure your emails align with your overall brand aesthetic, including your logo, color scheme, and tone of voice. Spark Editor makes it easy to apply your brand’s style to every email you send, ensuring consistent WooCommerce email branding.</p> <h2 class="wp-block-heading">Troubleshooting Common Issues</h2> <p>Even with a powerful tool like Spark, you may encounter some issues. Here’s how to address common problems:</p> <h3 class="wp-block-heading">a) Resolve Email Display Problems</h3> <p>Check that all images and elements are properly aligned and sized if your emails aren&#8217;t displaying correctly. Use Sparks&#8217;s preview feature to identify any issues before sending. This ensures your WooCommerce email layouts are optimized for all devices.</p> <h3 class="wp-block-heading">b) Debug Email Delivery Issues</h3> <p>If your emails aren’t reaching your customers’ inboxes, ensure your domain is properly authenticated and your email content doesn’t trigger spam filters. Testing email deliverability before launching a campaign is also a good idea. This is a common issue with WooCommerce email creation that can be resolved by following best practices in email setup.</p> <div class="wp-block-group new-cta-block has-background is-nowrap is-layout-flex wp-container-core-group-is-layout-6 wp-block-group-is-layout-flex" style="background-color:#2b3d55"> <div class="wp-block-group wp-container-content-3"><div class="wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained"> <p class="has-text-align-left text-title has-white-color has-text-color has-link-color wp-elements-b54404ef35d4c71f4068517ab950ebc1">Enhance your brand value by creating brand consistent emails using the Spark Editor plugin.&nbsp;</p> <div class="wp-block-buttons is-horizontal is-layout-flex wp-block-buttons-is-layout-flex"> <div class="wp-block-button has-custom-font-size text-link is-style-outline is-style-outline--5" style="font-size:20px"><a class="wp-block-button__link has-white-background-color has-text-color has-background has-text-align-left wp-element-button" href="https://sparkeditor.com/pricing/" style="border-radius:8px;color:#2b3d55" target="_blank" rel="noreferrer noopener">Download Now</a></div> <div class="wp-block-button has-custom-font-size text-link demo-btn is-style-outline is-style-outline--6" style="font-size:20px"><a class="wp-block-button__link has-white-color has-text-color has-background has-text-align-left wp-element-button" href="https://demo.wpmaileditor.com/" style="border-radius:8px;background-color:#ffffff00" target="_blank" rel="noreferrer noopener">Live Demo</a></div> </div> </div></div> </div> <h2 class="wp-block-heading">Conclusion</h2> <p>Customizing your WooCommerce emails with the Spark Editor can significantly enhance your brand’s communication strategy. By following the steps outlined in this guide, you can create professional, personalized emails that engage your customers and drive more sales. Start implementing these customizations today and see the difference they make in your WooCommerce store. Whether you&#8217;re using drag and drop email builder for WooCommerce, or ensuring mobile compatibility, Spark provides all the tools you need to stand out in the inbox.</p> <div class="schema-faq wp-block-yoast-faq-block"><div class="schema-faq-section" id="faq-question-1724933367959"><strong class="schema-faq-question">What is a Drag and Drop Email Builder for WooCommerce?</strong> <p class="schema-faq-answer">A Drag and Drop Email Builder for WooCommerce is a tool that allows you to create and customize email templates for your WooCommerce store using an easy drag-and-drop interface.</p> </div> <div class="schema-faq-section" id="faq-question-1724933444549"><strong class="schema-faq-question">How does a Drag and Drop Email Builder for WooCommerce improve email design?</strong> <p class="schema-faq-answer">Using a Drag and Drop Email Builder for WooCommerce simplifies the email design process, enabling users to create professional, responsive emails without coding knowledge.</p> </div> <div class="schema-faq-section" id="faq-question-1724933454099"><strong class="schema-faq-question">What are the benefits of using a Drag and Drop Email Builder in WooCommerce?</strong> <p class="schema-faq-answer">The benefits include ease of use, design flexibility, no coding required, and the ability to create responsive and visually appealing emails.</p> </div> <div class="schema-faq-section" id="faq-question-1724933466471"><strong class="schema-faq-question">What are the top features to look for in a Drag and Drop Email Builder for WooCommerce?</strong> <p class="schema-faq-answer">Key features to consider include ease of use, responsive design, template library, and integration options with WooCommerce. Spark Editor offers all the above-said features.</p> </div> <div class="schema-faq-section" id="faq-question-1724933473275"><strong class="schema-faq-question">Are there any pre-designed templates in a Drag and Drop Email Builder for WooCommerce?</strong> <p class="schema-faq-answer">Yes. Plugins like Spark offer pre-designed templates that can easily be dragged and dropped into your templates.</p> </div> </div> </div> </div> <div class="elementor-element elementor-element-4efc3b48 elementor-author-box--image-valign-top elementor-author-box--layout-image-left elementor-author-box--align-left elementor-author-box--avatar-yes elementor-author-box--name-yes elementor-author-box--biography-yes elementor-widget elementor-widget-author-box" data-id="4efc3b48" data-element_type="widget" data-widget_type="author-box.default"> <div class="elementor-widget-container"> <div class="elementor-author-box"> <div class="elementor-author-box__avatar"> <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Picture of Rishikesh Pandiyan" data-lazy-src="https://secure.gravatar.com/avatar/9178469d5cabc27ae5d5bcf8836c7126?s=90&#038;d=mm&#038;r=g"><noscript><img src="https://secure.gravatar.com/avatar/9178469d5cabc27ae5d5bcf8836c7126?s=90&#038;d=mm&#038;r=g" alt="Picture of Rishikesh Pandiyan" loading="lazy"></noscript> </div> <div class="elementor-author-box__text"> <div > <div class="elementor-author-box__name"> Rishikesh Pandiyan </div> </div> <div class="elementor-author-box__bio"> Rishi is a dedicated technical writer with a passion for creating clear and engaging technical content. Combining their love for writing with a knack for simplifying complex ideas, they deliver impactful work. Outside writing, they enjoy playing football and staying active. </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-3f43c4d0 elementor-widget elementor-widget-post-navigation" data-id="3f43c4d0" data-element_type="widget" data-widget_type="post-navigation.default"> <div class="elementor-widget-container"> <div class="elementor-post-navigation"> <div class="elementor-post-navigation__prev elementor-post-navigation__link"> <a href="https://sparkeditor.com/blog/how-to-customize-woocommerce-order-confirmation-emails/" rel="prev"><span class="elementor-post-navigation__link__prev"><span class="post-navigation__prev--label"> Previous</span><span class="post-navigation__prev--title">How to Customize WooCommerce Order Confirmation Emails for Better Conversions</span></span></a> </div> <div class="elementor-post-navigation__next elementor-post-navigation__link"> <a href="https://sparkeditor.com/blog/woocommerce-branded-emails/" rel="next"><span class="elementor-post-navigation__link__next"><span class="post-navigation__next--label">Next </span><span class="post-navigation__next--title">Why Branded Emails Matter for Customer Retention in WooCommerce?</span></span></a> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-5b9fdb32 e-con-full e-flex e-con e-child" data-id="5b9fdb32" data-element_type="container"> <div class="elementor-element elementor-element-1e7a55c7 elementor-widget elementor-widget-html" data-id="1e7a55c7" data-element_type="widget" data-widget_type="html.default"> <div class="elementor-widget-container"> <script type="rocketlazyloadscript">window.addEventListener('DOMContentLoaded', function() { jQuery( document ).ready( function($) { $( '.wp-block-yoast-faq-block, .schema-faq' ).addClass( 'fcp-faq' ); $( '.wp-block-yoast-faq-block .schema-faq-question, .schema-faq .schema-faq-question' ).click( function() { const $parent = $( this ).parent(); if ( $parent.hasClass( 'fcp-opened' ) ) { $parent.removeClass( 'fcp-opened' ); } else { $( '.fcp-opened' ).removeClass( 'fcp-opened' ); $parent.addClass( 'fcp-opened' ); } }); }); });</script> <link data-minify="1" rel="stylesheet" href="https://sparkeditor.com/wp-content/cache/min/1/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css?ver=1734497900"> </div> </div> <div class="elementor-element elementor-element-7810d835 e-con-full e-flex e-con e-child" data-id="7810d835" data-element_type="container" data-settings="{&quot;sticky&quot;:&quot;top&quot;,&quot;sticky_offset&quot;:120,&quot;sticky_parent&quot;:&quot;yes&quot;,&quot;sticky_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;],&quot;sticky_effects_offset&quot;:0,&quot;sticky_anchor_link_offset&quot;:0}"> <div class="elementor-element elementor-element-24770d77 elementor-widget elementor-widget-table-of-contents" data-id="24770d77" data-element_type="widget" data-settings="{&quot;headings_by_tags&quot;:[&quot;h2&quot;,&quot;h3&quot;],&quot;collapse_subitems&quot;:&quot;yes&quot;,&quot;no_headings_message&quot;:&quot;No headings were found on this page.&quot;,&quot;marker_view&quot;:&quot;numbers&quot;,&quot;hierarchical_view&quot;:&quot;yes&quot;,&quot;min_height&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_tablet&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;min_height_mobile&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}" data-widget_type="table-of-contents.default"> <div class="elementor-widget-container"> <div class="elementor-toc__header"> <h4 class="elementor-toc__header-title"> Table of Content </h4> </div> <div id="elementor-toc__24770d77" class="elementor-toc__body elementor-toc__list-items--collapsible"> <div class="elementor-toc__spinner-container"> <svg class="elementor-toc__spinner eicon-animation-spin e-font-icon-svg e-eicon-loading" aria-hidden="true" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"><path d="M500 975V858C696 858 858 696 858 500S696 142 500 142 142 304 142 500H25C25 237 238 25 500 25S975 237 975 500 763 975 500 975Z"></path></svg> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div data-elementor-type="footer" data-elementor-id="1848" class="elementor elementor-1848 elementor-location-footer" data-elementor-post-type="elementor_library"> <div class="elementor-element elementor-element-0fc66fe e-flex e-con-boxed e-con e-parent" data-id="0fc66fe" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-dc10239 e-con-full e-flex e-con e-child" data-id="dc10239" data-element_type="container"> <div class="elementor-element elementor-element-0c2abbd elementor-widget elementor-widget-image" data-id="0c2abbd" data-element_type="widget" data-widget_type="image.default"> <div class="elementor-widget-container"> <img width="162" height="50" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20162%2050'%3E%3C/svg%3E" class="attachment-large size-large wp-image-1955" alt="Spark Editor" data-lazy-src="https://sparkeditor.com/wp-content/uploads/2024/09/Spark-Email-Editor-.png" /><noscript><img loading="lazy" width="162" height="50" src="https://sparkeditor.com/wp-content/uploads/2024/09/Spark-Email-Editor-.png" class="attachment-large size-large wp-image-1955" alt="Spark Editor" /></noscript> </div> </div> <div class="elementor-element elementor-element-8181d25 elementor-widget__width-inherit elementor-widget elementor-widget-text-editor" data-id="8181d25" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>Create and customize your WooCommerce emails with an intuitive drap-and-drop editor using Spark Editor.</p> </div> </div> <div class="elementor-element elementor-element-e8b7d98 elementor-widget__width-inherit elementor-widget elementor-widget-text-editor" data-id="e8b7d98" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> Connect with us: </div> </div> <div class="elementor-element elementor-element-65f5225 elementor-shape-circle e-grid-align-left elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="65f5225" data-element_type="widget" data-widget_type="social-icons.default"> <div class="elementor-widget-container"> <div class="elementor-social-icons-wrapper elementor-grid"> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-linkedin elementor-repeater-item-9d1eb39" href="https://www.linkedin.com/company/spark-editor/" target="_blank"> <span class="elementor-screen-only">Linkedin</span> <svg class="e-font-icon-svg e-fab-linkedin" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg"><path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg> </a> </span> </div> </div> </div> </div> <div class="elementor-element elementor-element-897704f e-con-full e-flex e-con e-child" data-id="897704f" data-element_type="container"> <div class="elementor-element elementor-element-8853470 elementor-widget elementor-widget-heading" data-id="8853470" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Spark Editor</h2> </div> </div> <div class="elementor-element elementor-element-bcaa5d7 elementor-widget elementor-widget-text-editor" data-id="bcaa5d7" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://sparkeditor.com/pricing/">Pricing</a> </div> </div> <div class="elementor-element elementor-element-293a4a3 elementor-widget elementor-widget-text-editor" data-id="293a4a3" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://sparkeditor.com/blog/">Blog</a> </div> </div> <div class="elementor-element elementor-element-b951a05 elementor-widget elementor-widget-text-editor" data-id="b951a05" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://sparkeditor.com/checkout/">Checkout</a> </div> </div> <div class="elementor-element elementor-element-7db5ffd elementor-widget elementor-widget-text-editor" data-id="7db5ffd" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://sparkeditor.com/support/">Support</a> </div> </div> </div> <div class="elementor-element elementor-element-1bc259b e-con-full e-flex e-con e-child" data-id="1bc259b" data-element_type="container"> <div class="elementor-element elementor-element-b12131a elementor-widget elementor-widget-heading" data-id="b12131a" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Resources</h2> </div> </div> <div class="elementor-element elementor-element-6f8d0a1 elementor-widget elementor-widget-text-editor" data-id="6f8d0a1" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://sparkeditor.com/whats-new/">What&#8217;s <span class="new";>New</span></a> </div> </div> <div class="elementor-element elementor-element-e3cc889 elementor-widget elementor-widget-text-editor" data-id="e3cc889" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="http://docs.sparkeditor.com/" target="_blank" rel="noopener">Help Docs</a> </div> </div> <div class="elementor-element elementor-element-2f0c4cf elementor-widget elementor-widget-text-editor" data-id="2f0c4cf" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://sparkeditor.com/terms-and-conditions/">Terms &amp; Conditions</a> </div> </div> <div class="elementor-element elementor-element-64d0457 elementor-widget elementor-widget-text-editor" data-id="64d0457" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://sparkeditor.com/refund-policy/">Refund Policy</a> </div> </div> <div class="elementor-element elementor-element-e892824 elementor-widget elementor-widget-text-editor" data-id="e892824" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://sparkeditor.com/privacy-policy/">Privacy Policy</a> </div> </div> </div> <div class="elementor-element elementor-element-e371504 e-con-full e-flex e-con e-child" data-id="e371504" data-element_type="container"> <div class="elementor-element elementor-element-4069129 elementor-widget__width-inherit elementor-widget elementor-widget-heading" data-id="4069129" data-element_type="widget" data-widget_type="heading.default"> <div class="elementor-widget-container"> <h2 class="elementor-heading-title elementor-size-default">Also from us</h2> </div> </div> <div class="elementor-element elementor-element-587ed9f elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor" data-id="587ed9f" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://www.flycart.org/?utm_source=sparkeditor&amp;utm_medium=footer" target="_blank" rel="noopener">Flycart</a> </div> </div> <div class="elementor-element elementor-element-484d0ca elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor" data-id="484d0ca" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://wployalty.net/?utm_source=sparkeditor&amp;utm_medium=footer" target="_blank" rel="noopener">WPLoyalty </a> </div> </div> <div class="elementor-element elementor-element-70056ac elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor" data-id="70056ac" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://www.retainful.com/?utm_source=sparkeditor&amp;utm_medium=footer" target="_blank" rel="noopener">Retainful</a> </div> </div> <div class="elementor-element elementor-element-8411bd7 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor" data-id="8411bd7" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://upsellwp.com/?utm_source=sparkeditor&amp;utm_medium=footer" target="_blank" rel="noopener">UpsellWP</a> </div> </div> <div class="elementor-element elementor-element-c50e8e6 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor" data-id="c50e8e6" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://wpbundle.net/?utm_source=sparkeditor&amp;utm_medium=footer" target="_blank" rel="noopener">WPBundle</a> </div> </div> <div class="elementor-element elementor-element-945a0fa elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor" data-id="945a0fa" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://wprelay.com/?utm_source=sparkeditor&amp;utm_medium=footer" target="_blank" rel="noopener">WPRelay</a> </div> </div> <div class="elementor-element elementor-element-10a1ff1 elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor" data-id="10a1ff1" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://afflr.io/?utm_source=sparkeditor&amp;utm_medium=footer" target="_blank" rel="noopener">Afflr</a> </div> </div> <div class="elementor-element elementor-element-6abde4e elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor" data-id="6abde4e" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <a href="https://shopjar.co/?utm_source=sparkeditor&amp;utm_medium=footer" target="_blank" rel="noopener">Shopjar</a> </div> </div> </div> </div> </div> <div class="elementor-element elementor-element-3344b03 e-flex e-con-boxed e-con e-parent" data-id="3344b03" data-element_type="container"> <div class="e-con-inner"> <div class="elementor-element elementor-element-b117b26 elementor-widget-divider--view-line elementor-widget elementor-widget-divider" data-id="b117b26" data-element_type="widget" data-widget_type="divider.default"> <div class="elementor-widget-container"> <div class="elementor-divider"> <span class="elementor-divider-separator"> </span> </div> </div> </div> <div class="elementor-element elementor-element-5cd367b elementor-widget elementor-widget-text-editor" data-id="5cd367b" data-element_type="widget" data-widget_type="text-editor.default"> <div class="elementor-widget-container"> <p>© 2024 Spark Editor. All rights reserved.</p> </div> </div> </div> </div> </div> <script type="rocketlazyloadscript"> window.intercomSettings = { api_base: "https://api-iam.intercom.io", app_id: "p36lo8p9" }; </script> <script type="rocketlazyloadscript"> // We pre-filled your app ID in the widget URL: 'https://widget.intercom.io/widget/p36lo8p9' (function(){var w=window;var ic=w.Intercom;if(typeof ic==="function"){ic('reattach_activator');ic('update',w.intercomSettings);}else{var d=document;var i=function(){i.c(arguments);};i.q=[];i.c=function(args){i.q.push(args);};w.Intercom=i;var l=function(){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='https://widget.intercom.io/widget/p36lo8p9';var x=d.getElementsByTagName('script')[0];x.parentNode.insertBefore(s,x);};if(document.readyState==='complete'){l();}else if(w.attachEvent){w.attachEvent('onload',l);}else{w.addEventListener('load',l,false);}}})(); </script> <script type="rocketlazyloadscript" data-rocket-type='text/javascript'> const lazyloadRunObserver = () => { const lazyloadBackgrounds = document.querySelectorAll( `.e-con.e-parent:not(.e-lazyloaded)` ); const lazyloadBackgroundObserver = new IntersectionObserver( ( entries ) => { entries.forEach( ( entry ) => { if ( entry.isIntersecting ) { let lazyloadBackground = entry.target; if( lazyloadBackground ) { lazyloadBackground.classList.add( 'e-lazyloaded' ); } lazyloadBackgroundObserver.unobserve( entry.target ); } }); }, { rootMargin: '200px 0px 200px 0px' } ); lazyloadBackgrounds.forEach( ( lazyloadBackground ) => { lazyloadBackgroundObserver.observe( lazyloadBackground ); } ); }; const events = [ 'DOMContentLoaded', 'elementor/lazyload/observe', ]; events.forEach( ( event ) => { document.addEventListener( event, lazyloadRunObserver ); } ); </script> <script type="rocketlazyloadscript"> (function () { var c = document.body.className; c = c.replace(/woocommerce-no-js/, 'woocommerce-js'); document.body.className = c; })(); </script> <link data-minify="1" rel='stylesheet' id='wc-blocks-style-css' href='https://sparkeditor.com/wp-content/cache/min/1/wp-content/plugins/woocommerce/assets/client/blocks/wc-blocks.css?ver=1734497555' media='all' /> <style id='block-style-variation-styles-inline-css'> :root :where(.wp-block-button.is-style-outline--1 .wp-block-button__link){background: transparent none;border-color: currentColor;border-width: 2px;border-style: solid;color: currentColor;padding-top: 0.667em;padding-right: 1.33em;padding-bottom: 0.667em;padding-left: 1.33em;} :root :where(.wp-block-button.is-style-outline--2 .wp-block-button__link){background: transparent none;border-color: currentColor;border-width: 2px;border-style: solid;color: currentColor;padding-top: 0.667em;padding-right: 1.33em;padding-bottom: 0.667em;padding-left: 1.33em;} :root :where(.wp-block-button.is-style-outline--3 .wp-block-button__link){background: transparent none;border-color: currentColor;border-width: 2px;border-style: solid;color: currentColor;padding-top: 0.667em;padding-right: 1.33em;padding-bottom: 0.667em;padding-left: 1.33em;} :root :where(.wp-block-button.is-style-outline--4 .wp-block-button__link){background: transparent none;border-color: currentColor;border-width: 2px;border-style: solid;color: currentColor;padding-top: 0.667em;padding-right: 1.33em;padding-bottom: 0.667em;padding-left: 1.33em;} :root :where(.wp-block-button.is-style-outline--5 .wp-block-button__link){background: transparent none;border-color: currentColor;border-width: 2px;border-style: solid;color: currentColor;padding-top: 0.667em;padding-right: 1.33em;padding-bottom: 0.667em;padding-left: 1.33em;} :root :where(.wp-block-button.is-style-outline--6 .wp-block-button__link){background: transparent none;border-color: currentColor;border-width: 2px;border-style: solid;color: currentColor;padding-top: 0.667em;padding-right: 1.33em;padding-bottom: 0.667em;padding-left: 1.33em;} </style> <style id='core-block-supports-inline-css'> .wp-elements-e37870e6b1b8b17dbca51393612ba250 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--white);}.wp-container-content-1{flex-grow:1;}.wp-container-core-group-is-layout-2{flex-wrap:nowrap;}.wp-elements-0e7624eb01ca5b3d028892b599916beb a:where(:not(.wp-element-button)){color:var(--wp--preset--color--white);}.wp-container-content-2{flex-grow:1;}.wp-container-core-group-is-layout-4{flex-wrap:nowrap;}.wp-elements-b54404ef35d4c71f4068517ab950ebc1 a:where(:not(.wp-element-button)){color:var(--wp--preset--color--white);}.wp-container-content-3{flex-grow:1;}.wp-container-core-group-is-layout-6{flex-wrap:nowrap;} </style> <link rel='stylesheet' id='e-sticky-css' href='https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/css/modules/sticky.min.css?ver=3.25.4' media='all' /> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/woocommerce/assets/js/sourcebuster/sourcebuster.min.js?ver=9.1.4" id="sourcebuster-js-js" data-rocket-defer defer></script> <script id="wc-order-attribution-js-extra"> var wc_order_attribution = {"params":{"lifetime":1.0000000000000000818030539140313095458623138256371021270751953125e-5,"session":30,"base64":false,"ajaxurl":"https:\/\/sparkeditor.com\/wp-admin\/admin-ajax.php","prefix":"wc_order_attribution_","allowTracking":true},"fields":{"source_type":"current.typ","referrer":"current_add.rf","utm_campaign":"current.cmp","utm_source":"current.src","utm_medium":"current.mdm","utm_content":"current.cnt","utm_id":"current.id","utm_term":"current.trm","utm_source_platform":"current.plt","utm_creative_format":"current.fmt","utm_marketing_tactic":"current.tct","session_entry":"current_add.ep","session_start_time":"current_add.fd","session_pages":"session.pgs","session_count":"udata.vst","user_agent":"udata.uag"}}; </script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/woocommerce/assets/js/frontend/order-attribution.min.js?ver=9.1.4" id="wc-order-attribution-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" id="rocket-browser-checker-js-after"> "use strict";var _createClass=function(){function defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}return function(Constructor,protoProps,staticProps){return protoProps&&defineProperties(Constructor.prototype,protoProps),staticProps&&defineProperties(Constructor,staticProps),Constructor}}();function _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}var RocketBrowserCompatibilityChecker=function(){function RocketBrowserCompatibilityChecker(options){_classCallCheck(this,RocketBrowserCompatibilityChecker),this.passiveSupported=!1,this._checkPassiveOption(this),this.options=!!this.passiveSupported&&options}return _createClass(RocketBrowserCompatibilityChecker,[{key:"_checkPassiveOption",value:function(self){try{var options={get passive(){return!(self.passiveSupported=!0)}};window.addEventListener("test",null,options),window.removeEventListener("test",null,options)}catch(err){self.passiveSupported=!1}}},{key:"initRequestIdleCallback",value:function(){!1 in window&&(window.requestIdleCallback=function(cb){var start=Date.now();return setTimeout(function(){cb({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-start))}})},1)}),!1 in window&&(window.cancelIdleCallback=function(id){return clearTimeout(id)})}},{key:"isDataSaverModeOn",value:function(){return"connection"in navigator&&!0===navigator.connection.saveData}},{key:"supportsLinkPrefetch",value:function(){var elem=document.createElement("link");return elem.relList&&elem.relList.supports&&elem.relList.supports("prefetch")&&window.IntersectionObserver&&"isIntersecting"in IntersectionObserverEntry.prototype}},{key:"isSlowConnection",value:function(){return"connection"in navigator&&"effectiveType"in navigator.connection&&("2g"===navigator.connection.effectiveType||"slow-2g"===navigator.connection.effectiveType)}}]),RocketBrowserCompatibilityChecker}(); </script> <script id="rocket-preload-links-js-extra"> var RocketPreloadLinksConfig = {"excludeUris":"\/(?:.+\/)?feed(?:\/(?:.+\/?)?)?$|\/(?:.+\/)?embed\/|\/checkout\/??(.*)|\/cart\/?|\/my-account\/??(.*)|\/(index.php\/)?(.*)wp-json(\/.*|$)|\/refer\/|\/go\/|\/recommend\/|\/recommends\/","usesTrailingSlash":"1","imageExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php","fileExt":"jpg|jpeg|gif|png|tiff|bmp|webp|avif|pdf|doc|docx|xls|xlsx|php|html|htm","siteUrl":"https:\/\/sparkeditor.com","onHoverDelay":"100","rateThrottle":"3"}; </script> <script type="rocketlazyloadscript" id="rocket-preload-links-js-after"> (function() { "use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e=function(){function i(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}return function(e,t,n){return t&&i(e.prototype,t),n&&i(e,n),e}}();function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var t=function(){function n(e,t){i(this,n),this.browser=e,this.config=t,this.options=this.browser.options,this.prefetched=new Set,this.eventTime=null,this.threshold=1111,this.numOnHover=0}return e(n,[{key:"init",value:function(){!this.browser.supportsLinkPrefetch()||this.browser.isDataSaverModeOn()||this.browser.isSlowConnection()||(this.regex={excludeUris:RegExp(this.config.excludeUris,"i"),images:RegExp(".("+this.config.imageExt+")$","i"),fileExt:RegExp(".("+this.config.fileExt+")$","i")},this._initListeners(this))}},{key:"_initListeners",value:function(e){-1<this.config.onHoverDelay&&document.addEventListener("mouseover",e.listener.bind(e),e.listenerOptions),document.addEventListener("mousedown",e.listener.bind(e),e.listenerOptions),document.addEventListener("touchstart",e.listener.bind(e),e.listenerOptions)}},{key:"listener",value:function(e){var t=e.target.closest("a"),n=this._prepareUrl(t);if(null!==n)switch(e.type){case"mousedown":case"touchstart":this._addPrefetchLink(n);break;case"mouseover":this._earlyPrefetch(t,n,"mouseout")}}},{key:"_earlyPrefetch",value:function(t,e,n){var i=this,r=setTimeout(function(){if(r=null,0===i.numOnHover)setTimeout(function(){return i.numOnHover=0},1e3);else if(i.numOnHover>i.config.rateThrottle)return;i.numOnHover++,i._addPrefetchLink(e)},this.config.onHoverDelay);t.addEventListener(n,function e(){t.removeEventListener(n,e,{passive:!0}),null!==r&&(clearTimeout(r),r=null)},{passive:!0})}},{key:"_addPrefetchLink",value:function(i){return this.prefetched.add(i.href),new Promise(function(e,t){var n=document.createElement("link");n.rel="prefetch",n.href=i.href,n.onload=e,n.onerror=t,document.head.appendChild(n)}).catch(function(){})}},{key:"_prepareUrl",value:function(e){if(null===e||"object"!==(void 0===e?"undefined":r(e))||!1 in e||-1===["http:","https:"].indexOf(e.protocol))return null;var t=e.href.substring(0,this.config.siteUrl.length),n=this._getPathname(e.href,t),i={original:e.href,protocol:e.protocol,origin:t,pathname:n,href:t+n};return this._isLinkOk(i)?i:null}},{key:"_getPathname",value:function(e,t){var n=t?e.substring(this.config.siteUrl.length):e;return n.startsWith("/")||(n="/"+n),this._shouldAddTrailingSlash(n)?n+"/":n}},{key:"_shouldAddTrailingSlash",value:function(e){return this.config.usesTrailingSlash&&!e.endsWith("/")&&!this.regex.fileExt.test(e)}},{key:"_isLinkOk",value:function(e){return null!==e&&"object"===(void 0===e?"undefined":r(e))&&(!this.prefetched.has(e.href)&&e.origin===this.config.siteUrl&&-1===e.href.indexOf("?")&&-1===e.href.indexOf("#")&&!this.regex.excludeUris.test(e.href)&&!this.regex.images.test(e.href))}}],[{key:"run",value:function(){"undefined"!=typeof RocketPreloadLinksConfig&&new n(new RocketBrowserCompatibilityChecker({capture:!0,passive:!0}),RocketPreloadLinksConfig).init()}}]),n}();t.run(); }()); </script> <script id="rocket_lazyload_css-js-extra"> var rocket_lazyload_css_data = {"threshold":"300"}; </script> <script id="rocket_lazyload_css-js-after"> !function o(n,c,a){function u(t,e){if(!c[t]){if(!n[t]){var r="function"==typeof require&&require;if(!e&&r)return r(t,!0);if(s)return s(t,!0);throw(e=new Error("Cannot find module '"+t+"'")).code="MODULE_NOT_FOUND",e}r=c[t]={exports:{}},n[t][0].call(r.exports,function(e){return u(n[t][1][e]||e)},r,r.exports,o,n,c,a)}return c[t].exports}for(var s="function"==typeof require&&require,e=0;e<a.length;e++)u(a[e]);return u}({1:[function(e,t,r){"use strict";{const c="undefined"==typeof rocket_pairs?[]:rocket_pairs,a=(("undefined"==typeof rocket_excluded_pairs?[]:rocket_excluded_pairs).map(t=>{var e=t.selector;document.querySelectorAll(e).forEach(e=>{e.setAttribute("data-rocket-lazy-bg-"+t.hash,"excluded")})}),document.querySelector("#wpr-lazyload-bg-container"));var o=rocket_lazyload_css_data.threshold||300;const u=new IntersectionObserver(e=>{e.forEach(t=>{t.isIntersecting&&c.filter(e=>t.target.matches(e.selector)).map(t=>{var e;t&&((e=document.createElement("style")).textContent=t.style,a.insertAdjacentElement("afterend",e),t.elements.forEach(e=>{u.unobserve(e),e.setAttribute("data-rocket-lazy-bg-"+t.hash,"loaded")}))})})},{rootMargin:o+"px"});function n(){0<(0<arguments.length&&void 0!==arguments[0]?arguments[0]:[]).length&&c.forEach(t=>{try{document.querySelectorAll(t.selector).forEach(e=>{"loaded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&"excluded"!==e.getAttribute("data-rocket-lazy-bg-"+t.hash)&&(u.observe(e),(t.elements||=[]).push(e))})}catch(e){console.error(e)}})}n(),function(){const r=window.MutationObserver;return function(e,t){if(e&&1===e.nodeType)return(t=new r(t)).observe(e,{attributes:!0,childList:!0,subtree:!0}),t}}()(document.querySelector("body"),n)}},{}]},{},[1]); </script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/themes/hello-elementor/assets/js/hello-frontend.min.js?ver=3.1.1" id="hello-theme-frontend-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/lib/sticky/jquery.sticky.min.js?ver=3.25.4" id="e-sticky-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/lib/smartmenus/jquery.smartmenus.min.js?ver=1.2.1" id="smartmenus-js" data-rocket-defer defer></script> <script id="wc-cart-fragments-js-extra"> var wc_cart_fragments_params = {"ajax_url":"\/wp-admin\/admin-ajax.php","wc_ajax_url":"\/?wc-ajax=%%endpoint%%","cart_hash_key":"wc_cart_hash_805861c2c643b9c7327f37434a9e80dd","fragment_name":"wc_fragments_805861c2c643b9c7327f37434a9e80dd","request_timeout":"5000"}; </script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/woocommerce/assets/js/frontend/cart-fragments.min.js?ver=9.1.4" id="wc-cart-fragments-js" defer data-wp-strategy="defer"></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/js/webpack-pro.runtime.min.js?ver=3.25.4" id="elementor-pro-webpack-runtime-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/elementor/assets/js/webpack.runtime.min.js?ver=3.25.10" id="elementor-webpack-runtime-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.25.10" id="elementor-frontend-modules-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-includes/js/dist/i18n.min.js?ver=5e580eb46a90c2b997e6" id="wp-i18n-js"></script> <script type="rocketlazyloadscript" id="wp-i18n-js-after"> wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } ); </script> <script type="rocketlazyloadscript" id="elementor-pro-frontend-js-before"> var ElementorProFrontendConfig = {"ajaxurl":"https:\/\/sparkeditor.com\/wp-admin\/admin-ajax.php","nonce":"a76c556d23","urls":{"assets":"https:\/\/sparkeditor.com\/wp-content\/plugins\/elementor-pro\/assets\/","rest":"https:\/\/sparkeditor.com\/wp-json\/"},"settings":{"lazy_load_background_images":true},"popup":{"hasPopUps":false},"shareButtonsNetworks":{"facebook":{"title":"Facebook","has_counter":true},"twitter":{"title":"Twitter"},"linkedin":{"title":"LinkedIn","has_counter":true},"pinterest":{"title":"Pinterest","has_counter":true},"reddit":{"title":"Reddit","has_counter":true},"vk":{"title":"VK","has_counter":true},"odnoklassniki":{"title":"OK","has_counter":true},"tumblr":{"title":"Tumblr"},"digg":{"title":"Digg"},"skype":{"title":"Skype"},"stumbleupon":{"title":"StumbleUpon","has_counter":true},"mix":{"title":"Mix"},"telegram":{"title":"Telegram"},"pocket":{"title":"Pocket","has_counter":true},"xing":{"title":"XING","has_counter":true},"whatsapp":{"title":"WhatsApp"},"email":{"title":"Email"},"print":{"title":"Print"},"x-twitter":{"title":"X"},"threads":{"title":"Threads"}},"woocommerce":{"menu_cart":{"cart_page_url":"https:\/\/sparkeditor.com\/cart\/","checkout_page_url":"https:\/\/sparkeditor.com\/checkout\/","fragments_nonce":"9c639259c4"}},"facebook_sdk":{"lang":"en_US","app_id":""},"lottie":{"defaultAnimationUrl":"https:\/\/sparkeditor.com\/wp-content\/plugins\/elementor-pro\/modules\/lottie\/assets\/animations\/default.json"}}; </script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/js/frontend.min.js?ver=3.25.4" id="elementor-pro-frontend-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-includes/js/jquery/ui/core.min.js?ver=1.13.3" id="jquery-ui-core-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" id="elementor-frontend-js-before"> var elementorFrontendConfig = {"environmentMode":{"edit":false,"wpPreview":false,"isScriptDebug":false},"i18n":{"shareOnFacebook":"Share on Facebook","shareOnTwitter":"Share on Twitter","pinIt":"Pin it","download":"Download","downloadImage":"Download image","fullscreen":"Fullscreen","zoom":"Zoom","share":"Share","playVideo":"Play Video","previous":"Previous","next":"Next","close":"Close","a11yCarouselWrapperAriaLabel":"Carousel | Horizontal scrolling: Arrow Left & Right","a11yCarouselPrevSlideMessage":"Previous slide","a11yCarouselNextSlideMessage":"Next slide","a11yCarouselFirstSlideMessage":"This is the first slide","a11yCarouselLastSlideMessage":"This is the last slide","a11yCarouselPaginationBulletMessage":"Go to slide"},"is_rtl":false,"breakpoints":{"xs":0,"sm":480,"md":768,"lg":1025,"xl":1440,"xxl":1600},"responsive":{"breakpoints":{"mobile":{"label":"Mobile Portrait","value":767,"default_value":767,"direction":"max","is_enabled":true},"mobile_extra":{"label":"Mobile Landscape","value":880,"default_value":880,"direction":"max","is_enabled":false},"tablet":{"label":"Tablet Portrait","value":1024,"default_value":1024,"direction":"max","is_enabled":true},"tablet_extra":{"label":"Tablet Landscape","value":1200,"default_value":1200,"direction":"max","is_enabled":false},"laptop":{"label":"Laptop","value":1366,"default_value":1366,"direction":"max","is_enabled":false},"widescreen":{"label":"Widescreen","value":2400,"default_value":2400,"direction":"min","is_enabled":false}},"hasCustomBreakpoints":false},"version":"3.25.10","is_static":false,"experimentalFeatures":{"e_font_icon_svg":true,"additional_custom_breakpoints":true,"container":true,"e_swiper_latest":true,"e_nested_atomic_repeaters":true,"e_optimized_control_loading":true,"e_onboarding":true,"e_css_smooth_scroll":true,"theme_builder_v2":true,"hello-theme-header-footer":true,"home_screen":true,"nested-elements":true,"editor_v2":true,"e_element_cache":true,"link-in-bio":true,"floating-buttons":true,"mega-menu":true},"urls":{"assets":"https:\/\/sparkeditor.com\/wp-content\/plugins\/elementor\/assets\/","ajaxurl":"https:\/\/sparkeditor.com\/wp-admin\/admin-ajax.php","uploadUrl":"https:\/\/sparkeditor.com\/wp-content\/uploads"},"nonces":{"floatingButtonsClickTracking":"b2681acc11"},"swiperClass":"swiper","settings":{"page":[],"editorPreferences":[]},"kit":{"active_breakpoints":["viewport_mobile","viewport_tablet"],"global_image_lightbox":"yes","lightbox_enable_counter":"yes","lightbox_enable_fullscreen":"yes","lightbox_enable_zoom":"yes","lightbox_enable_share":"yes","lightbox_title_src":"title","lightbox_description_src":"description","woocommerce_notices_elements":[],"hello_header_logo_type":"title","hello_header_menu_layout":"horizontal","hello_footer_logo_type":"logo"},"post":{"id":843,"title":"Step-by-Step%20Tutorial%3A%20Using%20a%20Drag%20and%20Drop%20Email%20Builder%20for%20WooCommerce","excerpt":"","featuredImage":"https:\/\/sparkeditor.com\/wp-content\/uploads\/2024\/08\/Step-by-step-tutorial-1024x513.png"}}; </script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/elementor/assets/js/frontend.min.js?ver=3.25.10" id="elementor-frontend-js" data-rocket-defer defer></script> <script type="rocketlazyloadscript" data-rocket-src="https://sparkeditor.com/wp-content/plugins/elementor-pro/assets/js/elements-handlers.min.js?ver=3.25.4" id="pro-elements-handlers-js" data-rocket-defer defer></script> <!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WF4K8HQK" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> <script>window.lazyLoadOptions=[{elements_selector:"img[data-lazy-src],.rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,callback_loaded:function(element){if(element.tagName==="IFRAME"&&element.dataset.rocketLazyload=="fitvidscompatible"){if(element.classList.contains("lazyloaded")){if(typeof window.jQuery!="undefined"){if(jQuery.fn.fitVids){jQuery(element).parent().fitVids()}}}}}},{elements_selector:".rocket-lazyload",data_src:"lazy-src",data_srcset:"lazy-srcset",data_sizes:"lazy-sizes",class_loading:"lazyloading",class_loaded:"lazyloaded",threshold:300,}];window.addEventListener('LazyLoad::Initialized',function(e){var lazyLoadInstance=e.detail.instance;if(window.MutationObserver){var observer=new MutationObserver(function(mutations){var image_count=0;var iframe_count=0;var rocketlazy_count=0;mutations.forEach(function(mutation){for(var i=0;i<mutation.addedNodes.length;i++){if(typeof mutation.addedNodes[i].getElementsByTagName!=='function'){continue} if(typeof mutation.addedNodes[i].getElementsByClassName!=='function'){continue} images=mutation.addedNodes[i].getElementsByTagName('img');is_image=mutation.addedNodes[i].tagName=="IMG";iframes=mutation.addedNodes[i].getElementsByTagName('iframe');is_iframe=mutation.addedNodes[i].tagName=="IFRAME";rocket_lazy=mutation.addedNodes[i].getElementsByClassName('rocket-lazyload');image_count+=images.length;iframe_count+=iframes.length;rocketlazy_count+=rocket_lazy.length;if(is_image){image_count+=1} if(is_iframe){iframe_count+=1}}});if(image_count>0||iframe_count>0||rocketlazy_count>0){lazyLoadInstance.update()}});var b=document.getElementsByTagName("body")[0];var config={childList:!0,subtree:!0};observer.observe(b,config)}},!1)</script><script data-no-minify="1" async src="https://sparkeditor.com/wp-content/plugins/wp-rocket/assets/js/lazyload/17.8.3/lazyload.min.js"></script> <script>var rocket_beacon_data = {"ajax_url":"https:\/\/sparkeditor.com\/wp-admin\/admin-ajax.php","nonce":"d1a01ea928","url":"https:\/\/sparkeditor.com\/blog\/drag-and-drop-email-builder-for-woocommerce","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://sparkeditor.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body> </html> <!-- This website is like a Rocket, isn't it? Performance optimized by WP Rocket. Learn more: https://wp-rocket.me -->

Pages: 1 2 3 4 5 6 7 8 9 10