When it comes to eCommerce, the design of your site plays a crucial role. It can make or break your website—leading to sales either falling flat or converting profitably.

Even though you are probably eager to get your new site up and running as quickly as possible, it’s important to first make sure you pick the right eCommerce platform and best site theme to work with.

Shopify is a leading eCommerce website solution and we have a number of beautiful, feature-rich themes to work with. Whether you need a theme for your own online store, or to use for your next client website project, we have you covered.

Shopify eCommerce Theme Features

Aside from blending in with your brand, your online store should have a few important features that will make your website stand out and delight your visitors. When shopping for a Shopify eCommerce theme make sure they have the following features:

• modern, clean and easily customizable
• cross-browser compatibility, responsive design, and SEO-friendly
  
• customer support, quality coding, and great reviews
• built-in custom settings panel which will allow you to modify the template to your own liking
• optional: support Shopify Sections (for easy drag and drop layouts)

With a quality Shopify theme in hand, you’re starting your online store with a great eCommerce design solution. All you need is to set it up, add your branding, custom product information, and start optimizing for online sales.

Best Shopify Themes

In this post, we’ve updated our list of the 20+ best Shopify themes on Envato Market from the last year, all of which are sure to make your website stand out and help you drive eCommerce sales. 

New additions are added regularly, and outdated or discontinued themes are removed from the list. If you have any suggestions or recommendations please leave your thoughts in the comments!

1. Wokiee - Multipurpose Shopify Theme

Wokiee is one of the best Shopify themes you could find if versatility is what you’re looking for! Its latest update included 16 new skins and loads of blocks to help you build the eCommerce layout you want. Check out the sophisticated atmosphere created by its wallet skin:

..and then compare that to the fun screaming out from its New York burger joint skin:

Hard to believe you’re looking at the same Shopify theme, right?! Take a look at the demo for even more skins, including one for Craft beer, a comic store, a coffee shop, a bike store, and many others!

2. Basel - Responsive eCommerce Shopify Theme

Basel, recently updated to version 3.0, is a multipurpose Shopify theme, offering a classic-looking storefront for many types of ecommerce businesses including fashion, electronics, and (as you can see from the screenshot) food and drink.

Customization options allow you to customize the color scheme and use the Drag & Drop page builder, as well as upload your own logo if you choose. And Basel is compatible with the Nitro Apps range, including Product Bundle, Product Lookbook, Fontify, Stockify, Cartify, and Nitro Live Coupon.

3. Shella - Ultimate Shopify theme

Shella is all about performance, and whilst performance is impacted by what you, the user upload to alter on your online store, this Shopify theme gives you a great head start. It includes features such as advanced filters, a banner builder, and a MegaMenu builder and regularly sees new skins added when it’s updated.

4. Ella - Responsive Shopify Template (Sections Ready)

Ella updates extremely regularly, allowing you to pass on the updates to your client (or just take advantage of them yourself). With monthly additions to the collection of skins, you’ll have try hard to stick with your original choice! The latest update included PETICA Store Demo, which you can see below.

Ella supports Shopify sections, which allow you to drag and drop blocks of content within your design.

5. Gecko - Responsive Shopify Theme

Gecko is a responsive Shopify theme with a range of subtly different homepages and layouts. It’s clear and inviting, and takes advantage of all Shopify’s selling features.

Gecko comes with a powerful theme options panel, an array of shortcodes, product bundles, and even integration with Instagram. Recently updated, Gecko also gives you access to discounted use of Ryviu, the popular product reviews platform.

6. Fastor - Multipurpose Shopify Sections Theme

Under the moniker of Fastor v4 this multipurpose theme has seen plenty of updates since the original version. It’s now faster, with less complexity, and has seen support for Shopify features (like Shopify Sections) added too. Choose from a multitude of skins (82 in total!) including a huge number of recently added examples, such as the fashion demo seen below. The team behind Fastor have also released improved documentation with video walkthroughs and tutorials.

7. Jasper - Sectioned Drag&Drop Shopify Theme

Jasper uses six essential layouts, combined with full-width or boxed variants, along with all the options available through Shopify Sections, to build a varied selection of theme possibilities. Its product page options are particularly interesting, and it comes with a range of widgets like product quick view, mailing list popups, a currency switcher, and scrolling reveals to add some motion to the overall design.

8. Banita - Shopify Theme

Banita is a multiconcept Shopify theme which will serve all kinds of eCommerce projects well (check out the item page to see examples of online stores which use this template in the wild). Strong, and full of youthful zing, your shop will demand attention when it’s wearing one of Banita’s ten pre-built homepage layouts.

9. Boutique - Responsive Shopify Theme

Boutique has attitude, cold hard style, and a touch of raw finesse. Although pitched as a fashion store, its clean lines could be turned to a wide array of store types. Check out the demo for a better idea of how it could suit your eCommerce project.

10. iOne - Drag & Drop Minimal Responsive Shopify Theme

Pastel colors and sharp edges are the name of the game for iOne. Its twelve demos show off the clean aesthetic perfectly, giving you off-the-shelf solutions and providing inspiration for your own customizations. The theme boasts a number of unique built-in features such as an instant list/grid change, AJAX paging and toolbar, sticky menu, alternative images, lazy loading, product zoom, off-canvas menu, and plenty more.

11. Foodly – One-Stop Shopify Grocery Shop

Voted best Health & Beauty Shopify Theme by Envato Staff, Foodly appeals to customers looking for quality and clarity. Its homepage puts buyers in control–user experience having been forefront in the design process.

Clean and feature-packed, Foodly is a Shopify theme which shouts “dinner’s ready”. Some of its culinary-specific features include the recipe articles and its “Nutrition Value Section”. Bon appétit, baby.

12. Simolux - Responsive Shopify Theme

Simolux is a modern highstreet fashion store, online. Whilst packed with useful features you’d expect from any Shopify store, along with warm, feminine visuals, Simolux’s popularity actually stems from the documentation and customer service provided by its maker, gredThemes.

13. Material - Responsive Shopify Theme

Material is a multi-purpose, responsive eCommerce theme suitable for any type of online store. It features a mega-menu, which is an advanced filter module that allows your customers to sort products according to size, color, or price.

This Shopify theme also includes multiple widgets, built-in customization options, a gorgeous lookbook, and many more features. It should be noted that Material also allows you to add video in the slider and includes social sharing features.

14. Everything | Multipurpose Responsive Sectioned Shopify Themes Bundle

If you’re looking for a truly versatile theme, look no further than Everything. With 50 different designs, this theme is suitable for any type of eCommerce site—from a kid's fashion store to a luxury watch store to a high-tech store.

It features a responsive design, advanced product filter, mega-menu, multiple slideshows with different effects, rich snippet support, customization options, and much more. With a feature set like that, Everything is a great starting point for any eCommerce website you're planning to launch.

15. Hosoren - Responsive Shopify Theme (Sections Ready)

Hosoren is a clean, elegant eCommerce template specially designed for professional online shops. The theme features a beautiful image slider, two product styles and four portfolio styles, unlimited color options, as well as the option to showcase multimedia content to go along with it.

It is retina ready, fully responsive and mobile-optimized to ensure that your website will look stunning and work smoothly across all modern devices—give your users an amazing viewing experience while they shop.

16. Puro - Responsive Shopify Theme (Sections Ready)

With a minimalist design, Puro is a theme that will display your store in an elegant way across all devices and screen sizes. This theme is sure to give your store a luxurious and attractive feel.

The theme’s features include advanced filtering, mega-menus, slideshows, responsive quick view popup, wishlist pages, Google Maps, newsletter integration and much more.

17. Logancee – Responsive Ecommerce Shopify Template

Logancee is the perfect combination of a clean, modern design with plenty of features. The theme comes with fifteen unique homepage designs, unlimited header styles, unlimited color schemes, a responsive design, integration with Google Fonts, social media sharing buttons, product variants, and more. It is also SEO optimized, which is another benefit to consider when choosing an eCommerce theme.

18. AP Next Store - Shopify Responsive Theme

AP Next Store is a theme packed with features. With the ability to install the demo content in one click, you can get your website up and running in a matter of minutes, before you dive into customization options. The theme is fully responsive and features six different layout options and shortcodes for adding buttons, YouTube, Facebook, product lists, sliders, and more to your pages.

It also comes with numerous customization options, wishlist pages, quick view popups, Google Maps integration, social media integration, and so much more. AP Next Store is definitely a theme that will satisfy anyone who wants plenty of control over the layout and design of their website.

19. Home Market - Flexible Shopify Theme (Sections Ready)

Home Market is a great choice for any eCommerce website that has a large inventory. The theme’s main focus is to make it quick and easy to browse through all the categories and products your store has to offer.

Features include a responsive design, unlimited color options, flexible layouts, integration with Google Fonts and Font Awesome, a light-box login module, mega-menus, sidebar filtering, and more.

20. Everest - Multipurpose Responsive Shopify Theme

Everest is a multi-purpose responsive Shopify theme with eight different homepage layouts and SEO optimized code. The design is perfect for any site from a high-end jewelry stores to fashion and accessory stores. The theme offers plenty of customization options via the advanced admin panel and the built-in slider is designed to put your products in the spotlight.

On top of having features like mega-menus, quick view, zoom, newsletter popup, related products, and cross-sell sliders, Everest also comes with custom labels, best-sellers, and a parallax effect widget to add an extra custom touch to your website.

21. Handy - Handmade Shop Shopify Theme

Well, I know I said 20, but here are a couple of bonus Shopify themes for you! Handy is a stylish, responsive, and easy to use Shopify theme. It’s a great choice if you are looking to start a shop selling handmade products.

The theme comes with plenty of features, like an out of the box layout configurator that allows you to set custom layouts, mega-menu, an EU privacy cookie, video slideshow, live search, wishlist, MailChimp integration, social networking, and more.

Thanks to the admin panel you can customize all the colors as well as change the fonts throughout the theme. Get your shop online with this beautiful Shopify theme.

22. Peacock - Multipurpose Responsive Shopify Theme

Peacock is a multi-purpose, responsive Shopify theme suitable for any niche. The theme includes features such as SEO optimization, auto-complete suggestions search, recently viewed products history, advanced product filters, and a shipping rates calculator.

It also comes with a preloading screen, wishlist, FAQ, testimonials, and review pages, as well as MailChimp integration, slideshows, color variations, and more. Display your products online with this attractive Shopify theme.

23. Belle - Multipurpose Shopify Theme

With over a thousand sales to date, and a rating of almost 5 stars, the Belle Shopify theme by elite author adornthemes is worth taking a look. Its latest version (2.5) includes four new Christmas theme layouts, in time for the festive season.

4 Best Practices for eCommerce Websites

Choosing the right theme for your eCommerce website is only the first step on your journey. If you want to make the most of your online store, here are four tips to help you optimize your website and make sure your online store is off to a great start.

1. Use the Power of SEO - Within your site there are a number of improvements you can make that will increase your search engine visibility, making it easier for people to find you. Those improvements include adding a blog to your online store which answers your buyer’s potential questions, writing clear and informative product descriptions, adding alternative text to your product images, using short and descriptive URLs, and making sure your website loads quickly.
2. Include Strong Copy - Make sure you have a clear and compelling call to action on your homepage, and that your copy clearly states what your brand and store is about, as well as showcase product reviews and testimonials. And describe your eCommerce products so they sell.
3. Help Buyers Find What They Want - Include your top categories in the main navigation and ensure that the search box is clearly visible. Be sure to add related products on single product pages
4. Reduce Shopping Cart Abandonment - There is nothing worse than a customer who backs out of a purchase right before check out. In order to reduce cart abandonment, make sure all your prices are clearly stated up-front, and consider offering free shipping over a certain cart value. Another great option is to offer a satisfaction guarantee and Shopify’s automatic cart recovery as well as adding a Live Chat option to your site.

Launch Your eCommerce Site With a Great Shopify Theme

Running an online store is an exciting business venture. However, it shouldn’t be taken lightly as a number of things can go wrong if you start off on the wrong foot.

Your site design is a crucial element to your eCommerce success and should be done right the first time. Take a look through our best eCommerce Shopify themes to start your online store with an effective design.

More Shopify Resources on Tuts+

• Shopify
  How to Create an Online Store With Shopify
  Adi Purdila
• Shopify
  17 Best Shopify Templates for Your Online Store
  Paula Borowska

In this Sketch app tutorial you will learn how to create a money management mobile UI design. Take a look at the final design to see what we’ll be working towards. Feel free to download the source files too.

What We’ll Learn

For starters, you will learn how to set up a custom artboard and how to simplify your workflow using rulers, guides, and smart guides. All these little features will help you work quicker (whilst having more fun) throughout this Sketch app tutorial.

Next, using simple shapes and paths, you will learn how to create the main sections of the Sketch UI design. Moving on, you will learn how to stylize these shapes and paths and how to create three line icons. Finally, you learn how to create the text content and add it to your mobile app design.

UI Sketch Kits on Envato Elements

For more inspiration on how to adjust or improve your final Sketch UI design you can download literally thousands of resources with your single Envato Elements subscription.

With all that said, let’s jump into the tutorial!

1. How to Set Up the Artboard

Open Sketch. Go to Insert > Artboard from the toolbar or menu (or press A). The Inspector will reveal a list of presets, but we’ll create a custom size artbaord. Click & drag inside your canvas to create a new artboard.

Make sure that your artboard stays active and focus on the Inspector to the right. Numerically set the Width to 828 and the Height to 1792. Once you’re done, hit Escape to deselect your artboard.

Step 2

Go to View › Canvas › Show Rulers (or press Control-R) to activate the Rulers. Right click on your rulers and go to Show All Guides as we’re about to add some new guides.

Focus on the vertical rulers and move your cursor inside it. Use a simple click to add a horizontal guide at 94 px. Guides can be moved and repositioned by clicking-and-dragging the guide inside the rulers. Keep focusing on the vertical rulers and use the same technique to add a second guide at 244 px and a third one at 274 px. Now that everything is prepared, you can start the work on this mobile app design.

2. How to Add the Top Bar to Your Sketch UI Design

Step 1

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Focus on your artboard, create an 282 x 150 px shape and place it as shown in the following image. Use the horizontal guides to perfectly align your rectangle.

Make sure that it stays selected and go to the Inspector panel. Focus on the Style section and uncheck the Borders checkbox to disable the border applied to your rectangle.

Step 2

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 40 x 8 px shape, make sure that it stays selected and go to the Inspector panel

First, use the X and Y input fields to numerically position your shape. Set the X position to 55 and the Y position to 149. Drag the Radius slider to 4 and then move to the Style section. Disable the Border and then set the Fill color to #5E72EF.

Step 3

Select the rounded rectangle made in the previous step. Hold the Shift and the Option keys, click your selection and simply drag to create a copy. Drag the copy 8 px below the original shape as shown in the first image. The smart guides will help you with this. Repeat this technique and add a third rounded rectangle as shown in the second image.

Step 4

