a:3:{i:0;a:25:{s:2:"id";i:129838;s:4:"date";s:19:"2021-08-27T10:19:23";s:8:"date_gmt";s:19:"2021-08-27T07:19:23";s:4:"guid";a:1:{s:8:"rendered";s:36:"https://themes.artbees.net/?p=129838";}s:8:"modified";s:19:"2021-08-27T10:19:28";s:12:"modified_gmt";s:19:"2021-08-27T07:19:28";s:4:"slug";s:35:"create-popups-in-elementor-websites";s:6:"status";s:7:"publish";s:4:"type";s:4:"post";s:4:"link";s:68:"https://themes.artbees.net/blog/create-popups-in-elementor-websites/";s:5:"title";a:1:{s:8:"rendered";s:42:"How to Create Popups in Elementor Websites";}s:7:"content";a:2:{s:8:"rendered";s:18696:"
<div class="wp-block-image"><figure class="aligncenter size-full"><img width="1200" height="600" src="https://themes.artbees.net/wp-content/uploads/2021/08/blog-popup-elementor.png" alt="" class="wp-image-129839" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/blog-popup-elementor.png 1200w, https://themes.artbees.net/wp-content/uploads/2021/08/blog-popup-elementor-300x150.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/blog-popup-elementor-1024x512.png 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/blog-popup-elementor-768x384.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure></div>



<p>A popup is a small window that appears from different sides or with different effects as a customer browses a website. It can have different shapes, forms, locations and functioning behavior, it can be used to show important information, make an agreement with the user, collect leads or gather other information from the end user.</p>



<p>Let&#8217;s be honest, you probably hate to see popups when you’re browsing a website. It’s usually unwanted and distracts from whatever process you were engaged in. However, as a site owner, you can’t afford to ignore making popups because they have the potential to greatly increase lead generation. In this article we will discuss the function of popups and present several methods on how to create popups in Elementor websites.&nbsp;</p>



<h2 id="h-popups-in-elementor-pro">Popups in Elementor Pro&nbsp;</h2>



<p>Elementor has a built-in feature for popups, but in order to utilize this feature you need to upgrade your account to the Pro version.&nbsp;</p>



<p>If you are familiar with Elementor, then you probably know how to create and manage templates. Building popups in Elementor is very similar to working with templates; you create them, define rules and set where they will appear. Let’s shortly review how this works in Elementor Pro:First you need to create a new popup via <strong>Elementor &gt; Popups &gt; Add new popup.</strong> Once you add the name you will have the chance to choose from a pre-designed template or start from scratch.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup.jpg" alt="" class="wp-image-129840" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup.jpg 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup-300x138.jpg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup-1024x470.jpg 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup-768x352.jpg 768w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup-1536x705.jpg 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>No matter which way you use it, working with page elements is absolutely the same. Besides, this post is not about how to use the Elementor page builder. Rather, the most interesting part of the popup is in the template setting (marked by the gear icon at the bottom left). Here in the settings tab you can define width and height, animations for entry and exit, the horizontal and vertical position of the popup window and close button style and appearance.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_2.jpg" alt="" class="wp-image-129843" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_2.jpg 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_2-300x138.jpg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_2-1024x471.jpg 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_2-768x353.jpg 768w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_2-1536x706.jpg 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>On the style tab (on the right side), you can define the style of the elements used in the popup, close button style and some other style-related settings.&nbsp;</p>



<p>If you finished setting up the popup window it&#8217;s time to define how and when to show your popup. To do this you need to define the Publish Settings of this popup.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_3.jpg" alt="" class="wp-image-129844" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_3.jpg 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_3-300x138.jpg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_3-1024x472.jpg 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_3-768x354.jpg 768w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_3-1536x707.jpg 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>The<strong> Conditions </strong>tab defines the location of the popup. You can choose different locations like pages, posts, only frontpage, only Shop page or anything else you can imagine. You can also combine rules together.</p>



<p>The<strong> Trigger </strong>tab defines exactly when you want a popup to appear. There are several triggers and they are enough to setup advanced processes including:</p>



<ol><li>On-Page Load</li><li>On Scroll</li><li>On Scroll to Element</li><li>On Click</li><li>After Inactivity</li><li>On-Page Exit Intent</li></ol>



<p>The<strong> Advanced Rules</strong> tab allows you to define the advanced conditions of your popup such as&nbsp; where or to whom you want to display the popup. These include different user roles as well. There are many different rules available and they can also be combined with each other.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_4.jpg" alt="" class="wp-image-129845" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_4.jpg 1345w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_4-300x139.jpg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_4-1024x474.jpg 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/elementor_popup_4-768x356.jpg 768w" sizes="(max-width: 1345px) 100vw, 1345px" /></figure></div>



<p>Once you set all your rules and click Save &amp; Close, your popup will be ready and will show up for end users according to the rules you set.</p>



<h2>Popups in Jupiter X</h2>



<p>Popups in Jupiter X can be used even if you don&#8217;t have Elementor Pro! They are organized by famous <a href="https://crocoblock.com/plugins/jetpopup/" target="_blank" rel="noreferrer noopener nofollow">JetPopup </a>plugins, which is a premium plugin and included for free in Jupiter X.</p>



<p>In JetPopup, as in Elementor pro, you also have pre-built templates, but here you have a better selection of templates and they can be filtered by different categories.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup.jpg" alt="" class="wp-image-129846" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup.jpg 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup-300x170.jpg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup-1024x582.jpg 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup-768x436.jpg 768w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup-1536x872.jpg 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>The process is almost the same as in Elementor Pro: you start with a blank template or with a premade template. Designing the page with the Elementor widget is the same, you just need to add and configure the Elementor widget. The difference is in the settings of the popup. In this case you don&#8217;t have a Publish Settings tab, but instead you can configure all the settings from the same window.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_2.jpg" alt="" class="wp-image-129851" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_2.jpg 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_2-300x169.jpg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_2-1024x576.jpg 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_2-768x432.jpg 768w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_2-1536x864.jpg 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>Here in the settings tab you can define animation, popup events, amount of popups and many other settings. The most important part here is Display Condition, which defines rules of where exactly you want to show your popup. Here you can choose to include or exclude pages, posts, categories or many other post types. They can also be combined with each other.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_3.jpg" alt="" class="wp-image-129849" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_3.jpg 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_3-300x156.jpg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_3-1024x532.jpg 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_3-768x399.jpg 768w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_3-1536x797.jpg 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>The Style tab in the settings is responsible for the style of the popup. Here you can define width and height, position, background type and many other settings such as close button style and overlay of the popup, which can be defined as a color or image.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_4.jpg" alt="" class="wp-image-129847" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_4.jpg 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_4-300x162.jpg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_4-1024x554.jpg 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_4-768x415.jpg 768w, https://themes.artbees.net/wp-content/uploads/2021/08/Jupiter_X_Popup_4-1536x831.jpg 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>The good thing about the JetPopup plugin combination with Jupiter X is that when you install one of many demos of Jupiter X it comes with a pre-designed popup template optimized for that particular demo. Most of the demos are packed with nice looking popups, especially shop templates.</p>



<h2>Popups by Growmatik</h2>



<p>It’s likely you already know about&nbsp;<a href="https://growmatik.ai/">Growmatik,</a> our product that automates your entire marketing arsenal and drives more sales via personalized web pages, emails and popups, all from within one tool. However, if you have not tried it before I highly recommend checking it out. Popups in Growmatik can be displayed for specific events or to certain users from certain locations. In order to create such popups, first of all you need to make sure you first <a href="https://growmatik.ai/help/how-to-register-and-integrate-your-site-with-growmatik/">integrate your website with Growmatik</a>.<a href="https://growmatik.ai/help/how-to-register-and-integrate-your-site-with-growmatik/"> </a>Once this process is done, you can start creating popups from the Workshop page:</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup.jpg" alt="popups in Elementor - growmatik popups" class="wp-image-129854" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup.jpg 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup-300x119.jpg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup-1024x406.jpg 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup-768x305.jpg 768w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup-1536x609.jpg 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>Now, click on the button on the upper right side to add the popup. Basically, you have 2 options, to start from scratch or use readymade popups. These pre-made popups were created to fit the most common marketing scenarios like subscription, discount offer, content giveaway, new collection and many others.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_create.jpg" alt="popups in Elementor - growmatik templates" class="wp-image-129855" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_create.jpg 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_create-300x144.jpg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_create-1024x491.jpg 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_create-768x368.jpg 768w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_create-1536x736.jpg 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>Starting with pre-built templates is the easiest option, of course, and will save you plenty of time. You’ll just need to change some text, images and the appearance settings of the popup window as everything else is already created and configured.</p>



<p>If you decide to start from scratch, it will take more time but your template will be fully customized. It’s all about your creativity! I love prebuilt templates but they do not always fit my needs, which is the main reason why you might want to start from scratch.</p>



<p>The best thing about <a href="https://themes.artbees.net/blog/create-effective-popups-in-wordpress/">Gromatik popups</a> is that you are not distracted with other elements in the editing window. The sleek design helps you focus on your work, such as the important elements and settings window of the popup. Take a look at this screenshot to get an idea what the Growmatik interface looks like.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_2.jpg" alt="popups in Elementor - growmatik popup" class="wp-image-129857" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_2.jpg 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_2-300x151.jpg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_2-1024x516.jpg 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_2-768x387.jpg 768w, https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_2-1536x774.jpg 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>Everything you may want from the popup, you have in your window. Growmatik boasts a responsive view, real time preview, the setup of the popup layout, overlay style and many other related settings that can be configured from a single window. That&#8217;s how easy it is!</p>



<p>Once your popup window is finished it&#8217;s time to create some automation. In other words, this popup now needs smart rules of appearance since we don&#8217;t want to show it for every user who opens our site. In this case, Growmatik has automation rules. To access these, you don’t even have to leave the&nbsp; popup builder. From the same window, on the top left you’ll see the <strong>Options</strong> button. Choose “<strong>Use in automation</strong>” and then, depending on your marketing goal, choose who you want to show your popup: guests, leads or customers. In the window that appears next you will have the option to show your popup window to filtered users by parameters such as location, device used, period of the time and many others.</p>



<p>We will not review all the details of the creation process but let&#8217;s check this screenshot, where we decided to show popups to users from Georgia and Italy who are using mobile devices. We want our popup to appear after they scroll our page by 25% and this campaign should run from 8 August to 13 September. On the right side we chose which popup to show for this campaign:</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/Growmattic_popup_3.jpg" alt="popups in Elementor - create a rule" class="wp-image-129858" width="862" height="515"/></figure></div>



<p>As we can see, creating this process is very easy, even for beginners, but be aware that we covered only the basics of the process. Actually, Growmatik is a versatile tool and it can be used for advanced marketing scenarios.</p>



<h2>Conclusion</h2>



<p>Thank you for reading this article! I hope you now have more information on creating popups in Elementor and other key marketing programs. As you can see, making a great looking popup is not a big deal and it is super easy. Nowadays, you don&#8217;t need to design popups from the ground up, since many ready-made templates are available. You just need to change some settings and set up appearance rules. As a site owner, you always need to imagine yourself as a viewer of the site. Don&#8217;t create too many popups and don&#8217;t distract users, since only good looking and well-functioning popups can really increase leads</p>



<p>If you have any questions or tips to add, please feel free to comment below!</p>
";s:9:"protected";b:0;}s:7:"excerpt";a:2:{s:8:"rendered";s:350:"<p>A popup is a small window that appears from different sides or with different effects as a customer browses a website. It can have different shapes, forms, locations and functioning behavior, it can be used to show important information, make an agreement with the user, collect leads or gather other information from the end user. [&hellip;]</p>
";s:9:"protected";b:0;}s:6:"author";i:68861;s:14:"featured_media";i:0;s:14:"comment_status";s:4:"open";s:11:"ping_status";s:4:"open";s:6:"sticky";b:0;s:8:"template";s:0:"";s:6:"format";s:8:"standard";s:4:"meta";a:9:{s:16:"_bbp_topic_count";i:0;s:16:"_bbp_reply_count";i:0;s:22:"_bbp_total_topic_count";i:0;s:22:"_bbp_total_reply_count";i:0;s:16:"_bbp_voice_count";i:0;s:26:"_bbp_anonymous_reply_count";i:0;s:23:"_bbp_topic_count_hidden";i:0;s:23:"_bbp_reply_count_hidden";i:0;s:25:"_bbp_forum_subforum_count";i:0;}s:10:"categories";a:1:{i:0;i:10874;}s:4:"tags";a:4:{i:0;i:18567;i:1;i:18568;i:2;i:18569;i:3;i:18570;}s:10:"yoast_head";s:4109:"<!-- This site is optimized with the Yoast SEO Premium plugin v15.2.1 - https://yoast.com/wordpress/plugins/seo/ -->
<title>How to Create Popups in Elementor Websites</title>
<meta name="description" content="In this article, we are going to walk you through the ins and outs of setting up popups in Elementor, Jupiter X and Growmatik." />
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<link rel="canonical" href="https://themes.artbees.net/blog/create-popups-in-elementor-websites/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="How to Create Popups in Elementor Websites" />
<meta property="og:description" content="In this article, we are going to walk you through the ins and outs of setting up popups in Elementor, Jupiter X and Growmatik." />
<meta property="og:url" content="https://themes.artbees.net/blog/create-popups-in-elementor-websites/" />
<meta property="og:site_name" content="WordPress Websites For Businesses, Artists, Bloggers Shops And More" />
<meta property="article:publisher" content="https://www.facebook.com/artbees" />
<meta property="article:published_time" content="2021-08-27T07:19:23+00:00" />
<meta property="article:modified_time" content="2021-08-27T07:19:28+00:00" />
<meta property="og:image" content="https://themes.artbees.net/wp-content/uploads/2021/08/blog-popup-elementor.png" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@artbees_design" />
<meta name="twitter:site" content="@artbees_design" />
<meta name="twitter:label1" content="Written by">
	<meta name="twitter:data1" content="Nodari Chkhikvadze">
	<meta name="twitter:label2" content="Est. reading time">
	<meta name="twitter:data2" content="6 minutes">
<script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://themes.artbees.net/#website","url":"https://themes.artbees.net/","name":"WordPress Websites For Businesses, Artists, Bloggers Shops And More","description":"","potentialAction":[{"@type":"SearchAction","target":"https://themes.artbees.net/?s={search_term_string}","query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://themes.artbees.net/blog/create-popups-in-elementor-websites/#primaryimage","inLanguage":"en-US","url":"https://themes.artbees.net/wp-content/uploads/2021/08/blog-popup-elementor.png","width":1200,"height":600},{"@type":"WebPage","@id":"https://themes.artbees.net/blog/create-popups-in-elementor-websites/#webpage","url":"https://themes.artbees.net/blog/create-popups-in-elementor-websites/","name":"How to Create Popups in Elementor Websites","isPartOf":{"@id":"https://themes.artbees.net/#website"},"primaryImageOfPage":{"@id":"https://themes.artbees.net/blog/create-popups-in-elementor-websites/#primaryimage"},"datePublished":"2021-08-27T07:19:23+00:00","dateModified":"2021-08-27T07:19:28+00:00","author":{"@id":"https://themes.artbees.net/#/schema/person/d8f5cd313297f235df785694911a2f0d"},"description":"In this article, we are going to walk you through the ins and outs of setting up popups in Elementor, Jupiter X and Growmatik.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://themes.artbees.net/blog/create-popups-in-elementor-websites/"]}]},{"@type":"Person","@id":"https://themes.artbees.net/#/schema/person/d8f5cd313297f235df785694911a2f0d","name":"Nodari Chkhikvadze","image":{"@type":"ImageObject","@id":"https://themes.artbees.net/#personlogo","inLanguage":"en-US","url":"https://secure.gravatar.com/avatar/495ce0065a619500fa0d0292e7554698?s=96&d=mm&r=g","caption":"Nodari Chkhikvadze"},"description":"Nodari has been working remotely for 8 years now from a beautiful provincial city. He started his online career as an author on Themeforest. While not at work you\u2019ll find him playing tennis, riding a bike or hiking in the mountains."}]}</script>
<!-- / Yoast SEO Premium plugin. -->";s:6:"_links";a:10:{s:4:"self";a:1:{i:0;a:1:{s:4:"href";s:53:"https://themes.artbees.net/wp-json/wp/v2/posts/129838";}}s:10:"collection";a:1:{i:0;a:1:{s:4:"href";s:46:"https://themes.artbees.net/wp-json/wp/v2/posts";}}s:5:"about";a:1:{i:0;a:1:{s:4:"href";s:51:"https://themes.artbees.net/wp-json/wp/v2/types/post";}}s:6:"author";a:1:{i:0;a:2:{s:10:"embeddable";b:1;s:4:"href";s:52:"https://themes.artbees.net/wp-json/wp/v2/users/68861";}}s:7:"replies";a:1:{i:0;a:2:{s:10:"embeddable";b:1;s:4:"href";s:61:"https://themes.artbees.net/wp-json/wp/v2/comments?post=129838";}}s:15:"version-history";a:1:{i:0;a:2:{s:5:"count";i:4;s:4:"href";s:63:"https://themes.artbees.net/wp-json/wp/v2/posts/129838/revisions";}}s:19:"predecessor-version";a:1:{i:0;a:2:{s:2:"id";i:129866;s:4:"href";s:70:"https://themes.artbees.net/wp-json/wp/v2/posts/129838/revisions/129866";}}s:13:"wp:attachment";a:1:{i:0;a:1:{s:4:"href";s:60:"https://themes.artbees.net/wp-json/wp/v2/media?parent=129838";}}s:7:"wp:term";a:2:{i:0;a:3:{s:8:"taxonomy";s:8:"category";s:10:"embeddable";b:1;s:4:"href";s:63:"https://themes.artbees.net/wp-json/wp/v2/categories?post=129838";}i:1;a:3:{s:8:"taxonomy";s:8:"post_tag";s:10:"embeddable";b:1;s:4:"href";s:57:"https://themes.artbees.net/wp-json/wp/v2/tags?post=129838";}}s:6:"curies";a:1:{i:0;a:3:{s:4:"name";s:2:"wp";s:4:"href";s:23:"https://api.w.org/{rel}";s:9:"templated";b:1;}}}}i:1;a:25:{s:2:"id";i:129148;s:4:"date";s:19:"2021-08-19T13:32:25";s:8:"date_gmt";s:19:"2021-08-19T10:32:25";s:4:"guid";a:1:{s:8:"rendered";s:36:"https://themes.artbees.net/?p=129148";}s:8:"modified";s:19:"2021-08-19T17:16:39";s:12:"modified_gmt";s:19:"2021-08-19T14:16:39";s:4:"slug";s:47:"how-to-build-a-woocommerce-store-with-elementor";s:6:"status";s:7:"publish";s:4:"type";s:4:"post";s:4:"link";s:80:"https://themes.artbees.net/blog/how-to-build-a-woocommerce-store-with-elementor/";s:5:"title";a:1:{s:8:"rendered";s:47:"How to Build a WooCommerce Store with Elementor";}s:7:"content";a:2:{s:8:"rendered";s:13867:"
<div class="wp-block-image"><figure class="aligncenter size-full"><img width="1200" height="600" src="https://themes.artbees.net/wp-content/uploads/2021/08/blog-woocommerce-elementor.png" alt="" class="wp-image-129149" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/blog-woocommerce-elementor.png 1200w, https://themes.artbees.net/wp-content/uploads/2021/08/blog-woocommerce-elementor-300x150.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/blog-woocommerce-elementor-1024x512.png 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/blog-woocommerce-elementor-768x384.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure></div>



<p>If you are going to create an Ecommerce website, you’ll be able to do it easily with the combined capability of Elementor, WooCommerce and the Jupiter X theme. These powerful programs allow you to design a fully-functional ecommerce website without any coding. In this post, you’ll find all the steps you need to take when creating your own WooCommerce store with Elementor.</p>



<h2 id="h-the-tools-you-need-to-make-a-woocommerce-store">The Tools You Need To Make A WooCommerce Store</h2>



<p>There are two main tools you’ll need to create your online store beyond the WooCommerce plugin:</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/jupiterx-theme-1.png" alt="" class="wp-image-129231" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/jupiterx-theme-1.png 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/jupiterx-theme-1-300x225.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/jupiterx-theme-1-1024x767.png 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/jupiterx-theme-1-768x576.png 768w, https://themes.artbees.net/wp-content/uploads/2021/08/jupiterx-theme-1-1536x1151.png 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p><strong>Jupiter X Theme</strong> – this is a premium WordPress <a href="https://themeforest.net/item/jupiter-multipurpose-responsive-theme/5177775">theme</a> that includes customization options, a bundled WooCommerce plugin and demo templates.</p>



<p><strong>Elementor</strong> – this is a free page builder that will help you customize pages and add any content. It’s also bundled with the Jupiter X theme.</p>



<p>Next we’ll explain how to create and customize the product pages and make them look great.</p>



<h2>Installing Jupiter X and WooCommerce Templates&nbsp;</h2>



<p>The first step you need to take in creating a WooCommerce site is installing the Jupiter X theme. The process is quite simple and is explained fully <a href="https://themes.artbees.net/docs/installing-jupiter-x/">here</a>. If you are new to WordPress and WooCommerce, or just want to save time, you can install a demo template to get an already built WooCommerce site and just replace demo products and other demo content with yours. In <a href="https://themes.artbees.net/docs/installing-a-template/">this post</a> you’ll get a detailed instruction on how to import a demo template.&nbsp;</p>



<h2>Use Customizer to Edit the Settings</h2>



<p>Jupiter X provides WooCommerce settings in the WordPress Customizer. You can edit some styles, enable/disable options and see the results right away on a real-time preview.&nbsp;</p>



<p>So, after installing WooCommerce, you can access default WooCommerce pages, which can be styled in Appearance &gt; Customize &gt; WooCommerce.</p>



<p>Here are the sections you can customize:</p>



<ul><li>Product Archive</li><li>Product List</li><li>Product Page</li><li>Product Catalog</li><li>Checkout &amp; Cart</li><li>Store Notice</li><li>Product Images</li></ul>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/woocommerce-customizer-1.png" alt="" class="wp-image-129233" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/woocommerce-customizer-1.png 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/woocommerce-customizer-1-300x227.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/woocommerce-customizer-1-1024x774.png 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/woocommerce-customizer-1-768x580.png 768w, https://themes.artbees.net/wp-content/uploads/2021/08/woocommerce-customizer-1-1536x1161.png 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>WooCommerce settings like Store Notice, Product Catalog, Product Images are default settings and not related to Jupiter X. You can read about them in the <a href="https://docs.woocommerce.com/document/woocommerce-customizer/" target="_blank" rel="noreferrer noopener nofollow">WooCommerce documentation</a>.&nbsp;</p>



<h3>Product Archive</h3>



<p>In the “Product Archive” tab you can set margin and padding values that will be applied on WooCommerce archive/category pages. Also there is a “Styles” tab where you can edit the color, fonts for the title and description on the archive pages.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-archive-1.png" alt="" class="wp-image-129235" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-archive-1.png 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-archive-1-300x206.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-archive-1-1024x703.png 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-archive-1-768x527.png 768w, https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-archive-1-1536x1054.png 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<h3>Product List&nbsp;</h3>



<p>The settings in “Product List” allow you to enable/disable different elements, set columns and rows for the products. Also you can style the elements like “Add to Cart” button, product title, Sale and Out of Stock badges, etc. Jupiter X documentation has an <a href="https://themes.artbees.net/docs/product-list-in-shop-customizer/">article</a> related to Product List that describes the options in detail.</p>



<h3>Product Page</h3>



<p>This tab provides the settings for single product pages. There are 8 templates you can select for single products. You can view their examples on Jupiter X <a href="https://jupiterx.artbees.net/">demo site</a> (hover the Shop menu item and check the links Layout 1 &#8211; Layout 8).</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-page-1.png" alt="WooCommerce store with Elementor - product page" class="wp-image-129237" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-page-1.png 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-page-1-300x225.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-page-1-1024x767.png 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-page-1-768x576.png 768w, https://themes.artbees.net/wp-content/uploads/2021/08/customizer-product-page-1-1536x1151.png 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>There are also options to enable/disable different elements on the page like Categories, Tags, Short Description, Review tab, etc. In addition, you can disable Image Lightbox and Image Zoom. The “Styles” tab provides styling options for the elements, such as changing font family or font size for product name, setting border for an image, styling social icons and so on.</p>



<h3>Checkout &amp; Cart</h3>



<p>The “Checkout &amp; Cart” tab has an option to disable steps, which you have by default on the Cart and Checkout pages.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/customize-cart-1.png" alt="WooCommerce store with Elementor - customize cart" class="wp-image-129244" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/customize-cart-1.png 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/customize-cart-1-300x187.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/customize-cart-1-1024x639.png 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/customize-cart-1-768x479.png 768w, https://themes.artbees.net/wp-content/uploads/2021/08/customize-cart-1-1536x958.png 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>Additionally you can style these steps, headings, buttons, thumbnail and others in the “Style” tab.</p>



<h2>Creating a Custom Shop Page With Elementor</h2>



<p>WooCommerce creates a default Shop page that is not editable and other content can’t be added to it.In this case we have a solution: create a custom Shop page using Elementor editor where you’ll be able to add any content you need. Of course, you need to display products on your Shop page, and to do this you can add the <a href="https://themes.artbees.net/docs/products-element/"><strong>JX Products</strong> widget</a> to the Elementor editor.</p>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/jx-products-1.png" alt="WooCommerce store with Elementor - jx products" class="wp-image-129246" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/jx-products-1.png 1720w, https://themes.artbees.net/wp-content/uploads/2021/08/jx-products-1-300x185.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/jx-products-1-1024x630.png 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/jx-products-1-768x473.png 768w, https://themes.artbees.net/wp-content/uploads/2021/08/jx-products-1-1536x946.png 1536w" sizes="(max-width: 1720px) 100vw, 1720px" /></figure></div>



<p>Its styles are taken from Customizer &gt; WooCommerce &gt; Product List. So, if you want to change the title color and font size or customize the button, you need to edit the Style settings in the Product List inside the Customizer.</p>



<p>By the way, any other content can be added to your custom Shop page in Elementor, including, for example, some custom text or a sidebar, search form and others.</p>



<p>If you wish to create custom templates for archive and single product pages, you have to install the JetWooBuilder plugin (it’s bundled with the Jupiter X theme). This plugin will help you build astonishing templates in combination with Jupiter X, Elementor, WooCommerce, and JetWooBuilder.&nbsp;</p>



<p>JetWooBuilder allows you to override the default shop pages in WooCommerce from single pages to the archive and category pages. It also offers customization on checkout and cart pages. So, if you aim to build a completely custom shop page layout, you can make use of the JetWooBuilder plugin. <a href="https://jetwoobuilder.zemez.io/" target="_blank" rel="noreferrer noopener nofollow">Here</a> is JetWooBuilder’s official website.</p>



<p>By the way, we already have a <a href="https://themes.artbees.net/blog/ecommerce-store-in-jupiter-x/">blog article</a> about JetWooBuilder and what templates you can create for your store.</p>



<p>Although JetWooBuilder gives you the ability to override WooCommerce pages, another tool can be very handy: Jet Smart Filters. This plugin is also bundled with the theme. It allows you to use better filters on your archive pages to provide better usability for your end-users.&nbsp;</p>



<p>JetSmartFilters plugin is made for the Elementor page builder and it’s very handy. You’ll give users a possibility to apply multiple filters. There are different filter types to add, including the checkboxes, range filters, search filters, etc. You can find detailed instructions on how to apply filters to WooCommerce products in <a href="https://crocoblock.com/knowledge-base/articles/jetsmartfilters-how-to-use-the-jetsmartfilters-widgets-for-woocommerce-products/" target="_blank" rel="noreferrer noopener nofollow">this</a> article.</p>



<h2>Increase Conversion Rate</h2>



<p>If you are looking for a way to monitor customer engagement, the best tool for this will be <a href="http://growmatik.ai/">Growmatik</a>. This powerful conversion tool will measure your marketing with conversion &amp; growth reports. Growmatik is a robust marketing automation solution that automates your entire marketing and drives more sales through personalized web pages, emails and popups within one tool.</p>



<p>Learn more tips and tricks for improving conversion in this article entitled “<a href="https://growmatik.ai/blog/what-is-conversion-rate-and-how-to-boost-it-with-personalization/">What is conversion rate</a> and how to boost it with personalization”.</p>



<h2>Wrapping Up</h2>



<p>Using a combination of WooCommerce, Jupiter X and Elementor allows you to build a custom ecommerce site without needing to write lines of code. All you need to do is:</p>



<ul><li>Install and configure WooCommerce</li><li>Install Jupiter X and import a demo template if needed</li><li>Customize your product pages via Jupiter X Customizer settings</li><li>Create a custom Shop page with the Elementor page builder and use additionals tools like JetWooBuilder, JetSmartFilter</li></ul>



<p>So give it a chance and build a WooCommerce store with Elementor. After that, you’re ready to sell your products!</p>
";s:9:"protected";b:0;}s:7:"excerpt";a:2:{s:8:"rendered";s:345:"<p>If you are going to create an Ecommerce website, you’ll be able to do it easily with the combined capability of Elementor, WooCommerce and the Jupiter X theme. These powerful programs allow you to design a fully-functional ecommerce website without any coding. In this post, you’ll find all the steps you need to take when [&hellip;]</p>
";s:9:"protected";b:0;}s:6:"author";i:93342;s:14:"featured_media";i:129149;s:14:"comment_status";s:4:"open";s:11:"ping_status";s:4:"open";s:6:"sticky";b:0;s:8:"template";s:0:"";s:6:"format";s:8:"standard";s:4:"meta";a:9:{s:16:"_bbp_topic_count";i:0;s:16:"_bbp_reply_count";i:0;s:22:"_bbp_total_topic_count";i:0;s:22:"_bbp_total_reply_count";i:0;s:16:"_bbp_voice_count";i:0;s:26:"_bbp_anonymous_reply_count";i:0;s:23:"_bbp_topic_count_hidden";i:0;s:23:"_bbp_reply_count_hidden";i:0;s:25:"_bbp_forum_subforum_count";i:0;}s:10:"categories";a:1:{i:0;i:10874;}s:4:"tags";a:3:{i:0;i:18564;i:1;i:18565;i:2;i:18566;}s:10:"yoast_head";s:4395:"<!-- This site is optimized with the Yoast SEO Premium plugin v15.2.1 - https://yoast.com/wordpress/plugins/seo/ -->
<title>How to Build a WooCommerce Store with Elementor</title>
<meta name="description" content="In this article, we are going to cover how to create a WooCommerce store with Elementor, plus essential Jupiter X plugins." />
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<link rel="canonical" href="https://themes.artbees.net/blog/how-to-build-a-woocommerce-store-with-elementor/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="How to Build a WooCommerce Store with Elementor" />
<meta property="og:description" content="In this article, we are going to cover how to create a WooCommerce store with Elementor, plus essential Jupiter X plugins." />
<meta property="og:url" content="https://themes.artbees.net/blog/how-to-build-a-woocommerce-store-with-elementor/" />
<meta property="og:site_name" content="WordPress Websites For Businesses, Artists, Bloggers Shops And More" />
<meta property="article:publisher" content="https://www.facebook.com/artbees" />
<meta property="article:published_time" content="2021-08-19T10:32:25+00:00" />
<meta property="article:modified_time" content="2021-08-19T14:16:39+00:00" />
<meta property="og:image" content="https://themes.artbees.net/wp-content/uploads/2021/08/blog-woocommerce-elementor.png" />
	<meta property="og:image:width" content="1200" />
	<meta property="og:image:height" content="600" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@artbees_design" />
<meta name="twitter:site" content="@artbees_design" />
<meta name="twitter:label1" content="Written by">
	<meta name="twitter:data1" content="Tatyana Hutsol">
	<meta name="twitter:label2" content="Est. reading time">
	<meta name="twitter:data2" content="5 minutes">
<script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://themes.artbees.net/#website","url":"https://themes.artbees.net/","name":"WordPress Websites For Businesses, Artists, Bloggers Shops And More","description":"","potentialAction":[{"@type":"SearchAction","target":"https://themes.artbees.net/?s={search_term_string}","query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://themes.artbees.net/blog/how-to-build-a-woocommerce-store-with-elementor/#primaryimage","inLanguage":"en-US","url":"https://themes.artbees.net/wp-content/uploads/2021/08/blog-woocommerce-elementor.png","width":1200,"height":600,"caption":"WooCommerce store with Elementor featured"},{"@type":"WebPage","@id":"https://themes.artbees.net/blog/how-to-build-a-woocommerce-store-with-elementor/#webpage","url":"https://themes.artbees.net/blog/how-to-build-a-woocommerce-store-with-elementor/","name":"How to Build a WooCommerce Store with Elementor","isPartOf":{"@id":"https://themes.artbees.net/#website"},"primaryImageOfPage":{"@id":"https://themes.artbees.net/blog/how-to-build-a-woocommerce-store-with-elementor/#primaryimage"},"datePublished":"2021-08-19T10:32:25+00:00","dateModified":"2021-08-19T14:16:39+00:00","author":{"@id":"https://themes.artbees.net/#/schema/person/2b6081dc7563e674159ef719b0748811"},"description":"In this article, we are going to cover how to create a WooCommerce store with Elementor, plus essential Jupiter X plugins.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://themes.artbees.net/blog/how-to-build-a-woocommerce-store-with-elementor/"]}]},{"@type":"Person","@id":"https://themes.artbees.net/#/schema/person/2b6081dc7563e674159ef719b0748811","name":"Tatyana Hutsol","image":{"@type":"ImageObject","@id":"https://themes.artbees.net/#personlogo","inLanguage":"en-US","url":"https://secure.gravatar.com/avatar/8b12cd9dae19512b14ec7010393bd153?s=96&d=mm&r=g","caption":"Tatyana Hutsol"},"description":"Tatyana is a cherished member of the Artbees Support Team and has a close familiarity and expertise with WordPress Themes. First starting her career in hosting support services, since then Tatyana has been working with creation and functionality in WordPress platforms and themes."}]}</script>
<!-- / Yoast SEO Premium plugin. -->";s:6:"_links";a:11:{s:4:"self";a:1:{i:0;a:1:{s:4:"href";s:53:"https://themes.artbees.net/wp-json/wp/v2/posts/129148";}}s:10:"collection";a:1:{i:0;a:1:{s:4:"href";s:46:"https://themes.artbees.net/wp-json/wp/v2/posts";}}s:5:"about";a:1:{i:0;a:1:{s:4:"href";s:51:"https://themes.artbees.net/wp-json/wp/v2/types/post";}}s:6:"author";a:1:{i:0;a:2:{s:10:"embeddable";b:1;s:4:"href";s:52:"https://themes.artbees.net/wp-json/wp/v2/users/93342";}}s:7:"replies";a:1:{i:0;a:2:{s:10:"embeddable";b:1;s:4:"href";s:61:"https://themes.artbees.net/wp-json/wp/v2/comments?post=129148";}}s:15:"version-history";a:1:{i:0;a:2:{s:5:"count";i:4;s:4:"href";s:63:"https://themes.artbees.net/wp-json/wp/v2/posts/129148/revisions";}}s:19:"predecessor-version";a:1:{i:0;a:2:{s:2:"id";i:129288;s:4:"href";s:70:"https://themes.artbees.net/wp-json/wp/v2/posts/129148/revisions/129288";}}s:16:"wp:featuredmedia";a:1:{i:0;a:2:{s:10:"embeddable";b:1;s:4:"href";s:53:"https://themes.artbees.net/wp-json/wp/v2/media/129149";}}s:13:"wp:attachment";a:1:{i:0;a:1:{s:4:"href";s:60:"https://themes.artbees.net/wp-json/wp/v2/media?parent=129148";}}s:7:"wp:term";a:2:{i:0;a:3:{s:8:"taxonomy";s:8:"category";s:10:"embeddable";b:1;s:4:"href";s:63:"https://themes.artbees.net/wp-json/wp/v2/categories?post=129148";}i:1;a:3:{s:8:"taxonomy";s:8:"post_tag";s:10:"embeddable";b:1;s:4:"href";s:57:"https://themes.artbees.net/wp-json/wp/v2/tags?post=129148";}}s:6:"curies";a:1:{i:0;a:3:{s:4:"name";s:2:"wp";s:4:"href";s:23:"https://api.w.org/{rel}";s:9:"templated";b:1;}}}}i:2;a:25:{s:2:"id";i:128683;s:4:"date";s:19:"2021-08-12T17:38:00";s:8:"date_gmt";s:19:"2021-08-12T14:38:00";s:4:"guid";a:1:{s:8:"rendered";s:36:"https://themes.artbees.net/?p=128683";}s:8:"modified";s:19:"2021-08-12T17:38:07";s:12:"modified_gmt";s:19:"2021-08-12T14:38:07";s:4:"slug";s:59:"top-10-free-browser-extensions-all-support-staff-should-use";s:6:"status";s:7:"publish";s:4:"type";s:4:"post";s:4:"link";s:92:"https://themes.artbees.net/blog/top-10-free-browser-extensions-all-support-staff-should-use/";s:5:"title";a:1:{s:8:"rendered";s:59:"Top 10 Free Browser Extensions All Support Staff Should Use";}s:7:"content";a:2:{s:8:"rendered";s:15362:"
<div class="wp-block-image"><figure class="aligncenter size-full"><img width="1200" height="600" src="https://themes.artbees.net/wp-content/uploads/2021/08/blog-browser-extension.png" alt="" class="wp-image-128686" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/blog-browser-extension.png 1200w, https://themes.artbees.net/wp-content/uploads/2021/08/blog-browser-extension-300x150.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/blog-browser-extension-1024x512.png 1024w, https://themes.artbees.net/wp-content/uploads/2021/08/blog-browser-extension-768x384.png 768w" sizes="(max-width: 1200px) 100vw, 1200px" /></figure></div>



<p>As a WordPress support engineer, I face many challenges every day. Rather than skills that a technical support staff should have, there are tools people like me can use to be able to help their clients faster and better. In this article, I’m going to give an overview of the top 10 free browser extensions that have become part of my daily workflow over the years. I can divide these extensions into the following categories: <strong>emulation tools</strong>, <strong>scanners</strong>, <strong>recording tools</strong>, <strong>measurement tools</strong>, and <strong>operating tools</strong>.&nbsp;</p>



<p>The tools may vary depending on the product you support but some tools, such as those that I’m going to talk about in the following article, might be commonly used by support engineers working with any kind of product. In fact, everyone may use these extensions for a different purpose, and while I work as a WordPress technical support professional, these extensions could come in handy in another way. In this article, I’m going to review the top 10 free browser extensions I use as a support engineer and the best thing about them is that all of them won’t cost you a dime!</p>



<h2 id="h-grammarly">Grammarly</h2>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/01-grammarly.jpeg" alt="" class="wp-image-128687" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/01-grammarly.jpeg 860w, https://themes.artbees.net/wp-content/uploads/2021/08/01-grammarly-300x188.jpeg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/01-grammarly-768x480.jpeg 768w" sizes="(max-width: 860px) 100vw, 860px" /></figure></div>



<p>Honestly, I can’t even imagine writing a letter or a response to a client without <a href="https://chrome.google.com/webstore/detail/grammarly-for-chrome/kbfnbcaeplbcioakkpcpgfkobkghlhen" target="_blank" rel="noreferrer noopener nofollow">Grammarly</a>. I’m even using it to write this blog post! This extension is a must-have for every one who is involved in writing any kind of text. It corrects grammar issues, fixes dictation in the free version and suggests improvements to your writing in the premium version. I’m already happy with the free version but if you believe you need more advanced writing assistance you may want to try Grammarly Premium. It already has 10+ million users.</p>



<h2>Wappalyzer</h2>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/02-wappalyzer.png" alt="" class="wp-image-128688" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/02-wappalyzer.png 860w, https://themes.artbees.net/wp-content/uploads/2021/08/02-wappalyzer-300x163.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/02-wappalyzer-768x417.png 768w" sizes="(max-width: 860px) 100vw, 860px" /></figure></div>



<p><a href="https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg" target="_blank" rel="noreferrer noopener nofollow">Wappalyzer</a> will detect the framework, technologies and programming languages that are being used on a website. It became my habit to check out the technologies being used on a website even if I don’t want to detect any problem. This free browser extension uncovers more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN and others, making it very useful for a web developer or a web support engineer. 1+ million users currently have this extension installed on their browser.</p>



<h2>Awesome Screenshot</h2>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/03-awesome_screenshot.png" alt="" class="wp-image-128689" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/03-awesome_screenshot.png 860w, https://themes.artbees.net/wp-content/uploads/2021/08/03-awesome_screenshot-300x163.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/03-awesome_screenshot-768x417.png 768w" sizes="(max-width: 860px) 100vw, 860px" /></figure></div>



<p>I think <a href="https://chrome.google.com/webstore/detail/awesome-screenshot-screen/nlipoenfbbikpbjkfpfillcgkoblgpmj" target="_blank" rel="noreferrer noopener nofollow">Awesome Screenshot</a> is not only a handy tool for all support staff but a must have extension for everyone. Most of the time I need to show our clients how to do something, and a good tool like this saves me a lot of time. Mostly, I use the Full Page Screenshot feature and then crop the image with built in features of this screenshot. This way I don’t need to use photo editor softwares to edit the screenshots or to add notes over the image. <br>If you don’t like Awesome Screenshot, <a href="https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl" rel="noreferrer noopener nofollow" target="_blank">GoFullPage &#8211; Full Page Screen Capture</a> is another awesome plugin that does essentially the same job, but only uses one click to capture the entire page. I need to mention that the Awesome Screenshot free browser extension is also able to record videos from your screen. 1+ million installations for Awesome Screenshot and 4+ million installations for GoFullPage are proof of the usefulness  of these extensions.</p>



<h2>User-Agent Switcher</h2>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/04-user-agent-switcher.png" alt="" class="wp-image-128690" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/04-user-agent-switcher.png 860w, https://themes.artbees.net/wp-content/uploads/2021/08/04-user-agent-switcher-300x163.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/04-user-agent-switcher-768x417.png 768w" sizes="(max-width: 860px) 100vw, 860px" /></figure></div>



<p><a href="https://chrome.google.com/webstore/detail/user-agent-switcher/lkmofgnohbedopheiphabfhfjgkhfcgf" target="_blank" rel="noreferrer noopener nofollow">User-Agent Switcher</a> will emulate the user agent to any agent you want, which is extremely helpful for when you want to see how robots or different applications see your website. Detecting crawler issues such as Google search bots, marketing platform bots or even web scanners are all prime uses of this extension for me. Time after time, a Google search console detects issues for a client but without using this extension, resolving the issue becomes a hassle. This free browser extension has 90k+ active installations.</p>



<h2>Screencastify</h2>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/05-screencastify.png" alt="" class="wp-image-128691" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/05-screencastify.png 860w, https://themes.artbees.net/wp-content/uploads/2021/08/05-screencastify-300x163.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/05-screencastify-768x417.png 768w" sizes="(max-width: 860px) 100vw, 860px" /></figure></div>



<p>6+ million active installations for <a href="https://chrome.google.com/webstore/detail/screencastify-screen-vide/mmeijimgabbpbgpdklnllpncmdofkcpn" target="_blank" rel="noreferrer noopener nofollow">Screencastify</a> means that it’s truly handy in many cases. I myself use it to record videos of my browser tab to prove that either an issue for a client is resolved or not happening. The free version of this extension has a 5 minute limitation per video and also only saves the video in WebM format, which so far has been enough for me as a technical support engineer.</p>



<p> The extensions above were the most used extensions on my browser. I am using them on a daily basis and  couldn’t imagine my workflow without them. There are more handy extensions for support work that my colleagues are using, but I myself can live without them. In the following I will review my colleagues’ favorite free browser extensions as well.</p>



<h2>The Great Suspender</h2>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/06-the-great-suspender.jpeg" alt="" class="wp-image-128692" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/06-the-great-suspender.jpeg 860w, https://themes.artbees.net/wp-content/uploads/2021/08/06-the-great-suspender-300x188.jpeg 300w, https://themes.artbees.net/wp-content/uploads/2021/08/06-the-great-suspender-768x480.jpeg 768w" sizes="(max-width: 860px) 100vw, 860px" /></figure></div>



<p>Having so many tabs open on a browser is an issue support staff will always deal with. The bad thing about it is that it eats lots of memory and sometimes makes your device run slowly. The idea behind <a href="https://chrome.google.com/webstore/detail/the-great-suspender/jaekigmcljkkalnicnjoafgfjoefkpeg?hl=en" target="_blank" rel="noreferrer noopener">The Great Suspender</a> is that it suspends the pages that are not being used and still open in the other tabs by replacing their content with the simplest HTML possible. It will free up the memory on your device and will keep your device from lagging.</p>



<h2>WhatFont</h2>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/07-whatfont.png" alt="free browser extensions - whatfont" class="wp-image-128694" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/07-whatfont.png 860w, https://themes.artbees.net/wp-content/uploads/2021/08/07-whatfont-300x163.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/07-whatfont-768x417.png 768w" sizes="(max-width: 860px) 100vw, 860px" /></figure></div>



<p>Although you can inspect the elements on a page and use the developer tools to find out what font is being used for that element, some people prefer a faster tool to find which font is being used in different parts of a page. By using <a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm" target="_blank" rel="noreferrer noopener nofollow">WhatFont</a> free browser extension, you simply click on the extension icon and hover your mouse over the texts on the page. It will show the font name assigned to that text. 6+ million active installations may be due to the many designers that are using this extension rather than support engineers or developers.</p>



<h2>Canned Responses &#8211; Tray</h2>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/08-Canned-Responses-Tray.png" alt="free browser extensions - canned responses" class="wp-image-128695" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/08-Canned-Responses-Tray.png 860w, https://themes.artbees.net/wp-content/uploads/2021/08/08-Canned-Responses-Tray-300x163.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/08-Canned-Responses-Tray-768x417.png 768w" sizes="(max-width: 860px) 100vw, 860px" /></figure></div>



<p>When you are being bombarded with lots of tickets or chat requests, saving even a second is gold. In these situations, every tool that can speed up your workflow will become handy. <a href="https://chrome.google.com/webstore/detail/canned-responses-tray/iinfjdloicbbgbdliglpofadahlmgjop/related?hl=en" target="_blank" rel="noreferrer noopener nofollow">Canned Responses</a> is one of those tools that can help you save some time in tough situations. You will collect your most common responses in it and use any of them quickly. It has 2+ K active installation, which is not too many, but it doesn’t mean it’s not handy.</p>



<h2>Dimensions</h2>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/09-Dimensions.png" alt="free browser extensions - dimensions" class="wp-image-128696" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/09-Dimensions.png 860w, https://themes.artbees.net/wp-content/uploads/2021/08/09-Dimensions-300x163.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/09-Dimensions-768x417.png 768w" sizes="(max-width: 860px) 100vw, 860px" /></figure></div>



<p>The idea behind <a href="https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en" target="_blank" rel="noreferrer noopener nofollow">Dimensions</a> extension is to detect the left, right, top and bottom distances of the pointer cutting to an edge. The cutting edge will detect color differences, making it a good tool for both designers and support agents as it can help to detect the design issues. This extension has 100+ K active installations.</p>



<h2>Clipboard History Pro</h2>



<div class="wp-block-image"><figure class="aligncenter size-full is-resized"><img src="https://themes.artbees.net/wp-content/uploads/2021/08/10-clipboard-history.png" alt="free browser extensions -clipboard history pro" class="wp-image-128697" width="862" srcset="https://themes.artbees.net/wp-content/uploads/2021/08/10-clipboard-history.png 860w, https://themes.artbees.net/wp-content/uploads/2021/08/10-clipboard-history-300x188.png 300w, https://themes.artbees.net/wp-content/uploads/2021/08/10-clipboard-history-768x480.png 768w" sizes="(max-width: 860px) 100vw, 860px" /></figure></div>



<p><a href="https://chrome.google.com/webstore/detail/clipboard-history-pro-bes/ajiejmhbejpdgkkigpddefnjmgcbkenk" target="_blank" rel="noreferrer noopener nofollow">Clipboard History Pro</a> is another tool that can help you manage your time faster and avoid back and forth copy/pasting some repetitive data. Indeed, it is very useful for support staff who are experiencing heavy workloads and want to save some time. It is common that you need to use a text that you copied onto your clipboard a couple of minutes ago. This will help you use it very quickly. This extension has 90+ K active installations. </p>



<p>This rounds off our list of the top 10 free browser extensions for support staff! Please share your thoughts in the comments about this article or any other&nbsp; useful extensions or tools that support engineers can use.</p>
";s:9:"protected";b:0;}s:7:"excerpt";a:2:{s:8:"rendered";s:326:"<p>As a WordPress support engineer, I face many challenges every day. Rather than skills that a technical support staff should have, there are tools people like me can use to be able to help their clients faster and better. In this article, I’m going to give an overview of the top 10 free browser extensions [&hellip;]</p>
";s:9:"protected";b:0;}s:6:"author";i:32419;s:14:"featured_media";i:128686;s:14:"comment_status";s:4:"open";s:11:"ping_status";s:4:"open";s:6:"sticky";b:0;s:8:"template";s:0:"";s:6:"format";s:8:"standard";s:4:"meta";a:9:{s:16:"_bbp_topic_count";i:0;s:16:"_bbp_reply_count";i:0;s:22:"_bbp_total_topic_count";i:0;s:22:"_bbp_total_reply_count";i:0;s:16:"_bbp_voice_count";i:0;s:26:"_bbp_anonymous_reply_count";i:0;s:23:"_bbp_topic_count_hidden";i:0;s:23:"_bbp_reply_count_hidden";i:0;s:25:"_bbp_forum_subforum_count";i:0;}s:10:"categories";a:1:{i:0;i:56;}s:4:"tags";a:3:{i:0;i:18560;i:1;i:18561;i:2;i:18562;}s:10:"yoast_head";s:4384:"<!-- This site is optimized with the Yoast SEO Premium plugin v15.2.1 - https://yoast.com/wordpress/plugins/seo/ -->
<title>Top 10 Free Browser Extensions All Support Staff Should Use</title>
<meta name="description" content="In this article, we are going to cover the 10 must-have free browser extensions that all support staff should use in their workflow." />
<meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1" />
<link rel="canonical" href="https://themes.artbees.net/blog/top-10-free-browser-extensions-all-support-staff-should-use/" />
<meta property="og:locale" content="en_US" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Top 10 Free Browser Extensions All Support Staff Should Use" />
<meta property="og:description" content="In this article, we are going to cover the 10 must-have free browser extensions that all support staff should use in their workflow." />
<meta property="og:url" content="https://themes.artbees.net/blog/top-10-free-browser-extensions-all-support-staff-should-use/" />
<meta property="og:site_name" content="WordPress Websites For Businesses, Artists, Bloggers Shops And More" />
<meta property="article:publisher" content="https://www.facebook.com/artbees" />
<meta property="article:published_time" content="2021-08-12T14:38:00+00:00" />
<meta property="article:modified_time" content="2021-08-12T14:38:07+00:00" />
<meta property="og:image" content="https://themes.artbees.net/wp-content/uploads/2021/08/blog-browser-extension.png" />
	<meta property="og:image:width" content="1200" />
	<meta property="og:image:height" content="600" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@artbees_design" />
<meta name="twitter:site" content="@artbees_design" />
<meta name="twitter:label1" content="Written by">
	<meta name="twitter:data1" content="Mohsin Al-Rabieai">
	<meta name="twitter:label2" content="Est. reading time">
	<meta name="twitter:data2" content="5 minutes">
<script type="application/ld+json" class="yoast-schema-graph">{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://themes.artbees.net/#website","url":"https://themes.artbees.net/","name":"WordPress Websites For Businesses, Artists, Bloggers Shops And More","description":"","potentialAction":[{"@type":"SearchAction","target":"https://themes.artbees.net/?s={search_term_string}","query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"ImageObject","@id":"https://themes.artbees.net/blog/top-10-free-browser-extensions-all-support-staff-should-use/#primaryimage","inLanguage":"en-US","url":"https://themes.artbees.net/wp-content/uploads/2021/08/blog-browser-extension.png","width":1200,"height":600,"caption":"free browser extensions featured"},{"@type":"WebPage","@id":"https://themes.artbees.net/blog/top-10-free-browser-extensions-all-support-staff-should-use/#webpage","url":"https://themes.artbees.net/blog/top-10-free-browser-extensions-all-support-staff-should-use/","name":"Top 10 Free Browser Extensions All Support Staff Should Use","isPartOf":{"@id":"https://themes.artbees.net/#website"},"primaryImageOfPage":{"@id":"https://themes.artbees.net/blog/top-10-free-browser-extensions-all-support-staff-should-use/#primaryimage"},"datePublished":"2021-08-12T14:38:00+00:00","dateModified":"2021-08-12T14:38:07+00:00","author":{"@id":"https://themes.artbees.net/#/schema/person/a8142c64581d52b64acc60e54df15ac9"},"description":"In this article, we are going to cover the 10 must-have free browser extensions that all support staff should use in their workflow.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https://themes.artbees.net/blog/top-10-free-browser-extensions-all-support-staff-should-use/"]}]},{"@type":"Person","@id":"https://themes.artbees.net/#/schema/person/a8142c64581d52b64acc60e54df15ac9","name":"Mohsin Al-Rabieai","image":{"@type":"ImageObject","@id":"https://themes.artbees.net/#personlogo","inLanguage":"en-US","url":"https://secure.gravatar.com/avatar/668441159e2b8ad9d7a73cbdbbbdc78b?s=96&d=mm&r=g","caption":"Mohsin Al-Rabieai"},"description":"Mohsin is a self-driven engineer who worked as a web developer for 8 years and now he is working as support manager in Artbees."}]}</script>
<!-- / Yoast SEO Premium plugin. -->";s:6:"_links";a:11:{s:4:"self";a:1:{i:0;a:1:{s:4:"href";s:53:"https://themes.artbees.net/wp-json/wp/v2/posts/128683";}}s:10:"collection";a:1:{i:0;a:1:{s:4:"href";s:46:"https://themes.artbees.net/wp-json/wp/v2/posts";}}s:5:"about";a:1:{i:0;a:1:{s:4:"href";s:51:"https://themes.artbees.net/wp-json/wp/v2/types/post";}}s:6:"author";a:1:{i:0;a:2:{s:10:"embeddable";b:1;s:4:"href";s:52:"https://themes.artbees.net/wp-json/wp/v2/users/32419";}}s:7:"replies";a:1:{i:0;a:2:{s:10:"embeddable";b:1;s:4:"href";s:61:"https://themes.artbees.net/wp-json/wp/v2/comments?post=128683";}}s:15:"version-history";a:1:{i:0;a:2:{s:5:"count";i:5;s:4:"href";s:63:"https://themes.artbees.net/wp-json/wp/v2/posts/128683/revisions";}}s:19:"predecessor-version";a:1:{i:0;a:2:{s:2:"id";i:128710;s:4:"href";s:70:"https://themes.artbees.net/wp-json/wp/v2/posts/128683/revisions/128710";}}s:16:"wp:featuredmedia";a:1:{i:0;a:2:{s:10:"embeddable";b:1;s:4:"href";s:53:"https://themes.artbees.net/wp-json/wp/v2/media/128686";}}s:13:"wp:attachment";a:1:{i:0;a:1:{s:4:"href";s:60:"https://themes.artbees.net/wp-json/wp/v2/media?parent=128683";}}s:7:"wp:term";a:2:{i:0;a:3:{s:8:"taxonomy";s:8:"category";s:10:"embeddable";b:1;s:4:"href";s:63:"https://themes.artbees.net/wp-json/wp/v2/categories?post=128683";}i:1;a:3:{s:8:"taxonomy";s:8:"post_tag";s:10:"embeddable";b:1;s:4:"href";s:57:"https://themes.artbees.net/wp-json/wp/v2/tags?post=128683";}}s:6:"curies";a:1:{i:0;a:3:{s:4:"name";s:2:"wp";s:4:"href";s:23:"https://api.w.org/{rel}";s:9:"templated";b:1;}}}}}