CINXE.COM

Pragmatica - Free Website Design Cost Calculator

<!DOCTYPE html><!-- Last Published: Mon Mar 10 2025 21:17:11 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="www.pragmati.ca" data-wf-page="65bf2bdf355b5d49f9daff42" data-wf-site="6307d1ae62c4c81c7c9153a4"><head><meta charset="utf-8"/><title>Pragmatica - Free Website Design Cost Calculator</title><meta content="Our online Website Estimate tool will give you a rough quote for your project without talking to a sales person!" name="description"/><meta content="Pragmatica - Free Website Design Cost Calculator" property="og:title"/><meta content="Our online Website Estimate tool will give you a rough quote for your project without talking to a sales person!" property="og:description"/><meta content="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/63091192c9a56a0a583492c5_Plentitud%20Web%20design%20Vancouver.png" property="og:image"/><meta content="Pragmatica - Free Website Design Cost Calculator" property="twitter:title"/><meta content="Our online Website Estimate tool will give you a rough quote for your project without talking to a sales person!" property="twitter:description"/><meta content="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/63091192c9a56a0a583492c5_Plentitud%20Web%20design%20Vancouver.png" property="twitter:image"/><meta property="og:type" content="website"/><meta content="summary_large_image" name="twitter:card"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/css/pragmatica-sub.webflow.7a378b302.min.css" rel="stylesheet" type="text/css"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link href="https://fonts.gstatic.com" rel="preconnect" crossorigin="anonymous"/><script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js" type="text/javascript"></script><script type="text/javascript">WebFont.load({ google: { families: ["Montserrat:100,100italic,200,200italic,300,300italic,400,400italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic","Oswald:200,300,400,500,600,700","Lato:100,100italic,300,300italic,400,400italic,700,700italic,900,900italic","Merriweather:300,300italic,400,400italic,700,700italic,900,900italic","PT Sans:400,400italic,700,700italic","DM Sans:regular,500,700"] }});</script><script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script><link href="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307d1ae62c4c825df9153d8_branding-x-template-favicon.svg" rel="shortcut icon" type="image/x-icon"/><link href="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307d1ae62c4c872c09153d9_branding-x-template-webclip.svg" rel="apple-touch-icon"/><link href="https://www.pragmati.ca/website-estimate" rel="canonical"/><script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-211910775-1"></script><script type="text/javascript">window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'UA-211910775-1', {'anonymize_ip': false});</script><!--<html lang = "en">--> <meta name="facebook-domain-verification" content="ma8dd2d0omd92qilr1q3sd7yqnr64k" /> <meta name="google-site-verification" content="mx9cSoXmvNtYQ1KEdCPVFeE8J5FM0xhEznEBYDS_9sE" /> <link rel=”canonical“ href=”https://pragmati.ca/” /> <meta charset="UTF-8"> <!-- Fathom - beautiful, simple website analytics --> <script src="https://cdn.usefathom.com/script.js" data-site="VDRXMINR" defer></script> <!-- / Fathom --> <!-- Google tag (gtag.js) --> <script async src="https://www.googletagmanager.com/gtag/js?id=AW-16692132371"> </script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-16692132371'); </script> <script> (function(w,d,t,r,u) { var f,n,i; w[u]=w[u]||[],f=function() { var o={ti:"97147868", enableAutoSpaTracking: true}; o.q=w[u],w[u]=new UET(o),w[u].push("pageLoad") }, n=d.createElement(t),n.src=r,n.async=1,n.onload=n.onreadystatechange=function() { var s=this.readyState; s&&s!=="loaded"&&s!=="complete"||(f(),n.onload=n.onreadystatechange=null) }, i=d.getElementsByTagName(t)[0],i.parentNode.insertBefore(n,i) }) (window,document,"script","//bat.bing.com/bat.js","uetq"); </script> <link rel=”canonical“ href=”https://plentitud.com/” /> <!-- These are the style sheets for the range slider www.flowbase.co --> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.2/css/ion.rangeSlider.min.css"> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.2/css/ion.rangeSlider.skinFlat.min.css"> <!-- These are some custom styles. Find the purple #hex to change colour --> <style> .irs { width: 100%; height: 50px; margin-top: 0px; margin-bottom: 30px; min-width: 20px } .irs-with-grid { height: 85px } .irs-line { height: 12px; top: 35px } .irs-line-left { height: 12px; background-position: 0 -30px } .irs-line-mid { height: 12px; background-position: 0 0 } .irs-line-right { height: 12px; background-position: 100% -30px } .irs-bar { height: 12px; top: 35px; background-position: 0 -60px; background-color: #6c33da; background-image: none;!important } .irs-bar-edge { top: 35px; height: 12px; width: 15px; background-color: #6c33da; background-image: none;!important -webkit-border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; border-top-left-radius: 4px; border-bottom-left-radius: 4px } .irs-shadow { height: 3px; top: 35px; background: #000; opacity: .25 } .lt-ie9 .irs-shadow { filter: alpha(opacity=25) } .irs-slider { width: 25px; height: 25px; top: 29px; background-position: 0 -120px; background-image: none; background-color: #ccc; border-radius: 100%; transition: background-color 200ms ease-in } .irs-slider.state_hover, .irs-slider:hover { width: 25px; height: 25px; top: 29px; background-position: 0 -120px; background-image: none; background-color: #6c33da; border-radius: 100% } .irs-min, .irs-max { color: #999; font-size: 0.9em; line-height: 1em; text-shadow: none; top: 0; padding: 5px; margin-bottom: 25px; background: #e1e4e9; -moz-border-radius: 4px; border-radius: 4px } .irs-from, .irs-to, .irs-single { color: #fff; font-size: 0.9em; line-height: 1em; text-shadow: none; padding: 5px; margin-bottom: 25px; background: #6c33da; -moz-border-radius: 4px; border-radius: 4px } .irs-from:after, .irs-to:after, .irs-single:after { position: absolute; display: block; content: ""; bottom: -5px; left: 50%; width: 0; height: 0; margin-left: -3px; overflow: hidden; border: 3px solid transparent; border-top-color: #6c33da } .irs-grid-pol { background: #e1e4e9 } .irs-grid-text { color: #999 } /* Getting rid of that ugly textarea resize-corner */ textarea { resize: none } /* textarea scrollbar fixings */ textarea.area.field.w-input::-webkit-scrollbar { width: 14px; height: 18px; } textarea.area.field.w-input::-webkit-scrollbar-thumb { height: 6px; border: 4px solid rgba(0, 0, 0, 0); background-clip: padding-box; -webkit-border-radius: 7px; background-color: #6c33da; -webkit-box-shadow: inset -1px -1px 0px rgba(0, 0, 0, 0.05), inset 1px 1px 0px rgba(0, 0, 0, 0.05); } textarea.area.field.w-input::-webkit-scrollbar-button { width: 0; height: 0; display: none; } textarea.area.field.w-input::-webkit-scrollbar-corner { background-color: transparent; } </style><script src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4%2F652d31f3dc22d7b4ee708e44%2F6652c4736dc880dde0e5a786%2Fclarity_script-0.1.1.js" type="text/javascript"></script><script type="text/javascript">window.__WEBFLOW_CURRENCY_SETTINGS = {"currencyCode":"USD","symbol":"$","decimal":".","fractionDigits":2,"group":",","template":"{{wf {\"path\":\"symbol\",\"type\":\"PlainText\"} }} {{wf {\"path\":\"amount\",\"type\":\"CommercePrice\"} }} {{wf {\"path\":\"currencyCode\",\"type\":\"PlainText\"} }}","hideDecimalForWholeNumbers":false};</script></head><body><div data-w-id="24aa901a-6286-8e88-5306-48603f0589b2" data-animation="default" data-collapse="medium" data-duration="400" data-easing="ease" data-easing2="ease" role="banner" class="nav-bar w-nav"><div class="container-default w-container"><div class="nav-bar-wrapper"><div class="split-content"><a href="/" class="brand w-nav-brand"><img loading="eager" src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/654008818cf0efb47f18f408_Pragmatica%20long%20logo%20PNG.png" alt="Pragmatica Logo" class="nav-bar-logo"/></a></div><div class="split-content nav-bar-right"><nav role="navigation" class="nav-bar-menu w-nav-menu"><div class="wrapper nav-bar-menu-content-wrapper"><div class="nav-column"><div class="nav-wrapper"><ul role="list" class="nav-bar-menu-list w-list-unstyled"><li class="nav-bar-item"><a href="/" class="nav-bar-link">Home</a></li><li class="nav-bar-item"><a href="/about" class="nav-bar-link">About</a></li><li class="nav-bar-item"><a href="/services" class="nav-bar-link">SERVICES</a></li><li class="nav-bar-item"><a href="/portfolio" class="nav-bar-link">Portfolio</a></li><li class="nav-bar-item"><a href="/contact" class="nav-bar-link">CONTACT</a></li></ul></div></div><div class="nav-column right"><div class="nav-wrapper"></div></div></div></nav><div class="wg-element-wrapper sw3"><a lang="en" data-w-id="24aa901a-6286-8e88-5306-48603f0589d0" href="#" class="wg-selector-2 s1 w-inline-block"><div class="wg-selector-2-fill f1"></div><div class="wg-selector2-text-lang1">EN</div></a><a lang="fr" data-w-id="24aa901a-6286-8e88-5306-48603f0589d4" href="#" class="wg-selector-2 s2 w-inline-block"><div class="wg-selector-2-fill f2"></div><div class="wg-selector2-text-lang2">FR</div></a></div><div class="menu-button w-nav-button"><div class="menu-button-lines-wrapper"><div class="menu-button-line-top"></div><div class="menu-button-line-bottom"></div></div></div></div></div></div></div><div class="page-wrapper"><div class="form-full"><div id="flowbaseSlider" class="form-wrapper w-form"><form id="wf-form-Project-Estimate" name="wf-form-Project-Estimate" data-name="Project Estimate" method="get" class="form-2" data-wf-page-id="65bf2bdf355b5d49f9daff42" data-wf-element-id="1d10bb1b-fcda-396b-caa2-a7d4be265605"><div data-delay="4000" data-animation="outin" class="slider-2 w-slider" data-autoplay="false" data-easing="ease-out" data-hide-arrows="true" data-disable-swipe="true" data-autoplay-limit="0" data-nav-spacing="3" data-duration="600" data-infinite="false"><div class="mask-2 w-slider-mask"><div class="slide-2 w-slide"><div class="slide-wrapper"><div class="slide-banner"><div class="banner-content-7"><div class="quote-wrap"><h2 class="banner-h3">Website Quote Request</h2><p class="paragraph-intro">If you have a project in mind that you would like us to quote on please fill out as much of the form as possible. After we review your submission we will get back to you with our offer.</p><div class="notice"><div><span class="text-span-5">Please note:</span> This estimate cannot be considered as a legal binding. Our representative will get in touch with you shortly, to discuss your requirements.</div></div></div></div></div><div class="slide-content"><div class="form-content"><div class="form-title-wrap"><div class="form-section-title">Let&#x27;s start with your name.</div><p class="form-paragraph">Please fill in the details below so that we can get in <br/>touch with you.<br/></p></div><div class="form-wrap extra-space"><label for="Name" class="field-label-2">Enter your name</label><input class="text-field-2 w-input" maxlength="256" name="Name" data-name="Name" placeholder="eg. Sarah Smith" type="text" id="Name"/></div><div class="button-wrap-2"><a href="#" class="slider-right-5 w-button">Get Started</a></div><div class="slide-counter"><div class="dot active-dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div></div></div></div></div></div><div class="slide-2 w-slide"><div class="slide-wrapper"><div class="slide-banner"><div class="banner-content-7"><div class="quote-wrap"><div class="text-block">&quot;</div><p class="paragraph-4">Tell us about your project, get a quick estimate and a plan for making it live. We&#x27;ll help you build a fast and modern website, or ecommerce store that will bring you customers and stay on top of your competition. </p><div class="author-testimonial"><img alt="Most functionality is already built in and will not require a lot of developer intervention." src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307e49e1b7a3afeeb75f109_avatar-02.png" class="author-image"/><div><div class="author-name-2">Nataly S.</div><div class="text-block-2">Customer support</div></div></div></div></div></div><div class="slide-content"><div class="form-content"><div class="form-title-wrap"><div class="form-section-title">What services you need help with?</div><p class="form-paragraph">Please let us know what type of support you need.<br/></p></div><div class="form-item-wrapper"><label class="w-checkbox checkbox-field-3 checkbox-base"><input id="Branding" type="checkbox" name="Branding" data-name="Branding" data-w-id="b11109f1-9bdb-e5eb-a32b-06fb8066ac12" class="w-checkbox-input checkbox"/><div class="checkbox-icon-2"><img alt="TeamWork - Branding X Webflow Template" src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307d1ae62c4c83acd91540e_icon-2-our-values-branding-x-template.svg" class="icon"/></div><div class="checkbox-text-wrapper"><h4 class="checkbox-h4">Branding</h4><div class="checkbox-text-2">Brand Discovery, Competitive Audit, Color Palette, Typeface, Logo etc.</div></div><span for="Branding" class="checkbox-title w-form-label">Yes!</span></label><label class="w-checkbox checkbox-field-3 checkbox-base"><input id="Web-Design" type="checkbox" name="Web-Design" data-name="Web Design" data-w-id="98d8d90c-0871-7abf-de0b-e8c458f66872" class="w-checkbox-input checkbox"/><div class="checkbox-icon-2"><img alt="Innovation - Branding X Webflow Template" src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307d1ae62c4c81d77915412_icon-3-our-values-branding-x-template.svg" class="icon"/></div><div class="checkbox-text-wrapper"><h4 class="checkbox-h4">Web Design</h4><div class="checkbox-text-2">Website mockup, UI/UX management, Illustrations, wireframes etc.</div></div><span for="Web-Design" class="checkbox-title w-form-label">Yes!</span></label><label class="w-checkbox checkbox-field-3 checkbox-base"><input id="Web-Development" type="checkbox" name="Web-Development" data-name="Web Development" data-w-id="6317bc4e-4180-dd08-0e24-0d0dce4af371" class="w-checkbox-input checkbox"/><div class="checkbox-icon-2"><img alt="Integrity - Branding X Webflow Template" src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307d1ae62c4c810fe915411_icon-6-our-values-branding-x-template.svg" class="icon"/></div><div class="checkbox-text-wrapper"><h4 class="checkbox-h4">Web Development</h4><div class="checkbox-text-2">WordPress, Shopify, Headless or Custom Development, API integration etc.</div></div><span for="Web-Development" class="checkbox-title w-form-label">Yes!</span></label><label class="w-checkbox checkbox-field-3 checkbox-base"><input id="SEO" type="checkbox" name="SEO" data-name="SEO" data-w-id="2775e593-2ee2-95ac-e51d-2d16133887fc" class="w-checkbox-input checkbox"/><div class="checkbox-icon-2"><img alt="Creativity - Branding X Webflow Template" src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307d1ae62c4c83f08915410_icon-1-our-values-branding-x-template.svg" class="icon"/></div><div class="checkbox-text-wrapper"><h4 class="checkbox-h4">Search Engine Optimization</h4><div class="checkbox-text-2">Competitor analysis, Semantic Core, Position Parsing, On-site optimization etc.</div></div><span for="SEO" class="checkbox-title w-form-label">Yes!</span></label></div><div class="button-wrap-2"><a href="#" class="slider-left-3 w-inline-block"><img alt="View the average cost for upfront and ongoing website expenses, by business type, below." src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307e49e1b7a3a182475f106_arrow.svg" class="arrow-2"/></a><a href="#" class="slider-right-5 w-button">Next Step</a></div><div class="slide-counter"><div class="dot"></div><div class="dot"></div><div class="dot active-dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div></div></div></div></div></div><div class="slide-2 w-slide"><div class="slide-wrapper"><div class="slide-banner"><div class="banner-content-7"><div class="quote-wrap"><div class="text-block">&quot;</div><p class="paragraph-4">Your website acts as the lobby for your organization, and your mission and values are there for all to see. When it comes to a website, how much you put into the project paves the way for how much you’ll make. If you start with realistic expectations for how much it may cost to launch a successful website, you’ll be far more likely to succeed.</p><div class="author-testimonial"><img alt="" src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307e49e1b7a3ac7ec75f111_photo-1619380061814-58f03707f082.jpg" class="author-image"/><div><div class="author-name-2">Jesse M.</div><div class="text-block-2">CTO</div></div></div></div></div></div><div class="slide-content"><div class="form-content"><div class="form-title-wrap"><div class="form-section-title">Please select your budget.</div><p class="form-paragraph">Please let us know the budget for your project considering desired specifications.<br/></p></div><div class="form-item-wrapper fixed-height"><input class="price-field w-input" maxlength="256" name="price" data-name="price" placeholder="" type="text" id="range_price"/></div><div class="button-wrap-2"><a href="#" class="slider-left-3 w-inline-block"><img alt="View the average cost for upfront and ongoing website expenses, by business type, below." src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307e49e1b7a3a182475f106_arrow.svg" class="arrow-2"/></a><a href="#" class="slider-right-5 w-button">Next Step</a></div><div class="slide-counter"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot active-dot"></div><div class="dot"></div></div></div></div></div></div><div class="slide-2 w-slide"><div class="slide-wrapper"><div class="slide-banner"><div class="banner-content-7"><div class="quote-wrap"><h1 class="banner-h3">Website Quote Request</h1><p class="paragraph-intro">Attracting your audience is hard enough. Grabbing their interest and retaining them is even more difficult. It’s important to build your website so that user frustration is kept to a minimum, thereby maximizing customer retention.</p><div class="notice"><div class="text-block-25"><span class="text-span-5">Please note:</span> This comment section is required, but we may need more details to conduct an accurate estimate.</div></div></div></div></div><div class="slide-content"><div class="form-content"><div class="form-title-wrap"><div class="form-section-title">Please let us know what is important for you.</div><p class="form-paragraph">Please provide your comments below (what industry you are in, goals, other specifics etc.) so that we can understand your goals and tailor our approach to meet your needs<br/></p></div><div class="form-wrap extra-space"><label for="field" class="field-label-2">Leave a comment below (required)</label><textarea id="field" name="field" maxlength="5000" data-name="field" placeholder="Your comment" required="" class="w-input"></textarea></div><div class="button-wrap-2"><a href="#" class="slider-right-5 w-button">Next Step</a></div><div class="slide-counter"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot active-dot"></div></div></div></div></div></div><div class="slide-2 w-slide"><div class="slide-wrapper"><div class="slide-banner"><div class="banner-content-7"><div class="quote-wrap"><div class="text-block">&quot;</div><p class="paragraph-4">You will be assigned a project manager who will be your main point of interaction. It is the project manager’s duty to translate what you want into a concise set of directives for the SMEs. To elaborate, our web design process is broken down into several phases of work. During each phase, both the project manager and designer will have their own set of responsibilities.</p><div class="author-testimonial"><img alt="" src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307e49e1b7a3a143b75f10c_photo-1557862921-37829c790f19.jpg" class="author-image"/><div><div class="author-name-2">Jason S.</div><div class="text-block-2">CEO</div></div></div></div></div></div><div class="slide-content"><div class="form-content"><div class="form-title-wrap"><div class="form-section-title">Complete Submission</div><p class="form-paragraph">Thanks for taking time to complete this form. <br/>Please enter your email below and we will be in contact within 24 hours. <br/></p></div><div class="form-wrap extra-space"><label for="Email" class="field-label-2">Enter your email</label><input class="text-field-2 w-input" maxlength="256" name="Email" data-name="Email" placeholder="hello@yourwebsite.com" type="email" id="Email" required=""/></div><div class="button-wrap-2"><a href="#" class="slider-left-3 w-inline-block"><img alt="View the average cost for upfront and ongoing website expenses, by business type, below." src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/6307e49e1b7a3a182475f106_arrow.svg" class="arrow-2"/></a><input type="submit" data-wait="Working on that..." wait="Calculating Nash Equilibrium..." data-ix="show-content-onslide" class="submit-button w-button" value="Complete Submission"/></div><div class="slide-counter"><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot"></div><div class="dot active-dot"></div></div></div></div></div></div></div><div class="previous-placeholder w-slider-arrow-left"><img alt="Of course, with web design and development, you can choose to work with a freelancer, third-party website builder, or web design agency. " src="https://cdn.prod.website-files.com/5d490b958f3da171d7abc6ae/5d491ad43cf49e9e54ecbc74_arrow.svg" class="arrow-2"/><div class="previous-button">Previous</div></div><div class="next-placeholder w-slider-arrow-right"><div class="next-button">Next step</div></div></div></form><div class="success-message-2 w-form-done"><div class="text-block-24">Congratulations! You are one step closer to bring your idea to life.<br/>We&#x27;ll get back to you shortly!</div></div><div class="error-message-2 w-form-fail"><div>Oops! Something went wrong while submitting the form</div></div></div></div></div><script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=6307d1ae62c4c81c7c9153a4" type="text/javascript" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script><script src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/js/webflow.schunk.90690657670f5b00.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/js/webflow.schunk.938a4b8568ce8638.js" type="text/javascript"></script><script src="https://cdn.prod.website-files.com/6307d1ae62c4c81c7c9153a4/js/webflow.79b95261.cbda437f1b3f81ea.js" type="text/javascript"></script> <!-- This script lets us use any component for our arrows. This way we can position freely --> <script> var Webflow = Webflow || []; Webflow.push(function() { var l = $('#flowbaseSlider .w-slider-arrow-left'); var r = $('#flowbaseSlider .w-slider-arrow-right'); $('#flowbaseSlider') .on('click', '.slider-left-3', function() { l.trigger('tap'); }) .on('click', '.slider-right-5', function() { r.trigger('tap'); }); }); </script> <!-- Here you can change to date slider and manage attributes about it --> <script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.2/js/ion.rangeSlider.min.js"></script> <script> $("#range_price").ionRangeSlider({ grid: true, min: 10000, max: 100000, from: 17050, prefix: "$", postfix: "+", hide_min_max: true, decorate_both: true, force_edges: true, step: 1000 }); $("#range_date").ionRangeSlider({ grid: true, min: 0, max: 12, from_min: 0.5, from: 1, prefix: "M", postfix: " month(s)", hide_min_max: true, force_edges: true, step: 0.5 }); </script> <script type="text/javascript" src="https://cdn.weglot.com/weglot.min.js"></script> <script> // init Weglot Weglot.initialize({ api_key: 'wg_7a6b646f6a1ab442c6c43047759454bd2' }); // on Weglot init Weglot.on('initialized', ()=>{ // get the current active language const currentLang = Weglot.getCurrentLang(); // if the current active language link exists if(document.querySelector('.wg-element-wrapper.sw3 [lang='+currentLang+']')){ // click the link document.querySelector('.wg-element-wrapper.sw3 [lang='+currentLang+']').click(); } }); // for each of the .wg-element-wrapper language links document.querySelectorAll('.wg-element-wrapper.sw3 [lang]').forEach((link)=>{ // add a click event listener link.addEventListener('click', function(e){ // prevent default e.preventDefault(); // switch current active language after a setTimeout setTimeout(()=>Weglot.switchTo(this.getAttribute('lang')),600); }); }); </script> </body></html>

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