Select the grey rectangle, focus on the Style section from the Inspector panel and change the Fill color to white (#ffffff).

3. How to Add the Horizontal Scrolling Menu to Your Mobile UI Design

Step 1

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create an 180 x 72 px shape and place it exactly as shown in the following image. The smart guide will let you know when your selection is vertically centered to the artboard. Make sure that this new shape stays selected and focus on the Inspector panel.

Set the Radius to 10, disable the border and set the Fill color to #5E72EF.

Step 2

Select the shape made in the previous step and add a copy in the same place (Command-C > Command-Shift-V). Hold the Shift key, drag the copy to the left and leave a 20 px gap between the shapes.

Make sure that the copy added in this step is still selected, focus on the Styles section from the Inspector panel and lower the Opacity to 5%.

Step 3

Select the transparent rounded rectangle made in the previous step. Add a copy, drag it to the left and leave a 20 px gap between the copy and the original shape, as shown in the first image.

Add a new copy, drag it to the right and leave a 20 px gap between the copy and right edge of the blue rounded rectangle, as shown in the second image. Add one last copy, drag it to the right and leave a 20 px gap between the copy and the left shape, as shown in the third image.

4. How to Add the Chart to Your Sketch UI Design

Step 1

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create an 828 x 86 px shape and place it as shown in the following image. Make sure that it stays selected and focus on the Style section from the Inspector panel. Disable the Border and set the Fill color to #FFB800.

Step 2

Make sure that your yellow rectangle is still selected and go to Arrange > Make Grid. Enter the attributes shown in the following image and then click the Make Grid button. This will add six copies of your yellow rectangle in a perfect column without spacing between them.

Focus on the bottom left corner of the bottom yellow rectangle. Go to the vertical rulers and add a new guide at 1008.

Step 3

Select the top yellow rectangle and focus on the Style section from the Inspector panel. Change the Fill color to #5E72EF and lower the Opacity to 3%.

Step 4

Move down to the next yellow rectangle and select it. Focus on the Style section from the Inspector panel and change the Fill color to white.

Step 5

Re-select the top rectangle and hit Option-Command-C to copy the style attributes of your selection. Select the two rectangle highlighted in the second image and hit Option-Command-V to paste the style attributes.

Step 6

Select the remaining yellow rectangles, focus on the Style section from the Inspector panel and change the Fill color to white.

Step 7

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create an 138 x 516 px shape and place it as shown in the following image. Make sure that this new rectangle stays selected and go to Arrange > Make Grid. Enter the attributes shown in the following image and then click the Make Grid button.

Step 8

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 14 x 167 px shape, make sure that it stays selected and focus on the Inspector panel. Set the Radius to 7 and move to the Style section. Disable the Border and change the Fill color to #5E72EF.

Step 9

Select the shape made in the previous step and place it as shown in the first image. Use the smart guides to vertically center your selection to the leftmost grey rectangle, as shown below.

Duplicate this thin rounded rectangle (Command-C > Command -V). Select the copy, increase its height to about 234 px and center it to the next grey rectangle, as shown in the second image.

Add another copy of your thin rounded rectangle (Command-C > Command -V). Select it and increase the height to about 405 px. Change the Fill color to white and center your selection to the third grey rectangle, as shown in the third image.

Continue and add a thin rounded rectangle for each of the remaining grey rounded rectangles, as shown in the fourth image. Don’t forget to perfectly center these shapes.

Step 10

Select the third grey rectangle and use the bottom handle to stretch your shape to 602 px, as shown in the first image. Make sure that it stays selected and move to the Inspector panel. Set the Radius to 15 and change the Fill color to #5E72EF.

Step 11

Make sure that the rounded rectangle edited in the previous step is still selected and focus on the Style section from the Inspector panel.

Click the Shadows button to add subtle shadow for your shape. Change the color to #5E72EF and lower the Alpha to 20, enter 0 in the X box and 10 in the Y box, and then set the Blur to 20 and the Spread to 5. In the end, things should look like in the following image.

Step 12

Select all your grey rectangles and focus on the Style section from the Inspector panel.

Disable the Fill and enable the Border. Change the border color to #5E72EF and lower the Alpha to 10, make sure that the border is aligned to center and set the Width to 2.

Step 13

Keep focusing on the set of stroked rectangles edited in the previous step.

Select the leftmost rectangle and go to Layer > Path > Scissors. Use simple clicks to remove the top and bottom sides of your selected shape. By default, the remaining two paths are grouped. Simply click Ungroup button from the Toolbar to Ungroup those two paths.

5. How to Add the Stats Buttons to Your Mobile UI Design

Step 1

Focus on the vertical rulers and add a new guide at 1068.

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 618 x 136 px shape and place it as shown in the following image. Make sure that it’s center and then focus on the Inspector panel. Set the Radius to 15, disable the border and change the Fill color to #5E72EF.

Step 2

Add a copy of your rounded rectangle (Command-C > Command-V), align it with the original shape and leave a 30 px gap between these two shapes.

Add a second copy of this shape (Command-C > Command-V), align it with the original shapes and leave a 30 px gap between this new copy and the first copy.

Step 3

Keep focusing on the three rounded rectangles. Select the middle one change its Fill color to #EF5E5E and then select the bottom one and change the Fill color to #5DD06C.

Zoom in on the bottom left side of your green rounded rectangle. Focus on the vertical rulers and add a new guide at 1536.

Step 4

Zoom in on the right side of your blue rounded rectangle. Focus on the horizontal rulers and add a new guide at 685.

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 60 px square and place it as shown in the following image. Hold down the Shift key while dragging to easily create a perfect square. Make sure that it stays selected and focus on the Style section from the Inspector panel. Disable the Border, change the Fill color to black (#000000) and lower its Opacity to 30%.

Step 5

Duplicate that black square (Commad-C > Command-V) and place the copy as shown in the first image. Add a second copy of this black square and place it as shown in the second image.

Step 6

Let’s return to the first black square. Go to Insert > Shape > Oval from the toolbar or menu (or press O).

Create a 56 px circle and place it as shown in the following image. Hold down the Shift key while dragging to easily create a perfect circle. Make sure that this new shape stays selected and focus on the Style section from the Inspector panel. Disable the Fill and focus on the Border. Change its color to white, make sure that the Center button is checked and set the Width to 4.

Focus on the vertical rulers and add a new guide that basically cuts your circle in half.

Step 7

Go to Insert > Vector from the toolbar or menu (or press R). Using three simple click add a path like the one shown in the following image. Make sure that it stays selected and focus on the Style section from the Inspector panel.

Disable the Fill and focus on the Border. Change the color to white and set the Width to 4, and then check the Round Cap and Round Joins buttons.

Step 8

Make sure that the path added in the previous step is still selected and go to Layer > Path > Rotate Copies. Drag that point handle and place it 2 px between the original path and the copy, as shown in the following image, and then hit Enter.

Step 9

Move down to the next black square. Go to Insert > Shape > Oval from the toolbar or menu (or press O).

Create a 56 x 48 px shape, fill it with yellow and place it as shown in the first image. Switch to the Rectangle (R), create 56 x 8 px shape, fill it with orange and place it as shown in the second image.

Select both shapes added in this step, click the Union button from your Toolbar, and then click the Flatten button.

Step 10

Make sure that the shape made in the previous step is still selected and focus on the Style section from the Inspector panel. Disable the Fill and focus on the Border. Change the color to white and set the Width to 4, and then check the Round Cap and Round Joins buttons.

Step 11

Keep focusing on the path in the previous step and go to Layer > Path > Scissors. Use simple clicks to remove the four sides highlighted in the first three images. In the end your path should look like in the fourth image. Once you’re done, copy the style of this path (Option-Command-C).

Step 12

Go to Insert > Shape > Oval from the toolbar or menu (or press O). Create a 56 x 48 px shape, place it as shown in the following image and simply paste the style (Option-Command-V).

Step 13

Make sure that the oval shape added in the previous step is still selected and go to Layer > Path > Scissors. Use a simple click to remove the side highlighted in the first image.

Step 14

Go to Insert > Vector from the toolbar or menu (or press V). Add a 20 px vertical path, place it as shown in the following image and paste the style (Option-Command-V).

Using the same tool, create the path shown in the second image. Select it and paste the style (Option-Command-V).

Step 15

Go to Insert > Text from the toolbar or menu (or press T). Click once on your artboard and focus on the Text section from the Inspector panel. Select the Baloo font, set the size to 30 and the color to white, and then simply type the dollar symbol ($). Place it as shown in the following image.

Step 16

Select all the shapes that make up your icon (highlighted in the first image) and copy them (Command-C). Move to the third black square, paste them (Command-V) and place them as shown in the second image.

Select only the two paths that make up the arrow and click the Rotate button from your Toolbar. Rotate your arrow 180 degrees as shown in the third image and then hit Enter.

Step 17

Select the three black squares and delete them.

6. How to Add the Categories Buttons to Your Sketch UI Design

Step 1

Go to Insert > Shape > Rectangle from the toolbar or menu (or press R). Create a 132 px square and place it as shown in the following image. Make sure that it stays selected and focus on the Inspector panel.

Set the Radius to 15 and then go to the Style section. Disable the Border, change the Fill color to #5E72EF and lower its Opacity to 70%.

Focus on the vertical rulers and add a new guide at 1566.

Step 2

Keep focusing on your rounded square. Add three copies, align them with the original shape and leave a 30 px gap between each of these shapes.

Step 3

Select the rounded squares added in the previous step and change the Fill colors as shown below.

Step 4

Import the four icons that you need from this Vector Icons Set. Resize them, change the color to white and place them as shown in the following image. Once again, the smart guides will help you to perfectly center these shapes.

7. How to Add the Text to Your Mobile App UI Design

Step 1

We’ll use a system font for most of the body text and and a non-default font for headings. 

“System fonts will make the design of your app more consistent with the operating system. But using system fonts only will prevent you from getting a unique look for your app.” – Andrey Zhulidin

Focus on the top menu. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel. Select the Odudo Mono font, set the style to Bold and the size to 40. Increase the Character spacing to 10 and change the color to #5E72EF, and then add the "PORTFOLIO" piece of text. Select it and place it as shown in the following image.

Step 2

Move down to the horizontal scrolling menu. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel.

Select the San Francisco Pro font, set the style to Bold and the size to 20. Increase the Character spacing to 2 and change the color to white, and then add the "OCT 2019" piece of text. Select it and place it as shown below.

Using the same text attributes, add the other four pieces of text shown in the following images. The only things that you’ll have to change is the text color, from white to #5E72EF.

Step 3

Move down to the bottom side of your chart. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel.

Select the San Francisco Pro font, set the style to Heavy and the size to 30. Make sure that the Character spacing is set to Auto and change the color to #CBD1FA, and then add the "23" piece of text. Select it and place it as shown below.

Add five copies of this piece of text, change the numbers with "24", "25", "26", "27" and "28" and place them as shown in the following images.

Step 4

Move down to the stats buttons. First, add a vertical guide at 143 and a horizontal guide at 1101. Go to Insert > Text from the toolbar or menu (or press T). Click on your artboard and focus on the Text section from the Inspector panel.

Select the Odudo Mono font, set the style to Bold and the size to 40. Change the color to white and then add the "16" piece of text. Select it and place it as shown below.

Deselect this piece of text and re-select the Text tool. Click on your artboard and focus on the Text section from the Inspector panel.

Select the San Francisco Pro font, set the style to Semibold and the size to 20. Make sure that the color is set to white and then add the "Transactions October 2019" piece of text. Add a horizontal guide at 1171 and then place this new piece of text as shown in the second image.

Step 5

Add the horizontal guides shown in the following image (1267 and 1337) and then duplicate the text added in the previous step. Edit the text and then place it as shown below.

Step 6

Add the horizontal guides shown in the following image (1433 and 1503ve) and then duplicate the text added in the previous step. Edit the text, place it as shown below and your Sketch UI design is complete.

Congratulations! Your Sketch UI Design is Done!

Here is how it should look. I hope you’ve enjoyed this Sketch app tutorial and can apply these techniques in your future projects. Don’t hesitate to share your final result in the comments section.

Feel free to adjust the final mobile UI design and make it your own. Don’t forget you can find some great sources of UI inspiration on Envato Elements, with interesting solutions to improve your mobile app UI design skills.

Learn More About UI Design in Sketch

• Sketch
  Quick Tip: Recreate Apple Watch’s Activity Rings in Sketch
  Adi Purdila
• Responsive Web Design
  Tips and Tricks For a Responsive Design Process in Sketch
  Paula Borowska
• Sketch
  A Walkthrough of the Prototyping Tools in Sketch
  Paula Borowska
• Sketch
  Paddy: Add Automated Padding and Spacing in Sketch
  Adi Purdila
• Sketch
  How to Create a Dynamic Icon Library With Sketch
  Adi Purdila
• Sketch
  How to Use Sketch Symbols to Create Flow Diagrams
  Paula Borowska

The new CSS :is() pseudo-class is shaping up to become a great way to target elements, saving on lines and lines of code, and keeping CSS as readable as possible. It is the next stage of the evolution of :matches() and :any(), adding a little extra functionality and increasing how semantic and intuitive the language behind selectors is.

In this quick tip we’ll make acquaintance with it. Let’s start by seeing how this pseudo-class, officially referred to in the spec as “matches-any”, is used in application. Then we’ll talk about how it’s replacing both :matches() and :any(), and why it makes more sense to use the word “is” instead.

#CSS

:is() selector 🎉
the successor to :any() and :matches()

sneak peak into our talk, here's a neat gif I made with XD showing what the :is() selector syntax can do. be excited for Chrome Dev Summit y'all!https://t.co/0r2CcUx9Hvpic.twitter.com/wSuGOsDLvZ

— Λdam Λrgyle (@argyleink) November 7, 2019

Example Uses of :is()

You can probably intuit the functionality of :is()just by looking at it: it’s a means to test if an elementis a certain thing, working essentially as a boolean like the if  you’ll find in many programming languages. For example, in its simplest form these two selectors are functionally the same:

article {...}

:is(article) {...}

In both cases the styling will activate if an element is an article.

It can also be used to detect multiple types of elements in a single declaration via a comma separated list. For example, again, these two selectors are functionally the same:

article, section, aside {...}

:is(article, section, aside) {...}

By itself this might not seem very interesting–an added complexity if anything–but it becomes especially helpful when used to target child elements. For example, let’s say you wanted to target h1 elements, but only when they are a child of an article, section or aside element. Usually you would need to write:

article h1,
section h1,
aside h1 {
    font-weight: 900;
}

However by instead using is:() this can be compressed to:

:is(article, section, aside) h1 {
    font-weight: 900;
}

It really starts to ramp up in efficiency when you have multiple parent and child elements you want to test for. What if, instead of just targeting child h1 elements, as in the above example, you want to target all child heading elements? Without :is(), (and not using classes for the sake of illustration), you would need to write:

article h1, article h2, article h3, article h4, article h5, article h6,
section h1, section h2, section h3, section h4, section h5, section h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6, {
    font-weight: 900;
}

But with :is() instead you only need:

:is(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 900;
}

Why :is() Replaces :any() and :matches()

In previous drafts of the “matches-any” spec this pseudo-class used the name :matches() before subsequently being renamed to :is(). An older selector again is :any(), however unlike :is() or :matches() it doesn’t support complex selectors.

The primary reason it makes sense to instead use :is() comes from another boolean style pseudo-class that functions in the inverse way, that being :not(). With this “matches-none” pseudo-class you can apply styling to everything but a collection of selectors.

For example, earlier we targeted all the headings that are children of article, section and aside elements. With :not() we can target all the headings that are not children of these elements:

:not(article, section, aside) :is(h1, h2, h3, h4, h5, h6) {
    font-weight: 400;
}

It makes good grammatical sense to pair :is() with :not(), hence making the combination logical and intuitive, and this is the primary reason it’s replacing :any() and :matches(). That said, the fact that it's shorter to type has also been cited as one of the reasons it is an improvement.

Current Status and Support

The :is()“matches-any” pseudo-class is currently at working draft status.

You can mostly try it out now in Firefox, Chrome and Safari, however all three browsers are still using the old :any() name, which must be used with vendor prefixes. For Firefox use :-moz-any() and for Chrome and Safari use :-webkit-any(). Chrome and Safari also support :matches().

Fallbacks

You can also use :any() and :matches() to create fallbacks for :is(). For example, a cross browser set of fallbacks might look like this:

:-webkit-any(article, section, aside) h1 {
    font-weight: 900;
}

:-moz-any(article, section, aside) h1 {
    font-weight: 900;
}

:matches(article, section, aside) h1 {
    font-weight: 900;
}

:is(article, section, aside) h1 {
    font-weight: 900;
}

The devs behind PostCSS are also looking at adding the ability to automate the addition of these fallbacks into your code.

Wrapping Up

The :is() pseudo-class is going to make it feasible to handle much more complex element targeting than before, using vanilla CSS where previously we would have most likely needed a pre-processor to handle the task. We can all look forward to it coming out of draft status and reaching full browser support.

For more information check out the links listed below:

Related Links

• :is() W3C spec draft
  
• :is() at CanIUse.com
  
• MDN Web Docs - :is() (:matches(), :any())
• MDN Web Docs - :not()
  

Learn More About CSS Selectors

• CSS
  Demystifying CSS Pseudo-Classes (:nth-child vs. :nth-of-type)
  Kingsley Silas Chijioke
• CSS
  What is CSS Specificity and How Does it Work?
  Kingsley Silas Chijioke
• Web Development
  The 30 CSS Selectors You Must Memorize
  Jeffrey Way

Whether you’re looking to advertise a school or childminding service, release a children-focused learning or play website, or even sell kids’ products, you need to make sure you get your site spot on. Parents are often extremely discerning customers, so producing a high-quality website to share your products or services couldn’t be more essential. 

Luckily for you, you don’t need to have extensive (or any!) design or development experience to produce a website that will do your business or organization justice. There are many suitable kindergarten WordPress themes available on Themeforest which you can download before easily customizing to make the site your own. 

Best Premium Kindergarten and Preschool WordPress Themes on Themeforest

As there are so many to choose from, we’ve done the hard work for you and selected 20 of our favorite kindergarten and preschool templates to take your website into 2020. 

1.Education WordPress Theme | WordPress

With more than 20,000 sales and counting, this WordPress childcare theme certainly has popularity on its side. There are more than 20 demos to help you see how the template can be adapted to suit your project—whether your focus is primarily on the children, their parents, or both! 

It’s WordPress 5.0 ready, fully integrated with WooCommerce, and you can easily sell event tickets for payment over PayPal, Stripe, Authorize.net, or good old-fashioned offline. 

2. Baby Kids – Education Primary School For Children

Another popular contender on the list, this one has been downloaded 3,500 times and has received an average of 4.53 stars out of 5. The theme offers unlimited colors, meaning you can not only customize based on your brand’s look and feel, but you can also appeal to kids’ playful nature by making a website packed with vibrancy. 

It also comes with locations and maps so any visitors can seamlessly see where your business or organization is based. 

3. Fable - Children Kindergarten WordPress Theme

This is one of the best kindergarten school website templates out there—partly because it’s packed with personality! It’s widely praised for its flexible design, which is also fully responsive and retina ready. A nice touch is the built-in timetable where you can easily view weekly activity schedules, meal menus, events, or lesson plans. 

4. Happy Kids - Children WordPress Theme

The name is perfect for this daycare WordPress theme, as with bright and playful colors and illustrations, it’s sure to put a smile on the children’s faces! Although created back in 2013, it’s regularly updated to ensure all the latest features are included. There are also 9 background patterns to choose from. 

5. Kids Life | Children School Theme

Hello to the 20 different color skins available with this kinder website template—we’re a fan! With WPML plugin support, it also couldn’t be easier to translate any text into your chosen language so this is an option with wide appeal. It’s easy to integrate with MailChimp if you want to share news or updates with your followers. 

6. Kids Voice School - Education WordPress Theme

Another of the highly-rated kid-friendly WordPress themes, this one is SEO-optimized and full of features to take your children, art, craft, or creative website to the next level. It’s also super easy to add an image gallery to really bring your website to life. 

7. Smarty - School Kindergarten WordPress theme

With video tutorials, online documentation to guide installation, a forum and live chat, plus a ticket system, the Smarty theme is well-equipped for any WordPress beginners who may need a helping hand along the way. There are 3 footer layouts to choose from so you can make the site your own, plus multimedia like videos (YouTube and Vimeo) and podcasts are supported. 

8. Carry Hill School - Education WordPress Theme

This is one of the slickest kindergarten website themes out there. It seamlessly combines photography with animated illustrations, making the content pop. With 9 color presets and more than 700 Google fonts, customization is your prerogative with this theme. 

9. Little People | Kindergarten WordPress Theme for Preschool and Infants, Nurseries and Play School

This WordPress kindergarten theme includes a license for the popular Revolution Slider plugin which has a selection of eye-catching animation effects. You can also easily manage customer testimonials to display on the site, and it’s translation-ready so you can adapt the site’s copy based on your chosen language. 

10. Kids Zone | Children School & Camping Games

Kids Zone has everything a kindergarten website theme should have! It’s complete with plugins including WPML (translation), WooCommerce, Event Calendar Pro, Community/Forum, and Contact form 7. It’s also rated highly for customer support. 

11. Ed School: Education WordPress Theme

With an average rating of 4.7 out of 5, the Ed School template must be doing something right. Many happy customers mention the flexibility of the theme and the ease at which it can be customized. It was launched in 2017 but is regularly updated and its developers pledge that is 100% compliant with the latest WordPress standards and requirements. 

12. Kids Planet - A Multipurpose Children WordPress Theme for Kindergarten and Playgroup

Fully compatible with the latest WordPress version, 5.0, this is a smart choice for a WP kindergarten theme. Highly image-led and colorful, it’s a template sure to please kids while also impressing parents with its high-quality and professional design. The designers also made mobile very much a focus of their attention, as it’s fully responsive and uses mobile-friendly sliders which allow users to easily scroll through content. 

13. Kiddy - Children WordPress theme

Kiddy is full of fun features that set it apart—look out for buzzing bee! There are also unlimited color schemes and many page layouts to choose from. The option for social integration means it’s easy for users to share any information relevant to them. 

14. Kindergarten | Day Care & Children School Education WordPress Theme

This theme boasts 5 header and more than 10 layout styles which you can quickly adapt based on your requirements. Flexibility is one of the stand-out features as it provides infinite capabilities for header customization. 

It also comes with the Royal Slider and Swiper Slider which enable the site to be fully touch screen–friendly. 

15. Kids Care | A Multi-Purpose Children WordPress Theme

This theme is full of novel animations which spring into action as you scroll down the page. They’re a nice touch and certainly add to the unique appeal of the Kids Care template. You just have to briefly visit the review page to see the whole host of five-star reviews it’s collected. 

16. Kiddie - Kindergarten WordPress Theme

A nominee for the Awwwards, which recognize and promote the talent and effort of the world’s best developers, designers, and web agencies, this theme just had to make the list. It also comes with visually appealing pricing boxes, which allow products to be displayed in a professional way. There are 20+ predefined page layouts to choose from too. 

17. Kids - Day Care & Kindergarten WordPress Theme for Children

This super vibrant theme has so much going on it’s almost like an online playground! The demos are full of color, illustration, animation, different sized shapes and content boxes, plus loads of fun effects. There’s an unlimited number of color schemes so you can have fun playing around until you have the perfect site. 

18. Kids Heaven - Children WordPress Theme

With 12 header types, 9 homepage layouts, plenty of plugins, and loads of handcrafted page elements, this is another template with customization on its side. There’s also a custom color picker for the menu, icon boxes, image captions, contact info, the blog, plus the events list so you can be creative when it comes to the look and feel of your site. 

19. KidsWorld - Kindergarten and Child Care WordPress Theme

This playful theme comes with the Masonry plugin which allows you to create unlimited portfolios with 2, 3, or 4 columns. This would work well for anyone wanting to share childcare experience, for example. It also comes with more than 600 FontAwesome icons which can be used to signpost content in an attractive way. 

20. Enfant - School and Kindergarten WordPress Theme

Created by zoutula, the same people behind the Kiddie theme previously mentioned, Enfant has a high-end feel. It includes lots of appealing features such as a countdown, plus colored content boxes to draw attention to important information. This theme was created in 2017, a year after the Kiddie theme, but has already collected a rating of 4.88 out of five stars—not bad!

Over to You!

As you can see, there are plenty of high-quality kindergarten website templates to choose from—the hardest part can be selecting which one to choose! If you haven’t quite been tempted by the 20 on the list, there are still many more to choose from over on ThemeForest. 

Before you decide on a theme, make sure to check out the 10 Common Regrets When Selecting WordPress Themes (+ Great Theme Examples). Best of luck!

More Education, Coaching, and Learning Platform WordPress Themes

• WordPress Themes
  20 Top Education WordPress Themes: To Make School Sites
  Brittany Jezouit
• WordPress Themes
  15 Best Learning Management System (LMS) WordPress Themes
  Eric Karkovack
• WordPress Themes
  20+ Best Coaching & Consulting WordPress Themes (2020)
  Brenda Barron
• WordPress Plugins
  The Best Learning Management System Plugins for WordPress
  Lorca Lokassa Sa

With a multitude of premium landscape WordPress themes being available nowadays, we have decided to put together a list of beautiful, functional and feature-rich templates that we believe would only be helpful for the success of any gardening-oriented business. 

Top Gardening and Landscaping WordPress Themes on Themeforest

As there are so many to choose from, we’ve done the hard work for you and selected a collection of our favorite gardening and landscaping templates to take your website into 2020. These WordPress themes are enough to bring out anyone’s green fingers!

1. Landscaping - Garden Landscaper

This premium WordPress niche theme is built and suitable for any business operating in the Landscaping and Gardening industry. Florists, Landscape Architects, and Gardeners can all use the features and functionality of this theme to supercharge their business. 

This theme has a purpose-oriented design and is suitable for users with zero programming skills as well as advanced developers.

2. Garden HUB - Lawn & Landscaping WordPress Theme

Garden Hub is a premium WordPress theme specifically made for professionals in industries like landscaping, lawn mowing, groundskeeping, and the floral industry. 

There’s a drag & drop page builder which can be used to create and rearrange content easily. Creating a gardening service business website is easier than ever, especially with all the available features like appointment forms, galleries, service lists and contact forms.

3. Garden Care - Gardening and Landscaping WordPress Theme

Garden Care is a premium WordPress theme designed specially for gardeners, landscaping companies, and landscape architects of all types. The garden care theme has a beautiful and unique design that will be well suited to your gardening web presence. 

It has a 100% responsive design and is tested on all major handheld devices. The theme comes with the necessary features for your horticultural website like project pages, a blog, testimonial, and team pages.

4. Greenova - Gardening & Landscaping WordPress Theme

Greenova is a gardening and landscaping WordPress theme built for lawn services, landscaping companies, and ecology-related services. With an elegant and modern design, this theme is easy to customize and play around with. 

The Greenova theme comes with beautiful and unique designs that can be customized to fit the needs of your business website.

5. BeGreen - Multi-Purpose WordPress Theme for Planter - Landscaping- Gardening

BeGreen is a multipurpose WordPress theme that has proven to be a smart choice for any gardening oriented businesses. This premium theme provides the opportunity to customize its layout through various premium integrations. The theme has over a dozen homepage layout designs and seven header and footer styles to pick from.

6. Gardener - Gardening and Landscaping HTML Template

Gardener is a premium WordPress gardening theme whose design is very elegant, modern, and extremely easy to customize with its 1170px grid. The theme comes with a fully responsive layout which elegantly adapts on any device’s screen.

7. Buisson - Gardening & Landscaping Services WordPress Theme

Buisson is a colorful, light and clean WordPress theme that is targeted at gardening businesses, landscapers, gardener bureaus, and exterior design companies. 

With a highly stylized design targeted at the aforemetioned niches, Buisson proves to be a good choice worth your consideration.

8. The Landshaper - Gardening & Landscaping WordPress Theme

The Landshaper is a premium WordPress theme built for lawn service-oriented businesses, landscaping companies, and groundskeepers. The theme comes pre-packed with 8 homepage layout designs which will help you achieve an outstanding design. 

Paired with extensive functionality and integrations, this theme is a great choice when it comes to picking a gardening WordPress theme.

9. QParadise - Gardening and Landscaping WordPress Theme

Paradise Garden is a premium WordPress theme targeted at landscape architects, gardening businesses, florists, and lumberjacks. The design is elegant and modern, and also very easy to customize. Build your company website easily with the Drag and Drop Page Builder. 

10. GRD - Gardening and Landscaping WordPress Theme

GRD is a great option when considering a premium WordPress gardening theme. The theme comes with a drag & drop page builder which you can use to create and rearrange content easily. 

Creating a gardening service business website within few minutes has never been easier, thanks to all of the features the theme comes pre-packed with, such as the appointment forms, galleries, and service lists.

11. Green Lawn - Landscaping WordPress Theme

Green Lawn is a premium WordPress theme designed especially for gardeners, landscaping companies, and landscape architects. This WordPress theme has a beautiful and unique design that will well suit your online web presence. 

It has a 100% responsive design which has been thoroughly tested on all major devices.

12. Edge Decor - A Modern Gardening & Landscaping WordPress Theme

Edge Decor is a light, fresh and clean Gardening WordPress theme that would be a perfect fit for landscape services, a gardening agency, and exterior designer bureaus. Paired with premium gardening plugins and mobile device optimization, this theme requires no coding to get started. Along with SEO optimization, WooCommerce integration, and extensive documentation and support, you can’t go wrong with this theme. 

13. Greengia - Gardening, Lawn and Landscaping WordPress Theme

The Greengia is a premium WordPress theme built for lawn service businesses, Landscaping Companies, and florists. Built on a highly customizable grid, this theme comes with several pre-designed homepage layout designs that can be put towards creating an outstanding website design.

14. NuvaGreen - Landscape & Gardening WordPress Theme

NuvaGreen is a versatile and well-designed premium gardening WordPress theme that comes packed with 5 beautiful predefined layouts for your next gardening-oriented website. 

The theme features well-written and clean code, a fully responsive design, and a powerful admin panel that can be used to customize the design. 

15. Landscape Garden WordPress - Grass

Grass is a premium landscape WordPress theme that is targeted at architects, gardeners, and landscape workers who want to take their web presence to a whole new level. With a theme that allows for an online shop to be opened, creating a community which shares a common interest hasn’t been easier. 

Using the provided shortcodes in the theme extends its capability even more, creating even more use-cases that might come in-handy.

16. Etalon - Multi-Concept Theme for Professional Services

Etalon is an easy-to-use WordPress theme that is ideally suited for small business owners, entrepreneurs, and medium-sized business professionals. With over 20 niche demos presented in one place, this theme makes it easy to sell your products and services within minutes of the one click installation. 

Use the popup contact form, the portfolio carousel, the photo gallery, or the service tabs and you’ll get a supercharged theme in no time!

17. Handel - Consulting WordPress

Handel is a premium, responsive multi-purpose Wordpress business theme that is custom-built to provide the features anybody would need to promote and run their consulting, finance, or logistics online business. And that includes, of course, gardening.

With a various sets of website styles and functionality, like cost calculators, document management, and complex table creation, this theme is a great choice amongst the showcased themes.

18. Cultivators - WordPress Gardening Design

Cultivators is a premium WordPress theme designed for gardeners, landscapers, construction workers and any related personnel. The theme was designed and built on the Bootstrap grid system and utilises JavaScript and CSS for animating certain interface elements and backgrounds. 

The theme makes use of the Unyson framework which allows its end users to create their own pages with the PageBuilder extension and edit the theme further with the built in theme options.

19. LaForat - Gardening and Landscaping WordPress Theme

LaForat is a Gardening and Landscaping WordPress theme made specifically for businesses that provide services related to garden decoration and lawn care. 

The theme provides quick access to various sections of the website including the Home, Services, Gallery, Blog, and Contact page, giving this theme an excellent user experience.

20. Lawner - Gardening and Landscaping WordPress theme

Lawner is a uniquely designed WordPress theme, with WPML support and Visual Composer fully integrated. With 3 homepage styles and over 15 inner pages, this unique theme will be well suited for your online presence if you own a landscaping or gardening business.

21. GreensKeeper - Gardening & Landscaping Responsive WordPress Theme

GreensKeeper is a fresh-looking, Bootstrap-based theme targeted at gardening and landscaping businesses. With three header and two homepage styles, all based on the Isotope grid, this theme provides a good deal of flexibility. 

Pick between a boxed or wide layout, and choose any color with the provided options to get an even more delicate design. 

22. Khidir - Gardening & Landscaping WordPress Theme

Khidir is a beautiful gardening and landscaping WordPress theme that features several homepage layout styles, a 100% fully responsive design, an advanced admin panel and WPML localization support. 

With unlimited icons included in the design, a one-click demo importer and multiple header and footer options, it’s hard to make a wrong decision when considering this theme for a revamp of your existing website. 

23. Grasshopper - Landscape Design and Gardening Services WP Theme

Grasshopper is a premium WordPress landscape and gardening theme that comes with several homepage layout designs, and a calculation form for providing instant quotes for your prospect clients. Paired with a fully responsive design, this theme proves to be a great choice when it comes to picking a theme out of the bunch. 

24. Garden Master - Gardening, Lawn & Landscaping Multi-Purpose WordPress Theme 

Garden Master is a premium WordPress theme which comes with a professional design and a 100% responsive Bootstrap layout. Integrated with WooCommerce and Revolution Slider, this theme can be used as a single page or multipage website.

25. Lander - Landscaping WordPress Theme

Lander is a premium landscaping WordPress theme that comes with several integrations by default, such as a Visual Composer, Revolution Slider, and a retina-ready design. Paired with its smooth parallax effects and extensive browser compatibility this theme is a great choice.

26. RakNew - Gardening and Landscaping WordPress Theme

RakNew is a drag-drop page builder-based theme that is fully SEO optimized and comes with a one click demo install. Beautiful but minimalistic in design, this theme has powerful theme settings and 600+ preinstalled Google Fonts to choose from.

27. Yoland - Landscape Design & Garden Accesories Store WordPress Theme

Yoland is a beautiful, fresh and well-designed landscape design and garden accessories WordPress theme with functional store capabilities. With its 3 lovely homepage layout designs this theme is a simple and sound option.

What is Your Favorite Theme Out of the Bunch?

This concludes our list of premium landscape WordPress themes and we’re curious to hear which is your personal favorite!

More Niche Business WordPress Themes

If gardening isn’t your thing, perhaps one of these niches will suit you!

• WordPress Themes
  20 Best Construction Company WordPress Themes for Building Websites
  Brenda Barron
• WordPress Themes
  20 Best Kindergarten & Preschool Children WordPress Themes for 2020
  Hermione Wright
• WordPress Themes
  Top 10 WordPress Wedding Themes (+ Tips to Build Your Wedding Website)
  Hermione Wright
• WordPress Themes
  15 Awesome WordPress Podcast Themes to Make Audio Sites
  Brittany Jezouit

Relationships exist in HTML, and these relationships make it possible for us to select and style the elements of a web page. When an HTML element is nested within another, the outer element is known as the parent, while the inner element is the child.

<div><h>Heading</h><span>I am a span</span><p>This is a paragraph</p></div>

A child element can itself become parent to another element. 

Why all this preamble and backstory? Because it’s important! 

When you style a parent element, in some cases the style will be inherited by its children elements. I say some cases because this kind of inheritance doesn’t always hold true.

The Importance of CSS Inheritance

If you have ever styled the contents of a web page, it’s quite possible that you didn’t write a font style for every element that had to display text. It is possible that you only added your font styles to the body element, for example:

<body><div><h2>A h2 element</h2><p>A paragraph</p><div><p>Another paragraph</p>  </div></div><div><h3>A h3 element</h3></div></body>

If you want a uniform font style for all this content, you only have to style the body element:

body {
  font-family: Arial, Helvetica, sans-serif;
}

This is possible because of inheritance across HTML elements. And it’s helpful, as we don’t have to repeat the same font style for the divs and headings. The same applies to color styles, which when applied to a parent element will be applied to the children of that parent unless a different color style gets applied to the children elements.

While inheritance makes things easy for us, things wouldn’t be so easy if all CSS properties behaved in this way.

Here is another example:

<ul class="main-list"><li>Dairy</li><li>Vegetable</li><li class="sub-list">
    Fruit<ul><li>
        Drupe<ul><li>Peach</li><li>Coconut</li><li>Olive</ul></li><li>
        Berry<ul><li>Tomato</li><li>Cucumber</li></ul></li></ul></li></ul>

Who knew cucumbers were berries?! We’ll implement a few styles to the parent list and see what gets inherited down the bloodline:

The font and color styles that were applied to the unordered list are inherited by its children elements and even its grandchildren elements. However, this is not the case with the border styles. 

So which other properties are inherited?

A Complete List of Inherited Properties

According to the W3C, here are the properties that can be inherited.

1. azimuth
2. border-collapse
3. border-spacing
4. caption-side
5. color
6. cursor
7. direction
8. elevation
9. empty-cells
10. font-family
11. font-size
12. font-style
13. font-variant
14. font-weight
15. font
16. letter-spacing
17. line-height
18. list-style-image
19. list-style-position
20. list-style-type
21. list-style
22. orphans
23. pitch-range
24. pitch
25. quotes
26. richness
27. speak-header
28. speak-numeral
29. speak-punctuation
30. speak
31. speech-rate
32. stress
33. text-align
34. text-indent
35. text-transform
36. visibility
37. voice-family
38. volume
39. white-space
40. widows
41. word-spacing

You can find more about this list on the W3C’s website (you definitely do not need to memorize all of these!).

How to Force Properties to Inherit

Since some properties cannot be inherited, you might think that the way out is to apply them to the children elements as well. The styles we used above might look like this:

.main-list {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana
}

.sub-list {
  border: 1rem solid #000;
}

We’d still only have border styles on the parent list and the first sub-list. But the issue is that we’ve had to repeat ourselves. The pain of copying the same style over and over becomes evident.

A good solution would be one where you only need to apply the style once, preferably on the parent, and do a little tweak on the child to inherit. This will keep everything dry and clean.

The Inherit Keyword

According to the MDN Docs:

“The inherit CSS keyword causes the element for which it is specified to take the computed property of the property from its parent element.” – MDN

In other words, it’s a way of stating that the value of a particular property should be obtained from the element’s parent. This keyword can be used on any CSS property.

Going back to our example, here is how the style would appear:

.main-list {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana;
}

.sub-list {
  border: inherit;
}

With that, the result will look like this:

So, should our border styles ever need to change, we’d only need to change them in one place.

How to Force Properties Not to Inherit

While it’s possible to enforce inheritance on properties that are not inheritable by default, in some cases it might make sense not to do so. An alternative is to make use of the property’s initial values.

The Initial Keyword

You can set the default or initial value of a CSS property by using the initial CSS keyword. This will cause the inherited value of the property to go back to its initial value.

In this example there are a couple of things happening. We have two div elements whose red color properties are inherited by the h1 and p elements nested within. However, we also apply a global h1 style (blue color) but we make sure the second h1 doesn’t inherit either style in the following way:

h1 {
  color: blue;
}

div {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana;
  margin-bottom: 10px;
}

.berries h1 {
  color: initial;
}

Our h1 in the .berries block goes back to whatever color the browser originally applied. Here’s what that looks like:

Other CSS Inheritance Keywords

In addition to the inherit and initial keywords, we can also use revert and unset. In fact, these alternatives are actually recommended because initial can produce some unexpected results.

The Unset Keyword

The unset keyword is subtly different. It resets an element’s value to the inherited value (if it inherited) and to its initial value if not. Here’s our example again:

h1 {
  color: blue;
}

div {
  border: 1rem solid #000;
  color: red;
  font-family: Verdana;
  margin-bottom: 10px;
}

.berries h1 {
  color: unset;
}

In this case, the color property of our second h1 reverts to its inherited value (red) instead of its initial value (black):

The Revert Keyword

Lastly, we have the revert keyword, which works similarly to unset in most cases. It resets the property to its inherited value (if it inherits from its parent), or to the default value established by the user’s own stylesheet (if it exists), or then the browser’s styles.

Conclusion

When a style rule is declared in a stylesheet there are lots of places where the value of the property could come from;

1. The stylesheet defined by the web author.
2. User-defined styles.
3. Browser defined styles.

Where the styles are fetched from depends on how the property works in regards to inheritance. If the property is inheritable, then its value will come from its parent which will be declared in the stylesheet created by the web author. Else it will come from either the second, or third source.

Inheritance in CSS can be a little confusing! I hope this tutorial helped you make sense of it.

Learn More About CSS Selectors

• Web Development
  The 30 CSS Selectors You Must Memorize
  Jeffrey Way
• CSS
  How to Use New CSS “:is()” for Easy Element Targeting
  Kezz Bracey
• CSS
  Demystifying CSS Pseudo-Classes (:nth-child vs. :nth-of-type)
  Kingsley Silas Chijioke
• CSS
  What is CSS Specificity and How Does it Work?
  Kingsley Silas Chijioke

Running a successful agency is no small feat.

Whether you’re providing photography services, design services, marketing, advertising, want to showcase your architect’s portfolio, or any other type of creative work, one thing is sure—you need a professional looking website.

Key Features of Great WordPress Agency Themes in 2020

You can make a great agency website in 2020 with the right agency WordPress theme.

There are plenty of agency themes available, but the best themes that cater to creative agencies have a few things in common. Here are key features to keep in mind when choosing your creative WordPress theme:

• Multiple Demos: Multiple demos make it easy to create a website that matches your purpose and integrates with your brand seamlessly.
• Customization Options: Integrating your brand into your website is crucial if you want to stand out. So, a rich theme options page or a panel is a must. If you’re not code savvy, consider a theme that comes with a visual page builder as well, to make things even easier.
  
• Responsive Design: Nowadays there is no excuse whatsoever to forego responsive design. Not only would you be doing your clients a huge disservice but you would be hurting your SEO as well.

Here are a number of the best creative agency WordPress themes with these professional features, available on ThemeForest: 

20+ Creative WordPress Agency Themes (For 2020)

In this curated selection, we bring you over twenty of the best agency WordPress themes for 2020—these are sure to take your agency website to the next level. Read on to find the perfect creative WordPress theme for your website:

1. Brünn - Creative Agency Theme

Brünn is as sophisticated as it is versatile. With 12 different homepage variants, it gives you all you need to build your agency website (or your online store, app landing page, personal portfolio, you name it). 

2. Gentium – A Creative Digital Agency WordPress Theme

Gentium is a WordPress theme which focuses on you building the perfect agency website. Whether you need a design agency WordPress theme, a marketing company website template, a landing page for a tech startup, or an individual’s portfolio (hey, an individual can be an agency, right?) Gentium delivers. 

The wide collection of homepage layouts center around its strong aesthetic, meaning that you only need concentrate on the precise functionality and UX you need for your own website.

3. Dendrite - Creative Agency & Portfolio Theme

Clean cut, grid-like, smooth, and professional, Dendrite is a great choice of theme for creatives and agencies alike. Suited to all kinds of professions, this theme comes with a range of layout choices, a ton of options, and scores very well performance-wise straight out of the box (a website which loads quickly has never been more important). 

With the Envato Market plugin this theme will auto-update, meaning you never have to worry about downloading and uploading files for updates in the future.

4. Grafik - WP Agency Theme for Portfolio Layouts

The Grafik creative WordPress agency theme offers several creative home page layouts and each individual portfolio project can have a unique layout. Custom page templates such as Services and Pricing, Team, About, and more are included, as well as various shortcodes. 

The theme supports full-screen video backgrounds and multiple custom sidebars. A powerful theme options panel and Visual Composer integration are perfect for customizing the theme to your liking. The theme is also responsive and supports interactive infographics that are perfect for sharing case studies.

5. Bifrost - Simple Portfolio WordPress Theme

The creators of Bifrost have made it really easy for you to see how versatile this creative theme is. As a WordPress agency theme it’s perfect, just as it’s perfect for all manner of other niches.

Built with Elementor (see below for a video tutorial on how to customize your website with Elementor) and packaged with over 40 different demos, Bifrost provides one of the quickest ways to get your website built. And the proof is in the pudding; over 1,500 customers think it’s one of the best agency website templates available.

• WordPress
  How to Customize Your WordPress Website With Elementor
  Adi Purdila

6. Bridge - Agency Theme With Animation Effects

The Bridge theme includes sleek animation effects which are sure to capture the attention of potential clients. It comes with various page templates that allow you to showcase your portfolio, display your services, insert various shortcodes such as accordions, tabs, pricing tables, parallax backgrounds, and more. 

The theme also includes complete social media integration. Unlimited colors, headers, and menu variations that make it easy to create a unique website. You can also add fullwidth video backgrounds to sections and set different pattern images for each section.

7. Uncode - Clean and Modern Agency Website Theme

Uncode has a clean and modern layout and it includes 16+ portfolio layouts to share your work in style. It also comes with a unique grid style and a smooth parallax effect which works exceptionally well with the responsive design. It also has the option to add Envato Hosted, our premium managed WordPress hosting solution. 

Several gallery layouts and extensive thumbnail variations ensure your website will stand out from the competition. On top of that, this creative WordPress theme comes with an advanced options panel and more than a 1000 handpicked icons and social share icons.

8. Comet - Responsive Agency WordPress Theme

Comet is responsive theme that’s suitable for a variety of websites, including creative agencies. The theme features quite a few homepage layouts and is based on the Visual Composer plugin to make the design process as easy and quick as possible. You have plenty of space to showcase past projects and to feature everyone working at your agency, along with the ability to display testimonials from past clients. 

On top of that, the theme is fully compatible with WooCommerce and WPML plugins and it includes a number of different blog layouts. It comes with an advanced theme options panel so you can customize almost every aspect of your website, from fonts to colors, and more.

9. Conall - Minimalistic WP Agency Theme Design

Consider the Conall creative WordPress agency theme if you’re a fan of minimalistic design. The theme boasts a large collection of page templates as well as shortcodes, which you can use to add sliders, accordions, drop caps, and much more. A parallax effect is included as well. You can easily use the theme options panel to change colors, upload your own logo and favicon, customize the fonts, and much more. 

Several call to action areas are included as well as various animations that will make your website stand out more. On top of that, the theme includes WooCommerce and Contact Form 7 integration, responsive design, five icon font packs, and a child theme so you can modify it to your heart’s content.

10. Stag - WordPress Theme for Agencies and Freelancers

The Stag WordPress theme has been created with agencies and freelancers in mind. It includes several home page variations, with a parallax banner, and a full-width slider. The theme comes with beautiful animations and it allows you to showcase your portfolio, feature members of your team, and display testimonials from past clients in a stylish manner. 

Parallax backgrounds can be added onto any section and the advanced theme options panel lets you have full control over the visual design of your theme. An added bonus is the social media widgets which allow visitors to easily share content. The theme is also SEO optimized and fully responsive.

11. Fevr - Stylish WordPress Agency Template Design

Fevr is a stunning theme that comes packed with features and layouts for complete creative control. The agency template has a number of pre-made page designs so you can quickly launch your website. It includes over 200 hooks for complete customization, as well as hundreds of customization options to tweak colors, fonts, backgrounds, a logo, and much more. 

The Fevr theme has been optimized to load fast and it’s fully responsive. Along with several portfolio layouts, WooCommerce integration, and localization files, this creative theme has all the tools you need to build a memorable website.

12. Bateaux - Lightweight Agency WordPress Theme

The Bateaux theme is built on top of the Blueprint page builder which claims to be the fastest and the lightest page builder for WordPress. It gives you complete control over the layout of your pages and the theme also includes several different demo versions and several menu variations to make your navigation more visually appealing. 

The advanced Live Customizer allows you to tweak the layout of your pages, set the width, change colors, fonts, upload your own background, logo, and much more. On top of that, the theme is SEO optimized and includes responsive and fluid design which seamlessly adapts to any screen size.

13. Brooklyn - A Creative WordPress Agency Theme

The Brooklyn theme has plenty of features geared for creative agencies, from easy portfolio management to beautiful pricing tables. 

The theme includes both Visual Composer and Revolution Slider, which not only allow you to fully customize the layout with a drag-and-drop interface, but to create beautiful slideshows to highlight your services or your recent blog posts. 

Along with an advanced theme options panel and one-click demo import, the Brooklyn creative WordPress theme is the perfect choice for getting your site up and running in as little time as possible.

14. Kalium - Minimal and Responsive WordPress Theme

Kalium is another minimalist and responsive theme that focuses on putting your past projects into focus. The agency layout includes an organized grid layout for your portfolio and you can also include logos from previous clients. 

On top of including Visual Composer and Revolution Slider for free, the theme is also compatible with WPML plugin if you’re targeting a broad audience. You can take advantage of multiple design options to customize the theme to get the look and feel that represents your agency in the best possible light.

15. Yin & Yang - Clean and Responsive WP Theme

This is a clean, responsive, and easy-to-use WordPress portfolio theme. It’s very quick to setup and easy to customize, thanks to the powerful admin panel, and the detailed documentation. The theme includes a filterable portfolio and six different widget areas to add social media icons, recent post lists, social media feeds, and much more.

16. GridStack - Modern, Gallery-Focused WordPress Theme /

Gridstack is a modern agency theme featuring stunning full-width galleries and parallax-style media. The theme comes with AJAX loading which ensures smooth transitions and faster loading times. The portfolio is completely sortable and you can also use a variety of shortcodes to structure your services in multiple columns. 

The theme options panel allows you to customize the colors, fonts, and you can use the child theme to tweak the theme even further and create a completely unique agency website design.

17. Pillar - Creative Agency, Multi-Concept WordPress Template

Pillar is based on Bootstrap, the ubiquitous responsive website framework, so you can quickly work with it’s familiar grid structure. It has a beautiful collection of hand-crafted web components and responsive WordPress theme files. Whether you need to create an advertising agency website, web design agency site, or your creative agency website, this agency website template set has the flexible features you need.

18. Jevelin - Premium WordPress Theme for Creative Agencies

This multi-purpose Wordpress theme brings a creative set of WordPress theme files. It’s perfect for making a fresh site for your digital agency or to use on multiple site projects. It’s highly customizable and packed with elegant features like: portfolio layout combinations, smooth scrolling, animated components, custom video background sections, and more.

19. Roneous - Innovative Business WordPress Agency Theme

This creative multipurpose WordPress theme has incredible features to make your agency website with. It has a professional attention to every detail and a beautiful set of designs. Make an impressive site quickly with fully responsive theme files, custom visual elements, and clean portfolio layouts. This is one of the best WordPress themes for creative agencies.

20. Overlap - High Performance Creative WP Agency Theme

Overlap is packed with unique layout designs, and interesting creative portfolio options to present your digital agencies work with. It includes smart WordPress theme options so you can customize your site quickly, present your agency brand best, and make use of the included Visual Composer. It’s built with responsive pages and comes loaded with powerful features. Also, you can build the page layouts you need without having to dip your hands into the code.

21. Ezio - Creative WordPress Theme, Best for Digital Agencies

Unleash your digital agency’s creative power with this magnificent multipurpose WordPress theme. It comes with a bevy of features, such as css animations and expandable sections. It also comes with a built in Live Visual Customizer plugin, so you can adjust your layouts without having to dig into the code. Make use of the portfolio features, shop page designs, and multiple blog layouts included. Get your agency website built fast!

22. Stockholm - Creative Agency WordPress Site Theme

Try out the Stockholm WordPress agency theme if you’re looking for a theme that gives you full creative freedom. It includes unlimited color options and more than 600 Google Fonts, along with a stylish portfolio and eight different blog layouts. 

It also integrates completely with WooCommerce so you can easily sell additional digital products on your website. On top of that, the theme is SEO optimized, fully responsive, and it comes with a Google Map module to easily show your physical location.

Agencies and the Rise of “In-Housing”

With many companies investing in their own in-house capabilities, creative agencies of all kinds are having to step up their game. Becoming more efficient and reducing costs are the driving forces behind the move in-house, partly due to the sheer volume of marketing, creative work, and development needed in today’s markets.

“As part of [our] overall agency reinvention, we’re discerning between what work we should do versus what work an agency should do or any kind of supplier,” – Marc Pritchard, P&G

But that isn’t to say agencies are a thing of the past; far from it. Whether in advertising, design, marketing, or whichever area, opportunities are there for the hungriest agencies to take. In fact, AdWeek noticed in their most recent Fastest Growing Agencies list an average growth of over 300%.

“[this] points to talented, dedicated individuals and teams that ignore the noise around them to focus on what they do best: delivering big time for their clients and brands.” — Doug Zanger, AdWeek

All of which highlights the importance of a sound agency website. A professional website makes it easy to attract new clients and show them that you take care of the manner in which you present your skills and past work. This in turn suggests you will take equally good care of their project. It puts your entire brand into a favorable position; the kind of quality positioning that creative agencies strive for. 

5 Quick, Creative Agency Design Tips

Before clicking away to purchase your chosen theme, here are a few tips to keep in mind when it comes to designing your creative agency website:

1. Keep It Responsive: Responsive design has never been more important than today when most of us use tablets and phones to browse the Internet. All of the themes on our list feature responsive design but you can always go a step further and ensure the theme is also optimized for speed like in the case of Fevr or GridStack.
2. Include Testimonials: Testimonials work wonders for building credibility and social proof so consider choosing a theme like Comet or Stag.
   
3. Make It Easy to Contact You: Aside from a contact form, why not include your social media profiles (and those of your employees) to make it extremely easy for potential clients to get in touch with you? They may not be ready to contact you right now, but if you give them the option to follow you on social media, you ensure that they know how to reach out to you in the future—even if they don’t remember your email.
   
4. Add Visual Appeal With Icons: Highlight different sections of your website with icons to make them stand out and differentiate them from other sections. Consider a theme like Uncode which includes more than a 1000 icons.
   
5. Make Your Portfolio Sortable: A sortable portfolio like the one found in the Yin and Yang theme makes it easy for potential clients to find examples of past work that are relevant to their project. 
   

Refresh Your Agency’s Website Design in 2020

Give your current creative agency website a critical once over. Consider: is now the right time to refresh your agency’s website design?

If so, then take your digital agency to the next level with one of our high quality premium WordPress themes from ThemeForest—and make sure your website looks creative, modern, and fresh this year! And be sure to use a premium WordPress hosting provider to setup your site securely, with quick installation and theme setup assistance.

Also, if you’re on a budget, you can still get a premium website design with one of our free WordPress themes.

Editorial Note: Our staff updates this post regularly—adding new WordPress themes with the best, trending designs.

When it comes to plugins for laying out the pages on your WordPress site, WPBakery Page Builderis a hard one to beat. This easy-to-use drag-and-drop page builder with over 200 unique addons will help developers and novices alike create just about any layout imaginable.  

• WordPress
  20 Best WPBakery Page Builder (Visual Composer) Addons & Plugins of 2019
  Nona Blackman
• WordPress
  Get Started With WPBakery (Formerly Visual Composer)
  Ashraff Hathibelagal
• WordPress Plugins
  WordPress Page Builders Make It Easy to Create a Website
  Nona Blackman

But for users looking to modify just one page in a specific way, this powerful page builder is probably overkill. That’s why we’ve scoured CodeCanyon for the most useful WordPress page layout plugins and come up with these 12 that will meet a variety of needs.

1. Essential Grid WordPress Plugin

If you’re looking for just the right grid to display your blog posts, photos, products, testimonials, social media streams, services or whatever else you have in mind, the Essential Grid WordPress Plugin has got you covered.

This multipurpose grid enables you to display any content on your WordPress site in your choice of elegant grid form. First, you decide what source you want to use for your grid entry. Then, you customise the grid by choosing from three available styles, before selecting your required number of columns and rows and setting the spacing for the items. From there, you can add any number of skins available to customise your look further.

Notable features:

• over 25 example skins included
• widely varied content sources possible, including images, YouTube, and HTML5 self-hosted video
• various animation styles available
• responsive and mobile optimised
• and more

Essential Grid WordPress Plugin is an engaging and visually appealing way to show off content on your WordPress page.

User webdesigndmc says:

"It's a great plugin and they have even greater support."

2. FlatFolio

FlatFolio is another great option for those looking for an alternative grid layout. Aside from being highly customisable, the plugin has the additional benefit of offering both Carousel and Slider functions as well. You can customise the grid with logos, captions, coloured overlays, titles and subtitles, hover shadows, and more.

Notable features:

• preview feature
• carousel and slider features
• unlimited item formats
• various overlay effects
• and more

For creatives and other users wanting to show off their visual content, FlatFolio is a versatile and easy-to-use layout choice. 

User stefkouf says:

"Great plugin, very quick solution to my problem."

3. Sidebar and Widget Manager

If you’ve ever wished for the freedom to place a widget in the content area of your WordPress site page, the Sidebar and Widget Manager has heard your prayers. The plugin allows you complete control of where you add widgets to your site’s pages by expanding the placement possibility beyond the sidebar and footer area to the page content area.

Notable features:

• drag-and-drop grid manager
• vertical or horizontal widget alignment
• ability to display or hide any widget on any page
• supports any kind of content
• and more

Being able to add widgets to any area of your WordPress site page with the Sidebar & Widget Manager plugin is a great way to build your own unique page layout.

User JohnDoe_VI says:

"If you want to create a custom layout of a WordPress site, this is the plugin you want to have in your tool chest."

4. Content Manager for WordPress

The Content Manager for WordPress plugin is probably the most versatile of the plugins in this list because it allows you to create any kind of layout you desire in three simple steps. Simply add a new page, create your desired layout with the drag-and-drop interface, and then add your content. 

Notable features:

• ability to add unlimited fully editable pages
• 10 layout colours
• 30 Google Font options
• multiple language support
• and more

User Harald777 says:

"Really good plugin and superb support. Would recommend this to every WordPress user who wants a flexible and simple content manager. Really great."

5. Stupid Simple Testimonials

The Stupid Simple Testimonials plugin makes it super easy to add testimonials or quotes to your page layout. Using a simple shortcode that can be inserted in pages, posts, and widgets, the plugin features eight unique ways to customise your page layout.

Notable features:

• grid layout automatically adjusts to match the total number of testimonials
• six unique colour schemes provided to match your theme
• ability to divide your testimonials into categories for easy management
• ability to edit using the standard WordPress editor
• and more

The Stupid Simple Testimonials plugin is a straightforward way to alter your page layout and will integrate your testimonials or quotes into your site in a crisp, professional fashion.

6. UberMenu

What’s a great site without an equally great menu layout to help your visitors navigate your content seamlessly? The UberMenu plugin is designed to facilitate just such easy navigation. The highly customisable and responsive plugin offers seven main menus and several submenu options to suit a wide variety of tastes and needs.

Notable features:

• easy to add images and descriptions
• Google Maps
• choice of 18 layout variables
• fully responsive and compatible with mobile and touch-enabled devices
• extensive user-friendly documentation
• and more

UberMenu works out of the box with the WordPress menu system, making it simple to get started and create gorgeous menus quickly and easily.

User lariosn says:

"UberMenu is simply fantastic and its support is just amazing."

7. WordPress Pro Events Calendar

If you’re looking for a clean and elegant way to keep your customers, clients, or followers updated on your public appearances, then adding the WordPress Pro Events Calendar plugin to your WordPress page layout might be the right solution for you. 

Notable features:

• responsive layout
• let users submit events from the front-end
• add special dates to your calendar like holidays
• import events from an ICS feed or Facebook

User DrDanHall says:

"This calendar system is the best for the money. I had used EventOn but the constant add-on cost was unbearable. Pro Event calendar includes all the features I had for much less. Great system."

8. WordPress Content Boxes Plugin

With the WordPress Content Boxes Plugin, it’s all about boxes. 43 stylishly designed boxes to be precise, any of which users can select to contain and showcase site content, like testimonials, social icons, team members, products, pricing lists, etc.

Notable features:

• over 1,000 icons
• highly customisable
• ability to use multiple content boxes in one page
• and more

Though one of the newer additions to CodeCanyon, WordPress Content Boxes Plugin with Layout Builder is sure to be a big favourite in the coming months. 

User Tixylix says:

"This is a very well-built plugin and the addon/template customisation options are superb. So glad I stumbled across it–fantastic!"

9. Media Grid

Media Grid is a terrific plugin that allows you to create unlimited responsive, filterable and paginated portfolios quickly and easily. You can create your own layout and mix any media to create unique galleries. The plugin allows for a high degree of customisation to every element of your gallery. 

Notable features:

• unlimited layout-free portfolios
• visual, drag-and-drop grid builder
• ability to create grids using any public post on your website 
• one-click grid cloning system

User seamusberkeley says:

"This is the best image plugin available—lots of flexibility and dynamic organization of images. Customer support is responsive too—Luca replied to questions promptly."

10. Templatera

Created by the authors of the WPBakery Page Builder, Templatera is a WordPress template manager that allows users to create, manage and set access to templates based on the user role or content type.

Notable features:

• easy content reuse across templates
• edit content across templates from one central place
• ability to import or export templates in XML format
• and more

User rikfik says:

"This plugin is awesome! It saves me a lot of time build my pages. Great job. Thanks."

11. Quform

Quform is an advanced WordPress plugin that allows you to quickly and easily build multiple forms. This drag-and-drop form builder is feature-rich, easy to use, and has a wide variety of templates that enable you to build all kinds of forms ranging from complex quotes to booking forms and simple contact forms, without ever writing any code. A few clicks and you have fully functional forms—it’s that simple. 

Notable features:

• responsive forms
• drag-and-drop form elements
• file uploads, sent as attachments or saved to the server (or both)
• live preview while building

User adynsol says:

"Amazing script, easy to install, very well documented and with a ton of configs. Nice work."

12. DHWCPage

DHWCPage is a template builder that helps you create any layout for your WooCommerce page quickly and easily. The plugin, which requires WPBakery Page Builder to work, is easy to install and configure and requires no coding skills. 

Notable features:

• supports WooCommerce shortcodes
• works with any theme
• create a single product by category or product type
• display the product description and review separately

User mydiamondlive says:

"A must have plugin for eCommerce websites that want to put extra design features for products and to stand out from the rest."

Conclusion

These 12 plugins just scratch the surface of page layout plugins available at Envato Market. So if none of them catch your fancy, there are plenty of other great options there to hold your interest.

If you're interested in other WordPress plugins, check out these articles:

• WordPress
  20 Best WPBakery Page Builder (Visual Composer) Addons & Plugins of 2019
  Nona Blackman
• WordPress
  How to Pick a WordPress Form Builder Plugin
  Lorca Lokassa Sa
• WordPress Plugins
  WordPress Page Builders Make It Easy to Create a Website
  Nona Blackman
• WordPress Plugins
  Create a Drag-and-Drop Contact Form With the FormCraft 3 WordPress Plugin
  Daniel Strongin

And if you want to improve your skills building WordPress sites, check out the ever so useful free WordPress tutorials we have on offer.

Sometimes in life, you just want to keep things simple—and the same can be said for your web design. Perhaps you’re a photographer, designer, or illustrator looking to build your online portfolio and you want your work to do the talking. Luckily for you, there are plenty of simple WordPress gallery themes that do just that!

Top Creative WordPress Photo Gallery Themes

The best thing about selecting a portfolio gallery WordPress theme from Themeforest is you can make a seriously high-end site quickly and easily even without any web design or development experience. The majority of themes come with rapid support from developers too so if you do have any burning questions along the way then an expert will be on hand. 

Read on for my round-up of 20 creative yet simple portfolio sites for 2020 that come with great photo gallery options. 

1. Retine - A WordPress Theme for Photographers and Creatives 

This theme is a true winner in terms of the flexibility it offers with your photography. You can create a stock photo website where you can sell your work, offer some imagery free of charge, and you can also create a client gallery where you can present your photo sets to clients in password-protected galleries. They can then review and approve photos using an in-built proofing tool. 

There are also multiple options for photo albums where you can organize your imagery according to categories and preview each option in the lightbox—and, finally, there are plenty of gallery layouts to choose from so you can really make your homepage your own. 

2. Pinhole - WordPress Gallery Theme for Photographers

With an average rating of five out of five stars, this photo gallery WordPress template just had to make the list. Pinhole comes with more than 30 gallery layouts so you’re in control of how you’d like to display your work, plus you can create your gallery structure and hierarchy using the native WordPress functionality so no additional pricey plugins are required.

The developers have put speed at the center of this template and by displaying a limited number of photos on the gallery page initially, even galleries with more than 100 photos will load quickly. 

3. SceneOne | Photography Theme for WordPress

You can’t get much cleaner than this WordPress simple gallery theme, which also has collected an average rating of five out of five stars. It comes with some nice features like AJAX likes, which means you can interact with site visitors and see how much they like your work. 

It comes with plugins like WooCommerce so you can quickly monetize your work and MailChimp so you can keep your fans updated with new imagery and deals. The option for a transparent menu is also a good touch.  

4. Joker - Photo & Video Portfolio WordPress Theme for Photographers

With 13 predefined homepage layouts and at least 8 galleries available, this is another great option for a WordPress gallery template. The ‘grid wall’ layout option couldn’t be simpler, but coupled with eye-catching photography, it’s often exactly what’s needed. 

This one works well across all major browsers, is multi-language optimized so you can quickly translate any text into your chosen dialogue, plus it’s fully responsive so you don’t need to worry about your photos not displaying well on users’ handheld devices.

5. Photography Travis-WordPress

For only $15, this is a WordPress photo gallery template that won’t break the bank but it comes with loads of high-end features. You can choose between light and dark themes depending on the mood of your imagery, plus you can easily create video as well as photo galleries if you want to bring your site to life. 

Perhaps you want to show your product from all angles for example, this is a great feature to enable you to do just that. 

6. Kinatrix | Photography Theme for WordPress

This WordPress gallery page template is packed with so many features it’s hard to pick which ones to include! Its protected galleries, fullscreen galleries, and portfolio galleries are all useful additions—there’s also good management tools that allow clients to pick their favorite selects quickly and easily. 

Fullscreen imagery can be displayed which helps to give the site an added wow factor. 

7. Photosy - Photography WordPress Theme

This simple portfolio theme is definitely one of my personal favorites, partly because of the option for a split slider on the homepage. You can create a really effective homepage by uploading connected but different imagery, allowing the user to scroll as more images unfold. Photosy also supports video and audio content so you’re not limited in terms of the multimedia you want to publish to the world. It’s fully responsive, SEO-friendly, and comes with Contact Form 7 so new and current clients can seamlessly get in touch. 

8. APOLO - Premium Portfolio HTML Template

For only $19, this is another low-cost WordPress gallery template that looks way more expensive than it actually is. The ‘Masonry Fit Width 3 Columns’ option is particularly eye-catching as when you scroll over an image, further details are revealed in a creative asymmetric way.

You can choose between 7 headers and 8 pre-made homepages too which are sure to spark some ideas of how you’d like your own site to look. 

9. Flying - Interactive Portfolio WordPress Theme

This is a memorable WordPress gallery theme that has its own style. The image gallery on the site’s homepage springs to life as soon as it’s touched by the cursor and reveals further information about the photo or featured product. 

You can also easily sort and filter the imagery in your portfolio according to different categories, so any user can find what they’re looking for more quickly. 

10. KingSize Fullscreen Photography Theme

With almost 20,000 sales, the KingSize WordPress theme photo album certainly has been tried and tested—and with an average rating of 4.5 out of 5 based on 1,745 reviews, it clearly has a lot of fans. 

This one comes with 7 galleries and supports all types of images as well as MP4, YouTube, Vimeo, and other embeds. It also offers unlimited colors or skins so you can customize the theme to suit your photography or general branding. 

11. LENS - An Enjoyable Photography WordPress Theme

Not only does this WordPress theme photo album ooze style, but it comes with loads of features to help you spread the word about your business. It’s social-friendly so includes the Tweets widget as well as article sharing capability on Facebook, Google+, and Twitter—as well as social meta tags and icons. 

There are also more than 600 google fonts to choose from and unlimited colors so you can let your creativity go to town and ensure your WordPress gallery theme represents you in the right way. 

12. Almera | Model Agency & Photo Portfolio WordPress Theme

This WordPress gallery theme has been around for some time—it was first introduced back in 2013. That being said, it’s updated regularly, with the latest update in May this year, so it’s certainly not being left behind. 

The developers seem to genuinely understand the needs of its users and therefore unlimited portfolios and galleries are included. It comes with video tutorials which are the first port of call for any questions along the way, plus it collects many top reviews for its customer support. 

13. Core | Photography

You can’t get much cooler than this template which offers a subtle reflection below each of the images displayed. The horizontal slide action forces the eye to pay attention to each of the photos in the gallery, it’s a distinct feature as many templates tend to opt for vertical scrolling. 

It comes complete with widgets including recent posts and popular posts to help you keep your content fresh.

14. Photography WordPress

With 24 demos and more than 70 gallery and portfolio layouts, this is a photo gallery WordPress template with customization at its heart. It’s hard to pick a favorite layout as the template offers so much variety—you can either choose to display one image on the homepage or a selection of your best shots. This one also offers the option to add a direct purchase link so visitors can instantly buy after viewing a gallery slideshow. 

15. KON/CEPT - A Portfolio Theme for Creative People

A real perk of this template is the ability to combine any vertical with horizontal imagery without impacting the site’s seamless design. Plus, depending on the amount of content you’d like to display, you can choose between 4, 3, and 2 column grids—a great option if you’re just starting out and will be adding to your photography as you go along. 

You also have lots of flexibility in terms of navigation styles and can choose from full, sidebar, minimal, or classic. 

16. Oyster - Photography

Gutenberg optimized, this template is not only super customizable, it couldn’t be easier to use—simply drag and drop content blocks to where you want them to live and away you go. 

Again, this is a template that has it all—fullscreen design to show off your favorite pics, it’s responsive and retina-ready, it offers light and dark skins, plus it supports fullscreen video. The image flow gallery is a particularly attractive feature. 

17. Novo – Photography WordPress Theme

This almost brooding site puts the photography front and center—in fact, it entirely removes other distractions completely. The way the images scroll through the site gives the template a luxurious and high-quality feel. It also offers simple photo optimization to prevent any slow loading times which can negatively impact bounce rate. 

Although this one has loads of features so will have a wide appeal, its sophisticated vibe means it would very much belong to an ultra-cool design studio. 

18. Grand Photography WordPress

With the developers boasting more than 100,000 happy customers, if you opt for the Grand template you’ll be far from the first to invest in this theme. Also, with more than 144 predesigned galleries and pages, it’s easy to imagine how your own WordPress site can look. My favorite gallery option is ‘Justified Wide’ as it offers the chance to hero a shot while also allowing users the chance to quickly scroll through others to see if any other imagery is more suitable for their needs. 

19. Umbrella - Photography WordPress Theme

This template screams cool. Almost looking like it belongs to the pages of a high-end fashion magazine, the full-width imagery naturally scrolls with smooth animations, allowing the users to be naturally guided through the portfolio. Videos are also fully supported. 

20. Maroon - Photography 

A great thing about this theme is although photography remains the focus, there’s plenty of room to either add copy to tell your story or play around with the image sizes to best fit the content you have available (or both!). There are 32 galleries to choose from so you can find the perfect match.

Now the Fun Begins! 

There you have it, 20 creative WordPress photo gallery themes to take you into 2020. Although I’ve picked my favorites, there are plenty of other excellent templates to discover over on ThemeForest so do make sure to check it out. Did I miss a template you think deserves to make the cut? Let us know in the comments below!

More Photography WordPress Themes

• WordPress Themes
  18+ Best Photography WordPress Themes for Creatives (2019)
  Brenda Barron
• WordPress Themes
  10 Common Regrets When Selecting WordPress Themes (+ Great Theme Examples)
  Hermione Wright
• Inspiration
  Best Photography Portfolio Themes for WordPress
  Ian Yates
• Art Direction
  Choosing the Best Photos for Your Website
  Eric Karkovack

Any wedding requires thorough planning, thinking, and many decision-making processes. When deciding whether your special event will have a website or not, a lot of factors kick in. 

Whether the aim is to keep things traditional, or digitalize the invitation through a landing page, or put a countdown online to remind everyone of that special day, falling in love with the right wedding theme isn’t always easy. 

“Love can't always be perfect. Love is just love.” – Massimo, The Wedding Planner

Top Wordpress Wedding Themes on Themeforest

Bright, airy, classic, or romantic–just like picking out a wedding cake there are myriad styles to choose from when considering your premium wedding WordPress theme! To assist in the decision making process we’ve compiled some of the very best premium wedding templates available on Themeforest right now.

1. Marriage - Responsive Wedding Wordpress Theme

Marriage WordPress theme is a best selling theme which has been chosen by over 2,000 couples for their special event. It has been chosen because of its unique design and features which includes a non-branded AJAX powered admin panel, a countdown on the homepage paired with a carousel and image slider.

2. Wedding Day - Wordpress Theme

The Wedding Day is a lovely premium and niche theme suitable for weddings and wedding planning businesses. It has a purpose-oriented design and is well suited for both users with no programming skills whatsoever and seasoned developers. 

It includes a vast collection of elegant predesigned pages that be used for various purposes; such as countdowns, photography, and gallery pages.

3. GeekLove - A Responsive WordPress Wedding Theme

GeekLove is a beautiful, clean, minimal, and responsive WordPress theme for special family events, mainly oriented at weddings. 

With an elegant design and rich features, this premium WordPress wedding theme will let you create a website for your wedding in no time!

4. SayYes - WordPress Wedding Theme

Say Yes is an elegant, beautiful and modern premium wedding WordPress theme that features premium functionality like the Revolution Slider, custom wedding-oriented functionality like events and photo galleries, location maps and customized Google mapping support. 

With a loveline story widget and a customizable RSVP form, Say Yes does seem like a great theme you could “say yes” to when it comes to making a choice for your wedding website.

5. Fleur - Wedding Theme

Fleur is a premium WordPress theme meant to be used for wedding celebrations and wedding businesses; an optimal choice when it comes to building a sublime website that will get you noticed. 

With Fleur’s wide array of home and inner pages, powerful elements, and practical features, this theme allows for a showcase of absolutely every aspect of your wedding business.

6. OneLove - The Elegant & Clean Multipurpose Wedding WordPress Theme

OneLove is an elegant and clean wedding theme with 22 homepages designed for a personal wedding, marriage anniversary, and wedding planning agency. 

The theme lets  you connect with your guests, put more info about your wedding events, or even share your happy moments to them with an RSVP Form.

7. The Aisle - Elegant Wedding Theme

Come and take a walk down The Aisle! A wedding planner’s dream, this premium WordPress theme comes with everything you could ever need for your wedding website. 

It includes a vast collection of charming predesigned home and inner pages that can be used for all kinds of purposes; from wedding announcements, photography and gallery pages, to wedding invitations, RSVP pages, and much more.

8. Love Story - A Beautiful Wedding and Event Planner WordPress Theme

Love Story is an elegant, stylish, and alluring wedding and event planner WordPress theme with a rather fashionable and tender design. 

It is well suited for a wedding planning agency, an individual planning their wedding, or any event planning company.

9. Lily - WordPress Wedding Theme

Lily is a beautifully handcrafted responsive wedding WordPress theme that comes with a large collection of native WordPress features that will let anybody create an outstanding, good-looking, and well functioning website in minutes.

10. The Wedding - Elegant Wedding WordPress Theme

This premium WordPress theme features an elegant and classy look that would give any site an outstanding look and feel. With an extremely easy set up process and beautiful layout, this theme will definitely add that special touch to any wedding.

11. Wedding Day - Birthday, Marriage & Event WordPress Theme

Wedding Day is an elegant, attractive and fully responsive premium WordPress wedding theme that has a fashionable, clean, and fresh look. 

Wedding Day is designed for any wedding or engagement event that helps you showcase all of the information to the wedding guests or make an invitation for your marriage party.

12. Cherished - Responsive Wedding WordPress Theme

Cherished is an elegant, clean, and beautifully hand-crafted responsive wedding WordPress theme. It comes with a large collection of native WordPress features so you can be sure that you will get the wedding website you deserve in just a few moments.

13. Neeqah - Wedding WordPress Theme

Neeqah is a great premium WordPress wedding theme that comes with tons of features to make it easy to set up your wedding site. Neeqah is easy to work with thanks to its fully widgetized homepage, allowing you to control the layout using a simple drag and drop functionality.

14. Sweetinz - Creative OnePage Wedding WordPress Theme

Sweetinz is a clean and elegant one page wedding WordPress theme, designed and developed perfectly for couples who want to create their own wedding website. it comes with 5 color schemes and features a color-picker that adapts the theme for all activities. 

With that and its other features, the theme is super easy to set up and even easier to use.

15. Grand Wedding WordPress

Grand Wedding is a responsive, clean premium WordPress theme for all matrimonial events. Built with the latest technology in mind, Grand Wedding has a responsive layout which makes it look great on all devices. 

It has predefined styling, multiple templates, and many features built specially for wedding planning activities, all of which can be imported with one click.

16. Gretna Green - Wedding Theme

Gretna was created in an elegant manner with a gentle color palette. It has all the necessary features for seamless wedding organization. Packed with stylish gift registry, invitation card functionality, and a RSVP form, Gretna Green is lovely in all details.

17. Union - Wedding and Event WordPress Theme for Variant & Visual Composer

Union is a tastefully styled wedding theme packed with handy features. With multiple options available for each beautiful section, this premium WordPress wedding theme comes with a multitude of features. 

Union’s RSVP forms include styled elements for your guests to personalise their RSVP with meal options, song requests, or anything that would be needed–all delivered in an email using Contact Form 7.

18. Alis - Wedding Planner

This lovely, premium WordPress niche theme is built for weddings and wedding planning businesses. Its delicate design and layout designs are easy to use by people of all skill levels. 

It includes a vast collection of elegant predesigned pages that can be used for various purposes–wedding announcements, photography and gallery pages, including the possibility of adding the wedding venue locations on the map.

19. WP Forever - Responsive WordPress Wedding Theme

WP Forever is a clean and elegant premium WordPress wedding theme that is great for wedding invitations or engagement events. It comes with wedding-oriented features such as a countdown, couple timeline, location map, and RSVP forms. 

Furthermore, this theme is fully responsive and optimized for mobile devices.

20. Plan My Day - Wedding / Event Planning Agency WordPress Theme

Plan My Day is a beautiful, responsive, and attractive wedding and event planner WordPress theme that has a fashionable and tender design. Developed with a multipurpose-orientation in mind, this theme will work great when it comes to designing an event-oriented website.

21. Grenda - Event Planner WordPress Theme

Grenda is a delightfully creative and elegant catering service WordPress theme that is perfectly suitable for event planning at all levels. This theme comes with several homepage design layouts along a variety of service categories, menus, and functional galleries for images and videos.

22. Bloom - WordPress Wedding Theme

Bloom is a beautifully designed, mobile-friendly WordPress wedding theme that is ever-growing with additional features being added constantly. This theme lets you collect your guests’ RSVPs, post photo galleries to your blog, add location maps of your events, create timeline schedules, and share important information with ease.

23. WeddingCity - Directory & Listing WordPress Theme

In case you’re looking for a wedding vendor and supplier directory or marketplace that combines vendor-oriented and couple-oriented features, this premium wedding WordPress theme is a great choice to consider. 

It has an extensive list of features, layouts, and many potential uses within the event planning realm. 

24. Nikah - Wedding Organizer & Planner

Nikah is a premium wedding WordPress theme that is suitable for wedding organizers and planners. Nikah uses a drag and drop page builder that allows for building page elements, making it easier to arrange any layout. 

The theme comes with an extensive list of theme options. With a header and footer builder option, this theme lets you take control over a multitude of variables when it comes to building this theme’s structure.

25. Lavelo - Wedding WordPress Theme

Lavelo is a clean and modern premium wedding WordPress theme that was created for couples that want to build their own wedding website. The theme layout contains custom made pages and is paired with a bunch of extensive functionality, such as an RSVP form, a photo gallery, and countdown to event dates. 

There is no doubt that Lavelo will make your wedding website look impressive, inviting, and attractive to your guests.

26. Moments - Wedding & Event Theme

This premium WordPress wedding theme was designed in an elegant manner. The theme is packed with a versatile set of layouts and includes shop functionality that can facilitate the sale of goods through the website. 

Dearly Beloved, This Concludes Our List of Marriage WordPress Themes

Here ends our list of more than 25 premium marriage WordPress themes. We’re curious to hear which of the themes you liked the most and what your preferred style for a marriage theme might be. Let us know in the comments below!

More Marriage and Matrimony on Tuts+

• WordPress Themes
  Top 10 WordPress Wedding Themes (+ Tips to Build Your Wedding Website)
  Hermione Wright
• Weddings
  50 Stylish Wedding Invitation Templates
  Melody Nieves
• Fonts
  How to Choose the Best Wedding Fonts for Invitations and More
  Grace Fussell

Google's Material Design is ubiquitous in modern mobile apps. Perhaps it's because most people today have come to love its bold colors, subtle shadows, and minimalist layouts. Wouldn't it be great if you could easily apply the same design language to your websites and offer visitors a user experience they're are well accustomed to? Well, with MDBootstrap, you can.

MDBootstrap, also known as Material Design for Bootstrap 4, is an opensource UI kit that allows you to use Bootstrap 4, a CSS framework you might already be familiar with, to create fully responsive websites that have a Material Design look and feel. It comes with over 500 components, dozens of animations, and support for several JavaScript frameworks, including jQuery, Vue, and React.

In this step-by-step tutorial, I'll show you how to add the MDBootstrap UI kit to your web projects and use some of its components.

Or, if you want to get started right away with a professional Bootstrap theme, check out some of our ready-to-go templates.

• Bootstrap
  15 Feature-Packed Bootstrap Admin Templates
  Ian Yates
• Bootstrap
  20 Amazing Bootstrap Templates to Try in 2019
  Paula Borowska

1. Setup

MDBootstrap is available on cdnjs, and several other CDNs. Therefore, you don't need to download it to your computer to be able to use it. But adding it to a web page—along with all its dependencies—does only take a few minutes.

Start by creating a new HTML document and opening it using your favorite text editor. Then add the following HTML5 boilerplate code to it:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>My Page</title></head><body></body></html>

The MDBootstrap UI kit consists of just two minified files: mdb.min.css and mdb.min.js. It does, however, depend on Bootstrap, jQuery, and Font Awesome to provide several features.

So, inside the head tag of the HTML5 document, add the following link tags:

<link rel="stylesheet"
   href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"><link rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"><link rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/css/mdb.min.css">

Next, towards the end of the body of the document, add the following script tags:

<script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">    </script><script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js">    </script><script type="text/javascript" 
    src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.8.10/js/mdb.min.js">    </script>

At this point, the web page is ready to display Material Design components.

2. Creating a Header

The first component of a Material Design web page is usually a header. It acts as a container for the navigation bar, in which you can not only display your company's logo and name, but also add links to other important pages of your website. In the Material Design spec, the navigation bar is often referred to as the top app bar.

To create a header, all you need to do is use the header tag. Creating a navigation bar, however, is a little more involved.

First, you must create a nav tag and assign the navbar class to it. This creates a basic navigation bar with a white background. If you want to give it a color from the Material palette, you can use one of the many color classes available. They have intuitive names such as purple, red, and blue-grey.

Inside the tag, you can then use the navbar-brand class while specifying your company's name or logo.

<header><nav class="navbar purple navbar-dark navbar-expand-md"><a class="navbar-brand" href="https://example.com">
        Bob's Store</a><!-- More code here--></nav></header>

Note that when you're using dark colors for the navigation bar, you should add the navbar-dark class to it to ensure that the text inside is readable.

Including links to other pages of your website is as easy as creating an unordered list having the navbar-nav class, with its items having the nav-item class.

<ul class="navbar-nav ml-auto"><li class="nav-item"><a class="nav-link" href="#">Home</a></li><li class="nav-item"><a class="nav-link" href="#">Products</a></li><li class="nav-item"><a class="nav-link" href="#">Offers</a></li><li class="nav-item"><a class="nav-link" href="#">About Us</a></li></ul>

In the above code, the ml-auto class pushes the links to the opposite end of the navigation bar.

If you try looking at the web page in a browser now, you should see a header that looks like this:

3. Using the Grid

To add actual content to the web page, you'll want to use the responsive grid system that Bootstrap offers. For the sake of a realistic example, let's add two cards to the page, placed in a single row having two columns.

Start by creating a div element with the container class. It will serve as a container for all the rows and columns we add to this document. Inside it you can create rows and columns using the row  and col-md classes. Because all of this is going to be the main content of the page, it's a good idea to wrap it in a main tag.

<main><div class="container"><div class="row"><div class="col-md"></div><div class="col-md"></div></div></div></main>

The col-md class ensures that both the columns have the same width and fit inside the row on screens whose width is at least 768 px. To target smaller or larger screens, feel free to experiment with the col-sm and col-lg classes.

You can now create cards inside both the columns using the card class. With MDBootstrap, your cards can have images, titles, buttons, and text. Here's the code for a sample card that has all of them:

<div class="card"><img class="card-img-top" src="tomatoes.jpg"><div class="card-body"><h4 class="card-title"><a>Cherry tomatoes to get costlier</a></h4><p class="card-text">With a no-deal Brexit, you're likely to 
    pay 10% more for cherry tomatoes next month.</p><a href="#" class="btn btn-primary">More</a></div></div>

Similarly, go ahead and add another card to the page, this time in the second column. For best results, I suggest you use images that have the same dimensions.

<div class="card"><img class="card-img-top" src="raw.jpg"><div class="card-body"><h4 class="card-title"><a>Raw fruits and vegetables for breakfast?</a></h4><p class="card-text">Raw fruits and vegetables that have been thinly sliced are great way to start your day.</p><a href="#" class="btn btn-primary">More</a></div></div>

As you may have noticed, the kit has intuitively-named classes, such as card-title and card-text, that help you quickly style the contents of your cards. Similarly, the btn and btn-primary classes help you give Material styles to your buttons.

With all the above changes, your web page should look like this:

4. Creating a Form

Material Design forms have a very distinct look and feel. The design language goes into exhaustive detail about what each form element should look like, when it should be used, and where it should be placed.

MDBootstrap has styles for several HTML5 form elements. By using them, you can be sure that your forms conform to most of the guidelines of Material Design.

Let us now create a simple form your visitors can use to sign up for a newsletter. It shall have two text fields, one for a name and one for an email address. Additionally, it shall have a submit button.

The form will need its own row and column, so you must create them first. Because it's alone, the column will stretch to fill the entire row by default. By qualifying the col-md class with a number, and by using the offset-md class, you can control the size and the position of the column in the row.

<div class="row mt-4 mb-4"><div class="col-md-8 offset-md-2"><!-- more code here -->                                    </div></div>

In the above code, the mt-4 and mb-4 classes give the row appropriate top and bottom margins.

Inside the column, create another card. It'll serve as a container for the form and all the text associated with it. Optionally, you can use the card-header class to give a header to the the card, and thus the form too.

<div class="card"><h4 class="card-header white-text purple">Subscribe to us</h4>                        <div class="card-body"><!-- more code here --></div></div>

To create the form, all you need is the form tag. But you must remember to add the form-control class to each text field you add to the form. If you have a label associated with it, you must also wrap them both inside a div  element whose class is md-form. The following code shows you how:

<form><p class="h6 grey-text">Stay updated and get the latest 
        information about all our offers and discounts right
        into your inbox.</p><div class="md-form"><input type="text" id="fname" class="form-control"/><label for="fname">Your full name</label></div><div class="md-form"><input type="email" id="email" class="form-control"/><label for="email">Your email address</label></div><div class="d-flex justify-content-around"><input type="submit" 
            class="btn purple white-text" value="Submit"/></div></form>

Here's what the form should look like now:

Conclusion

You now know how to create simple web pages using the Material Design for Bootstrap 4 UI kit. In this introductory tutorial, you learned how to use several important components offered by the kit, such as navigation bars, cards, and form controls. You also learned the basics of positioning the components using Bootstrap 4's grid system.

To know more about MDBootstrap, do refer to the official documentation. 

• Bootstrap
  15 Feature-Packed Bootstrap Admin Templates
  Ian Yates
• Bootstrap
  20 Amazing Bootstrap Templates to Try in 2019
  Paula Borowska

The purpose of a “Coming Soon” page is to drive excitement, display work that is in progress, inform the users about the status of the website, and make a holding page more engaging that simply displaying a blank or an error of some kind. 

Things to Consider when Selecting a Coming Soon WordPress Page

1. Look for Informative Elements

Informative elements such as countdowns and calendars are crucial as they turn a simple coming soon page into something that users can work with. As long as the ticker displays an accurate date, it can be an extra visual element that pumps up the design of a coming soon page, as well as adding function.

“Spark urgency by using a timer, but make sure that you respect your promises.” – WP Amelia

2. Capture Valuable Information

Although a coming soon page only displays an excerpt of a site that is yet to go live, this is a great opportunity to capture your future users’ email addresses. 

By doing this, perhaps signing them up to your newsletter before the website is even live, you’ll get the opportunity of informing your users about the eventual launch and keeping that email address for future marketing purposes.

The Best WordPress Coming Soon Pages on Envato Market Right Now

We decided to list the best coming soon premium WordPress themes available on Themeforest right now–there’s a wide selection to get stuck into!

1. Bufet - Multi Concept Software & App Landing WordPress Theme + RTL

Bufet is a powerful “software and application” landing page WordPress theme that is fully responsive and backed by a beautiful design. 

This premium WordPress theme (which is a multipurpose theme) features a great coming soon landing page that can be designed through the advanced drag and drop page builder that comes along with the theme.

2. Rabbit - Exclusive Coming Soon WordPress Theme

Rabbit is a minimal but highly functional coming soon WordPress theme that includes a multitude of features for extensive usability, including Mailchimp-ready forms, customizable templates, beautiful background effects, and a page builder that makes the customization options almost endless.

3. Woody - Exclusive Coming Soon WordPress Theme

Woody is another beautiful coming soon WordPress theme that features extensive functionality and technical capabilities. A working contact form, custom backgrounds, VC addons and AJAX subscription functionality which is a great additional extra.

4. Mountain - Exclusive Coming Soon WordPress Theme

Mountain is a business coming soon page for WordPress. This theme comes with dozens of background effects, unlimited page variations, a functional visual composer, a fully responsive design, and well-written, clean code that backs up all these features.

5. Phoenix - WordPress Minimal Multipurpose Portfolio with Visual Composer

Phoenix WordPress Theme is a multipurpose template that can be used by a creative agency or as a personal portfolio for a freelancer. 

In amongst all its multipurpose features it also has a coming soon page, making it a great starting point for when a fully-fledged theme is not yet needed.

6. Vangard - A Theme for Freelancers and Agencies

Vangard is a premium WordPress theme that comes with everything a creative agency, design studio, or freelancer would need. Packed with 15 creative homepages and vast functionalities, this theme is great for showcasing work and projects.

Take a look at the striking coming soon page shown below:

7. Gravity - Multi-Purpose Coming Soon Theme

Gravity is an innovative and easy to use premium coming soon/under construction WordPress theme that comes with integrated theme options, a page builder, and design tool that creates a multitude of options for customization. 

8. EventMe - Corporate Event Landing Wordpress Theme

EventMe is a corporate WordPress landing page that is second to none in its suitability and adaptability for managing multiple types of events. It is fully responsive and is equipped with its own carousel. The theme is well equipped to handle all types of events and functions with excellent customizability and feature availability. 

Although not an exclusive coming soon page as its primary function, the theme features beautiful and customizable coming soon pages that can be used for various purposes.

9. Overton - Creative Theme for Agencies and Freelancers

Overton is a premium WordPress template that was with a branding agency’s need in mind. Overton comes with vast layout styles so anyone can create personal portfolios. 

The theme features a beautiful and interactive coming soon page that can be leveraged for personal needs, be that your upcoming portfolio or any other kind of website considering the multi-concept style of the theme.

10. Woodsman - Exclusive Coming Soon WordPress Theme

Woodsman is a minimal, responsive and business-oriented coming soon WordPress theme. This multipurpose, customizable theme comes with Mailchimp-ready, working contact forms, and custom backgrounds for an even greater number of configuration options.

11. Wiz - The Smart Multi-Purpose WordPress Theme

Wiz is a multipurpose responsive retina ready WordPress theme which supports WooCommerce, bbPress, WPML, RTL language scripts, page builder, boxed and wide layouts, a mega menu, portfolio, smart skin, SEO, shortcodes and many other customization features.

12. BuildPress - Multi-purpose Construction and Landscape WP Theme

BuildPress is a simple to use but feature-rich construction-oriented WordPress theme. The theme mainly targets construction business websites and similar peripheral businesses. 

If your construction business website is still in the process of being built out, this theme will allow for a beautiful coming soon page display.

13. Bridge - Creative Multipurpose WordPress Theme

Bridge is a premium multipurpose WordPress theme that’s perfect for just about any business or individual. Whether you are a creative, a corporate team, a lawyer, a medical doctor or a freelancer looking for a modern portfolio website or a personal blog, Bridge is a great option to consider. 

With a simple or creative version of a coming soon page, this theme definitely has a lot to offer, not only in terms of modules and homepage styles, but also coming soon pages for your website.

14. KALLYAS - Creative eCommerce Multi-Purpose WordPress Theme 

Kallyas is another premium WordPress theme that is lightweight, responsive, and features a drag & drop visual page builder that not only lets you build homepage, blog, or portfolio pages but coming soon pages as well. 

Featuring registration and email capturing forms, countdown widgets, and a bunch of individual elements to pick from, this theme will work great when it comes to setting up a coming soon page.

15. Expedition - Exclusive Coming Soon WordPress Theme

Expedition is a minimal, responsive and rather creative premium coming soon WordPress design that includes premium plugins like WPBakery Page Builder, and Ultimate VC Addons. 

Expedition features several coming soon layouts with video or static backgrounds which give you the flexibility of choosing amongst a bunch of great potential options.

16. Kenozoik - Vibrant Portfolio Theme

Kenozoik is another premium WordPress theme oriented at creative individuals or agencies.

With its set of vibrant homepages and coming soon pages, introducing your work in an impressive way has never been easier. Its vast choice of layouts lets you share your illustrations and projects in myriad ways considering the flexibility it provides in terms of video, static and creatively designed backgrounds that can be used on the coming soon pages.

17. Vakker - Creative Design Agency Theme

Vakker is a premium WordPress theme that’s packed with a dozen homepage designs, several customizable inner pages and a coming soon page design that will help you showcase your work in a better way. The minimalistic design and fully responsive layouts are its top features to consider, making it a great choice to pick.

18. Dekko - Creative Agency Theme

Dekko, a premium WordPress theme that helps you create a stunning online presentation of your work! The theme comes with a plethora of layouts and styles, which include metro style, project presentation templates, vCard, and coming soon pages. With several features and customization options, Dekko is an excellent choice for a design agency and creative business.

19. Applay - WordPress App Showcase & App Store Theme

Applay is a drag-drop builder powered WordPress theme that features a multitude of layouts, unlimited colors and customization options that let you showcase your upcoming or already existing mobile application through the existing landing pages.

20. Hero - Bold Multipurpose WordPress Theme

Hero, another premium WordPress theme, is a fully responsive single and multi-paged template built on the Bootstrap framework. The theme comes with several intro sections which include a full screen background, a parallax view, and a full-screen video that makes it possible to build a great coming soon page.

21. Dezibel - Music Band & Musician WordPress Theme 

Decibel is a premium Wordpress theme oriented at music bands, and singers that want to showcase their discography, upcoming performances, or simply provide more information about themselves and their work. 

Furthermore, the theme features a well-designed coming soon layout.

22. Stability Responsive MultiPurpose WordPress Theme

Stability is a clean, multi-purpose and responsive premium WordPress theme that is suitable for corporate business sites, creative agencies and portfolios. With a flexible and dynamic interface, the theme includes unlimited color schemes, premium sliders, several layouts, and a working coming soon page with a countdown and email capturing script.

23. iTera - IT, SEO, Digital WordPress Theme 

iTera is a versatile premium WordPress theme that is oriented towards freelancers, agencies and consulting companies. It features a wide range of components and styles that help customize this theme in an easy manner. 

With a coming soon page that reflects the modern design of its other pages, it’s definitely a great choice to consider when looking for coming soon WordPress themes.

24. Maestro - Business Wordpress Theme

Maestro is another versatile WordPress theme that includes a multitude of styles for creating a beautiful and well-functioning website. The website features a multitude of photo galleries, blogs and personal pages alongside a sleek-looking coming soon page that is packed with all the necessary functionality.

25. MiEvent - Responsive Event & Music WordPress Theme

MiEvent is a premium WordPress theme that’s clean, fully responsive and modern. The theme comes with dozens of pre-made demos that are ready to use. Built on the Bootstrap framework, the theme also features several interactive seasonal design elements (such as Christmas-oriented design elements).

26. Medina - Medical Wordpress Theme

Medina is a beautiful medical WordPress theme oriented at private clinics, personal doctor pages and dental clinics. With a plentitude of premade demos and pages, the developers created a vast array of components and styles that pair perfectly with the theme’s coming soon layouts.

27. CUPID - Adorable Kindergarten WordPress Theme

CUPID is a premium WordPress theme oriented towards kindergarten and preschool websites. 

This niche theme features an appropriate design manifested through minimalistic and elegant interfaces. The theme comes packed with a functional countdown and email capturing elements that will work great on a kindergarten’s coming soon webpage.

This Wraps Up our Showcase!

This wraps up our showcase of more than 25 beautiful and functional premium WordPress Coming Soon Pages which we hope you’ve enjoyed. Be sure to let us know in the comments below which your favorite coming soon theme is and what features you think a coming soon page should always feature!

More Coming Soon Resources

• Web Design
  How to Make a Great (Coming Soon) Website Product Launch Page
  Brenda Barron
• Landing Pages
  Create a “Coming Soon” Page in 60 Seconds
  Kezz Bracey

Producing videos and hosting live streaming events with digital accessibility best practices in mind is difficult! This article will answer any questions you might have about digital accessibility in multimedia.

Accessibility Talks (Backstory)

As an effort to spread awareness about digital accessibility and to highlight some awesome speakers, I founded a virtual meet-up group called Accessibility Talks about three years ago. In the beginning, the group met informally and the sessions were not recorded, but soon I realized we needed to record the talks and post them on a media platform so we could share the knowledge with others. 

I chose the YouTube platform due to its flexibility and available accessibility options, including auto-captioning. Little did I know at the time, the level of complexity that comes with producing videos and hosting live streaming events with digital accessibility best practices in mind! 

Below are some tips, tricks, and information about alternative media types (such as captions, transcriptions etc.) to help make your next multimedia video or live stream event more successful!

International Day of People with Disabilities (IDPWD)

Today (December 3rd) is International Day of People with Disabilities. IDPWD is an organization and an annual event, initiated in 1992 by the UN, in celebration of people living with disabilities.

This digital accessibility article is to recognize and promote the IDPWD’s efforts in overcoming barriers for people with disabilities.

Alternative Multimedia Types and Requirements

When it comes to producing accessible digital content of any kind, the best resource is the Web Content Accessibility Guidelines (WCAG) from the W3C group. The goal of this group is to provide a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally, and to make digital content more accessible to people with disabilities.

For this article, we will focus on multimedia best practices, since the videos I produced also included audio. For more information on the WCAG requirements for other types of media (ex. audio-only files like a podcast), please consult the audio-only and video-only sections of the guidelines.

For accessible multimedia on the web, we need to be concerned with four alternative media types: 

1. captions
2. transcripts
3. audio descriptions
4. sign language interpretation

Below are some definitions of each, some information on which disabilities they target, plus the requirements for each level of WCAG conformance (A, AA, or AAA).

1. What Are Captions?

Captions are text synchronized with the multimedia for people who cannot hear the spoken words.

People often confuse “captions” and “subtitles”, but they are not the same thing. Both are text synchronized with the words in a video and both often appear in the same location in the media (usually the bottom of the screen). However captions can be thought of as a transcription of dialogue for people who are Deaf and hard-of-hearing, while subtitles are essentially helper text for people who can hear the audio but may not understand what was said (ex. garbled speech or words spoken in a language you don’t understand). 

Note: there are some geographical differences in defining captions vs subtitles - so double-check the terminology in your location.

Captions come in two forms - open or closed. Closed captioning (CC) can be turned off by the viewer with the click of a button, while open captions are essentially burned into the video and cannot be turned off. Depending on the situation or how the multimedia is going to be consumed, one method might be preferable to the other.

Auto-Craptions

Another aspect of captions is auto-captioning. That is when the media platforms like YouTube will use speech recognition software to try and understand the words being spoken and add them to the multimedia as captions. As exciting as this technology is, it is not yet 100% reliable. In fact, many dub these “auto-craptions” as they are so awful that they are almost funny. 

Your best bet at this point in time is to use the auto-captioning feature as a “first step” in your captioning process. For example, on the Accessibility Talks videos, I upload the media, let YouTube auto-caption it, then I go back and edit the file with the proper captions.

Captions are beneficial to a lot of people including Deaf or hard of hearing, people who are not fluent in the language used in the audio content, and people with cognitive disabilities who may need to see the words, not just hear them.

WCAG Requirements for Captions

Pre-recorded Multimedia:

• A: REQUIRED
• AA: REQUIRED
• AAA: REQUIRED

Live Multimedia:

• A: ENCOURAGED
• AA: REQUIRED
• AAA: REQUIRED

2. What Are Transcripts?

Transcripts are the full text of the spoken words and important visual information in the media file, to read as an alternative to watching or listening to the media file.

Transcripts are text-based documents that serve as an alternative to information presented in an audible and visual format. They are similar to captions, but they take the experience to the next level by including important sound effects and other significant visual descriptions (ex. describing eerie sounds in the background). 

Transcripts help people who are hard of hearing, Deaf, or Deafblind. Transcripts are also great for people with cognitive disabilities or people who want to browse through audio and video information at their own speed. For an added bonus, Search Engine Optimization (SEO) gets a boost when your multimedia includes transcripts since search bots cannot crawl your multimedia, but they can crawl your text transcripts.

WCAG Requirements for Transcripts

Pre-recorded Multimedia:

• A: ENCOURAGED
• AA: ENCOURAGED
• AAA: REQUIRED

Live Multimedia:

• n/a

3. What Are Audio Descriptions and Extended Audio Descriptions?

Audio descriptions are a version of the multimedia file that includes a narrator explaining important visual information (such as unspoken actions and events) for the benefit of people who cannot see what’s happening on the screen.

Audio descriptions, unlike captions and transcripts, are a recording of a person explaining the visual aspects of the video that aren’t in the video’s original dialog or narration (ex. describing facial expressions or scenery). Audio descriptions should convey visual information verbally–that dialogue and other sounds cannot.

Sometimes audio descriptions need to be very detailed due to large amounts of information but there are not enough pauses in the video for audio description to work; enter extended audio descriptions. Extended audio descriptions are essentially expanded audio descriptions. In extended audio descriptions, a video will pause to give a narrator enough time to convey the information in the video.

Audio descriptions and extended audio descriptions primarily help people who are blind or have low vision but could also help people with some cognitive disorders as well.

WCAG Requirements for Audio Descriptions

Pre-recorded Multimedia:

• A: REQUIRED(or Media Alternative)
• AA: REQUIRED
• AAA: REQUIRED

Live Multimedia:

• A: OPTIONAL
• AA: OPTIONAL
• AAA: OPTIONAL

WCAG Requirements for Extended Audio Descriptions

Pre-recorded Multimedia:

• A: OPTIONAL
• AA: OPTIONAL
• AAA: REQUIRED

Live Multimedia:

• n/a

4. What is Sign Language Interpretation?

Sign language interpretation for multimedia is when you add a video of an interpreter, usually shown in a box to the side of the video, who narrates the audio portion through sign language. If you are live streaming your event, typically the sign language interpreter is in the same room as the speaker to one side.

Sign language interpretation is important for multimedia since for many people who are Deaf, sign language is their first and most fluent language. Sign language interpretation is often is more expressive than just written transcripts, so can provide a much richer experience than captions or transcripts alone.

However, sign language interpretation can be cost-prohibitive to many organizations. And even if you do add sign language interpretation to your multimedia, you need to understand that it has regional limitations as there are over 300 different sign languages throughout the world. So adding one sign language interpretation to your multimedia would not be enough if you are targeting a global audience.

WCAG Requirements for Sign language interpretation

Pre-recorded Multimedia:

• A: OPTIONAL
• AA: OPTIONAL
• AAA: REQUIRED

Live Multimedia:

• A: OPTIONAL
• AA: OPTIONAL
• AAA: OPTIONAL

Steps for Making Your Multimedia Accessible

As you can tell from this list, there are a lot of factors to think about when working with accessibility and multimedia. I encourage you to work your way backwards, from the most recent media to the oldest. 

1. Focus first on getting your captions in place and accurate–they can be time-consuming to add, but they are also a fairly straightforward task. You can also pay for captioning services if you have the money but not the time to do them.
2. Next, work on your transcripts or audio descriptions. Often you can get a good baseline script from your captions. 
3. If you need to add sign language interpretation, leave that to the pros. There are often local companies and organizations who can point you in the right direction for this task.

Conclusion

Depending on your level of WCAG conformance and how much effort you’ve already put into your multimedia, you may have to rethink your workflow a bit. But don’t be discouraged! With all things accessibility, if you can bake it into your process you will save time, money, and overall effort.

Learn More About Digital Accessibility

We have lots of a11y tutorials and articles on Tuts+. Take a look at our  Web Accessibility: the Complete Learning Guide or dig into the following recommended posts to get started:

• Accessibility
  Building an Inclusive Web: Why Accessibility Matters
  Sami Keijonen
• Accessibility
  Keyboard Accessibility Tips Using HTML and CSS
  Anna Monus
• Accessibility
  Accessible SVG: Methods for Adding Alternative Content
  Carie Fisher
• Accessibility
  Quick Tip: Use the “lang” Attribute for Better Accessibility
  Eric Bailey

Elements are the building blocks of web pages–when building websites, you’re actually “laying bricks” of elements. When these elements are laid, you make use of CSS to tweak their appearance and their placement.

To properly place an element on a web page in relation to other elements we make use of things like padding and margins. These are:

• Padding: the space between the element border and the content area.
• Margin: the spaces between an element’s border and that of its neighbouring elements 

Here’s how the padding and margin of an element are visualized using Google Chrome’s Web Inspector:

This should be clear enough, but there is a situation where the margin between one element and that of a neighbor will merge (or collapse) into a unified space; such that there is no way to properly tell whose space it is:

This might have happened in your own code if you have been writing HTML and CSS for a while. And it can be a thorn in your side if you have no idea what is happening behind the scenes!

To properly understand it, we need to start with what it means for margins to collapse.

What is a Collapsible Margin?

Good question, glad you asked. According to W3C:

“In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.“ – W3C

Let us take the words apart bit by bit.

So “adjoining margins” are margins that are next to each other, and they can combine to form a single margin. But does this mean that all adjoining margins are collapsible? The answer is no!

In CSS, adjoining margins are vertical margins that meet some rules. Yes, you read that correctly! It means that horizontal margins (margin-left and margin-right) are not considered adjoining margins. Additionally, there are some situations where vertical margins aren’t considered adjoining.

Let’s begin with some scenarios where collapsible margins do happen.

1. Parent Element and First Child

In the code sample below:

<div>Outside the parent</div><div class="parent"><p class="child">
    Here is a paragraph housed in the parent element</p></div>

The second div is the parent and it contains a child p. If we apply a margin-top property to the parent and first child, causing both margins to touch, the margins will be collapsed.

div {
  background: #3d8bb1 /* blue */;
}
.parent {
  margin-top: 30px;
  background: #49b293 /* green */;
  height: 150px;
}
.child {
  margin-top: 10px;
  background: #b03532 /* red */;
}

You might expect a margin to show directly above the red p element, giving us a slice of green above it.

However, the parent and its child are aligned at their top edge, then the margin with the larger value is chosen (30px) to appear them both, and the smaller one is collapsed to 0. If the child had the larger value (say, 50px) then that would be chosen to be the margin above them.

If you measure it, you’ll see that the space between the child’s border and the outside div is 30px.

Negative Margin Values

If both margins were to have negative values, like this:

.parent {
  margin-top: -30px;
  background: #49b293 /* green */;
  height: 150px;
}
.child {
  margin-top: -10px;
  background: #b03532 /* red */;
}

The chosen margin is again the largest, which in this case is -10px.

However, if one margin is a negative value and the other, we combine both values:

.parent {
  margin-top: 10px;
  background: #49b293 /* green */;
  height: 150px;
}
.child {
  margin-top: -30px;
  background: #b03532 /* red */;
}

In this case, the margins will be added, which will give us a result of -20px.

Important: values are determined in this exact same way in all scenarios where margins collapse.

2. Parent Element and Last Child

As you might imagine, collapsible margins can also happen between the margin-bottom of a parent element and the margin-bottom of a child element. Suppose we have HTML that looks like this:

<div class="parent"><p class="child">
    Here is a paragraph housed in the parent element</p></div><div>Outside the parent</div>

And styles that looks like this:

.parent {
  margin-bottom: 30px;
  background: #49b293 /* green */;
  height: auto;
}
.child {
  margin-bottom: 10px;
  background: #b03532 /* red */;
  height: 100px;
}

The margin-bottom with the larger value will be used, while the other will be collapsed to 0. The difference here is that the height of the parent has to be set to auto.

3. Adjacent Elements

Within a parent element, collapsible margins will happen when the first child element has margin-bottom applied to it, and the next element has margin-top applied to it:

<div class="parent"><p class="first-child">
    Here is a paragraph housed in the parent element</p><p class="second-child">
    This is the second child</p></div>

If we apply margin-top and margin-bottom like this:

.first-child {
  margin-bottom: 30px;
  background: #b03532 /* red */;
  height: 150px;
}
.second-child {
  margin-top: 20px;
  background: #da6f2b /* orange */;
  height: 100px;
}

In the same way we calculated before, the space between the border of the child elements will be 30px, not 20px.

3 Points to Remember About Collapsing Margins

That brings us to the end of this introduction to collapsing margins in CSS! In addition to what we have seen above, there are some important things I should reiterate regarding the value of a collapsed margin.

1. Block Level Elements

Collapsible margins are only possible when using block-level elements.

2. Margins Only Collapse Vertically

Only vertically adjoining margins will collapse, and even then not always.

2. Padding, Borders, and Clearance

If we added padding, border, or clearance to the elements in the above examples, the collapsing will not be applied. In other words, one way of getting rid of collapsible margin behavior is to add some sort of separation (border, padding, or clearance) between the margins. 

Conclusion

While collapsing margins might sometimes be a pain, understanding how and where they take effect is very helpful, especially if you encounter them accidentally!

Learn More CSS Basics

• CSS
  Understanding CSS Inheritance (Inherit, Initial, Unset, and Revert)
  Kingsley Silas Chijioke
• CSS
  How to Use New CSS “:is()” for Easy Element Targeting
  Kezz Bracey
• CSS
  Demystifying CSS Pseudo-Classes (:nth-child vs. :nth-of-type)
  Kingsley Silas Chijioke
• CSS
  7 CSS Units You Might Not Know About
  Jonathan Cutrell

Perhaps you create jewelry and would like to turn your hobby into a business, or maybe you’re ready to start selling a wide range of products from other brands. Whatever your long-term plan, one of your first ports of call should be to launch your website—after all, what better way to get more eyes on your products?

Best Selling Jewelry WordPress Themes for WooCommerce

Luckily for you, you don’t need to spend too long away from the drill press as you can set up a high-quality website quickly and easily with the WordPress themes available from Themeforest. You don’t even need any web design or development experience—all you need to do is download one of over 1,300 WooCommerce themes and customize it to give the site its distinct personality. 

With the WordPress WooCommerce plugin your site will do more than just look good as users will be given the opportunity to purchase directly from your online store. 

Sounding good? Read on for my round-up of 20 WooCommerce jewelry themes to take you into 2020 and beyond. 

1. KALLYAS - Creative eCommerce Multi-Purpose WordPress Theme

With more than 3,000 reviews and an average rating of 4.71 out of 5, the people behind KALLYAS must be doing something right. The jewelry demo theme is one of the 65 demos available and it seamlessly shows just how luxurious this template can look. 

You can add slick sliders and there’s plenty of room for product imagery plus more generic shots of people wearing the jewels. 

2. Karo | Handcrafted Jewelry WooCommerce WordPress Theme

This jewelry store Wordpress theme comes with everything you need to take your business to the next level. It’s mobile-optimized, GDPR ready, has multiple page layouts, plus is suitable for use with touch devices. 

There are also more than 22 jewelry-themed demos to scroll through which may prove useful in inspiring your own site’s design. 

3. Custom Made | Jewelry Manufacturer and Store WordPress Theme

This elegant theme comes with 3 distinct homepages to choose from and it’s integrated with useful plugins like Essential Grid, Mailchimp, Instagram Feed, and Slider Revolution—as well as the all-important WooCommerce. I like the way copy be laid out in this template, it looks more like a high-end magazine than a typical website page. It’s a classy touch. 

4. DiCi - Jewelry Shop WordPress Theme

Offering unlimited colors, this is a jewelry Wordpress theme with plenty of room to make it your own! It also comes with Font Awesome icons to help you signpost content, plus typography is flexible so you can pick a style that suits your business. Six demos are designed especially for varying jewelry businesses, including boutique, marketplace, and custom-made. 

5. Jewelry & Watches Online Store WordPress Theme

Another of the versatile jewelry themes, this one has 6 distinct homepages each created with jewelry in mind. I like Homepage 3 in particular due to its ability to combine clean design with all the relevant information required. 

Large image content blocks and galleries with overlaid text make this one stand out. Plus, there’s a newsletter sign up option which is tastefully integrated into the design. 

6. Primrose - A Minimal and Creative WooCommerce Theme

If you’re looking for clean, simple, and modern, then this is one of the best jewelry templates to go for! With social media integration, a useful product rating system, and plenty of room for imagery, you can let your products do the talking. It’s also Gutenberg-optimized which makes editing your site even easier.

7. Manufactura - Handmade Crafts, Artisan, Artist

If you’re looking to sell handmade jewelry then this is a perfect template to choose. 6 demos all named after months of the year show the versatility of the template but space for stand-out imagery is the overarching theme linking all demos. This would work especially well if you had photography showing the craftsmanship involved in creating each of your pieces. Customers who have purchased the theme reference the useful support too, which bodes well especially for WordPress beginners. 

8. Jewelrica - eCommerce WordPress Theme

A useful feature of this template is it comes with a simple to use blogging platform which can help you keep fans updated with product news etc. You don’t have to stick to writing copy alone as Jewelrica also supports video, audio, and image galleries. It’s translation ready so you can adapt the language based on your chosen market. 

9. Minimalo - A Minimal Blog WordPress Theme for Creative Websites 

With the demos each opting for monochrome color schemes, this is a classic template that you’re not likely to tire of. It’s fully responsive and mobile-ready so you don’t need to worry about content displaying poorly for some users. You can also easily categorize products which can help users to find what they’re looking for quickly. 

10. Bonfire - Creative Multipurpose WordPress Theme

This versatile theme comes with a jewelry demo so you can see exactly how it could work for your business. It comes with a wide variety of content blocks which means there’s lots for users to explore—on the homepage alone there’s space for testimonials, overlapping imagery, videos, and info about the business. On the WooCommerce-enabled product imagery, there’s also the option for a ‘quick view’ so users can find out more without needing to click away from the homepage. 

11. Pablo Guadi - Precious Stones Designer & Handcrafted Jewelry Online Shop Wordpress Theme

If part of your unique selling point is the story behind your brand or products, then this is one of the best eCommerce jewelry websites you can go for. There’s a timeline feature to shine a light on the company’s heritage and the option for full-width imagery gives the site a modern feel. It also comes with the popular Revolution Slider which enables pictures to transition in a smooth and aesthetically pleasing way. 

12. Handmade Shop - Handicraft Blog & Creative Store WordPress Theme

With a more crafty feel than some of the other jewelry WordPress themes, this may be just what you’re after. It has full social sharing capability to ensure fans can spread the word when it comes to your products and it comes with unlimited menu colors so you can adapt your website’s appearance based on your own branding. If you’re looking for Pinterest vibes, this is your template!

13. Donare - Gift Store WooCommerce Theme

Released in August 2019 and with very limited downloads to date, this theme is very much a newcomer on the block. However, being able to blend imagery with vibrant color blocks is a nice touch and helps to set the theme apart. Plus, the featured product option will be useful to retailers as it will enable you to highlight the items you’re looking to push—you can add pins to show sale items and new products too. 

14. Time - Minimalist WooCommerce WordPress Theme 

A fashion-forward template which also incorporates bold splashes of color into the design, this is another great option if you’re selling contemporary wares. There are lots of novel transitions that spring into action when the user scrolls, meaning you can see the price, name, and rating of each product without even needing to click. There are also unlimited header layouts to help you further stamp your personality on your site. 

15. Corano - Jewellery Theme for WooCommerce WordPress

Another new theme, Corano was introduced in 2019 and has collected an average of 4.25 out of 5 stars. It comes with all the key plugins including Mailchimp, Contact Form 7, and Slider Revolution, as well as the all-important WooCommerce. There’s also a Daily Deal Module where you can display a countdown timer with sale products on the homepage. 

16. Elegance - Jewelry Responsive WordPress Woocommerce Theme

If you’re looking for a theme that has been around for longer, then Elegance is definitely worth considering as it was introduced back in 2016. With more than 15 layouts included, you can either be guided as to how your site will look or you can go off-grid and customize the template based on your own needs. The ‘just added’ banner on the homepage demo is a helpful way to keep users updated on what’s new. 

17. FAB! - Material Design WooCommerce WordPress Theme

The developers behind this template don’t let a single centimeter of space go to waste. Images include content blocks with direct links to purchase and banners can be added to highlight sales and other news. It also makes the most of animations and scrolling over homepage images reveal the product in other colors or from a different view. 

18. StarBella - Multipurpose WooCommerce Theme

With more than 1,000 sales, this straightforward theme has popularity on its side. Like many of the best jewelry themes out there, it’s light on copy and heavy on imagery. StarBella is also easy to integrate with Google Maps to help your users find your physical store and it has been rated highly by many users when it comes to customer support. 

19. Flone – Minimal WooCommerce WordPress Theme

At just $19, this is one of the best jewelry website design options out there for those on a budget. A bold banner at the top of the site catches the eye, and then the user can scroll down to peruse the product selection. It’s also been designed with speed in mind and has an average PageSpeed score of 99%. 

20. Nitro - Universal WooCommerce Theme from ecommerce experts

With more than 4,000 sales, this is another popular theme that certainly deserves to make the top 20 list. The developers’ experience is clear as there are what seems like endless numbers of demos and homepages to inspire you when it comes to building your own site. It also comes with more than 200 PSD layered files which you can edit however you’d like. 

Over to You!

Now you’ve explored 20 of my favorite WooCommerce jewelry themes, you’re ready to start building a site of your own! However, if you’re looking for something a little different, head over to ThemeForest and explore the full range. There are hundreds of great themes to choose from so you’re sure to find exactly what you’re looking for. Before you embark on your WordPress journey, make sure to check out 10 Common Regrets When Selecting WordPress Themes which may well save you time in the long-run. 

Are there any other themes you think should have made the cut? We’d love to hear from you so let us know in the comments below. 

More WooCommerce Themes for Your Online Shop

• WooCommerce
  19+ Best WooCommerce Themes: To Make a Better Online Store
  Brenda Barron
• eCommerce
  15+ Best eCommerce Website Templates: Updated for 2019
  Brenda Barron

It can be difficult to differentiate yourself in the real estate industry, but a beautiful website can certainly help. 

Finding the perfect real estate theme is a challenge, considering the sheer number of themes available. That’s why we’ve curated a premier selection of our responsive WordPress real estate themes, so you can easily find the features you want along with an attractive site design made for 2020. 

Best Creative Real Estate WordPress Themes for 2020 on Envato Market

Envato Market’s WordPress real estate category, home to almost 200 premium real estate themes has you covered: 

Here’s a collection of the best-selling responsive WordPress real estate themes currently available on Themeforest:

1. MaisonCo - Single Property WordPress Theme

Let’s begin our list with a very stylish and elegant theme, built to market a single property. Whether you’re promoting a high-class apartment, a holiday villa, or even office space for rent, MaisonCo puts your property in the right light. 

Three homepage options, all equally stylish, give you options straight off the bat. The “property showcase” and “schedule visit” form will make your website functional, and the “dynamic nearby places” feature will give users an instant feel for which restaurants and amenities can be found in the local area.

2. Zoacres - Real Estate WordPress Theme

Brand new at the time of writing, Zoacres is already a trending item on Themeforest. Consider this WordPress real estate template if you want a fast-loading and fully responsive theme furnished with plenty of options. Zoacres supports Google Places and Google Maps, providing a user-friendly interface and an advanced search experience. Visitors will enjoy the custom pins, detailed maps, and geolocation features.

If that still isn’t enough to convince you to take a look, Zoacres includes a frontend property manager so users can manage their listings or properties, while the backend manager allows the site admin complete control over all listings.

3. Houzez - Modern WordPress Real Estate Theme (2020)

If you’re looking for a modern WordPress real estate template that allows you to showcase your properties as well as manage them on the backend, look no further than Houzez. 

It’s been updated for 2020, with a number of new features. The theme allows you to coordinate all your agents, accept property submissions, and allow your visitors to search for properties by their proximity to your agency. 

You can also show related properties on individual property pages and display floor plan information. Along with powerful admin panel, Visual Composer, and Revolution Slider, you can customize every aspect of your site, and create stunning slideshows of your properties. 

4. Residence - 2020 Flexible Real Estate WordPress Theme

The Residence WP theme comes with 11 pre-made demos and several possible ways to display your properties. You can choose between a grid, list, and half map options, which come in handy for quickly locating the property on the map. 

There are over 350 organized theme options so you can create a truly unique and modern real estate website in 2020. This WordPress real estate website template also offers advanced search capabilities, property submissions, the ability to create membership packages, and much more.

5. Real Estate 7 - Premium WP Real Estate Theme

The Real Estate 7 WordPress real estate theme has been updated in 2020. It offers plenty of features that will allow you to engage more users, capture more leads, and earn more commissions. Some of the features include:

• powerful admin panel with live previewer
• front-end listing submission and management system.
• responsive design
• one-click demo import
• co-listing support with the ability to add one or more agents to any listing.
• full booking system
• advanced search
• IDXpress support

Build a great real estate website, with a modern design, and professional elements you need, quickly.

6. Real Homes - Clean WordPress Theme for Realtors

Unlike free WordPress themes for real estate that may lack attention to quality, this premium WP template was freshly updated for 2020, and comes with the professional features you need to make a great website.

The Real Homes theme is one of the best-selling themes on ThemeForest. It has a clean and elegant design and comes with customizable properties search, Google Maps integrations, the ability to compare different properties, list and grid layouts, and more. 

Take advantage of beautiful gallery templates to showcase your properties and customize every aspect of your real estate website with the built-in customizer. 

7. WP Rentals - Booking & Accommodation WordPress Theme

Consider using WP Rentals if you want a top WordPress theme to easily publish and offer properties for daily rent. Each property supports the ability to set a custom price per night, depending on the length of booking period. Users can also register and submit their own listings while you earn a commission, which you can accept through PayPal, Stripe, or wire transfer.

8. MyHome - Innovative 2020 WordPress Real Estate Theme

The MyHome theme comes with nine different home page layouts and three versions of property sliders. You can even use videos to promote your properties and capture visitor’s attention. This great real estate website template is also translation-ready and allows properties to load on the pages without having to refresh the pages.

9. RealtySpace - Professional Real Estate WordPress Theme

Try out the RealtySpace theme if you want a set of a real estate website template for WordPress that will help you manage your properties and accept both paid and free submissions. The users can’t stop raving about it:

“Amazing theme and above all a flexible and very very patient support! they are really kind, reactive and helpful !!! I warmly recommend it.”

This best WP theme also offers an elegant design and tons of customization options. You can design a great real estate website with it fast. 

10. Beyot - Easy to Use Realty WordPress Theme Design

The Beyot WordPress theme offers all the features you need to create a powerful, responsive real-estate website. Along with a stunning design, it also includes IDX support, and includes ease to use features. You can customize the colors, fonts, and more through an intuitive theme options panel. 

This realty WP theme also includes tons of video guides and you can choose from any of the six+ demos to create a unique website. Visitors can submit the properties on the front-end and the backend and you can easily set new property types.

11. Real Places - Customizable WordPress Theme for Realtors

The Real Places responsive WordPress real estate theme is packed with high quality features and is very popular among users. 

It comes with advanced properties search functionality that lets you customize which fields you want to display, in what order you want those fields to appear, and what data will be displayed in those fields. This is perfect for letting visitors search the properties according to specific requirements. 

You can customize the layout with a drag and drop manager and use the admin panel to customize colors, fonts, and more. On top of that, the theme offers various property listing layouts, listing attachments such as floor plans, display related properties, and accept front end property submissions.

12. Windsor - Apartment and Single Property Real Estate Theme

If you sell a single property, consider the Windsor theme as it can be easily adapted to accommodate both single properties or multiple ones. On top of the Visual Composer plugin, this WordPress real estate website templates is compatible with bbPress and BuddyPress so you can add social features to your site and encourage discussions between users.

13. Landmark - Versatile Real Estate WordPress Theme

The Landmark is a versatile and visually stunning real estate WordPress theme with a modern design and tons of demo layouts and page templates. The main features include:

• responsive design
• four custom post types for properties, agents, galleries, and testimonials
• advanced and live property search
• frontend submission
• floor plans
• favorite properties
• AJAX reviews and ratings
• membership packages/pricing table

Unlike free responsive real estate WordPress themes, you can count on the quality of the code and easy to use features this theme comes with. Use it to quickly make a real estate website with a modern design in 2020.

14. FullHouse - Creative WP Theme for Real Estate

The FullHouse theme comes with a flexible layout system. Its setup is dedicated to managing your properties and agents. It includes a powerful search and filter system that allows user to find the best property for them. Here’s what customers have to say about the theme:

“Great features, nice design, and functional capable. Most functional real estate theme.”

The theme is also SEO optimized and integrates perfectly with the IDX plugin. Make a quality real estate site with this modern responsive WP template.

15. ReEstate - Powerful Real Estate WordPress Template

The ReEstate theme is a great choice for property brokers and agents who want a top site design to showcase their listings with. Some of the robust features include:

• multiple home styles
• three slider styles
• custom post type for properties
• property list & grid view
• DsIDXpress supported
• map search
• powerful theme options
• front-end Login/Registration form
• translation-ready

Use this WordPress theme to make powerful real estate websites in 2020. 

16. Solus - Professional Real Estate Theme for WordPress

The Solus WP theme comes with a detailed documentation file that will help you set it up just the way you want. It’s infinitely customizable and includes demo content so you don’t have to start from scratch. 

In terms of real estate website template features, it’s perfect for showcasing a single property. It offers property galleries and a video tour as well as Google Maps integration. It also has the ability to list all the features of the property directly on the homepage. 

17. OpalHomes - 2020 Modern Single Property WP Theme

The OpalHomes real estate WordPress template was exclusively built for single property sale and rental websites. It comes with one of the best, flexible layout system. It includes more than six unique demos, creative design, and ultimate core features to build an outstanding professional property website. 

You can display all the important property amenities as well as a list of dynamically updated nearby places. Your visitors can use a booking form to schedule a tour and there’s an option to upload a video tour of the property.

18. Hometown - Stylish WordPress Real Estate Template

If you’re on the lookout for a stylish real estate WP theme, look no further than Hometown. The elegant website template design along is sure to help you attract more leads and generate more sales. It also includes important realty features like property search, property slider, front end user login and property submission, and IDX plugin support.

19. Apartment WP - Advanced Responsive Property Theme

The Apartment responsive WordPress theme offers a clean and modern design with options like advanced Google Maps, Street View, and panoramas with stunning visual effects. It’s designed to help you to stand out from your competitors. The theme is also fully customizable and comes with numerous layout possibilities. 

20. 2DreamVilla - Stunning Real Estate WordPress Theme

Make your real estate site the best it can be in 2020. The DreamVilla theme for WordPress is sure to capture the attention of your visitors not only because of its features, but because of its stunning parallax design as well. 

This great real estate website template integrates with the WP Quick Booking Manager Pro Plugin. It allows you to display nearby places, add a sortable property gallery, and much more. Even users agree it has all the right features:

“Great theme, with very good possibilities. It is well built, with a high-quality design. Thank you!”

21. Zuhaus - Real Estate Theme

The Zuhaus real estate WordPress theme has everything you need to create a complete real estate agency website. You can quickly add stylish looking layouts for apartments and property's, implement advanced filters, view an advanced statistics dashboard, and much more. 

22. WpEstate Real Estate WordPress Theme

With Wp Estate you can allow your users to submit their properties. This can be a great opportunity to create a fee-based subscription to help your real estate business generate more revenue. This real estate wordpress theme allows for google maps integration, advanced search options, and a comprehensive list of property listing options. Here is what users of this theme are saying about it:

"One of the best designs for real estate. The theme is easy to customize and the support is very good and tries to help you out as much as possbile."

23. MyHome Real Estate WordPress

MyHome is a premium Real Estate WordPress that is flexible and innovative. When creating a real estate website, it needs to be user-friendly and this theme ensures that your users will have a positive experience. 

The drag and drop page builder easily allows you to customize the design to suit your specific agencies' needs. One important feature that you can find on this theme is the ability to change user roles. You can grant different levels of access on your WordPress website to allow specific team members to perform various tasks on your website. 

24. HomePress - Real Estate WordPress Theme

This real estate WordPress theme features 10 premade homepages to get your website design jumpstarted. With this theme, you can easily integrate Yelp, contact forms, video backgrounds, and the popular email service provider MailChimp. With the unlimited search fields, autocomplete search function, and radius search and geolocation, your website visitors have the power to find the exact property they are looking for. 

5 Benefits of Using Premium Real Estate WordPress Themes 

Are you still not convinced that using a premium real estate theme will help you create a fully functional website for your agency? I have included a list of five reasons why you should use one of Themeforest’s real estate themes below. 

1. No Coding

Absolutely no coding is required with any of these themes. This gives you the flexibility to create a completely custom website with a user-friendly front and back end interface.

2. Save Time and Money

By having a theme that is already designed and has key functions implemented, you can kick start the website creation process without having to start from scratch. Without a premium theme, time and money would need to be spent hiring a website designer to create mockups for your website, implement, and build them. 

3. Dedicated Support

All of the themes listed above come with customer support to help you solve any problems that may arise when using them. 

4. You Are in Control

While you can use these WordPress real estate themes right out of the box, you still have complete flexibility and control of how your website will function and look. Different themes may offer various features that you can change, but overall the themes give you a level of customization that allows you to fit the theme to your exact needs as a real estate agent. 

5. Content Management

When maintaining your website, you will be spending most of your time editing your apartment and property listings. The real estate themes are built to aid you in the listing creation and editing process making it much easier to manage all of your listings. 

Grab a premium real estate WordPress theme now!

5 Design Tips for Real Estate Websites to Get More Leads

Choosing the right theme for your real estate website is a great way to come up with an attractive design that also has all the features you need. Here are five tips that will help you make the most out of your new Real Estate WordPress theme.

1. Optimize for Photography

One of the very first things your visitors want to see when they come searching for a property will be the photos. Ensure your chosen theme has plenty of space and features that allow you to showcase both the exterior and the interior of any listed property. You can take advantage of property galleries like those offered in Real Homes to add multiple images to each listing.

2. Make Use of the Booking Form

Adding a booking form makes it easier on the visitors to take action and schedule a tour of the listing. This is a great way to encourage interaction and increase the chances of closing more sales. Consider using a theme like OpalHomes to easily add it to your site.

3. Add Featured Listings to Your Homepage

You can also highlight your own listings on the homepage by adding a featured listing slideshow. This allows you to showcase your best properties and gives visitors a way to easily find the property they’re interested in.

4. Include Useful Information

Listing property information is an absolute necessity, but you can take it a step further and include information that will help your customers get familiar with all the terms. Consider creating a separate page that provides them with an explanation of the buying process as well as terms such as a fixed rate mortgage, adjustable rate mortgage, and more.

5. Incorporate a Signup Form

Lastly, keep in mind that some of your visitors may not be ready to schedule a tour right then and there. Don’t miss out on the opportunity to capture their email address. Include a strategically placed email sign up form so you can stay in touch with them. That way, you can nurture the relationship until they’re ready to buy.

Build Your Real Estate Site With One of These Top 2020 Themes

An attractive website with all the right features can help you land more leads and close more sales in 2020. 

There are plenty of ways to create a professional and modern real estate website for property listings with these easy to use templates. Browse our wide selection of creative real estate premium templates for 2020 from Envato Market, or, if you’re on a tight budget, you can opt for one of our free WordPress themes.

Editorial Note: Our staff updates this post regularly—adding creative real estate premium templates with the best, creative and professional designs.

A lot of little details go into creating a beautiful and functional website. As such, one of the biggest challenges of being a web designer is producing quality work with peak efficiency. Building layouts, adding special effects and ensuring that your work can be viewed on any device takes time.

That’s why designers are increasingly taking advantage of helpful tools like page builders. They allow you to create amazing page layouts in short order – and without the burdens of writing and testing code. The result is an attractive, fully-functional website built in a fraction of the time.

Say Hello to Elementor for WordPress

When it comes to WordPress page builders, Elementor stands out as a top choice. Both the free and pro versions of the plugin offer tons of features aimed at making the design process as efficient as possible.

And, while you can certainly build custom pages from scratch, Elementor templates can save you even more time. These prebuilt page templates cover virtually every potential use and can also be customized to fit your needs.

Today, we’ll introduce you to some of the top Elementor templates you can use to spice up your projects!

How to Use an Elementor Template

Elementor templates are easy to install and use, but there are a few different methods for doing so. And it all depends on where your templates come from. Let’s take a look at three common scenarios.

Elementor Library

When you install Elementor (free or pro) on your website, you will gain access to a selection of free templates (pro users gain even more options). Here’s how to find and use them:

1. Create a new page or post inside WordPress and click on the Edit with Elementor button. That will take you inside Elementor’s page builder UI.
2. Once inside the UI, you’ll notice two icons (a pink plus sign and a gray folder) in a rectangle at the center of the page. Click on the gray folder (hovering your cursor over this icon will show an Add Template tooltip).
3. From there, you’ll have access to a number of templates. Just click on the one you want to use, then click the Insert button to add it to your page.

Envato Elements WordPress Plugin

Did you know that there are hundreds of great Elementor templates available through the free Envato Elements WordPress plugin? Install it to gain instant access to a variety of both free and premium template kits – each offering various matching components of a website.

 Here’s how it works:

1. Create a new page or post inside WordPress and click on the Edit with Elementor button. That will take you inside Elementor’s page builder UI.
2. Once inside the UI, you’ll notice three icons (a pink plus sign, a gray folder and a green leaf) in a rectangle at the center of the page. Click on the green leaf (hovering your cursor over this icon will show an “Envato Elements” tooltip).
3. Browse through the available templates and click on the one you want to use. On the next screen, click on Import Template.
4. Exit the Envato Elements window and you’ll be taken back to the Elementor UI.
5. Click on the gray folder (hovering your cursor over this icon will show an Add Template tooltip).
6. The newly-installed template will appear in the My Templates tab within the Library. Go there and insert your new template.

Note: A subscription to Envato Elements is required to access premium Elementor templates.

Downloaded Templates

If you have downloaded your Elementor Template from somewhere else, the process is slightly different. You’ll have to import either a .JSON or .ZIP file into your website. Here’s how:

1. Create a new page or post inside WordPress and click on the Edit with Elementor button. That will take you inside Elementor’s page builder UI.
2. Once inside the UI, you’ll notice two icons (a pink plus sign and a gray folder) in a rectangle at the center of the page. Click on the gray folder (hovering your cursor over this icon will show an Add Template tooltip).
3. This time, we’ll click on the Import Template button (a circled arrow icon) on the upper right of the Library window. You can then upload the .JSON or .ZIP file containing your template.
4. The newly-installed template will appear in the My Templates tab within the Library. Go there and insert your new template.

The Best Elementor Templates

Want to hit the ground running with a terrific webpage design? These Elementor templates will do just that.

Note: In order to help you know which installation method to use, we’ll provide the source of each template (Elementor Library, Envato Elements or Download).

1. Homepage – Business

This clean, colorful homepage is a great fit for just about any type of business. It features beautiful illustrations, an integrated count-up script and sharp typography. A short and simple option.

Source: Elementor Library

2. Product – App

Want to promote your product or service? This template comes complete with everything you need for a one-page rundown. You’ll find a lovely hero section with space for a featured video, an easy-to-read pricing table, FAQs and testimonials.

Source: Elementor Library

3. Music Festival – Home 1

This template offers a convenient schedule section that will help keep your visitors in the know. It’s a great fit for concerts, conferences or other events where attendees will check back repeatedly. There are even a number of features that take advantage of Elementor Pro.

Source: Envato Elements

4. Landing Page – Vacation

Complete with a full-screen video background, your visitors will have a hard time resisting the urge to book a vacation. The template relies on rich media to tell the story. In addition, there is great color contrast and an interactive slideshow.

Source: Elementor Library

5. Maintenance Mode 3

Whether your site is undergoing some routine maintenance, or you just want a slick “coming soon” page, this simple template is a great choice. It features a unique look, yet doesn’t overwhelm with text. Use it for concise messaging and as a gateway to your social media accounts.

Source: Elementor Library

6. Wedding Planner – Testimonials

Testimonials can be a deciding factor for potential customers. This template gives them a clean, professional place to promote your business. And, you can edit each element to match your own website.

Source: Envato Elements

7. One Page – Architect Office

Here’s a highly-visual landing page that gives off a professional vibe. There is plenty of space for photos, and the included parallax effect will keep users engaged. To top it all off, you’ll find spots for basic content and contact information.

Source: Elementor Library

8. Web Agency – Portfolio

Portfolios are vitally important to creative professionals. With this template, you’ll be able to show off your work in style. Sporting a bold and colorful look, you’ll also find lots of extras like scroll-based animation and a working gallery.

Source: Envato Elements

9. About – Startup

A good About page doesn’t have to be overly complicated – and this Elementor template is proof. It’s beautiful, colorful and has space for the essentials. Of course, since these templates are all fully-editable, you can expand as needed.

Source: Elementor Library

10. Free Coach Home Page

Consultants, personal trainers and (yes) coaches will love this free home page template. Featuring bold text and lots of whitespace, it’s a great vehicle for introducing yourself to the world. It also looks great on small screens.

Source: Free Download (elementor-den.com)

11. Tech (general business) – Features

The beauty of this template is in its unique layout. With a rounded hero area and offset columns, each piece of content occupies its own place in the sun. The colorful images help to make for a pleasant user experience.

Source: Envato Elements

12. About – CV

If you’re a freelancer for hire, this CV template is the perfect place to show off your skills and experience. The multicolumn layout keeps things interesting, while the typography is spot-on. The interactive skills chart is the icing on the cake.

Source: Elementor Library

13. Electronic Product – Products

For sites with just a few products, this template offers an attractive layout. The included product table allows you to list features, pricing and a photo. Plus, several calls to action will help steer customers in the right direction.

Source: Envato Elements

14. Recipe – Recipe 1

Foodies will love the well-thought-out layout of this recipe page template. Ingredients, steps and nutritional info are all neat as a pin and easy to digest. And there are plenty of opportunities to share delicious photographs.

Source: Envato Elements

15. Landing Page – Mobile App 1

This landing page offers a stunning home for a mobile app. It utilizes a terrific color contrast, allowing images to really stand out. In addition, you’ll find an icon-based feature list, a space for testimonials and a logo carousel.

Source: Elementor Library

16. Online Tutorials – Tutorial Series

Here’s a page with a gorgeous layout – perfect for times when you need to create an index that points users in different directions. Each card offers a colorful headline, featured image and author information. It could be a great way to list products, pages or blog posts.

Source: Envato Elements

17. Contact – Corporate

A solid contact page should get right to the point, and this template offers a great starting point. Contact information is concise and a Google Map will make it easy for users to find your location. All the basics are covered here.

Source: Elementor Library

18. Free Coffee Shop Homepage Template

Sometimes, a single page is all a business needs to share their message. This free Elementor template offers everything you might need in those cases. You’ll find a clean design, integrated hover animations and compelling section layouts.

Source: Free Download (elebuilds.com)

19. Videographer – Video Single

Here’s a great option for those of you looking to showcase video content. It features a large hero area to embed your video, along with a table of contents below. The layered look places the focus on your media.

Source: Envato Elements

20. Golf Course – Popup

Yes, there are popup templates too! This simple and attractive window invites users to book a reservation. Just note that you’ll need Elementor Pro to take full advantage.

Source: Envato Elements

Quick Tips for Using Elementor Page Templates

1. Templates Are Fully-Editable

Want to change something about your chosen template? It’s easy! Elementor’s page builder functionality applies to premade templates as well. Feel free to click on any item you’d like to edit and make it your own.

2. Templates Are Responsive

Virtually every Elementor template is designed to be fully responsive. So, you can rest assured that it will look great on any device. You can even get a sneak preview of how your template looks at various sizes within the page builder.

3. Looking for a Full Site? Use a Template Kit.

Template kits are a collection of page templates – all of which use a consistent design. Think of them as being similar to a WordPress theme. If you are looking to put a full site together quickly, this will help you get things done. Just import the kit (or individual pages) and start editing!

Beauty and Productivity

Elementor is a fantastic tool for both novice designers and seasoned pros alike. It’s easy to use and contains powerful features to help you build even complex websites in less time.

When you add Elementor templates to the mix, the whole process is made that much better. Since templates cover just about every type of page you can imagine, and come in a variety of looks, they will quickly become one of the go-to items in your toolbox.

Take a look at these video tutorials to get started using Elementor today:

• WordPress
  How to Build a WordPress Website With Elementor
  Adi Purdila
• WordPress
  How to Customize Your WordPress Website With Elementor
  Adi Purdila
• WordPress
  How to Create Awesome Popups in WordPress with Elementor Pro
  Adi Purdila

Package managers, task runners, and module bundlers are build tools that you can use for dependency management. In this article, we’ll look into how they are different from each other and what you can achieve with them in front-end development.

What is Dependency Management?

Dependency management is the process of automating the installation, updating, configuration, and deletion of libraries, packages, and tools that an application depends on. Each programming language has its own dependency management tools; from Java, to PHP, to JavaScript. 

We’re going to look into the high-levellandscape of dependency management in front-end development. Respectively, we’ll talk about the following groups of build tools:

1. Package managers (npm, Yarn, pnpm).
2. Task runners (Grunt, Gulp)–Although these are not dependency management tools, we’ll see in short how they differ from them.
3. JavaScript module loaders (RequireJS, Browserify).
4. Static module bundlers (Webpack, Parcel).

Please note that this article doesn’t provide detailed reviews of the specific tools but rather intends to show how the different types of dependency management tools relate to each other.

Dependency Management on the Front-End

On the front-end, we use JavaScript dependency management tools to keep dependencies under control. Most of these tools are Node.js modules that can be installed with npm—the default package manager for Node.js, a runtime environment that lets you execute scripts outside of the web browser.

With the progress of front-end development, dependency management has become increasingly complicated. There are many competing tools in the market, that perform similar tasks but also differ in some ways. Sometimes, dependency management tools also overlap in functionality with other build tools such as automated task runners.

Bower (R.I.P.)

Let’s start with some sad news that shows how fast dependency management is changing. If you follow front-end trends, you have surely heard about the deprecation of Bower, the once-popular front-end package manager. Although Bower is still maintained (so you don’t need to worry about your existing projects), it’s not recommended for new projects. 

In short, Bower lost the competition against other popular dependency management solutions such as: 

• the powerful combination of npm and Browserify, 
• performance-optimized package managers such as Yarn and pnpm, 
• and automated static module bundlers such as Webpack and Parcel. 

As a result, now the Bower team also recommends Yarn, Webpack, and Parcel, and even helps in migrating away from Bower.

Package Managers

Package managers allow you to load all dependencies (packages, libraries, modules) your app relies on in the right order. They also let you manage, update, modify, and delete packages as the needs of your application are changing. Most package managers keep track of dependencies with the help of a dependency tree.

npm

The npm package manager serves as the basis of most other front-end dependency management tools. This is because most of them are Node.js packages that you can install using npm. 

It’s easy to get started with npm, as it’s packaged with Node.js that you can install on your operating system by downloading the appropriate installer (Windows, macOS, Linux) from Node.js’ Download page. Once Node.js is installed on your system, you can run npm from your command line interface.

Besides being a package manager, npm is also a registry of open-source Node packages. Developers from all over the world can upload npm packages that you can add to your application with a couple of commands. This is how front-end developers have easy access to advanced tools such as PostCSS and the Grunt task runner.

Another important thing to know about npm is that it’s tied to the Node.js ecosystem. As a result, you can use it to add only Node.js packages to your application. 

As npm builds up its dependency tree outside of the web browser, you need to add all the dependencies to your application in the node_modules folder. Because this folder can contain hundreds or even thousands of files, npm is frequently used together with a JavaScript module bundler such as Browserify that bundles all dependencies and serves them to the browser as a static file. 

To make package management more efficient, npm3 introduced flat dependency trees that replaced nested trees npm used before. The new feature leads to less redundancy and a sleeker node_modules folder. This was the dependency structure Bower used—by npm adopting the feature, Bower became obsolete.

Yarn and pnpm

However, npm still does have strong competition. Most alternative package managers, such as Yarn and pnpm, mainly aim for better performance, as npm still has room for improvement in that regard. Yarn and pnpm are also Node.js packages, so you can install them with the npm install command. They achieve a faster completion time using different techniques. 

While Yarn caches packages and parallelizes operations, pnpm returns to nested dependencies but in a different way. It uses the combination of hard links and symlinks to save only one version of each module, which results in a much smaller node_modules folder.

If you are interested you can read a good npm vs Yarn vs pnpm comparison on Niccolo Borgioli’s blog and find some related performance benchmarks on pnpm’s GitHub page as well. We also have an article about the advantages of Yarn authored by Gigi Sayfan.

• JavaScript
  6 Things That Make Yarn the Best JavaScript Package Manager
  Gigi Sayfan

Task Runners (Not for Dependency Management)

Although task runners such as Grunt and Gulp can’t handle dependencies, they are frequently confused with dependency managers—so let’s quickly see how they are different. Task runners and dependency managers are both build tools but they solve a different set of problems. While dependency managers build the dependency tree of an application and load (and sometimes bundle) the dependencies, task runners automate routine tasks. 

Build processes typically consist of the same repetitive tasks that you need to perform regularly, such as minification, image optimization, CSS auto prefixing, linting, unit testing, and others. Task runners automate this process and let you create a set of automated tasks to save you manual work.

The Root of Confusion

The confusion with dependency manager tools mainly stems from the fact that task runners also require you to define your dependencies in some way. For instance, if you use Grunt you need to add your dependencies to the package.json file in the following way:

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-contrib-jshint": "~0.10.0",
    "grunt-contrib-nodeunit": "~0.4.1",
    "grunt-contrib-uglify": "~0.5.0"
  },
  "dependencies": {
    "bootstrap": "^4.2.1",
    "jquery": "^3.3.1"
  }
}

