tag:code.tutsplus.com,2005:/postsEnvato Tuts+ Code2019-03-20T22:15:47Ztag:code.tutsplus.com,2005:PostPresenter/cms-3289615 Best JavaScript Sliders of 2019<p>Sliders are very helpful when you are trying to fit a lot of content into little space. They can also make the whole webpage appear a lot more interesting with use of some basic animation effects.</p><p>When used properly, sliders can improve the usability of webpage without wasting precious screen real estate.</p><p>In this post, I'll share the best <a href="https://codecanyon.net/category/javascript/sliders?rating_min=4&amp;sort=sales&amp;tags=slider" target="_self">JavaScript sliders available on Envato Market</a> in 2019. If you are looking for a slider to integrate in your website, read on! You might just find the perfect slider for your site.</p><h2><a href="https://codecanyon.net/item/pi-slider-js-responsive-slider-pure-js/21067619" rel="external" target="_blank">PI Slider JS</a></h2><p>PI slider has a very minimalist and polished design that will go well with almost every website.</p><p>It has been created using pure JavaScript without the use of any 3rd party libraries so there is no additional page load.</p><figure class="post_image"><img alt="PI Slider" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/pi_slider.png"></figure><p>Here are some of its features:</p><ul><li><strong>responsive design</strong></li><li>option for <strong>infinite looping</strong></li><li>fully <strong>customizable</strong></li><li>great <strong>browser support</strong></li></ul><p>The slider is optimized for mobile devices so it also works well on touch screens.</p><p>This slider has a perfect five star rating—the fact that every buyer gave it a five star rating speaks volumes about the quality and ease of use of this plugin.</p><p>Take a look at all the <a href="https://preview.codecanyon.net/item/pi-slider-js-responsive-slider-pure-js/full_screen_preview/21067619" rel="external" target="_blank">PI Slider demos</a> to see how you can use it to create vertical and horizontal sliders.</p><h2><a href="https://codecanyon.net/item/bootstrap-4-carousel-responsive-jquery-plugin/22048590" rel="external" target="_blank">Bootstrap 4 Carousel Responsive jQuery Plugin</a></h2><p>This carousel plugin pack contains a large variety of carousels or sliders meant to serve different purposes. When you purchase it, you get access to over 200 pre-built examples and layouts.</p><p>The carousel is fully responsive and it has been designed with mobile devices and tablets in mind.</p><figure class="post_image"><img alt="Bootstarp 4 Carousel" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/bootstrap_4_carousel_responsive.png"></figure><p>Some features of this plugin are:</p><ul><li><strong>thumbnail navigation</strong></li><li>use of the <strong>Bootstrap</strong> grid system</li><li>40+ text and layer <strong>animations</strong></li><li>8+ slide <strong>transitions</strong></li></ul><p>The plugin is compatible with both Bootstrap 3 and Bootstrap 4. If your website already uses Bootstrap, using this plugin will get rid of any compatibility issues that might have been caused by plugins which don't specifically target Bootstrap.&nbsp;</p><p>Also, Font Awesome files and complementary Google fonts are bundled with the project.<br></p><p>Take a quick look at all the <a href="https://preview.codecanyon.net/item/bootstrap-4-carousel-responsive-jquery-plugin/full_screen_preview/22048590" rel="external" target="_blank">demos</a> of <a href="https://codecanyon.net/item/bootstrap-4-carousel-responsive-jquery-plugin/22048590" rel="external" target="_blank">Bootstarp 4 Carousel</a> and you will almost certainly find something to add to your site.</p><h2><a href="https://codecanyon.net/item/custom-slider-with-wizard/20357835" rel="external" target="_blank">Custom Slider and Wizard</a></h2><p>This custom slider plugin has all the basic features that you might expect in a slider. What really sets it apart though, is the ease of setting it up. The plugin download comes with a tool that even generates the code that you have to add to your website.</p><figure class="post_image"><img alt="Custom Slider and Wizard" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/custom_slider_wizard.png"></figure><p>Here is a list of its features:</p><ul><li><strong>caption boxes</strong> for each slider</li><li>support for <strong>swipe gestures</strong></li><li>push and fade <strong>effects for transitions</strong></li><li><strong>responsive</strong> and <strong>SEO-friendly</strong> design</li></ul><p>Since the plugin does not rely on any 3rd party libraries, there is no detrimental effect on your website speed.</p><p>Play with&nbsp;<a href="https://preview.codecanyon.net/item/custom-slider-with-wizard/full_screen_preview/20357835" rel="external" target="_blank">all the available options in the demo</a> to see if this what your are looking for in a slider.</p><h2><a href="https://codecanyon.net/item/bootstrap-carousel-bundle/20262667" rel="external" target="_blank">Bootstrap Carousel Bundle</a></h2><p>This is a <a href="https://codecanyon.net/item/bootstrap-carousel-bundle/20262667" target="_self">feature-rich Bootstrap-based carousel plugin</a> designed to meet all your slider needs.</p><p>You can use it to create something as simple as a thumbnail carousel or as complicated as a slider which contains tables or form elements.</p><figure class="post_image"><img alt="Bootstrap Carousel Bundle" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/bootstrap_carousel_bundle.png"></figure><p>Here is a list of its major features:<br></p><ul><li><strong>animation</strong> of text layers on the slides</li><li><strong>parallax effect</strong> for the carousel</li><li>create <strong>multi-column layouts</strong></li><li><strong>responsive</strong> and mobile-friendly<br></li></ul><p>This is actually a bundle of two plugins—buying them together will save you a lot of money!</p><p>There are&nbsp;<a href="https://previews.envatousercontent.com/files/259064878/index.html" rel="external" target="_blank">over 170 working examples</a> on the demo page which can be modified easily to suit your own needs.<br></p><h2><a href="https://codecanyon.net/item/slidea-a-super-smart-responsive-jquery-slider-plugin/17280222" rel="external" target="_blank">Slidea</a></h2><p>This is a fast, multi-purpose slider that looks very professional. The slick design and use of animation in different templates will blow your mind.</p><figure class="post_image"><img alt="Slidea" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/slidea.png"></figure><p>Here are some of <a href="https://codecanyon.net/item/slidea-a-super-smart-responsive-jquery-slider-plugin/17280222" target="_self">Slidea</a>'s&nbsp;features:<br></p><ul><li><strong>layered design</strong> to superimpose elements</li><li>over <strong>50 preset animations</strong> and <strong>6 pre-built templates</strong></li><li>support for <strong>video content</strong> and <strong>multiple sliders</strong></li><li>compatible with <strong>Bootstrap</strong> and <strong>Foundation</strong></li></ul><p>Even though plugin is beginner friendly to use, the end result looks incredible. You can also use it to create full screen sliders for immersive user experience.</p><p>Just give the <a href="http://envato.pixevil.com/slidea" rel="external" target="_blank">demos a try</a> and you will see what I am talking about. Make sure you check out each template because they are all unique.</p><h2><a href="https://codecanyon.net/item/paradise-slider-responsive-bootstrap-carousel-plugin/16059710" rel="external" target="_blank">Paradise Slider</a></h2><p><a href="https://codecanyon.net/item/paradise-slider-responsive-bootstrap-carousel-plugin/16059710" target="_self">Paradise Slider</a> is another plugin that takes advantage of the Bootstrap framework to create sliders with stunning layouts and animations.</p><p>The transition from one slide to the next feels very fluid and natural.</p><figure class="post_image"><img alt="Paradise Slider" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/paradise_slider.png"></figure><p>Here are some of its noteworthy features:</p><ul><li><strong>animation</strong> of text layers on the slides</li><li><strong>parallax effect</strong> for the carousel</li><li><strong>fully responsive</strong> with support for mobile devices</li><li>support for <strong>YouTube</strong>, <strong>Vimeo</strong> and <strong>self-hosted</strong> videos</li><li>8 different slide transition effects</li></ul><p>This plugin offers sliders and carousels for all types of content. With over 130 templates, you can create sliders for images and videos and well as blog posts, tables and forms.</p><p>The <a href="https://preview.codecanyon.net/item/paradise-slider-responsive-bootstrap-carousel-plugin/full_screen_preview/16059710" rel="external" target="_blank">demo page has a bunch of unique examples</a>&nbsp;for each type of content. Check them all out for some inspiration!</p><h2><a href="https://codecanyon.net/item/slider-maker/15417250" rel="external" target="_blank">jQuery Slider Maker</a></h2><p>This simple jQuery slider maker can help you create your own sliders with a nice Ken Burns effect in no time. The subtle panning and zooming of each image makes the slider much more dynamic.</p><p>The plugin comes with an admin area where you can simply log in and create your own sliders by setting different options. Then just click on the <strong>Publish</strong> button get the code to be added to your webpage.</p><figure class="post_image"><img alt="jQuery Slider Maker" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/slider_maker.png"></figure><p>Here is an incompleted list of features for this slider:</p><ul><li><strong>live preview</strong> in the admin panel</li><li><strong>fully responsive</strong> with touch-based swipe</li><li><strong>animations</strong> for layered captions</li><li>themes based on <strong>material design</strong> guidelines</li></ul><p>Just head over to the <a href="https://www.slider-maker.com/#home" rel="external" target="_blank">demo page</a> and create your own slider to see how easy it is to use the <a href="https://codecanyon.net/item/slider-maker/15417250" target="_self">jQuery Slider Maker</a>.</p><h2><a href="https://codecanyon.net/item/responsive-bootstrap-carousel/13112740" rel="external" target="_blank">Responsive Bootstrap Carousel</a></h2><p>Here is one more <a href="https://codecanyon.net/item/responsive-bootstrap-carousel/13112740" target="_self">Bootstrap carousel</a> that makes it possible to create your own sliders in a couple of minutes.</p><figure class="post_image"><img alt="Responsive Bootstrap Carousel" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/responsive_bootstrap_carousel.png"></figure><p>Here are some of its key features:</p><ul><li>beautiful <strong>animations and transitions</strong></li><li>use of <strong>Font Awesome icons</strong> to create UI elements</li><li><strong>fade, slide, rotate and zoom effects</strong> for the carousel</li><li><strong>fully responsive </strong>with<strong> touch support</strong></li></ul><p>The download comes with templates for creating sliders with contents ranging from images and user testimonials to product listings for eCommerce websites. It also comes with templates for animation of text layers, videos and other elements.&nbsp;</p><p>The interface is very user friendly with a lot of configuration options. Though it is up to you to make the slider responsive or give it a fixed width.&nbsp;</p><p>Do check out these&nbsp;<a href="https://previews.envatousercontent.com/files/258835284/index.html#" rel="external" target="_blank">nice speech bubble sliders</a> that can give any website a unique look.</p><h2><a href="https://codecanyon.net/item/ultimate-sliders-bundle-layers-parallax-zoom/9211048" rel="external" target="_blank">Ultimate Sliders Bundle</a></h2><p>As the name suggests, the ultimate slider bundle contains all types of sliders and banners—anything that you could dream of using in your next project.</p><p>This is actually a bundle of three separate plugins, offered at a discount price making it a great deal.</p><figure class="post_image"><img alt="Ultimate Sliders Bundle" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/ultimate_sliders_bundle.png"></figure><p>Here are some of its features:</p><ul><li><strong>multiple layers</strong> for independent animation effects</li><li><strong>responsive design</strong></li><li><strong>multiple skins</strong></li><li><strong>full screen</strong> sliders</li><li><strong>parallax effect</strong> sliders</li></ul><p>The text on each slide can be animated from top, left, bottom or right. There are also 16 different transition effects for image slides other than the basic push and fade effects.</p><p>The <a href="https://preview.codecanyon.net/item/ultimate-sliders-bundle-layers-parallax-zoom/full_screen_preview/9211048" rel="external" target="_blank">demo page</a> of the plugin has a lot of examples for responsive, full screen or fixed width layouts.&nbsp;</p><h2><a href="https://codecanyon.net/item/magic-slider-with-layers-carousel-with-lightbox/6626850" rel="external" target="_blank">Magic Slider</a></h2><p>The Magic Slider plugin also has a lot to offer in terms of features. The level of control that you get over all aspects of slider animation is amazing.</p><figure class="post_image"><img alt="Magic Slider" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/magic_slider.png"></figure><p>Here is a small list of its features:</p><ul><li><strong>responsive design</strong> with support for <strong>touch screen navigation</strong></li><li><strong>layered elements</strong> which can be animated from any direction</li><li>ultra-smooth <strong>Ken Burns effect</strong></li><li>ability to add <strong>multiple sliders</strong> on same page</li></ul><p>You can also integrate YouTube and Vimeo videos in your gallery slideshow with Magic Slider. It also lets you create fixed width, full width, responsive and full screen sliders.</p><p>There are a <a href="https://preview.codecanyon.net/item/magic-slider-with-layers-carousel-with-lightbox/full_screen_preview/6626850" rel="external" target="_blank">lot of sliders on the demo page</a>&nbsp;which each look completely unique but all use the same Magic Slider plugin. Do check them all out!<br></p><h2><a href="https://codecanyon.net/item/royalslider-touchenabled-jquery-image-gallery/461126" rel="external" target="_blank">RoyalSlider</a></h2><p>RoyalSlider is a content slider plugin that priorities performance, accessibility and user experience for viewers.</p><p>The plugin humbly states that it does not come with a lot of fancy effects. However, the effects that you do get will always give optimum performance for all your viewers.</p><figure class="post_image"><img alt="Royal Slider" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/royal_slider.png"></figure><p>Here are some of its awesome features:</p><ul><li>put any content you like in the slides or in their thumbnails</li><li>smart <strong>lazy loading</strong> to strike perfect balance between performance and user experience</li><li>change speed, transition and easing for each <strong>caption and slide animation</strong></li><li><strong>optimized for SEO</strong> with indexable images and use of proper HTML tags</li></ul><p>The interface of this plugin is completely customizable and with the download you also get access to the Photoshop files to customize the skins as you wish.</p><p>The modular architecture of this plugin makes it possible for you to get rid of parts that you don't need in the slider to further optimize its performance.</p><p>There are a <a href="https://dimsemenov.com/plugins/royal-slider/templates/" rel="external" target="_blank">lot of examples on the demo page</a> of this plugin that you can use as a starting point when creating something of your own.</p><h2><a href="https://codecanyon.net/item/layerslider-responsive-jquery-slider-plugin/922100" rel="external" target="_blank">LayerSlider</a></h2><p>This plugin is much more than just a slider to showcase your images and videos. It is basically a multi-purpose animation platform that can be used to create all sorts of things.</p><p>The core plugin recently received an update to make it future proof and increase its robustness.</p><figure class="post_image"><img alt="Layer slider" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/layer_slider.png"></figure><p>Here are some of its features to blow your mind:</p><ul><li>over 200 pre-defined <strong>slide transitions</strong></li><li>static layers and pop-out-of-slider <strong>effects</strong></li><li>apply <strong>filters and masking</strong> separately to different&nbsp;layers</li><li><strong>animate</strong> all common CSS properties</li><li><strong>SEO-friendly</strong> and <strong>optimized for mobile devices</strong></li></ul><p>If you want a plugin that will help you every time you want to add some animated element on your webpage, <a href="https://codecanyon.net/item/layerslider-responsive-jquery-slider-plugin/922100" target="_self">LayerSlider</a> should be your first choice.</p><p>Just <a href="https://layerslider.kreaturamedia.com/sliders/" rel="external" target="_blank">check out the demos</a> where the plugin adds stunning animations to landing pages, pop ups, sliders and more. The only limit with this plugin is your imagination.</p><h2><a href="https://codecanyon.net/item/all-in-one-slider-responsive-jquery-slider-plugin/1534434" rel="external" target="_blank">All In One Slider</a></h2><p>This <a href="https://codecanyon.net/item/all-in-one-slider-responsive-jquery-slider-plugin/1534434" target="_self">All in One Slider plugin</a> is an all-in-one solution for all your needs.</p><p>You can use it to create a banner rotator, thumbnails banner, banner with playlist, content slider or a carousel. Each of these have their own unique set of possible settings and configurations to alter their behavior.</p><figure class="post_image"><img alt="All in One Slider" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/all_in_one_slider.png"></figure><p>Here are some nice features of All In One Slider:</p><ul><li>3 predefined skins and <strong>16 photo transition effects</strong></li><li><strong>animate text</strong> from any direction you like</li><li>control color, size and transparency of circular timer</li><li><strong>randomize</strong> the image order</li><li>add multiple instances of a slider on same page</li></ul><p>The recent update of this plugin added a new feature that lets you create banners in the sidebar.</p><p>Just give the different types of sliders on the <a href="https://preview.codecanyon.net/item/all-in-one-slider-responsive-jquery-slider-plugin/full_screen_preview/1534434" rel="external" target="_blank">demo page</a> a try. Who knows, one of those might be exactly what you are want.</p><h2><a href="https://codecanyon.net/item/parallax-slider-responsive-jquery-plugin/3217681" rel="external" target="_blank">Parallax Slider</a></h2><p>This plugin gives you the opportunity to implement sliders on your website in a unique way.</p><p>There are 4 different versions of sliders that you can create with this plugin. They are: Classic, Perpetuum Mobile, Mouse Interaction and Ultra.</p><figure class="post_image"><img alt="Parallax Slider" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/parallax_slider.png"></figure><p>Here are some of the slider pack's key features:</p><ul><li>unlimited number of <strong>layered elements</strong></li><li>control motion of a layer between two points</li><li>let layer elements <strong>interact with mouse</strong></li><li>move <strong>multiple backgrounds</strong> asynchronously</li><li><strong>animate the text layers</strong> in any direction</li></ul><p>All these features make it possible to create a unique slider experience for your visitors. You can also specify if the sliders should have a fixed width, full width or responsive layout.</p><p>Just <a href="https://preview.codecanyon.net/item/parallax-slider-responsive-jquery-plugin/full_screen_preview/3217681" rel="external" target="_blank">take a look at the demos</a> and I am sure you will be impressed. The asynchronous movement of backgrounds in the Ultra version of the <a href="https://codecanyon.net/item/parallax-slider-responsive-jquery-plugin/3217681" target="_self">Parallax Slider</a> is very subtle but it completely changes the way you perceive the motion of different slides or images. <br></p><h2><a href="https://codecanyon.net/item/jquery-responsive-timeline-slider/2214213" rel="external" target="_blank">Timeline Slider</a></h2><p>Let's wrap up this list with a unique, special-purpose slider. This slider plugin is completely different than everything we have covered so far.</p><p>Unlike other sliders, this one works best when it is describing a specific event throughout history, and it does a fantastic job in the respect.</p><figure class="post_image"><img alt="Timeline Slider" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32896/image/timeline_slider.png"></figure><p>Here are some features that make this unique plugin awesome:</p><ul><li>a built-in <strong>audio player</strong></li><li><strong>fully responsive</strong> after the latest update</li><li>unlimited number of images and milestones</li><li>2 themes and <strong>fully layered PSD files</strong> for customization</li></ul><p>Also, you can completely change the look and feel of this plugin using 17 built-in options.</p><p>It is possible to add <strong>Read More</strong> buttons, milestone marks and a video or multimedia gallery at different places in the slider. This increases the usefulness of the slider many fold!</p><p>Just <a href="http://www.unpezvivo.com/proyectos/codecanyon/timeline/dark/" rel="external" target="_blank">check out the demo</a> of evolution of chair design and you will know what I mean.</p><h2>Conclusion</h2><p>In this tutorial, we've listed some of the <a href="https://codecanyon.net/category/javascript/sliders" rel="external" target="_blank">best JavaScript sliders</a> available in Envato market.</p><p>All of them are responsive and come with touch support. However, most of them also focus on one key area to set them apart. For instance, the <a href="https://codecanyon.net/item/royalslider-touchenabled-jquery-image-gallery/461126" rel="external" target="_blank">Royal Slider</a> focuses on performance while the <a href="https://codecanyon.net/item/layerslider-responsive-jquery-slider-plugin/922100" rel="external" target="_blank">Layer Slider</a> is more like an animation platform which can be used to created anything from sliders to pop ups.</p><p>The best way to choose a slider plugin from the list is to simply list your goals and pick one that checks the most boxes. Let us know in the comments which plugin you ended up using in your projects.<br></p><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/32896/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32896/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32896/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32896/a2t.img" width="1" /></div>2019-03-20T22:15:47.475Z2019-03-20T22:15:47.475ZMonty Shokeentag:code.tutsplus.com,2005:PostPresenter/cms-329525 Best Store Locator WordPress Plugins<p>WordPress locator plugins are the perfect solution to provide a convenient way for your customers to find your nearest store and the shortest way to get there; especially if your business has multiple locations.&nbsp;</p><p>Customers may want intimate contact with a product before they make a purchase online and a visit to your store provides the opportunity to do so. Not only that, but customers will have fewer inquiries and fewer returns for in-store purchases as compared to online shopping.&nbsp;</p><p>Many types of business will be able to benefit from having WordPress locator plugins on their website.</p><p>The beauty of these plugins is that they use Google Maps, which has features like zooming, routing, location sharing, and even verbal instructions already built-in. Some of these plugins also support WooCommerce, letting you inform customers that which items are available in-store and the nearest store which has an item in stock.</p><p>In this post, we are going to look at some of the best WordPress locator plugins on Codecanyon. Let's get started!</p><h2><a href="https://codecanyon.net/item/map-list-pro-google-maps-location-directories/2620196?s_rank=1">Map List Pro</a></h2><figure class="post_image"><img alt="Map List Pro plugin" src="https://cms-assets.tutsplus.com/uploads/users/1885/posts/32952/image/map pro.png"></figure><p><a href="https://codecanyon.net/item/map-list-pro-google-maps-location-directories/2620196?s_rank=1" target="_self">Map List Pro</a> is the perfect store locator for creating multiple locators, office addresses and even contact lists. In addition, it comes with more than 35 styles for you to choose from.</p><p>Let's look at some of the notable features of this plugin.</p><h4>Easy-to-Use Location Editor</h4><p>You can create and edit locations easily by searching for them in the editor, since all the details are already filled out for you. You can then fine tune or add locations by dragging and dropping the pin to where you want it to be.</p><h4>Custom Icons and Clustered Markers</h4><p>This plugin contains hundreds of icons which can use in your maps. The clustered markers are suitable for maps with a large number of locations and make navigation easier.</p><p>It also includes different display modes for your maps, such as:<br></p><ul><li><strong>simple map:</strong>&nbsp;this is just a simple map without sorting and searching</li><li><strong>search by title:</strong>&nbsp;contains a search box where customers can search stores by title, description, and categories</li><li><strong>search by location:&nbsp;</strong>lets customers look for stores near a certain location</li><li><strong>search by location and text:</strong>&nbsp;search for stores near a location with a certain keyword</li><li><strong>geolocate map:</strong>&nbsp;this kind of map will ask the user for their location and return results that are nearby</li></ul><h2><a href="https://codecanyon.net/item/super-store-finder-for-wordpress/11334595?s_rank=2">Super Store Finder</a></h2><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/1885/posts/32952/image/store finder.jpg"></figure><p><a href="https://codecanyon.net/item/super-store-finder-for-wordpress/11334595?">Super Store Finder</a> for WordPress is another fully responsive store locator that comes with a powerful admin store locator. You can be able to manage stores, tags/categories and also customize styles, colors, labels, notifications, regions and map settings.</p><p>This plugin also comes with a <a href="https://codecanyon.net/item/marker-clusterer-addon-for-wordpress/13486787?s_rank=5">Marker Clusterer Add-on for WordPress</a> which you can additionally purchase. It enables you to combine many markers and then show them in as clusters.</p><figure class="post_image"><img alt="Marker Clusterer Add-on for WordPress" src="https://cms-assets.tutsplus.com/uploads/users/1885/posts/32952/image/showcasewp.jpg"></figure><p>Some of the features include:</p><ul><li><strong>built-in geolocation:</strong>&nbsp;allows your customers to find the exact location of your store and how to get there in the shortest time</li><li><strong>showcase store images and videos:&nbsp;</strong>upload and showcase images and videos on the store locator—for example, images of dishes available at a restaurant</li><li><strong>import bulk addresses</strong></li><li><strong>search stores by region:</strong>&nbsp;a useful feature if you have multiple stores in different countries</li><li>attach a <strong>contact form</strong>&nbsp;to individual stores</li></ul><h2><a href="https://codecanyon.net/item/agile-store-locator-google-maps-for-wordpress/16973546?s_rank=3">Agile Store Locator</a></h2><figure class="post_image"><img alt="Agile Store Locator" src="https://cms-assets.tutsplus.com/uploads/users/1885/posts/32952/image/agile.jpg"></figure><p><a href="https://codecanyon.net/item/agile-store-locator-google-maps-for-wordpress/16973546?s_rank=3">Agile Store Locator</a> is a very powerful locator plugin which features three unique themes with each theme having a different. This gives you an option to choose the style which most closely matches your website.</p><p>Agile Store Locator also comes with a dashboard panel where you can see all the statistics such as the number of stores, markers, categories and search count. It also displays important data like the most viewed stores and locations.</p><p>Other features include:</p><ul><li><strong>maps in multiple languages</strong></li><li><strong>time switch:</strong>&nbsp;a unique feature which allows you to show only the stores that are open at a given time</li><li><strong>draw the&nbsp;direction from one point to another</strong> and instructions on how to get there</li><li><strong>import and export stores</strong>,&nbsp; manage categories and display locations on customized maps</li></ul><h2><a href="https://codecanyon.net/item/woocommerce-store-locator/15762057?s_rank=4">WordPress Store Locator&nbsp;</a></h2><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/1885/posts/32952/image/agile.jpg"></figure><p><a href="https://codecanyon.net/item/woocommerce-store-locator/15762057" target="_self">WordPress Store locator</a> is your ultimate eCommerce store locator. It gives you the ability to link products to your stores—this means that you can add a <strong>Find it in a Store</strong>&nbsp;button next to your products. This has the potential to increase sales, since customers are likely to buy more items if they come to the store.<a href="https://codecanyon.net/category/wordpress"></a></p><p>It also includes more than 10 layouts and 90 options for styling maps.</p><p>Other features are:</p><ul><li>support for <strong>multiple languages</strong></li><li><strong>customization</strong>: you can customize everything including color, data, and even map styling</li><li>ability to <strong>import and export stores</strong></li><li>ability to embed a&nbsp;<strong>contact form</strong> for multiple stores</li><li><strong>embed the locator</strong> on any page</li><li>automatic&nbsp;<strong>geolocation</strong></li><li><strong>store data customization</strong>: customize what data you want to show for a particular store</li></ul><h1><a href="https://codecanyon.net/item/store-locator-plugin-for-wordpress/15672329?s_rank=6">Responsive Store Locator</a></h1><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/1885/posts/32952/image/responsive.jpg"></figure><p><a href="https://codecanyon.net/item/store-locator-plugin-for-wordpress/15672329?s_rank=6">Responsive</a><a href="https://codecanyon.net/item/store-locator-plugin-for-wordpress/15672329?s_rank=6">&nbsp;Store Locator</a> is a multipurpose listing plugin that allows you to show locations that are in close proximity to your customers. It also comes with a powerful back-end where you can upload multiple store locations, translate your maps and locations into multiple languages, and apply beautiful maps skins to maps.</p><p>This plugin is also WooCommerce&nbsp;supported—this means that you can assign stores to products, and let the customers know whether the item is available in-store and direct them to the nearest stores to buy the product.</p><p>This plugin also lets you upload stores without knowing their latitude and longitude coordinates. This can be a real time saver!</p><p>Other features include:</p><ul><li>smart <strong>geotagging</strong></li><li>visitors can view directions to the store in the <strong>kilometers</strong> or <strong>miles</strong></li><li><strong>search for nearby stores</strong> by address or postal code<br></li><li>ability to sort stores by distance<br></li><li>customers can also store listings for later use</li></ul><h2>Conclusion</h2><p>So that's it, some of the best WordPress store locator plugins on CodeCanyon. All these plugins are very easy and quick to set up, and support is available.</p><p>We can't wait for you to try them!</p><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/32952/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32952/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32952/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32952/a2t.img" width="1" /></div>2019-03-20T22:06:31.385Z2019-03-20T22:06:31.385ZEsther Vaatitag:code.tutsplus.com,2005:PostPresenter/cms-2859210 Best WordPress Slider & Carousel Plugins of 2019<p>Whether you want to show off customer testimonials, your latest blog posts, your best images, or just celebrate the members of your team, there is a&nbsp;<a href="https://codecanyon.net/category/wordpress?_ga=2.47573863.1346548283.1552581367-1619249168.1552581286&amp;referrer=search&amp;sort=sales&amp;tags=carousel&amp;term=carousel&amp;utf8=%E2%9C%93&amp;view=list" target="_self">WordPress slider plugin or WordPress carousel slider plugin</a>&nbsp;out there that’s right for&nbsp;you.</p><p>But before we share the 10 best WordPress sliders and carousels to be found at the Envato Market this year, maybe we should clarify the difference (or the lack thereof) between a slider and a carousel plugin. Some say that there’s little difference between the two because they both do a variation of the same thing: display a number of images in a slideshow format while offering some controls like previous an next arrows, thumbnail navigation, and sometimes transition effects between the slides.</p><p>Others insist that though this may be true, the important distinction between a WordPress slider plugin and a WordPress carousel plugin is that a slider slides the images horizontally or vertically while a carousel rotates the images on an axis with the image always facing the viewer. While the jury is still out which camp is right, for the purpose of this article we’ll treat the two terms as interchangeable and get on with the business of revealing the 10 Best WordPress sliders and WordPress carousel&nbsp;plugins of 2019.</p><h3><b>1.&nbsp;</b><b><a href="https://codecanyon.net/item/royalslider-touch-content-slider-for-wordpress/700256?s_rank=1">RoyalSlider</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/royalslider-touch-content-slider-for-wordpress/700256?s_rank=1" target="_self"><img alt="RoyalSlider" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32958/image/RoyalSlider.jpg"></a><figcaption><a href="https://codecanyon.net/item/royalslider-touch-content-slider-for-wordpress/700256?s_rank=1" target="_self">RoyalSlider</a></figcaption></figure><p>The single most downloaded slider at CodeCanyon,&nbsp;<a href="https://codecanyon.net/item/royalslider-touch-content-slider-for-wordpress/700256?s_rank=1">RoyalSlider</a>&nbsp;for WordPress is packed with irresistible features. Used by companies as diverse as Coca Cola, Ralph Lauren and Land Rover, this plugin does just about everything you could possibly want from a slider.</p><p>The most appealing feature is the fullscreen feature with native HTML5 fullscreen support. Perfect for showing high-resolution photography!</p><p>Other standout features include:<br></p><ul><li><strong>multiple sliders</strong>&nbsp;per page are allowed, even with different skins</li><li><strong>touch swipe</strong>&nbsp;navigation support</li><li><strong>responsive design</strong></li><li><strong>vertical or horizontal</strong>&nbsp;thumbnails, bullets or tabs for navigation</li></ul><p><a href="https://codecanyon.net/item/royalslider-touch-content-slider-for-wordpress/700256?s_rank=1">RoyalSlider</a>&nbsp;will definitely wow your visitors with its clean design and professional functionality.</p><h3><b>2.&nbsp;</b><b><a href="https://codecanyon.net/item/slider-pro-responsive-wordpress-slider-plugin/253501?s_rank=2">Slider Pro</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/slider-pro-responsive-wordpress-slider-plugin/253501?s_rank=2" target="_self"><img alt="Slider Pro" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32958/image/Slider-Pro.jpg"></a><figcaption><a href="https://codecanyon.net/item/slider-pro-responsive-wordpress-slider-plugin/253501?s_rank=2" target="_self">Slider Pro</a></figcaption></figure><p><a href="https://codecanyon.net/item/slider-pro-responsive-wordpress-slider-plugin/253501?s_rank=2">Slider Pro</a>&nbsp;provides a clean and intuitive user interface in the admin area with a smooth navigation experience for the end users.</p><p>Slider Pro avoids unnecessary fanciness, which many times is an obstacle for end users in getting the information they need, and instead focuses on simplicity and performance, while still providing a wide range of customisation possibilities.</p><p>My favourite feature is the deep linking feature where each slide change will update the URL in the browser's navigation bar with the appropriate URL hash. That means users can copy and share links directly to individual slides!</p><p>Standout features include:<br></p><ul><li><strong>optimised</strong>&nbsp;image loading</li><li>easy&nbsp;<strong>customisation</strong></li><li><strong>smooth animations</strong></li><li><strong>multiple layouts</strong></li></ul><p><a href="https://codecanyon.net/item/slider-pro-responsive-wordpress-slider-plugin/253501?s_rank=2">Slider Pro</a>, as the name suggests, is the professional solution you need.</p><h3><b>3.&nbsp;</b><b><a href="https://codecanyon.net/item/logos-showcase-multiuse-responsive-wp-plugin/4322745?s_rank=3">Logos Showcase</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/logos-showcase-multiuse-responsive-wp-plugin/4322745?s_rank=3" target="_self"><img alt="Logos Showcase" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32958/image/LogoSlider.jpg"></a><figcaption><a href="https://codecanyon.net/item/logos-showcase-multiuse-responsive-wp-plugin/4322745?s_rank=3" target="_self">Logos Showcase</a></figcaption></figure><p>The&nbsp;<a href="https://codecanyon.net/item/logos-showcase-multiuse-responsive-wp-plugin/4322745?s_rank=3">Logos Showcase</a>&nbsp;plugin is specifically created for users who want to make a grid of images with external or internal links or need to display a list of clients' or sponsors' logos.</p><p>The standout feature with Logos Showcase is the ability to display logos in a grayscale version with the option to display with original colours by hovering if desired.</p><p>Standout features include:<br></p><ul><li>choice of three different ways to display images</li><li>control of&nbsp;<strong>transition speed</strong>&nbsp;and&nbsp;<strong>auto scroll</strong>&nbsp;is enabled</li><li>control of default&nbsp;<strong>size of logo images</strong></li><li>option to set&nbsp;<strong>URLs to each logo</strong>&nbsp;which can open on the same page or in a new page</li></ul><p><a href="https://codecanyon.net/item/logos-showcase-multiuse-responsive-wp-plugin/4322745?s_rank=3">Logos Showcase</a>&nbsp;is the slider to choose if your priority is to display logos and lists most effectively.</p><h3><b>4.&nbsp;</b><b><a href="https://codecanyon.net/item/all-around-responsive-wordpress-content-slider-carousel-creative-and-fun-sliding-plugin/5266981?s_rank=12">All Around</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/all-around-responsive-wordpress-content-slider-carousel-creative-and-fun-sliding-plugin/5266981?s_rank=12" target="_self"><img alt="All Around" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32958/image/AllRound.jpg"></a><figcaption><a href="https://codecanyon.net/item/all-around-responsive-wordpress-content-slider-carousel-creative-and-fun-sliding-plugin/5266981?s_rank=12" target="_self">All Around</a></figcaption></figure><p>&nbsp;<a href="https://codecanyon.net/item/all-around-responsive-wordpress-content-slider-carousel-creative-and-fun-sliding-plugin/5266981?s_rank=12">All Around</a>, as the name suggests, is a really well-rounded slider. It gives you a clean, responsive design, a number of predefined styling options, and support for swipe gestures. Use one of the&nbsp;6 layouts or customise the plugin manually as needed.&nbsp;</p><p>Standout features include:</p><ul><li>6 premade styles</li><li>support for&nbsp;<strong>videos</strong></li><li><strong>vertical or horizontal</strong>&nbsp;sliders</li><li>supports&nbsp;<strong>multiple sliders</strong>&nbsp;on one page</li><li><strong>autoplay</strong>&nbsp;mode</li></ul><p>The&nbsp;<a href="https://codecanyon.net/item/all-around-responsive-wordpress-content-slider-carousel-creative-and-fun-sliding-plugin/5266981?s_rank=12">All Around</a>&nbsp;slider isn't all-around by name only. If this is your first&nbsp;WordPress slider and carousel plugin, it just might also be the last one you'll ever need.</p><h3><b>5.&nbsp;</b><b><a href="https://codecanyon.net/item/super-bundle-for-visual-composer/20374176?s_rank=10">Super Bundle</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/super-bundle-for-visual-composer/20374176?s_rank=10" target="_self"><img alt="Super Bundle" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32958/image/Super-Bundle.jpg"></a><figcaption><a href="https://codecanyon.net/item/super-bundle-for-visual-composer/20374176?s_rank=10" target="_self">Super Bundle</a></figcaption></figure><p>One of the best slider plugin for WordPress,&nbsp;<a href="https://codecanyon.net/item/super-bundle-for-visual-composer/20374176?s_rank=10">Super Bundle</a>&nbsp;is a collection of terrific elements, settings and tools that are design to take your WPBakery Page Builder site to the next level with the ability to turn any content into a carousel, add a video light box, animate text. etc.</p><p>Standout features include:<br></p><ul><li><strong>parallax background</strong>&nbsp;and&nbsp;<strong>video background</strong>&nbsp;options</li><li>over 70 customisable, high-quality SVG row separator designs</li><li>13&nbsp;<strong>entrance animations</strong>&nbsp;and&nbsp;14&nbsp;<strong>exit animations</strong></li><li>6 unique&nbsp;<strong>text effects</strong></li><li>video or image thumbnails that when clicked open a large&nbsp;<strong>video lightbox popup</strong></li></ul><p>What's great about&nbsp;<a href="https://codecanyon.net/item/super-bundle-for-visual-composer/20374176?s_rank=10">Super Bundle</a>&nbsp;is that apart from creating great carousels, it allows you to add a ton of other many other cool features to your WordPress site. A great multipurpose plugin.</p><h3><b>6.&nbsp;</b><b><a href="https://codecanyon.net/item/global-gallery-wordpress-responsive-gallery/3310108?s_rank=4">Global Gallery</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/global-gallery-wordpress-responsive-gallery/3310108?s_rank=4" target="_self"><img alt="Global Gallery" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32958/image/Global-Gallery.jpg"></a><figcaption><a href="https://codecanyon.net/item/global-gallery-wordpress-responsive-gallery/3310108?s_rank=4" target="_self">Global Gallery</a></figcaption></figure><p><a href="https://codecanyon.net/item/global-gallery-wordpress-responsive-gallery/3310108?s_rank=4">Global Gallery</a>&nbsp;is a&nbsp;WordPress image slider that helps&nbsp;you to create awesome galleries from a variety of image sources including Flickr, Facebook or other social media platforms, WordPress custom elements, and any RSS feed. The plugin offers four gallery layouts and also includes both a responsive image slider and a full featured carousel.</p><p>Standout features include:</p><ul><li>4 gallery layouts</li><li><strong>drag-and-drop gallery builder</strong></li><li><strong>image tags</strong>&nbsp;filter</li><li>images slider with fixed or&nbsp;<strong>responsive sizing</strong></li><li>images carousel with&nbsp;<strong>multi-column layouts</strong></li></ul><p>With it 1-click fast setup, the&nbsp;<a href="https://codecanyon.net/item/global-gallery-wordpress-responsive-gallery/3310108?s_rank=4">Global Gallery</a>&nbsp;plugin will help you create filterable, fully responsive and adaptive galleries on your website in no time.</p><h3><b>7.&nbsp;</b><a href="https://codecanyon.net/item/carousel-anything-for-visual-composer/8621711?s_rank=9"><b>Carousel Anything</b></a><b>&nbsp;</b></h3><figure class="post_image"><a href="https://codecanyon.net/item/carousel-anything-for-visual-composer/8621711?s_rank=9" target="_self"><img alt="Carousel Anything " src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32958/image/Carousel.jpg"></a><figcaption><a href="https://codecanyon.net/item/carousel-anything-for-visual-composer/8621711?s_rank=9" target="_self">Carousel Anything&nbsp;</a></figcaption></figure><p>If you’re in then market for a highly versatile WordPress image carousel,&nbsp;<a href="https://codecanyon.net/item/carousel-anything-for-visual-composer/8621711?s_rank=9">Carousel Anything</a>&nbsp;is for you. With Carousel Anything, you can create carousels for any of your content: blog posts, image sliders, video showcases, testimonials, team members, and more. The plugin comes with two designs: one displays your posts in a simple and clean layout while the other offers a bit more design features.</p><p>Standout features include:<br></p><ul><li>works great with&nbsp;<strong>touch devices</strong></li><li>create carousels from your post types</li><li><strong>lightweight</strong>&nbsp;</li><li><strong>works with any theme</strong></li></ul><p>This WordPress carousel slider plugin gives you one of the easiest and quickest ways to create carousels for your website.&nbsp;</p><h3><b>8.&nbsp;</b><b><a href="https://codecanyon.net/item/progress-map-wordpress-plugin/5581719?s_rank=5">Progress Map</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/progress-map-wordpress-plugin/5581719?s_rank=5" target="_self"><img alt="Progress Map" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32958/image/Progress-Map.jpg"></a><figcaption><a href="https://codecanyon.net/item/progress-map-wordpress-plugin/5581719?s_rank=5" target="_self">Progress Map</a></figcaption></figure><p><a href="https://codecanyon.net/item/progress-map-wordpress-plugin/5581719?s_rank=5">Progress Map</a>&nbsp;unique among the WordPress plugins listed here in that it combines carousel slider features with a Google Map feature. The plugin’s aim is to help users create WordPress sites that provide listings for hotels, real estate, restaurants, job posts, etc. With this plugin, you can plot your listings on Google map using markers and then feature the same listings in photos on a carousel—with connections between them! When an item is selected on the carousel, its location on the map is indicated.&nbsp; Likewise when the marker on the map is clicked it activates the image carousel.</p><p>Standout features include:</p><ul><li>carousel can be positioned to the right, to the left, over or under the map</li><li>provides&nbsp;<strong>clustered map markers</strong>&nbsp;for a map with a large number of locations</li><li>carousel items are&nbsp;<strong>fully resizable</strong>&nbsp;and&nbsp;<strong>fully customisable</strong></li><li>connect plugin with any custom post type</li></ul><p>If you’re looking for a visually powerful way to display a number of different locations on a map using a image carousel, the&nbsp;<a href="https://codecanyon.net/item/progress-map-wordpress-plugin/5581719?s_rank=5">Progress Map</a>&nbsp;plugin in is a great solution.</p><h3><b>9.&nbsp;</b><b><a href="https://codecanyon.net/item/viba-portfolio-wordpress-plugin/9561599?s_rank=13">Viba Portfolio</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/viba-portfolio-wordpress-plugin/9561599?s_rank=13" target="_self"><img alt="Viba Portfolio" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32958/image/Viba-Portfolio.jpg"></a><figcaption><a href="https://codecanyon.net/item/viba-portfolio-wordpress-plugin/9561599?s_rank=13" target="_self">Viba Portfolio</a></figcaption></figure><p><a href="https://codecanyon.net/item/viba-portfolio-wordpress-plugin/9561599?s_rank=13">Viba Portfolio</a>&nbsp;is all about showcasing your latest blog posts, portfolio, customer testimonials, etc. to their best advantage. This WordPress gallery slider provides you with four different gallery types, as well as 60 skins to change the looks of your slider easily and quickly. It also offers full control of all customisation features from layouts, to font size, to colour and overlays. &nbsp;</p><p>Standout features include:<br></p><ul><li>60 skins</li><li>4 gallery types</li><li>3 filter types</li><li><strong>reponsive grid</strong>&nbsp;and&nbsp;<strong>responsive&nbsp;</strong><strong>carousel</strong>&nbsp;layouts</li></ul><p>Use&nbsp;<a href="https://codecanyon.net/item/viba-portfolio-wordpress-plugin/9561599?s_rank=13">Viba Portfolio</a>&nbsp;as a&nbsp;WordPress testimonial slider,&nbsp;WordPress post slider or any other kind of slider you need. It's that versatile!</p><h3>10.&nbsp;<a href="https://codecanyon.net/item/ultra-portfolio-wordpress/9518610?s_rank=2&amp;_ga=2.250472390.1346548283.1552581367-1619249168.1552581286">Ultra Portfolio</a></h3><figure class="post_image"><a href="https://codecanyon.net/item/ultra-portfolio-wordpress/9518610?s_rank=2&amp;_ga=2.250472390.1346548283.1552581367-1619249168.1552581286" target="_self"><img alt="Ultra Portfolio" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32958/image/Ultra-Portfolio.jpg"></a><figcaption><a href="https://codecanyon.net/item/ultra-portfolio-wordpress/9518610?s_rank=2&amp;_ga=2.250472390.1346548283.1552581367-1619249168.1552581286" target="_self">Ultra Portfolio</a></figcaption></figure><p><a href="https://codecanyon.net/item/ultra-portfolio-wordpress/9518610?s_rank=2&amp;_ga=2.250472390.1346548283.1552581367-1619249168.1552581286">Ultra Portfolio</a>&nbsp;will primarily appeal to users who are interested in building portfolios with slider features included. It offers a large number of layout options and really delivers on flexibility and functionality. The most appealing feature of this slider is the ability to control animation effects and animation speed.</p><p>Standout features include:<br></p><ul><li>unlimited layouts</li><li><strong>WooCommerce</strong>&nbsp;integration</li><li><strong>Google Font</strong>&nbsp;integration</li><li><strong>responsive layout</strong>&nbsp;lets you control the number of columns for different screens</li></ul><p><a href="https://codecanyon.net/item/ultra-portfolio-wordpress/9518610?s_rank=2&amp;_ga=2.250472390.1346548283.1552581367-1619249168.1552581286">Ultra Portfolio</a>&nbsp;should be your choice if you want to combine slider functions with a wide range of portfolio options.<br></p><h2><b>Choose Your WordPress Slider and Carousel Plugins</b></h2><p>That's it for our 10 best WordPress sliders and best WordPress carousel plugins of 2019.&nbsp;This is just a small selection of WordPress carousel plugins and WordPress slider plugins available in the&nbsp;<a href="https://codecanyon.net/category/wordpress?_ga=2.253149385.1346548283.1552581367-1619249168.1552581286&amp;referrer=search&amp;sort=sales&amp;tags=carousel&amp;term=carousel&amp;utf8=%E2%9C%93&amp;view=list" target="_self">Envato Marketplace</a>. If you don't find what you're looking for here, why not look&nbsp;at what else is available?</p><p>Looking for a&nbsp;<a href="https://themeforest.net/free/wordpress-themes" target="_self">free WordPress theme</a>&nbsp;to get started fast? We have some great ones for you to choose from!</p><p>Furthermore, if you're interested in getting more into WordPress development, don't hesitate to review&nbsp;the&nbsp;<a href="https://code.tutsplus.com/categories/wordpress" target="_self">the many tutorials we have available</a>.</p><h3>Learn How to Use WordPress</h3><p>Are you new to using WordPress?&nbsp;<a href="https://webdesign.tutsplus.com/series/learn-how-to-use-wordpress--cms-1074" target="_self">Learn how to use WordPress</a>&nbsp;in our complete guide. This guide will take you through the full process, from the basics of creating posts and pages right through to installing and customising your first WordPress theme and setting up plugins for security and performance.</p><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/28592/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/28592/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/28592/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/28592/a2t.img" width="1" /></div>2019-03-19T01:04:59.924Z2019-03-19T01:04:59.924ZNona Blackmantag:code.tutsplus.com,2005:PostPresenter/cms-2960210 Best React Native App Templates of 2019<p>React Native has been gaining in popularity for one obvious reason: it allows developers to target different mobile operating systems with a single codebase. This means that you no longer have to build the same app for both iOS and for&nbsp;Android from scratch, and you don't have to&nbsp;forgo one or the other platform. Now you can code apps for both platforms with the same powerful JavaScript technologies you use for building web apps.</p><p>Pioneered by Facebook and released as open source, React Native is being used by apps such as Facebook, Instagram, Netflix, and Airbnb, and can only go from strength to strength.</p><p>To help keep you updated about the best React Native app templates on the market, we've compiled a list of the 10 best available at&nbsp;<a href="https://codecanyon.net/search/react%20native?_ga=2.249528903.1346548283.1552581367-1619249168.1552581286&amp;referrer=homepage&amp;sort=sales&amp;utf8=%E2%9C%93">CodeCanyon</a>&nbsp;for 2019.</p><h2>React Native App Builders</h2><h3><b>1.&nbsp;<a href="https://codecanyon.net/item/react-app-builder-unlimited-number-of-apps/22649230?s_rank=10">React App Builder</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/react-app-builder-unlimited-number-of-apps/22649230?s_rank=10" target="_self"><img alt="React App Builder" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32961/image/React-App-Builder.jpg"></a><figcaption><a href="https://codecanyon.net/item/react-app-builder-unlimited-number-of-apps/22649230?s_rank=10" target="_self">React App Builder</a></figcaption></figure><p><a href="https://codecanyon.net/item/react-app-builder-unlimited-number-of-apps/22649230?s_rank=10">React App Builder</a>&nbsp;is a multipurpose, React Native app builder that helps developers and non-developers alike create any kind of IOS or Android app they want—Chat apps, events apps, recipe apps, shopping apps, restaurant apps, etc. All you need to do is choose one of the available templates, edit and re-order the app’s more than 30 sections, customise the design, colours and layout, add your content, and you app is ready to publish on Google Play and App Store.&nbsp;</p><p>User getamove says:</p><blockquote>"Smart platform with amazing customer support. Highly recommended.Thanks!”</blockquote><h2>Turn a WordPress or Shopify Site Into a React Native App</h2><h2><b>2.&nbsp;<a href="https://codecanyon.net/item/gikapp-react-native-full-application/19465924?s_rank=9">gikApp</a></b></h2><figure class="post_image"><a href="https://codecanyon.net/item/gikapp-react-native-full-application/19465924?s_rank=9" target="_self"><img alt="gikApp" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32961/image/gikApp.jpg"></a><figcaption><a href="https://codecanyon.net/item/gikapp-react-native-full-application/19465924?s_rank=9" target="_self">gikApp</a></figcaption></figure><p>If you need to convert WordPress or Shopify sites into professional and fully functioning mobile apps quickly and easily, the&nbsp;<a href="https://codecanyon.net/item/gikapp-react-native-full-application/19465924?s_rank=9">gikApp</a>&nbsp;is ideal.&nbsp;This React Native app template app offers 3 themes and useful features like list layout, feature post, article, OneSignal push notification, Google Admob and more. The app template also comes with step-by-step video instructions.</p><p>User kalak says:</p><blockquote>“I took me more than 3 minutes to get this running. But this seems to be the BEST app-from-WP-site package I have used (and I have used several for now). I am very pleased to have purchased this package. The customer support is outstanding!”</blockquote><h3><b>3.&nbsp;<a href="https://codecanyon.net/item/techstore-react-native-ecommerce-mobile-app-for-shopify/20324216?s_rank=15">TechStore</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/techstore-react-native-ecommerce-mobile-app-for-shopify/20324216?s_rank=15" target="_self"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32961/image/ReactNative_1.jpg"></a><figcaption><a href="https://codecanyon.net/item/techstore-react-native-ecommerce-mobile-app-for-shopify/20324216?s_rank=15" target="_self">TechStore</a></figcaption></figure><p>If you’re not a developer or code-savvy but want to create your own e-commerce app for iOS and/or Android, look no further than the&nbsp;<a href="https://codecanyon.net/item/techstore-react-native-ecommerce-mobile-app-for-shopify/20324216?s_rank=15">TechStore</a>&nbsp;React Native app template. The template uses a React Native framework and Shopify integration to help you create your own eCommerce app quickly and easily. The template uses a one-step installation process, and offers all the eCommerce features you’ll need like off-canvas and dropdown menus, product lists, product page, shopping chart, safe and secure checkout process, seven blog layouts and more.&nbsp;</p><p>User berein says:</p><blockquote>“It's a fantastic solution to make easily a shopping app with Shopify. Very well documented, with videos and a very good support. Many thanks guys!”</blockquote><h3><b>4.&nbsp;<a href="https://codecanyon.net/item/beostore-complete-react-native-template-for-ecommerce/17010642?s_rank=1">MStore Pro</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/beostore-complete-react-native-template-for-ecommerce/17010642?s_rank=1" target="_self"><img alt="MStore Pro" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32961/image/MStore-Pro.jpg"></a><figcaption><a href="https://codecanyon.net/item/beostore-complete-react-native-template-for-ecommerce/17010642?s_rank=1" target="_self">MStore Pro</a></figcaption></figure><p>One of the most popular React Native app templates available at CodeCanyon,&nbsp;<a href="https://codecanyon.net/item/beostore-complete-react-native-template-for-ecommerce/17010642?s_rank=7">MStore Pro</a>&nbsp;allows users to convert their existing online shop to a mobile store app.</p><p>The template requires no coding skills and is very easy to customise. It is fully integrated with WordPress and WooCommerce, supports PayPal, Stripe, and COD payment methods, and allows users to log in with their Facebook account.</p><p>User Bezman says:</p><blockquote>“Very well developed and thought out template for quickly deploying a mobile app powered by a WordPress eCommerce website. Updated often and well supported by the developers. Highly recommended."</blockquote><h3><b>5.&nbsp;<a href="https://codecanyon.net/item/beonews-react-native-mobile-app-for-wordpress/19186520?s_rank=2">BeoNews Pro</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/beonews-react-native-mobile-app-for-wordpress/19186520?s_rank=2" target="_self"><img alt="BeoNews Pro" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32961/image/BeoNews-Pro.jpg"></a><figcaption><a href="https://codecanyon.net/item/beonews-react-native-mobile-app-for-wordpress/19186520?s_rank=2" target="_self">BeoNews Pro</a></figcaption></figure><p><a href="https://codecanyon.net/item/beonews-react-native-mobile-app-for-wordpress/19186520?s_rank=2">BeoNews Pro</a>&nbsp;is a rather cool app that allows users to create a mobile app using any of the content on their WordPress site, including video, photos, and blog posts. BeoNews Pro supports both Facebook and Google logins and stores user data on Firebase that can synchronises between devices.&nbsp;</p><p>User lelandwsmith says:</p><blockquote>“The design and flexibility make this a great project. The support is good as well.”</blockquote><h3><b>6.&nbsp;<a href="https://codecanyon.net/item/reactpage-react-js-bootstrap-starer-kit/19642287?s_rank=16">ReactPage</a></b><br></h3><figure class="post_image"><a href="https://codecanyon.net/item/reactpage-react-js-bootstrap-starer-kit/19642287?s_rank=16" target="_self"><img alt="ReactPage" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32961/image/ReactPage1.jpg"></a><figcaption><a href="https://codecanyon.net/item/reactpage-react-js-bootstrap-starer-kit/19642287?s_rank=16" target="_self">ReactPage</a></figcaption></figure><p>Looking to convert your WordPress site since into a desktop app?&nbsp;<a href="https://codecanyon.net/item/reactpage-react-js-bootstrap-starer-kit/19642287?s_rank=16">ReactPage</a>&nbsp;is React Native App template that’s designed specifically to convert your WordPress site into a Windows and/or Mac OS application. You can choose the components you need for your page—like layout card view, list view, detail view, etc.—and control everything from the WordPress admin page back-end.</p><p>User jkhaui says:</p><blockquote>“You get what you pay for. May seem on the pricier side, until you realise that you're getting one of the very few high quality React templates for WordPress. Really well done.”</blockquote><h2>All-in-one React Native App Templates</h2><h2><b>7.&nbsp;<a href="https://codecanyon.net/item/antiqueruby-react-native/21331228?s_rank=3">Antiqueruby</a></b></h2><figure class="post_image"><a href="https://codecanyon.net/item/antiqueruby-react-native/21331228?s_rank=3" target="_self"><img alt="Antiqueruby" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32961/image/Antiqueruby.jpg"></a><figcaption><a href="https://codecanyon.net/item/antiqueruby-react-native/21331228?s_rank=3" target="_self">Antiqueruby</a></figcaption></figure><p>Arriving on the scene in 2018, the&nbsp;<a href="https://codecanyon.net/item/antiqueruby-react-native/21331228?s_rank=3">Antiqueruby</a>&nbsp;app template has grown rapidly in popularity. It's no wonder, because Antiqueruby is every app developer's dream. Designed to save developers hours of work, Antiqueruby provides developers with stylish and clever UI and UX components to customise their apps.&nbsp;</p><p>Created using Material Design and offering over 140 screens for profiles, sign-ins and sign-ups, social media, and navigation, it's no surprise that Antiqueruby has become one of CodeCanyon’s bestsellers in this category.&nbsp;</p><h3><b>8.&nbsp;<a href="https://codecanyon.net/item/listapp-listing-directory-mobile-app-by-react-native/21456447?s_rank=4">ListApp</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/listapp-listing-directory-mobile-app-by-react-native/21456447?s_rank=4" target="_self"><img alt="ListApp" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32961/image/ListApp.jpg"></a><figcaption><a href="https://codecanyon.net/item/listapp-listing-directory-mobile-app-by-react-native/21456447?s_rank=4" target="_self">ListApp</a></figcaption></figure><p>Another relative newcomer,&nbsp;<a href="https://codecanyon.net/item/listapp-listing-directory-mobile-app-by-react-native/21456447?s_rank=4">ListApp</a>&nbsp;is a great React Native app template for developers looking to create an app with content that takes the form of lists. So if you’re interested in creating an app for the top restaurants, shops, sights, etc. in a specific area, this would be the template for you.&nbsp;Some key features available with the app are a map and booking features, social login, and the ability to track bookings.</p><p>User jacobspn says:</p><blockquote>“Really nice work! Awesome new features with every update."</blockquote><h2>Special-Purpose React Native App Templates</h2><h3>9.&nbsp;<b><a href="https://codecanyon.net/item/gofit-complete-react-native-fitness-app-admin-panel/22286497?s_rank=13">GoFit Fitness App Template</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/gofit-complete-react-native-fitness-app-admin-panel/22286497?s_rank=13" target="_self"><img alt="GoFit" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32961/image/GoFit.jpg"></a><figcaption><a href="https://codecanyon.net/item/gofit-complete-react-native-fitness-app-admin-panel/22286497?s_rank=13" target="_self">GoFit</a></figcaption></figure><p>If you want to create your own fitness app that covers all aspects of a get fit plan from nutrition to exercise, check out the&nbsp;<a href="https://codecanyon.net/item/gofit-complete-react-native-fitness-app-admin-panel/22286497?s_rank=13">GoFit</a>&nbsp;app template. The template features a signup and login screen, main menu, workouts, exercise, recipes, blog, levels and goals, body parts diagrams and equipment—in other words everything you need to create the best fitness app.</p><p>User afrojuju says:</p><blockquote>“Great product, will recommend to any user. And support was superb!”</blockquote><h3>10.&nbsp;<b><a href="https://codecanyon.net/item/qribto-the-react-native-app-for-crypto-currency-news-site/22462364?s_rank=3">Qribto Cryptocurrency App Template</a></b></h3><figure class="post_image"><a href="https://codecanyon.net/item/qribto-the-react-native-app-for-crypto-currency-news-site/22462364?s_rank=3" target="_self"><img alt="Qribto" src="https://cms-assets.tutsplus.com/uploads/users/1631/posts/32961/image/Qribto.jpg"></a><figcaption><a href="https://codecanyon.net/item/qribto-the-react-native-app-for-crypto-currency-news-site/22462364?s_rank=3" target="_self">Qribto</a></figcaption></figure><p><a href="https://codecanyon.net/item/qribto-the-react-native-app-for-crypto-currency-news-site/22462364?s_rank=3">Qribto</a>&nbsp;is a React Native app template designed to help owners of WordPress crypto currency sites, convert their WordPress sites into a mobile app for iOS and/or Android within minutes. The template uses a combination of React Native framework and WordPress REST API to save you hours of designing and coding when converting your crypto WordPress site into a mobile app. The template includes features like list layout, feature post, OneSignal push notification and Google Admob.</p><p>User BangLuuVan says:</p><blockquote>“It's a fantastic solution to make easily a Cryto News app with WordPress. Very well documented, with videos and a very good support.”</blockquote><h2><b>Choose Your React Native App Template&nbsp;</b></h2><p>That’s it for our list of the 10 best React Native app templates of 2019. We hope you’ve found the right template for your needs here, but remember that these are just a few of the terrific app templates available at&nbsp;<a href="https://codecanyon.net/search/react%20native?_ga=2.249528903.1346548283.1552581367-1619249168.1552581286&amp;referrer=homepage&amp;sort=sales&amp;utf8=%E2%9C%93">CodeCanyon</a>. So if none of them are quite what you were looking for, there are plenty of other great options there to choose from.</p><p>And if you want to improve your skills building React Native applications, check out the ever so useful courses&nbsp;we have on offer.</p><ul><li><a href="https://code.tutsplus.com/courses/build-a-social-app-with-react-native" target="_self">Build a Social App with React Native</a></li><li><a href="https://code.tutsplus.com/courses/get-started-with-react-native" target="_self">Get Started with React Native</a></li></ul><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/29602/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/29602/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/29602/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/29602/a2t.img" width="1" /></div>2019-03-19T00:59:26.509Z2019-03-19T00:59:26.509ZNona Blackmantag:code.tutsplus.com,2005:PostPresenter/cms-3283410 Best Gallery WordPress Plugins of 2019<p>WordPress gallery plugins are essential for displaying images, videos, eCommerce products, and blog posts in a stylish and eye-catching way.&nbsp;</p><p>But, not all WordPress gallery plugins are created equal. Many are missing key features that help you integrate your media into your website's theme to help create the most visually appealing experience for the user.&nbsp;</p><p>That's why I have compiled a list of the top 10 best gallery WordPress plugins of 2019. To help you choose the best gallery or grid plugin for you website, we'll look at 9 grid-based galleries, and one plugin with a completely different type of interface!</p><p>Grid Gallery Plugins for WordPress</p><h3>1. <a href="https://codecanyon.net/item/the-grid-responsive-wordpress-grid-plugin/13306812?s_rank=1" target="_self">The Grid</a></h3><p>The Grid is one of the best selling WordPress gallery plugins on the market. This plugin lets you take any of your custom posts and display them in a fully customizable and responsive grid which makes it one of the most advanced gallery plugins ever developed.&nbsp;</p><figure class="post_image"><img alt="The Grid" src="https://cms-assets.tutsplus.com/uploads/users/1809/posts/32834/image/GRID.png"></figure><p>This WordPress photo gallery plugin also offers:</p><ul><li>quick &amp; easy setup</li><li>endless layout possibilities&nbsp;</li><li>custom post type &amp; social stream support</li><li>powerful skin builder</li><li>premium support</li></ul><p>Many WordPress&nbsp;gallery plugins are known&nbsp;for having slow load times. This isn't a problem with <a href="https://codecanyon.net/item/the-grid-responsive-wordpress-grid-plugin/13306812?s_rank=1" target="_self">The Grid</a> because of its lightweight and efficient code that ensures top performance on your site.&nbsp;<br></p><p>View a <a href="https://preview.codecanyon.net/item/the-grid-responsive-wordpress-grid-plugin/full_screen_preview/13306812?_ga=2.138379120.1314341551.1551243734-595639568.1549056877&amp;_gac=1.208347686.1550186598.EAIaIQobChMI8pnr66a84AIVdBh9Ch2TggPpEAAYASAAEgIn8vD_BwE" target="_self">live demo </a>of this must have WordPress plugin to see if it's right for you.</p><h3>2.&nbsp;<a href="https://codecanyon.net/item/unite-gallery-wordpress-gallery-plugin/10458750?s_rank=2" target="_self">Unite Gallery</a></h3><p>When looking to purchase a WordPress gallery plugin, you need to make sure the plugin is responsive, mobile-friendly, and easily customizable. Unite Gallery delivers on all of these necessary requirements and will make a perfect addition to your website.&nbsp;</p>
<figure class="post_image"><img alt="Unite Gallery" src="https://cms-assets.tutsplus.com/uploads/users/1809/posts/32834/image/Unite Galler.jpg"></figure><p>Here are some of the notable features that this plugin offers:&nbsp;</p><ul><li>10 Premium types</li><li>120+ gallery options</li><li>built-in media lightbox<br></li><li>support for four types of videos: YouTube, Vimeo, HTML5 video and Wistia&nbsp;<br></li></ul><p>Find out if this gallery plugin is right for you by <a href="http://preview.codecanyon.net/item/unite-gallery-wordpress-gallery-plugin/full_screen_preview/10458750?_ga=2.26106431.387208850.1551826344-595639568.1549056877&amp;_gac=1.213606816.1550186598.EAIaIQobChMI8pnr66a84AIVdBh9Ch2TggPpEAAYASAAEgIn8vD_BwE" target="_self">viewing the live preview</a>.</p><h3>3. <a href="https://codecanyon.net/item/cube-portfolio-responsive-wordpress-grid-plugin/8534570?s_rank=3" target="_self">Cube Portfolio</a></h3><p>Whether you are looking to display blog posts, portfolio projects, images, or any other type of content in a grid format, Cube Portfolio is the WordPress&nbsp;gallery&nbsp;for you. Whether you are a beginner or advanced user, Cube Portfolio's live template builder will make putting together a&nbsp;stylish and flexible grid incredibly easy.&nbsp;</p><figure class="post_image"><img alt="Cube Portfolio" src="https://cms-assets.tutsplus.com/uploads/users/1809/posts/32834/image/Cube portfolio.jpg"></figure><p>Here are some of the important features of this&nbsp;WordPress gallery plugin:</p><ul><li>responsive design</li><li>fully customizable</li><li>8 starter templates</li><li>premium support&nbsp;</li><li>free updates</li></ul><p>View the <a href="http://preview.codecanyon.net/item/cube-portfolio-responsive-wordpress-grid-plugin/full_screen_preview/8534570?_ga=2.198662445.387208850.1551826344-595639568.1549056877&amp;_gac=1.48877202.1550186598.EAIaIQobChMI8pnr66a84AIVdBh9Ch2TggPpEAAYASAAEgIn8vD_BwE" target="_self">live preview</a> of this complete gallery plugin to see if it's right for you.</p><h3>4.&nbsp;<a href="https://codecanyon.net/item/final-tiles-wordpress-gallery/5189351?s_rank=4" target="_self">Final Tiles</a></h3><p>Final Tiles grid gallery is one of the most popular photo galleries on <a href="https://codecanyon.net" target="_self">CodeCanyon</a>. With its unique custom grids, you can build any portfolio or gallery that you can imagine.&nbsp;<br></p><figure class="post_image"><img alt="Final Tiles Wordpress Gallery" src="https://cms-assets.tutsplus.com/uploads/users/1809/posts/32834/image/Final tiles.jpg"></figure><p>Here is a list of prominent features of this plugin:</p><ul><li>flexible grids</li><li>video capabilities</li><li>7 lightboxes</li><li>social sharing</li></ul><p>Other notable features for <a href="https://codecanyon.net/item/final-tiles-wordpress-gallery/5189351" target="_self">Final Tiles</a> include lazy load, customizable filters, and the user-friendly admin panel.</p><p><a href="https://preview.codecanyon.net/item/final-tiles-wordpress-gallery/full_screen_preview/5189351?_ga=2.194395567.387208850.1551826344-595639568.1549056877&amp;_gac=1.175449494.1550186598.EAIaIQobChMI8pnr66a84AIVdBh9Ch2TggPpEAAYASAAEgIn8vD_BwE" target="_self">Check out the live preview</a>&nbsp;to see&nbsp;what this WordPress gallery plugin is capable of.</p><h3>5.&nbsp;<a href="https://codecanyon.net/item/everest-gallery-responsive-wordpress-gallery-plugin/20067428" target="_self">Everest Gallery</a></h3><p>The versatility of the Everest Gallery plugin makes it a must have. Most gallery plugins only have a few types of layouts, but this WordPress gallery plugin has seven different layouts that can be transformed to fit into your website.&nbsp;</p><figure class="post_image"><img alt="Everest Gallery" src="https://cms-assets.tutsplus.com/uploads/users/1809/posts/32834/image/Everest Gallery.jpg"></figure><figure class="post_image"><p>Here are a few of the notable features offered by this gallery plugin:</p><ul></ul></figure><ul><li>30+ gallery layouts</li><li>various gallery items support</li><li>10 pre-designed&nbsp;image filters</li><li>pagination configuration settings</li><li>35 hover animation</li></ul><p>Explore all the features of <a href="https://codecanyon.net/item/everest-gallery-responsive-wordpress-gallery-plugin/20067428" target="_self">Everest Gallery</a> in the <a href="https://codecanyon.net/item/everest-gallery-responsive-wordpress-gallery-plugin/20067428" target="_self">live preview</a>.</p><h3>6. <a href="https://codecanyon.net/item/wp-media-boxes-portfolio-responsive-wordpress-grid-plugin/22881148?s_rank=1" target="_self">Media Boxes Portfolio</a></h3><p>The filter system in this WordPress gallery plugin is unlike any other on the market. You can add multiple filters, add multiple categories to your posts, and use any category or tag defined in your post. This allows you to create well-organized grids that can display the specific items that you want to highlight.&nbsp;</p><figure class="post_image"><img alt="Media Boxes Portfolio" src="https://cms-assets.tutsplus.com/uploads/users/1809/posts/32834/image/WP Media Boxes.jpg"></figure><p>Here are the core features of this gallery WordPress plugin:</p><ul><li>fully responsive layout</li><li>powerful filter system</li><li>search and support system</li><li>lazy load feature</li><li>free technical support</li></ul><p>View the <a href="http://preview.codecanyon.net/item/wp-media-boxes-portfolio-responsive-wordpress-grid-plugin/full_screen_preview/22881148?_ga=2.228430239.387208850.1551826344-595639568.1549056877&amp;_gac=1.15847298.1550186598.EAIaIQobChMI8pnr66a84AIVdBh9Ch2TggPpEAAYASAAEgIn8vD_BwE" target="_self">live preview</a>&nbsp;to see everything that <a href="https://codecanyon.net/item/wp-media-boxes-portfolio-responsive-wordpress-grid-plugin/22881148" target="_self">Media Boxes Portfolio</a> has to offer.</p><h3>7.&nbsp;<a href="https://codecanyon.net/item/media-grid-wordpress-responsive-portfolio/2218545?s_rank=3" target="_self">Media Grid</a></h3><p>Media Grid allows you to create your own layouts with any type of media of your choice. The ease of use of this plugin is next to none with its visual grid builder. All you have to do is add items, size, and then sort them.&nbsp;&nbsp;</p><figure class="post_image"><img alt="Media Grid" src="https://cms-assets.tutsplus.com/uploads/users/1809/posts/32834/image/Media Grid.jpg"></figure><p>Here are some of Media Grid's main features:</p><ul><li>unlimited layouts</li><li>dynamic grids</li><li>visual grid builder</li><li>full media support</li></ul><p>Other features worth mentioning are the ultra-lightweight lightboxes, the ten professional grid presets, and the SEO pagination on the grids</p><p>Check out this WordPress gallery plugin in action by <a href="https://lcweb.it/media-grid" target="_self">viewing its live preview</a>.</p><h3>8.&nbsp;<a href="https://codecanyon.net/item/justified-image-grid-premium-wordpress-gallery/2594251?s_rank=6" target="_self">Justified Image Grid</a></h3><p>Photos tell a unique story and deserve to be presented in an authentic way. The powerful and responsive WordPress gallery plugin, Justified Image Grid, showcases your images in a captivating and memorable way.&nbsp;</p><figure class="post_image"><img alt="Justified Image Grid" src="https://cms-assets.tutsplus.com/uploads/users/1809/posts/32834/image/justified image grid.jpg"></figure><p>Here are a few of the notable features of this plugin:</p><ul><li>responsive gallery</li><li>special effects</li><li>Retina ready</li><li>automatic justified layout</li><li>thumbnail captions</li></ul><p>See for yourself just how powerful the <a href="https://codecanyon.net/item/justified-image-grid-premium-wordpress-gallery/2594251" target="_self">Justified Image Grid</a> is by <a href="https://codecanyon.net/item/justified-image-grid-premium-wordpress-gallery/2594251?s_rank=6" target="_self">taking a look at the live </a><a href="https://codecanyon.net/item/justified-image-grid-premium-wordpress-gallery/2594251?s_rank=6" target="_self">preveiw</a><a href="https://codecanyon.net/item/justified-image-grid-premium-wordpress-gallery/2594251?s_rank=6" target="_self">.</a></p><h3>9.&nbsp;<a href="https://codecanyon.net/item/fancy-gallery-wordpress-plugin/400535?s_rank=10" target="_self">Fancy Gallery</a><br></h3><p>When choosing a WordPress gallery plugin you want to choose one that gives flexibility with its layout. <a href="https://codecanyon.net/item/fancy-gallery-wordpress-plugin/400535" target="_self">Fancy Gallery</a> does just that with thousands of layouts and hover effects that let you create the perfect gallery for your website.&nbsp; &nbsp;</p><figure class="post_image"><img alt="Fancy Gallery" src="https://cms-assets.tutsplus.com/uploads/users/1809/posts/32834/image/Fancy Gallery.jpg"></figure><p>Here are the main features of this gallery plugin:</p><ul><li>thousands of layout and&nbsp;hover effects<br></li><li>different navigation types</li><li>different color themes</li><li>create an unlimited number of galleries&nbsp;</li></ul><p>Other features worth pointing out are the user-friendly AJAX admin, the option to upload different types of media, and the HTML generator that allows you to share your gallery on external websites. Find out if this WordPress gallery plugin is right for you by checking out the <a href="https://codecanyon.net/item/fancy-gallery-wordpress-plugin/400535?s_rank=10" target="_self">live demo.</a></p><h2>Bonus: A FlipBook Gallery Plugin</h2><h3>10.&nbsp;<a href="https://codecanyon.net/item/real3d-flipbook-wordpress-plugin/6942587?s_rank=4" target="_self">Real3D FlipBook</a></h3><p>This best-selling flipbook plugin is a powerhouse combining an image viewer and PDF image viewer. You can create realistic looking 3D flipbooks in no time with no custom coding or confusing configuration. While this may not be your standard WordPress gallery plugin, it is a must have for anyone looking to display their PDFs or images in a new and appealing way.&nbsp;</p><figure class="post_image"><img alt="Real3D FlipBook" src="https://cms-assets.tutsplus.com/uploads/users/1809/posts/32834/image/flipbook.jpg"></figure><p>Here are the main features of this gallery WordPress plugin:</p><ul><li>create flipbooks from PDFs and/or images</li><li>realistic WebGL flipbooks</li><li>customizable interface</li><li>customizable flipbooks</li><li>lightbox</li></ul><p>View the&nbsp;<a href="https://codecanyon.net/item/real3d-flipbook-wordpress-plugin/6942587?s_rank=4" target="_self">live demo</a>&nbsp;of this best selling plugin to see if it can work for you.</p><h2>Conclusion</h2><p>My selections for the ten best gallery plugins described above are only a few of the gallery plugins available on <a href="https://codecanyon.net/" target="_self">CodeCanyon</a>. If none of the plugins listed above interests you or you want to explore other available gallery plugins, then take a look at the other&nbsp;<a href="https://codecanyon.net/category/wordpress/galleries" target="_self">WordPress gallery plugins</a> on&nbsp;<a href="https://codecanyon.net/" target="_self">CodeCanyon</a>. Find a plugin that you enjoyed using in your website? Feel free to let us know in the comments below. We would love to hear from you!</p><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/32834/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32834/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32834/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32834/a2t.img" width="1" /></div>2019-03-19T00:56:24.482Z2019-03-19T00:56:24.482ZDaniel Strongintag:code.tutsplus.com,2005:PostPresenter/cms-32908Get Started With a Free Booking Calendar Plugin in WordPress<p>Today, I'm going to show you how to use the Easy Appointments plugin for WordPress to create an appointment booking system. We’ll start by exploring the basic settings provided by this plugin, and later on, we’ll go through a real-world example to build a complete booking system.</p><p>Irrespective of the profession, an online appointment booking system is a must-have these days to provide comfort and flexibility to customers. Not only that, but it also improves overall resource utilization for service providers. Thus, the benefit of setting up an effective online appointment booking system is twofold: customers have a choice to book a slot which suits them, and service providers get help planning their time.</p><p>Today, we’re going to look at how to set up an appointment booking system with WordPress. If you’re using a WordPress website, and you’re curious about how to build a booking system for your website, you’re in the right place!</p><p>As a WordPress developer, you have luxury of choosing your desired plugin from a wide range of free plugins available from the WordPress plugins library. Similarly, you’ll find a lot of plugins for the booking calendar system as well. For this post, I’ve picked one of the best free plugins in the category, Easy Appointments, and I'll show you how to use it.</p><p>For this article, I’ve used WordPress 5.1, and the Easy Appointments plugin version is 2.3.12. I would recommend that you install it if you want to follow along with this article. To install the Easy Appointments plugin, just follow the <a href="https://easy-appointments.net/documentation/#install" rel="external" target="_blank">istandard installation process</a>.</p><p>Next, we’ll explore the basics of the Easy Appointments plugin along with the setup process. Then, we’ll build a real-world example which will demonstrate use of this plugin. Meanwhile, we’ll also go through a few important aspects of this plugin that allow you to customize a booking system.</p><h2>What Is the Easy Appointments Plugin?</h2><p>The Easy Appointments plugin is one of the best free plugins in this category. It allows you to easily set up a time management system. It can be used for almost any profession such as doctors, personal trainers, personal tutors, or the like that want to book appointments.</p><p>Let’s have a quick look at the features it provides:</p><ul>
<li>multiple locations</li>
<li>multiple services</li>
<li>multiple workers</li>
<li>create time slots by providing a combination of location, service and provider</li>
<li>create a dedicated calendar for a specific service</li>
<li>email notifications and related customization</li>
<li>responsive layout support for the appointment booking form</li>
<li>custom fields support to collect extra information</li>
<li>back-end reports for time table overview<br>
</li>
</ul><p>So as you can see, this plugin can be used for a variety of services, and it may turn into an effective booking system if you use it wisely.</p><p>In the next section, we’ll discuss a couple of core elements of this plugin that are important to understand in the first place should you wish to use this plugin effectively.</p><h2>Location, Services, Workers and Connections</h2><p>The Easy Appointments plugin is a different in a way compared to other booking plugins since it allows you to create time slots by associating them to a specific combination of location, service and worker.</p><p>Briefly speaking, it works like this:</p><ul>
<li>A user selects a location from the drop-down box.</li>
<li>When a user chooses a specific location, they'll see all the services available for that specific location.</li>
<li>Next, when a user selects a specific service, they'll get a list of all the workers available for that service and all possible time slots for the booking.</li>
<li>Finally, a user just has to fill in the required information and confirm the booking!</li>
</ul><p>Now, let’s quickly go through the each element.</p><h4>Locations</h4><p>Firstly, you need to add locations in your system at which you intend to provide your services. For example, if you want to restrict your services to certain cities, you need to add cities in the back-end. </p><h4>Services</h4><p>Once you’ve added locations, the next step is to add services as per your requirements. Of course, you can create different services for different locations.</p><h4>Workers</h4><p>Finally, after creating locations and services, it’s time to add workers who will be actually serving to customers as per bookings assigned to them.</p><h4>Connections</h4><p>A connection allows you to create time slots by combining a location, service and worker altogether. When you create a new connection, you also need to select days of the week and hours the connection is applicable to. Don’t worry if this sounds a bit confusing, it’ll make sense when we’ll build a real-world example in the next section.</p><h2>A Real-World Example of Using the Easy Appointments Plugin</h2><p>In this section, we’ll build a real-world example to demonstrate how you could use the Easy Appointments plugin. </p><p>Before we proceed, make sure that you’ve installed the Easy Appointments plugin in your WordPress site if you want to follow along. Once you install the Easy Appointments plugin, it will add plugin-related links to the left sidebar.</p><p>Let’s say we want to build an appointment system for a dental clinic in New York City. In this case, New York City is considered to be a location entity. Next, we’ll add a routine dental checkup as a service. And finally, we’ll add a couple of doctors who can be booked during weekdays.</p><h3>Add a Location</h3><p>Firstly, we need to add all locations. in our case, we’ll add New York City as our service location. Click on the <strong>Easy Appointments &gt; Settings &gt; Locations</strong> link, and it should take you to the location listing page.</p><p>Click on the <strong>Add New Location</strong> button and enter details related to New York City as shown in the following screenshot.</p><figure class="post_image"><img alt="Add a Location" src="https://cms-assets.tutsplus.com/uploads/users/413/posts/32908/image/get-started-with-a-free-booking-calendar-plugin-in-wordpress-locations.png"></figure><p>In our example, we’ve considered only New York City, but of course you could go ahead and add as many locations as you want.</p><h3>Add a Service</h3><p>Next, we need to add the services that we want to provide on our booking site. In our example, we’re going to provide the Routine Dental Check Up service.</p><p>Click on the <strong>Easy Appointments &gt; Settings &gt; Services</strong> link, and it should take you to the service listing page. Click on the <strong>Add New Service</strong> button and enter details related to our service as shown in the following screenshot.</p><figure class="post_image"><img alt="Add a Service" src="https://cms-assets.tutsplus.com/uploads/users/413/posts/32908/image/get-started-with-a-free-booking-calendar-plugin-in-wordpress-services.png"></figure><p>Fill in the <strong>Duration</strong> and <strong>Slot Step</strong> text boxes with 60 and save for now. The <strong>Duration</strong> field indicates the duration of an appointment for that service and the <strong>Slot step</strong> indicates the next available service start. We’ll get back to this later.</p><h3>Add a Worker</h3><p>Finally, we’ll need to add doctors that will be available for the check up. Click on the <strong>Easy Appointments &gt; Settings &gt; Workers</strong> link, and it should take you to the worker listing page. Click on the <strong>Add New Worker</strong> button and enter the details for a doctor as shown in the following screenshot.</p><figure class="post_image"><img alt="Add a Worker" src="https://cms-assets.tutsplus.com/uploads/users/413/posts/32908/image/get-started-with-a-free-booking-calendar-plugin-in-wordpress-workers.png"></figure><p>I’ll add a few more, you could also repeat the process to add more doctors.</p><h3>Create a Connection</h3><p>So far, we’ve added locations, services and doctors. Now, it’s time to tie them altogether and create a connection which can be used for booking.</p><p>Go ahead and click on the <strong>Easy Appointments &gt; Settings &gt; Connections</strong> link, and it should take you to the connection listing page. Click on the <strong>Add New Connection</strong> button to create a new connection as shown in the following screenshot.</p><figure class="post_image"><img alt="Create a Connection" src="https://cms-assets.tutsplus.com/uploads/users/413/posts/32908/image/get-started-with-a-free-booking-calendar-plugin-in-wordpress-connections.png"></figure><p>Select location, service and worker from the respected drop-downs in the first place that you want to tie together. I’ve selected the New York City in the <strong>Location</strong> dropdown, the Dental Routine Checkup service in the <strong>Service</strong> dropdown and the Dr. John Smith worker in the <strong>Worker</strong> dropdown box.</p><p>Next, select which days of a week this service is available. Along with that, you can select start time and end time for the service availability. Make sure to set<strong> Is Working</strong> field to <strong>Yes</strong> to make this connection active otherwise it won’t be displayed in the front-end. Once everything is filled, go ahead save the connection. In the next section, we’ll see how to display the booking calendar for the connection which we’ve just created.</p><h2>Integrate the Booking Calendar in Your Page</h2><p>Once you’ve created a connection, you need to use the short-code to display the booking form. You can insert the following code in your post or page to display the booking form.</p><pre class="brush: html noskimlinks noskimwords">[ea_bootstrap]</pre><p>And with that in place, you should see the booking form as shown in the following screenshot.</p><figure class="post_image"><img alt="Front-End View" src="https://cms-assets.tutsplus.com/uploads/users/413/posts/32908/image/get-started-with-a-free-booking-calendar-plugin-in-wordpress-front-end-view.png"></figure><p>As you can see, there’s a calendar displaying all available time slots for the connection which we created earlier. If you can recall, we selected a one hour time slot for the service, and thus users will be able to select from eight different time slots in each working day. You won’t be able to book in the weekend and those days will be greyed out.</p><p>Once a user selects a time slot, they'll be taken to the <strong>Booking Overview</strong> section. They can enter their details to confirm the booking.</p><p>On the back-end, you’ll be able to see all the bookings that were made for all connections. Also, email notifications are sent once the booking is made. If the booking is not available for any slot, it’ll be displayed as shown in the following screenshot.</p><figure class="post_image"><img alt="Booked Slots" src="https://cms-assets.tutsplus.com/uploads/users/413/posts/32908/image/get-started-with-a-free-booking-calendar-plugin-in-wordpress-booked-time-slots.png"></figure><p>As you can see, the booked slots are grayed out and won’t be clickable.</p><p>So that’s how you can set up an appointment booking system using this plugin. Additionally, additional plugins are available to extend the default functionality and integrate with services like PayPal, Twillio, iCalendar and Google Calendar.</p><p>If you use this extension wisely, it will allow you to build an amazing booking system.</p><h2>Conclusion</h2><p>Today, we discussed the Easy Appointments plugin which allows you to easily build an appointment booking system. In the first part, I explained the basic concepts of the plugin and later on we created a real-world example for demonstration purpose.</p><p>I would love to hear from you if you’ve come across other good calendar or booking plugins! Feel free to share your thoughts and feedback using the feed below.</p><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/32908/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32908/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32908/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32908/a2t.img" width="1" /></div>2019-03-18T13:03:31.000Z2019-03-18T13:03:31.000ZSajal Sonitag:code.tutsplus.com,2005:PostPresenter/cms-32897Best jQuery Lightbox Plugins to Make Your Page Pop<p>It helps a lot when you have vibrant images and videos to showcase your company's products and services. For example, in the case of a hotel, it is much more impactful for visitors to see images of different rooms, the pool and other services the hotel provides instead of just being greeted by a wall of text.</p><p>Giving visitors a lot of images to look is a good strategy to show how awesome your products or services are, but it can also be a little distracting. Individual images and other elements might not get as much attention as they deserve because they are competing with other vibrant elements scattered all over the webpage.</p><p>This is where lightboxes play an important role. They are a great way to focus the attention of your website
visitors on a particular image or element in a gallery or portfolio by making it pop up and dimming the rest of the webpage until the user decides otherwise.</p><p>The only problem is that there are thousands of lightbox plugins out there, and it can be hard to choose one that will serve you the best.</p><p>We can help with the decision! To make it easier for you to choose the best lightbox plugin to add to your website, we have created a list of the five best lightbox plugins for 2019. This post will cover all their features in depth so that you can make an informed decision about which one to use on your website.<br></p><h2>1.&nbsp;<a href="https://codecanyon.net/item/lc-lightbox-premium-jquery-plugin/21331213" rel="external" target="_blank">LC Lightbox</a></h2><p>The first plugin in our list is LC Lightbox. It has every feature that you would expect in a lightbox plugin and more.</p><figure class="post_image"><img alt="LC Lightbox" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32897/image/lc_lightbox_home.png"></figure><p>Here are some of its common features:</p><ul><li>You can create slideshows to traverse through all the images. The slideshow can be initialized either manually or automatically.</li><li>You can have a separate title, description and author associated with each image or element.</li><li>It comes with thumbnail navigation and the ability to share on social networks.</li></ul><p>Almost every lightbox plugin supports the features I listed above. What makes LC Lightbox unique and awesome are its additional features, like:</p><ul><li>The ability to mix multiple content types like images with videos from YouTube, Vimeo, Dailymotion and <code class="inline">iframe</code>s or other HTML elements.</li><li>It provides a direct download button that does not rely on server-side scripts. This is particularly helpful if you want visitors to be able to download any image file they like.</li><li>It supports mouse- as well as keyboard-based navigation.</li><li>The plugin has been developed with touch devices in mind. Users will be able to use swipe and pinch gestures when using this lightbox plugin on smartphones.</li></ul><p>As if those features were not enough, LC Lightbox has even more awesome game-changing features:</p><ul><li>You can give each item in the lightbox its own direct link. <br></li><li>Visitors can progressively zoom in on any image they like using either double-click or pinch gestures.</li><li>You can even integrate comments with all your elements using Facebook and Disqus!</li></ul><p>This was a long list of features, but believe me when I say that I have still left out some in order to keep the post brief. You can read about all the features of <a href="https://codecanyon.net/item/lc-lightbox-premium-jquery-plugin/21331213" rel="external" target="_blank">LC Lightbox</a> on its <a href="https://lcweb.it/lc-lightbox" rel="external" target="_blank">live preview page</a>.</p><p>Check it out&nbsp;and <a href="https://lcweb.it/lc-lightbox" target="_self">try the different configuration options</a> to see how good this plugin actually is.<br></p><h2>2.&nbsp;<a href="https://codecanyon.net/item/responsive-bootstrap-portfolio-and-lightbox/17286548" rel="external" target="_blank">Responsive Bootstrap Portfolio And Lightbox</a></h2><p>If you are running a website that is based on the Bootstrap framework, this plugin would be the best choice for integrating a lightbox.</p><figure class="post_image"><img alt="Bootstrap Portfolio and Lightbox" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32897/image/bootstrap_lightbox.png"></figure><p>It takes advantage of the functionality already built into Bootstrap to keep the plugin lightweight and feature-rich at the same time. It is fully compatible with Bootstrap 3 as well as Bootstrap 4.</p><p>Here are some of the features that make it the perfect choice for websites built on top of Bootstrap:</p><ul><li>The plugin allows you to lay out different elements like images and videos in a 2, 3, 4, 5 or 6-column grid system.</li><li>It takes advantage of the built-in carousel to implement one of its own. You can&nbsp;<a href="https://preview.codecanyon.net/item/responsive-bootstrap-portfolio-and-lightbox/full_screen_preview/17286548" rel="external" target="_blank">see it in action on the live preview page</a>.</li><li>Bootstrap's responsiveness is also present in this plugin. So the lightbox looks good on mobiles and tablets as well as desktops.</li></ul><p>Some other features that make this plugin amazing are:</p><ul><li>six different carousels for content ranging from images and videos to eCommerce and blog posts</li><li>ready-to-use examples with unique layouts to help you get up and running as quickly as possible<br></li><li>color schemes can be combined to make sure that the lightbox blends in perfectly with the rest of the website</li><li>embed videos either from YouTube or Vimeo, or self-host</li></ul><p>All the reviewers of <a href="https://codecanyon.net/item/responsive-bootstrap-portfolio-and-lightbox/17286548" rel="external" target="_blank">Responsive Bootstrap Portfolio and Lightbox</a> have given it 5 stars so far. Be sure to <a href="https://preview.codecanyon.net/item/responsive-bootstrap-portfolio-and-lightbox/full_screen_preview/17286548" rel="external" target="_blank">check out the demos</a> and see for yourself why this plugin has received such high ratings.<br></p><h2>3.&nbsp;<a href="https://codecanyon.net/item/jquery-thumbnail-gallery-with-lightbox/2711906" target="_self">JQuery Thumbnail Gallery With LightBox</a></h2><p>This plugin comes with a nice thumbnail gallery packaged with a lightbox. You can easily add images and videos of different aspect ratios and dimensions in your gallery, and the plugin will handle them very well.</p><figure class="post_image"><img alt="jQuery Lightbox" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32897/image/jquery_lightbox.png"></figure><p>Here are some of its features that you might like:</p><ul><li>The plugin is easy to set up. So you will have a fully functioning lightbox gallery in no time.</li><li>You can choose between a grid-based or a line-based layout for your images and videos.</li><li>Scrolling between different gallery items can be controlled either with simple scrolling or by using scroll buttons.</li><li>You can align the thumbnails that show up with the lightbox either horizontally or vertically.</li></ul><p>Here are some other features that improve the usability of this plugin:<br></p><ul><li>Keyboard-based navigation makes it very easy to navigate through all the elements when the changing size and aspect ratio of images and videos cause the lightbox navigation buttons to move around.</li><li>You also have access to different public methods and callbacks to toggle inner slideshows, act on events like thumbnail mouse over and mouse out, etc.</li></ul><p>When you <a href="https://preview.codecanyon.net/item/jquery-thumbnail-gallery-with-lightbox/full_screen_preview/2711906" rel="external" target="_blank">try out different demos</a>, you will probably notice that this plugin offers minimal styling of the gallery or lightbox. This can be a good thing if you want full control over the styling and make sure that nothing seems out of place.</p><h2>4.&nbsp;<a href="https://codecanyon.net/item/lightbox-boxaroo-adaptive-lightbox/6782557" target="_self">Boxaroo Adaptive Lightbox</a></h2><p>The Boxaroo Adaptive Lightbox plugin also offers a lot of features that make it an awesome lightbox plugin. If you want to add interesting animations and effects to your lightbox, this is the plugin you should be using.</p><figure class="post_image"><img alt="Boxaroo Lightbox" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32897/image/boxaroo_lightbox.png"></figure><p>Here is a short list of its useful features:</p><ul><li>Animations are hardware accelerated to take full advantage of the GPU and give you optimal performance.</li><li>The lightboxes you create can easily handle different types of content, ranging from Vimeo videos to interactive Flash games.</li><li>The plugin is fully responsive and has been designed in such a way that it scales perfectly according to the device.</li><li>The plugin gracefully steps down the performance and other features to keep the lightbox compatible with browsers as old as IE7.</li></ul><p>In addition, here are some features that make Boxaroo unique among all the plugins listed on this page:</p><ul><li>It comes with 70 different GraphicRiver items, collectively worth $287! This includes backgrounds and arrows to give Boxaroo a professional and unique look.</li><li>The plugin supports independent styling of elements like captions, animation, visibility, scaling, and position.</li><li>You can independently control the close, previous and next buttons for each lightbox.</li><li>You can create an interesting background for your lightbox using images, tiles, and animated colors.</li><li>You have full control over the shadows and highlights, including color, radius, etc.</li></ul><p>Just&nbsp;<a href="http://crusader12.com/C12Boxaroo2/" rel="external" target="_blank">take a look at the demos available on the plugin website</a>—you won't be disappointed.<br></p><h2>5.&nbsp;<a href="https://codecanyon.net/item/modulobox-nextgen-lightbox-javascript-plugin/20021839" rel="external" target="_blank">ModuloBox: NextGen Lightbox JavaScript Plugin</a></h2><p>ModuloBox is a responsive lightbox plugin that focuses on providing the best performance while at the same time giving you a lot of advanced functionality.</p><figure class="post_image"><img alt="ModuloBox NextGen Lightbox" src="https://cms-assets.tutsplus.com/uploads/users/1251/posts/32897/image/modulobox_lightbox.png"></figure><p>Here is a list of features that make this plugin awesome:<br></p><ul><li>Besides images, you can add videos, <code class="inline">iframe</code>s, or other HTML5 content.</li><li>It comes with gesture support like double-tap and pinching. Mobile visitors will feel right at home.</li><li>You can also navigate through the lightbox with a keyboard or mouse.</li><li>There is support for multiple galleries on the same page.</li><li>You can navigate through the gallery with the help of thumbnails. It also comes with a fullscreen mode for an immersive experience and a slideshow mode to automatically scroll through all the images.</li><li>The plugin also supports RTL layout, which will reverse the direction of all the animations and captions.<br></li></ul><p><a href="https://codecanyon.net/item/modulobox-nextgen-lightbox-javascript-plugin/20021839" rel="external" target="_blank">ModuloBox</a> has a lot more to offer, and you can read about all its features on the <a href="https://codecanyon.net/item/modulobox-nextgen-lightbox-javascript-plugin/20021839" rel="external" target="_blank">product page</a>.</p><h2>Conclusion</h2><p>Each of the lightbox plugins that we have listed on this page has unique strengths which make it perfect for a particular situation.&nbsp;</p><ul><li>If you want a plugin that comes with a huge feature set ranging from thumbnail navigation to comment integration, you should consider using <a href="https://codecanyon.net/item/lc-lightbox-premium-jquery-plugin/21331213" rel="external" target="_blank">LC Lightbox</a>.</li><li>If your website is based on the Bootstrap framework, using a plugin like <a href="https://codecanyon.net/item/responsive-bootstrap-portfolio-and-lightbox/17286548" rel="external" target="_blank">Responsive Bootstrap Portfolio and Lightbox</a> will help you take advantage of all the features of the framework.&nbsp;</li><li>People who are looking for something that is easy to customize will find the <a href="https://codecanyon.net/item/jquery-thumbnail-gallery-with-lightbox/2711906" rel="external" target="_blank">jQuery Thumbnail Gallery with Lightbox</a> plugin to be the right choice.</li><li>For those who want to have fancy animations and effects built into their lightbox, <a href="https://codecanyon.net/item/lightbox-boxaroo-adaptive-lightbox/6782557" rel="external" target="_blank">Boxaroo</a> would be perfect.&nbsp;</li><li>Finally, <a href="https://codecanyon.net/item/modulobox-nextgen-lightbox-javascript-plugin/20021839" rel="external" target="_blank">ModuloBox</a> will serve those people well who need RTL support in their lightbox.</li></ul><p>You can also take a look at some of the many other plugins offered on <a href="https://codecanyon.net/search/lightbox?utf8=%E2%9C%93" rel="external" target="_blank">Envato Market</a> if none of the plugins listed on this page seem to be the right fit for your project. Which lightbox plugin do you like the most? Let us know in the comments.<br></p><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/32897/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32897/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32897/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32897/a2t.img" width="1" /></div>2019-03-15T13:03:55.000Z2019-03-15T13:03:55.000ZMonty Shokeentag:code.tutsplus.com,2005:PostPresenter/cms-32745Add Payment Gateways to Your WooCommerce Store<p>WooCommerce is the world's most popular e-commerce platform, and it's only going to get more popular. It's free, it's built on WordPress, and you can customize and extend it with a wide range of plugins, including those provided by WooCommerce and on <a href="https://codecanyon.net/category/wordpress/ecommerce/woocommerce" target="_self">CodeCanyon</a>.</p><p>But without making it easy for shoppers to pay you, you won't sell a thing.</p><p>In this tutorial, I'll show you how to configure WooCommerce with two of the most popular payment gateways out there: PayPal and Square.</p><h2>What You'll Need</h2><ul>
<li>A site with an installation of WooCommerce, preferably a development site. It can't be on a local machine, though, or the payment gateways won't be able to interact with it.</li>
<li>An account with the payment gateway of your choice. If you don't already have one, I'll walk you through these in this tutorial.</li>
<li>Some products already set up in your WooCommerce store, that you can use to test the checkout process.</li>
</ul><h2>Which Gateway to Choose?</h2><p>The first question (unless you already have an account with one of the payment gateways) is which of them you're going to use. Here's a comparison of the big two, PayPal and Square.</p><h3>PayPal</h3><p>A PayPal business account lets you:</p><ul>
<li>operate under your company or business name</li>
<li>accept debit card, credit card, and bank account payments as well as payments from PayPal account holders</li>
<li>take payments for subscriptions with recurring payments</li>
<li>give up to 200 employees limited access to your account</li>
<li>use PayPal checkout to let people pay without leaving your website</li>
<li>use the sandbox option to test payments before making them live</li>
<li>take payments in 25 currencies from over 200 countries</li>
</ul><p>PayPal is probably the most familiar platform to most people. It's easy to set up, and you probably already have an account. It's designed for online commerce. And it's the only gateway that lets you add subscriptions.</p><h3>Square</h3><p>Square is mostly aimed at physical retailers, with various devices designed to take payments. But it also works for online transactions and has benefits if you run a bricks-and-mortar store as well as an e-commerce site. Here are some features:</p><ul>
<li>sync online and offline sales and stock control if you have a physical store</li>
<li>add products to WooCommerce and they'll be added to Square for offline payments</li>
<li>take credit and debit card payments</li>
<li>use the Square dashboard to see sales analytics</li>
<li>allow multiple employees limited access to your dashboard</li>
<li>only available to businesses based in the U.S., Canada, Australia, Japan, or the UK (but you can take payments from customers worldwide)</li>
</ul><p>If you have a physical store as well as a WooCommerce site, then Square will make your life much easier with inventory syncing and sales tracking. But if you don't plan to open a physical store, then PayPal has more features and is more familiar to customers.</p><p>Now let's move on to configuring each of the gateways.</p><h2>Configuring PayPal</h2><h3>Before You Start</h3><p>WooCommerce comes with PayPal already integrated; you don't need to install anything. But if you want to add extra integrations such as PayPal checkout, you'll find them on the <a href="https://woocommerce.com/woocommerce-and-paypal/" target="_self">WooCommerce</a> site. You'll also find more integrations on <a href="https://codecanyon.net/search/woo%20commerce%20paypal?utf8=%E2%9C%93" target="_self" title="Link: https://codecanyon.net/search/woo%20commerce%20paypal?utf8=✓">CodeCanyon</a>.</p><p>What you will need is an SSL certificate. This means your site will have https:// instead of http:// before the domain name, and is essential for security. WooCommerce with PayPal requires an SSL certificate, so if you don't have one, <a href="https://code.tutsplus.com/tutorials/using-lets-encrypt-ssl-with-your-wordpress-project--cms-22303" target="_self" title="Link: https://code.tutsplus.com/tutorials/using-lets-encrypt-ssl-with-your-wordpress-project--cms-22303">follow along with this tutorial on how to set one up for free with Let's Encrypt</a>.</p><p>And if you don't already have one, you'll need a PayPal account. Set one up on the <a href="https://www.paypal.com/uk/webapps/mpp/merchant" target="_self">PayPal website</a>, following their instructions as you go along. </p><h3>Configuring PayPal Settings</h3><p>To start configuring PayPal on your site, go to <strong>WooCommerce &gt; Settings</strong>, and select the <strong>Payments</strong> tab:</p><figure class="post_image"><img alt="WooCommerce payments screen" src="https://cms-assets.tutsplus.com/uploads/users/227/posts/32745/image/woocommerce%20payments%20settings%20-%20starting.jpg" title="Image: https://cms-assets.tutsplus.com/uploads/users/227/posts/32745/image/woocommerce payments settings - starting.jpg"></figure><p>To activate PayPal, click the <strong>Enabled</strong> slider, then the <strong>Set up</strong> button.</p><figure class="post_image"><img alt="The PayPal set up screen" src="https://cms-assets.tutsplus.com/uploads/users/227/posts/32745/image/paypal%20set%20up%20(1).jpg"></figure><p>Work through each of the settings in turn, adding or customising as you wish. Note that if you uncheck the <strong>Enable PayPal Standard</strong> option, you'll need to have a business account with PayPal Checkout configured. This makes checkout quicker as customers don't have to leave your site and go to the PayPal site.</p><p>While you're getting PayPal set up, check the <strong>Enable PayPal sandbox </strong>option. This lets you test transactions without actually sending any money. Logging is also useful while you're setting things up. Once your store is working as it should, uncheck both.</p><p>So that your site can interact with PayPal, you'll need to set up Instant Payment Notification, or IPN.</p><p>Go to your PayPal account and click on the settings icon at the top right. On the settings screen, select <strong>My selling preferences</strong> on the left.</p><p>Scroll down to <strong>Instant payment notifications</strong> and click the link.</p><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/227/posts/32745/image/paypal%20ipn.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/227/posts/32745/image/paypal ipn.png"></figure><p>You'll be presented with the IPN settings screen, where you input the URL where IPN will link to your site. The URL will be the following, replacing <code class="inline">example.com</code> with your own URL:</p><pre class="brush: plain noskimlinks noskimwords">http://example.com/?wc-api=WC_Gateway_Paypal</pre><p>Now click the <strong>Save Changes</strong> button and you're good to go. Test your payments out and once you're happy with the result, disable the sandbox option.</p><h2>Configuring Square</h2><p>If you choose to use Square instead of PayPal, you'll need to install the <a href="https://wordpress.org/plugins/woocommerce-square/" target="_self" title="Link: https://wordpress.org/plugins/woocommerce-square/">Square for WooCommerce plugin</a>.</p><p>Once you've done that, you'll be prompted on the plugins page to link your Square account to your website. You can either click the link in the plugins screen or go to <strong>WooCommerce &gt; Settings &gt; Integrations</strong>.</p><p>Click the <strong>Connect with Square</strong> button to be taken to Square. You'll be asked for a verification code from your authenticator app, which you'll have set up when you got yourself a Square account.</p><p>Next, you'll be prompted to authorize WooCommerce to read data from Square:</p><figure class="post_image"><img alt="woocommerce permissions for square" src="https://cms-assets.tutsplus.com/uploads/users/227/posts/32745/image/woocommerce%20square%20permissions.jpg" title="Image: https://cms-assets.tutsplus.com/uploads/users/227/posts/32745/image/woocommerce square permissions.jpg"></figure><p>Scroll down and click the <strong>Allow </strong>button. WooCommerce will present you with a screen confirming the site you just hooked up and a redirection button. Click it to go back to your site.</p><p>The next step is to set up your business location. This is necessary for Square to work. In the settings screen in WooCommerce, select your business location from the dropdown list. This will be taken from the locations you added when you signed up for Square.</p><p>Then scroll down and check or uncheck the boxes for categories, inventory, and more. Finally, click the <strong>Save changes</strong> button.</p><p>Now go back to the <strong>Payments</strong> tab and make sure you've got Square enabled. If you have both PayPal and Square enabled, this could be confusing, so I recommend just using one. Square will take credit card payments, while PayPal will take payments either by credit card or from a PayPal account.</p><figure class="post_image"><img alt="the woocommerce payments settings screen with square enabled and PayPal disabled" src="https://cms-assets.tutsplus.com/uploads/users/227/posts/32745/image/payments%20settings.jpg" title="Image: https://cms-assets.tutsplus.com/uploads/users/227/posts/32745/image/payments settings.jpg"></figure><p>Select the one you want, deselect the one you don't want, and click the <strong>Save changes</strong> button.</p><p>Now your site will link to Square for payments and inventory management.</p><h2>WooCommerce Is Now Ready to Take Payments</h2><p>Now that you've got either PayPal or Square configured to hook up to your WooCommerce store, you can take payments from customers without having to lift a finger. This will make it easier for people to buy from you and help you make more money from your store. Happy selling!</p><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/32745/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32745/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32745/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32745/a2t.img" width="1" /></div>2019-03-15T13:03:27.000Z2019-03-15T13:03:27.000ZRachel McCollintag:code.tutsplus.com,2005:PostPresenter/cms-32904Best Exit Popups for WordPress Compared<p>Exit popups are used to encourage your web page visitors to subscribe to an email list, follow you on social media, or complete the purchase in their shopping cart. I'll show you some outstanding popup plugins for WordPress in this post.<br></p><p><img alt="Exit popup examples" src="https://cms-assets.tutsplus.com/uploads/users/1885/posts/32904/image/popup.jpg"><br></p><h2>Does Your Site Need a WordPress Popup Plugin?</h2><p>Here are some of the top reasons for having a popup on your site.</p><h3>1. Grow Your Subscription List&nbsp;</h3><p>Popups can be good tools for collecting emails if used properly. You can utilize popups to get people to subscribe to your blog or site if you have a good offering.</p><h3><strong>2. Convert New Users to Customers</strong></h3><p>Almost everyone&nbsp;in today's&nbsp;digital age uses an email address, whether for getting the latest news on their popular celebrity blog, sports news, or the latest tips on fashion, beauty, and shopping. Having a large email list will get you closer to your prospective customer.</p><h3>3. Obtain a Larger Social Following</h3><p>While some people may not be willing to hand over their email addresses, you can still utilize popups to get people to follow you on social media. Once they follow you, it's easier to keep them engaged.&nbsp;</p><h3>4. Reduce Cart Abandonment<strong></strong></h3><p>Exit popups can also be used to reduce card abandonment in a situation where users are attempting to leave the site without completing a purchase. In this case, you can present a popup that gives them an enticing offer that might change their mind—for example, a discount code, free shipping, or a bonus item with every purchase.</p><h3>5. Obtain User Feedback</h3><p>Popups can also be used to better understand your customers by giving them the opportunity to tell you their views.</p><h2>Best WordPress Exit Popups on CodeCanyon</h2><p>You too can grow your subscribers and revenue by making use of CodeCanyon's collection of next-level popups. Let's get started.</p><h3>1.&nbsp;<a href="https://codecanyon.net/item/layered-popups-for-wordpress/5978263" rel="external">Layered Popups Plugin</a></h3><p>The first position in this category goes to&nbsp;<a href="https://codecanyon.net/item/layered-popups-for-wordpress/5978263">Layered Popups</a>, which is very flexible and easy to set up.&nbsp;</p><figure class="post_image"><img alt="Layered popups" src="https://cms-assets.tutsplus.com/uploads/users/1885/posts/32904/image/Layered%20popup.jpg"></figure><p>With over 200 templates to choose from and a free constructor for making your own popups in real time, you are only limited by your own imagination. This popup gives you the freedom to choose on which page you want your popups to appear. You can also have different&nbsp;templates for the same purpose. For example, you could create three different contact form designs and test out which converts the best.<br></p><p>The beauty of this plugin is that all the templates are stunning. If you don't have any design expertise, you can just choose any template and just plug it in. Another bonus is that all the templates are fully animated, hence no extraordinary design skills required for a great user experience.</p><p>Some of the most stunning features include:</p><ul><li><strong>Fully compatible</strong> with the latest version of WordPress.</li><li><strong>Mobile friendly</strong>:&nbsp;all popups are optimized to fit even the smallest of screens without distracting the user.</li><li><strong>Layered&nbsp;popups</strong> also support&nbsp;over 80 marketing systems, including AWeber, MailChimp, Sendy, and others. These also support&nbsp;most of the popular email verification services.</li><li><strong>Social share and subscribe</strong>:&nbsp;you also have the option of adding social sharing with Facebook and Google platforms to your popups.</li><li><strong>Built-in ad block detector</strong>.</li><li><strong>Multiple language support</strong>:&nbsp;plugins can also be translated&nbsp;into other languages.</li><li><strong>Remember subscribed visitors</strong>:&nbsp;set cookies on the user's machine to avoid repeated popups for already subscribed users.</li></ul><h2>2.&nbsp;<a href="https://codecanyon.net/item/popup-plugin-for-wordpress-convertplug/14058953?s_rank=2">ConvertPlus Popup Plugin</a></h2><figure class="post_image"><img alt="ConvertPlus popups" src="https://cms-assets.tutsplus.com/uploads/users/1885/posts/32904/image/Webp.net-compress-image(3).jpg"></figure><p><a href="https://codecanyon.net/item/popup-plugin-for-wordpress-convertplug/14058953?s_rank=2">ConvertPlus</a>&nbsp;comes second on our list. It's the perfect popup to turn users into customers. This popup has over 100 ready-made templates to choose from.&nbsp;</p><p>Some of the prominent features of this popup are:&nbsp; &nbsp;</p><ul><li><strong>Conversion analytics:</strong>&nbsp;this popup gives you the ability to view a real-time graphical analysis of how visitors are interacting with your popups in terms of clicks, unique views, and conversions. This report will help you make informed decisions.&nbsp;</li><li><strong></strong><strong>Integration with marketing tools:&nbsp;</strong>this plugin also gives you the ability to integrate with your marketing tools in just a few easy clicks.</li><li><strong>Designs and positions:</strong>&nbsp;this plugin comes with the ability to have your popups in different designs and positions.&nbsp;</li><li><strong>Multiple triggers:</strong>&nbsp;you can also trigger a popup on other conditions, for example when a user is inactive or when they scroll a certain percentage of a page.</li></ul><h2>3.&nbsp;<a href="https://codecanyon.net/item/slick-modal-css3-powered-popups/12335988?s_rank=3">Slick Modal Popups Plugins</a></h2><figure class="post_image"><img alt="Slick modal popups" src="https://cms-assets.tutsplus.com/uploads/users/1885/posts/32904/image/Slick%20modal.jpg"></figure><p><a href="https://codecanyon.net/item/slick-modal-css3-powered-popups/12335988" target="_self">Slick Modal Popups</a> will give you a customized popup for any event or occasion. Whether you just want to showcase your best image collection or show special announcements or notifications, Slick Modal Popups has got you covered.</p><p>Slick Modal is the best choice for an eCommerce store. It actually comes with a whole collection of more than 40 different plugins and 60 templates that are tailored to every occasion. It is also bundled with powerful CSS3 animations and various position options.</p><p>Other notable features include:</p><ul><li><strong>Spin wheel plugin</strong>:<strong>&nbsp;</strong>people love free stuff, and one of the coolest things about this collection is that you get a spin wheel template where users can win a gift voucher when they spin the wheel.</li><li><strong>Showcasing winning products or daily offers</strong>:&nbsp;Slick Modal has a product carousel plugin where you can showcase your daily deals to customers.</li><li><strong>Static banners</strong>:&nbsp;static banners are a way to display a small banner of your best product at the side of the page so your users can see it even if they scroll or go to another page.</li></ul><p>In conclusion, with Slick Popups, your eCommerce store will definitely stand out.</p><h2>4.&nbsp;<a href="https://codecanyon.net/item/masterpopups-multipurpose-popup-plugin-for-wordpress-with-easy-email-marketing-integration/20142807?s_rank=4">Master Popups</a></h2><figure class="post_image"><img alt="master popups" src="https://cms-assets.tutsplus.com/uploads/users/1885/posts/32904/image/image-3-.jpg"></figure><p>Last but not least,&nbsp;<a href="https://codecanyon.net/item/masterpopups-multipurpose-popup-plugin-for-wordpress-with-easy-email-marketing-integration/20142807?s_rank=4">Master Popups</a> is the ultimate email subscription plugin. It features out-of-the-box templates and an all-in-one plugin solution. You can be assured you are getting the best.</p><p>Master Popups also features a powerful popup editor and a collection of already-customized templates&nbsp;which allow you to build your own popups in minutes. It will also let you make media-rich popups like YouTube/Vimeo video popups.</p><p>Other outstanding components of this plugin are:</p><ul><li><strong>popup campaigns&nbsp;</strong></li><li><strong>integration with popular email marketing services</strong> like MailChimp, GetResponse, Mailer Lite, Constant Contact, SendinBlue, and Autopilot&nbsp;</li><li><strong>easy-to-create contact forms</strong></li><li><strong>fully responsive popups</strong> even on the smallest mobile devices</li><li><strong>cookies</strong> to remember already-subscribed users</li></ul><h2>A Word of Warning</h2><p>As much as popups can be a good way to increase sales and get more email subscriptions, it's also important to strike a balance with how many popups you have and be strategic about them. Users are likely to leave your site if you keep interrupting them with popups.</p><h2>Conclusion</h2><p>In this post, we saw some excellent WordPress plugins for creating exit popups. Of course, if you're an online marketer, you'd like your user to stick around the website a little longer. When they attempt to close the web page, you can use an exit popup to offer them&nbsp;a discount that makes them feel special, or invite them to subscribe to your mailing list.&nbsp;</p><p>There are many more <a href="https://codecanyon.net/category/wordpress?rating_min=4&amp;sort=sales#content" target="_self">WordPress plugins on CodeCanyon</a>. Take a look, and you're sure to find something to make your site sparkle!</p><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/32904/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32904/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32904/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32904/a2t.img" width="1" /></div>2019-03-14T22:20:44.180Z2019-03-14T22:20:44.180ZEsther Vaatitag:code.tutsplus.com,2005:PostPresenter/cms-32900How to Add a Calendar to Your WordPress Site With the Events Schedule Plugin<p>Are you organising a conference? Perhaps you’re involved with your local gym or community center, and want to start offering some classes? Or maybe you’re a business owner and need an easy way to post your opening hours to your website?</p><p>Whenever you need to share information about opening times and events, a schedule is the perfect solution, allowing you to communicate this information in a familiar calendar format.</p><p>There are plenty of plugins that can help you add a schedule to your WordPress website, but in this tutorial we’ll be focusing on <a href="https://codecanyon.net/item/events-schedule-wordpress-plugin/14907462" rel="external" target="_blank">Events Schedule</a>. I’ll show you how to build a schedule, populate it with classes, and then publish that schedule to your website, before exploring some of the plugin’s more advanced features. </p><p>By the end of this tutorial, you’ll know how to enhance your schedule with Google Maps content and “call to action” buttons, allowing your users to perform a range of tasks directly from your schedule, including emailing the event’s instructor and adding this event to their iCal calendar.</p><p>To wrap things up, I’ll show you how to use Events Schedule in combination with the popular WooCommerce plugin, to quickly and easily build an automated booking and ticketing system for all the events in your schedule.</p><h2>Download the Events Schedule WP Plugin</h2><p>You can purchase the Events Schedule WP plugin through CodeCanyon:</p><ul><li>If you’re not already registered, then <a href="https://account.envato.com/sign_up?_ga=2.83698198.1442588056.1551087560-1396005502.1545905640" rel="external" target="_blank">create a free Envato Market account</a>.</li><li>Head over to the <a href="https://codecanyon.net/" rel="external" target="_blank">CodeCanyon website</a>, click the little <strong>Sign In</strong> button in the upper-right corner, and enter your Envato account details when prompted.</li><li>Once you’re logged into your account, go to the <a href="https://codecanyon.net/item/events-schedule-wordpress-plugin/14907462" rel="external" target="_blank">Events Schedule WP Plugin listing</a>, click <strong>Buy Now</strong>, and then follow the onscreen instructions to complete the purchase.&nbsp;&nbsp;</li><li>When prompted, download your plugin.</li><li>Unzip your plugin—the resulting folder should contain several items, including a <strong>weekly-class.zip</strong> file, which you’ll need to upload to your WordPress account.</li></ul><h3>How to Add a Third-Party Plugin to WordPress</h3><p>Once you have your plugin, the next step is adding it to your WordPress account:</p><p>Log into WordPress, if you haven’t already. Select <strong>Plugins</strong> from the left-hand menu, followed by <strong>Add New</strong>. Then select the <strong>Upload Plugin</strong> button.</p><p>On the next screen, select <strong>Choose file</strong> and then upload the <strong>weekly-class.zip</strong> file. Select <strong>Install Now</strong>. This plugin should now be uploaded to your WordPress account. Once your plugin has been successfully uploaded, select <strong>Installed Plugins</strong> from WordPress’s left-hand menu. Find <strong>Events Schedule WP Plugin </strong>and select <strong>Activate</strong>.</p><p>After a few moments, the Events Schedule plugin will be ready for you to use.</p><h2>How Do I Create a Schedule?</h2><p>Once the Events Schedule plugin is active, a new <strong>Classes</strong> item will appear in WordPress’s left-hand menu. When building a schedule, you’ll typically use this new menu item to:</p><ul><li>Create all the class types, locations and instructors you want to use across your schedule.</li><li>Create all of your classes, and then assign the correct type, location and instructor to each class.</li><li>Build and style your schedule, and then add all of your classes to that schedule.</li><li>Grab the schedule’s shortcode and paste it into any of your WordPress posts, at which point the schedule will appear on your website.</li></ul><p>Let’s start by laying the groundwork and creating all the class types, locations and instructors that we’ll be using throughout this article.</p><h3>Creating New Class Types</h3><p>Your class types will vary depending on the kind of schedule you’re creating. For example, if you’re building the schedule for a gym or sports center, then you might create class types such as “Aerobics,” “Yoga,” and “Swimming.” However, if you were creating the schedule for a college, then your class types would be more likely to have names such as “Maths,” “English,” and “Science.”</p><p>To create a new class type, select <strong>Class Types </strong>from WordPress’s left-hand menu. This takes you to a new page, where you can enter the following information about each class type:</p><ul><li><strong>Name. </strong>This is the name of the class, such as “Box Fit,” “Kettle Bells,” or “Running.”</li><li><strong>Slug. </strong>This is the URL-friendly version of the class type. The slug should consist of lowercase characters and contain only letters, numbers, and hyphens.</li><li><strong>Parent. </strong>To help keep your schedule organised, you might want to create parent classes, and then assign your child classes to the relevant parent class. For example, you might create an “Aerobics” parent class, and then assign your gym’s running, aqua aerobics and swimming classes to that parent class. If you do want to create a parent class, then simply leave the <strong>Parent</strong> field blank. Alternatively, if you were creating a child class, then you’d assign it a parent by opening the <strong>Parent Class</strong> dropdown and then making your selection from the list.</li></ul><figure class="post_image"><img alt="Assign a parent class using the Parent class dropdown" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/codecanyon create new classes.png"></figure><ul><li><strong>Description.</strong> Here, you can add a description for this class type. This description will be displayed in a pop-up window that appears when the user selects this class type in your schedule.</li><li><strong>Color.</strong> To help visitors find the class that’s right for them, you may want to assign different colours to different class types. If you’re using a parent class, then the colour of each individual class type will override the colour of their parent class.</li></ul><p>Once you’re happy with the information you’ve entered, click <strong>Add New Class Type</strong>. Rinse and repeat for every class type that you want to create.</p><p>All of your class types will now appear in the <strong>Class Types</strong> section. If you need to make changes to a class type at any point, then just select <strong>Class Types</strong> from WordPress’s left-hand menu. All of your class types will be listed towards the right of the screen; select the class that you want to edit, make your changes, and then click <strong>Save</strong>.</p><h3>Adding Locations</h3><p>Your classes may take place in different locations—whether that’s different rooms, buildings, or even entirely different geographical locations.</p><p>If you want to display this information in your schedule, then you’ll need to create one or more locations:</p><p>First, select <strong>Locations</strong> from WordPress’s left-hand menu. In the <strong>Name</strong> field, give this location a descriptive name, such as "Conference Room 1," "Swimming Pool," or "Science Block." Use the <strong>Slug</strong> field to enter an optional, URL-friendly version of this location. If you don’t specify a custom URL, then the Event Schedule plugin will generate one automatically.</p><p>Next, you can add an optional <strong>Description</strong> to this location, which will be displayed in a pop-up whenever the user selects this location in your schedule. You could use this description to provide some parking information, driving directions, or even a quick note letting the reader know that your Yoga Studio is located on the third floor.&nbsp;</p><p>When you’re happy with the information you’ve entered, select <strong>Add New Location</strong>. Rinse and repeat for all the locations you want to use.</p><figure class="post_image"><img alt="Register one or more locations with your schedule" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/events schedule create locations.png"></figure><p>If you ever need to make some changes to an existing location, then just select <strong>Class Types</strong> from WordPress’s left-hand menu. Then select the location that you want to edit, and make your changes.</p><h3>Add an Instructor</h3><p>Next, you need to register all the instructors who’ll be leading your classes:</p><ul><li>Select <strong>Instructors</strong> from WordPress’s left-hand menu.</li><li>In the <strong>Name</strong> field, enter the instructor’s name.</li><li>Create a custom slug, if required.</li><li>In the <strong>Description</strong> section, enter any additional information you want to display when the user selects this instructor in your schedule, such as the instructor’s qualifications or their contact details.</li><li>When you’re happy with the information you’ve entered, click <strong>Add New Instructor</strong>.</li></ul><p>If you ever need to edit an instructor’s details, then just select <strong>Instructors</strong> from the left-hand menu, choose the instructor you want to edit, and then make the necessary changes.</p><h2>Create Some Classes</h2><p>You’re now ready to start populating your schedule with individual events.</p><p>To add a new class to your schedule, select <strong>Classes</strong> <strong>&gt;</strong> <strong>Add New</strong> from WordPress’s left-hand menu. Note that we’ll be spending the next few sections in this menu, so unless specified otherwise, assume we’re still on the <strong>Classes &gt; Add New</strong> screen.</p><figure class="post_image"><img alt="Create a new class by selecting Classes Add new from the WordPress dashboard" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/events schedule wp plugin add a class.png"></figure><p>You can now enter some or all of the following information:</p><h3>1. Give the Class a Name</h3><p>This one is fairly straightforward: give the class a title, which will be displayed in your schedule.</p><h3>2. Set the Date and Time</h3><p>Maybe your class lasts five minutes, perhaps it spans several days, or maybe it’s a recurring event. The Events Schedule plugin has all the settings you need to specify exactly when the event occurs and if it ever recurs. </p><p>First, use the <strong>Starting Date &amp; Time</strong> fields to specify when your class begins. If this event starts and finishes on the same day, then you can use the accompanying <strong>Duration slider</strong> to specify how long this class will last, ranging from 5 minutes to a maximum of 24 hours.</p><figure class="post_image"><img alt="Specify the class start and end time" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/creating a wordpress schedule.png"></figure><p>Alternatively, if this class spans several days, then you’ll need to select the <strong>This is a multi-day event</strong> checkbox. </p><p>Once this checkbox is selected, you can set an end date and time for your event. Just be aware that multi-day events aren’t compatible with <em>every</em> schedule style. If you do want to display multi-day events, then you’ll need to use one of the following styles: Plain List, Events Carousel Masonry Grid, Cover, or Countdown. We’ll be exploring different schedule styles later in this tutorial.<br></p><p>Finally, if your event is recurring then open the <strong>Repeat</strong> dropdown and select a frequency. You can choose from&nbsp;<strong>Daily</strong>, <strong>Weekly</strong>, <strong>Every Two Weeks</strong>, <strong>Monthly</strong>, <strong>Yearly</strong>, and&nbsp;<strong>Custom</strong>.</p><p>If you select <strong>Daily</strong>, then you’ll gain access to a series of <strong>Monday-Sunday</strong> checkboxes. If you opt for <strong>Custom </strong>then you’ll be able to choose the exact date(s) when this event will repeat, using the <strong>Add Date</strong> button. </p><p>When you create a repeating event, you’ll have the option to set a <strong>Last Repeat Date</strong>, which is the final date when this event will appear in your schedule. If you don’t specify a <strong>Last Repeat Date</strong>, then this event will keep repeating indefinitely.</p><figure class="post_image"><img alt="Create a repeating event using the Repeat dropdown menu" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/wordpress schedule create repeating event.png"></figure><h3>3. Assign a Type, Location, and Instructor</h3><p>Assuming you’ve already added every class type, location and instructor to your WordPress account, this step should be easy:</p><ul><li><strong>Assign a class type.</strong> Find the <strong>Class Types</strong> box and make sure the <strong>All Class Types</strong> tab is selected. In the subsequent list, select the class type that you want to use.</li><li><strong>Assign a location.</strong> Find the <strong>Location</strong> box and start typing your location into the accompanying textbox; when the correct location appears, select it.</li><li><strong>Assign an instructor. </strong>Find the <strong>Instructor </strong>box and start typing the instructor’s name into the accompanying textbox; when the correct instructor’s name appears, select it.&nbsp;&nbsp;</li></ul><h3>4. Optional: Set a Class Image</h3><p>Next, you can set an optional class image, which will be displayed alongside your class if you use any of the following schedule styles: Plain List, Monthly Calendar, Masonry Grid, or the Events Carousel.</p><p>To set a class image:</p><ul><li>Select the <strong>Upload Image</strong> button.</li><li>Choose the image that you want to use.</li><li>Select <strong>Insert Image</strong>.</li></ul><h3>5. Create a Call to Action</h3><p>A static schedule is a great way to communicate information to potential clients, but you can also use this plugin to create <em>interactive</em> schedules.</p><p>The Events Schedule plugin supports several “call to action” buttons, which encourage visitors to engage with your schedule—whether that’s requesting more information, reaching out to the event’s instructor, or reserving a place at an upcoming class.</p><figure class="post_image"><img alt="You can add a rang of CTA buttons to your schedule" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/schedule add call to action buttons.png"></figure><p>Out of the box, the Events Schedule plugin supports all of the following call to action buttons:</p><ul><li><strong>Go to page. </strong>This button launches a WordPress page. You could create a dedicated WordPress page for each of your classes, and then use a <strong>Go to page</strong> button to link visitors to the relevant webpage.</li><li><strong>Go to custom URL.</strong> Clicking this button launches a URL, which can be part of an external third-party website. You could use this call to action to link to the instructor’s personal website or LinkedIn page, where potential clients can learn more about the instructor’s qualifications.</li><li><strong>Email. </strong>This launches the user's default email client and creates a new email containing all the information about this particular class. This can provide potential attendees with an easy way to contact the class’s instructor, just in case they have any questions or they want to reserve a spot at an upcoming class.</li><li><strong>Download iCal Event.</strong> The last thing you want is for a potential client to show interest in a class, and then forget to attend! A <strong>Download iCal Event</strong> button can help keep your class at the forefront of the user’s mind by adding this event to their iCal calendar.</li></ul><p>Let’s add a call to action! First, scroll to the <strong>Class settings</strong> section and select the <strong>Action Button</strong> tab. Then, enter some text into the <strong>Button Label</strong> field.&nbsp;</p><p>Depending on the call to action you’re creating, this label might be something like <strong>Contact instructor</strong>, <strong>Add to my iCal</strong>, or <strong>Find out more</strong>. If you don’t specify a label, then this action button will <em>not</em> appear in your schedule.</p><figure class="post_image"><img alt="Use the Button Action section to specify the action that should be completed whenever this button is selected" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/event schedule wp create action button.png"></figure><p>You can now choose the <strong>Button Action</strong>, which will be performed whenever the user clicks this button. Choose from&nbsp;<strong>Go to page</strong>, <strong>Go to custom URL</strong>, <strong>Email</strong>, and&nbsp;<strong>Download iCal Event</strong>.</p><p>Note that call to action buttons will only be visible in the Plain List and Weekly Tabs schedule styles.</p><h3>6. Have More to Say? Add an Excerpt</h3><p>Sometimes you may need to provide a bit of extra information about a class. For example, maybe attendees need to bring their own yoga mat, or you want to include a disclaimer warning potential attendees that this is an intense class that requires a high level of physical fitness. </p><p>If you need to include some extra, miscellaneous information, then you can add an excerpt. Simply scroll to the bottom of the page and then type your text into the <strong>Excerpt</strong> box.<br></p><p>To make sure this excerpt will appear in your finished schedule, scroll to the top of the screen and open the <strong>Screen Options</strong> dropdown. Then, just make sure the <strong>Excerpt</strong> checkbox is selected.</p><h3>7. Adding Google Maps to Your WordPress Schedule</h3><p>We’ve already added some basic locations to our WordPress account, but you can also display a Google Map of each class’s exact location.</p><p>This map will be displayed in a pop-up that appears whenever the user selects this class within your schedule—assuming you’ve followed the instructions to enable pop-ups (by heading over to <strong>Schedule Builder</strong> and selecting <strong>Show description</strong>).</p><p>To add a Google Map to your class, select the <strong>Map Details</strong> tab and then enter some or all of the following information:</p><ul><li><strong>Map Latitude. </strong>The location’s latitude coordinates.</li><li><strong>Map Longitude.</strong> The location’s longitude coordinates.</li></ul><figure class="post_image"><img alt="Add optional Google Maps content to your class using the Map Details tab" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/adding google maps to wordpress.png"></figure><ul><li><strong>Map Type. </strong>Choose from <strong>Roadmap</strong>,<strong> Satellite</strong>,<strong> Hybrid</strong>,&nbsp;and&nbsp;<strong>Terrain styles</strong>. Roadmap is the default.</li><li><strong>Map Color Theme.</strong> Choose between <strong>Light</strong>, <strong>Dark</strong>,&nbsp;and<strong> Default</strong>.</li><li><strong>Map Zoom. </strong>Enter the map’s zoom level, ranging from 1 to 18. The default is 15.</li></ul><p>If you do decide to include Google Maps, then for the best results it’s recommended that you add a Google Maps API key to your WordPress account.<br></p><p>You can grab an API key, via the Google Cloud Console, by following these steps:</p><ul><li>Head over to the <a href="https://console.cloud.google.com/" rel="external" target="_blank">Google Cloud Console.</a> If this is your first time using the Console, then you may be prompted to create an account.</li><li>In the toolbar, open the dropdown menu and select <strong>New Project</strong>.</li><li>Give your project a name, and then click <strong>Create</strong>.</li><li>Click the lined icon in the upper-left and select <strong>APIs &amp; Services &gt; Credentials</strong>.</li><li>Select the <strong>Create credentials</strong> button and then select <strong>API Key</strong> from the subsequent dropdown menu.</li><li>The Google Cloud Console will now generate an API key; copy this to your clipboard.</li><li>Back in the WordPress dashboard, select <strong>Classes &gt; Settings</strong> from the left-hand menu.</li><li>Select the <strong>Google Maps</strong> tab.</li><li>Paste your API key into the <strong>Google Maps API</strong> field.</li><li>Click <strong>Save Settings</strong>.</li></ul><p>When it’s time to test your schedule, it’s possible the pop-up may appear without any Google Maps content. If this occurs, then double-check that you’ve entered the correct longitude and latitude values for your location, as incorrect coordinates can prevent Google Maps from being displayed correctly.</p><p>If the entire pop-up fails to appear, then check that pop-ups are enabled, by heading over to <strong>Schedule Builder</strong> and then selecting the <strong>Show description</strong> slider. Finally, just be aware that Events Schedule pop-ups will only appear when they have some additional content to display.</p><h3>... And Publish Your Class!</h3><p>Once you’re happy with the information you’ve entered, you can publish this class just like any other WordPress post: give the <strong>Publish</strong> button a click.</p><p>Once you’ve published at least one class, you’re ready to build your schedule.</p><h2>Building and Styling Your Schedule</h2><p>In this section, we’ll be creating and styling a schedule, and then adding all of our classes to that schedule.</p><ul><li>In WordPress’s left-hand menu, select <strong>Schedule Builder</strong>.</li><li>Select <strong>Add New</strong>.</li><li>Give your schedule a descriptive name.</li><li>Open the <strong>How many days to show?</strong> dropdown and choose how many days or weeks you want to include in this schedule.</li></ul><figure class="post_image"><img alt="Open the How many days dropdown and specify how many days should be included in your schedule" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/wp wordpress plugin schedule builder.png"></figure><h3>1. Choosing a Schedule Style</h3><p>The Events Schedule plugin includes 13 different schedule styles, so choose the style that’s the best fit for the information you want to display:</p><ul><li><strong>List styles. </strong>These are basic list styles which display varying levels of information. Choose from <strong>Plain List</strong>, <strong>Compact List</strong>, and&nbsp;<strong>Large List</strong>.</li><li><strong>Weekly Schedule. </strong>This is similar to a calendar, and is a good fit for schedules that feature a large number of repeating classes.</li><li><strong>Weekly Tabs. </strong>This divides your classes into tabs, where each tab represents a different day.</li><li><strong>Events Carousel.</strong> A graphical carousel display.</li><li><strong>Daily Agenda. </strong>A simple calendar view.</li><li><strong>Masonry Grid. </strong>A dynamic grid with images.</li><li><strong>Monthly Calendar. </strong>A monthly calendar view.</li><li><strong>Timeline.</strong> A simple vertical timeline display.</li><li><strong>Single event styles.</strong> Although less widely used, <strong>Cover</strong> and <strong>Countdown</strong> display a single event.</li></ul><h3>2. Adding Your Classes</h3><p>Next, scroll to <strong>Choose contents</strong> and select all the class types, locations and instructors you want to include in this schedule. </p><p>Only classes that have one or more of the selected <strong>Class Type</strong>, <strong>Location</strong> or <strong>Instructor </strong>values will appear in your published schedule.</p><h3>3. Consider Adding Some Filters</h3><p>If your schedule contains a large amount of information, then you may want to give visitors an easy way to filter this information.</p><p>To add a filter, scroll to the <strong>Available Filters</strong> section. This section contains the following tabs: </p><ul><li><strong>Class Types</strong></li><li><strong>Locations</strong></li><li><strong>Instructors</strong></li></ul><p>Each of these tabs contains all the individual items you’ve created within that category—for example, my <strong>Locations</strong> tab contains the following items: <strong>Cycling Studio</strong>, <strong>Floor 1</strong>, <strong>Main Room</strong>, <strong>Swimming Pool</strong>, and <strong>Yoga Studio</strong>.</p><figure class="post_image"><img alt="Spend some time exploring the following tabs Class Types Locations and Instructors" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/wp plugin add filters.png"></figure><p>Go through each tab and select all the items you want to include in your filters.<br></p><p>Once you’re happy with your selection, you'll need to enable the corresponding <strong>Show Filter…</strong> slider. Find the <strong>Filter Options</strong> section, and then enable one, some, or all of the following sliders:</p><ul><li><strong>Show Class Type Filter</strong></li><li><strong>Show Locations Filter</strong></li><li><strong>Show Instructors Filter</strong></li></ul><p>If you don’t enable the corresponding <strong>Show...</strong> slider, then the user will be unable to filter based on class type, location and/or instructors, even if you’ve selected all the checkboxes within that category.</p><p>While you’re here, you may also want to enable the <strong>Show Day of the Week Filter</strong> and the <strong>Show Time of the Day Filter</strong>.</p><p>You can customise where your filters appear onscreen, using the <strong>Filters Position</strong> section, and whether they appear as switches (<strong>Show Filters as Switches</strong>) or in an expanded format (<strong>Show Filters Expanded</strong>).</p><figure class="post_image"><img alt="Customise your filters including their positioning and whether they appear as switches or in an expanded format" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/filter your wordpress schedule.png"></figure><p>Next, scroll to the <strong>Labels</strong> section and specify the labels that should appear on each of your filters. For example, if you’ve enabled the class type filter, then you’ll have access to a <strong>Class Types Filter Label</strong> field, where you can enter the text that should appear alongside this filter.</p><h2>Add Your Schedule to Your Website</h2><p>Once you’re happy with the information you’ve entered, scroll to the top of the screen and click <strong>Save</strong>.</p><p>The next step is to embed this schedule in your WordPress website, which requires you to copy and paste a shortcode.&nbsp;</p><p>Hover your cursor over the schedule’s name and a line of shortcode should appear, with a simple structure similar to <code class="inline">[wcs-schedule id=1]</code>. When prompted, click <strong>Copy to clipboard</strong>. You can now paste this information to any location that supports shortcodes.</p><p><img alt="Hover over the schedules title to get access to its shortcode" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/add your schedule to wordpress.png"><br></p><p>Navigate to the WordPress page where you want to display your schedule. Select the three-dotted <strong>More options</strong> button and then select <strong>Edit as HTML</strong>. Paste your shortcode into the webpage, and save your changes. This schedule will now appear as part of your webpage.</p><figure class="post_image"><img alt="A simple schedule using the Weekly Tabs style" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/completed wordpress schedule.png"></figure><h3>Do You Need to Cancel an Event?</h3><p>Every event in your schedule is set to <strong>Live</strong> by default. However, there may be times when you need to cancel an event, for example if the instructor is going on holiday or maternity leave, or they just called in sick. </p><p>Rather than deleting an event from your schedule, you can change its status to <strong>Cancelled</strong> so that it appears greyed out, with a line through it.</p><figure class="post_image"><img alt="Cancelled events appear greyed-out with a line through it" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/cancelling events in wordpress.png"></figure><p>To cancel an event, just select <strong>Classes &gt; All Classes</strong> from WordPress’s left-hand menu. Then pick the class that you want to cancel, open the <strong>Status</strong> dropdown, and select <strong>Cancelled</strong>.</p><p>Alternatively, if this is a repeating event, then you can cancel it for a specific day, without cancelling every instance of that event. Open the <strong>Status</strong> dropdown and select <strong>Cancelled Dates</strong>. In the subsequent field, enter the date when this event is cancelled.</p><p>If you need to cancel multiple instances of this event, then click <strong>Add Date</strong> and enter another date. Rinse and repeat, as many times as required.</p><h2>Creating an Automated Booking and Payment System</h2><p>At this point, you’ve built a schedule and perhaps added a few “call to action” buttons, such as emailing the class’s instructor or adding an event to iCal. Although a potential client <em>could</em> reserve their place over email, if you’re going to accept bookings then it’s often easier to implement an automated booking and ticketing system.</p><p>In this final section, I’ll show you how to create and sell virtual tickets for each of your events, and even how to accept payments directly from your schedule.</p><p>There are a number of ticketing plugins available, but Events Schedule is designed to integrate with the popular <a href="https://woocommerce.com/" rel="external" target="_blank">WooCommerce plugin</a>, so I’ll be using WooCommerce throughout this final section.</p><h4>Installing WooCommerce</h4><p>If you don’t already have WooCommerce installed, then:</p><ul><li>Select <strong>Plugins </strong>from WordPress’s left-hand menu, followed by <strong>Add New</strong>.</li><li>Search for <strong>WooCommerce</strong>.</li><li>When you spot the plugin, click <strong>Install</strong>.</li><li>Select <strong>Activate</strong>.</li><li>When prompted, launch the setup wizard and then follow the onscreen instructions to set up a payment method.&nbsp;&nbsp;</li></ul><p>Once WooCommerce is up and running, you’re ready to create some tickets and start accepting payments.</p><h3>Create Tickets for Your Class</h3><p>The first step is creating a product, which will represent the tickets for a specific event or class.&nbsp;</p><p>In WordPress’s left-hand menu, select <strong>Products</strong> followed by <strong>Add New</strong>. Give this product a descriptive name, such as “Swimming Tickets” or “Aerobics Reservations.” Scroll down to the <strong>Product Data</strong> section, open its accompanying dropdown, and then select <strong>Schedule Ticket</strong>. You can now choose between providing a <strong>Virtual Ticket</strong> or a <strong>Downloadable</strong> ticket. To keep things straightforward, I’m going to select <strong>Virtual Ticket</strong>.&nbsp;</p><p>Now click the <strong>General</strong> tab. Enter the <strong>Regular price</strong> for each ticket. Also, in order for Schedule Ticket to work correctly, you’ll need to set it to be&nbsp;<strong>Hidden</strong> from the catalog. Scroll up to the <strong>Publish</strong> section, find <strong>Catalog visibility</strong>, and then give its accompanying <strong>Edit</strong> link a click. Select <strong>Hidden</strong>, followed by <strong>OK</strong>.</p><figure class="post_image"><img alt="Dont forget to set your products Catalog visibility to Hidden" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/adding payment to wordpress with woocommerce.png"></figure><p>Finally, select <strong>Publish</strong>.</p><p>Repeat this for every ticket that you want to offer. Depending on your pricing structure, you might create separate tickets for each event, or you could create categories of ticket, such as full-price daytime tickets and half-price evening tickets.</p><h3>Assign Your Tickets to a Class</h3><p>After creating your tickets, you need to assign them to the corresponding class:</p><p>Select <strong>Classes</strong> from WordPress’s left-hand menu and select the class that you want to assign some tickets to. Scroll down to the <strong>Class Settings</strong> section, which should contain a new <strong>WooCommerce tickets</strong> tab. Select this tab, and then, in the <strong>Capacity</strong> field, enter the total number of tickets that are available for this class. In <strong>Button label</strong>, enter the text that should be displayed alongside your ticketing button, for example <strong>Book Now</strong> or <strong>Reserve your place</strong>.&nbsp;</p><p>In <strong>Sold Out Label</strong>, type the text that should appear when there are no more tickets available. If you leave this field empty, then the <strong>Sold Out</strong> button will not appear once all available tickets have been purchased.&nbsp;</p><p>In <strong>WooCommerce Event Ticket</strong>, open the dropdown menu and select the tickets that you created in the previous step. Once you’re happy with the information you’ve entered, click <strong>Update</strong>.</p><p>Now, when you check your schedule, you should see that a ticketing button has appeared alongside your class. Give this button a click and you’ll be taken to a screen where you can purchase a ticket to this event.</p><figure class="post_image"><img alt="WooCommerce integration lets you quickly and easily add purchasing functionality to your website" src="https://cms-assets.tutsplus.com/uploads/users/369/posts/32900/image/create ticketed events with woocommerce.jpg"></figure><p>You can keep track of all your bookings by selecting <strong>Classes &gt; Bookings</strong> from WordPress’s left-hand menu. This screen contains information about each class, including that class’s current occupancy and total capacity, plus the name, email address, and telephone number of each person who’s purchased a ticket to this class.<br></p><p>Note that only classes that have at least one booking will appear on this page, so don’t panic if this screen is currently blank!</p><h2>Conclusion</h2><p>In this post, I showed you how to build a schedule for your WordPress site, complete with call to action buttons, Google Maps integration, and a complete ticketing and payment system.</p><p>If you’re interested in building your own interactive schedule, then you can grab the <a href="https://codecanyon.net/item/events-schedule-wordpress-plugin/14907462" rel="external" target="_blank">Events Schedule WP Plugin</a> from CodeCanyon, or you can check out the <a href="http://curlythemes.com/support/docs/events-schedule-wp-plugin/" rel="external" target="_blank">plugin’s documentation</a> for more information.</p><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/32900/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32900/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32900/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32900/a2t.img" width="1" /></div>2019-03-14T21:22:55.691Z2019-03-14T21:22:55.691ZJessica Thornsbytag:code.tutsplus.com,2005:PostPresenter/cms-32913Create Websites Fast With the Elements Plugin for WordPress<p><a href="https://elements.envato.com/" rel="external" target="_blank">Envato Elements</a>, as you may already know, is a massive repository of creative digital assets. By subscribing to it, you gain access—with unlimited downloads and commercial rights—to over a million premium themes, templates, plugins, and other handy items that facilitate website development.<br></p><p>In an attempt to make this repository more accessible to WordPress users, Envato has developed an elegant new&nbsp;WordPress plugin for it. The&nbsp;<a href="https://envato.com/elements/template-kits/" rel="external" target="_blank" title="Link: https://envato.com/elements/template-kits/">Elements WordPress plugin</a>&nbsp;currently offers scores of template kits, which together contain over a thousand well-designed templates you can use while creating a WordPress site. Because it's designed to work seamlessly with popular WordPress page builders such as <a href="https://wordpress.org/plugins/elementor/" rel="external" target="_blank" title="Link: https://wordpress.org/plugins/elementor/">Elementor</a> and Beaver Builder, you won't have to write a single line of code while using it.</p><p>In this tutorial, I'll show you how you can use the Elements plugin, along with the Elementor page builder plugin, to quickly create WordPress sites.</p><h2><span class="sectionnum">1.</span> Installing the Elements Plugin</h2><p>Start by logging in to your WordPress instance's admin dashboard and selecting <strong>Plugins &gt; Add New</strong>. In the search field of the page that opens, type in "Envato Elements" to find the <strong>Envato Elements - Template Kits</strong>&nbsp;plugin. The plugin's still in beta, but it's very stable and already has over 40,000 active installations.</p><figure class="post_image"><img alt="Search results for Envato Elements" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 18.37.13.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 18.37.13.png"></figure><p>Press the <strong>Install Now</strong>&nbsp;button shown in the plugin's card to begin the installation. Once the installation is complete, press the <strong>Activate</strong>&nbsp;button so you can start using the plugin.</p><h2><span class="sectionnum">2.</span> Installing the Elementor Plugin</h2><p>To make the most of the Envato Elements plugin, you'll need a WordPress page builder that supports drag-and-drop operations. Elementor is one such plugin. Both its free and paid versions are compatible with the Elements plugin. For this tutorial, the free version of the plugin will suffice.</p><p>Type "Elementor" into the same search field to find the card for the <strong>Elementor Page Builder</strong>&nbsp;plugin.</p><figure class="post_image"><img alt="Search results for Elementor" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-07 at 11.06.14.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-07 at 11.06.14.png"></figure><p>Then press the <strong>Install Now</strong>&nbsp;button shown inside it to start the installation. After the installation completes successfully, don't forget to press the <strong>Activate</strong>&nbsp;button.</p><h2><span class="sectionnum">3.</span> Importing a Template</h2><p>To start using the Elements plugin, switch to the newly added <strong>Elements</strong>&nbsp;tab on your dashboard. The first time you open this tab, you'll have to provide your email address and agree to Envato's terms of use.</p><figure class="post_image"><img alt="Envato Elements welcome screen" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 20.11.42.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 20.11.42.png"></figure><p>After you do so, you can press the <strong>Continue</strong>&nbsp;button to go to the home page of the plugin, where you can browse through all the template kits available.</p><p>All the templates of an Envato Elements template kit tend to have a common theme, and each one of them can usually serve as an individual page of your website. Some template kits even offer multiple designs for the same page. For instance, the <strong>Day Spa</strong>&nbsp;template kit offers two templates for the home page of your website.</p><figure class="post_image"><img alt="Day Spa template kit" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 20.28.21.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 20.28.21.png"></figure><p>Note that some of the templates have a <strong>Pro</strong>&nbsp;tag on them. If you want to use them, you'll have to upgrade to Elementor Pro.</p><p>When you click on a template, you get to take a closer look at it. You'll also be able to see what kind of pages it's meant for.</p><figure class="post_image"><img alt="Day Spa Home page template" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 21.39.09.jpg" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 21.39.09.jpg"></figure><p>To start using a template, you can either create a draft page from it or import it so it's available in the Elementor interface. For now, I suggest you import it by pressing the <strong>Import Template</strong>&nbsp;button.</p><p>Once the import is complete, you will find the template in the <strong>Templates &gt; Saved Templates</strong>&nbsp;page of your WordPress admin panel.</p><figure class="post_image"><img alt="List of saved templates" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 22.42.18.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 22.42.18.png"></figure><h2><span class="sectionnum">4.</span> Using the Template</h2><p>Now that you have a template, you can use it to create a page for your WordPress site. So go to the dashboard of your WordPress admin panel and press the <strong>Create New Page</strong>&nbsp;button in the <strong>Elementor Overview</strong>&nbsp;section. Once you do so, Elementor will generate a new page for you, assign a random number to it, and display an intuitive WYSIWYG interface that allows you to edit it.</p><figure class="post_image"><img alt="Elementor page editing interface" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 22.53.59.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 22.53.59.png"></figure><p>As you can see in the screenshot above, the page has a drop zone with three buttons: one to add a section, one to add a template, and one to add an Envato Elements block. Because we want to create this page using a saved template, click on the second button, the one with the folder icon.</p><p>In the dialog that pops up, switch to the <strong>My Templates</strong>&nbsp;tab and click on the <strong>Insert</strong>&nbsp;button shown beside your saved template.</p><p>When asked if you want to import the document settings of the template, select <strong>Yes</strong>.</p><p>You will then have to wait for a few seconds for the template to transform your blank page into a professional-looking, almost ready-to-use page.</p><figure class="post_image"><img alt="Template applied to page" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 23.21.27.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 23.21.27.png"></figure><p>Once you regain control over the page, the only thing you need to do is replace all the placeholder text and images it has with those that are relevant to your business. You can click on the text once to edit it in a powerful text editor shown on the left-hand side, or twice to edit it inline.</p><figure class="post_image"><img alt="Elementor text editor" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 23.29.44.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 23.29.44.png"></figure><p>If you want to remove an element from the page, you'll have to right click on it and press the <strong>Delete</strong>&nbsp;button. Furthermore, you can delete the entire section it belongs to by clicking on the <strong>Delete Section</strong>&nbsp;button.</p><p>After you've customized the page to match your requirements, go ahead and hit the <strong>Publish</strong>&nbsp;button to make it available on your WordPress site.</p><figure class="post_image"><img alt="Published WordPress page" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 23.47.53.jpg" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 23.47.53.jpg"></figure><p>Elementor, by default, assigns a random number-based permalink to the page. To give it a more meaningful URL, exit the Elementor interface by clicking on the <strong>Exit to Dashboard</strong>&nbsp;button. Then click on the <strong>Permalink</strong>&nbsp;dropdown, type in the URL you prefer, and press the <strong>Update</strong>&nbsp;button.</p><figure class="post_image"><img alt="Changing the permalink" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 23.52.39.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-08 at 23.52.39.png"></figure><h2><span class="sectionnum">5.</span> Using Blocks<br></h2><p>If you want fine-grained control over the layout and looks of your page, using blocks instead of templates is a good idea. While a template represents a complete page, a block only represents an independent part of a page.</p><p>The Envato Elements plugin for WordPress offers hundreds of hand-crafted blocks. It has basic blocks, such as hero units, headers, footers, and maps. It also has more complex blocks, such as pricing menus, FAQ sections, image galleries, and sliders.</p><p>To create a new page using blocks, click on the <strong>Create New Page</strong>&nbsp;button in the dashboard again. Next, in the Elementor interface, open the <strong>Settings</strong>&nbsp;tab and change the <strong>Page Layout</strong>&nbsp;option to <strong>Elementor Canvas</strong>. You must do this to create a perfectly blank page, one without any default header, footer, or sidebar that may be a part of your WordPress theme.</p><p><img alt="Blank page in the Elementor page editing interface" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-09 at 01.11.22.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-09 at 01.11.22.png"><br></p><p>To add your first block, click on the Envato icon present inside the drop zone. In the dialog that pops up, you'll be able to see all the blocks that the Envato Elements plugin offers.</p><figure class="post_image"><img alt="Dialog showing all available blocks" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/blocks2.jpg" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/blocks2.jpg"></figure><p>For the sake of an example, let's add a hero unit to the page. So select any block of type <strong>Hero</strong>&nbsp;and press the <strong>Insert Block</strong>&nbsp;button.</p><figure class="post_image"><img alt="Insert block dialog" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-09 at 01.19.17.jpg" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-09 at 01.19.17.jpg"></figure><p>Once the block is available on the page, editing its contents is no different than editing the contents of a template. All you need to do is click on the item you want to edit and make the changes either inline or using the text editor.</p><figure class="post_image"><img alt="Editing the hero unit" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-09 at 02.30.11.jpg" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-09 at 02.30.11.jpg"></figure><p>A page is usually made up of several blocks. Therefore, after you're satisfied with the contents of your first block, you can move on to adding another block to the same page. So scroll down the page until you find the next drop zone and click on the Envato icon it contains.<br></p><p>This time, let's add a block that displays a list of frequently asked questions. To view only this type of block, select the <strong>FAQ</strong>&nbsp;option in the <strong>Browse by Type</strong>&nbsp;field. Then choose any block that blends in well with your hero unit and insert it.</p><p>You'll notice that the editor to edit the contents of this block is slightly different. That's because you're now working with a list of items. With this editor, adding more list items and removing or reordering existing ones is extremely easy.</p><figure class="post_image"><img alt="List editor interface" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-09 at 02.41.28.png" title="Image: https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-09 at 02.41.28.png"></figure><p>To edit a question or its answer, you just click on the associated list item. As soon as you do so, you'll see the familiar text editor appear again.</p><figure class="post_image"><img alt="Text editor available inside the list editor" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-09 at 02.43.01.png"></figure><p>At any point, you can click on the <strong>Preview Changes</strong>&nbsp;button to see what the page looks like. Furthermore, if you wish to see what the page looks like on a phone or tablet screen, you can press <strong>Control/Command-Shift-M</strong>. All the blocks and templates offered by the Envato Elements plugin are responsive and look great on all screen sizes.<br></p><figure class="post_image"><img alt="Mobile view of Elementor" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/Screen Shot 2019-03-09 at 03.06.45.png"></figure><p>Once you've finished editing your second block, you can scroll down again to find the next drop zone and add another block, say of type&nbsp;<strong>Footer</strong>. Here's a sample footer block:</p><figure class="post_image"><img alt="Sample footer block" src="https://cms-assets.tutsplus.com/uploads/users/362/posts/32913/image/footer1.png"></figure><p>Finally, when you think the page is complete, you can hit the <strong>Publish</strong>&nbsp;button to publish it on your WordPress site.<br></p><h2>Conclusion<br></h2><p>You now know how to use the Envato Elements plugin and the Elementor page builder to quickly and effortlessly create attractive WordPress sites. In this tutorial, you worked with some of the most important features offered by both plugins.<br></p><p>The Envato Elements plugin is rapidly evolving. This means that, in addition to template kits, it's soon going to start offering lots of stock photos and other creative assets too. Make sure you update it regularly so you always have access to all its latest features.<br></p><p>To learn more about the Elements plugin, you can refer to its <a href="https://plugins.trac.wordpress.org/browser/envato-elements/" rel="external" target="_blank">source code</a>&nbsp;or visit its <a href="https://wordpress.org/support/plugin/envato-elements/" rel="external" target="_blank">support forum</a>.&nbsp;</p><p>There are many thousands of graphics, templates, videos, plugins and more to choose from at&nbsp;<a href="https://elements.envato.com/">Envato Elements</a>. Best of all,&nbsp;you can download as many as you like for one low monthly price! With the Elements plugin, it's easy to use these items in your WordPress site.<br></p><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/32913/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32913/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32913/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/32913/a2t.img" width="1" /></div>2019-03-13T22:24:56.839Z2019-03-13T22:24:56.839ZAshraff Hathibelagaltag:code.tutsplus.com,2005:PostPresenter/cms-254129 Android Templates to Inspire Your Next Project<p>App templates are a great way to jumpstart your next project or to learn from other people's work. This article lists a few popular Android templates available on Envato Market. If you are looking for inspiration or you're building an Android app and need help with a particular feature, then you may find your answer in some of these templates. All of these templates come with full source code so you can customize the apps however you want.<br></p><h2>1.&nbsp;<a href="https://codecanyon.net/item/restaurant-finder-with-backend-android-full-app/13754849" target="_self">Restaurant Finder</a><br></h2><p>If you want to build an app that will help users find restaurants nearby, look no further. The Restaurant Finder Android template is rich with functional features to help you build an interactive, easy-to-use app.&nbsp;</p><figure class="post_image"><img alt="Restaurant Finder App Template" src="https://cms-assets.tutsplus.com/uploads/users/769/posts/32871/image/restaurant%20finder.jpg"></figure><p>Since it’s a location-based app template, users can—by default—see restaurants that are nearby. They can search for restaurants by zip code and by food type, read reviews, as well as book a table via email or text message. They can also share on social media. In addition, users can register, create and edit their own profiles, add their favorite restaurants, and write reviews. A map feature is included in the template to help users find directions to restaurants. They can also zoom in and out to display all locational pins.&nbsp;</p><p>The back-end features a PHP admin panel for storing restaurant and user profiles. It’s also equipped with an analytics dashboard that shows metrics about the restaurants and users of the app. The administrator can add, delete, edit restaurants, create food categories, update and delete special offers. In addition, the administrator can delete users who are spamming or writing abusive comments.</p><p>Finally, you can monetize your app by using AdMob, which is included in this template.&nbsp;</p><h2>2.&nbsp;<a href="https://codecanyon.net/item/your-radio-app/13706746" target="_self">Your Radio App</a></h2><p>If you've ever wanted to know how to stream audio in an Android application, then this template is worth checking out. The application is focused on streaming audio from online radio stations. The template includes a feature-packed Android application as well as a back-end for managing the radio stations users can listen to.</p><figure class="post_image"><img alt="Your Radio App" src="https://cms-assets.tutsplus.com/uploads/users/41/posts/25412/image/figure-radio.jpg"></figure><p>The template is compatible with both Android Studio and Eclipse, and it relies on&nbsp;<a href="https://parse.com/" target="_self">Parse</a>&nbsp;for push notifications. It also includes&nbsp;<a href="https://www.google.be/admob/" target="_self">AdMob</a>&nbsp;for ad management. The application supports a wide range of stream formats and has a beautiful, modern user interface. If you're not convinced yet, then&nbsp;<a href="https://play.google.com/store/apps/details?id=com.solodroid.yourradioappdemo" target="_self">download the application</a>&nbsp;from Google Play to try it out.</p><h2>3. <a href="https://codecanyon.net/item/universal-full-multipurpose-android-app/6512720" rel="external" target="_blank">Universal</a></h2><p>Universal is a beautiful, minimal, multi-purpose Android app template. You can create just about anything with it. And you can do it fast! Universal is a WebView app that lets you convert a website into an Android app.&nbsp;This app template has been around for a long time and is packed with features: a customizable native navigation menu, share buttons, geolocation, push notifications, and more!</p><p>Whether you're looking to build a simple app or an app packed full of features, this is a stellar template to get you started.</p><figure class="post_image"><img alt="Universal - Full Multi-Purpose Android App" src="https://cms-assets.tutsplus.com/uploads/users/1225/posts/31734/image/Universal%20-%20Full%20Multi-Purpose%20Android%20App.jpg"></figure><p>Build your app, your way. Some of the features include:</p><ul><li>in-app purchases and AdMob advertising</li><li>push notifications</li><li>media player</li><li>localization</li><li>and more</li></ul><p>The template UI features parallax animations and content-focused design. Best of all, the built-in configuration tool is so powerful that you don't need to write any code.</p><p>If you need to convert your WordPress website, YouTube channel, WooCommerce site, or other web site into a mobile app, it's hard to recommend anything else—<a href="https://codecanyon.net/item/universal-full-multipurpose-android-app/6512720" rel="external" target="_blank">Universal</a>&nbsp;deserves serious consideration.</p><h2>4.&nbsp;<a href="https://codecanyon.net/item/cookbook-recipe-app-for-android/10747654" rel="external" target="_blank">Cookbook Recipe App</a></h2><p>You'll find plenty of inspiration with the Cookbook Recipe App.</p><p>If you're interested in building a cookbook app, this is perfect. But even if you have something else in mind, there's plenty here to draw inspiration from.</p><figure class="post_image"><img alt="Cookbook - Recipe App" src="https://cms-assets.tutsplus.com/uploads/users/1225/posts/31734/image/Cookbook%20-%20Recipe%20App.jpg"></figure><p>This template features:</p><ul><li>a sweet material design</li><li>flavorful search</li><li>delectable recipe details</li><li>a yummy shopping list feature</li><li>a crunchy kitchen timer</li><li>and so many more delicious features</li></ul><p>AdMob and Google Analytics are supported, and the code is clean. If you hunger for some fresh inspiration, consider the&nbsp;<a href="https://codecanyon.net/item/cookbook-recipe-app-for-android/10747654" rel="external" target="_blank">Cookbook Recipe App</a>.</p><h2>5.&nbsp;<a href="https://codecanyon.net/item/android-taxi-booking-complete-solution/12469117" target="_self">Taxi Booking App</a></h2><p>I already mentioned that many traditional businesses are making the jump to mobile, and this includes taxi companies. There's a reason why&nbsp;<a href="https://www.uber.com/" target="_self">Uber</a>&nbsp;and&nbsp;<a href="https://www.lyft.com/" target="_self">Lyft</a>&nbsp;are so popular—mobile apps are simply more convenient for customers.&nbsp;</p><p>This Android template is quite impressive. It contains a feature-rich Android app as well as a powerful back-end, making a complete solution. The app includes an interactive map with vehicle information and tracking, voice recognition, and support for push notifications.</p><figure class="post_image"><img alt="Taxi Booking App" src="https://cms-assets.tutsplus.com/uploads/users/41/posts/25412/image/figure-taxi.jpg"></figure><p>The template offers a solution for both users and drivers. Users can order a ride with the mobile application, and drivers receive a notification when someone requests a ride. Even if you don't plan to build a taxi booking application, there's a lot you can learn from browsing the ins and outs of this template.</p><h2>6.&nbsp;<a href="https://codecanyon.net/item/the-city-place-app-with-backend-50/15831327" target="_self">The City</a></h2><p>You want to create an app that will guide visitors to interesting places in your city. The City app template is the best choice. It’s a tourism or city guide app. This all-native app lets users discover interesting places on a city map. The app UI follows material design specs and even has animations.&nbsp;</p><p><img alt="The City" src="https://cms-assets.tutsplus.com/uploads/users/769/posts/25412/image/screenshot_01.jpg"><br></p><p>Data is stored locally on the user's phone, so the app is fast and responsive and can work in offline mode. There is also an integrated admin back-end, so you can update the location data from anywhere on the fly. Then, with GCM notification, you can send those updates out to your users so they always have the latest version.</p><h2>7.&nbsp;<a href="https://codecanyon.net/item/android-material-ui-template-21/13971332" target="_self">Android Material UI Template</a>&nbsp;</h2><p>Sometimes it's really helpful just to have a reference template to work from—some examples of a good UI design that you can copy and paste and modify. That's where&nbsp;<a href="https://codecanyon.net/item/android-material-ui-template-21/13971332" target="_self">Android Material UI Template</a>&nbsp;comes in.</p><figure class="post_image"><img alt="Android Material UI Template" src="https://cms-assets.tutsplus.com/uploads/users/769/posts/25412/image/screenshot_08.jpg"></figure><p>This popular template contains many examples of material design app layouts. These pixel-perfect layouts make it easy for you to create your own beautiful material design app.</p><p>This template app can be used on Android Studio. It has very clean and neat code. It supports multiple screens. Its well-positioned and spaced layout makes it look beautiful, with animated transitions during initiation and transition of activity. &nbsp;</p><p>Lastly, the greatest advantage of using this template: You get to focus on the functionality, and let the template author do the grunt work of UI design and layout for you!</p><h2>8.&nbsp;<a href="https://codecanyon.net/item/android-news-app/10771397?s_rank=1" target="_self">Android News App</a>&nbsp; &nbsp;&nbsp;</h2><figure class="post_image"><img alt="" src="https://cms-assets.tutsplus.com/uploads/users/1997/posts/32871/image/Android%20news%20app.jpg"></figure><p>It’s 2019. People want genuine news. Grassroots platforms have seen that local news is missing from the big picture, and they want to address the imbalance. Different sections of society that have been invisible for so long want to tell their own stories to the world. They want to build their own news systems.&nbsp;</p><p>Here's the good news. You can save your money and time by creating your own native mobile news app using&nbsp;<a href="https://codecanyon.net/item/android-news-app/10771397?s_rank=2" target="_self">Android News App</a>, a mobile news system which runs on the Android platform. It's developed with clean native Java code to make the app run fast and smoothly. As you would expect, AdMob is integrated into the app for monetization. And you can manage all content—news, categories, push notifications—on this app through a beautifully organized, user-friendly&nbsp;<strong>Admin Panel</strong>.&nbsp;</p><p>Regarding Android News App, the user&nbsp;<a href="https://codecanyon.net/user/yoyoapps">yoyoapps</a>&nbsp;has this to say:&nbsp;</p><blockquote><p>I will give a 5 star rating for very very good, clean and high-quality code. Android News App is the ultimate news app on the present CodeCanyon store.&nbsp;</p></blockquote><h2>9.&nbsp;<a href="https://codecanyon.net/item/universal-android-webview-app/8431507?s_rank=3" rel="external" target="_blank">Universal Android WebView App</a>&nbsp;</h2><p>Universal WebView App&nbsp;is a native&nbsp;Android application&nbsp;which uses a web view component for displaying content. With this template you can turn your responsive website into a&nbsp;universal mobile app. It is quick, easy and affordable, and it does not require programming skills. The code is easily configurable and customizable. And there is just one config file to set up everything!</p><figure class="post_image"><img alt="Universal Android WebView App Template" src="https://cms-assets.tutsplus.com/uploads/users/769/posts/32871/image/webview%2002.jpg"></figure><p>Universal WebView App is also compatible with WordPress or any other web framework. It supports HTML5, CSS3, JavaScript, jQuery, Bootstrap, and other web technologies.<br></p><p>Create your own app in less than 15 minutes without any special knowledge! It’s easier than you think.<br></p><h2>More?<br></h2><p><a href="https://codecanyon.net/category/mobile/android" target="_self">Envato Market</a>&nbsp;contains hundreds of mobile application templates to get you started with your next project. These templates are great for learning, to see how fellow developers have implemented a particular feature. They're also great if you're looking for a jumpstart on your next app project. Check out more&nbsp;<a href="https://codecanyon.net/category/mobile/android" target="_self">Android app templates on&nbsp;Envato Market</a>.</p><div class="mediafed_ad"><img border="0" height="1" src="http://audio.tutsplus.com.feedsportal.com/c/35227/f/668806/s/25412/sc/4/mf.gif" width="1" /><a href="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/25412/a2.htm"><img border="0" src="http://da.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/25412/a2.img" /></a><img border="0" height="1" src="http://pi.feedsportal.com/r/186529796139/u/407/f/668806/c/35227/s/25412/a2t.img" width="1" /></div>2019-03-13T22:21:35.383Z2019-03-13T22:21:35.383ZLorca Lokassa Sa