tag:webdesign.tutsplus.com,2005:/postsEnvato Tuts+ Web Design2024-03-18T09:38:00Ztag:webdesign.tutsplus.com,2005:PostPresenter/cms-1086082024-03-13T19:37:40+00:0012 Strategies for Making Your Freelance Web Business a Success<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="i5es9"><p><span>A freelance web design business doesn’t thrive solely because of your creative talents. While that’s a huge part of it, the way you set up and manage your business matters a good deal, too.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="itrq">
<p><span>You might not have given it much thought up until this point. Or perhaps you have, but you find that the logistics of managing your freelance business keep getting in the way of you doing actual design work. </span></p>
<p><a href="https://tutsplus.com/"><span>Tuts+</span></a><span> is chock-full of guides and tutorials that can help you become a better web designer. But this site also contains useful resources to help you get your web design business in order. </span></p>
</div><div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents">
<div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock" id="i5zvp"><p>Here are 12 strategies to help you manage clients, manage your work-life balance, manage your money, and more:</p></div>
<ul class="visual-toc-list toc-ordered-list visual-toc__regular-theme div-container visual-toc-list__overflow" start="0">
<div class="visual-toc-column div-container">
<li class="toc-item-title"><a href="#toc-z4ou-choosing-the-right-niche"><span class="visual-toc__heading-title content-container">Choose the Right Niche</span></a></li>
<li class="toc-item-title"><a href="#toc-rocp-the-value-of-a-web-design-contract"><span class="visual-toc__heading-title content-container">Create a Web Design Contract</span></a></li>
<li class="toc-item-title"><a href="#toc-j4q2-tips-for-better-client-onboarding"><span class="visual-toc__heading-title content-container">Use a Client Onboarding Process</span></a></li>
<li class="toc-item-title"><a href="#toc-su6b-tips-for-better-client-offboarding"><span class="visual-toc__heading-title content-container">Use a Client Offboarding Process</span></a></li>
<li class="toc-item-title"><a href="#toc-yzok-handling-negative-client-feedback"><span class="visual-toc__heading-title content-container">Learn How to Deal with Negative Feedback</span></a></li>
<li class="toc-item-title"><a href="#toc-hzd2-maintaining-a-healthy-work-life-balance"><span class="visual-toc__heading-title content-container">Maintain a Healthy Work-life Balance</span></a></li>
</div>
<div class="visual-toc-column div-container">
<li class="toc-item-title"><a href="#toc-1ucm-taking-time-off"><span class="visual-toc__heading-title content-container">Take Time Off</span></a></li>
<li class="toc-item-title"><a href="#toc-nifu-why-you-need-a-business-budget"><span class="visual-toc__heading-title content-container">Build a Business Budget</span></a></li>
<li class="toc-item-title"><a href="#toc-xdbu-diversifying-your-income"><span class="visual-toc__heading-title content-container">Diversify Your Income</span></a></li>
<li class="toc-item-title"><a href="#toc-b19e-increasing-income-with-monthly-retainers"><span class="visual-toc__heading-title content-container">Increase Income with Monthly Retainers</span></a></li>
<li class="toc-item-title"><a href="#toc-tk7u-tips-for-doing-your-taxes"><span class="visual-toc__heading-title content-container">Prepare Your Taxes Year-round</span></a></li>
<li class="toc-item-title"><a href="#toc-v0qq-recession-proofing-your-business"><span class="visual-toc__heading-title content-container">Recession-proof Your Business</span></a></li>
</div>
</ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iqco"><h2 id="toc-z4ou-choosing-the-right-niche">
<span class="sectionnum">1.</span> Choose the Right Niche</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ixq1z">
<p><span>Web designers that specialize have an easier time marketing themselves and finding clients. Why is that? </span></p>
<p><span>Instead of trying to sell yourself as all things to everyone, your niche helps you connect with prospects looking to hire someone with your special set of skills or focus. And the narrower your niche, the more competitive you become. </span></p>
<p><span>This post will help you find the perfect (i.e. profitable) niche for your interests and skills.</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/how-to-choose-the-right-niche-for-your-web-design-business--cms-106937"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/106937/preview_image/niche.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/106937/preview_image/niche.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/106937/preview_image/niche.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/106937/preview_image/niche.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/106937/preview_image/niche.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/106937/preview_image/niche.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Choose the Right Niche for Your Web Design Business</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">16 May 2023</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i43rq"><h2 id="toc-rocp-the-value-of-a-web-design-contract">
<span class="sectionnum">2.</span> Create a Web Design Contract</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="igzy8">
<p><span>Contracts aren’t just for big agencies and enterprises. Web designers benefit a good deal from using contracts. </span></p>
<p><span>A well-written web design contract will show clients that you mean business while also putting their minds at ease. At the same time, a contract protects you from finicky clients, clients that go MIA as well as non-paying clients. To ensure your business is protected </span><em><span>and </span></em><span>your client benefits from it, there are 14 things to include in your contract.</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/web-design-contract--cms-107985"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/107985/preview_image/web_design_contract_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/107985/preview_image/web_design_contract_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/107985/preview_image/web_design_contract_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/107985/preview_image/web_design_contract_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/107985/preview_image/web_design_contract_cover_image.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/107985/preview_image/web_design_contract_cover_image.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Why You Should Use a Web Design Contract (Plus What to Include In It)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">15 Nov 2023</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ijn1r"><h2 id="toc-j4q2-tips-for-better-client-onboarding">
<span class="sectionnum">3.</span> Use a Client Onboarding Process</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ieawa">
<p><span>If you’ve ever wished your design projects went more smoothly, the missing link could be client onboarding. This process is about more than having a chat with your client about the project and setting their expectations for what’s to come. Though that happens, too.</span></p>
<p><span>In this post, you’ll find a six-step client onboarding process and template, complete with tools and to-dos for each step. This process will ensure that everyone is on the same page and the most important things are squared away before you start working.</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/handle-design-projects-like-a-pro-with-a-client-onboarding-process--cms-107260"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/107260/preview_image/onboarding_checklist_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/107260/preview_image/onboarding_checklist_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/107260/preview_image/onboarding_checklist_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/107260/preview_image/onboarding_checklist_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/107260/preview_image/onboarding_checklist_cover_image.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/107260/preview_image/onboarding_checklist_cover_image.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Handle Design Projects Like a Pro with a Client Onboarding Process
</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">04 Aug 2023</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="izlnc"><h2 id="toc-su6b-tips-for-better-client-offboarding">
<span class="sectionnum">4.</span> Use a Client Offboarding Process</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iadyg">
<p><span>An offboarding process is a checklist of all the things you do at the end of a web design project. This ensures that you deliver what was promised, you get paid for what you delivered, and that you leave the client with a great impression. </span></p>
<p><span>But there’s much more to it than that. In this post, you’ll find a nine-step client offboarding process with to-dos and tools for each step. There’s also a template at the bottom you can use to add this process to your own design workflow. </span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/my-client-offboarding-process-checklist-included--cms-107471"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/107471/preview_image/offboarding.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/107471/preview_image/offboarding.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/107471/preview_image/offboarding.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/107471/preview_image/offboarding.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/107471/preview_image/offboarding.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/107471/preview_image/offboarding.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">My Client Offboarding Process [Checklist Included]</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">12 Sep 2023</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ioln"><h2 id="toc-yzok-handling-negative-client-feedback">
<span class="sectionnum">5.</span> Learn How to Deal with Negative Feedback</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iruq">
<p><span>It would be awesome if every client loved everything you designed for them. Unfortunately, if you work in this field long enough, you’ll find that’s not the case. </span></p>
<p><span>The first thing to do when you get negative feedback? Don’t take it personally. This isn’t about you. It’s about the client’s expectations not aligning with what they received. Before you start to freak out or lash out, there are seven other things you should do when dealing with negative feedback. </span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-handle-negative-feedback-from-design-clients--cms-108494"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/108494/preview_image/negative_feedback_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/108494/preview_image/negative_feedback_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/108494/preview_image/negative_feedback_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/108494/preview_image/negative_feedback_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108494/preview_image/negative_feedback_cover_image.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108494/preview_image/negative_feedback_cover_image.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Handle Negative Feedback from Design Clients</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">22 Feb 2024</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i1pm"><h2 id="toc-hzd2-maintaining-a-healthy-work-life-balance">
<span class="sectionnum">6.</span> Maintain a Healthy Work-life Balance</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="izdc">
<p><span>For those of you who are new to working remotely or for yourself, you may be excited about all the freedoms this kind of work offers you. Slowly but surely, though, you’ll discover there are some drawbacks to working from home.</span></p>
<p><span>For starters, it’s all too tempting to let yourself be distracted by familiar surroundings and people. It can also become difficult to say “no” to work when your computer is a mere 20 feet away. With these 11 strategies, you’ll be able to establish a better work-life balance going forward.</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/tips-for-maintaining-a-healthy-work-life-balance-when-working-remotely--cms-107676"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/107676/preview_image/work_life_balance_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/107676/preview_image/work_life_balance_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/107676/preview_image/work_life_balance_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/107676/preview_image/work_life_balance_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/107676/preview_image/work_life_balance_cover_image.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/107676/preview_image/work_life_balance_cover_image.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Tips for Maintaining a Healthy Work-Life Balance When Working Remotely</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">15 Sep 2023</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iz5b"><h2 id="toc-1ucm-taking-time-off">
<span class="sectionnum">7.</span> Take Time Off</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="il8d">
<p><span>Burnout shouldn’t be one of those things that web designers write off as an occupational hazard. When you burn out, your work suffers, your health suffers, and your personal and professional relationships suffer.</span></p>
<p><span>If you’re uncomfortable with taking time off in your freelance business, that’s okay. Start small. This post includes seven time-management strategies that can make it easier for you to schedule breaks without any consequences. </span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/how-to-take-time-off-without-losing-revenue-or-clients--cms-107065"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/107065/preview_image/take_time_off_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/107065/preview_image/take_time_off_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/107065/preview_image/take_time_off_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/107065/preview_image/take_time_off_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/107065/preview_image/take_time_off_cover_image.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/107065/preview_image/take_time_off_cover_image.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Take Time Off Without Losing Revenue or Clients</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">21 Jun 2023</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="injj"><h2 id="toc-nifu-why-you-need-a-business-budget">
<span class="sectionnum">8.</span> Build a Business Budget</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ibvzj">
<p><span>Money can be a major stressor when you work as a freelancer, especially in a field like web design where it can feel like feast-or-famine at times. While there are some things you can do to stabilize your earnings (more on that below), maintaining a budget is important.</span></p>
<p><span>A budget makes sure you’re earning enough money to pay for personal and professional expenses. It also ensures that you have enough money to put aside for savings and to cover those things you want, but don’t absolutely need. </span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/how-to-set-a-business-budget-as-a-freelancer--cms-108142"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/108142/preview_image/freelance_budget_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/108142/preview_image/freelance_budget_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/108142/preview_image/freelance_budget_cover_image.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/108142/preview_image/freelance_budget_cover_image.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/108142/preview_image/freelance_budget_cover_image.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/108142/preview_image/freelance_budget_cover_image.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Set a Business Budget as a Web Design Freelancer</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">06 Dec 2023</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iil86"><h2 id="toc-xdbu-diversifying-your-income">
<span class="sectionnum">9.</span> Diversify Your Income</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iayrx">
<p><span>As a web designer, your primary source of income is likely from designing websites. What happens, though, if you run out of websites to design? Do you hustle for days or weeks on end until you find something? You could, but it’s probably not the most effective use of your time. </span></p>
<p><span>Instead, consider other ways to bring in revenue. There are plenty of ways to diversify your income as a designer. You could offer additional services like website maintenance or you could passively sell digital products like themes and plugins. </span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/diversify-your-income-as-a-web-designer--cms-93380"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/93380/preview_image/diversify.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/93380/preview_image/diversify.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/93380/preview_image/diversify.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/93380/preview_image/diversify.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/93380/preview_image/diversify.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/93380/preview_image/diversify.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">15 Ways to Diversify Your Income As a Web Designer (Earn More in 2024!)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">16 May 2023</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iruch"><h2 id="toc-b19e-increasing-income-with-monthly-retainers">
<span class="sectionnum">10.</span> Increase Income with Monthly Retainers</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i056u">
<p><span>Another way to increase your earnings is to create a monthly retainer agreement. Essentially, your client pays you a lump sum of money upfront for an agreed-upon set of services. </span></p>
<p><span>There are typically three kinds of services web designers can sell as retainers: website maintenance, advanced support, and specialty services. If you’re curious about how to get started, how much to charge, and how to sell retainers to clients, check out this post. </span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/a-guide-to-monthly-retainer-agreements-for-web-designers--cms-108493"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/108493/preview_image/agreement.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/108493/preview_image/agreement.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/108493/preview_image/agreement.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/108493/preview_image/agreement.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108493/preview_image/agreement.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108493/preview_image/agreement.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">A Guide to Monthly Retainer Agreements for Web Designers </div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">20 Feb 2024</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ipmnv"><h2 id="toc-tk7u-tips-for-doing-your-taxes">
<span class="sectionnum">11.</span> Prepare Your Taxes Year-round</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="is51l">
<p><span>Even if your annual tax filing due date has come and gone, taxes are always something you should be thinking about as a freelancer. Without an employer to handle them, you’re on the hook for paying the right amount of taxes and on time.</span></p>
<p><span>Whether you’re outsourcing the filing of your taxes to an accountant or doing it yourself, there are nine things you should be doing throughout the year to make tax time easier on yourself. It’s probably the least fun business strategy on this list, but it’s got to get done.</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/tips-for-filing-taxes-as-a-freelancer--cms-108287"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/108287/preview_image/tax.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/108287/preview_image/tax.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/108287/preview_image/tax.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/108287/preview_image/tax.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108287/preview_image/tax.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108287/preview_image/tax.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">9 Tips for Filing Taxes (As a Web Design Freelancer)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">11 Jan 2024</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="icqab"><h2 id="toc-v0qq-recession-proofing-your-business">
<span class="sectionnum">12.</span> Recession-proof Your Business</h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iof7z">
<p><span>No matter how hard you work and how high you set your rates, there usually aren’t many warning signs when a financial downturn is on its way. So what do you do? Like any other disaster, you prepare yourself and your business… Just in case.</span></p>
<p><span>Although this post is all about recession-proofing business, these tips are just as useful for navigating personal financial crises, physical disasters, and even the rise of AI. </span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/how-to-recession-proof-your-web-design-business--cms-106788"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/106788/preview_image/Recession_proof_banner.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/106788/preview_image/Recession_proof_banner.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/posts/106788/preview_image/Recession_proof_banner.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/posts/106788/preview_image/Recession_proof_banner.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/posts/106788/preview_image/Recession_proof_banner.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/posts/106788/preview_image/Recession_proof_banner.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Recession-Proof Your Web Design Business</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2779/profiles/21303/profileImage/Suzanne%20Scacca%20Headshot%20400x400.JPG 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Suzanne Scacca</div>
<div class="roundup-block__published-date">11 Apr 2023</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="icybx"><h2 id="toc-6yo1-conclusion"><span>Conclusion</span></h2></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ioe7d"><p><span>While your design work will always be priority one, you won’t be able to do any of it (or </span><em><span>enjoy </span></em><span>any of it) if your freelance business isn’t in order. </span><span>The 12 business management strategies above will come in handy no matter what type of web designer you are or how long you’ve been freelancing. </span></p></div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/108608/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108608/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108608/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108608/a2t.img" width="1" /></div>2024-03-18 09:38:00 UTC2024-03-18 09:38:00 UTCSuzanne Scaccatag:webdesign.tutsplus.com,2005:PostPresenter/cms-1085442024-02-29T21:50:36+00:0010 Wonderfully Retro Web Design Trends Making a Comeback <style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#islw{color:black;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="ixzk"><p>Flares. Mullets. VHS. You may remember them the first time around (and hoped you’d seen the back of them), but they’re officially back! </p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="icfg"><p>And whatever your views are on the matter, the same can be said for web design trends. Yes, we now have so much more technology at our fingertips than we did back in the heady days of the 80s when the internet first burst onto our screens. But more and more, we’re seeing nods to the digital past popping back up. Love it or loathe it, read on as we dissect some of the retro web design trends making a comeback today.</p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iloi">
<h2 id="toc-re3w-what-is-retro-web-design">What is Retro Web Design?</h2>
<p>Forget blindly chasing the latest web developments of 2024 and beyond, retro web design favours a nostalgic look back to web design trends of the past. </p>
<p>It could refer to the early days of 1980s web design or look later towards the 2010s (and everything in between). It gives past web design respect, rather than seeing it as something that should be wiped out in the spirit of progress.</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iryy">
<h2 id="toc-2wiu-why-is-retro-web-design-resurfacing">Why is Retro Web Design Resurfacing?</h2>
<p>Whether you’re mad on modern or rave about retro, there are a few reasons why these classic cyberspaces are showing their (pixellated) faces once more. Why, I hear you ask?</p>
<h3 id="toc-n88f-nostalgia">Nostalgia</h3>
<p>Like fashions or music that you swear will never come back in again, many people who grew up during the early days of the internet feel nostalgic about retro web design. Building websites that remind them of their youth will bring a sprinkling of joy! </p>
<h3 id="toc-p8mc-difference">Difference</h3>
<p>With simplicity and minimalism taking centre stage over the past years, retro web design can help your web design stand out. After all, why blend in?</p>
<h3 id="toc-wv68-counter-culture">Counter-Culture </h3>
<p>You can also appeal to people who celebrate non-conformity. Rejecting the norms and going your own way makes a statement that can suit many companies, including fashion brands or food outlets targeting a young or trendy set. </p>
<h3 id="toc-fvuk-eye-catching">Eye-Catching</h3>
<p>Many retro web design trends opt for bold colours, pixel art, and animated GIFs that catch users’ eyes when they’re scrolling. By going back in time, you can hopefully keep more people on the page. </p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iieu">
<h3 id="toc-ol2j-what-to-look-out-for-in-retro-web-design">What To Look Out For in Retro Web Design </h3>
<p>Of course, with retro web design largely referring to “everything that came before”, there are so many ways this aesthetic can make itself known in web design.</p>
<p>To get started, you can think of retro web design as displaying a throwback to a specific decade. </p>
<ul>
<li>If you’re after an eighties vibe, think text-based with limited graphical elements. After all, computers back then were less advanced than even the most basic of phones many of us have today.</li>
<li>If you’re nostalgic about the noughties, you might prefer rounded corners or grid-based layouts. </li>
</ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ilkb">
<h2 id="toc-hub3-15-retro-web-design-trends-making-a-comeback-in-2024-and-beyond">10 Retro Web Design Trends Making a Comeback in 2024 and Beyond</h2>
<h3 id="toc-no5h-pixel-art">Pixel Art </h3>
<p>Pixel art first burst into the web design scene back in the late 1970s and early 1980s with the birth of home computers and game consoles. Think Space Invaders and Pac-Man, which both used blocky graphics to create recognisable figures.</p>
<h4 id="toc-4bmi-eastward"><a href="https://eastwardgame.com/" target="_self">Eastward</a></h4>
<p>Look out for cool little pixel art examples on the Eastward gaming website. There’s static pixel art such as a camera, as well as more animated art of gaming characters.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/eastward.jpg" alt="eastward" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/eastward.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/eastward.jpg" alt="eastward" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/eastward.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/eastward.jpg" alt="eastward" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/eastward.jpg 2x"></figure>
<h4 id="toc-62ai-piskel-app"><a href="https://www.piskelapp.com/" target="_self">Piskel App</a></h4>
<p>Check out Piskel App for examples of super nostalgic pixel art that may inspire you. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/piskel.jpg" alt="piskel" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/piskel.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/piskel.jpg" alt="piskel" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/piskel.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/piskel.jpg" alt="piskel" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/piskel.jpg 2x"></figure>
<p>Want to learn how to draw hand-crafted pixel art in Photoshop? <a href="https://design.tutsplus.com/articles/learn-how-to-draw-hand-crafted-pixel-art-in-photoshop--psd-5284?_ga=2.90789724.799056793.1708608784-866199464.1708608784" target="_self">Head this way</a>. </p>
<h3 id="toc-1h78-old-school-web-elements">Old-School Web Elements</h3>
<p>In a similar vein, websites back in the day would make the most of elements like animated GIFs, visitor counters explaining how many people have visited the site, and ’under construction’ GIFs to let users know that updates are coming soon. Because these elements are now so rare, they can surprise and delight visitors today with their retro charm. </p>
<h4 id="toc-87vt-tldr---notification-email-sets-animated-icons"><a href="https://themeforest.net/item/tldr-notification-email-sets-animated-icons/19865383" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">TLDR - Notification Email Sets + Animated Icons</a></h4>
<p>If you fancy adding some nostalgic charm to your web design, then check out these animated icons. Inspired by animated GIFs of the past, the icons have been updated to belong in 2024 and beyond. </p>
</div><div data-content-block-type="Grid" class="content-block content-block-grid" id="iguu"><div class="element-row two-column-grid grid-gap--col-extra-wide grid-gap--row-extra-wide" id="islw">
<div class="element-col" id="it5pe"><figure class="post_image" id="iyvpi"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=773/uploads/users/30/posts/108544/image-upload/tldr.jpg" alt="tldr" id="i9oph" loading="lazy" width="793px" height="628px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1546/uploads/users/30/posts/108544/image-upload/tldr.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/tldr.jpg" alt="tldr" id="i9oph" loading="lazy" width="650px" height="516px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/tldr.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/tldr.jpg" alt="tldr" id="i9oph" loading="lazy" width="380px" height="303px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/tldr.jpg 2x"></figure></div>
<div class="element-col"><figure class="post_image"><img src="https://cms-assets.tutsplus.com/uploads/users/30/posts/108544/image-upload/icon_check.gif" alt="gif" id="i01bf" loading="lazy" width="196px" height="196px"></figure></div>
</div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i4lj3">
<h3 id="toc-efnl-nostalgic-references">Nostalgic References</h3>
<p>Of course, retro web design can include the site’s content as well as how it’s designed. Gameboys, cassettes, the Spice Girls; this is about giving airspace to whatever it is that floated your boat back in the day. </p>
<h4 id="toc-iix4-the-new-york-moon"><a href="https://mac-template.webflow.io/" target="_blank" rel="noopener">Mac</a></h4>
<p>You can’t get much more retro than this Webflow template, which is inspired directly by the early Apple OS interfaces. With monochrome colours, simple navigation, and the custom mouse cursors, this website screams nostalgia. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/mac.jpg" alt="mac" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/mac.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/mac.jpg" alt="mac" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/mac.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/mac.jpg" alt="mac" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/mac.jpg 2x"></figure>
<h4 id="toc-24z3-hipster---retro-responsive-wordpress-theme"><a href="https://themeforest.net/item/hipster-retro-responsive-wordpress-theme/3867290" target="_self" rel data-action="click->ga-analytics#sendMarketClickEvent">Hipster - Retro Responsive WordPress Theme</a></h4>
<p>This retro layout could be a good option if you’re ready to add your own vintage elements. Like many of the best retro WordPress themes out there, you can easily edit the images and text to suit your vibe. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/hipster.jpg" alt="hipster" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/hipster.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/hipster.jpg" alt="hipster" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/hipster.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/hipster.jpg" alt="hipster" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/hipster.jpg 2x"></figure>
<h3 id="toc-tfl8-retro-color-schemes">Retro Colour Schemes</h3>
<p>We’re all familiar with the colour schemes that fill most of our web space today (think whites and blues). Web designers back in the day weren’t shy about using colour; perhaps because they had fewer exciting functionality tricks at their disposal. Neon colours, pastel hues, or contrasting colours all belong to the retro aesthetic. </p>
<h4 id="toc-9a5i-retro-portfolio---one-page-vintage-wordpress-theme"><a href="https://themeforest.net/item/retro-portfolio-one-page-vintage-wordpress-theme/1708109" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Retro Portfolio - One Page Vintage WordPress Theme</a></h4>
<p>If you’d like to step towards the muted colour palette, then the Retro Portfolio WordPress theme could be for you. These colour choices were particularly popular in the mid-2010s, so will be familiar to a lot of users. </p>
<h4 id="toc-ujup-vintwood---a-vintage-retro-wordpress-theme"><a href="https://themeforest.net/item/vintwood-a-vintage-retro-wordpress-theme/22601126" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">VintWood - a Vintage, Retro WordPress Theme</a></h4>
<p>Step back in time with the retro colour choices in this cool WordPress theme. There are two homepages to choose from and they come with 20+ inner pages too. </p>
</div><div data-content-block-type="Grid" class="content-block content-block-grid"><div class="element-row two-column-grid grid-gap--col-extra-wide grid-gap--row-extra-wide">
<div class="element-col"><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/retro1.jpg" alt="retro 1" id="iqmcg" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/retro1.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/retro1.jpg" alt="retro 1" id="iqmcg" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/retro1.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/retro1.jpg" alt="retro 1" id="iqmcg" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/retro1.jpg 2x"></figure></div>
<div class="element-col"><figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/retro2.jpg" alt="retro 2" id="ilnp4" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/retro2.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/retro2.jpg" alt="retro 2" id="ilnp4" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/retro2.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/retro2.jpg" alt="retro 2" id="ilnp4" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/retro2.jpg 2x"></figure></div>
</div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="icyu">
<h4 id="toc-7vjb-the-outlinecom"><a href="https://theoutline.com/" target="_self">The Outline.com</a></h4>
<p>Check out the retro, clashing colours within The Outline. Favouring a “more is more” approach, there are also animated GIFs and text appearing over different colours and textural elements. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/outline.jpg" alt="outline" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/outline.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/outline.jpg" alt="outline" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/outline.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/outline.jpg" alt="outline" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/outline.jpg 2x"></figure>
<h3 id="toc-79px-music">Music</h3>
<p>Remember the days of Myspace when users’ profiles were accompanied by the sweet tones of their favourite tunes? Website music, otherwise known as MIDI melodies (Musical Instrument Digital Interface), has fallen out of fashion over the years. (Anyone else remember struggling to find where on earth the random music was playing from?) However, it’s creeping back into web design today...</p>
<h4 id="toc-jpcu-zombocom">
<a href="https://www.zombo.com/" target="_self">Zombo.com</a> </h4>
<p>If you stumble across this retro, stripped-back website you’ll also be greeted by a surreal soundtrack welcoming you to the page. Whatever your views are on the return of MIDI sites, you can’t deny they catch your attention.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/zombo.jpg" alt="zombo" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/zombo.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/zombo.jpg" alt="zombo" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/zombo.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/zombo.jpg" alt="zombo" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/zombo.jpg 2x"></figure>
<h3 id="toc-cclz-super-simple-navigation">Super Simple Navigation</h3>
<p>Retro web design tended to favour simple navigation. Often featuring a very simple scroll, the sites were designed with desktop in mind rather than also needing to work on tablet or mobile screens. </p>
<h4 id="toc-dkrj-extinct---retro-vintage-portfolio-wordpress-theme"><a href="https://themeforest.net/item/extinct-retro-vintage-portfolio-wordpress-theme/5449276" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Extinct - Retro Vintage Portfolio WordPress Theme</a></h4>
<p>How about picking this retro WordPress template if you’re looking for a design that reminds you of simpler times? Although this works across any screen size, the simple vertical scroll and classic content blocks serve as a super reminder of retro web design. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/extint.jpg" alt="extinct" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/extint.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/extint.jpg" alt="extinct" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/extint.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/extint.jpg" alt="extinct" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/extint.jpg 2x"></figure>
<h3 id="toc-v939-geometric-patterns">Geometric Patterns</h3>
<p>Grids, checkerboards, or stripes, geometric patterns were also frequently used in retro web design. Whether used on their own or to aid navigation, these designs are making a comeback. </p>
<h4 id="toc-kbcq-celeste">
<a href="https://www.celestegame.com/" target="_self">Celeste</a> </h4>
<p>A grid comprising retro game screenshots contributes to this website’s retro feel. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/celeste.jpg" alt="celeste" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/celeste.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/celeste.jpg" alt="celeste" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/celeste.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/celeste.jpg" alt="celeste" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/celeste.jpg 2x"></figure>
<h3 id="toc-rl8t-a-love-of-text">A Love of Text</h3>
<p>In the past, big chunks of text were not unusual in web design, but this was soon replaced by websites favouring imagery and video content. Today, we’re seeing more and more sites not being afraid to use more text than imagery in their designs. </p>
<h4 id="toc-eayp-the-marginalian">
<a href="https://www.themarginalian.org/" target="_self">The Marginalian</a> </h4>
<p>You’d be forgiven for completely missing the pictures on this site as they’re hard to spot! Not shying away from large blocks of text, this website has its own retro charm.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/marginalian.jpg" alt="marginalian" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/marginalian.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/marginalian.jpg" alt="marginalian" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/marginalian.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/marginalian.jpg" alt="marginalian" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/marginalian.jpg 2x"></figure>
<h4 id="toc-57d8-marlow---distinctive-typography-first-wordpress-blog-theme"><a href="https://themeforest.net/item/marlow-distinctive-typographyfirst-wordpress-blog-theme/21757268" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Marlow - Distinctive, Typography-First WordPress Blog Theme</a></h4>
<p>If you’d like to do something similar, you can pick a retro WordPress template like Marlow. The template allows for large chunks of text alongside a single image, which is perfect for a blog, review, or news sites. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/marlow.jpg" alt="marlow" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/marlow.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/marlow.jpg" alt="marlow" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/marlow.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/marlow.jpg" alt="marlow" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/marlow.jpg 2x"></figure>
<h3 id="toc-qr4h-vintage-typography">Vintage Typography</h3>
<p>And when it comes to text in retro web design, it’s not just about how much there is – it’s also about the style. Picking fonts that are no longer in vogue can be a way to set your site apart. </p>
<h4 id="toc-tt0t-penny-juice"><a href="https://www.pennyjuice.com/" target="_self">Penny Juice</a></h4>
<p>See how this site uses a combination of stripped-back fonts, including some with classic rainbow gradients! Against clashing colours, the design looks very different to most sites today. Love it or loathe it, it makes you look twice. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/penny.jpg" alt="penny juice" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/penny.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/penny.jpg" alt="penny juice" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/penny.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/penny.jpg" alt="penny juice" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/penny.jpg 2x"></figure>
<h3 id="toc-h0nh-skeuomorphism">Skeuomorphism</h3>
<p>This is a fancy term for design elements mimicking the real world, and it was especially popular in the early days of web design. However, there are still countless examples today, i.e. think about app icons looking like real-life calculators, trash cans, clocks, or notepads. Apple’s GarageBand, for example, would always opt for virtual knobs and dials that look like the real thing.</p>
<h4 id="toc-90ue-sofbox-admin---vuejs-laravel-angular-9-react-html-admin-theme"><a href="https://themeforest.net/item/sofbox-responsive-bootstrap-4-admin-dashboard-template/25365628" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Sofbox Admin - Vuejs, Laravel, Angular 9, React, HTML Admin Theme</a></h4>
<p>Take a look at the Ticket Booking demo and you’ll see dates are shaped like ticket stubs. The design is very clean and clear, revamping retro styles with a more modern look. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108544/image-upload/softbox.jpg" alt="softbox" loading="lazy" width="870px" height="469px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108544/image-upload/softbox.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108544/image-upload/softbox.jpg" alt="softbox" loading="lazy" width="650px" height="353px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108544/image-upload/softbox.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108544/image-upload/softbox.jpg" alt="softbox" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108544/image-upload/softbox.jpg 2x"></figure>
<h2 id="toc-wsrl-are-you-ready-to-rock-retro">So, Are You Ready to Rock Retro?</h2>
<p>Whether you love the revival of older looks or are desperately clinging to modern web design, there’s no denying vintage styles are making a comeback. Will you be getting involved? </p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/108544/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108544/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108544/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108544/a2t.img" width="1" /></div>2024-03-14 10:28:12 UTC2024-03-14 10:28:12 UTCHermione Wrighttag:webdesign.tutsplus.com,2005:PostPresenter/cms-1085712024-02-29T19:22:53+00:00The Best WooCommerce WordPress Block Plugins 2024<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="iq9l"><p>Struggling to enhance your WooCommerce store’s appeal and functionality? Ever explored how block plugins could transform your store’s design and user experience?</p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="imxd"><p>In this article, we’ll cover the role of block plugins in WooCommerce, criteria for choosing the best ones, and introduces top recommended WooCommerce block plugins.</p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i3q9">
<figure class="post_image"><a href="https://wordpress.org/plugins/product-blocks/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108571/image-upload/The_Best_WooCommerce_WP_Block_Plugins_Product_X.jpg" alt="Product X" loading="lazy" width="870px" height="514px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108571/image-upload/The_Best_WooCommerce_WP_Block_Plugins_Product_X.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108571/image-upload/The_Best_WooCommerce_WP_Block_Plugins_Product_X.jpg" alt="Product X" loading="lazy" width="650px" height="386px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108571/image-upload/The_Best_WooCommerce_WP_Block_Plugins_Product_X.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108571/image-upload/The_Best_WooCommerce_WP_Block_Plugins_Product_X.jpg" alt="Product X" loading="lazy" width="380px" height="229px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108571/image-upload/The_Best_WooCommerce_WP_Block_Plugins_Product_X.jpg 2x"></a>
<figcaption>There are tons of high quality WooCommerce WP Block Plugins that you can download to enhance your eCommerce store.</figcaption>
</figure>
<p>WooCommerce allows users to sell products and services from their WordPress site. It’s highly customizable, but to enhance its functionality and user experience, integrating block plugins is essential.</p>
<p>These plugins work seamlessly with the Gutenberg editor, offering a more intuitive way to build and customize WooCommerce stores.</p>
<h2 id="i-the-role-of-block-plugins-in-woocommerce">Why Use Block Plugins in WooCommerce?</h2>
<p>Block plugins play a crucial role in enhancing the functionality and user experience of WooCommerce stores by integrating seamlessly with the Gutenberg editor.</p>
<p>These plugins allow for the easy addition and customization of content blocks within WooCommerce, making it simpler for store owners to display products, categories, and more in an engaging and visually appealing manner.</p>
<div class="callout-block">
<span class="callout-icon callout-warn"></span>
<div class="callout-message">At this relatively early stage, quite a few plugins and blocks aren’t compatible with WooCommerce’s basket and checkout layouts, so always check before deploying.</div>
</div>
<ul>
<li>
<strong>Integration with WooCommerce and Gutenberg Editor</strong>: Block plugins bridge the gap between WooCommerce and the Gutenberg editor, enabling a more intuitive and efficient way to manage and display e-commerce content directly within the WordPress editing interface.</li>
<li>
<strong>Benefits for Store Customization and User Experience Enhancement</strong>: Utilizing block plugins can significantly improve the customization capabilities of WooCommerce stores. They offer a wide range of blocks for various purposes, such as showcasing products, enabling product searches, and adding customer reviews. This not only enhances the visual appeal of the store but also improves navigation and the overall shopping experience for users.</li>
<li>
<div class="relative default font-sans text-base text-textMain dark:text-textMainDark selection:bg-superDuper selection:text-textMain">
<div class="min-w-0 break-words [word-break:break-word]">
<div class="prose dark:prose-invert inline leading-normal break-words min-w-0 [word-break:break-word]">
<p><strong>Streamlining Store Management: </strong>Block plugins can streamline the management of a WooCommerce store by providing store owners with an intuitive interface for handling complex e-commerce operations. This includes updating product information, managing inventory, and setting up promotions directly within the editor, which can save time and reduce the need for additional plugins or custom coding.</p>
</div>
</div>
</div>
</li>
</ul>
<h3 id="ii-criteria-for-choosing-the-best-block-plugins">Criteria for Choosing the Best Block Plugins</h3>
<p>Selecting the right block plugins for your WooCommerce store involves considering several key factors to ensure they meet your specific needs and contribute positively to your site’s performance and user experience.</p>
<ul>
<li>
<strong>Performance and Impact on Site Speed</strong>: It’s essential to choose plugins that are optimized for speed and do not adversely affect your site’s loading times. A fast-loading site is crucial for maintaining good user experience and search engine rankings.</li>
<li>
<strong>Range of Features and Customization Options</strong>: The best block plugins offer a comprehensive range of features and customization options. This allows for greater flexibility in designing your store and tailoring the appearance and functionality of blocks to match your brand and meet your customers’ needs.</li>
<li>
<strong>User Reviews and Expert Recommendations</strong>: Reviews from other users and recommendations from industry experts can provide valuable insights into the reliability and effectiveness of a plugin. Positive feedback is a good indicator of a plugin’s quality and user satisfaction.</li>
<li>
<strong>Compatibility with the Latest Versions of WordPress and WooCommerce</strong>: Ensure that the plugins you choose are compatible with the latest versions of WordPress and WooCommerce. This helps prevent potential conflicts and ensures that your store operates smoothly with the latest features and security updates.</li>
</ul>
<p>By carefully considering these criteria, store owners can select block plugins that enhance their store’s functionality, improve the shopping experience for customers, and contribute to the overall success of their online business.</p>
<h2 id="part-2-top-recommended-woocommerce-block-plugins">Top Recommended WooCommerce Block Plugins</h2>
<p>Let’s now cover some of the top WooCommerce Block plugins that you can download today!</p>
<h3 id="b-premium-blocks-for-gutenberg">1. <a href="https://wordpress.org/plugins/premium-blocks-for-gutenberg/" target="_self">Premium Blocks for Gutenberg</a>
</h3>
<figure class="post_image"><a href="https://wordpress.org/plugins/premium-blocks-for-gutenberg/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108571/image-upload/Premium_Blocks_for_Gutenberg.jpg" alt="Premium Blocks for Gutenberg" loading="lazy" width="870px" height="445px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108571/image-upload/Premium_Blocks_for_Gutenberg.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108571/image-upload/Premium_Blocks_for_Gutenberg.jpg" alt="Premium Blocks for Gutenberg" loading="lazy" width="650px" height="335px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108571/image-upload/Premium_Blocks_for_Gutenberg.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108571/image-upload/Premium_Blocks_for_Gutenberg.jpg" alt="Premium Blocks for Gutenberg" loading="lazy" width="380px" height="200px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108571/image-upload/Premium_Blocks_for_Gutenberg.jpg 2x"></a></figure>
<p>Premium Blocks for Gutenberg enhances the Gutenberg editor with a suite of additional blocks that are optimized for performance. While not exclusively for WooCommerce, its blocks can significantly improve the design and functionality of WooCommerce stores.</p>
<h4 id="toc-qzf8-key-features"><strong>Key Features</strong></h4>
<ul>
<li>Performance-oriented blocks that maintain website speed and efficiency.</li>
<li>A variety of blocks that can be utilized in a WooCommerce context, such as testimonials, pricing tables, and interactive banners.</li>
<li>Regular updates and compatibility with the latest WordPress versions, ensuring smooth integration with WooCommerce stores.</li>
</ul>
<h3 id="c-ultimate-blocks">2. <a href="https://wordpress.org/plugins/ultimate-blocks/" target="_self">Ultimate Blocks</a>
</h3>
<figure class="post_image"><a href="https://wordpress.org/plugins/ultimate-blocks/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108571/image-upload/Ultimate_Blocks.png" alt="ultimate blocks" loading="lazy" width="870px" height="517px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108571/image-upload/Ultimate_Blocks.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108571/image-upload/Ultimate_Blocks.png" alt="ultimate blocks" loading="lazy" width="650px" height="388px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108571/image-upload/Ultimate_Blocks.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108571/image-upload/Ultimate_Blocks.png" alt="ultimate blocks" loading="lazy" width="380px" height="230px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108571/image-upload/Ultimate_Blocks.png 2x"></a></figure>
<p>Ultimate Blocks is designed with content creators in mind, offering blocks that cater to a wide range of needs, including those of WooCommerce store owners. It provides an array of blocks that can enhance product descriptions and improve the overall content presentation.</p>
<h4 id="toc-ap78-key-features"><strong>Key Features</strong></h4>
<ul>
<li>Blocks for creating detailed product descriptions, such as tabbed content, image sliders, and call-to-action buttons.</li>
<li>SEO-friendly blocks that help improve product visibility on search engines.</li>
<li>A user-friendly interface that allows for easy customization without the need for coding expertise.</li>
</ul>
<h3 id="e-blockons-gutenberg-blocks-for-woocommerce">3. <a href="https://wordpress.org/plugins/blockons/" target="_self">Blockons – Gutenberg Blocks for WooCommerce</a>
</h3>
<figure class="post_image"><a href="https://demo.kairaweb.com/#avant"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108571/image-upload/Blockons_Gutenberg_Blocks_for_WooCommerce.jpeg" alt="Blockons – Gutenberg Blocks for WooCommerce" loading="lazy" width="870px" height="568px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108571/image-upload/Blockons_Gutenberg_Blocks_for_WooCommerce.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108571/image-upload/Blockons_Gutenberg_Blocks_for_WooCommerce.jpeg" alt="Blockons – Gutenberg Blocks for WooCommerce" loading="lazy" width="650px" height="426px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108571/image-upload/Blockons_Gutenberg_Blocks_for_WooCommerce.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108571/image-upload/Blockons_Gutenberg_Blocks_for_WooCommerce.jpeg" alt="Blockons – Gutenberg Blocks for WooCommerce" loading="lazy" width="380px" height="252px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108571/image-upload/Blockons_Gutenberg_Blocks_for_WooCommerce.jpeg 2x"></a></figure>
<p>Blockons provides a suite of blocks specifically designed to enhance WooCommerce stores, along with additional site add-ons. It aims to provide a comprehensive range of blocks that cater to the various needs of WooCommerce websites.</p>
<h4 id="toc-kn04-key-features"><strong>Key Features</strong></h4>
<ul>
<li>A wide array of WooCommerce-specific blocks, including product grids, category lists, and add-to-cart buttons.</li>
<li>Additional site add-ons that enhance the overall functionality and user experience of the store.</li>
<li>Easy integration with existing WooCommerce setups, allowing for quick and efficient store enhancements.</li>
</ul>
<h3 id="f-productx-woocommerce-builder-gutenberg-blocks">4. <a href="https://wordpress.org/plugins/product-blocks/" target="_self">ProductX – WooCommerce Builder & Gutenberg Blocks</a>
</h3>
<figure class="post_image"><a href="https://wordpress.org/plugins/product-blocks/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108571/image-upload/ProductX_WooCommerce_Builder_Gutenberg_Blocks.jpg" alt="ProductX – WooCommerce Builder & Gutenberg WooCommerce Blocks" loading="lazy" width="870px" height="493px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108571/image-upload/ProductX_WooCommerce_Builder_Gutenberg_Blocks.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108571/image-upload/ProductX_WooCommerce_Builder_Gutenberg_Blocks.jpg" alt="ProductX – WooCommerce Builder & Gutenberg WooCommerce Blocks" loading="lazy" width="650px" height="371px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108571/image-upload/ProductX_WooCommerce_Builder_Gutenberg_Blocks.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108571/image-upload/ProductX_WooCommerce_Builder_Gutenberg_Blocks.jpg" alt="ProductX – WooCommerce Builder & Gutenberg WooCommerce Blocks" loading="lazy" width="380px" height="220px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108571/image-upload/ProductX_WooCommerce_Builder_Gutenberg_Blocks.jpg 2x"></a></figure>
<p>ProductX offers an extensive collection of blocks and a WooCommerce builder that allows for complete customization of the store’s design and layout. It is a comprehensive solution for store owners who seek to have full control over their store’s appearance and functionality.</p>
<h4 id="toc-aanm-key-features"><strong>Key Features</strong></h4>
<ul>
<li>A drag-and-drop builder for creating custom product pages, category pages, and more.</li>
<li>A broad range of blocks for product display, filtering, and search functionalities.</li>
<li>Advanced customization options that enable store owners to tailor the store’s appearance to match their brand identity.</li>
</ul>
<h3 id="d-product-blocks-for-woocommerce">5. <a href="https://wordpress.org/plugins/product-blocks-for-woocommerce/" target="_self">Product Blocks for WooCommerce</a>
</h3>
<figure class="post_image"><a href="https://wordpress.org/plugins/product-blocks-for-woocommerce/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108571/image-upload/Product_Blocks_for_WooCommerce.jpeg" alt="Product Blocks for WooCommerce" loading="lazy" width="870px" height="531px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108571/image-upload/Product_Blocks_for_WooCommerce.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108571/image-upload/Product_Blocks_for_WooCommerce.jpeg" alt="Product Blocks for WooCommerce" loading="lazy" width="650px" height="399px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108571/image-upload/Product_Blocks_for_WooCommerce.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108571/image-upload/Product_Blocks_for_WooCommerce.jpeg" alt="Product Blocks for WooCommerce" loading="lazy" width="380px" height="236px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108571/image-upload/Product_Blocks_for_WooCommerce.jpeg 2x"></a></figure>
<p>Product Blocks for WooCommerce offers a collection of unique blocks designed to showcase WooCommerce products in innovative and engaging ways. This plugin allows store owners to create distinctive product displays that can captivate customers and enhance the shopping experience.</p>
<h4 id="toc-duww-key-features"><strong>Key Features</strong></h4>
<ul>
<li>Easy installation and setup, with a focus on maintaining site performance.</li>
<li>Blocks for creating advanced product displays, such as carousels, masonry layouts, and flip card layouts.</li>
<li>Customization options that allow store owners to align the product display with their store’s branding and design preferences.</li>
</ul>
<h2 id="vi-best-practices-for-using-woocommerce-block-plugins">Best Practices for Using WooCommerce Block Plugins</h2>
<p>To maximize the potential of WooCommerce block plugins, it’s essential to employ them strategically within your store’s design.</p>
<p>We’ll now cover the best practices for using these plugins effectively, as well as advice on avoiding common mistakes that could detract from the user experience.</p>
<ul>
<li>
<p><strong>Strategic Block Placement</strong>: Carefully plan where to place blocks on your pages to guide the customer journey. Use product blocks to highlight bestsellers or new arrivals and category blocks to simplify product discovery. Ensure that blocks are used to create a logical flow that leads customers towards making a purchase.</p>
</li>
<li>
<p><strong>Consistency in Design and Branding</strong>: Utilize block plugins to create a uniform design language across your store. Choose block styles that align with your brand’s colors, fonts, and imagery. Consistent design helps in reinforcing your brand identity and can make your store more memorable to customers.</p>
</li>
<li>
<p><strong>Balancing Aesthetics with Performance</strong>: While it’s tempting to use numerous blocks to create visually rich pages, it’s crucial to balance aesthetics with performance. Too many blocks, especially those with high-resolution images or complex scripts, can slow down your site. Prioritize loading speed and responsiveness to ensure a smooth shopping experience.</p>
</li>
<li>
<p><strong>Responsive Design Considerations</strong>: Ensure that the blocks you use are responsive and display well on all devices. With a growing number of consumers shopping on mobile devices, blocks must adapt to different screen sizes without losing functionality or aesthetic appeal.</p>
</li>
<li>
<p><strong>Regularly Update and Test Blocks</strong>: Keep your block plugins updated to the latest version to take advantage of new features and security improvements. Regularly test the blocks on your site to ensure they function correctly and make adjustments as needed based on customer feedback and analytics data.</p>
</li>
<li>
<p><strong>Training and Documentation</strong>: If you have a team managing your WooCommerce store, ensure they are trained on how to use the block plugins. Provide documentation on the setup and best practices for using the blocks to maintain consistency across your site’s management.</p>
</li>
</ul>
<h2 id="toc-1evo-download-even-more-woocommerce-plugins">Download Even More WooCommerce Plugins & Themes</h2>
<p>Take your Woocommerce store to the next level by checking out these additional resources on Envato Tuts+.</p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-elementor-woocommerce-themes--cms-107946"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/107946/preview_image/elementor_woocommerce.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/107946/preview_image/elementor_woocommerce.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/107946/preview_image/elementor_woocommerce.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/107946/preview_image/elementor_woocommerce.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/107946/preview_image/elementor_woocommerce.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/107946/preview_image/elementor_woocommerce.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">8 Best Elementor Woocommerce Themes 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Daniel Strongin</div>
<div class="roundup-block__published-date">16 Nov 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/woocommerce-themes-for-fashion-clothing-stores--cms-35432"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35432/preview_image/woocommerce_fashion.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35432/preview_image/woocommerce_fashion.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35432/preview_image/woocommerce_fashion.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35432/preview_image/woocommerce_fashion.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/35432/preview_image/woocommerce_fashion.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/35432/preview_image/woocommerce_fashion.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">27+ Best Clothing Stores and Fashion WooCommerce Themes (Free and Premium)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Hermione Wright</div>
<div class="roundup-block__published-date">09 Mar 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/13-cost-quote-estimate-calculators-for-wordpress-woocommerce-for-2021--cms-36201"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/36201/preview_image/young-woman-working-on-laptop-from-home-MK7YVBW.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/36201/preview_image/young-woman-working-on-laptop-from-home-MK7YVBW.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/36201/preview_image/young-woman-working-on-laptop-from-home-MK7YVBW.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/36201/preview_image/young-woman-working-on-laptop-from-home-MK7YVBW.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/769/posts/36201/preview_image/young-woman-working-on-laptop-from-home-MK7YVBW.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/769/posts/36201/preview_image/young-woman-working-on-laptop-from-home-MK7YVBW.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">15 Cost, Quote, and Estimate Calculators for WooCommerce for 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Franc Lucas</div>
<div class="roundup-block__published-date">31 Mar 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-woocommerce-themes-for-amazon-affiliates--cms-39165"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/39165/preview_image/woocommerce-amazon.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/39165/preview_image/woocommerce-amazon.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/39165/preview_image/woocommerce-amazon.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/39165/preview_image/woocommerce-amazon.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/39165/preview_image/woocommerce-amazon.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/39165/preview_image/woocommerce-amazon.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">15+ Best WooCommerce Themes for Amazon Affiliates in 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21134/profileImage/hermione-wright.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Hermione Wright</div>
<div class="roundup-block__published-date">30 Nov 2021</div>
</div>
</div>
</div>
</div></a></li>
</ul>
<h2 id="vii-conclusion">Download a WooCommerce WP block Plugin Today!</h2>
<p>Block plugins are essential for elevating the functionality and aesthetic appeal of WooCommerce stores, offering seamless integration with the Gutenberg editor for intuitive store customization and management.</p>
<p>By deciding what plugins to use based on performance, features, and compatibility, you can significantly enhance user experience and store functionality.</p>
<p>The top WooCommerce block plugins provide various options for engaging product displays and effective site management. Implementing these plugins strategically ensures a more appealing, efficient, and user-friendly eCommerce platform.</p>
<p>Be sure to check out Envato Market for even more <a href="https://elements.envato.com/wordpress/woocommerce/compatible-with-block-editor" target="_self" data-action="click->ga-analytics#sendElementsClickEvent">great WooCommerce plugins and creative assets</a> for your store.</p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/108571/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108571/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108571/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108571/a2t.img" width="1" /></div>2024-03-13 13:55:00 UTC2024-03-13 13:55:00 UTCDaniel Strongintag:webdesign.tutsplus.com,2005:PostPresenter/cms-1085052024-02-25T08:19:20+00:00How to Create a Simple Tip Calculator with HTML, CSS, and Vanilla JavaScript <style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#i7ry{background-color:rgb(243, 245, 246);}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="iwdb">
<p>In this tutorial, we will cover how to create a simple tip calculator with HTML, CSS, and JavaScript.</p>
<p>The tip calculator will allow you to enter an amount, choose a tip percentage, and choose the number of people sharing the bill. It will then calculate the tip contribution per person. </p>
</div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="i7ry"><div class="full-width-section__content-container div-container"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ix0j">
<p>By the end of this tutorial, we will have a fully functioning tip calculator which looks like this:</p>
<iframe height="700" width="850" scrolling="no" src="https://codepen.io/tutsplus/embed/BabEdLG?default-tab=result" frameborder="no" loading="lazy" allowfullscreen="true">
</iframe>
</div></div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iiaa">
<h2 id="toc-5279-html-structure">HTML Structure</h2>
<p>The structure will feature a simple interface consisting of the following elements:</p>
<ul>
<li>An <strong>input</strong> element to enter the amount</li>
<li>Four tip options to choose from</li>
<li>An <strong>input</strong> element for a number value</li>
<li>A <strong>calculate</strong> button for computation when clicked</li>
<li>An element to display the <strong>output</strong>.</li>
<li>All these input elements will be wrapped inside a <strong>form</strong>
</li>
</ul>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"container"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><h1></span>Tip Calculator<span style="color: #f4bf75"></h1></span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><form</span> <span style="color: #6a9fb5">action=</span><span style="color: #90a959">""</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><section</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"total-bill"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><h2></span>Total bill amount<span style="color: #f4bf75"></h2></span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><input</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"numbrt"</span> <span style="color: #6a9fb5">placeholder=</span><span style="color: #90a959">"0.00"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"amount"</span> <span style="color: #6a9fb5">value=</span><span style="color: #90a959">""</span> <span style="color: #6a9fb5">required</span> <span style="color: #f4bf75">/></span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></section></span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><section</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"select-tip"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><h2></span>Choose Tip<span style="color: #f4bf75"></h2></span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"radio-group"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><input</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"radio"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"5"</span> <span style="color: #6a9fb5">name=</span><span style="color: #90a959">"percentage"</span> <span style="color: #6a9fb5">value=</span><span style="color: #90a959">"5"</span> <span style="color: #f4bf75">/></span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><label</span> <span style="color: #6a9fb5">for=</span><span style="color: #90a959">"5"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><span></span> 5%<span style="color: #f4bf75"></span></span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></label></span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><input</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"radio"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"10"</span> <span style="color: #6a9fb5">name=</span><span style="color: #90a959">"percentage"</span> <span style="color: #6a9fb5">value=</span><span style="color: #90a959">"10"</span> <span style="color: #6a9fb5">checked</span> <span style="color: #f4bf75">/></span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><label</span> <span style="color: #6a9fb5">for=</span><span style="color: #90a959">"10"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><span></span> 10%<span style="color: #f4bf75"></span></span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></label></span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><input</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"radio"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"15"</span> <span style="color: #6a9fb5">name=</span><span style="color: #90a959">"percentage"</span> <span style="color: #6a9fb5">value=</span><span style="color: #90a959">"15"</span> <span style="color: #f4bf75">/></span>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><label</span> <span style="color: #6a9fb5">for=</span><span style="color: #90a959">"15"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-21" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>21</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><span></span>15%<span style="color: #f4bf75"></span></span>
</pre></td>
</tr>
<tr id="line-22" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>22</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></label></span>
</pre></td>
</tr>
<tr id="line-23" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>23</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><input</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"radio"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"20"</span> <span style="color: #6a9fb5">name=</span><span style="color: #90a959">"percentage"</span> <span style="color: #6a9fb5">value=</span><span style="color: #90a959">"20"</span> <span style="color: #f4bf75">/></span>
</pre></td>
</tr>
<tr id="line-24" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>24</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><label</span> <span style="color: #6a9fb5">for=</span><span style="color: #90a959">"20"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-25" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>25</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><span></span>20%<span style="color: #f4bf75"></span></span>
</pre></td>
</tr>
<tr id="line-26" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>26</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></label></span>
</pre></td>
</tr>
<tr id="line-27" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>27</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-28" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>28</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></section></span>
</pre></td>
</tr>
<tr id="line-29" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>29</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><section</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"people"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-30" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>30</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><h2></span>Number of People sharing<span style="color: #f4bf75"></h2></span>
</pre></td>
</tr>
<tr id="line-31" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>31</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><input</span> <span style="color: #6a9fb5">type=</span><span style="color: #90a959">"number"</span> <span style="color: #6a9fb5">placeholder=</span><span style="color: #90a959">"1"</span> <span style="color: #6a9fb5">value=</span><span style="color: #90a959">"2"</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"people"</span> <span style="color: #6a9fb5">required</span> <span style="color: #f4bf75">/></span>
</pre></td>
</tr>
<tr id="line-32" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>32</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></section></span>
</pre></td>
</tr>
<tr id="line-33" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>33</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><section</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"submit-form"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-34" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>34</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><button</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"calculate-btn"</span><span style="color: #f4bf75">></span>Calculate<span style="color: #f4bf75"></button></span>
</pre></td>
</tr>
<tr id="line-35" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>35</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"final-bill"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-36" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>36</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">id=</span><span style="color: #90a959">"tip"</span><span style="color: #f4bf75">></span>Tip Per Person: $0<span style="color: #f4bf75"></p></span>
</pre></td>
</tr>
<tr id="line-37" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>37</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></section></span>
</pre></td>
</tr>
<tr id="line-38" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>38</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></form></span>
</pre></td>
</tr>
<tr id="line-39" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>39</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-d5ui-css-styles">CSS Styles</h2>
<p>The first step is to define our global styles.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #aa759f">@import</span> <span style="color: #90a959">url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap')</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">:root</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--black</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#2c2626</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--darkgrey</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#6a5959</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--white</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#ffffff</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--green</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#80ed99</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--darkgreen</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#24532f</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--grey</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#f0f0f0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--radius</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">8px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Next, add the following styles to the body of the page.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">body</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--grey</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--black</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">flex</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">min-height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100vh</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-family</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">"DM Mono"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">monospace</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">text-align</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Set a width and some padding to the enclosing container element and the section elements.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table plaintext"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre>.container {
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> width: 400px;
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> padding: 20px 0 50px 0;
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre>}
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre>section {
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> margin: 20px 0 50px;
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre>}
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
</tbody></table></div>
<p>Let’s give both inputs the same styles to ensure consistency.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">input</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">90%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">box-sizing</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">border-box</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">text-align</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">end</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">outline</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">none</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--white</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">5px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--radius</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2px</span> <span style="color: #d0d0d0;background-color: #151515">solid</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--darkgrey</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Rather than using a default radio button, let’s create custom radio buttons for selecting tip percentages. We want our buttons to be square and with a border radius. We also want the percentage tip text displayed at the center of the square button. </p>
<p>First, let’s hide the default round design for the radio buttons:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.radio-group</span> <span style="color: #f4bf75">input</span><span style="color: #d0d0d0">[</span><span style="color: #f4bf75">type</span><span style="color: #d0d0d0">=</span><span style="color: #90a959">"radio"</span><span style="color: #d0d0d0">]</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">none</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Let’s create our custom-styled radio buttons, which will have the following styles:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.radio-group</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">flex</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">space-around</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.radio-group</span> <span style="color: #f4bf75">label</span><span style="color: #d0d0d0;background-color: #151515">::before</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">text-align</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">content</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">inline-block</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">60px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">50px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2px</span> <span style="color: #d0d0d0;background-color: #151515">solid</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--darkgrey</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--radius</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">left</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">50%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transform</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">translateY</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">-50%</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>We have used Flexbox to ensure the buttons are aligned horizontally and spaced equally. Use absolute positioning to ensure the labels are centered within the custom buttons, and add a background color when a button is selected.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.radio-group</span> <span style="color: #f4bf75">label</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">inline-block</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">relative</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">cursor</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">pointer</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.radio-group</span> <span style="color: #f4bf75">label</span> <span style="color: #f4bf75">span</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">absolute</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">left</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">20px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">-10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.radio-group</span> <span style="color: #f4bf75">input</span><span style="color: #d0d0d0">[</span><span style="color: #f4bf75">type</span><span style="color: #d0d0d0">=</span><span style="color: #90a959">"radio"</span><span style="color: #d0d0d0">]</span><span style="color: #d0d0d0;background-color: #151515">:checked</span> <span style="color: #d0d0d0">+</span> <span style="color: #f4bf75">label</span><span style="color: #d0d0d0;background-color: #151515">::before</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background-color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--green</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>The calculate button will have the following styles</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.calculate-btn</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--darkgreen</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#fff</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">none</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--radius</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">15px</span> <span style="color: #90a959">30px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Add the following styles for the inline elements for the final clean up.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">h1</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">3em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">50px</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">h2</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span> <span style="color: #90a959">0</span> <span style="color: #90a959">20px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">section</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">20px</span> <span style="color: #90a959">0</span> <span style="color: #90a959">50px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.final-bill</span> <span style="color: #f4bf75">p</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">1.5em</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-lkt2-making-it-work">Making it Work With JavaScript</h2>
<p>Let’s add the JavaScript functionality to make our Tip Calculator function as expected. We will do the following.</p>
<ol>
<li>Add an event listener to the calculate button.</li>
<li>When the button is clicked, it will invoke a function called <code>calculateTip()</code>
</li>
<li>The <code>calculateTip()</code> function will get the values from all the input elements, perform the computation, and display the tip per person at the bottom of the page.</li>
</ol>
<p>The final code looks like this:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">calculateBtn</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.calculate-btn</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">CalculateTip</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">e</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">event</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">preventDefault</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">tipMessage</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getElementById</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">tip</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">amount</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getElementById</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">amount</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">tipPercentage</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">'</span><span style="color: #90a959">[name="percentage"]:checked</span><span style="color: #90a959">'</span><span style="color: #d0d0d0">)</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">if</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">amount</span> <span style="color: #d0d0d0">===</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">alert</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">Please enter the amount.</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #aa759f">return</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">people</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getElementById</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">people</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">value</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">tip</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">amount</span> <span style="color: #d0d0d0">*</span> <span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">tipPercentage</span> <span style="color: #d0d0d0">/</span> <span style="color: #90a959">100</span><span style="color: #d0d0d0">))</span> <span style="color: #d0d0d0">/</span> <span style="color: #d0d0d0;background-color: #151515">people</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">tipMessage</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #90a959">`The Tip per person is $</span><span style="color: #d0d0d0">${</span><span style="color: #d0d0d0;background-color: #151515">parseFloat</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">tip</span><span style="color: #d0d0d0">).</span><span style="color: #d0d0d0;background-color: #151515">toFixed</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">2</span><span style="color: #d0d0d0">)}</span><span style="color: #90a959">`</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-20" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>20</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">calculateBtn</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">addEventListener</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">click</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">,</span> <span style="color: #d0d0d0;background-color: #151515">CalculateTip</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Here is the final result!</p>
<p><iframe src="https://codepen.io/tutsplus/embed/BabEdLG?default-tab=result" width="850" height="700" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
<h2 id="toc-w416-conclusion">Conclusion</h2>
<p>This tutorial has covered how to create a fully functioning tip calculator, which will be helpful for the next time you are out with your friends!</p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/108505/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108505/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108505/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108505/a2t.img" width="1" /></div>2024-03-12 12:18:16 UTC2024-03-12 12:18:16 UTCEsther Vaatitag:webdesign.tutsplus.com,2005:PostPresenter/cms-394182021-12-16T23:11:29+00:00Best Themes for Your Shopify Jewelry Store in 2024<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="igcr"><p>Shopify jewelry stores will be a hit during 2024! In this article, we’ll share some of the <a href="https://themeforest.net/category/ecommerce/shopify?term=jewelry" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">best jewelry Shopify themes</a> from ThemeForest to get you started selling jewelry on Shopify.</p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ie6e1">
<p>Gone are the days when the only option to purchse jewelry was to walk into a brick-and-mortar store. With the expansion of eCommerce options, now everyone can buy jewelry using their electronic devices, without leaving their homes.</p>
<p>In fact, online jewelry sales have been growing an average of 8% annually over the last decade in the US. Incredibly, in 2023 online jewelry sales <a href="https://www.oberlo.com/statistics/online-jewelry-sales-statistics" target="_blank" rel="noopener">reached over $14 billion</a> USD.</p>
<figure class="post_image"><a href="https://themeforest.net/item/bead-jewelry-and-accessories-responsive-shopify-theme/33960210" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme-intro.jpg" alt="This beautiful and trendy jewelry Shopify theme is available on ThemeForest." loading="lazy" width="870px" height="457px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme-intro.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme-intro.jpg" alt="This beautiful and trendy jewelry Shopify theme is available on ThemeForest." loading="lazy" width="650px" height="344px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme-intro.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme-intro.jpg" alt="This beautiful and trendy jewelry Shopify theme is available on ThemeForest." loading="lazy" width="380px" height="205px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme-intro.jpg 2x"></a>
<figcaption>This beautiful and <a href="https://themeforest.net/item/bead-jewelry-and-accessories-responsive-shopify-theme/33960210" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">trendy jewelry Shopify theme</a> is available on ThemeForest.</figcaption>
</figure>
<p>With this in mind, now it’s the perfect time to start your own jewelry eCommerce store. </p>
<h2 id="toc-bxsj-where-to-find-the-best-jewelry-shopify-themes-for-2024">Where To Find the Best Jewelry Shopify Themes for 2024</h2>
<p>Check out hundreds of Jewelry Shopify templates on <a href="https://themeforest.net/" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">ThemeForest</a>, all available with simple licensing.</p>
<figure class="post_image"><a href="https://themeforest.net/category/ecommerce/shopify?term=jewelry" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Shopify%20jewelry%20stores%20themeforest.jpg" alt="Find hundreds of premium Shopify jewelry themes on ThemeForest." loading="lazy" width="870px" height="630px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Shopify%20jewelry%20stores%20themeforest.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Shopify%20jewelry%20stores%20themeforest.jpg" alt="Find hundreds of premium Shopify jewelry themes on ThemeForest." loading="lazy" width="650px" height="472px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Shopify%20jewelry%20stores%20themeforest.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Shopify%20jewelry%20stores%20themeforest.jpg" alt="Find hundreds of premium Shopify jewelry themes on ThemeForest." loading="lazy" width="380px" height="278px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Shopify%20jewelry%20stores%20themeforest.jpg 2x"></a>
<figcaption>Find <a href="https://themeforest.net/category/ecommerce/shopify?term=jewelry" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">hundreds of premium Shopify jewelry themes</a> on ThemeForest.</figcaption>
</figure>
<p>This marketplace offers you a huge variety of premium jewelry Shopify themes. From robust, multipurpose themes to <a href="https://themeforest.net/category/ecommerce/shopify?term=jewelry" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">specialized Shopify jewelry themes</a>, you’ll find what you’re looking for there.</p>
<p>When you buy a jewelry Shopify theme from ThemeForest, you’re also getting lifetime updates, 24/7 support from the creators and complete documentation that follows the latest web design guidelines.</p>
<h2 id="toc-rev7-15-top-jewelry-shopify-themes-to-use-in-2022">18 Top Jewelry Shopify Themes to Use in 2024</h2>
<p>To kick off this list we’ll share our selection of jewelry Shopify templates from Shopify’s own theme store.</p>
</div><div data-content-block-type="Grid" class="content-block content-block-grid"><div class="element-row three-column-grid grid-gap--col-extra-wide grid-gap--row-extra-wide">
<div class="element-col">
<figure class="post_image"><a href="https://shopify.pxf.io/9gQy3Q"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/39418/image-upload/monaco.jpg" alt="monaco shopify theme" id="iil67" loading="lazy" width="870px" height="573px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/39418/image-upload/monaco.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/39418/image-upload/monaco.jpg" alt="monaco shopify theme" id="iil67" loading="lazy" width="650px" height="430px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/39418/image-upload/monaco.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/39418/image-upload/monaco.jpg" alt="monaco shopify theme" id="iil67" loading="lazy" width="380px" height="254px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/39418/image-upload/monaco.jpg 2x"></a></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="itfqp">
<h3 id="toc-a1ri-monaco-shopify-theme">1. <a href="https://shopify.pxf.io/9gQy3Q" target="_blank" rel="noopener">Monaco Shopify Jewelry Theme</a>
</h3>
<ul>
<li><span>Showcase your brand’s personality with a huge collection of exceptional sections</span></li>
<li><span>Fullwidth Product Showcase</span></li>
<li><span>Designed for stores that do in-person selling</span></li>
</ul>
</div>
</div>
<div class="element-col">
<figure class="post_image"><a href="https://shopify.pxf.io/PykmZq"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/39418/image-upload/woodstock.jpg" alt="woodstock shopify theme" id="i3vpp" loading="lazy" width="870px" height="573px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/39418/image-upload/woodstock.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/39418/image-upload/woodstock.jpg" alt="woodstock shopify theme" id="i3vpp" loading="lazy" width="650px" height="430px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/39418/image-upload/woodstock.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/39418/image-upload/woodstock.jpg" alt="woodstock shopify theme" id="i3vpp" loading="lazy" width="380px" height="254px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/39418/image-upload/woodstock.jpg 2x"></a></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i93ub">
<h3 id="toc-rjkk-woodstock-shopify-theme">2. <a href="https://shopify.pxf.io/PykmZq" target="_blank" rel="noopener">Woodstock Shopify Theme</a>
</h3>
<ul>
<li>Built for speed</li>
<li>Designed for stores that process a large number of transactions in a given period</li>
<li>Smart product information layout makes buying experience convenient and easy</li>
</ul>
</div>
</div>
<div class="element-col">
<figure class="post_image"><a href="https://shopify.pxf.io/GmqR5B"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/39418/image-upload/gem.jpg" alt="gem shopify theme" id="iqrke" loading="lazy" width="870px" height="573px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/39418/image-upload/gem.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/39418/image-upload/gem.jpg" alt="gem shopify theme" id="iqrke" loading="lazy" width="650px" height="430px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/39418/image-upload/gem.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/39418/image-upload/gem.jpg" alt="gem shopify theme" id="iqrke" loading="lazy" width="380px" height="254px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/39418/image-upload/gem.jpg 2x"></a></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="if3v2">
<h3 id="toc-cnxm-gem-shopify-theme">3. <a href="https://shopify.pxf.io/GmqR5B" target="_blank" rel="noopener">Gem Shopify Jewelry Theme</a>
</h3>
<ul>
<li>Quick Buy, Countdown, Shop the Look, and storytelling features like media with text, and flexible product media</li>
<li>Each section empowers you to express your brand without compromising on performance, SEO, or speed</li>
</ul>
</div>
</div>
</div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="isk7">
<p>And now, our favorite <a href="https://themeforest.net/category/ecommerce/shopify?term=jewelry" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">jewelry eCommerce themes</a> from Themeforest.</p>
<h3 id="toc-3dok-corano---jewelry-store-shopify-theme">4. <a href="https://themeforest.net/item/corano-jewellery-shopify-theme/24593861" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Corano - Jewelry Shopify Store Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/corano-jewellery-shopify-theme/24593861" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Corano%20-%20Jewelry%20Store%20Shopify%20Theme.jpg" alt="Corano - Jewelry Store Shopify Theme" loading="lazy" width="870px" height="1273px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Corano%20-%20Jewelry%20Store%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Corano%20-%20Jewelry%20Store%20Shopify%20Theme.jpg" alt="Corano - Jewelry Store Shopify Theme" loading="lazy" width="650px" height="949px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Corano%20-%20Jewelry%20Store%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Corano%20-%20Jewelry%20Store%20Shopify%20Theme.jpg" alt="Corano - Jewelry Store Shopify Theme" loading="lazy" width="380px" height="551px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Corano%20-%20Jewelry%20Store%20Shopify%20Theme.jpg 2x"></a></figure>
<p>Planning to set up Shopify jewelry stores? You need a premium and professional theme created specifically for that purpose. Corano is one of the best jewelry Shopify templates on ThemeForest. This recently updated theme has a 4.8 stars rating, it’s fully responsive nd mobile optimized.</p>
<p>One of the best features of this Shopify jewelry theme is that it’s migrated to Shopify Online Store 2.0. You’ll get the advanced and updated functionalities, like the ability to add sections to all pages. </p>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">This Shopify jewelry theme features 8 classic and unique homepages. <a href="https://preview.themeforest.net/item/corano-jewellery-shopify-theme/full_screen_preview/24593861" data-action="click->ga-analytics#sendMarketClickEvent">Check them out in the live preview.</a>
</div>
<a href="https://preview.themeforest.net/item/corano-jewellery-shopify-theme/full_screen_preview/24593861" data-action="click->ga-analytics#sendMarketClickEvent"> </a>
</div>
<h3 id="toc-slun-monsta---responsive-jewelry-shopify-theme">5. <a href="https://themeforest.net/item/monsta-jewelry-shopify-theme/25086149" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Monsta - Responsive Jewelry Shopify Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/monsta-jewelry-shopify-theme/25086149" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Monsta%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg" alt="Monsta - Responsive Jewelry Shopify Theme" loading="lazy" width="870px" height="1174px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Monsta%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Monsta%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg" alt="Monsta - Responsive Jewelry Shopify Theme" loading="lazy" width="650px" height="875px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Monsta%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Monsta%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg" alt="Monsta - Responsive Jewelry Shopify Theme" loading="lazy" width="380px" height="509px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Monsta%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg 2x"></a></figure>
<p>Monsta is a recently updated Shopify jewelry theme. This creative template features a responsive design, RTL support, dropshipping and 8 homepage layouts. </p>
<p>This jewelry Shopify theme is easy to set up and customize thanks to the drag and drop builder. You’ll also get:</p>
<ul>
<li>Unlimited Google Fonts</li>
<li>Free updates</li>
<li>Well documented site</li>
<li>SEO friendly code</li>
<li>Cross browser support </li>
</ul>
<h3 id="toc-061l-bead---jewelry-and-accessories-responsive-shopify-theme">6. <a href="https://themeforest.net/item/bead-jewelry-and-accessories-responsive-shopify-theme/33960210" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Bead - Accessories and Jewelry Shopify Templates</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/bead-jewelry-and-accessories-responsive-shopify-theme/33960210" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg" alt="Bead - Jewelry And Accessories Responsive Shopify Theme " loading="lazy" width="870px" height="1159px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg" alt="Bead - Jewelry And Accessories Responsive Shopify Theme " loading="lazy" width="650px" height="864px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg" alt="Bead - Jewelry And Accessories Responsive Shopify Theme " loading="lazy" width="380px" height="502px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Bead%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg 2x"></a></figure>
<p>This brand new Shopify jewelry theme is ready to support the latest Shopify version. Bead jewelry Shopify was created with mobile devices in mind. </p>
<p>If you like fast-loading Shopify jewelry stores, then you’ll like Bead. These Shopify jewelry templates feature a fast and complete Ajax shop. Bead- based Sopify jewelry stores are designed to be SEO friendly and meets HTML 5 standards. See what else includes:</p>
<ul>
<li>Flexible Built-in Mega Menu</li>
<li>Advanced Layered Navigation</li>
<li>Unlimited Google Fonts</li>
<li>Customer Reviews</li>
<li>Product Carousel</li>
<li>HTML5 & CSS3 & Sass CSS</li>
<li>24/7 Online Support </li>
</ul>
<h3 id="toc-5mrv-ruby---jewelry-store-shopify-theme">
<span class="sectionnum">7.</span> <a href="https://themeforest.net/item/ruby-jewelry-store-shopify-theme/23210870" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Ruby - Shopify Themes for Jewelry</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/ruby-jewelry-store-shopify-theme/23210870" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Ruby%20-%20Jewelry%20Store%20Shopify%20Theme.jpg" alt="Ruby - Jewelry Store Shopify Theme" loading="lazy" width="870px" height="1392px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Ruby%20-%20Jewelry%20Store%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Ruby%20-%20Jewelry%20Store%20Shopify%20Theme.jpg" alt="Ruby - Jewelry Store Shopify Theme" loading="lazy" width="650px" height="1037px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Ruby%20-%20Jewelry%20Store%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Ruby%20-%20Jewelry%20Store%20Shopify%20Theme.jpg" alt="Ruby - Jewelry Store Shopify Theme" loading="lazy" width="380px" height="601px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Ruby%20-%20Jewelry%20Store%20Shopify%20Theme.jpg 2x"></a></figure>
<p>Ruby is another freshly updated theme for Shopify jewelry stores. This one stands out with its fresh and modern design. This is a great jewelry eCommerce theme for drop shipping and RTL websites.</p>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">Ruby has 6 minimal layouts for Shopify jewelry stores. <a href="https://preview.themeforest.net/item/ruby-jewelry-store-shopify-theme/full_screen_preview/23210870" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Check them out here.</a>
</div>
<a href="https://preview.themeforest.net/item/ruby-jewelry-store-shopify-theme/full_screen_preview/23210870" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent"> </a>
</div>
<p>The jewelry Shopify template also features a 100% responsive design and it’s easy to customize thanks to the drag and drop page builder. </p>
<h3 id="toc-w8i4-lopez-jewelry-shopify-theme">8. <a href="https://themeforest.net/item/lopez-jewelry-shopify-theme/24569372" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Lopez – Jewelry Shopify Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/lopez-jewelry-shopify-theme/24569372" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Lopez%20%E2%80%93%20Jewelry%20Shopify%20Theme.jpg" alt="Lopez – Jewelry Shopify Theme" loading="lazy" width="870px" height="1116px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Lopez%20%E2%80%93%20Jewelry%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Lopez%20%E2%80%93%20Jewelry%20Shopify%20Theme.jpg" alt="Lopez – Jewelry Shopify Theme" loading="lazy" width="650px" height="832px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Lopez%20%E2%80%93%20Jewelry%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Lopez%20%E2%80%93%20Jewelry%20Shopify%20Theme.jpg" alt="Lopez – Jewelry Shopify Theme" loading="lazy" width="380px" height="484px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Lopez%20%E2%80%93%20Jewelry%20Shopify%20Theme.jpg 2x"></a></figure>
<p>This jewelry Shopify theme is ready for the latest Shopify version. It’s perfect for Shopify jewelry stores that feature unique products.</p>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">The Shopify jewelry theme includes two sleek layouts. <a href="https://preview.themeforest.net/item/lopez-jewelry-shopify-theme/full_screen_preview/24569372" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Check them out here!</a>
</div>
<a href="https://preview.themeforest.net/item/lopez-jewelry-shopify-theme/full_screen_preview/24569372" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent"> </a>
</div>
<p>These Shopify themes for jewelry are 100% responsive and optimized for mobile devices. And don’t worry about coding knowledge. With drag and drop builder, you’ll set up your store in a few clicks!</p>
<h3 id="toc-0zei-responsive-jewelry-shopify-theme">9. <a href="https://themeforest.net/item/jewelry-responsive-shopify-theme/12066973" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Responsive Jewelry Shopify Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/jewelry-responsive-shopify-theme/12066973" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Responsive%20Jewelry%20Shopify%20Theme.jpg" alt="Responsive Jewelry Shopify Theme" loading="lazy" width="870px" height="1285px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Responsive%20Jewelry%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Responsive%20Jewelry%20Shopify%20Theme.jpg" alt="Responsive Jewelry Shopify Theme" loading="lazy" width="650px" height="958px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Responsive%20Jewelry%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Responsive%20Jewelry%20Shopify%20Theme.jpg" alt="Responsive Jewelry Shopify Theme" loading="lazy" width="380px" height="556px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Responsive%20Jewelry%20Shopify%20Theme.jpg 2x"></a></figure>
<p>If you like Shopify jewelry stores with a clean and minimal design, this theme is for you. This jewelry Shopify theme features a fullscreen slideshow homepage with a mega menu and advanced filters.</p>
<p>Some key features include:</p>
<ul>
<li>Fully customizable design</li>
<li>Multi language support</li>
<li>Integration with Google Fonts</li>
<li>Mailchimp support </li>
<li>Detailed documentation and support</li>
</ul>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">You can request a full demo data setup for the Shopify 2.0 version.</div>
</div>
<h3>
<span class="sectionnum">10.</span> <a href="https://themeforest.net/item/jewelskart-jewelry-responsive-shopify-theme/34581807" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Jewelskart - Responsive Jewelry Shopify Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/jewelskart-jewelry-responsive-shopify-theme/34581807" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Jewelskart%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg" alt="Jewelskart - Responsive Jewelry Shopify Theme" loading="lazy" width="870px" height="1398px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Jewelskart%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Jewelskart%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg" alt="Jewelskart - Responsive Jewelry Shopify Theme" loading="lazy" width="650px" height="1041px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Jewelskart%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Jewelskart%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg" alt="Jewelskart - Responsive Jewelry Shopify Theme" loading="lazy" width="380px" height="604px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Jewelskart%20-%20Responsive%20Jewelry%20Shopify%20Theme.jpg 2x"></a></figure>
<p>Interested in the <span>best Shopify themes for jewelry</span> on the market? Jewelskart is for you. This jewelry eCommerce template just arrived to ThemeForest.</p>
<p>Jewelskart features a modern and minimalist responsive design. If you want Shopify jewelry stores with dropshipping and affiliate products, this theme support it. Other great features include: </p>
<ul>
<li>12+ product layout</li>
<li>8+ Shop layout</li>
<li>Multi-language and RTL support</li>
<li>Dynamic checkout </li>
<li>Ajax live search</li>
<li>Catalogue mode</li>
<li>Currency switcher</li>
<li>And more!</li>
</ul>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">Don’t hesitate to check out the <a href="https://preview.themeforest.net/item/jewelskart-jewelry-responsive-shopify-theme/full_screen_preview/34581807" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">live version here</a>!</div>
</div>
<h3 id="toc-fa6f-reprizo---jewelry-watch-store-shopify-theme">11. <a href="https://themeforest.net/item/reprizo-jewelry-watch-store-shopify-theme/33960093" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Reprizo - Watch & Jewelry Shopify Store Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/reprizo-jewelry-watch-store-shopify-theme/33960093" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Reprizo%20-%20Jewelry%20&%20Watch%20Store%20Shopify%20Theme.jpg" alt="Reprizo - Jewelry & Watch Store Shopify Theme" loading="lazy" width="870px" height="1458px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Reprizo%20-%20Jewelry%20&%20Watch%20Store%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Reprizo%20-%20Jewelry%20&%20Watch%20Store%20Shopify%20Theme.jpg" alt="Reprizo - Jewelry & Watch Store Shopify Theme" loading="lazy" width="650px" height="1086px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Reprizo%20-%20Jewelry%20&%20Watch%20Store%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Reprizo%20-%20Jewelry%20&%20Watch%20Store%20Shopify%20Theme.jpg" alt="Reprizo - Jewelry & Watch Store Shopify Theme" loading="lazy" width="380px" height="629px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Reprizo%20-%20Jewelry%20&%20Watch%20Store%20Shopify%20Theme.jpg 2x"></a></figure>
<p>Get Rerpizo if you love sleek and minimal Shopify jewelry stores. This jewelry Shopify theme is perfect for a luxury brand that wants to make their products the center of attention.</p>
<p>Reprizo includes 3 minimal and elegant demos with intuitive installation and a powerful admin panel. This Shopify jewelry theme is so easy to install and customize because it’s based on a block system. It’s also fully optimized for mobile and entirely customizable. </p>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">Don’t forget to visit the <a href="https://preview.themeforest.net/item/reprizo-jewelry-watch-store-shopify-theme/full_screen_preview/33960093" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">elegant live preview here</a>!</div>
</div>
<h3 id="toc-u9y9-jewels--jewelry-shopify-theme">
<span class="sectionnum">12.</span> <a href="https://themeforest.net/item/jewels-responsive-shopify-theme/20323802" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Jewels- Jewelry Shopify Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/jewels-responsive-shopify-theme/20323802" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Jewels-%20Jewelry%20Shopify%20Theme.jpg" alt="Jewels- Jewelry Shopify Theme" loading="lazy" width="870px" height="1434px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Jewels-%20Jewelry%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Jewels-%20Jewelry%20Shopify%20Theme.jpg" alt="Jewels- Jewelry Shopify Theme" loading="lazy" width="650px" height="1068px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Jewels-%20Jewelry%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Jewels-%20Jewelry%20Shopify%20Theme.jpg" alt="Jewels- Jewelry Shopify Theme" loading="lazy" width="380px" height="619px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Jewels-%20Jewelry%20Shopify%20Theme.jpg 2x"></a></figure>
<p>This Shopify jewelry theme is one of the popular options for jewelry eCommerce stores. These Shopify jewelry templates will help you create Shopify jewelry stores with a classic look and a responsive design. The Jewelry Shopify Theme features:</p>
<ul>
<li>Powerful Admin panel</li>
<li>Coded with HTML5 and CSS3</li>
<li>SEO optimized </li>
<li>Drag and Drop homepage blocks</li>
<li>Ajax shopping cart</li>
<li>Product owl carousel</li>
<li>Currency switcher</li>
</ul>
<p>This jewelry eCommerce theme has a 5-stars rating and users love the support from the author. User seventeenplus said:</p>
<blockquote>
<p>“If I could give this 1000 stars I would do it. The Theme is wonderful, and the customer service has been outstanding. They have responded to me very fast and helped me to change things on my website that I was unable to do for myself.”</p>
</blockquote>
<h3 id="toc-bdle-jewellia---jewelry-and-accessories-responsive-shopify-theme">
<span class="sectionnum">13.</span> <a href="https://themeforest.net/item/jewellia-jewelry-and-accessories-responsive-shopify-theme/31334410" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Jewellia - Jewelry And Accessories Responsive Shopify Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/jewellia-jewelry-and-accessories-responsive-shopify-theme/31334410" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Jewellia%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg" alt="Jewellia - Jewelry And Accessories Responsive Shopify Theme" loading="lazy" width="870px" height="1300px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Jewellia%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Jewellia%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg" alt="Jewellia - Jewelry And Accessories Responsive Shopify Theme" loading="lazy" width="650px" height="969px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Jewellia%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Jewellia%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg" alt="Jewellia - Jewelry And Accessories Responsive Shopify Theme" loading="lazy" width="380px" height="562px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Jewellia%20-%20Jewelry%20And%20Accessories%20Responsive%20Shopify%20Theme.jpg 2x"></a></figure>
<p>If you're looking for the best Shopify theme for jewelry, Jewellia offers you five different demos to create different Shopify jewelry stores. This jewelry Shopify theme stands out for its fast loading speed, SEO features and customization options.</p>
<p>You don’t need coding knowledge to set up this new jewelry eCommerce theme. Other great features include:</p>
<ul>
<li>Flexible Built-in Mega Menu</li>
<li>Advanced Layered Navigation</li>
<li>Unlimited Google Fonts</li>
<li>Responsive & Retina Ready</li>
<li>Ajax Add to Cart & Wishlist</li>
<li>Ajax Grid & List view collection</li>
<li>Customer Reviews</li>
<li>Product Carousel</li>
<li>HTML5 & CSS3 & Sass CSS</li>
</ul>
<h3 id="toc-f00h-nagai---jewelry-store-shopify-theme">
<span class="sectionnum">14.</span> <a href="https://themeforest.net/item/nagai-jewelry-store-shopify-theme/27939282" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Nagai - Jewelry Store Shopify Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/nagai-jewelry-store-shopify-theme/27939282" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Nagai%20-%20Jewelry%20Store%20Shopify%20Theme.jpg" alt="Nagai - Jewelry Store Shopify Theme" loading="lazy" width="870px" height="1270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Nagai%20-%20Jewelry%20Store%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Nagai%20-%20Jewelry%20Store%20Shopify%20Theme.jpg" alt="Nagai - Jewelry Store Shopify Theme" loading="lazy" width="650px" height="946px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Nagai%20-%20Jewelry%20Store%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Nagai%20-%20Jewelry%20Store%20Shopify%20Theme.jpg" alt="Nagai - Jewelry Store Shopify Theme" loading="lazy" width="380px" height="549px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Nagai%20-%20Jewelry%20Store%20Shopify%20Theme.jpg 2x"></a></figure>
<p>Nagai is a new theme for Shopify jewelry stores. Start selling your jewelry on Shopify with a classic design in mind. Shopify themes for jewelry like this one are packed with useful features such as:</p>
<ul>
<li>Powerful Admin panel</li>
<li>Fully responsive design</li>
<li>Easy to customize</li>
<li>Ajax shopping cart</li>
<li>Currency switcher</li>
<li>Coded with HTML5 and CSS3</li>
</ul>
<h3 id="toc-pic8-lezada---multipurpose-shopify-theme">15. <a href="https://themeforest.net/item/lezada-multipurpose-shopify-theme/23483748" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Lezada - Multipurpose Shopify Jewelry Stores Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/lezada-multipurpose-shopify-theme/23483748" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Lezada%20-%20Multipurpose%20Shopify%20Theme.jpg" alt="Lezada - Multipurpose Shopify Theme" loading="lazy" width="870px" height="1388px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Lezada%20-%20Multipurpose%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Lezada%20-%20Multipurpose%20Shopify%20Theme.jpg" alt="Lezada - Multipurpose Shopify Theme" loading="lazy" width="650px" height="1034px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Lezada%20-%20Multipurpose%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Lezada%20-%20Multipurpose%20Shopify%20Theme.jpg" alt="Lezada - Multipurpose Shopify Theme" loading="lazy" width="380px" height="599px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Lezada%20-%20Multipurpose%20Shopify%20Theme.jpg 2x"></a></figure>
<p>While there are many great Shopify jewelry themes especially built for that, multipurpose Shopify themes are also worth checking out.</p>
<p>Lezada is one of the top multipurpose themes on ThemeForest. It boasts a 4.9 stars rating and over 2,000 sales. And it supports Shopify latest version.</p>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">Lezada features 225+ homepages! <a href="https://preview.themeforest.net/item/lezada-multipurpose-shopify-theme/full_screen_preview/23483748" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Check them out in the live preview</a>.</div>
</div>
<p>If you prefer minimal and creative themes that offers you dozens of options, Lezada is a great option for you.</p>
<p>This theme has five different Shopify jewelry stores demos. It’s super fast, responsive and 100% customizable. This is a great option for a jewelry eCommerce in 2024.</p>
<blockquote>
<p>“This Theme made a huge difference to the quality of our Shopify store. As well as greatly improving the speed of the site the theme also allows the flexibility, design and style to show our products to the best advantage. The many pages of demo layouts mean you are spoilt for choice. The support is there when you need it and is a fast response. A great buy for such a small price.” -User bigedman66</p>
</blockquote>
<h3 id="toc-qkmh-kalles---clean-versatile-responsive-shopify-theme">
<span class="sectionnum">16.</span> <a href="https://themeforest.net/item/kalles-clean-versatile-shopify-theme/26320622" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Kalles - Clean, Versatile, Responsive Shopify Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/kalles-clean-versatile-shopify-theme/26320622" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Kalles%20-%20Clean,%20Versatile,%20Responsive%20Shopify%20Theme.jpg" alt="Kalles - Clean, Versatile, Responsive Shopify Theme" loading="lazy" width="870px" height="1301px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Kalles%20-%20Clean,%20Versatile,%20Responsive%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Kalles%20-%20Clean,%20Versatile,%20Responsive%20Shopify%20Theme.jpg" alt="Kalles - Clean, Versatile, Responsive Shopify Theme" loading="lazy" width="650px" height="969px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Kalles%20-%20Clean,%20Versatile,%20Responsive%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Kalles%20-%20Clean,%20Versatile,%20Responsive%20Shopify%20Theme.jpg" alt="Kalles - Clean, Versatile, Responsive Shopify Theme" loading="lazy" width="380px" height="563px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Kalles%20-%20Clean,%20Versatile,%20Responsive%20Shopify%20Theme.jpg 2x"></a></figure>
<p>With a solid five-stars rating and almost 7,000 sales, Kalles is another crowd favorite. </p>
<p>This top multipurpose Shopify theme has a one-click installation, which makes it a great choice for first-time users. It’s full responsive and mobile optimized, and ready for Shopify 2.0!</p>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">You can choose from over 40+ stunning demos. <a href="https://themeforest.net/item/kalles-clean-versatile-shopify-theme/26320622" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Check them out here.</a> </div>
</div>
<blockquote>
<p>“After always running into brick walls with my themes; I’m finally impressed with a theme that is customizable. Support was great with a new little things I couldn’t find/do myself. I think Shopify 2.0 has made massive changes and I’m really impressed with this theme.” -User bridesmaidboxes</p>
</blockquote>
<h3 id="toc-1w7m-ella---multipurpose-shopify-sections-theme">
<span class="sectionnum">17.</span> <a href="https://themeforest.net/item/ella-responsive-shopify-template/9691007" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Ella - Multipurpose Shopify Sections Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/ella-responsive-shopify-template/9691007" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Ella%20-%20Multipurpose%20Shopify%20Sections%20Theme.jpg" alt="Ella - Multipurpose Shopify Sections Theme" loading="lazy" width="870px" height="1326px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Ella%20-%20Multipurpose%20Shopify%20Sections%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Ella%20-%20Multipurpose%20Shopify%20Sections%20Theme.jpg" alt="Ella - Multipurpose Shopify Sections Theme" loading="lazy" width="650px" height="988px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Ella%20-%20Multipurpose%20Shopify%20Sections%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Ella%20-%20Multipurpose%20Shopify%20Sections%20Theme.jpg" alt="Ella - Multipurpose Shopify Sections Theme" loading="lazy" width="380px" height="573px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Ella%20-%20Multipurpose%20Shopify%20Sections%20Theme.jpg 2x"></a></figure>
<p>Shopify multipurpose themes are a great option because they’re always updated and backed with thousands of sales and good reviews.</p>
<p>Ella is one of those all-time favorite themes. It’s an all-in-one template that helps you boost your sales. Ella features unique product banners and blocks, 9+ shopping pages and a modern UI/UX mobile optimized layout.</p>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">See Ella’s awesome 23+ homepage layouts here <a href="https://preview.themeforest.net/item/ella-responsive-shopify-template/full_screen_preview/9691007" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">in the live preview</a>!</div>
</div>
<h3 id="toc-49dl-wokiee---multipurpose-shopify-theme">18. <a href="https://themeforest.net/item/wokiee-multipurpose-shopify-theme/22559417" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">Wokiee - Multipurpose Shopify Theme</a>
</h3>
<figure class="post_image"><a href="https://themeforest.net/item/wokiee-multipurpose-shopify-theme/22559417" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/2659/posts/39418/image-upload/Wokiee%20-%20Multipurpose%20Shopify%20Theme.jpg" alt="Wokiee - Multipurpose Shopify Theme" loading="lazy" width="870px" height="1329px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/2659/posts/39418/image-upload/Wokiee%20-%20Multipurpose%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/2659/posts/39418/image-upload/Wokiee%20-%20Multipurpose%20Shopify%20Theme.jpg" alt="Wokiee - Multipurpose Shopify Theme" loading="lazy" width="650px" height="990px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/2659/posts/39418/image-upload/Wokiee%20-%20Multipurpose%20Shopify%20Theme.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/posts/39418/image-upload/Wokiee%20-%20Multipurpose%20Shopify%20Theme.jpg" alt="Wokiee - Multipurpose Shopify Theme" loading="lazy" width="380px" height="574px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/posts/39418/image-upload/Wokiee%20-%20Multipurpose%20Shopify%20Theme.jpg 2x"></a></figure>
<p>We close this selection with another brilliant multipurpose theme. Wookie has a 5-stars rating, 18,000+ sales and is ready for Shopify 2.0.</p>
<p>This top multipurpose theme has everything your Shopify jewelry stores will need. You’ll be able to create a fast, responsive and mobile-ready website.</p>
<p>Some of its key features are:</p>
<ul>
<li>Fast-loading speed</li>
<li>Dynamic filtering</li>
<li>99+ new content blocks </li>
<li>Fast product configuration</li>
<li>Optimized for drop shipping</li>
<li>And more! </li>
</ul>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">Check out Wookie’s <a href="https://preview.themeforest.net/item/wokiee-multipurpose-shopify-theme/full_screen_preview/22559417" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">82 homepage layouts and more details here</a>!</div>
</div>
<h2>Learn More About Shopify with These Resources</h2>
<p>Hope you enjoyed some of the best Shopify themes for jewelry businesses. If you’re new to the world of eCommerce and Shopify, we’ve got plenty of tutorials and resources here in Envato Tuts+:</p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/what-is-shopify--cms-36741"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">What Is Shopify?</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Maryna Petrenko</div>
<div class="roundup-block__published-date">14 Nov 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-set-up-shopify-store--cms-36818"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Set up a Shopify Store</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Maryna Petrenko</div>
<div class="roundup-block__published-date">14 Jun 2021</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/shopify-vs-wordpress-which-is-best--cms-38371"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/38371/preview_image/cat-vs-dog-F7QNTWW.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/38371/preview_image/cat-vs-dog-F7QNTWW.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/38371/preview_image/cat-vs-dog-F7QNTWW.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/38371/preview_image/cat-vs-dog-F7QNTWW.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/769/posts/38371/preview_image/cat-vs-dog-F7QNTWW.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/769/posts/38371/preview_image/cat-vs-dog-F7QNTWW.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Shopify vs. WordPress: Which Is Better?</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1251/profiles/19759/profileImage/monty_profile.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Monty Shokeen</div>
<div class="roundup-block__published-date">30 Sep 2021</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/how-to-add-products-to-shopify--cms-36817"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36817/preview_image/product-add.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36817/preview_image/product-add.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36817/preview_image/product-add.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36817/preview_image/product-add.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/36817/preview_image/product-add.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/36817/preview_image/product-add.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Add Products to Shopify</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Maryna Petrenko</div>
<div class="roundup-block__published-date">16 Jul 2021</div>
</div>
</div>
</div>
</div></a></li>
</ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ip8g"><p>We also have a great selection of Shopify videos from the <a href="https://www.youtube.com/user/TutsPremium" target="_blank" rel="noopener"><strong>Envato Tuts+ YouTube channel</strong></a>. Don’t forget to browse the channel for even more amazing content!</p></div><div data-content-block-type="EmbedCourse" class="content-block content-block-embedcourse" id="idcq">
<div class="embed-course-details__wrapper div-container">
<div class="div-container">
<div class="embed-course-summary__wrapper content-container"> <div class="free-course__label">FREE</div>
<div class="embed-course__duration">
<i class="fa fa-clock-o far fa-clock"></i>
<span>1.2 Hours</span>
</div>
</div>
<h2>How to Build a Shopify Store | Free Course</h2>
</div>
<div class="embed-course__contents div-container">
<div class="embed-course__description" id="ihmvh"><p>Learn how to build a Shopify store from start to finish, with Adi Purdila. </p></div>
<ul class="embed-course__chapters-title-list"></ul>
</div>
</div>
<div class="embed-course-video__wrapper content-container"> <figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=yfZQacyelM4&t=0">
<iframe src="https://www.youtube.com/embed/yfZQacyelM4?rel=0&start=0" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy"></iframe>
</figure> </div>
</div><div data-content-block-type="EmbedCourse" class="content-block content-block-embedcourse" id="ihqye">
<div class="embed-course-details__wrapper div-container">
<div class="div-container">
<div class="embed-course-summary__wrapper content-container"> <div class="free-course__label">FREE</div>
<div class="embed-course__duration">
<i class="fa fa-clock-o far fa-clock"></i>
<span>6 Minutes</span>
</div>
</div>
<h2>10 Best Single-Product Shopify Themes</h2>
</div>
<div class="embed-course__contents div-container" id="i1xtw">
<div class="embed-course__description"><p>Do you want to build an online store focused on a single product? Discover the 10 best single-product Shopify themes in this video.</p></div>
<ul class="embed-course__chapters-title-list"></ul>
</div>
</div>
<div class="embed-course-video__wrapper content-container"> <figure class="embedded-video" data-video-embed="true" data-original-url="https://www.youtube.com/watch?v=mpVNB7Xk6to&t=0">
<iframe src="https://www.youtube.com/embed/mpVNB7Xk6to?rel=0&start=0" frameborder="0" allowfullscreen="allowfullscreen" webkitallowfullscreen="webkitallowfullscreen" mozallowfullscreen="mozallowfullscreen" loading="lazy"></iframe>
</figure> </div>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ia6t">
<h2 id="toc-ab8h-start-your-jewelry-ecommerce-shopify-store-today">Start Your Jewelry eCommerce Shopify Store Today!</h2>
<p>I hope this article helped you find everything you need to start building an amazing jewelry Shopify store.</p>
<p>Don’t forget to keep exploring the <a href="https://themeforest.net/category/ecommerce/shopify" target="_blank" rel="noopener" data-action="click->ga-analytics#sendMarketClickEvent">best shopify themes for jewelry</a> available at ThemeForest. Also, remember to visit Envato Elements if you’re interested in an all-included creative subscription with <a href="https://elements.envato.com/cms-templates/shopify" target="_blank" rel="noopener" data-action="click->ga-analytics#sendElementsClickEvent">unlimited Shopify themes</a> and more.</p>
<p>If you need even more Shopify inspiration, check out these articles packed with amazing themes:</p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/responsive-shopify-themes--cms-39045"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/39045/preview_image/responsive_shopify.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/39045/preview_image/responsive_shopify.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/39045/preview_image/responsive_shopify.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/39045/preview_image/responsive_shopify.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/39045/preview_image/responsive_shopify.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/39045/preview_image/responsive_shopify.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Top 20+ Responsive Shopify Themes for 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2659/profiles/21180/profileImage/profile_selfie_400.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Maria Villanueva</div>
<div class="roundup-block__published-date">20 Oct 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-shopify-themes-for-electronic-stores--cms-35377"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35377/preview_image/airpods.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35377/preview_image/airpods.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35377/preview_image/airpods.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35377/preview_image/airpods.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/35377/preview_image/airpods.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/35377/preview_image/airpods.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">15+ Shopify Electronics Store Themes for 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Brenda Barron</div>
<div class="roundup-block__published-date">19 Oct 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/shopify-themes-for-dropshipping--cms-35341"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35341/preview_image/dropshipping.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35341/preview_image/dropshipping.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35341/preview_image/dropshipping.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35341/preview_image/dropshipping.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/35341/preview_image/dropshipping.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/35341/preview_image/dropshipping.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">20+ Best Shopify Themes for Dropshipping 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Brenda Barron</div>
<div class="roundup-block__published-date">09 Aug 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-single-product-shopify-themes--cms-35495"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35495/preview_image/shopify_pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35495/preview_image/shopify_pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35495/preview_image/shopify_pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35495/preview_image/shopify_pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/35495/preview_image/shopify_pre.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/35495/preview_image/shopify_pre.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">25+ Best Single Product Shopify Themes</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Brenda Barron</div>
<div class="roundup-block__published-date">21 Jul 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-shopify-themes-for-beauty-and-cosmetics--cms-33951"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33951/preview_image/beauty.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33951/preview_image/beauty.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/33951/preview_image/beauty.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/33951/preview_image/beauty.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/33951/preview_image/beauty.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/33951/preview_image/beauty.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title"> 25+ Best Free and Premium Shopify Themes for Beauty and Cosmetic Company Stores in 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/profiles/20513/profileImage/franc_LucasTutspluspic.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Franc Lucas</div>
<div class="roundup-block__published-date">25 Jul 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-ecommerce-website-templates--cms-26768"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/26768/preview_image/ECOMMERCE.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/26768/preview_image/ECOMMERCE.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/26768/preview_image/ECOMMERCE.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/26768/preview_image/ECOMMERCE.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/26768/preview_image/ECOMMERCE.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/26768/preview_image/ECOMMERCE.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">30 Best eCommerce Website Templates: Updated for 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Brenda Barron</div>
<div class="roundup-block__published-date">08 Nov 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-minimal-shopify-themes--cms-35081"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35081/preview_image/shopify-minimal.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35081/preview_image/shopify-minimal.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35081/preview_image/shopify-minimal.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35081/preview_image/shopify-minimal.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/35081/preview_image/shopify-minimal.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/35081/preview_image/shopify-minimal.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">22 Best Minimal Shopify Themes for 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2657/profiles/21177/profileImage/min.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2657/profiles/21177/profileImage/min.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2657/profiles/21177/profileImage/min.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2657/profiles/21177/profileImage/min.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2657/profiles/21177/profileImage/min.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2657/profiles/21177/profileImage/min.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Aladin Bensassi</div>
<div class="roundup-block__published-date">17 Oct 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/most-downloaded-shopify-themes-on-envato-elements--cms-36101"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36101/preview_image/shopify-themes.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36101/preview_image/shopify-themes.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36101/preview_image/shopify-themes.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36101/preview_image/shopify-themes.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/36101/preview_image/shopify-themes.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/36101/preview_image/shopify-themes.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Most Downloaded Shopify Themes on Envato Elements</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2657/profiles/21177/profileImage/min.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2657/profiles/21177/profileImage/min.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2657/profiles/21177/profileImage/min.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2657/profiles/21177/profileImage/min.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2657/profiles/21177/profileImage/min.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2657/profiles/21177/profileImage/min.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Aladin Bensassi</div>
<div class="roundup-block__published-date">12 Nov 2020</div>
</div>
</div>
</div>
</div></a></li>
</ul>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/39418/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/39418/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/39418/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/39418/a2t.img" width="1" /></div>2024-03-11 08:17:00 UTC2024-03-11 08:17:00 UTCMaria Villanuevatag:webdesign.tutsplus.com,2005:PostPresenter/cms-1085722024-03-01T04:26:48+00:00Best WordPress Block Plugins to Extend Wordpress (Paid and Free)<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="i3sl"><p><span>Ready to elevate your WordPress site’s potential without coding? These plugins will add extra Gutenberg blocks to your WordPress website and give you all kinds of functionality.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i6jl">
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/wp_blocks.png" alt="wp blocks" loading="lazy" width="870px" height="457px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/wp_blocks.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/wp_blocks.png" alt="wp blocks" loading="lazy" width="650px" height="344px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/wp_blocks.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/wp_blocks.png" alt="wp blocks" loading="lazy" width="380px" height="205px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/wp_blocks.png 2x">
<figcaption>There are tons of high quality free and paid WP block plugins that you can download today.</figcaption>
</figure>
<p><span>WordPress continues to be a leading content management system, powering a significant portion of the web. A key feature that enhances WordPress’ functionality and user experience is its block editor, Gutenberg. </span></p>
<p><span>Introduced to make content creation intuitive and flexible, Gutenberg’s capabilities can be significantly extended through block plugins. </span></p>
<p><span>These plugins add new blocks and functionalities, allowing users to design more complex and customized pages without needing to code. Understanding the importance of block plugins is crucial for anyone looking to elevate their WordPress site beyond the basics.</span></p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/what-are-wordpress-block-themes--cms-108473"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/108473/preview_image/block_themes.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/108473/preview_image/block_themes.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/108473/preview_image/block_themes.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/108473/preview_image/block_themes.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108473/preview_image/block_themes.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108473/preview_image/block_themes.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">What Are WordPress Block Themes?</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Daniel Strongin</div>
<div class="roundup-block__published-date">19 Feb 2024</div>
</div>
</div>
</div>
</div></a></li></ul>
<p>This roundup will give you an overview of block plugins and the best paid and free plugins that you can download today. </p>
<h2 id="toc-p5fy-understanding-block-plugins">Understanding Block Plugins</h2>
<p><span>Block plugins are essentially add-ons for the WordPress block editor that introduce new blocks or enhance existing ones, thereby expanding the editor’s capabilities.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/Understanding_Block_Plugins.jpeg" alt="Understanding Block Plugins" loading="lazy" width="870px" height="516px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/Understanding_Block_Plugins.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/Understanding_Block_Plugins.jpeg" alt="Understanding Block Plugins" loading="lazy" width="650px" height="388px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/Understanding_Block_Plugins.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/Understanding_Block_Plugins.jpeg" alt="Understanding Block Plugins" loading="lazy" width="380px" height="230px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/Understanding_Block_Plugins.jpeg 2x"></figure>
<p><span>They play a pivotal role in site building by offering additional features such as advanced layouts, custom content blocks, and interactive elements. </span></p>
<p><span>There’s a distinction between paid and free block plugins, each with its own advantages. </span></p>
<ul>
<li>
<strong>Free block plugins</strong><span> are great for those on a budget, offering basic enhancements without cost. </span>
</li>
<li>
<strong>Paid block plugins</strong><span>, on the other hand, typically offer more advanced features, dedicated support, and regular updates, making them a worthwhile investment for professional websites.</span>
</li>
</ul>
<h2 id="toc-ty4l-comprehensive-outline-of-block-plugins">Comprehensive Outline of Block Plugins</h2>
<p><span>Block plugins for WordPress’ Gutenberg editor significantly enhance the functionality and design capabilities of websites. They come in various types, each serving specific purposes to cater to the diverse needs of WordPress users.</span></p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/Comprehensive_Outline_of_Block_Plugins.jpg" alt="Comprehensive Outline of Block Plugins" loading="lazy" width="870px" height="624px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/Comprehensive_Outline_of_Block_Plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/Comprehensive_Outline_of_Block_Plugins.jpg" alt="Comprehensive Outline of Block Plugins" loading="lazy" width="650px" height="468px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/Comprehensive_Outline_of_Block_Plugins.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/Comprehensive_Outline_of_Block_Plugins.jpg" alt="Comprehensive Outline of Block Plugins" loading="lazy" width="380px" height="276px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/Comprehensive_Outline_of_Block_Plugins.jpg 2x"></figure>
<p><span>Below is a detailed outline of these plugins, categorized by their primary functions.</span></p>
<ul>
<li>
<strong>Layout Blocks: </strong><span>Layout blocks are essential for users aiming to create intricate page layouts that go beyond the basic offerings of the Gutenberg editor. These blocks allow for the creation of advanced layouts with multiple columns, full-width backgrounds, and other structural elements that are crucial for modern web design. </span>
</li>
<li>
<strong>Content Blocks: </strong><span>Content blocks add rich content elements to your pages, such as sliders, testimonials, and advanced galleries. These blocks are designed to make the content more engaging and interactive for visitors. </span>
</li>
<li>
<strong>Utility Blocks: </strong><span>Utility blocks provide functionalities that help in website management, optimization, and adding specific features like SEO enhancements or custom CSS. </span>
</li>
<li>
<strong>Dynamic Content Blocks: </strong><span>Dynamic content blocks are designed for websites that require content to be dynamically generated or pulled from specific sources, such as custom post types or external APIs.</span>
</li>
<li>
<strong>Design and Style Blocks: </strong><span>These blocks focus on adding stylistic elements to your site, such as animations, styled buttons, and advanced typography options.</span>
</li>
<li>
<strong>Specialized Functionality Blocks: </strong><span>Some block plugins offer specialized functionalities tailored to specific niches or requirements, such as e-commerce, learning management, or event management.</span>
</li>
</ul>
<p><span>By understanding the various types of block plugins available and their specific uses, WordPress users can significantly enhance the functionality, design, and overall user experience of their websites.</span></p>
<h2 id="toc-hmdg-top-free-block-plugins">Best Free Block Plugins</h2>
<p><span>The WordPress ecosystem is rich with free block plugins that extend the functionality of the Gutenberg editor, making it more versatile and user-friendly. </span></p>
<h3 id="toc-lowj-ultimate-blocks">1. <a href="https://wordpress.org/plugins/ultimate-blocks/" target="_self">Ultimate Blocks</a>
</h3>
<figure class="post_image"><a href="https://wordpress.org/plugins/ultimate-blocks/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/Ultimate_Blocks.png" alt="Ultimate Blocks" loading="lazy" width="870px" height="503px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/Ultimate_Blocks.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/Ultimate_Blocks.png" alt="Ultimate Blocks" loading="lazy" width="650px" height="378px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/Ultimate_Blocks.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/Ultimate_Blocks.png" alt="Ultimate Blocks" loading="lazy" width="380px" height="225px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/Ultimate_Blocks.png 2x"></a></figure>
<p><span>Ultimate Blocks is designed specifically for bloggers and marketers, offering a collection of blocks that enhance the capabilities of the Gutenberg editor for content creation.</span></p>
<h4 id="toc-o8ty-features"><span>Features</span></h4>
<ul>
<li>
<strong>Content Filter:</strong><span> Allows users to create filterable content, making it easier for visitors to find what they're looking for.</span>
</li>
<li>
<strong>Table of Contents:</strong><span> Automatically generates a table of contents from headings in your posts, improving navigation and SEO.</span>
</li>
<li>
<strong>Testimonial Block:</strong><span> Enables the addition of customer or user testimonials, adding credibility and trust to your site.</span>
</li>
</ul>
<h3 id="toc-pwnl-kadence-blocks">2. <a href="https://www.kadencewp.com/kadence-blocks/" target="_self">Kadence Blocks</a>
</h3>
<figure class="post_image"><a href="https://wordpress.org/plugins/kadence-blocks/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/Kadence_Blocks.jpg" alt="Kadence Blocks" loading="lazy" width="870px" height="512px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/Kadence_Blocks.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/Kadence_Blocks.jpg" alt="Kadence Blocks" loading="lazy" width="650px" height="385px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/Kadence_Blocks.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/Kadence_Blocks.jpg" alt="Kadence Blocks" loading="lazy" width="380px" height="228px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/Kadence_Blocks.jpg 2x"></a></figure>
<p><span>Kadence Blocks adds custom blocks and options to the Gutenberg editor, focusing on enhancing layout and design flexibility.</span></p>
<h4 id="toc-mobl-features"><span>Features</span></h4>
<ul>
<li>
<strong>Row Layout:</strong><span> Offers advanced row layout blocks, allowing for complex layouts with columns and nested rows.</span>
</li>
<li>
<strong>Advanced Gallery:</strong><span> Provides an advanced gallery block with options for masonry, carousel, and slider layouts.</span>
</li>
<li>
<strong>Tabs Block:</strong><span> Enables the creation of tabbed content, making it easier to organize and present information in a compact form.</span>
</li>
</ul>
<h3 id="toc-f1an-gutenberg-blocks-and-template-library-by-otter">3. <a href="https://wordpress.org/plugins/otter-blocks/" target="_self">Otter Blocks</a>
</h3>
<figure class="post_image"><a href="https://themeisle.com/plugins/otter-blocks/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/otter_blocks.jpg" alt="otter blocks" loading="lazy" width="870px" height="634px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/otter_blocks.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/otter_blocks.jpg" alt="otter blocks" loading="lazy" width="650px" height="475px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/otter_blocks.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/otter_blocks.jpg" alt="otter blocks" loading="lazy" width="380px" height="280px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/otter_blocks.jpg 2x"></a></figure>
<p><span>Otter adds extra Gutenberg blocks and pre-designed templates to WordPress, simplifying the website building process.</span></p>
<h4 id="toc-qtdz-features"><span>Features</span></h4>
<ul>
<li>
<strong>Section and Column Blocks:</strong><span> Offers advanced section and column blocks for creating complex layouts.</span>
</li>
<li>
<strong>Google Maps Block:</strong><span> Allows easy integration of Google Maps, ideal for contact pages or location-based information.</span>
</li>
<li>
<strong>Post Grid Block:</strong><span> Enables the display of posts or pages in a grid layout, enhancing the presentation of your content.</span>
</li>
</ul>
<h3 id="toc-fprk-getwid">4. <a href="https://wordpress.org/plugins/getwid/" target="_self">Getwid</a>
</h3>
<figure class="post_image"><a href="https://wordpress.org/plugins/getwid/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/getwid.jpg" alt="getwid" loading="lazy" width="870px" height="498px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/getwid.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/getwid.jpg" alt="getwid" loading="lazy" width="650px" height="374px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/getwid.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/getwid.jpg" alt="getwid" loading="lazy" width="380px" height="222px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/getwid.jpg 2x"></a></figure>
<p><span>Getwid extends Gutenberg with a wide collection of blocks, focusing on both content and design elements.</span></p>
<h4 id="toc-r948-features"><span>Features</span></h4>
<ul>
<li>
<strong>Section Block:</strong><span> Provides advanced options for creating sections with customizable backgrounds and layouts.</span>
</li>
<li>
<strong>Instagram Block:</strong><span> Allows for the integration of Instagram feeds, enhancing social media presence.</span>
</li>
<li>
<strong>Custom Post Type Block:</strong><span> Enables the display of custom post types, offering flexibility in content presentation.</span>
</li>
</ul>
<h3 id="toc-8xz3-publishpress-blocks">5. <a href="https://wordpress.org/plugins/advanced-gutenberg/" target="_self">PublishPress Blocks</a>
</h3>
<figure class="post_image"><a href="https://wordpress.org/plugins/advanced-gutenberg/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/publish_press_blocks.jpg" alt="Publish Press blocks" loading="lazy" width="870px" height="487px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/publish_press_blocks.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/publish_press_blocks.jpg" alt="Publish Press blocks" loading="lazy" width="650px" height="366px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/publish_press_blocks.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/publish_press_blocks.jpg" alt="Publish Press blocks" loading="lazy" width="380px" height="218px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/publish_press_blocks.jpg 2x"></a></figure>
<p><span>PublishPress Blocks is designed to improve content creation and site management, offering both advanced content blocks and administrative tools.</span></p>
<h4 id="toc-08f2-features"><span>Features</span></h4>
<ul>
<li>
<strong>Advanced Table Block:</strong><span> Offers an enhanced table block with options for styling and adding multimedia content.</span>
</li>
<li>
<strong>Content Display Block:</strong><span> Allows for the dynamic display of content based on categories, tags, or custom criteria.</span>
</li>
<li>
<strong>User Role Editor:</strong><span> Includes a user role editor for managing block access, ensuring content integrity and workflow control.</span>
</li>
</ul>
<p><span>These free block plugins for WordPress significantly enhance the Gutenberg editor, making it possible to create more sophisticated and engaging websites without the need for premium plugins. </span></p>
<p><span>Whether you're looking to improve your site's design, add new functionalities, or streamline content creation, there's likely a free block plugin that meets your needs.</span></p>
<h2 id="toc-x891-paid-block-plugins">Best Paid WP Block Plugins</h2>
<p><span>Investing in paid block plugins can significantly enhance the functionality and design of a website. </span><span>These plugins often offer more advanced features, dedicated support, and regular updates, making them a valuable asset for professional websites. </span></p>
<p><span>Below is a detailed overview of some of the top paid block plugins, highlighting their main features.</span></p>
<h3 id="toc-nitz-ultimate-addons-for-gutenberg-pro">1. <a href="https://wordpress.org/plugins/ultimate-addons-for-gutenberg/" target="_self">Spectra</a>
</h3>
<figure class="post_image"><a href="https://wpspectra.com/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/spectra.jpg" alt="Spectra" loading="lazy" width="870px" height="454px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/spectra.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/spectra.jpg" alt="Spectra" loading="lazy" width="650px" height="342px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/spectra.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/spectra.jpg" alt="Spectra" loading="lazy" width="380px" height="204px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/spectra.jpg 2x"></a></figure>
<p><span>Spectra enhances the Gutenberg editor with additional blocks and features, focusing on increasing the efficiency of the design process and adding more complex functionalities.</span></p>
<h4 id="toc-05uq-features"><span>Features</span></h4>
<ul>
<li>
<strong>Advanced Marketing Blocks:</strong><span> Includes blocks tailored for marketing purposes, such as pop-ups, call-to-action buttons, and form stylers.</span>
</li>
<li>
<strong>WooCommerce Integration:</strong><span> Offers specialized blocks for WooCommerce, making it easier to design and customize e-commerce sites.</span>
</li>
<li>
<strong>Customization and Animation Options:</strong><span> Provides advanced customization options, including animations and hover effects, to create more dynamic and engaging websites.</span>
</li>
</ul>
<h3 id="toc-tyrx-generateblocks-pro">2. <a href="https://generateblocks.com/pro/" target="_self">Generateblocks Pro</a>
</h3>
<figure class="post_image"><a href="https://generateblocks.com/library/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/generate_blocks_pro.jpg" alt="Generate Blocks Pro" loading="lazy" width="870px" height="468px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/generate_blocks_pro.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/generate_blocks_pro.jpg" alt="Generate Blocks Pro" loading="lazy" width="650px" height="352px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/generate_blocks_pro.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/generate_blocks_pro.jpg" alt="Generate Blocks Pro" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/generate_blocks_pro.jpg 2x"></a></figure>
<p><span>Generateblocks Pro is a lightweight plugin that adds powerful capabilities to the Gutenberg editor, allowing for the creation of virtually any design with just a few blocks.</span></p>
<h4 id="toc-05uq-features"><span>Features</span></h4>
<ul>
<li>
<strong>Global Styles:</strong><span> Enables the creation of global styles that can be applied site-wide, ensuring consistency and saving time.</span>
</li>
<li>
<strong>Advanced Backgrounds:</strong><span> Offers advanced background options, including gradients, images, and videos, for more visually appealing designs.</span>
</li>
<li>
<strong>Device-Specific Controls:</strong><span> Provides the ability to customize blocks differently for desktop, tablet, and mobile, ensuring a responsive and optimized user experience.</span>
</li>
</ul>
<h3 id="toc-lj0m-stackable">3. <a href="https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/" target="_self">Stackable</a>
</h3>
<figure class="post_image"><a href="https://wordpress.org/plugins/stackable-ultimate-gutenberg-blocks/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/stackable.jpg" alt="stackable" loading="lazy" width="870px" height="483px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/stackable.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/stackable.jpg" alt="stackable" loading="lazy" width="650px" height="363px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/stackable.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/stackable.jpg" alt="stackable" loading="lazy" width="380px" height="216px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/stackable.jpg 2x"></a></figure>
<p><span>Stackable Premium is designed to be an all-in-one solution for Gutenberg blocks, offering a wide range of blocks and options for both simple and complex website designs.</span></p>
<h4 id="toc-05uq-features"><span>Features</span></h4>
<ul>
<li>
<strong>UI Kit Library:</strong><span> Comes with a library of UI Kits, which are pre-designed block arrangements that can be easily customized and used in various parts of a website.</span>
</li>
<li>
<strong>Advanced Hover and Animation Effects:</strong><span> Includes options for hover effects and animations, adding interactivity and visual interest to the site.</span>
</li>
<li>
<strong>Role Manager:</strong><span> Features a role manager that allows site administrators to control which users can access and edit certain blocks, enhancing site security and management.</span>
</li>
</ul>
<h3 id="toc-4j1l-qubely-pro">4. <a href="https://wordpress.org/plugins/qubely/" target="_self">Qubely Pro</a>
</h3>
<figure class="post_image"><a href="https://wordpress.org/plugins/qubely/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/Qubely.jpg" alt="Qubely" loading="lazy" width="870px" height="505px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/Qubely.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/Qubely.jpg" alt="Qubely" loading="lazy" width="650px" height="379px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/Qubely.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/Qubely.jpg" alt="Qubely" loading="lazy" width="380px" height="225px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/Qubely.jpg 2x"></a></figure>
<p><span>Qubely Pro is a full-fledged Gutenberg block toolkit that offers a wide array of customization options, aiming to replace multiple plugins with one comprehensive solution.</span></p>
<h4 id="toc-05uq-features"><span>Features</span></h4>
<ul>
<li>
<strong>Responsive Controls:</strong><span> Offers detailed responsive controls, allowing for precise adjustments for different screen sizes.</span>
</li>
<li>
<strong>Advanced Form Builder:</strong><span> Includes an advanced form builder with various field types and customization options, ideal for creating contact forms, surveys, and more.</span>
</li>
<li>
<strong>Pre-designed Sections and Layout Packs:</strong><span> Provides a vast library of pre-designed sections and layout packs, facilitating quick and cohesive website design.</span>
</li>
</ul>
<h3 id="toc-5ung-genesis-pro">5. <a href="https://www.studiopress.com/genesis-pro/" target="_self">Genesis Pro</a>
</h3>
<figure class="post_image"><a href="https://www.studiopress.com/genesis-pro/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/Genesis_Pro.jpg" alt="Genesis Pro" loading="lazy" width="870px" height="422px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/Genesis_Pro.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/Genesis_Pro.jpg" alt="Genesis Pro" loading="lazy" width="650px" height="318px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/Genesis_Pro.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/Genesis_Pro.jpg" alt="Genesis Pro" loading="lazy" width="380px" height="190px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/Genesis_Pro.jpg 2x"></a></figure>
<p><span>Genesis Pro offers a collection of blocks, layouts, and sections for building dynamic WordPress sites, integrated seamlessly with the Genesis Framework.</span></p>
<h4 id="toc-05uq-features"><span>Features</span></h4>
<ul>
<li>
<strong>Full Site Editing:</strong><span> Supports full site editing capabilities, allowing users to design and customize headers, footers, and other site-wide elements directly in Gutenberg.</span>
</li>
<li>
<strong>Custom Blocks and Layouts:</strong><span> Includes custom blocks and pre-designed layouts tailored for the Genesis Framework, ensuring optimal performance and compatibility.</span>
</li>
<li>
<strong>Theme Building:</strong><span> Enables users to build custom themes using blocks, without needing to write code, making it ideal for developers and designers alike.</span>
</li>
</ul>
<h3 id="toc-4pms-acf-pro">6. <a href="https://www.advancedcustomfields.com/pro/" target="_self">ACF Pro</a>
</h3>
<figure class="post_image"><a href="https://www.advancedcustomfields.com/pro/"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1809/posts/108572/image-upload/ACF_Pro.png" alt="ACF Pro" loading="lazy" width="870px" height="498px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1809/posts/108572/image-upload/ACF_Pro.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1809/posts/108572/image-upload/ACF_Pro.png" alt="ACF Pro" loading="lazy" width="650px" height="374px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1809/posts/108572/image-upload/ACF_Pro.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/108572/image-upload/ACF_Pro.png" alt="ACF Pro" loading="lazy" width="380px" height="222px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/108572/image-upload/ACF_Pro.png 2x"></a></figure>
<p><span>Advanced Custom Fields (ACF) Pro enhances WordPress sites with powerful fields for content customization, making it essential for developers looking to build bespoke websites. This WP </span></p>
<h4 id="toc-05uq-features"><span>Features</span></h4>
<ul>
<li>
<strong>Flexible Content Fields:</strong><span> Offers flexible content fields, enabling the creation of customized content structures and layouts.</span>
</li>
<li>
<strong>Repeater Fields:</strong><span> Includes repeater fields, allowing users to create a set of sub-fields which can be repeated again and again while editing content.</span>
</li>
<li>
<strong>Options Pages:</strong><span> Provides the ability to add extra admin pages to edit ACF fields, streamlining site management and customization.</span>
</li>
</ul>
<p><span>Investing in paid block plugins can dramatically extend the capabilities of the WordPress Gutenberg editor, offering advanced features, customization options, and dedicated support. </span></p>
<p><span>These plugins cater to a wide range of needs, from enhancing design and layout to adding complex functionalities and improving content management.</span></p>
<h2 id="toc-kxns-importance-of-compatibility">Importance of Compatibility</h2>
<p><span>Compatibility issues between block plugins and WordPress themes or other plugins can lead to a range of problems, from minor visual glitches to critical site functionality breaking. </span></p>
<p><span>Ensuring that the block plugins you choose are compatible with your current WordPress setup is essential for:</span></p>
<ul>
<li>
<strong>Maintaining Site Performance:</strong><span> Incompatible plugins can slow down your site, affecting user experience and SEO rankings.</span>
</li>
<li>
<strong>Ensuring Site Stability:</strong><span> Conflicts between plugins or themes can cause site crashes or loss of functionality, impacting your site's reliability.</span>
</li>
<li>
<strong>Preserving Visual Consistency:</strong><span> Compatibility issues can disrupt the intended design of your site, leading to inconsistent visuals and a poor user experience.</span>
</li>
</ul>
<h2 id="toc-487m-more-great-wordpress-resources">More Great WordPress Resources</h2>
<p>Check out even more great resources for your WordPress website with these Envato Tuts+ articles:</p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/how-to-monetize-your-wordpress-site-with-ads--cms-107298"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/posts/107298/preview_image/preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/posts/107298/preview_image/preview.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/posts/107298/preview_image/preview.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/posts/107298/preview_image/preview.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/posts/107298/preview_image/preview.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/posts/107298/preview_image/preview.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Monetize Your WordPress Site With Ads</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Daniel Strongin</div>
<div class="roundup-block__published-date">09 Jun 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/top-best-wordpress-optimization-plugins--cms-93897"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/769/posts/93897/preview_image/fast_boat_at_the_sea_in_bali_indonesia_aerial_vi_2022_01_26_23_48_28_utc.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Top 5 Best WordPress Optimization Plugins in 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2803/profiles/21327/profileImage/nitish_tutsplus.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Nitish Kumar</div>
<div class="roundup-block__published-date">29 May 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/15-best-wordpress-business-themes--cms-26132"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/26132/preview_image/wordpress_business.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">25 Best WordPress Corporate and Business Themes for Entrepreneurs for 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/profiles/19734/profileImage/192887389_10226422225921366_1386554784344850241_n.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Brenda Barron</div>
<div class="roundup-block__published-date">20 Nov 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/wordpress-alternatives-to-elementor--cms-107818"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/107818/preview_image/elementor_alt.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/107818/preview_image/elementor_alt.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/107818/preview_image/elementor_alt.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/107818/preview_image/elementor_alt.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/107818/preview_image/elementor_alt.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/107818/preview_image/elementor_alt.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Top 5 WordPress Alternatives to Elementor</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1809/profiles/20319/profileImage/Headshot_SoundShockAudio_Daniel_Strongin.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Daniel Strongin</div>
<div class="roundup-block__published-date">26 Oct 2023</div>
</div>
</div>
</div>
</div></a></li>
</ul>
<h2 id="toc-lf4e-conclusion">Download a WP Block Plugin Now!</h2>
<p><span>Integrating block plugins into your WordPress site can significantly enhance its functionality and user experience. However, it’s essential to ensure that these plugins are compatible with your site’s existing themes and plugins to avoid potential issues. </span></p>
<p><span>By carefully selecting, testing, and managing your block plugins, you can extend your WordPress capabilities while maintaining a stable and high-performing website.</span></p>
<p><span>Looking for even more <a href="https://codecanyon.net/category/wordpress?term=blocks" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">WordPress block plugins</a>? Check out Envato Market’s collection of high quality plugins.</span></p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/108572/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108572/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108572/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108572/a2t.img" width="1" /></div>2024-03-07 12:36:39 UTC2024-03-07 12:36:39 UTCDaniel Strongintag:webdesign.tutsplus.com,2005:PostPresenter/cms-1085752024-03-01T03:46:52+00:00Webflow SEO: Best Practices for Optimizing Your Site<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="i6wb"><p><span>Let’s explore Webflow SEO and all of its impressive capabilities; ensuring your Webflow site not only gets found but also loved by your audience.</span></p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iy4f">
<p><span>Webflow is, for many, the best no-code tool for <a href="https://webdesign.tutsplus.com/how-to-create-a-website-with-webflow--cms-93420t" target="_blank" rel="noopener">building websites</a>. But it’s also a platform that brings the power of SEO into the hands of designers and developers alike. </span></p>
<p><span>With its robust features, from SSL certificates to custom page slugs and beyond, Webflow equips you to push your site up the search rankings. </span></p>
<p><span>But SEO success with Webflow doesn’t stop at technical tweaks. It also prioritizes an enriching user experience, the ability to create compelling content, and allows for true site accessibility</span><span></span><span></span><span></span><span>. </span></p>
<h2 id="toc-ceh6-technical-seo-enhancements">Optimize for Technical SEO</h2>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108575/image-upload/webflow.jpg" alt="webflow" loading="lazy" width="870px" height="489px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1223/posts/108575/image-upload/webflow.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108575/image-upload/webflow.jpg" alt="webflow" loading="lazy" width="650px" height="368px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1223/posts/108575/image-upload/webflow.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108575/image-upload/webflow.jpg" alt="webflow" loading="lazy" width="380px" height="219px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/posts/108575/image-upload/webflow.jpg 2x"></figure>
<p>Optimizing your site with <a href="https://webflow.com/seo" target="_blank" rel="noopener">Webflow</a> starts with a solid foundation—technical SEO. This aspect might not be the most glamorous part of site design but think of it as setting the stage for your content to shine.</p>
<p>Let’s break down the key components:</p>
<h3 id="toc-d07i-leverage-webflows-built-in-seo-tools">1. Leverage Webflow’s Built-in SEO Tools</h3>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108575/image-upload/webflow_seo.jpg" alt="webflow seo" loading="lazy" width="870px" height="353px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1223/posts/108575/image-upload/webflow_seo.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108575/image-upload/webflow_seo.jpg" alt="webflow seo" loading="lazy" width="650px" height="267px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1223/posts/108575/image-upload/webflow_seo.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108575/image-upload/webflow_seo.jpg" alt="webflow seo" loading="lazy" width="380px" height="161px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/posts/108575/image-upload/webflow_seo.jpg 2x"></figure>
<p>Webflow isn’t shy about offering tools that streamline the technical side of SEO. Activating SSL certificates and minimizing code right from your project settings can significantly speed up your site and beef up its security.</p>
<p>These steps are crucial because a secure and fast-loading site ranks higher in search results and offers a better experience for your visitors.</p>
<h3 id="toc-907m-craft-seo-friendly-urls">2. Create SEO-Friendly URLs</h3>
<p>The importance of a clean, keyword-rich URL can’t be overstated. It’s like telling both your visitors and search engines what your page is about at a glance. Webflow makes it easy to customize page slugs, allowing you to match URLs to your page titles or target keywords, minus any filler words.</p>
<p>This approach not only helps in ranking but also makes your URLs memorable and easy to share.</p>
<h3 id="toc-e3sl-auto-generate-sitemaps">3. Auto-Generate Sitemaps</h3>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108575/image-upload/sitemap.jpeg" alt="webflow sitemap" loading="lazy" width="870px" height="368px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1223/posts/108575/image-upload/sitemap.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108575/image-upload/sitemap.jpeg" alt="webflow sitemap" loading="lazy" width="650px" height="278px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1223/posts/108575/image-upload/sitemap.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108575/image-upload/sitemap.jpeg" alt="webflow sitemap" loading="lazy" width="380px" height="167px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/posts/108575/image-upload/sitemap.jpeg 2x"></figure>
<p>A sitemap is essentially a map that guides search engines through your site, ensuring they find and index all your content. Webflow’s auto-generate sitemap feature saves you the hassle and automatically updates as you add or modify pages. Submitting this sitemap to search engines is a straightforward way to boost your site’s visibility.</p>
<h3 id="toc-x3yd-prevent-duplicate-content-with-staging-domains">4. Prevent Duplicate Content with Staging Domains</h3>
<p>Webflow provides a staging domain to test your site without affecting the live version. However, it’s vital to prevent search engines from indexing this domain to avoid content duplication issues.</p>
<p>Ensuring your staging domain isn’t visible to search engines keeps your SEO efforts focused and effective, avoiding the pitfalls of split traffic or penalization for duplicate content. Thankfully, this is easy to do in Webflow as well. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108575/image-upload/webflow_subdomain.png" alt="the subdomain settings for webflow subdomains" loading="lazy" width="870px" height="270px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108575/image-upload/webflow_subdomain.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108575/image-upload/webflow_subdomain.png" alt="the subdomain settings for webflow subdomains" loading="lazy" width="650px" height="205px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108575/image-upload/webflow_subdomain.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108575/image-upload/webflow_subdomain.png" alt="the subdomain settings for webflow subdomains" loading="lazy" width="380px" height="126px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108575/image-upload/webflow_subdomain.png 2x"></figure>
<h2 id="toc-fqk9-on-page-seo-tactics">Optimize for On-Page SEO</h2>
<p>Moving beyond the technical setup, on-page SEO is where your content gets to do the heavy lifting. This is about making every page as optimized for search engines as possible. Here’s how to make it happen with Webflow:</p>
<h3 id="toc-j6d3-optimize-titles-and-meta-descriptions">1. Optimize Titles and Meta Descriptions</h3>
<p>Your titles and meta descriptions are your first contact with search engine users. In Webflow, customizing these elements is straightforward, and happens in the settings for each page. They allow you to weave in your focus keywords while keeping things compelling.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108575/image-upload/meta.png" alt="webflow meta settings" loading="lazy" width="870px" height="570px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108575/image-upload/meta.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108575/image-upload/meta.png" alt="webflow meta settings" loading="lazy" width="650px" height="428px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108575/image-upload/meta.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108575/image-upload/meta.png" alt="webflow meta settings" loading="lazy" width="380px" height="253px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108575/image-upload/meta.png 2x"></figure>
<p>Think of your title as the headline of your story and your meta description as the intriguing blurb on the back cover. This duo not only boosts your visibility but can significantly impact click-through rates.</p>
<h3 id="toc-u5rx-use-header-tags-wisely">2. Use Header Tags Wisely</h3>
<p>Just like any well-structured document, your website needs clear headings. Webflow encourages the use of H1 through H6 tags to organize your content logically, making it digestible for both search engines and human readers.</p>
<p>In fact, if you go to publish your site with errors in the heading hierarchy, Webflow will prompt an audit and show you exactly where the problems lie:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108575/image-upload/audit.png" alt="webflow audit panel" loading="lazy" width="870px" height="464px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108575/image-upload/audit.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108575/image-upload/audit.png" alt="webflow audit panel" loading="lazy" width="650px" height="349px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108575/image-upload/audit.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108575/image-upload/audit.png" alt="webflow audit panel" loading="lazy" width="380px" height="208px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108575/image-upload/audit.png 2x"></figure>
<p>Remember, headers offer formatting but they also form a clear hierarchy and flow of information.</p>
<h3 id="toc-v53w-image-optimization-is-key">3. Image Optimization is a Must</h3>
<p>Pictures can add a lot of value to your content but only if they load quickly and have the right alt text. Webflow’s image optimization tools, including automatic resizing and lazy loading, ensure your visuals enhance rather than hinder your page’s performance.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108575/image-upload/alt_tags.jpeg" alt="webflow image alt tags" loading="lazy" width="870px" height="362px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1223/posts/108575/image-upload/alt_tags.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108575/image-upload/alt_tags.jpeg" alt="webflow image alt tags" loading="lazy" width="650px" height="273px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1223/posts/108575/image-upload/alt_tags.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108575/image-upload/alt_tags.jpeg" alt="webflow image alt tags" loading="lazy" width="380px" height="165px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/posts/108575/image-upload/alt_tags.jpeg 2x"></figure>
<p>Alt text, meanwhile, helps search engines understand the context of your images, contributing to your SEO while making your site more accessible.</p>
<div class="callout-block">
<span class="callout-icon callout-do"></span>
<div class="callout-message">Set your alt text within the assets panel so that every instance of your images use that alt text.</div>
</div>
<p>Convert your images to <code>.webp</code> format within Webflow to ensure your page weight is kept to a minimum. To do this, expand the <strong>Assets</strong> panel, search for <code>.png</code> or <code>.jpg</code> extensions, then select the images you want to compress, and hit <strong>Compress</strong>.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108575/image-upload/assets.png" alt="webflow assets panel" loading="lazy" width="870px" height="464px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108575/image-upload/assets.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108575/image-upload/assets.png" alt="webflow assets panel" loading="lazy" width="650px" height="349px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108575/image-upload/assets.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108575/image-upload/assets.png" alt="webflow assets panel" loading="lazy" width="380px" height="208px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108575/image-upload/assets.png 2x"></figure>
<h3 id="toc-xdeg-content-quality-and-keyword-integration">4. Content Quality and Keyword Integration</h3>
<p>At the heart of on-page SEO is your content’s quality and how naturally you integrate keywords. Webflow’s CMS supports SEO-friendly content creation, encouraging you to dive deep into topics, provide value, and sprinkle keywords where they fit naturally.</p>
<h2 id="toc-djtk-enhancing-user-experience">Enhance User Experience</h2>
<p>Webflow provides you with tools and features that make crafting compelling user experiences possible and enjoyable. Here's how to elevate UX on your Webflow site:</p>
<h3 id="toc-nz9q-streamline-website-navigation">1. Streamline Website Navigation</h3>
<p>Imagine your site as a map, with clear signs guiding visitors to their destinations. Effective <a href="https://webdesign.tutsplus.com/how-to-build-a-responsive-navigation-bar-with-flexbox--cms-33535t" target="_self">navigation</a> is key to keeping visitors engaged and reducing bounce rates.</p>
<p>Webflow’s intuitive design tools let you build a user-friendly header and footer navigation, ensuring your visitors can easily find what they’re looking for without feeling lost. This approach not only makes your site more enjoyable to explore but also helps search engines understand your site structure, further boosting your SEO.</p>
<h3 id="toc-ete6-optimize-for-mobile">2. Optimize for Mobile</h3>
<p>Your site needs to look good on screens of all sizes, of course. And mobile responsiveness has been a requirement for many years now. But Webflow’s responsive design capabilities are notable in their simplicity.</p>
<p>Designing in Webflow ensures your site automatically adjusts to fit any device. This adaptability is critical for keeping mobile users engaged and meets <a href="https://developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing" target="_blank" rel="noopener">Google’s mobile-first indexing requirements</a>, directly impacting your search rankings.</p>
<h3 id="toc-8ly7-improve-loading-times">3. Improve Loading Times</h3>
<p>Patience is a rare commodity online, and slow-loading pages are a definite way to drive visitors away. You can optimize image sizes using Webflow’s automatic image formatting (as we mentioned previously), which will help speed up site performance. </p>
<p>You can also minimize code bloat by default. Upon going to publish your website, click <strong>Advanced options</strong> and select which assets you’d like to minify:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108575/image-upload/minify.png" alt="minify assets" loading="lazy" width="870px" height="317px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108575/image-upload/minify.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108575/image-upload/minify.png" alt="minify assets" loading="lazy" width="650px" height="240px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108575/image-upload/minify.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108575/image-upload/minify.png" alt="minify assets" loading="lazy" width="380px" height="146px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108575/image-upload/minify.png 2x"></figure>
<p>Remember, a fast site is a friendly site, encouraging visitors to stick around and explore more of your content.</p>
<h2 id="toc-0nyg-advanced-seo-features">Advanced SEO Features</h2>
<p>Tapping into Webflow’s advanced SEO features unlocks a new level of optimization. These features give your site that extra edge, making it not just visible but stand out in search results.</p>
<p>Let’s explore how you can use these advanced capabilities:</p>
<h3 id="toc-ighx-use-structured-data-to-your-advantage">1. Use Structured Data to Your Advantage</h3>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108575/image-upload/schema_markup.jpg" alt="webflow schema markup" loading="lazy" width="870px" height="383px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1223/posts/108575/image-upload/schema_markup.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108575/image-upload/schema_markup.jpg" alt="webflow schema markup" loading="lazy" width="650px" height="289px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1223/posts/108575/image-upload/schema_markup.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108575/image-upload/schema_markup.jpg" alt="webflow schema markup" loading="lazy" width="380px" height="174px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/posts/108575/image-upload/schema_markup.jpg 2x"></figure>
<p>Structured data, or <a href="https://developers.google.com/search/docs/appearance/structured-data" target="_blank" rel="noopener">schema markup</a>, is like speaking directly to search engines in their language. It helps them understand the context of your content, making your site more likely to appear in rich snippets and other search enhancements.</p>
<p>Webflow simplifies the process of adding structured data to your site, allowing you to highlight everything from articles and events to products and FAQs. Implementing structured data correctly can significantly increase your visibility and click-through rates as well. </p>
<h3 id="toc-6zcn-implement-hreflang-tags-for-multilingual-sites">2. Implement Hreflang Tags for Multilingual Sites</h3>
<p>If your audience spans across different countries and speaks <a href="https://webdesign.tutsplus.com/how-to-create-a-multilingual-website-a-step-by-step-guide--cms-107633t" target="_self">multiple languages</a>, hreflang tags are essential. They tell search engines which version of a page is intended for speakers of a specific language, helping to deliver the most relevant content to users worldwide.</p>
<p>Webflow’s ease of implementing hreflang tags ensures that your multilingual content strategy doesn’t just reach a global audience but resonates with them on a local level.</p>
<p>Even if you don’t use different languages or Webflow’s localisation tools, you should set the default language (this is possible by turning on localisation settings). How do you know if you’ve done this? Test your website’s URL with <a href="https://pagespeed.web.dev/" target="_blank" rel="noopener">https://pagespeed.web.dev</a> and look under the SEO results:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108575/image-upload/hreflang.png" alt="pagespeed seo results" loading="lazy" width="870px" height="360px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108575/image-upload/hreflang.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108575/image-upload/hreflang.png" alt="pagespeed seo results" loading="lazy" width="650px" height="272px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108575/image-upload/hreflang.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108575/image-upload/hreflang.png" alt="pagespeed seo results" loading="lazy" width="380px" height="164px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108575/image-upload/hreflang.png 2x"></figure>
<h3 id="toc-dg33-enhance-accessibility-for-all-users">3. Enhance Accessibility for All Users</h3>
<p>Accessibility should never be an afterthought. Making your site accessible means ensuring that everyone, including users with disabilities, can navigate and interact with your content.</p>
<p>Webflow encourages best practices like using alt texts for images, ensuring <a href="https://webdesign.tutsplus.com/keyboard-accessibility-tips-using-html-and-css--cms-31966a" target="_self">keyboard navigability</a>, and maintaining proper contrast ratios. Beyond being a moral imperative, accessible sites tend to rank better in search results, as they offer a better user experience to a wider audience.</p>
<h3 id="toc-8c96-connect-google-search-console-google-analytics">4. Connect Google Search Console & Google Analytics</h3>
<p>Integrating your site with <a href="https://search.google.com/search-console/about" target="_blank" rel="noopener">Google Search Console</a> and <a href="https://webdesign.tutsplus.com/google-analytics-4-setup-tutorial--cms-106787t" target="_self">Google Analytics</a> opens up a world of data about your site’s performance.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108575/image-upload/google_search_console.jpg" alt="google search console" loading="lazy" width="870px" height="405px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1223/posts/108575/image-upload/google_search_console.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108575/image-upload/google_search_console.jpg" alt="google search console" loading="lazy" width="650px" height="305px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1223/posts/108575/image-upload/google_search_console.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108575/image-upload/google_search_console.jpg" alt="google search console" loading="lazy" width="380px" height="183px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/posts/108575/image-upload/google_search_console.jpg 2x"></figure>
<p>From understanding how visitors find your site to which pages they engage with most, these tools offer invaluable insights. Webflow makes this integration straightforward, allowing you to track, analyze, and refine your SEO strategies based on real user behavior</p>
<h2 id="toc-l0zb-webflow">Webflow Promises Streamlined SEO—Will You Take Advantage?</h2>
<p><span>From laying the technical groundwork to optimizing each page and enhancing the overall user experience, we’ve walked through the essentials of making your site shine in the eyes of both search engines and your audience using Webflow. Hopefully, you now have a better understanding of how this web design tool helps streamline the optimization process.</span></p>
<p><span>Remember, SEO is an ongoing process, a conversation between your site and search engines that evolves with every algorithm update and every piece of content you publish. With the strategies we’ve outlined (backed by Webflow’s built-in toolkit) your site has the potential to not only reach its target audience but to engage and convert them. Best of luck!</span></p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/108575/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108575/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108575/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108575/a2t.img" width="1" /></div>2024-03-06 08:53:03 UTC2024-03-06 08:53:03 UTCBrenda Barrontag:webdesign.tutsplus.com,2005:PostPresenter/cms-1085372024-02-28T09:04:43+00:00Learn These Viewport-Relative CSS Units (100vh, 100dvh, 100lvh, 100svh)<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="iv7h"><p>In this tutorial, we’ll cover the challenges when working with the classic 100vh unit for making full-screen sections and discuss some great alternative CSS units.</p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ixyt"><p>Hero or full-screen sections are an integral part of UI design. They exist in different kinds of websites, from landing pages to portfolio websites, and aim to grab visitors’ attention in the first place. Common parts of a hero section are slideshows, images, videos, headlines, texts, call-to-action links, etc. </p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="irci">
<figure class="post_image"></figure>
<figure class="post_image"></figure>
<h2 id="toc-uwgl-100vh">100vh</h2>
<p>Over recent years, the easiest way to create a full-screen section has been to give it a height of <code>100vh</code>, assuming its width is equal to the viewport width. </p>
<figure class="post_image"><a href="https://caniuse.com/?search=vh"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/vh2.jpg" alt="Current support for vh" loading="lazy" width="870px" height="356px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/vh2.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/vh2.jpg" alt="Current support for vh" loading="lazy" width="650px" height="269px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/vh2.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/vh2.jpg" alt="Current support for vh" loading="lazy" width="380px" height="162px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/vh2.jpg 2x"></a>
<figcaption>Current support for vh</figcaption>
</figure>
<p>On desktop browsers, everything works as expected.</p>
<p>However, on mobile browsers, full-screen sections aren’t visible entirely by default. We can see them all only as we scroll, when the floating address bar of the user agent gets shrunk. Note that the address bar’s position can appear either on top or bottom.</p>
<p>This can lead to a bad user experience if, for example, our sections include vertically centered content or content like call-to-actions that sit at its bottom position and thus is initially semi-visible by the visitors.</p>
<p>To demonstrate that behavior, I’ve created a <a href="https://tutsplus.github.io/viewport-relative-css-units/" target="_blank" rel="noopener">GitHub page</a> that contains a full-screen section with a background image and vertically centered content.</p>
<p>Go ahead and visit that page from your mobile device. You’ll notice that the hero image isn’t fully visible by default.</p>
<p><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/vh_explained.jpg" alt="The 100vh behavior initial and on scroll" loading="lazy" width="870px" height="793px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/vh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/vh_explained.jpg" alt="The 100vh behavior initial and on scroll" loading="lazy" width="650px" height="593px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/vh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/vh_explained.jpg" alt="The 100vh behavior initial and on scroll" loading="lazy" width="380px" height="347px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/vh_explained.jpg 2x"></p>
<div class="callout-block">
<span class="callout-icon callout-info"></span>
<div class="callout-message">There’s also a <a href="https://tutsplus.github.io/viewport-relative-css-units/sticky.html" target="_self">link to a second page</a> that includes a sticky header.</div>
</div>
<p>Thankfully, modern CSS provides some <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units" target="_blank" rel="noopener">new viewport-relative units</a> with great browser support (more than 90% at the time of writing) that help us solve this issue without relying on JavaScript solutions. Their behavior is the same as the <code>100vh</code> on desktop browsers, as there aren’t any dynamic UA interfaces. Their behavior differs on mobile devices.</p>
<h2 id="toc-80aa-dvh">100dvh</h2>
<p>The first of these units is the dynamic viewport height unit (<code>dvh</code>).</p>
<p>Here’s its definition in the <a href="https://www.w3.org/TR/css-values-4/#dynamic-viewport-size" target="_blank" rel="noopener">W3C’s Working Draft</a> document:</p>
<blockquote>
<p><span>The </span><span>dynamic viewport-percentage units</span><span>(</span><span>dv*</span><span>) are defined with respect to the </span><span>dynamic viewport size</span><span>: the viewport sized with dynamic consideration of any UA </span><span>interfaces that are dynamically expanded and retracted. This allows authors to size content such that it can exactly fit within the viewport whether or not such interfaces are present.</span></p>
</blockquote>
<p><span>The easiest way to understand its behavior is to revisit our page and </span><em><span>click</span></em><span> on the </span><code>dvh</code><span> button to apply <code>100dvh</code> to the hero section. </span> </p>
<figure class="post_image"><a href="https://caniuse.com/?search=dvh"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/dvh_support.jpg" alt="Current support for dvh" loading="lazy" width="870px" height="242px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/dvh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/dvh_support.jpg" alt="Current support for dvh" loading="lazy" width="650px" height="185px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/dvh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/dvh_support.jpg" alt="Current support for dvh" loading="lazy" width="380px" height="114px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/dvh_support.jpg 2x"></a>
<figcaption>Current support for dvh</figcaption>
</figure>
<p>What you’ll notice is that, by default, the hero section will appear entirely. Then, as you scroll when the address bar collapses, it updates the section’s height and behaves like <code>100vh</code>.</p>
<p>Nevertheless, as this unit always tries to match the viewport height regardless of the toolbar’s presence, it causes an instant jump/flash on the scroll and thus a repositioning on our centered content—that certainly doesn’t make it an ideal replacement for <code>100vh</code> in most cases and can be disturbing to the user and/or costly in terms of performance. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg" alt="The 100dvh behavior initial and on scroll" loading="lazy" width="870px" height="789px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg" alt="The 100dvh behavior initial and on scroll" loading="lazy" width="650px" height="590px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg" alt="The 100dvh behavior initial and on scroll" loading="lazy" width="380px" height="346px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/dvh_explained.jpg 2x"></figure>
<h2 id="toc-gogj-100lvh">100lvh</h2>
<p>Next, we have the large viewport height unit (<code>lvh</code>).</p>
<p><span>Here’s its definition in the <a href="https://www.w3.org/TR/css-values-4/#large-viewport-size" target="_blank" rel="noopener">W3C’s Working Draft</a> document:</span></p>
<blockquote>
<p><span>The </span><span>large viewport-percentage units</span><span>(</span><span>lv*</span><span>) and </span><span>default viewport-percentage units </span><span>(</span><span>v*</span><span>) are defined with respect to the </span><span>large viewport size</span><span>: the viewport sized assuming any UA </span><span>interfaces that are dynamically expanded and retracted to be retracted. This allows authors to size content such that it is guaranteed to fill the viewport, noting that such content might be hidden behind such interfaces when they are expanded.</span></p>
</blockquote>
<p><span>Again, the easiest way to understand its behavior is to revisit our page and </span><em><span>click</span></em><span> on the <code>lvh</code> </span><span>button to apply <code>100lvh</code> to the hero section. </span> </p>
<figure class="post_image"><a href="https://caniuse.com/?search=lvh"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/lvh_support.jpg" alt="Current support for lvh" loading="lazy" width="870px" height="248px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/lvh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/lvh_support.jpg" alt="Current support for lvh" loading="lazy" width="650px" height="189px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/lvh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/lvh_support.jpg" alt="Current support for lvh" loading="lazy" width="380px" height="117px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/lvh_support.jpg 2x"></a>
<figcaption>Current support for lvh</figcaption>
</figure>
<p>What you’ll notice is that our section will behave exactly like when its height is set to <code>100vh</code>. That said, by default, the hero section won’t appear entirely, but will do when the address bar gets shrunk.</p>
<p>In other words, this unit will always return the largest, visible viewport height that will occur on the scroll when the toolbar is the smallest one—that certainly doesn’t make it an ideal replacement for <code>100vh</code> at the time of this writing as it doesn’t offer anything new. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg" alt="The 100lvh behavior initial and on scroll" loading="lazy" width="870px" height="787px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg" alt="The 100lvh behavior initial and on scroll" loading="lazy" width="650px" height="588px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg" alt="The 100lvh behavior initial and on scroll" loading="lazy" width="380px" height="345px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/lvh_explained.jpg 2x"></figure>
<h2 id="toc-wp29-100svh">100svh</h2>
<p>Finally, we have the small viewport height unit (<code>svh</code>).</p>
<p><span>Here’s its definition in the <a href="https://www.w3.org/TR/css-values-4/#small-viewport-size" target="_blank" rel="noopener">W3C’s Working Draft</a> document:</span></p>
<blockquote>
<p><span>The </span><span>small viewport-percentage units </span><span>(</span><span>sv*</span><span>) are defined with respect to the </span><span>small viewport size</span><span>: the viewport sized assuming any UA </span><span>interfaces that are dynamically expanded and retracted to be expanded. This allows authors to size content such that it can fit within the viewport even when such interfaces are present, noting that such content might not fill the viewport when such interfaces are retracted.</span></p>
</blockquote>
<p>Once a<span>gain, please examine its behavior by revisiting our page and </span><em><span>clicking</span></em><span> on the <code>svh</code></span><span> button to apply <code>100svh</code> to the hero section. </span> </p>
<figure class="post_image"><a href="https://caniuse.com/?search=svh"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/svh_support.jpg" alt="Current support for svh" loading="lazy" width="870px" height="241px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/svh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/svh_support.jpg" alt="Current support for svh" loading="lazy" width="650px" height="184px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/svh_support.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/svh_support.jpg" alt="Current support for svh" loading="lazy" width="380px" height="114px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/svh_support.jpg 2x"></a>
<figcaption>Current support for svh</figcaption>
</figure>
<p>What you’ll notice is that our section will always be visible and behave like the initial state (before scrolling) of the <code>100dvh</code>.</p>
<p>In other words, this unit will always return the smallest, visible viewport height that will occur when the toolbar is expanded—that certainly makes it an ideal replacement for <code>100vh</code> at the time of this writing. </p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg" alt="The 100svh behavior initial and on scroll" loading="lazy" width="870px" height="787px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg" alt="The 100svh behavior initial and on scroll" loading="lazy" width="650px" height="588px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg" alt="The 100svh behavior initial and on scroll" loading="lazy" width="380px" height="345px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/780/posts/108537/image-upload/svh_diagram.jpg 2x"></figure>
<h2 id="toc-boj2-fallback">Fallback</h2>
<p>If you’re satisfied with any of the previous units and want to use it but at the same time need a fallback to the <code>100vh</code> unit just to be safer, try something like this old-school CSS: </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.hero</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100</span><span style="color: #d0d0d0;background-color: #151515">svh</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100vh</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>In this way, non-supported browsers will ignore the first property value.</p>
<h2 id="toc-ixma-conclusion">Conclusion</h2>
<p>In this tutorial, we discussed the challenges of making truly full-screen sections across all devices when working with different viewport-relative units.</p>
<p>Let’s recap regarding the behavior on mobile browsers:</p>
<ul>
<li>Setting <code>100vh</code> or <code>100lvh</code> to a section will produce the same result. The section will have a fixed height (unless we resize the viewport), but we won’t be able to see it entirely unless we scroll and the address bar gets shrunk. </li>
<li>Setting <code>100dvh</code> to a section means that it won’t have a fixed height but will be recalculated as we scroll. As a result of that, elements inside that section might be repositioned. Its behavior can be useful under certain scenarios, but might be annoying for the user.</li>
<li>Setting <code>100svh</code> to a section means that it’ll always have a fixed height (unless we resize the viewport) that will be equal to the initial viewport height (before we scroll)—when the address bar is expanded. The section will be fully visible by default just like the initial state of <code>100dvh</code>. </li>
</ul>
<p>My recommendation, at this moment, is to create full-screen hero sections with <code>100svh</code> and have a fallback to <code>100vh</code>. </p>
<p>As always, thanks a lot for reading!</p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/108537/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108537/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108537/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108537/a2t.img" width="1" /></div>2024-03-05 13:12:00 UTC2024-03-05 13:12:00 UTCGeorge Martsoukostag:webdesign.tutsplus.com,2005:PostPresenter/cms-935802023-03-07T08:18:40+00:0014 Best Themes for Shopify Art Stores, Artisanal, Craft, and Handmade Product Shops<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="i3o2"><p>Shopify is the perfect platform if you want to sell art, crafts, artisanal, or handmade products. There are plenty of Shopify art store exaples made specifically for these niches—let’s take a look!</p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iks6">
<h2 id="toc-af9i-shopify-art-store-themes-on-themeforest">Shopify Art Stores (Best Themes for 2024)</h2>
<p>If you're looking to metaphorically climb the Shopify Mountain when it comes to setting up shop, choosing the right Shopify craft themes is a great first step. Shopify development services makes it easier than ever! Let’s begin with a handful of craft themes from the Shopify Theme Store, then we’ll list our favorites from <a href="https://themeforest.net/category/ecommerce/shopify?term=craft" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Themeforest</a></p>
</div><div data-content-block-type="Grid" class="content-block content-block-grid">
<div class="element-row two-column-grid grid-gap--col-extra-wide grid-gap--row-extra-wide">
<div class="element-col">
<figure class="post_image"><a href="https://shopify.pxf.io/9gQDyY"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/93580/image-upload/craft.jpg" alt="craft shopify theme" id="ifk5j" loading="lazy" width="870px" height="615px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/93580/image-upload/craft.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/93580/image-upload/craft.jpg" alt="craft shopify theme" id="ifk5j" loading="lazy" width="650px" height="461px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/93580/image-upload/craft.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/93580/image-upload/craft.jpg" alt="craft shopify theme" id="ifk5j" loading="lazy" width="380px" height="272px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/93580/image-upload/craft.jpg 2x"></a></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i78vu">
<h3 id="toc-85zf-craft">1. <a href="https://shopify.pxf.io/9gQDyY" target="_blank" rel="noopener">Craft</a>
</h3>
<ul>
<li>Designed to showcase images to support visual brand storytelling.</li>
<li>Showcase your brand and what it stands for with sections and templates designed for rich and compelling narratives.</li>
</ul>
</div>
</div>
<div class="element-col">
<figure class="post_image"><a href="https://shopify.pxf.io/LXrBRV"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/93580/image-upload/canopy.jpg" alt="canopy shopify theme" id="id8xz" loading="lazy" width="870px" height="615px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/93580/image-upload/canopy.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/93580/image-upload/canopy.jpg" alt="canopy shopify theme" id="id8xz" loading="lazy" width="650px" height="461px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/93580/image-upload/canopy.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/93580/image-upload/canopy.jpg" alt="canopy shopify theme" id="id8xz" loading="lazy" width="380px" height="272px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/93580/image-upload/canopy.jpg 2x"></a></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i1g5o">
<h3 id="toc-p2wr-canopy">2. <a href="https://shopify.pxf.io/LXrBRV" target="_blank" rel="noopener">Canopy</a>
</h3>
<ul>
<li>Store locator</li>
<li>Color swatches</li>
<li>Quick view</li>
<li>Stock counter</li>
<li>Theme setup steps are minimal to allow for quick launch</li>
</ul>
</div>
</div>
</div>
<div class="element-row two-column-grid grid-gap--col-extra-wide grid-gap--row-extra-wide">
<div class="element-col">
<figure class="post_image"><a href="https://shopify.pxf.io/q4N9Ob"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/93580/image-upload/blum.jpg" alt="blum shopify theme" id="i8iws" loading="lazy" width="870px" height="615px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/93580/image-upload/blum.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/93580/image-upload/blum.jpg" alt="blum shopify theme" id="i8iws" loading="lazy" width="650px" height="461px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/93580/image-upload/blum.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/93580/image-upload/blum.jpg" alt="blum shopify theme" id="i8iws" loading="lazy" width="380px" height="272px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/93580/image-upload/blum.jpg 2x"></a></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i6o9l">
<h3 id="toc-7en3-blum">3. <a href="https://shopify.pxf.io/q4N9Ob" target="_blank" rel="noopener">Blum</a>
</h3>
<ul>
<li>Built for unrivalled page speed</li>
<li>Keep customers engaged with big, bold text designs.</li>
<li>Designed for smartphones first and foremost to make sure your customers can engage with your brand on the go.</li>
</ul>
</div>
</div>
<div class="element-col">
<figure class="post_image"><a href="https://shopify.pxf.io/9gQDy4"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/93580/image-upload/exhibit.jpg" alt="exhibit shopify theme" id="ir4w6" loading="lazy" width="870px" height="615px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/93580/image-upload/exhibit.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/93580/image-upload/exhibit.jpg" alt="exhibit shopify theme" id="ir4w6" loading="lazy" width="650px" height="461px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/93580/image-upload/exhibit.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/93580/image-upload/exhibit.jpg" alt="exhibit shopify theme" id="ir4w6" loading="lazy" width="380px" height="272px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/93580/image-upload/exhibit.jpg 2x"></a></figure><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iac35">
<h3 id="toc-parh-exhibit">4. <a href="https://shopify.pxf.io/9gQDy4" target="_blank" rel="noopener">Exhibit</a>
</h3>
<ul>
<li>Optimized for longer-form text sections to support brand storytelling.</li>
<li>Perfect for Shopify Art Stores.</li>
<li>Showcase your pieces in a multitude of ways; versatile grids, carousels, slideshows, video integration, and ample white space.</li>
</ul>
</div>
</div>
</div>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ixl5o"><p>Themeforest offers some of the best Shopify handmade and DIY product themes online. Browse through thousands of options designed by top creative professionals. Get started selling handmade items on Shopify with these cool Shopify website examples. </p></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iiwl">
<h3 id="toc-n2p7-learts-handmade-shop-shopify-theme">5. <a href="https://themeforest.net/item/learts-handmade-shop-shopify-theme/30409539" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">LeArts – Handmade Shop Shopify Craft Theme</a>
</h3>
<p><span>Want an inspiring store where you can display and sell your art, designs, crafts and more? This mobile-first Shopify craft theme comes all the features you need to build a thriving online Shopify handmade store. </span><span>It includes </span></p>
<ul>
<li>over 50 drag-and-drop</li>
<li>13 beautiful homepages</li>
<li>12 blog layouts</li>
<li>responsive header layouts</li>
<li>and mega menu</li>
<li>cart product layout and filters</li>
</ul>
<figure class="post_image"><a href="https://themeforest.net/item/learts-handmade-shop-shopify-theme/30409539" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1997/posts/93580/image-upload/D316E7F5_CF34_4934_B72E_5A2E732B898F.jpeg" alt="LeArts – Handmade Shop Shopify Theme" loading="lazy" width="870px" height="549px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1997/posts/93580/image-upload/D316E7F5_CF34_4934_B72E_5A2E732B898F.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1997/posts/93580/image-upload/D316E7F5_CF34_4934_B72E_5A2E732B898F.jpeg" alt="LeArts – Handmade Shop Shopify Theme" loading="lazy" width="650px" height="412px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1997/posts/93580/image-upload/D316E7F5_CF34_4934_B72E_5A2E732B898F.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/posts/93580/image-upload/D316E7F5_CF34_4934_B72E_5A2E732B898F.jpeg" alt="LeArts – Handmade Shop Shopify Theme" loading="lazy" width="380px" height="244px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/posts/93580/image-upload/D316E7F5_CF34_4934_B72E_5A2E732B898F.jpeg 2x"></a></figure>
<h3 id="toc-4tzh-intraart---multi-purpose-shopify-20-furniture-and-crafts-theme">6. <a href="https://themeforest.net/item/intra-art-shopify-multipurpose-responsive-theme/24555387" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">IntraArt - Multi-purpose Shopify 2.0 Furniture and Crafts Themes</a>
</h3>
<p><span>Intra Art has striking color combinations that allow you to create visually appealing Shopify art stores. Some notable features include:</span></p>
<ul>
<li>over 47 features including demo websites</li>
<li>beautiful inner pages and product pages</li>
<li>product view shopping cart</li>
<li>and payment options</li>
<li> compatible with all Shopify apps</li>
</ul>
<figure class="post_image"><a href="https://themeforest.net/item/intra-art-shopify-multipurpose-responsive-theme/24555387" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1997/posts/93580/image-upload/FCA65193_BF24_4C9F_87D9_811B5B72714E.jpeg" alt="IntraArt - Multi-purpose Shopify 2.0 Furniture & Crafts Theme" loading="lazy" width="870px" height="630px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1997/posts/93580/image-upload/FCA65193_BF24_4C9F_87D9_811B5B72714E.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1997/posts/93580/image-upload/FCA65193_BF24_4C9F_87D9_811B5B72714E.jpeg" alt="IntraArt - Multi-purpose Shopify 2.0 Furniture & Crafts Theme" loading="lazy" width="650px" height="472px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1997/posts/93580/image-upload/FCA65193_BF24_4C9F_87D9_811B5B72714E.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/posts/93580/image-upload/FCA65193_BF24_4C9F_87D9_811B5B72714E.jpeg" alt="IntraArt - Multi-purpose Shopify 2.0 Furniture & Crafts Theme" loading="lazy" width="380px" height="278px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/posts/93580/image-upload/FCA65193_BF24_4C9F_87D9_811B5B72714E.jpeg 2x"></a></figure>
<h3 id="toc-3zlh-mintie---arts-crafts-store-shopify-theme">7. <a href="https://themeforest.net/item/mintie-arts-crafts-store-shopify-theme/38381850" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Mintie - Arts & Crafts Store Shopify Theme</a>
</h3>
<p><span>Mintie is a multipurpose Shopify theme for arts, crafts, handmade, or whatever online store you want to build. </span><span>It is attractive, SEO-optimized and highly customizable. </span></p>
<p><span>In addition to all the standard features you need to run a store, like homepages and innerpages, headers, footer or shopping carts, you will also find elements like: </span></p>
<ul>
<li>Automatic price change</li>
<li>Order product notification</li>
<li>Product quickview </li>
<li>Wishlist</li>
<li>Flying cart</li>
<li>Countdown timer </li>
</ul>
<figure class="post_image"><a href="https://themeforest.net/item/mintie-arts-crafts-store-shopify-theme/38381850" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1997/posts/93580/image-upload/2BB7EBB7_8B46_486A_954A_55F79D8271E0.jpeg" alt="Mintie - Arts & Crafts Store Shopify Theme" loading="lazy" width="870px" height="592px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1997/posts/93580/image-upload/2BB7EBB7_8B46_486A_954A_55F79D8271E0.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1997/posts/93580/image-upload/2BB7EBB7_8B46_486A_954A_55F79D8271E0.jpeg" alt="Mintie - Arts & Crafts Store Shopify Theme" loading="lazy" width="650px" height="444px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1997/posts/93580/image-upload/2BB7EBB7_8B46_486A_954A_55F79D8271E0.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/posts/93580/image-upload/2BB7EBB7_8B46_486A_954A_55F79D8271E0.jpeg" alt="Mintie - Arts & Crafts Store Shopify Theme" loading="lazy" width="380px" height="262px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/posts/93580/image-upload/2BB7EBB7_8B46_486A_954A_55F79D8271E0.jpeg 2x"></a></figure>
<h3 id="toc-8zu6-multi-art---shopify-art-store-theme">8. <a href="https://themeforest.net/item/multiart-gallery-shopify-theme/38018562" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Multi Art - Shopify Art Store Examples</a>
</h3>
<p>Multi-Art theme comes with stylish visual elements for showcasing products like sliders, carousels, special effects, and advanced topography. Ideal for creating high end Shopify art stores.</p>
<p>You also get user-friendly features like Ajax Product Filters, Add to Cart, Wishlist, and Quick View, Pop-up Search and Product Image Zoom. </p>
<p>There is also a testimonial template you can add so customers can leave testimonials about the quality of your products and services. </p>
<figure class="post_image"><a href="https://themeforest.net/item/multiart-gallery-shopify-theme/38018562" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1997/posts/93580/image-upload/0F136803_B06C_49B7_BF0B_4E8DFB484BD2.jpeg" alt="Multi Art - Shopify Art Store Theme" loading="lazy" width="870px" height="631px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1997/posts/93580/image-upload/0F136803_B06C_49B7_BF0B_4E8DFB484BD2.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1997/posts/93580/image-upload/0F136803_B06C_49B7_BF0B_4E8DFB484BD2.jpeg" alt="Multi Art - Shopify Art Store Theme" loading="lazy" width="650px" height="473px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1997/posts/93580/image-upload/0F136803_B06C_49B7_BF0B_4E8DFB484BD2.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/posts/93580/image-upload/0F136803_B06C_49B7_BF0B_4E8DFB484BD2.jpeg" alt="Multi Art - Shopify Art Store Theme" loading="lazy" width="380px" height="279px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/posts/93580/image-upload/0F136803_B06C_49B7_BF0B_4E8DFB484BD2.jpeg 2x"></a></figure>
<h3 id="toc-sz5l-artistic---art-craft-store-shopify-responsive-theme">9. <a href="https://themeforest.net/item/multiart-gallery-shopify-theme/38018562" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Artistic - Art & Craft Store Shopify Responsive Theme</a>
</h3>
<p><span>Artistic Shopify responsive theme is what you need for high-calibre presentation of products. It is </span><span>clean, stylish, minimal and has stunning color combinations which makes selling handmade items on Shopify, easy. It is also SEO-ready and optimized for fast-loading. </span><span>Some product-focused features include:</span></p>
<ul>
<li>Ajax product compare</li>
<li>Ajax product quickview</li>
<li>Ajax product add to cart</li>
<li>Ajax product search</li>
<li>Ajax product filter on collection page</li>
<li>Product variation swatches on product page</li>
<li>Product zoom integration on product page</li>
<li>Related product slider on product page</li>
</ul>
<figure class="post_image"><a href="https://themeforest.net/item/artistic-art-craft-store-shopify-responsive-theme/37867644" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1997/posts/93580/image-upload/64FF74B2_DAF4_48A7_9A3C_7716A0A2D4A8.jpeg" alt="Artistic - Art & Craft Store Shopify Responsive Theme" loading="lazy" width="870px" height="631px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1997/posts/93580/image-upload/64FF74B2_DAF4_48A7_9A3C_7716A0A2D4A8.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1997/posts/93580/image-upload/64FF74B2_DAF4_48A7_9A3C_7716A0A2D4A8.jpeg" alt="Artistic - Art & Craft Store Shopify Responsive Theme" loading="lazy" width="650px" height="473px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1997/posts/93580/image-upload/64FF74B2_DAF4_48A7_9A3C_7716A0A2D4A8.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/posts/93580/image-upload/64FF74B2_DAF4_48A7_9A3C_7716A0A2D4A8.jpeg" alt="Artistic - Art & Craft Store Shopify Responsive Theme" loading="lazy" width="380px" height="279px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/posts/93580/image-upload/64FF74B2_DAF4_48A7_9A3C_7716A0A2D4A8.jpeg 2x"></a></figure>
<h3 id="toc-uvp8-monaliza---minimal-art-shop-theme">10. <a href="https://themeforest.net/item/monaliza-artist-portfolio-store-theme/39026794" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Monaliza - Minimal Shopify Art Stores Theme</a>
</h3>
<p>Monaliza offers simplicity through its minimal pages that make it fast and easy for visitors to navigate and decide quickly on purchases. It has sales-focused features that include:</p>
<ul>
<li>Size Chart Integration</li>
<li>Recent Sales Popup Notifications</li>
<li>Product Sale Label</li>
<li>Product Image Swap/ Advanced Product Swatches</li>
<li>Ask an Expert Form</li>
</ul>
<figure class="post_image"><a href="https://themeforest.net/item/monaliza-artist-portfolio-store-theme/39026794" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1997/posts/93580/image-upload/0432B446_50A9_42C7_9EA0_C84CD8C6C909.jpeg" alt="Monaliza - Minimal Art Shop Theme" loading="lazy" width="870px" height="631px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1997/posts/93580/image-upload/0432B446_50A9_42C7_9EA0_C84CD8C6C909.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1997/posts/93580/image-upload/0432B446_50A9_42C7_9EA0_C84CD8C6C909.jpeg" alt="Monaliza - Minimal Art Shop Theme" loading="lazy" width="650px" height="473px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1997/posts/93580/image-upload/0432B446_50A9_42C7_9EA0_C84CD8C6C909.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/posts/93580/image-upload/0432B446_50A9_42C7_9EA0_C84CD8C6C909.jpeg" alt="Monaliza - Minimal Art Shop Theme" loading="lazy" width="380px" height="279px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/posts/93580/image-upload/0432B446_50A9_42C7_9EA0_C84CD8C6C909.jpeg 2x"></a></figure>
<h3 id="toc-qsdm-artz-art-handmade-shop-shopify-theme">11. <a href="https://themeforest.net/item/artz-handi-marts-art-shopify-theme/22463166" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Artz | Art, Handmade Shop Shopify Theme</a>
</h3>
<p>Artz is a minimalist, responsive Shopify handmade theme with visually impressive page layouts that are conveniently designed to encourage visitors to buy products. Slider, carousel, or hero scene allow for beautiful product display. In addition, there is a featured product slider to bring attention of popular products. Check the <a href="https://preview.themeforest.net/item/monaliza-artist-portfolio-store-theme/full_screen_preview/39026794" target="_self" rel data-action="click->ga-analytics#sendMarketClickEvent">demo</a> and learn more.</p>
<figure class="post_image"><a href="https://themeforest.net/item/artz-handi-marts-art-shopify-theme/22463166" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1997/posts/93580/image-upload/82E3C5C3_369F_40D1_B69E_3B80560784A3.jpeg" alt="Artz - Art, Handmade Shop Shopify Theme" loading="lazy" width="870px" height="628px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1997/posts/93580/image-upload/82E3C5C3_369F_40D1_B69E_3B80560784A3.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1997/posts/93580/image-upload/82E3C5C3_369F_40D1_B69E_3B80560784A3.jpeg" alt="Artz - Art, Handmade Shop Shopify Theme" loading="lazy" width="650px" height="471px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1997/posts/93580/image-upload/82E3C5C3_369F_40D1_B69E_3B80560784A3.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/posts/93580/image-upload/82E3C5C3_369F_40D1_B69E_3B80560784A3.jpeg" alt="Artz - Art, Handmade Shop Shopify Theme" loading="lazy" width="380px" height="278px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/posts/93580/image-upload/82E3C5C3_369F_40D1_B69E_3B80560784A3.jpeg 2x"></a>
<figcaption>Artz - Art, Handmade Shop Shopify Theme</figcaption>
</figure>
<h3 id="toc-h0na-clayttery---pottery-handmade-store-shopify">12. <a href="https://themeforest.net/item/clayttery-pottery-clay-decore-store-shopify-theme/39338962" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Clayttery - Pottery Handmade Store Shopify</a>
</h3>
<p>Clayttery is a great template for artisans due to its versatility and unique page layouts that can be customized using a drag-and-drop interface. It has a built-in mega menu that makes it easy for customers to navigate your website. </p>
<p>Some notable features include: </p>
<ul>
<li>Promotional banners</li>
<li>Ajax filters</li>
<li>Currency switchers</li>
<li>Quick shop</li>
<li>Customer review</li>
</ul>
<figure class="post_image"><a href="https://themeforest.net/item/clayttery-pottery-clay-decore-store-shopify-theme/39338962" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1997/posts/93580/image-upload/0968CACC_ADBC_4682_9BFF_9C3C6D99967A.jpeg" alt="Clayttery - Pottery Handmade Store Shopify" loading="lazy" width="870px" height="587px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1997/posts/93580/image-upload/0968CACC_ADBC_4682_9BFF_9C3C6D99967A.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1997/posts/93580/image-upload/0968CACC_ADBC_4682_9BFF_9C3C6D99967A.jpeg" alt="Clayttery - Pottery Handmade Store Shopify" loading="lazy" width="650px" height="440px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1997/posts/93580/image-upload/0968CACC_ADBC_4682_9BFF_9C3C6D99967A.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/posts/93580/image-upload/0968CACC_ADBC_4682_9BFF_9C3C6D99967A.jpeg" alt="Clayttery - Pottery Handmade Store Shopify" loading="lazy" width="380px" height="260px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/posts/93580/image-upload/0968CACC_ADBC_4682_9BFF_9C3C6D99967A.jpeg 2x"></a>
<figcaption>Clayttery - Pottery Handmade Store Shopify</figcaption>
</figure>
<h3 id="toc-f243-artykraft---art-and-decor-shopify-theme">13. <a href="https://themeforest.net/item/artykraft-art-and-decor-shopify-theme/37848856" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Artykraft - Art and Decor Shopify Theme</a>
</h3>
<p>Artykraft has 9 different classy and eye-catchy layouts to showcase your store offerings attractively. </p>
<p>A one-click install option, customization options, quick product preview, add to compare, wishlist, advanced search bar, multiple currencies and multiple language support. Alluring hover effects, CTAs with parallax effects, and seamless transition effects will keep site visitors’ attention and provide a pleasant user experience. Start selling handmade items of Shopify with just a few clicks.</p>
<figure class="post_image"><a href="https://themeforest.net/item/artykraft-art-and-decor-shopify-theme/37848856" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1997/posts/93580/image-upload/4BE2743B_2235_41F9_BE8A_39EE3FED890E.jpeg" alt="Artykraft - Art and Decor Shopify Theme" loading="lazy" width="870px" height="629px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1997/posts/93580/image-upload/4BE2743B_2235_41F9_BE8A_39EE3FED890E.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1997/posts/93580/image-upload/4BE2743B_2235_41F9_BE8A_39EE3FED890E.jpeg" alt="Artykraft - Art and Decor Shopify Theme" loading="lazy" width="650px" height="471px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1997/posts/93580/image-upload/4BE2743B_2235_41F9_BE8A_39EE3FED890E.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/posts/93580/image-upload/4BE2743B_2235_41F9_BE8A_39EE3FED890E.jpeg" alt="Artykraft - Art and Decor Shopify Theme" loading="lazy" width="380px" height="278px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/posts/93580/image-upload/4BE2743B_2235_41F9_BE8A_39EE3FED890E.jpeg 2x"></a></figure>
<h3 id="toc-51bw-clarie---handmade-shopify-theme">14. <a href="https://themeforest.net/item/clarie-pot-shop-shopify-store/35287948" target="_self" data-action="click->ga-analytics#sendMarketClickEvent">Clarie - HandMade Shopify Theme</a>
</h3>
<p>This SEO-optimized handmade Shopify theme is fast-loading and has awesome display for products. Notable customer-centric features include: </p>
<ul>
<li>Product owl carousel</li>
<li>Order tracking </li>
<li>Newsletter pop-up</li>
<li>Social integration</li>
<li>Direct checkout</li>
</ul>
<figure class="post_image"><a href="https://themeforest.net/item/clarie-pot-shop-shopify-store/35287948" data-action="click->ga-analytics#sendMarketClickEvent"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1997/posts/93580/image-upload/80F813DF_29B9_4E3A_8081_CEF76EA7665F.jpeg" alt="Clarie - HandMade Shopify Theme" loading="lazy" width="870px" height="630px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1997/posts/93580/image-upload/80F813DF_29B9_4E3A_8081_CEF76EA7665F.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1997/posts/93580/image-upload/80F813DF_29B9_4E3A_8081_CEF76EA7665F.jpeg" alt="Clarie - HandMade Shopify Theme" loading="lazy" width="650px" height="472px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1997/posts/93580/image-upload/80F813DF_29B9_4E3A_8081_CEF76EA7665F.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1997/posts/93580/image-upload/80F813DF_29B9_4E3A_8081_CEF76EA7665F.jpeg" alt="Clarie - HandMade Shopify Theme" loading="lazy" width="380px" height="278px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1997/posts/93580/image-upload/80F813DF_29B9_4E3A_8081_CEF76EA7665F.jpeg 2x"></a></figure>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iye4z">
<h2 id="toc-ekan-climbing-the-shopify-mountain">Climbing The Shopify Mountain</h2>
<p>E-commerce has allowed many small businesses around the world take their ideas to the next level. But, setting up an online store and facing the challenges it brings, can seem daunting. Get started with the best tools possible, and check out some of our tutorials:</p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/what-is-shopify--cms-36741"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/36741/preview_image/what-is-shopify.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">What Is Shopify?</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Maryna Petrenko</div>
<div class="roundup-block__published-date">14 Nov 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-set-up-shopify-store--cms-36818"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/36818/preview_image/setup-shopify-thumb.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Set up a Shopify Store</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Maryna Petrenko</div>
<div class="roundup-block__published-date">14 Jun 2021</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/how-to-add-products-to-shopify--cms-36817"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36817/preview_image/product-add.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36817/preview_image/product-add.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36817/preview_image/product-add.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36817/preview_image/product-add.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/36817/preview_image/product-add.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/36817/preview_image/product-add.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Add Products to Shopify</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/21251/profileImage/mari.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/21251/profileImage/mari.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Maryna Petrenko</div>
<div class="roundup-block__published-date">16 Jul 2021</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/roxxe-shopify-theme-review--cms-36124"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36124/preview_image/roxxe-thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36124/preview_image/roxxe-thumb.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/36124/preview_image/roxxe-thumb.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/36124/preview_image/roxxe-thumb.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/36124/preview_image/roxxe-thumb.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/36124/preview_image/roxxe-thumb.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">“Roxxe” Shopify Theme Review: Multipurpose, Easy to Set up</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/265/profileImage/adi.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/265/profileImage/adi.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/265/profileImage/adi.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/265/profileImage/adi.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Adi Purdila</div>
<div class="roundup-block__published-date">09 Nov 2020</div>
</div>
</div>
</div>
</div></a></li>
</ul>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iiov8">
<h2 id="toc-6msm-conclusion">Conclusion</h2>
<p>I hope one of these Shopify themes I have covered in this article helps you create a stunning online store for art, crafts, artisan or handmade products. And if these themes don't meet your needs, you can try one these multipurpose themes:</p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/multipurpose-shopify-themes--cms-35402"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35402/preview_image/multipurpose_shopify_themes.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35402/preview_image/multipurpose_shopify_themes.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/35402/preview_image/multipurpose_shopify_themes.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/35402/preview_image/multipurpose_shopify_themes.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/35402/preview_image/multipurpose_shopify_themes.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/35402/preview_image/multipurpose_shopify_themes.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">13+ Best Multipurpose Shopify Themes for 2024</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2657/profiles/21177/profileImage/min.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2657/profiles/21177/profileImage/min.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2657/profiles/21177/profileImage/min.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2657/profiles/21177/profileImage/min.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2657/profiles/21177/profileImage/min.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2657/profiles/21177/profileImage/min.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Aladin Bensassi</div>
<div class="roundup-block__published-date">18 Oct 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/best-shopify-templates-for-your-online-store--cms-32845"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/32845/preview_image/shopify_online.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/32845/preview_image/shopify_online.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/32845/preview_image/shopify_online.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/32845/preview_image/shopify_online.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/32845/preview_image/shopify_online.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/32845/preview_image/shopify_online.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">21 Best Shopify Online Store Templates (Updated for 2024)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/446/profiles/18860/profileImage/LSmNUnnT.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/446/profiles/18860/profileImage/LSmNUnnT.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/446/profiles/18860/profileImage/LSmNUnnT.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/446/profiles/18860/profileImage/LSmNUnnT.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/446/profiles/18860/profileImage/LSmNUnnT.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/446/profiles/18860/profileImage/LSmNUnnT.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Paula Borowska</div>
<div class="roundup-block__published-date">25 May 2022</div>
</div>
</div>
</div>
</div></a></li>
</ul>
<p>Finally, WordPress users can take advantage of the built-in customer base that the Shopify platform offers by connecting WordPress to Shopify. This tutorial will show you how: </p>
<ul class="roundup-block__contents posts--half-width roundup-block--list"><li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/tutorials/how-to-connect-wordpress-to-shopify--cms-40278"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2724/posts/40278/preview_image/Preview_image_How_to_Connect_WordPress_to_Your_Shopify_Store.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2724/posts/40278/preview_image/Preview_image_How_to_Connect_WordPress_to_Your_Shopify_Store.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2724/posts/40278/preview_image/Preview_image_How_to_Connect_WordPress_to_Your_Shopify_Store.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2724/posts/40278/preview_image/Preview_image_How_to_Connect_WordPress_to_Your_Shopify_Store.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2724/posts/40278/preview_image/Preview_image_How_to_Connect_WordPress_to_Your_Shopify_Store.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2724/posts/40278/preview_image/Preview_image_How_to_Connect_WordPress_to_Your_Shopify_Store.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">How to Connect WordPress to Your Shopify Store (and Why You’d Want to)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2724/profiles/21249/profileImage/amin%20profile.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2724/profiles/21249/profileImage/amin%20profile.png 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/2724/profiles/21249/profileImage/amin%20profile.png" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/2724/profiles/21249/profileImage/amin%20profile.png 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/2724/profiles/21249/profileImage/amin%20profile.png" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/2724/profiles/21249/profileImage/amin%20profile.png 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Amin Aghakazemi</div>
<div class="roundup-block__published-date">14 Mar 2022</div>
</div>
</div>
</div>
</div></a></li></ul>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/93580/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/93580/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/93580/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/93580/a2t.img" width="1" /></div>2024-03-04 12:33:00 UTC2024-03-04 12:33:00 UTCFranc Lucastag:webdesign.tutsplus.com,2005:PostPresenter/cms-1085482024-02-23T03:39:04+00:00How to Build a Design System Repository<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="iq4e">
<p>If you’re searching for a way to <span>streamline how your team designs and develops products, building a design system repository is the obvious answer. </span></p>
<p><span>Now, I know what you’re thinking, "Another process to wrestle with?" But stick with me here.</span></p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iqgg">
<p><span>Design systems can actively make life easier for designers and developers alike. They’re like your favorite recipe book, but instead of lasagna and chocolate chip cookies, it’s packed with color palettes, typography, and UI components that everyone on the team can whip up into stunning interfaces.</span></p>
<p>Having everything related to design in <span>one place -- where everyone knows where to find them -- means no more hunting through emails for that specific shade of blue or the right button style. It’s all there, in one spot, saving time and headaches.</span></p>
<p><span>We’ll explore how to put together a repository for yourself today. But let’s get some key explanations out of the way first. </span></p>
<h2 id="toc-4scf-laying-the-groundwork">What is a Design System Repository?</h2>
<p>You can think of a design system repository as the backbone of all your design and development work. This is <a href="https://www.nngroup.com/articles/design-systems-101/" target="_blank" rel="noopener">where you store the core information</a> about product’s design -- whether it’s a tangible good, a website, or an app. It’s a blueprint and a source of truth that everyone from designers to developers relies on. So, when we talk about defining the scope, we’re really diving into what makes your product unique and ensuring those elements are accessible and standardized.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108548/image-upload/design_system.jpeg" alt="design system repository" loading="lazy" width="870px" height="586px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1223/posts/108548/image-upload/design_system.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108548/image-upload/design_system.jpeg" alt="design system repository" loading="lazy" width="650px" height="440px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1223/posts/108548/image-upload/design_system.jpeg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108548/image-upload/design_system.jpeg" alt="design system repository" loading="lazy" width="380px" height="260px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/posts/108548/image-upload/design_system.jpeg 2x"></figure>
<p>A design system repository isn’t just a fancy term for a shared drive though. It’s the central hub where your team finds everything they need to build consistent and beautiful user experiences. It houses your:</p>
<ul>
<li>
<strong>Design guidelines</strong>: the dos and don’ts)</li>
<li>
<strong>Assets</strong>: like logos and images)</li>
<li>
<strong>UI components</strong>: buttons, widgets, etc.</li>
</ul>
<p>Basically, all the bits and pieces that make your product look and feel like yours.</p>
<p>Now, the heart of your system is made up of a few key components:</p>
<ol>
<li>
<p><strong>Visual Assets:</strong> These are your brand’s visual signature, i.e. the colors, typography, logos, and images that make your product or website recognizable at a glance. It’s what sets the visual tone.</p>
</li>
<li>
<p><strong>Coding Standards:</strong> These standards ensure that everyone’s writing code in a way that’s clean, understandable, and, most importantly, consistent. This is how you avoid those "why does this look different here?" moments.</p>
</li>
<li>
<p><strong>Usage Documentation:</strong> Ever tried assembling furniture without the instructions? Usage documentation is the guidebook for your design system. It tells your team how to use those visual assets and code standards correctly. </p>
</li>
</ol>
<p>To bring it back to our recipe book analogy earlier, you can think of these components as the ingredients in your favorite recipe. Each one is essential, and when used correctly, they come together to create something that’s not just functional, but also delightful.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108548/image-upload/latitude_design_system.jpg" alt="latitude design system" loading="lazy" width="870px" height="490px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1223/posts/108548/image-upload/latitude_design_system.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108548/image-upload/latitude_design_system.jpg" alt="latitude design system" loading="lazy" width="650px" height="368px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1223/posts/108548/image-upload/latitude_design_system.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108548/image-upload/latitude_design_system.jpg" alt="latitude design system" loading="lazy" width="380px" height="219px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/posts/108548/image-upload/latitude_design_system.jpg 2x"></figure>
<p>Flexport offers a great example of a design system repository in action. It’s called the <a href="https://www.flexport.com/design" target="_blank" rel="noopener">Latitude Design System</a> and includes the design language, components and guidelines, editorial style, and many other resources contributors would need to have on hand. </p>
<p>Building a solid design system repository is about more than just throwing these ingredients into a folder and saying, "Here!" to your team. It’s about organizing them in a way that makes sense, is easy to use, and evolves with your product, website, or app. </p>
<h2 id="toc-squh-additional-prep">Planning Steps</h2>
<p><span>Before jumping headfirst into creating a <a href="https://webdesign.tutsplus.com/design-systems-101-an-introduction-to-design-systems--cms-108408a" target="_blank" rel="noopener">design system</a>, taking a step back to see the big picture is a must. This can broken down into two steps: </span></p>
<h3 id="toc-s2g6-evaluating-your-current-design-methods"><span>1. Evaluating Your Current Design Methods</span></h3>
<p><span>This step is all about taking stock of what’s working, what’s not, and where you’re just winging it. It’s a chance to identify the gaps in your design practices and spot opportunities for standardization and efficiency. Think of it as a health check-up for your design process.</span></p>
<h3 id="toc-ny3m-thinking-about-how-to-present-your-brand-visually-and-verbally"><span>2. Thinking About How to Present Your Brand Visually and Verbally </span></h3>
<p><span>The visuals and text related to your brand lays the foundation for your product or site’s personality and how it communicates that with the world. This involves picking colors and fonts, sure, but it’s about creating a language that reflects your brand’s identity and values. It’s the story you want to tell through your design. </span></p>
<h2 id="toc-soez-building-blocks-of-the-repository">Building a Design System Repository</h2>
<p><span>Now let’s get to the heart of this article: actually building a design system repository. In doing so, you are setting up your ultimate toolkit for design and development.</span></p>
<h3 id="toc-41qb-cataloging-existing-design-elements">1. Cataloging Existing Design Elements</h3>
<p>First things first, you gotta know what you’re working with. Take a good, hard look at your current design assets. This means digging through every logo, button, and font you’ve got stashed away. You’re on a treasure hunt to spot any duplicates and fill in any missing pieces. Make sure you’ve got a full set of tools before you start building anything new.</p>
<h3 id="toc-lxds-securing-support-across-the-board">2. Securing Support Across the Board</h3>
<p>Building a design system isn’t just a designer or developer project -- it’s a team sport. That is, you’ll need to get buy-in from all corners of the company, from the folks in the C-suite to the ones writing the code. Share the vision, highlight the benefits, and get everyone excited about how much easier and more efficient their work lives are about to become. </p>
<h3 id="toc-7zui-forming-your-dream-team">3. Forming Your Dream Team</h3>
<p>Speaking of team sports, putting together your dream team is key. You need a mix of skills here, including designers, developers, product managers, and content creators. Each brings a unique perspective to the table, ensuring your design system covers all the bases. </p>
<h3 id="toc-gbrh-setting-the-standards">4. Setting the Standards</h3>
<p>Setting the standards for your design system is about deciding on the core principles and guidelines that everyone will follow. This isn’t about stifling creativity or anything like that though. Rather, it’s about creating a common language so everyone can work together seamlessly. Whether it’s how you use color, the way buttons are designed, or the tone of your copy, these standards ensure consistency across every project.</p>
<h3 id="toc-sjzg-designing-the-visual-language">5. Designing the Visual Language</h3>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108548/image-upload/color_swatches.jpg" alt="color swatches and visual language of design system" loading="lazy" width="870px" height="553px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1223/posts/108548/image-upload/color_swatches.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108548/image-upload/color_swatches.jpg" alt="color swatches and visual language of design system" loading="lazy" width="650px" height="415px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1223/posts/108548/image-upload/color_swatches.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108548/image-upload/color_swatches.jpg" alt="color swatches and visual language of design system" loading="lazy" width="380px" height="246px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/posts/108548/image-upload/color_swatches.jpg 2x"></figure>
<p>Here’s where you get into the real details of your brand’s visual identity. Selecting a color palette and typographic practices isn’t just about what looks good, however. You need to create a visual language that speaks to your audience. You’re painting a picture that needs to resonate at every touchpoint, whether it’s a website, app, or email.</p>
<h3 id="toc-2vff-curating-a-comprehensive-icon-and-style-guide">6. Curating a Comprehensive Icon and Style Guide</h3>
<p>Choosing a set of icons and defining your style elements -- like spacing and grids -- is about more than just aesthetics. It’s about creating clarity and enhancing usability. </p>
<h3 id="toc-3bwq-assembling-a-modular-component-library">7. Assembling a Modular Component Library</h3>
<p>You’re building a library of reusable design elements that can be mixed and matched to create new designs quickly and efficiently. This modular approach allows for flexibility and innovation within a consistent framework, making sure everything you build feels like part of the same family.</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1223/posts/108548/image-upload/figma.jpg" alt="figma" loading="lazy" width="870px" height="531px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1223/posts/108548/image-upload/figma.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1223/posts/108548/image-upload/figma.jpg" alt="figma" loading="lazy" width="650px" height="399px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1223/posts/108548/image-upload/figma.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1223/posts/108548/image-upload/figma.jpg" alt="figma" loading="lazy" width="380px" height="236px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1223/posts/108548/image-upload/figma.jpg 2x"></figure>
<p>You can store these assets in a collective drive like Google Drive or Dropbox. Or, you can use something like <a href="https://webdesign.tutsplus.com/notion-for-web-designers--cms-108472a" target="_blank" rel="noopener">Notion</a> or <a href="https://webdesign.tutsplus.com/how-to-create-a-figma-design-system--cms-93440t" target="_blank" rel="noopener">Figma</a> to keep everything in one place.</p>
<h3 id="toc-5fe3-crafting-a-flexible-governance-model">8. Crafting a Flexible Governance Model</h3>
<p>Last but not least, you need rules for how this all evolves. A governance model is your strategy for managing the design system over time. It will need to balance creativity with consistency, allowing your system to grow and adapt without losing its core identity. You’re setting up the guardrails that keep everything on track, ensuring your design system remains a reliable and valuable resource for everyone -- over the long-haul.</p>
<h2 id="toc-04b8-putting-your-design-system-repository-to-work">Putting Your Design System Repository to Work</h2>
<p><span>Now, let’s talk about getting your design system off the shelf and into the hands of the people who’ll make it come to life -- or put it to work, to say it more accurately.</span></p>
<h3 id="toc-8utj-promoting-adoption-and-integration">Promoting Adoption and Integration</h3>
<p>First up, weaving this system into your team’s daily grind is a must. To make it as easy and intuitive as you can start by getting your team familiar with the system. To do this, you could:</p>
<ul>
<li>Run workshops</li>
<li>Share tutorials</li>
<li>Have open Q&A sessions</li>
</ul>
<p>Under any of these scenarios, make it clear how the design system simplifies their work, rather than adding another layer of complexity.</p>
<p>Encourage everyone to give it a try for their next project. Working to integrate it into the tools and platforms your team already uses can help a lot, too. If it fits seamlessly into their workflow, adoption will be a no-brainer.</p>
<h3 id="toc-e3fg-managing-ongoing-maintenance-and-updates">Managing Ongoing Maintenance and Updates</h3>
<p>Now, for the system to not just survive but thrive, you’ve got to keep it fresh and relevant. To do this, you can:</p>
<ul>
<li>
<strong>Make regular updates</strong>: To do this, you need real feedback from the people using it. Create a feedback loop where everyone -- from designers to developers to product managers -- can contribute their ideas.</li>
<li>
<strong>Schedule regular check-ins to review what’s working and what’s not</strong>: This is your chance to tweak and improve. Maybe a certain component isn’t as user-friendly as you thought, or there’s a new need that your system doesn’t yet cover.</li>
</ul>
<p>Iterative enhancements are the name of the game. It’s about evolving with your team’s needs, ensuring the system remains as relevant on day 1000 as it was on day 1.</p>
<h2 id="toc-x6au-seeing-your-design-system-in-action">Seeing Your Design System in Action</h2>
<p><span>Building and implementing a design system isn’t just about making things look pretty or streamlining workflows. It’s about creating a culture of collaboration and consistency. A space where creativity meets efficiency head-on. </span></p>
<p><span>Your design system repository is a set of guidelines and components, yes, but it’s also a sign of your team’s commitment to excellence. So why not put together a repository that works for your team? </span></p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/108548/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108548/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108548/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108548/a2t.img" width="1" /></div>2024-03-04 12:10:58 UTC2024-03-04 12:10:58 UTCBrenda Barrontag:webdesign.tutsplus.com,2005:PostPresenter/cms-1085322024-02-21T19:39:56+00:00How to Create a 2D Digital Clock with HTML, CSS, and Vanilla JavaScript<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#iz9c{background-color:rgb(243, 245, 246);}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="iilm"><p>Wouldn’t it be fun to create your own beautiful Digital Clock with basic web technologies? This tutorial will cover how to create a faux-3D digital Clock with HTML, CSS, and Vanilla JavaScript. </p></div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="iz9c"><div class="full-width-section__content-container div-container"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i5yn">
<h2 id="toc-ej7a-end-result">Time to Check Out the End Result</h2>
<p>By the end of this tutorial, we will have something like this:</p>
<p><iframe src="https://codepen.io/tutsplus/embed/GRLKoVO?default-tab=result" width="850" height="500" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
</div></div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ivr1">
<p>Let’s get started!</p>
<h2 id="toc-kl9m-html-structure">HTML Structure</h2>
<p>The HTML structure will consist of a rectangular container with a time display inside. The time display will contain elements for the current hour, minutes, and seconds.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"rectangle-container"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"rectangle"</span><span style="color: #f4bf75">></div></span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><div</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"time"</span><span style="color: #f4bf75">></span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"hours"</span><span style="color: #f4bf75">></span>12<span style="color: #f4bf75"></p></span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"separator"</span><span style="color: #f4bf75">></span>:<span style="color: #f4bf75"></p></span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"minutes"</span><span style="color: #f4bf75">></span>00<span style="color: #f4bf75"></p></span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"><p</span> <span style="color: #6a9fb5">class=</span><span style="color: #90a959">"seconds"</span><span style="color: #f4bf75">></span><span style="color: #d0d0d0;background-color: #151515">&nbsp;</span><span style="color: #f4bf75"></p></span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75"></div></span>
</pre></td>
</tr>
</tbody></table></div>
<h2 id="toc-d5lo-styling-with-css">Styling with CSS</h2>
<p>First, let’s define the global styles:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">:root</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--background</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#dde1e7</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--rectangle-background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">rgb</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">227</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">222</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">231</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--shadow-light</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">rgba</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">255</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">255</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">255</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">0.45</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--shadow-medium</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">rgba</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">94</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">104</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">121</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">0.3</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--shadow-dark</span><span style="color: #d0d0d0">:</span><span style="color: #d0d0d0;background-color: #151515">rgba</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">0</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">0.45</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--darkBlue</span><span style="color: #d0d0d0">:</span><span style="color: #d0d0d0;background-color: #151515">rgb</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">0</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">45</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--time-text-light</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">#dde1e7</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">--textColor</span><span style="color: #d0d0d0">:</span><span style="color: #90a959">#fff</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Then, we’ll style the body to ensure all our elements are at the center of the page.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre>body {
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> display: flex;
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> justify-content: center;
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> align-items: center;
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> min-height: 100vh;
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> background: var(--background);
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> font-family: "Protest Guerrilla", sans-serif;
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> }
</pre></td>
</tr>
</tbody></table></div>
<h3 id="toc-couj-faux-3d-effect">Faux 3D Effect</h3>
<p>The next step is to create a rectangular element to house our digital clock. To ensure the rectangle appears slanted like in the demo, we will apply the style <code>transform: skewY(-5deg);</code>. We will also add a box shadow to the right and the top and inset box shadows on all sides.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table html"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre>.rectangle {
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> position: relative;
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> width: 340px;
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> height: 120px;
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> transform: skewY(-5deg);
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> border-bottom-right-radius: 16px;
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> box-shadow: inset -5px -5px 9px var(--shadow-light),
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> inset 5px 5px 9px var(--shadow-light),
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> 0px 10px 10px -10px var(--shadow-dark),
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> 10px 0px 10px -10px var(--shadow-dark);
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre>}
</pre></td>
</tr>
</tbody></table></div>
<p>The next step is to create an illusion of depth on the left and the top of the rectangle; we will do that by adding pseudo-elements to the left and top sides.</p>
<p>Let’s start with the left side.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.rectangle</span><span style="color: #d0d0d0;background-color: #151515">::before</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">content</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">absolute</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">left</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">-30px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">30px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--background</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transform-origin</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">right</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transform</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">skewY</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">45deg</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">box-shadow</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0px</span> <span style="color: #90a959">10px</span> <span style="color: #90a959">10px</span> <span style="color: #90a959">-10px</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--shadow-dark</span><span style="color: #d0d0d0">),</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">10px</span> <span style="color: #90a959">0px</span> <span style="color: #90a959">10px</span> <span style="color: #90a959">-10px</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--shadow-dark</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>By specifying the height as 100%, we want the element to cover the entire height of the rectangle. By setting <code>transform: skewY(45deg)</code> property, it skews this element by 45 degrees along the Y-axis, giving it a slanted appearance.</p>
<p>The <code>box-shadow</code> property adds a shadow effect to this slanted element, enhancing its three-dimensional look. You can play around with the values to achieve the desired look. </p>
<p>In this pseudo-element, we also add a box shadow on the right and bottom of the element. The spread radius of the shadow is set to a negative value to ensure that the shadow travels toward the inside of the element.</p>
<p>We are also using absolute positioning to ensure the element fits exactly on the left side of the rectangle.</p>
<p>For the top pseudo-element, we have the following:</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.rectangle</span><span style="color: #d0d0d0;background-color: #151515">::after</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">content</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">""</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">absolute</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">-30px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">left</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">0</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">100%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">30px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">rgb</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">227</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">222</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">231</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transform-origin</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">bottom</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transform</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">skewx</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">45deg</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">box-shadow</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">-5px</span> <span style="color: #90a959">-5px</span> <span style="color: #90a959">9px</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--shadow-light</span><span style="color: #d0d0d0">),</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #90a959">5px</span> <span style="color: #90a959">5px</span> <span style="color: #90a959">9px</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--shadow-medium</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>The pseudo-element will stretch the entire width of the rectangles and use absolute positioning to ensure it fits precisely on top of the rectangle when skewed. We are adding a box shadow with a minimal blur on all sides of this element.</p>
<p>At this point, we have something like this:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1885/posts/108532/image-upload/clock.png" loading="lazy" width="870px" height="495px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1885/posts/108532/image-upload/clock.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1885/posts/108532/image-upload/clock.png" loading="lazy" width="650px" height="372px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1885/posts/108532/image-upload/clock.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1885/posts/108532/image-upload/clock.png" loading="lazy" width="380px" height="221px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1885/posts/108532/image-upload/clock.png 2x"></figure>
<h3 id="toc-n1q5-the-time">The Time</h3>
<p>Let’s work on the nested time element, which contains the clock.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.time</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">display</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">flex</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-weight</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">900</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">justify-content</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">space-around</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">align-items</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">text-align</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">center</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">position</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">absolute</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">5px</span> <span style="color: #90a959">25px</span> <span style="color: #90a959">0</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">width</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">300px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">height</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">80px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">top</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">48.5%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">left</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">50%</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transform</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">translate</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">-50%</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">-50%</span><span style="color: #d0d0d0">)</span> <span style="color: #d0d0d0;background-color: #151515">skewY</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">-5deg</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">40px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">transform-origin</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">right</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background-color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">transparent</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-17" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>17</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">box-shadow</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">inset</span> <span style="color: #90a959">-5px</span> <span style="color: #90a959">-5px</span> <span style="color: #90a959">9px</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--shadow-light</span><span style="color: #d0d0d0">),</span>
</pre></td>
</tr>
<tr id="line-18" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>18</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">inset</span> <span style="color: #90a959">5px</span> <span style="color: #90a959">5px</span> <span style="color: #90a959">9px</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--shadow-medium</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-19" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>19</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Use Flexbox to ensure the child elements are aligned at the center and distributed evenly inside the parent. Set the font to bold and specify a width and height to ensure it doesn’t overflow outside the rectangle. </p>
<p>We are also skewing it to ensure the content flows with the shape of the enclosing element. The inset box-shadow on all sides creates an illusion of depth.</p>
<p>The final piece is to style the content . </p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table css"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.hours</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.separator</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.minutes</span><span style="color: #d0d0d0">,</span>
</pre></td>
</tr>
<tr id="line-4" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>4</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.seconds</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-5" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>5</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">background</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--darkBlue</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-6" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>6</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">color</span><span style="color: #d0d0d0">:</span> <span style="color: #d0d0d0;background-color: #151515">var</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">--textColor</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-7" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>7</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">margin-left</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-8" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>8</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">2px</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-9" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>9</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">border-radius</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-10" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>10</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-weight</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">900</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-11" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>11</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
<tr id="line-12" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>12</pre></td>
<td class="rouge-code"><pre><span style="color: #f4bf75">.seconds</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-13" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>13</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">font-size</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">15px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-14" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>14</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0;background-color: #151515">padding</span><span style="color: #d0d0d0">:</span> <span style="color: #90a959">10px</span> <span style="color: #90a959">4px</span><span style="color: #d0d0d0">;</span>
</pre></td>
</tr>
<tr id="line-15" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>15</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-16" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>16</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0">}</span>
</pre></td>
</tr>
</tbody></table></div>
<p>By doing this last step we have applied some margin and padding to ensure adequate spacing and readability and background color to make the text visible.</p>
<h2 id="toc-54se-javascript-functuality">JavaScript Functionality</h2>
<p>Let’s use JavaScript to make the clock functional. Create a function called <code>updateTime()</code>.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">function</span> <span style="color: #d0d0d0;background-color: #151515">updateTime</span><span style="color: #d0d0d0">()</span> <span style="color: #d0d0d0">{</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre> <span style="color: #d0d0d0">});</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Inside the function, Let’s first get all the elements that will need to be updated.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">hours</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.hours</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">minutes</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.minutes</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">seconds</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">document</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">querySelector</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">"</span><span style="color: #90a959">.seconds</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
</tbody></table></div>
<p>Create a variable called <code>currentTime</code> to store the current time. The current time is gotten using the new <code>Date()</code> constructor, as shown below.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody><tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d28445">const</span> <span style="color: #d0d0d0;background-color: #151515">currentTime</span> <span style="color: #d0d0d0">=</span> <span style="color: #aa759f">new</span> <span style="color: #d0d0d0;background-color: #151515">Date</span><span style="color: #d0d0d0">();</span>
</pre></td>
</tr></tbody></table></div>
<p>The built-in <code>Date()</code> object has several GET methods that we can use to specific components such as the current year, the current month, the current hour, the current minutes, and so on. </p>
<p><span>We need the following methods. </span></p>
<ul>
<li><span><code>getHours()</code>: returns the current hour (0-23).</span></li>
<li><span><code>getMinutes()</code>: returns the current minutes (0-59).</span></li>
<li><span><code>getSeconds()</code>: returns the current seconds (0-59).</span></li>
</ul>
<p>Let’s get the current hour, minutes, and seconds and update the corresponding elements.</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody>
<tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">hours</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">currentTime</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getHours</span><span style="color: #d0d0d0">().</span><span style="color: #d0d0d0;background-color: #151515">toString</span><span style="color: #d0d0d0">().</span><span style="color: #d0d0d0;background-color: #151515">padStart</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">2</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">0</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-2" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>2</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">minutes</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">currentTime</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getMinutes</span><span style="color: #d0d0d0">().</span><span style="color: #d0d0d0;background-color: #151515">toString</span><span style="color: #d0d0d0">().</span><span style="color: #d0d0d0;background-color: #151515">padStart</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">2</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">0</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
<tr id="line-3" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>3</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">seconds</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">innerHTML</span> <span style="color: #d0d0d0">=</span> <span style="color: #d0d0d0;background-color: #151515">currentTime</span><span style="color: #d0d0d0">.</span><span style="color: #d0d0d0;background-color: #151515">getSeconds</span><span style="color: #d0d0d0">().</span><span style="color: #d0d0d0;background-color: #151515">toString</span><span style="color: #d0d0d0">().</span><span style="color: #d0d0d0;background-color: #151515">padStart</span><span style="color: #d0d0d0">(</span><span style="color: #90a959">2</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">"</span><span style="color: #90a959">0</span><span style="color: #90a959">"</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr>
</tbody></table></div>
<h3 id="toc-giuy-update-the-time">Updating the Time</h3>
<p>The clock now shows the current time, but it’s not updating. To update it, we will use the <code>setInterval()</code>. <code>setInterval()</code> is a built-in method that updates a function after a specific time interval; in our case, we want the <code>UpdateTime()</code> function to be updated every 1 second (1000 milliseconds).</p>
<div class="rouge-syntax-highlight"><table class="rouge-line-table javascript"><tbody><tr id="line-1" class="lineno">
<td class="rouge-gutter gl" style="-moz-user-select: none;-ms-user-select: none;-webkit-user-select: none;user-select: none;"><pre>1</pre></td>
<td class="rouge-code"><pre><span style="color: #d0d0d0;background-color: #151515">setInterval</span><span style="color: #d0d0d0">(</span><span style="color: #d0d0d0;background-color: #151515">updateTime</span><span style="color: #d0d0d0">,</span> <span style="color: #90a959">1000</span><span style="color: #d0d0d0">);</span>
</pre></td>
</tr></tbody></table></div>
<p>And here is the final demo!</p>
<p><iframe src="https://codepen.io/tutsplus/embed/GRLKoVO?default-tab=result" width="850" height="500" frameborder="no" scrolling="no" allowfullscreen="true" loading="lazy">
</iframe></p>
<h2 id="toc-2phg-conlusion">Conclusion</h2>
<p>This tutorial has covered how to use CSS and JavaScript to build a realistic faux-3D Digital clock. Hopefully, this will serve as an inspiration to build more advanced and appealing components.</p>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/108532/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108532/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108532/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108532/a2t.img" width="1" /></div>2024-03-01 13:41:00 UTC2024-03-01 13:41:00 UTCEsther Vaatitag:webdesign.tutsplus.com,2005:PostPresenter/cms-1082522023-12-01T12:48:33+00:007 Best Practices to Improve Emoji Accessibility on the Web<style>* { box-sizing: border-box; } body {margin: 0;}*{box-sizing:border-box;}body{margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px;}#izy0y{background-color:rgb(243, 245, 246);}</style><div data-content-block-type="SummaryText" class="content-block content-block-summarytext summary-text" id="ikiyg">
<p>Emojis are frequently called the <a href="https://www.researchgate.net/publication/373361579_Emoji_Unite_Examining_the_Rise_of_Emoji_as_an_International_Language_Bridging_Cultural_and_Generational_Divides" target="_blank" rel="noopener">universal language</a>, or lingua franca, of the 21<sup>st</sup> century. They help break down barriers between people from different cultures and languages (and they’re good fun). However, accessibility experts point out <a href="https://eprints.bournemouth.ac.uk/33854/1/tigwell-gorman-menzies-CHI2020.pdf" target="_blank" rel="noopener">some important issues</a> related to emoji accessibility, and localization experts <a href="https://leaftranslations.com/international-emoji-use-and-meaning/" target="_blank" rel="noopener">share their concerns</a>.</p>
<p>In this article, we’ll look into emoji accessibility and see how web designers and content creators can prevent the most common issues.</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ijpn">
<h2 id="toc-fvv7-what-is-emoji-accessibility">Who is Affected by Emoji Accessibility Issues?</h2>
<p>Overall, emoji accessibility is an aspect of <a href="https://creativethemes.com/blocksy/blog/website-accessibility-primer/" target="_blank" rel="noopener">website accessibility</a> that is overlooked. If used without care, emojis can make it harder to access and understand web content for:</p>
<ul>
<li>screen reader users</li>
<li>the users of text-to-speech tools</li>
<li>people with vision impairments who set <a href="https://webdesign.tutsplus.com/css-tips-for-better-color-and-contrast-accessibility--cms-34472a" target="_blank" rel="noopener">high contrast mode</a> system-wide</li>
<li>people with <a href="https://www.deque.com/blog/an-introductory-guide-to-understanding-cognitive-disabilities/" target="_blank" rel="noopener">cognitive disabilities</a>
</li>
<li>people with <a href="https://vestibular.org/article/what-is-vestibular/vestibular-symptoms/" target="_blank" rel="noopener">vestibular disorders</a>
</li>
<li>visitors of <a href="https://webdesign.tutsplus.com/how-to-create-a-multilingual-website-a-step-by-step-guide--cms-107633t" target="_blank" rel="noopener">multilingual websites</a> that publish translated content</li>
<li>people who browse websites in <a href="https://webdesign.tutsplus.com/quick-tip-how-to-implement-dark-mode-in-your-website-using-media-queries--cms-32533t" target="_blank" rel="noopener">dark mode</a> for any reason</li>
</ul>
<p>Now, let’s see the accessibility issues the aforementioned groups encounter and how you can mitigate them.</p>
</div><div data-content-block-type="TableOfContents" class="content-block content-block-tableofcontents" id="ilqy">
<div data-content-block-type="ContentTextBlock" class="content-block content-block-contenttextblock" id="i7bhz"><p>Jump to our emoji accessibility tips:</p></div>
<ul class="visual-toc-list toc-ordered-list visual-toc__regular-theme div-container visual-toc-list__overflow" start="0">
<div class="visual-toc-column div-container">
<li class="toc-item-title"><a href="#toc-g2mp-dont-overuse-emojis"><span class="visual-toc__heading-title content-container">Don’t Overuse Emojis</span></a></li>
<li class="toc-item-title"><a href="#toc-ehks-resort-to-the-default-yellow-smileys-if-you-can"><span class="visual-toc__heading-title content-container">Resort to the Default Yellow Smileys and Hand Gestures</span></a></li>
<li class="toc-item-title"><a href="#toc-p1wo-avoid-using-emoticons"><span class="visual-toc__heading-title content-container">Avoid Using Emoticons</span></a></li>
<li class="toc-item-title"><a href="#toc-5ww8-test-your-emojis-in-dark-and-high-contrast-mode"><span class="visual-toc__heading-title content-container">Test Your Emojis in Different Color Modes</span></a></li>
</div>
<div class="visual-toc-column div-container">
<li class="toc-item-title"><a href="#toc-3xli-avoid-using-animated-emojis"><span class="visual-toc__heading-title content-container">Avoid Using Animated Emojis</span></a></li>
<li class="toc-item-title"><a href="#toc-m2vn-dont-use-emojis-to-convey-meaning"><span class="visual-toc__heading-title content-container">Don’t Use Emojis to Convey Meaning</span></a></li>
<li class="toc-item-title"><a href="#toc-vmhl-con"><span class="visual-toc__heading-title content-container">Think About Whether Your Emojis Need to Be ’Translated’</span></a></li>
</div>
</ul>
</div><div data-content-block-type="FullWidthSection" class="content-block content-block-fullwidthsection" id="izy0y"><div class="full-width-section__content-container div-container"><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i59kw">
<h3 id="toc-n2hk-emoji-a11y-a-dansky-short">Emoji A11y: A Dansky Short</h3>
<p>Got 60 seconds? Dansky wraps up our top <a href="https://www.youtube.com/shorts/aLUeBGYf_h4" target="_blank" rel="noopener">accessibility for emojis</a> tips.</p>
<figure class="post_image"><a href="https://www.youtube.com/shorts/aLUeBGYf_h4"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/30/posts/108252/image-upload/dansky_a11y.jpg" alt="daksy short video on youtube - accessibility for emojis" loading="lazy" width="870px" height="620px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/30/posts/108252/image-upload/dansky_a11y.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/30/posts/108252/image-upload/dansky_a11y.jpg" alt="daksy short video on youtube - accessibility for emojis" loading="lazy" width="650px" height="465px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/30/posts/108252/image-upload/dansky_a11y.jpg 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/108252/image-upload/dansky_a11y.jpg" alt="daksy short video on youtube - accessibility for emojis" loading="lazy" width="380px" height="274px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/108252/image-upload/dansky_a11y.jpg 2x"></a></figure>
</div></div></div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="iuol">
<h2 id="toc-g2mp-dont-overuse-emojis">
<span class="sectionnum">1.</span> Don’t Overuse Emojis</h2>
<p>As screen readers and <a href="https://business.tutsplus.com/tutorials/convert-speech-to-text-microsoft-word--cms-107999" target="_blank" rel="noopener">text-to-speech tools</a> read the built-in <a href="https://webdesign.tutsplus.com/style-your-alt-text--webdesign-12928a" target="_blank" rel="noopener">alt text</a> of emojis aloud, overusing them can overwhelm people who rely on these assistive technologies.</p>
<p>As a rule of thumb, don’t add more than three emojis after each other and only add a new one if it carries extra information. For example, adding three different types of laughing emojis (e.g. 😃😆😄) harms the user experience for people who access your website with a screen reader or text-to-speech tool.</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i0s3k">
<h2 id="toc-ehks-resort-to-the-default-yellow-smileys-if-you-can">
<span class="sectionnum">2.</span> Resort to the Default Yellow Smileys and Hand Gestures</h2>
<p>For the same reason mentioned above, try to use the default yellow smileys and hand gestures, unless skin tone adds extra meaning to your message.</p>
<p>The default smileys always have a shorter alt description than the modified ones — for example: <strong>waving hand sign</strong> vs. <strong>medium-light skin tone waving hand sign</strong>.</p>
<p>While using skin tones can add important information to the emoji, skin tone emojis make text-based content longer, which can become overwhelming for people who access web content with screen readers and text-to-speech tools, especially when they are overused — e.g. if you add more than one or all the skin tones of the same emoji like 👋👋🏻👋🏽👋🏾👋🏿.</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i8dq">
<h2 id="toc-p1wo-avoid-using-emoticons">
<span class="sectionnum">3.</span> Avoid Using Emoticons</h2>
<p>Emoticons are similar to emojis as they intend to express emotion in textual content. They consist of a group of letters, punctuation marks, and/or numbers which when placed next to each other more or less look like a facial expression (e.g. <code>:-)</code> for smiling) or express an emotion (e.g. <code><3</code> for a heart or <code>¯\_(ツ)_/¯</code> for a shrug).</p>
<p>However, unlike emojis, emoticons don’t have a built-in alt text, so screen readers and text-to-speech tools list the characters after each other when reading them aloud — e.g. “colon hyphen right round bracket” for the smiling emoticon.</p>
<p>To improve emoji accessibility, always use emojis instead of emoticons unless they are not available (e.g. in older email clients).</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i9ii">
<h2 id="toc-5ww8-test-your-emojis-in-dark-and-high-contrast-mode">
<span class="sectionnum">4.</span> Test Your Emojis in Different Color Modes</h2>
<p>By default, emojis are designed for light mode, however people with different types of <a href="https://webdesign.tutsplus.com/accessibility-basics-designing-for-visual-impairment--cms-27634a" target="_blank" rel="noopener">vision impairments</a> frequently browse the web using dark or high contrast mode.</p>
<p>In addition, dark mode is also often used by regular web users, especially if you have added a <a href="https://webdesign.tutsplus.com/simple-theme-switcher-css-checkbox-hack--cms-36736t" target="_blank" rel="noopener">theme switcher</a> to your website or application. However, even if you don’t have a theme or dark mode switcher, it’s still recommended that you test the emojis you use in your content or design for dark and high contrast modes, as people frequently set these accessibility modes from their operating system.</p>
<p>Below is an example of what some emojis look like in dark mode in Twitter’s post editor (set from the operating system as this is how most people with vision impairments use their computers, however the emojis look the same when we set Twitter’s own <strong>dark</strong> or <strong>dim</strong> mode in its web interface).</p>
<p>As you can see, some emojis are barely visible, and the issue becomes even more obvious when they are compared to emojis that still have high visibility in dark mode (this is also a good example of why it’s a good idea to use the default yellow emojis if you can):</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1999/posts/108252/image-upload/emojis_dark_mode_twitter.png" alt="Visible versus almost invisible emojis in dark mode on Twitter" loading="lazy" width="870px" height="477px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1999/posts/108252/image-upload/emojis_dark_mode_twitter.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1999/posts/108252/image-upload/emojis_dark_mode_twitter.png" alt="Visible versus almost invisible emojis in dark mode on Twitter" loading="lazy" width="650px" height="359px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1999/posts/108252/image-upload/emojis_dark_mode_twitter.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1999/posts/108252/image-upload/emojis_dark_mode_twitter.png" alt="Visible versus almost invisible emojis in dark mode on Twitter" loading="lazy" width="380px" height="214px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1999/posts/108252/image-upload/emojis_dark_mode_twitter.png 2x"></figure>
<p>Here are the same emojis in high contrast mode (also set system-wide) — as the screenshot above shows, they pose the same invisibility issue as in dark mode:</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1999/posts/108252/image-upload/emojis_high_contrast_mode_twitter_850.png" alt="Visible versus almost invisible emojis in high contrast mode on Twitter" loading="lazy" width="870px" height="477px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1999/posts/108252/image-upload/emojis_high_contrast_mode_twitter_850.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1999/posts/108252/image-upload/emojis_high_contrast_mode_twitter_850.png" alt="Visible versus almost invisible emojis in high contrast mode on Twitter" loading="lazy" width="650px" height="359px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1999/posts/108252/image-upload/emojis_high_contrast_mode_twitter_850.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1999/posts/108252/image-upload/emojis_high_contrast_mode_twitter_850.png" alt="Visible versus almost invisible emojis in high contrast mode on Twitter" loading="lazy" width="380px" height="214px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1999/posts/108252/image-upload/emojis_high_contrast_mode_twitter_850.png 2x"></figure>
<p>For reference, here’s what the same emojis look like in light mode — as you can see, the emojis that are barely visible in dark and high contrast modes are highly visible in light mode (however, some of the yellow emojis become less visible, e.g. the hand gesture at the end):</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1999/posts/108252/image-upload/emojis_light_mode_twitter_850.png" alt="Visible versus also visible emojis in light mode on Twiter" loading="lazy" width="870px" height="468px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1999/posts/108252/image-upload/emojis_light_mode_twitter_850.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1999/posts/108252/image-upload/emojis_light_mode_twitter_850.png" alt="Visible versus also visible emojis in light mode on Twiter" loading="lazy" width="650px" height="352px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1999/posts/108252/image-upload/emojis_light_mode_twitter_850.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1999/posts/108252/image-upload/emojis_light_mode_twitter_850.png" alt="Visible versus also visible emojis in light mode on Twiter" loading="lazy" width="380px" height="210px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1999/posts/108252/image-upload/emojis_light_mode_twitter_850.png 2x"></figure>
<p>You can further improve emoji accessibility if you choose an emoji design that adds an outline around the emojis, as emojis with a dark outline have higher visibility in light mode (while in dark and high contrast modes, the outlines are barely visible):</p>
<figure class="post_image"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=850/uploads/users/1999/posts/108252/image-upload/emojis_with_dark_outline.png" alt="Emojis with dark outline, some examples" loading="lazy" width="870px" height="277px" class="resized-image resized-image-desktop" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1700/uploads/users/1999/posts/108252/image-upload/emojis_with_dark_outline.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=630/uploads/users/1999/posts/108252/image-upload/emojis_with_dark_outline.png" alt="Emojis with dark outline, some examples" loading="lazy" width="650px" height="210px" class="resized-image resized-image-tablet" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=1260/uploads/users/1999/posts/108252/image-upload/emojis_with_dark_outline.png 2x"><img src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/1999/posts/108252/image-upload/emojis_with_dark_outline.png" alt="Emojis with dark outline, some examples" loading="lazy" width="380px" height="129px" class="resized-image resized-image-mobile" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/1999/posts/108252/image-upload/emojis_with_dark_outline.png 2x"></figure>
<figure class="post_image">
<figcaption>Image credit: <a href="https://emojipedia.org/" target="_blank" rel="noopener">Emojipedia.org</a></figcaption>
</figure>
<p>You can also quickly check the visibility of your emojis using the color blindness emulator of Chrome DevTools (you can do it <a href="https://webdesign.tutsplus.com/designing-for-color-blindness-with-chrome-devtools--cms-35827a" target="_blank" rel="noopener">in just 4 clicks</a>).</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="its4">
<h2 id="toc-3xli-avoid-using-animated-emojis">
<span class="sectionnum">5.</span> Avoid Using Animated Emojis</h2>
<p>While animated emojis are not the norm, <a href="https://giphy.com/explore/animated-emoji" target="_blank" rel="noopener">they do exist</a> and can cause issues for people with vestibular disorders who may experience dizziness, headaches, nausea, and seizures when looking at excessive or irregular motion on the screen for a longer period of time.</p>
<p>Generally speaking, the same rules apply to animated emojis as to <a href="https://webdesign.tutsplus.com/a-guide-to-creating-accessible-animations--cms-32038t" target="_blank" rel="noopener">animation accessibility overall</a> — avoid using them unless they carry specific meaning. Even if you want to add them to your design or content, don’t overuse them because multiple animated emojis next to each other, potentially each moving at a different speed, can harm user experience even for non-disabled viewers.</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="ice5">
<h2 id="toc-m2vn-dont-use-emojis-to-convey-meaning">
<span class="sectionnum">6.</span> Don’t Use Emojis to Convey Meaning</h2>
<p>Similar to <a href="https://webdesign.tutsplus.com/tips-for-using-colors-in-ui-design--cms-41921a" target="_blank" rel="noopener">color in web design</a>, it’s not recommended that you solely rely on emojis to deliver a message, as your intended audience won’t necessarily be able to consume them. Emojis can be a nice addition and enhance your text with extra meaning, but they shouldn’t be used as a primary means of communication.</p>
<p>In other words, avoid using emojis to replace functional words in sentences — for example, this is not an accessible message: <code>your 🏠 is on 🔥, 📞 the 🚒</code>. People don’t always read for fun, textual content can also be important and urgent, thus following the best practices of emoji accessibility can sometimes save lives.</p>
<p>Inconsistently used emojis also harm <a href="https://webdesign.tutsplus.com/readability-on-the-web--cms-31165a" target="_blank" rel="noopener">readability</a> and can pose issues for people with cognitive disabilities because it will take them more time to navigate and understand your content.</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="irii">
<h2 id="toc-vmhl-con">
<span class="sectionnum">7.</span> Think About Whether Your Emojis Need to Be “Translated”</h2>
<p>If you have a multilingual website, you also need to think about whether the emojis you use in your content or design need to be localized.</p>
<p>Translated content is not the same as original content written for a specific culture, language, and audience because text and design have many other aspects beyond grammar and words. While overall, emojis constitute a universal language, sometimes they can mean different things to people from different cultures.</p>
<p>Emoji localization can be hard if you don’t know both languages you translate between well, not just at a linguistic but also at a cultural level.</p>
<p><a href="https://www.sciencedirect.com/science/article/pii/S2468696421000318" target="_blank" rel="noopener">This Online Social Networks and Media study (2021)</a> lists multiple examples of how emojis are used and meant differently in various countries and languages, but as a rule of thumb, treat emojis as any other part of a language, and don’t forget to localize them for a wider cultural context. This means that you may need to use a different emoji to express the same sentiment or meaning in another language.</p>
</div><div data-content-block-type="Wysi" class="content-block content-block-wysi" id="i7ve">
<h2 id="toc-1o5r-summary">Summary</h2>
<p>Emoji accessibility is an often-overlooked aspect of website accessibility that impacts multiple users with or without disabilities — including people with vision, vestibular, and cognitive impairments; the users of dark and high contrast modes, screen readers, and text-to-speech tools; and the international audience of multilingual websites and applications.</p>
<p>In this article, we looked into seven best practices that web designers, developers, and content creators can use to improve emoji accessibility.</p>
<p>While there’s definitely a trade-off between design, aesthetics, and the fun factor of emojis versus emoji accessibility, it’s still worth considering the issues above and implementing some or all of the best practices because they are relatively easy ways to help your visitors to access, use, and understand your design and the content you publish on your website.</p>
<ul class="roundup-block__contents posts--half-width roundup-block--list">
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/building-an-inclusive-web-why-accessibility-matters--cms-29773"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/29773/preview_image/brideg-a11y.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Building an Inclusive Web: Why Accessibility Matters</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/20418/profileImage/RlQ_WWuR_400x400.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Sami Keijonen</div>
<div class="roundup-block__published-date">03 Dec 2017</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/style-your-alt-text--webdesign-12928"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/9397/preview_image/alt.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/9397/preview_image/alt.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/9397/preview_image/alt.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/9397/preview_image/alt.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/9397/preview_image/alt.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/9397/preview_image/alt.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">I Style My ALT Text (and You Should Too)</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/55/profiles/1369/profileImage/400x400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/55/profiles/1369/profileImage/400x400.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Nicole Merlin</div>
<div class="roundup-block__published-date">14 Sep 2023</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/accessibility-basics-designing-for-visual-impairment--cms-27634"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/27634/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/27634/preview_image/pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/27634/preview_image/pre.png" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/27634/preview_image/pre.png 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/27634/preview_image/pre.png" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/27634/preview_image/pre.png 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Accessibility Basics: Designing for Visual Impairment
</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/19988/profileImage/graeme.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/19988/profileImage/graeme.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/19988/profileImage/graeme.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/19988/profileImage/graeme.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/19988/profileImage/graeme.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/19988/profileImage/graeme.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Graeme Fulton</div>
<div class="roundup-block__published-date">13 Jun 2022</div>
</div>
</div>
</div>
</div></a></li>
<li class="roundup-block__content"><a class="roundup-block__content-link" href="https://webdesign.tutsplus.com/articles/keyboard-accessibility-tips-using-html-and-css--cms-31966"><div class="roundup-block__content-container">
<div class="roundup-block__preview">
<img class="roundup-block__preview-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31966/preview_image/ally-pre.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31966/preview_image/ally-pre.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/posts/31966/preview_image/ally-pre.jpg" alt="" loading="lazy" width="420px" height="297px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/posts/31966/preview_image/ally-pre.jpg 2x"><img class="roundup-block__preview-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/posts/31966/preview_image/ally-pre.jpg" alt="" loading="lazy" width="380px" height="269px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/posts/31966/preview_image/ally-pre.jpg 2x">
</div>
<div class="roundup-block__content-meta">
<div class="roundup-block__content-title">Keyboard Accessibility Tips Using HTML and CSS</div>
<div class="roundup-block__author-info">
<div class="roundup-block__author-profile-image">
<img class="roundup-block__author-image resized-image resized-image-desktop" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-tablet" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=400/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg" alt="" loading="lazy" width="420px" height="420px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=800/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg 2x"><img class="roundup-block__author-image resized-image resized-image-mobile" src="https://cms-assets.tutsplus.com/cdn-cgi/image/width=360/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg" alt="" loading="lazy" width="380px" height="380px" srcset="https://cms-assets.tutsplus.com/cdn-cgi/image/width=720/uploads/users/30/profiles/20515/profileImage/wvQWK027_400x400.jpg 2x">
</div>
<div class="roundup-block__author-meta">
<div class="roundup-block__author-name">Anna Monus</div>
<div class="roundup-block__published-date">12 Jan 2024</div>
</div>
</div>
</div>
</div></a></li>
</ul>
</div><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668810/s/108252/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108252/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108252/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668810/c/35227/s/108252/a2t.img" width="1" /></div>2024-03-01 12:38:04 UTC2024-03-01 12:38:04 UTCAnna Monus