However, the package.json file doesn’t manage dependencies, it just loads the Node.js modules that Grunt will need in order to perform the task list defined in the Gruntfile. 

If you want to better understand what you can achieve with task runners, have a look at our tutorial about how to customize Bootstrap’s Sass files with Grunt, too.

• Bootstrap
  How to Customize Bootstrap’s Sass Files With Grunt
  George Martsoukos

JavaScript Module Loaders 

Now, let’s get back to dependency management tools—specifically JavaScript module loaders. Node.js has the handy require() method that lets you easily add a module to your application. However, as Node.js runs on the server-side, you can’t require Node modules directly in the browser. JavaScript module loaders such as RequireJS and Browserify provide a solution to this problem.

JavaScript module loaders let you load your JavaScript dependencies on the client-side. This means a huge performance gain, as the user’s browser is served by a static JavaScript file that includes all the dependencies and loads quickly. 

RequireJS and Browserify

It’s interesting to note that RequireJS existed before Node.js. It brought the require() method to the browser following the AMD module specification. Node.js implements the require() functionality following CommonJS which is a different JavaScript module specification. 

With the appearance of npm, the usage of RequireJS has begun to drop, however it’s still under development. It’s also important that by default RequireJS is not a Node module (although it has an implementation for Node.js), so you can also use it in other JavaScript environments such as Rhino.

Similarly to Node.js, Browserify is also an implementation of the CommonJS API. Being a Node module, Browserify uses Node.js’ require() method, which is why it’s frequently used together with npm. To provide your users with static dependencies, you can load your dependency with npm, bundle them with Browserify, then add the bundle as a <script> tag to your HTML page.

Static Module Bundlers

While JavaScript module loaders can load only JavaScript modules, static module bundlers like Webpack and Parcel can bundle any kind of frontend assets such as images, HTML, CSS, Sass, and other files. Their goal is to create static assets that run in the user’s browser like a breeze. 

In the screenshot below, you can see the logic of how Webpack works:

Webpack and Parcel

Webpack inspects your entire project, generates a dependency graph, and creates one or more bundles that you can add to your HTML file. It comes with many advanced features such as dead code elimination, require() method for CSS files, code splitting, and more. Webpack replaces package managers, task runners, and JavaScript module loaders, as it provides all three functionalities.

In the past, Webpack’s biggest drawback was the amount of configuration required. It took significant time and knowledge to properly set up a Webpack project. Parcel, a newer static module bundler came up with a solution to this problem. It introduced a zero-configuration model that was later adopted by Webpack 4.0.0 as well. 

To use the zero-config feature, you only need to run a command (webpack or parcel build), pass the entry file, and the bundler automatically goes through the entire build process, which saves a lot of time and effort compared to any other dependency management solution.

Conclusion

Currently, static module bundlers such as Webpack and Parcel are the most advanced dependency management tools in frontend development, as they let you quickly bundle all the assets you’ll need. However, for a simpler app or website, you won’t necessarily need them. 

If your go-to dependency management tool solves everything you need, it can still be a good decision to keep using it rather than picking up a new tool!

Regardless of whether you’re typing a search query into Google, YouTube, Amazon or any other major website, live search has become an essential element of modern web design. 

Live search is when you see a list of suggested search terms that updates as you’re typing, and it can be a valuable addition to any website. Today many users simply expect every website to feature live search, and you may discover that very few people are willing to hunt through your website manually. 

By helping visitors find the content that matters to them, you can keep them on your site longer, provide a better user experience and may even be able to generate some extra revenue, by making it easier for visitors to discover relevant products and services.

In this article, I’ll show you how to replace the standard WordPress search bar with a powerful search engine using the Ajax Search Pro plugin. Out of the box, this live search bar will be capable of searching any content type, including WooCommerce content. 

Once you’ve created your live search bar, I’ll show you how to enhance it with some powerful extra features, including taxonomies and custom filters.

• 20 Best WPBakery Page Builder (Visual Composer) Addons & Plugins of 2019

  Want to know the coolest and most useful new addons and extensions available for the WPBakery Page Builder? Here’re a list of the 20 best of 2019.

• 12 Best WordPress Slider & Carousel Plugins of 2020

  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...

• 20 Best WordPress Calendar Plugins and Widgets

  Whether you need an event calendar plugin, a booking system with payments, or a Google Calendar widget, this list of plugins will have something to improve...

• 20+ Best Popup & Opt-In WordPress Plugins

  If you're looking for fresh and interesting ways to encourage visitors to opt in to your email subscribers list, this awesome list of over 20 WordPress popup...

Downloading the Ajax Search Pro Plugin

The first step is purchasing the Ajax Search Pro plugin, which is available via CodeCanyon: 

If you haven’t already registered, then create your free Envato Market account.
 Head over to the CodeCanyon website, click the Sign In button in the upper-right corner, and then enter your Envato account details.


Once you’re logged into your account, go to the Ajax Search Pro listing, click Buy Now and then follow the onscreen instructions to complete your purchase.  Download the plugin when prompted. 
Unzip the Ajax plugin; the subsequent folder should contain an ajax-search-pro zip file, which you’ll need to upload to your WordPress account. 


Adding Plugins to Your WordPress Site 

Once you’ve downloaded the Ajax Search Pro plugin, you’ll need to install it:

Log into your WordPress account, if you haven’t already. 
Select Plugins from WordPress’ left-hand menu, followed by Add New.
 Select Upload Plugin. 

Scroll to the If you have a plugin in a .zip format section, and select Choose file. 
Select the ajax-search-pro file you just downloaded. 
Select Install Now. 

The Ajax Search Pro plugin will now be uploaded to your WordPress account.
 After a few moments, you should see a Plugin installed successfully message; select the accompanying Activate Plugin button. 


Assuming the plugin was installed successfully, a new Ajax Search Pro item should now be visible in WordPress’ left-hand menu.  

Creating Your Live Search Bar 

Let’s start by adding Ajax Search Pro’s default search bar to our website, which requires us to create a search instance: 

• In WordPress’ left-hand menu, select Ajax Search Pro.
• On the subsequent screen, give your search instance a name; I’m using testSearch.

Now click the Add button. This generates a shortcode that you can use to place the search bar on your website. 
Click Save. 


And that’s it! You’ve just created a basic live search bar that’s completely functional and ready to use. 

Widgets, Shortcodes, and Menus: Displaying Your Search Bar

There’s a few different ways that you can position this search bar on your website: 

• Using the WordPress editor. 

• Generating a shortcode. 

• Creating a search widget.

• Adding the search bar to an existing menu. 


Note that WordPress also provides a Replace the default theme search with... dropdown that you can use to select your Ajax search instance. However, this method isn’t compatible with all WordPress themes, so I won’t be covering it in the following sections. 

1. Using the WordPress Editor


You can quickly and easily add the search bar to your site, using the standard WordPress editor. However, this method only adds the search bar to a single page or post at a time, which can be time-consuming if you want to display the search bar across your entire site, and it doesn’t allow you to control where the search bar appears within your chosen webpage. If either of these factors are deal-breakers, then you may find it easier to use one of the methods discussed in the following sections.

To insert your search bar using the WordPress editor, navigate to the page or post where you want to display your search bar, and open it for editing.
 

In the toolbar, make sure the Visual tab is selected.
 Select the new ASP button. If this button isn’t displayed as part of the WordPress toolbar, then skip ahead to the following section for a workaround.


Select Search box, followed by the name of the search instance you just created. 
Save your changes, by clicking Update. 


Select View post. The search bar should now be displayed on your chosen page or post.


If you want to display the search bar on any additional webpages, then repeat the above steps. 


Can’t Find the ASP Button? 

If the ASP button isn’t appearing in your WordPress toolbar, then you may need to switch to WordPress’ Classic Editor.

To make it easier to switch between WordPress’ Classic Editor and the default Block Editor, I’d recommend installing the free Classic Editor WordPress plugin: 

In WordPress’ left-hand menu, select Plugins > Add New. Search for Classic Editor. When the Classic Editor plugin appears, select Install Now.


• Once the Classic Editor plugin is installed, select Plugins > Installed Plugins from WordPress’ left-hand menu.

• Find Classic Editor and click its accompanying Settings link.

• Scroll to Default editor for all users and select Classic Editor.
• In the Allow users to switch editors section, select Yes.
• Click Save Changes.

• Navigate to the page or post where you want to position your search bar, but don’t open it for editing just yet. 

• Hover over your chosen page or post, and then select the Edit (Classic Editor) link when it appears.


The WordPress toolbar should now contain an ASP button that you can use to insert your search bar into this page or post. Note that you can switch between the Classic Editor and Block Editor at any point, by hovering over the item that you want to edit and then selecting the Classic Editor / Block Editor link when it appears. 

2. Generating Search Bar Shortcode


If you need to control exactly where the search bar appears on an individual webpage, then you can generate a shortcode that you can then copy/paste into any page or post.

This is one of the most flexible ways of displaying the search bar, but you will need to manually paste the shortcode into every location where you want the search bar to appear, so this method can become time-consuming if need to display the search bar across multiple webpages. 

To generate the shortcode: 

• In WordPress’ left-hand menu, select Ajax Search Pro.
• Find your search instance, and select its accompanying Settings icon.

• At the top of the screen, click to expand the Toggle shortcodes section. 

• The Simple Shortcodes section should contain a Search shortcode. Copy this shortcode.


You can now paste this shortcode anywhere on your website; I’m pasting it into my Hello World homepage: 

• Navigate to the page or post where you want to place your search bar, and open it for editing. 

• Click to select the block where you want the search bar to appear. 

• Select the three-dotted icon, followed by Edit as HTML.

• Paste your shortcode into the exact location where you want the search bar to appear.

• Save your changes, by clicking Update.
• Select View post. Your search bar should now be displayed in the exact location where you pasted the shortcode.


3. Using the Ajax Search Pro Widget 


To provide a consistent user experience, you may want to display the search bar across multiple webpages in the same location, such as your website’s sidebar or footer. 

You can use the Ajax Search Pro widget to add a search bar to any widgetized area, and that search bar will then appear on every webpage that contains this widgetized area. Widgets are an easy way to implement a website-wide search bar, although they don’t allow you to customize where the search bar appears on an individual webpage.

To add the search bar to a widgetized area:

• In WordPress’ left-hand menu, select Appearance > Widgets. You should see several new widgets, including an Ajax Search Pro widget. 

• Towards the right-hand side of the screen you’ll find a list of all your "widgetized" areas. Decide which widgetized area you want to use, such as Blog Sidebar or Footer 1, and then drag and drop Ajax Search Pro onto your chosen area. 


• Click to expand the Ajax Search Pro widget.
• Give this search bar a descriptive title.
• Open the Select the search for... dropdown and select the search instance that you want to use.
• Click Save.


Spend some time navigating your website, and you should notice that the search bar is now appearing in your chosen area, across multiple webpages or even potentially across your entire website, depending on your WordPress theme.

4. Adding the Search Bar to Your Menu 


Finally, you can add the search bar to your website as a menu item. 

If you already have a menu in place, then this can be a way to implement a search bar without disrupting your website’s content or design. If the menu is used across your entire site, then this can also be a quick and easy way to implement a website-wide search bar. 

To add a search instance to a menu, you’ll need to have copied the search instance’s shortcode:

• Select Ajax Search Pro from WordPress’ left-hand menu.

• Find the search instance in question, and select its Settings icon.

• Click to expand the Toggle shortcodes section.

• Copy the Search shortcode value.


We’re now ready to add this search instance to our menu: 

• In WordPress’ left-hand menu, select Appearance > Menus.


Open the menu that you want to edit. If you haven’t previously created a menu, then you can create one by entering a title in the Menu Name field and selecting Create Menu. You can then add items to this menu using the Edit menu tab, and specify where this menu should appear using the Manage Locations tab. Don’t forget to save your changes once you’ve finished!


Now, under Add Menu Items, find the Custom links section and click to expand.


• Enter any value in the URL field, I’m simply using a . character. 

• Paste your search instance shortcode into the Link Text field. 

• Click Add to menu. You should notice that your shortcode has now been added to Menu structure.
• To save your changes, click Save Menu.

Navigate to any post or page where this menu is displayed, and your search bar should now appear as part of that menu.

Seeing Double? Removing the Default WordPress Search Bar

If your WordPress theme already contains a search bar, then at this point you may have multiple website-wide search bars.

To remove the search bar that’s included as part of your WordPress theme: 

• In WordPress’ left-hand menu, select Appearance > Widgets.
• Towards the right-hand side of this screen, find the widgetized area where your original search bar is still being displayed, and click to expand the Search Bar section. 

• Click Delete. The original search bar will now be completely removed from your website. 


Save Some Space: Switching to the Compact Search Bar

Up until this point, we’ve focused on ways to add Ajax Search Pro’s default search bar to your website. However, depending on your website’s theme, content and general layout, the default search bar may not be the best fit. 

Perhaps you’re struggling to find enough space for the default Ajax search bar, or it clashes with your website’s look and feel. In these scenarios, it may help to convert the default search bar into a compact search bar, which appears as a small magnifying glass icon.

When the visitor clicks this icon, the search bar will expand and they’ll be able to type their query into the search bar, as normal.

To transform the default search bar into a compact search bar:

• In WordPress’ left-hand menu, select Ajax Search Pro.
• Find the search instance that you want to convert into a compact search bar, and click its accompanying Settings icon.

• Select Layout options.

• Select Compact box layout.
• Find the Compact layout mode slider, and push it into the On position.


• Scroll to the bottom of the screen and click Save all tabs. 


This is all you need to setup the compact search bar, so head over to any webpage where the search bar appears—it should now have transformed into a compact search bar.

If required, you can change the compact search bar’s alignment so that it’s displayed to the right or the left of its assigned space. Note that depending on your website’s theme, and where the search bar is positioned, changing the alignment can have a dramatic effect, or it may be difficult to tell whether the search bar has moved at all!

To change the search bar’s alignment: 

• Navigate to Ajax Search Pro > Settings > Layout options > Compact box layout.
• Find the Compact layout alignment section and open its accompanying dropdown; choose Right or Left.
• Click Save all tabs.

You can now check your changes, by navigating to any webpage that features the search bar. If you’re unhappy with its new alignment, then you can restore the search bar to its original position: 

• Navigate to the Compact box layout screen (Ajax Search Pro > Settings > Layout options > Compact box layout.)

• Open the Compact layout alignment dropdown and select No floating. 

• Save your changes, by clicking Save all tabs.

On the Compact box layout screen, you can also change the size of the compact search bar, using the Position values fields. You can specify its size as a percentage of the parent element, although depending on your WordPress theme these percentages may not work as expected. If changing the percentage values doesn’t have any impact on the size of your search bar, then you may get better results by switching to pixel (px) values.

More Powerful Searches: Adding Taxonomy Filters

For many websites, a search bar is essential for helping visitors locate interesting and relevant content, but you can often improve the user experience by adding filters to the standard search bar.

By default, the Ajax Search Pro plugin offers a number of built-in filters, which are referred to as taxonomies in the WordPress user interface.

Let’s start by exploring these built-in filters, before moving on to creating customized filters:

• In WordPress’ left-hand menu, select Ajax Search Pro.
• Find your search instance, and click its accompanying Settings icon.

• Select the Frontend Search Settings tab.

• Select Categories & Taxonomy Terms.

Open the Select the taxonomy dropdown and choose from the available taxonomies. I’ve previously used WooCommerce to create an Amazon Affiliate store, so I’ll be giving visitors the option to filter products by brand, using the product - pa_brand (Product Brand) taxonomy.


Once you select a taxonomy, all of that taxonomy’s terms will be displayed. You can use any of these terms as a filter, so grab one or more terms and drop them into the following box: Drag the terms you want to include!


At this point you can preview how your search bar will look once it’s configured with the current settings, by clicking the Show button in the floating window that appears towards the bottom of the screen. 

The floating window will now expand into a Preview box; click Refresh to see your current settings applied to the search bar. Once you’re happy with your filters, you can publish them by clicking Save all tabs!

Displaying Your Filters: Adding a Search Settings Switch

Once you’ve configured your filters, you can specify whether they appear automatically as part of the standard search dialogue, or inside a menu that the user has to explicitly launch. 

To access these settings, navigate to Ajax Search Pro > Frontend Search Settings and make sure the General tab is selected. From here, you can choose from the following:

• Set the search settings to be visible by default. Your filters will appear automatically as soon as the visitor interacts with your search bar.

• Show search settings switch on the frontend. This adds a switch that the visitor must click, in order to launch the filter dialogue. If the user doesn’t require any filters, then they can simply click inside the search bar and type their query, without ever touching the search settings switch. 


Filters Not Appearing? 

If you’ve completed all the above steps and your filters still aren’t appearing on your website, then it may help to toggle the Show search settings… checkbox. 

Make sure you’ve saved any changes you’ve made to your taxonomy settings (by giving the Save all tabs! button a click) and then:

• Navigate to Ajax Search Pro > Frontend Search Settings.

• Make sure the General tab is selected.

• Find the following section Set the search settings to visible by default? This slider should be in the On position; toggle it off and then back on again.

• Use the accompanying Show/Hide preview panel to check whether this has coaxed your filters out of hiding. 


If this workaround isn’t successful, then you may also get positive results by toggling the Show search settings switch on the frontend? switch, which you’ll find towards the top of the screen. 

Customizing Your Filters 

Once you’ve added some filters, you may want to tweak the search bar’s filtering functionality, or alter its appearance to better suit your website’s theme.

To customize your filters, navigate to Ajax Search Pro > Frontend Search Settings and then select the Change display mode button, which launches a popup. 

In this popup, you can make the following changes: 

Adding a Title: Change the “Box Header”

You can change the taxonomy header that appears in the filter dialogue, by finding the taxonomy in question and then editing its Box header field. For example, since I’m using Product Brand, I’m going to customize its header by scrolling to Terms from product - Product Brand (pa_brand) and then editing the text that appears inside the Box header field.

Checkboxes, Dropdown, Multiselect or Radio?

By default, the Ajax Search Pro plugin displays its filters as checkboxes. Alternatively, you can open the Display as dropdown and choose from the following:

1. Drop-down


This displays all the available filters as a dropdown menu.

When you select Display as: Drop-down, you’ll get access to some additional settings: 

• Choose One/Any option. The user will only be able to select a single filter from the dropdown menu.

• First item. The first filter in the dropdown menu will be selected by default. 

• Last item. The last filter in the dropdown menu will be selected by default. 

• As defined. This allows you to specify which filter should be selected by default. To get specific, type the desired filter into the accompanying As defined field, and then select that filter when it appears. 


Pick the Choose one/Any option. You can use this setting to add some text to the top of the dropdown menu. Enter the text that you want to use, and then select the accompanying checkbox. 


2. Drop-Down With Search


If you have a long list of possible filters, then your audience may appreciate the ability to search for a filter by name.

3. Multiselect With Search


This setting allows you to select multiple filters simultaneously. By default, every filter is selected but the user can exclude a filter from their search by clicking that filter’s accompanying x icon.

4. Radio


This displays each filter as a radio button.

If you select the radio button option, then you’ll gain access to the same settings as the drop-down display mode:

• Choose One/Any option 

• First item 

• Last item
• As defined 


Supercharge Your Searches: Creating Custom Filters 

In addition to its default filters, the Ajax Search Pro plugin lets you create custom filters, which can add powerful, unique filtering functionality to your website. 

When displaying your filters, you can choose from the following layouts:

• Radio buttons.
• Dropdown menus

• Checkboxes
• Slider.s
• Range sliders—for example a price range slider for your online store)  

• Date filters—for example if you’ve created an online ticketing system and want to filter events by date  


You can create filters for WordPress’ standard pages and posts, but I’ll be using this functionality to develop a custom search engine that filters my website’s Amazon Affiliate products based on product categories similar to how the Department filters function on Amazon.com. This will require me to create a custom field (smarthome_category) which I’ll apply to all the smart home products in my store, and then assign each product a value, such as Thermostat, Lock Cylinder, or Water Detector.

Note that for the purposes of this tutorial, I’ve already setup WooCommerce and built my Amazon Affiliates store. 

If you want to create custom filters for pages or posts instead, then the steps will be largely the same, for example you might want to allow visitors to filter your blog based on subject, or when the content was posted. 

• Navigate to the page, post or product that you want to tag with a custom filter, and open it for editing. 

• Scroll to the Custom Fields section. If your screen doesn’t contain this section, then scroll to the top of the screen, and select Screen options followed by Custom Fields.

• To create a custom field, click Enter new and then type the name of the field that you want to create; I’m naming my custom field smarthome_category.

The product I’m currently editing is the Nest Learning Thermostat, so in Values I’m going to type Thermostat. To create this category and assign the Thermostat value to the current product, click Add Custom Field. Note that you’ll need to manually enter this value for all products that fall into the Thermostat category, so it may help to make a note of it, particularly its exact capitalization and punctuation.


Don't forget to save your changes, by clicking Update.

Now we’ve created a custom field, so we can apply it to any product, page or post.

• Navigate to the item in question, and open it for editing.

• Scroll to Custom Fields.
• Open the Name dropdown and select the custom field you just created, which in my instance is smarthome_category.

• In the Values field, enter the value that you want to assign to this item. I’m currently viewing the Ring Video Doorbell 2 product that I imported from Amazon, so I’m going to type Home Security System.
• Click Add Custom Field.

• Save your changes, by clicking Update.

• Rinse and repeat for every item that you want to tag with a custom field and value. 


Configure Your Search Instance

Next, we need to configure our search instance:

• In WordPress’ left-hand menu, select Ajax Search Pro.
• Find the search instance that you want to use, and click its accompanying Settings icon.

• Select the Frontend Search Settings tab, followed by the Custom Fields tab. 


Click to place your cursor inside the Search custom fields… box and then start typing the name of the custom field you created in the previous step (in my instance, that’s smarthome_category). When the correct custom field appears, select it.


• In the Title label field, give your filtering system a descriptive title that you can optionally display as part of the filter dialogue; I’m using Department.
• Decide whether you want to display the title label as part of your filter dialogue, by either selecting or deselecting the Show the label on the frontend? checkbox. 

• Open the Type dropdown and choose how you want your custom filters to be displayed. The available options are: Radio, Dropdown, Checkboxes, Text, DatePicker, Slider, and Range Slider.

By default, the Values field displays the following:

||Any value**
sample_value1||Sample Label 1
sample_value2||Sample Label 2
sample_value3||Sample Label 3

This is where you’ll need to manually input all your Values. We need to replace each sample_value1||Sample Label 1 with a unique value, for example I’ve used the following values: Lock Cylinders, LED lighting, Thermostat, Switches & Dimmers, Water Detector and Surveillance Camera. 

After replacing the sample values, I wind up with this:

Lock Cylinders||Lock Cylinders
LED lighting||LED lighting
Thermostat||Thermostat
Switches & Dimmers||Switches & Dimmers
Water Detector||Water Detector
Surveillance Camera||Surveillance Camera

Finally, you need to let the plugin know which value should be selected by default, using the ** characters. I want Lock Cylinders to be selected by default, so my finished Values box looks like this:

Lock Cylinders||Lock Cylinders**
LED lighting||LED lighting
Thermostat||Thermostat
Switches & Dimmers||Switches & Dimmers
Water Detector||Water Detector
Surveillance Camera||Surveillance Camera

Next, open the Operator dropdown, which allows you to specify how the value entered in the search field will relate to the results. For numeric values, you should use one of the numeric operators, such as Equals, Not Equals, or More Than, but if you’re working with text values then you can choose between Like and Exactly like. I only want to display results if they’re an exact match, so I’m using Exactly like.

When you’re happy with the information you’ve entered, click Add. At this point, you can use the Show/Hide box to preview how your custom filters appear and function in the search dialogue.

If you do need to make any changes to the way your custom filters look or function:

• Hover over where your custom filter appears in the grey box, and a pencil Edit icon will appear.
• Give this icon a click, and you’ll be able to edit your custom filter. 
• When you’re happy with your filters, save your settings by giving Save all tabs! a click. 

Conclusion

In this article, I showed you how to quickly and easily add a live search bar to your WordPress website, using the Ajax Search Pro plugin. 

After mastering the default search bar, we looked at several ways that you can enhance Ajax Search Pro, including turning the default search into a collapsible, compact search bar and adding filters using the built-in taxonomies. Finally, I showed how to turn the search bar into your own custom search engine, complete with filters designed by you. 

For more information about this plugin, check out its listing on CodeCanyon or head over to the official Ajax Search Pro docs. 

• WordPress
  20 Best WPBakery Page Builder (Visual Composer) Addons & Plugins of 2019
  Nona Blackman
• WordPress
  12 Best WordPress Slider & Carousel Plugins of 2020
  Nona Blackman
• WordPress
  20 Best WordPress Calendar Plugins and Widgets
  Esther Vaati
• WordPress Plugins
  20+ Best Popup & Opt-In WordPress Plugins
  Nona Blackman

In the past couple of years “cryptocurrency” (certainly “bitcoin”) has become a term familiar to almost anybody. Starting as a concept that only visionaries and fans were familiar with, the ever-growing popularity of cryptocurrencies has become so mainstream that all kinds of people have invested in them, written about them, or even ventured into creating their own.

The high profile profits, the commonplace losses, corruption, mystery, and outspoken optimism and skepticism have been making headlines for years now. Stories such as John McAfee eating his own body parts if his BitCoin predictions fail to materialize, and the tale of the Missing Crypto Queen have become part of the compelling crypto narrative.

Best Cryptocurrency WordPress Themes

We’ve put together an outstanding list of 20 premium cryptocurrency WordPress themes that you could use for a multitude of purposes, be that to write about cryptocurrencies on a magazine-styled website, display the actual price of most popular currencies on a directory/listing styled website, or promote your own Initial Coin Offer (ICO).

1. Crypterio - ICO Landing Page and Cryptocurrency WordPress Theme

Crypterio is a best-selling WordPress cryptocurrency theme targeted at digital consulting or crypto-oriented businesses which offer their consulting or investment services. Whether you’re an ICO advisor or an expert focused on cryptocurrencies, this theme will help you boost your sales and popularity by means of great design and functionality.

2. Monyxi | ICO Cryptocurrency Trading Business Coach WordPress Theme

Monyxi is a multipurpose WordPress theme that is modern, powerful and bold. It works well for financial blogs and is a great choice when it comes to picking a layout for a financial advisory or consulting business. 

With a thematic design and beautiful crypto-oriented interface elements, this theme will definitely help in making your website stand out from the crowd.

3. Cryptico - ICO Crypto Landing & Cryptocurrency WordPress Theme​

Cryptico is a great website theme oriented at ICO agencies and cryptocurrency investment companies. It provides everything needed to create a great looking website. Built with the latest technologies in mind, the theme has its foundation on the Bootstrap framework and LESS, paired with an icon font set.

4. Cryption - ICO Landing, ICO Consulting, Cryptocurrency & Blockchain WordPress Theme 

Cryption is a premium WordPress cryptocurrency theme, optimized for the specifics of the industry, and is perfect for building websites for ICOs, ICO Advisors, and Cryptocurrency Agencies. 

If you’re in need of a stylish business website for your digital consulting agency or crypto investment website, then there aren’t many reasons to look any further.

5. Crypton | A Multi-Purpose Cryptocurrency & ICO WordPress Theme

Crypton is a multi-purpose cryptocurrency premium WordPress theme that is powerful, modern and bold; a perfect solution for a cryptocurrency or financial blog. 

Spreading the word about your business in the crypto industry is now easier than ever with the plentitude of available integrations and extensive functionality that are integrated in the theme.

6. Bryte — Multipurpose Creative & Business Elementor WordPress Theme

Bryte is the by-product of seasoned developers who have more than a decade of experience in building web products and themes. Being advertised as a theme that is meant to be a great solution for your online business, Bryte is packed with solid features such as a Visual Composer, 4 classy blog layouts, 7 header styles, and immediate installation available at a click’s distance.

7. Cryptro - Cryptocurrency, Blockchain , Bitcoin & Financial Technology

Cryptro (yes, you read that right) is another premium WordPress cryptocurrency theme that we believe is worthy of being included in our showcase of themes. The reason behind this lies in the numerous features that start with a Live Composer, Auto-Update feature, a maintenance or coming soon page, and unlimited sidebar options. 

Having been built by a seasoned developer with more than 100,000 customers, the quality of the product can hardly be questioned.

8. Coinmag - CryptoCurrency Blog WordPress Theme

Coinmag is cryptocurrency magazine theme that’s powered by WordPress. With a tidy and well-looking interface, clean and well-written code, and niche specific features (such as a cryptocurrency table listing), the theme does prove to be a better choice than a regular magazine WordPress theme, when it comes to creating a crypto-oriented magazine or news website.

9. Hoverex - Cryptocurrency & ICO WordPress Theme

Hoverex is a cryptocurrency and ICO WordPress theme. With powerful functionality, modern and bold design, this theme seems to be a great fit for cryptocurrency-oriented sites and financial blogs. The beautiful and thematic design that comes paired with it definitely is a competitive advantage to consider when choosing a theme.

10. Lymcoin - Cryptocurrency & ICO WordPress Theme

Lymcoin is a premium WordPress theme made for crypto stores and shops. It greatly helps with the promotion of own ICOs and provides functionality that allows payments in popular cryptocurrencies like Bitcoin and Etherium. 

Furthermore, it comes with a one-click installation feature which will definitely be handy for anybody, be that an experienced developer or somebody with no coding knowledge.

11. Cryptonite - Blockchain and Cryptocurrencies WordPress Theme

Cryptonite is another premium WordPress theme that is targeted at both experts and beginners, with a multitude of customization options being provided. Be that a crypto-related landing page or an agency’s website, this theme will definitely serve you well given the multiple pre-designed layouts it comes packed with.

12. Blokco - ICO, Cryptocurrency & Consulting Business WordPress Theme

Blokco is a premium Bootstrap-based WordPress theme that features the Visual Composer, Revolution Slider and the Eventer Plugin as its key features. It allows for unlimited header and footer customization and was built on the Isotope grid system. The crypto widgets and tickers allow for a good layout that’s both beautiful and niche-themed.

13. RexCoin - A Multi-Purpose Cryptocurrency & Coin ICO WordPress Theme

RexCoin is a multi-purpose crypto-currency WordPress theme. It is powerful, well-designed and features extensive functionality that allows the promotion of an ICO or crypto-related business. With a sleek and crisp design, this theme does stand out of the crowd with its clean and dynamic style.

14. Tolarcek - A Bitcoin & CryptoCurrency WordPress Blog Theme

Tolarcek is a bitcoin and cryptocurrency oriented WordPress theme that proves to be a powerful tool for creating outstanding websites for the crypto market. With real-time graphs and coin tickers, this theme is definitely a great choice to be considered amongst the bunch.

15. Cryptox - Cryptocurrency WordPress Theme

Cryptox is a beautiful and functional WordPress theme that is oriented towards websites who trade, discuss, or have consulting businesses around cryptocurrencies. Considering the WooCommerce integration is one of its key features, a testimonials and contact form and a currency calculator, the theme will work great when it comes to creating any kind of informative portals about cryptocurrency.

16. Cryptoland - ICO Landing Pages WordPress Theme

Cryptoland is a beautiful, functional and powerful bitcoin and altcoin ICO theme that is backed by a rather unique and sleek design. 

This theme empowers anybody with no coding skills to get up and running by using the integrated WPBakery page builder, thus an option to thoroughly consider, especially if time is a sensitive issue and a fast launch is necessary.

17. Cryptoigo - Cryptocurrency WordPress Theme With Elementor Page Builder

Cryptoigo is another premium WordPress theme which is worth your consideration, mainly because of its extensive features, beautiful design and structured layout. With several unique ICO landing page designs, a fully responsive layout and an unlimited page builder - this theme does prove to be a potential great choice.

18. IcoTech - Crypto BlockChain WordPress Theme

IcoTech is another premium WordPress premium theme that makes use of parallax effects to beautifully display several themed layouts. With distinctive crypto-oriented user-interface elements, IcoTech is a great choice when it comes to choosing your next theme for a website that promotes and ICO or an agency’s consulting services.

19. Blockcaten - Consulting WordPress Theme

Blockchain is a premium and fully responsive cryptocurrency and consulting WordPress theme. It’s suitable for several corporate websites such in the area of finances and financial services. With free lifetime updates, an extensive knowledge base and great support theme this theme is another great pick in our showcase.

20. Cryptech - ICO and Cryptocurrency WordPress Theme

Cryptech is a stunning, professional and well-coded ICO and cryptocurrency WordPress Theme. Based on solid research, this theme was developed and designed with any business owner’s needs in mind, providing powerful customization and editing options and a one-click import demo.

Main Features to Look for in a Premium Cryptocurrency Theme:

Here are the main things to look out for when picking a premium cryptocurrency theme:

• A solid and robust design that doesn’t take shortcuts in terms of quality. Because cryptocurrency-related websites often have a single proposition they shouldn’t be overly complicated or overwhelming for the end user.
• Social-proof behind the design of the theme. Using trust-inspiring colors (like navy blue) could greatly help add trust to your website through color psychology. Pair that with some good typography and the level of professionalism of your website increases with just a few easy moves.
• Thematic design elements, imagery, icons and illustrations that make your website even more distinct from other websites your visitors are likely to interact with on a daily basis.

Your Turn to Let us Know What You Think!

This concludes our list of premium cryptocurrency WordPress themes that we have compiled for your use. We’re curious to know which one you think is the best out of the bunch; what do you think the key feature for a cryptocurrency theme is?

Tips for Choosing WordPress Themes

• WordPress Themes
  10 Common Regrets When Selecting WordPress Themes (+ Great Theme Examples)
  Hermione Wright