Loading...

Follow Envato Tuts Web Design on Feedspot

Continue with Google
Continue with Facebook
or

Valid

If you’re concerned with working securely or anonymously online, the chances are you’ll have used a VPN (Virtual Private Network) at some stage. But when choosing a VPN service do you know what factors you should be taking into account? This tutorial will help you understand why you should use a VPN and how to choose the right service for you.

Here Are the Topics We’ll Cover
  • Internet Security and Privacy
  • Who Can Access My Unsecured Information?
  • A Simple, Real-World Example
  • What is a VPN?
  • What Are the Pros and Cons of Using a VPN?
  • How to Find the Best VPN For Your Needs
Watch the Screencast
How to Work Securely by Using a VPN - YouTube
What Does Privacy and Security Mean?

We live in an age where online privacy, if you aren’t paying attention, is almost non-existent. Our online usage is tracked continuously, be it our browsing, our shopping habits, our social media, education, or our entertainment. And all that information helps build pictures of us as consumers–pictures which are often given or sold to companies for marketing purposes.

You might not think that having your internet usage, or the identity of your computer or device, passed on to third parties is a big deal, and you aren’t alone. But these details may only be the tip of the iceberg, and by making them publicly available you may also be opening up the door to other, more sensitive, information, such as login credentials:

  • or your bank account
  • for company accounts, such as email, or intranets.
  • for a personal website, or social media

These details may all be up for grabs if you’re using them over an unencrypted or unprotected network.

Tip: besides secure networks, you should also consider using a password manager such as 1Password, and Two Factor Authentication to protect your login credentials.

Who Can Access My Unsecured Information?

So we’ve covered the fact that an insecure network can leave your sensitive information exposed, but who can actually get to it? Here’s a quick list:

  • Your ISP (Internet Service Provider)
  • Administrators of public WiFi networks (think coffee shops, airports, shopping malls etc.)
  • Hackers

Deliberate hacking, often with malicious intent, is behind all of the highest-profile data breaches of recent memory.

  1. Yahoo! Was breached in 2014. Over 3 billion accounts were compromised causing an estimated $350M loss for the floundering web services provider, which at the time was negotiating an acquisition to Verizon.
  2. Between 2014 and 2018 Marriot International reported that roughly 500M customers had had their data stolen. This data included names, passport numbers, and even credit card details.
  3. The FriendFinder network mainly has websites with adult content, and reported in 2016 that almost 20 years’ worth of user data had been exposed.

These examples should demonstrate that data breaches are serious. The exposure of personal data can cause huge personal distress to those involved, and often has huge financial repercussions too. But these examples are all large-scale corporate controversies–how might we apply what we’ve learned to individuals?

A Simple, Real-World Example

Let’s imagine we have a WordPress developer, and that developer is responsible for managing a number of WordPress websites. He or she works largely from home, but sometimes works from a coffee shop, or an airport when travelling. Now, because our developer is logging into various WordPress websites over those unencrypted public networks, the login credentials are potentially vulnerable.

Someone with malicious intentions, who manages to intercept WordPress login details by sitting between our developer’s computer and the network’s endpoint, could wreak havoc on the client’s websites, go further and take advantage of other users’ details stored on those websites, and leave our developer personally liable.

One measure our developer could have put in place to protect those websites, is a VPN.

What is a VPN?

Think of a VPN, or Virtual Private Network, as an intermediary between you and your online destination. Without a VPN your connection effectively looks like this, transferring data between you and your destination via your ISP:

With a VPN in place, your encrypted data travels via the VPN servers, effectively blocking your computer’s identity.

“When it reaches the target, it seems that the data has originated from these servers, instead of your own computer.” – Julie Cole
What Are the Pros and Cons of Using a VPN?

We’ve covered many of the pros already:

  • Your traffic is encrypted
  • Your IP address is hidden
  • VPN can cut through regional censorship (helping gain access to regional-specific services like Netflix and Spotify for example)

In terms of the downsides, there really aren’t many, besides:

  • Connection speed (routing through an additional layer of servers, perhaps on the other side of the world, could cause your connection to slow)

Taking connection speed into account should be one of the major considerations when choosing a VPN service.

How to Find the Best VPN For Your Needs

Visit VPNPro and you’ll find great resources for internet security in general, but specifically you’ll find all major VPN services tested and ranked depending on your use cases. Doing your research before committing to a VPN is really important, and the VPNPro team do all the heavy lifting for you.

vpnpro.com

The VPNPro blog is full of interesting articles about all things cyber-security, their reviews and comparisons are invaluable, the knowledge base is extensive, and you’ll especially benefit from the rankings: take a look at their Top 10 best VPN services and you’ll find links to all the best VPN services you should check out. The rankings take into account:

  • Best VPN Overall
  • Best VPN for Torrenting
  • Best VPN for Android
  • Best VPN for Kodi
  • Best VPN for Mac
  • Best VPN for Windows
  • Best VPN for Netflix

I’m sure you identify with one of those motives! For example, if we think back to our developer who regularly works on public WiFi, their priority would likely be the ranking which pinpoints either working on a Mac or Windows platform. In these case VPNPro prioritizes:

  • VPN security
  • Performance
  • Entertainment (effectiveness against geo-blocking, torrenting capabilities)
  • Reliability against firewalls and censorship
  • Ease of use and customer support
  • Price

Getting access to BBC iPlayer isn’t highest on the priority list here, but being able to connect quickly and securely definitely is. Personally I use ExpressVPN, one of the pricier services available, but one which is rated very highly for all the uses mentioned above.

Personal internet security is something I didn’t give much thought to until a few years ago, but I’m glad that, since then, I’ve made a habit of protecting myself online. I highly recommend you do the same!

Further Internet Security Reading
Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Cognitive load is the mental effort that is required to complete a task involving information processing. Managing cognitive load is a balancing act for many user experience design scenarios: each additional visual element, word, or piece of information could contribute undue strain on a person’s working memory, ultimately increasing the chance of errors or adding barriers to learning.

In the context of web design, maximizing task success helps ensure that users are successful in finding your product value as quickly as possible. Here are three things to keep in mind to reduce cognitive overload for a better user experience.

1. Surface Options Upfront

By directly surfacing options, you’ll give the user time to compare their alternatives and make an informed choice. This is particularly the case where comparison across a dimension (such as reviews, ratings, prices, etc.) is important.

2. Utilize Progressive Disclosure

Use a logical sequence of steps, such as by providing feedback that the next step has been reached (through a label or change in UI) in context. Breaking down a task in to smaller steps usually make sense for checkout flows or a progressive interaction form. Practicing this reminds us to hide unnecessary fields until they become relevant.

3. Eliminate Redundancy and Make the Next Action Clear

Rather than plaster your entire site with calls to action, prioritize what’s most important and make it stand out by reducing other competing visual elements. If needed, the call to action can be sticky to the page (so it’s always visible).

Conclusion

The best experiences in design are often described as being “seamless”, but the reality is that there can be many obstacles (including limitations of the human brain’s working memory) which can make task completion difficult. Use these three pointers to craft designs that simplify your website design. Prevent your users from having to assume things or slow down to process what step needs to come next, which can give the perception of complexity.

Learn MoreWireframe Resources

Use wireframes to design your user experience from the ground up. These tutorials and wireframe kits will get you started!


Wireon Web Wireframe KitWeb Library WireframeCollector Wireframe Web Kit

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Selling your products online has never been easier thanks to WordPress and numerous eCommerce themes. But what if you don’t have products to sell and want to make some additional income? 

That’s where creating an online marketplace similar to Etsy or Ebay comes in. The beauty of a marketplace is that your role is to create the website, whilst other vendors sell their products and you take a cut of the sales.

There is no limit to the type of marketplace you can create; whether you want to sell digital or physical products, there is a theme to suit your needs. 

Add to that the fact that popular marketplaces such as Amazon, Etsy, and eBay process millions of transactions on a daily basis, and you can easily see that creating an online marketplace is a viable business model.

You can find great WordPress marketplace themes and trending ecommerce WP themes on ThemeForest:

Best WordPress eCommerce Marketplace themes on ThemeForest.

Read on to discover the best eCommerce themes for making a successful online marketplace. You need a WP theme with just the right set of quality features to build your marketplace with—quickly, securely, and with just the right design that fits your goals.

What Makes a Great Marketplace Theme?

An online marketplace is more complex than a regular online store. It requires additional functionality and features which include:

  • The ability for vendors to register and create their online store
  • Front-end submission forms so vendors can easily submit new items
  • Support for mega-menus to keep your navigation menu organized
  • Search and filter functions so buyers can browse through the items without any problems
  • Compatibility with popular e-Commerce plugins such as WooCommerce or Easy Digital Downloads

It goes without saying that your chosen theme should be responsive and include a blog which will help you get noticed by search engines and drive traffic to your marketplace.

15 Best WordPress Marketplace Themes for All Your Marketplace Needs

Here we’ve curated the best marketplace WordPress themes with all the features mentioned above, as well as highly customizable designs that will help you create the exact look and feel that you want for your marketplace.

1. Marketify - Digital Marketplace WordPress ThemeMarketify - Digital Marketplace WordPress Theme

Built by Astoundify, the clever team behind epic themes such as Listify, Jobify, and Campaignify, this theme has everything you need to setup a WordPress marketplace website. Marketify is structured around EDD plugins like Frontend Submissions, Recommended Products, and Commissions, which all come together to make a perfectly functional digital marketplace where vendors can sell their products to your growing audience.

2. Martfury - WooCommerce Marketplace WordPress ThemeMartfury - WooCommerce Marketplace WordPress Theme

Martfury is suited equally to individual online stores and multi-vendor marketplaces. It works with the Dokan, WC Vendors, WC Marketplace, and WooCommerce Multi-vendor Marketplace (WCFM Marketplace) to give you multi -vendor functionality. This combination allows vendors to build their own stores, manage their inventories, create coupons, shipping terms, and all the while you can earn commission on their sales.

3. Makery - Marketplace WordPress ThemeMakery - Marketplace WordPress Theme

Makery is another premium WordPress theme which will allow your vendors to sell their own products much like they would on Esty, eBay, or other marketplace platforms. Any user can easily add a shop, products, complete received orders, track earnings, and withdraw them using front-end forms.

Add to the mix Makery’s options and fully responsive design, and you have yourself a very powerful tool for building a marketplace website.

4. Marketo - eCommerce & Multivendor Marketplace Woocommerce WordPress ThemeMarketo - eCommerce & Multivendor Marketplace Woocommerce WordPress Theme

Marketo is another powerful WordPress marketplace theme built on the back of Dokan; the popular WooCommerce Multi-vendor Marketplace Solution. Marketo is compatible with WordPress 5.0, and uses the Elementor page builder to provide its array of page layouts. Build your marketplace website then sit back and watch others do the selling!

5. Dike - Minimal and Modern WooCommerce AJAX Theme

Dike is an excellent marketplace theme because it comes with a heavily optimized design (and code) for mobile user experience, a powerful customization options, and many Ajax integrations for a smoother shopping experience for your visitors.

This WordPress eCommerce theme is suitable for selling both digital and physical products and is perfect for anyone looking for a clean, modern look for their online store. You can easily add new products and customize the product display pages. 

Many satisfied customers highly regard Dike and have left this theme a current start rating of 4.88/5 in Themeforest.

Dike - Minimal and Modern WooCommerce AJAX Theme 6. Handy - Stylish Handmade eCommerce Shop Theme

If you want to sell handmade goods, look no further than the Handy theme. This WordPress marketplace theme comes with Revolution Slider to create stunning slideshows of featured products. A number of page templates are available as well as a page builder which gives you complete control over the layout of your pages. 

Use shortcodes to insert additional elements such as buttons and columns. Vendors have a thorough overview of their sales. The navigation menu supports the mega-menu feature and customers will have no problems finding the right product thanks to the sortable product grid.

7. Oswad - Responsive and Versatile WP Marketplace Theme

Oswad is a beautiful and responsive ecommerce marketplace theme with multiple homepage demos. You can customize every aspect of the theme and make use of multiple widgets to build the layout of your homepage. 

FontAwesome icons will help you highlight different sections of your store and the homepage has plenty of space to display products across several categories. 

A notable feature is the integration of a Live Chat module which allows you to answer any questions potential customers might have about the products.

8. Electro - Vibrant and Customizable Marketplace Theme

Electro is a great choice for anyone considering an electronics store. The theme features a prominent search bar as well as a product slider where you can showcase the most popular products. On top of the standard wishlist feature, customers can also compare products and track their orders once the purchase has been placed. Several menu variations are included in this WordPress eCommerce theme to make navigation as easy as possible. The theme is also responsive and fully customizable.

9. Fashion - Vintage Style WordPress Marketplace Theme

Fashion lovers will find everything they need to create a fashion marketplace in this theme. 

You can use the header slider to display recent or popular products and show all the benefits your marketplace offers such as free shipping, member discounts, and more. Add a blog feed on the homepage to share the latest fashion trends with potential customers.

The theme also includes a Live Theme Editor so you can customize it to create a unique design. Customers can use the quick view feature to instantly see product features.

10. Oasis - Modern WooCommerce Theme

What makes Oasis a fantastic marketplace theme is its flexible online shopping theme with full WooCommerce compatibility. Take advantage of the 7+ header layouts, 8+ blog layout combinations, 10+ portfolio layout combinations, 4 product page layouts, and many more to create the perfect eCommerce website. Whether you want to sell clothes, electronics, furniture, books or something else, Oasis will support your exact needs.

Oasis - Modern WooCommerce Theme 11. Handmade - Sophisticated eCommerce Marketplace Theme

Handmade has a well-structured layout, and customers can filter through products thanks to product filter widgets. Eight different homepages make it possible to create a unique layout and Visual Composer integration makes it easy to tweak all the layouts to your liking. 

Along with FontAwesome icons, extensive customization options, video backgrounds, and responsive design, the Handmade WordPress ecommerce theme packs quite a punch in terms of useful features.

12. Marketica - Advanced eCommerce WordPress Theme

Marketica is an advanced ecommerce theme that integrates with four different vendor plugins to turn your existing store into a vendor marketplace. It comes with Revolution Slider and Visual Composer Builder, as well as the ability to white label the theme for your clients. 

Vendors have access to detailed profile pages, a sales tracker, and they can display their products in a clean grid layout. Finally, the WordPress ecommerce theme includes extensive documentation to guide you through the process of setting it up.

13. Shopkeeper - eCommerce WP Theme for WooCommerce

Shopkeeper is an excellent eCommerce marketplace theme, but you don’t have to take my word for it. It’s sold more than 26,500 copies on Themeforest over the course of five years and received over 1000 glowing reviews resulting in a 4.63-star rating. That’s because Shopkeeper is a premium WooCommerce theme with great, fully responsive design and extensive functionality. It comes with amazing features such as YouTube video support in product galleries, product image zoom, multiple blog layouts and many, many more fantastic and practical features to take your online store to the next level.

Shopkeeper - eCommerce WP Theme for WooCommerce 14. Flatastic - Modern and Powerful WordPress Theme

Flatastic is a modern ecommerce marketplace theme with a clean design that brings your products into focus along with a well-structured grid layout. The WordPress theme allows you to not only feature products but different brands and vendors. You can create any type of layout with Visual Composer.

Aside from making use of the blog pages, you can additionally boost your SEO with optimized code and support for Rich Snippets. On top of that, the theme comes bundled with the ChatX plugin so you can provide immediate customer support via Live Chat.

15. Catalog - Minimal WordPress Marketplace Theme

Catalog is a minimal Wordpress ecommerce theme that features several page templates so you can easily create all the necessary pages for your marketplace. 

Front-end submissions and custom commissions are available for vendors while customers can take advantage of the search bar and sortable products to find items that interest them the most.

All membership pages are included, and you can easily feature a popular vendor right on the homepage. On top of that, the theme is fully responsive and customizable.

5 Tips To Boost Your eCommerce Conversion Rate

As a marketplace owner, boosting your conversion rates and improving sales should be at the forefront of your mind. Here are five easy ways to instantly improve your conversion rate:

1. Start Blogging

While many themes on our list feature SEO optimized code, all of them come with the ability to add a blog to your marketplace. Blogging is one of the best ways to keep your website fresh, and you can use it to share more information about vendors and products.

2. Build an Email List

An email list is the most valuable asset for any business owner. After all, what better way to get personal than sending a customized email to your customers with featured products they are most likely to buy? Consider using a theme like Gecko to build your email list with ease—right from the beginning.

3. Use Social Media to Your Benefit

Sharing your products on social media is a must if you want to reach your target audience. Luckily, themes like Oxygen and Dike come with social media options built in so buyers can follow you and share your content easily across a variety of social media platforms.

4. Facilitate the Checkout Process

Whenever possible, make the checkout process as easy as possible. This means you shouldn’t ask for more information than is absolutely necessary. If you sell digital products, there is no need to ask for your customers physical address, since no actual shipping is involved. Otherwise, consider using a banner which displays all the steps required to finish the purchase.

5. Use Demo Videos

Videos are a powerful marketing tool which you can use to demonstrate all the benefits of a particular product. They work even better than images, and you can use a theme like Shopkeeper to take full advantage of your videos’ capabilities.

Build Your Own Marketplace Site

Building your own marketplace is no easy task, but with the right combination of a quality WordPress eCommerce theme and plugins, the process is much easier. And when you pair that with the tips mentioned above, you’ll be well on your way to creating a successful marketplace.

Best WordPress eCommerce Marketplace themes on ThemeForest.

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

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

In this article I’ll explain how to understand what a website theme can do from its demo, how to put the demo through its paces, which important pre-sales questions you should ask, and how to work with a theme the right way!

We’ll use WordPress themes to demonstrate most of the points, but most of the principles can be applied to website themes of all kinds.

Choosing the Right Theme

Let’s take a step back for a moment and talk about actually choosing a theme. This is no mean feat. On Themeforest alone these days you’ll find around 50,000 templates to browse through!

It all starts by understanding your project requirements. Ask yourself what category your project should be listed in; is it a corporate website, or maybe entertainment, or is it an online store? Perhaps it’s a combination of several categories? We’ll talk about which categories might apply to your website in a moment.

Once you’ve identified your project’s category, list your project’s most required features, as this will help you narrow down the right theme.

Tip: Check out the WordPress theme roundups we regularly publish here on Tuts+. You’re certain to find a roundup to suit your purpose!

Working With Marketplace’s Search and Filter

Go to Themeforest’s All Categories page to get an idea of the categories available: 

Themeforest categories

For now, forget about “Best sellers”. These are (obviously) great themes from very successful theme authors, but I recommend you first try to find the right theme using the search and filter tools. 

Most of the “Best sellers” themes are multipurpose, meaning they’re suited to a wide range of categories, but can’t excel at each one. Saying that, if you don’t have time, or your project category is multipurpose, don’t waste your time–buy one of the best seller themes, you can’t go wrong; they are really great themes!

Select a category from the list, for example WordPress > Corporate > Business. Eventually you’ll have whittled your way down all available nested categories, but your search will still be incomplete. So from categories we will switch to tags, selecting at least three tags that best match your project requirements, for example

Order by

With so many search results we need to make sure we surface the ones which are most likely to give us what we want. For now forget about the Sales, Rating, Price, and Date Added filters. Instead switch the order to Newest–we may just unearth some brand new treasures!

Now concentrate on the Compatible With filter. For example, if you plan your website to be multilingual you will need the WPML or Polylang plugin (if a theme is compatible with WPML, it will automatically be compatible with Polylang). 

Or if you plan to have an additional shop you will need to choose WooCommerce or WP e-commerce plugins. Select the plugins that will be required for your project.

The Price is Right

At this point identify up to five themes that you like, concentrating largely on design. Bookmark these items using the handy favorite feature on Themeforest.

To narrow things down further let’s look at the rating and price. Set rating to 4 stars and higher.

Choose up to five themes that you like, and again concentrate on design. Bookmark these items.

Next we have the price filter. The vast majority of themes on Themeforest aren’t priced higher than $60. New items, however, often have a so-called intro price which can be up to 40% off the regular price. If your budget is limited I suggest you filter items that best match your budget (though don’t concentrate on budget only).

Testing the Theme Demo

Examine your favourite theme demos with different browsers and different screen sizes to test the browser support and responsive design. Remove items from your list that have eye-catching issues, then check the remaining items with a Markup Validation Service. And again, remove items from your list that have multiple errors (skip the warning messages). 

Performance is also something you might want to check, especially if the theme author uses performance as one of the theme’s selling points.

Take a closer look at the theme’s elements–if anything confuses you it’s time to submit a pre-sale question.

Asking the Right Pre-Sales Questions

Create a pre-sales question list and ask each theme author. This will give you the answers to your questions and let you know the average response time. You are free to ask any questions, but to save you and the author time choose the three most important short questions, like:

  • Can I upload custom fonts?
  • Are you free to use any icons with any icon based elements?
  • Can you change the header layout, or is it predefined?

Most of the time you will work with the theme by yourself, but if something goes wrong, or you mix something, or can’t find a certain option, the only person who will know the answers is the theme author. It’s therefore important to build a good relationship with the author.

Installation and Configuration: the Right Way

After purchasing your theme you will get access to the files via https://themeforest.net/downloads. Download the full zip file. Many customers make a mistake here by directly uploading the whole downloaded zip and getting upload error (in WordPress and other CMSs). The theme pack contains not only the theme files, but often PSD files, help documentation, snippets and so on. So make sure when uploading a theme you use the right installable zip file. 

Check out How to Install Your ThemeForest WordPress Theme for full details.

Activate the theme and follow the instructions. Most of WordPress themes will come with linked plugins (like Revolution Slider, Visual Composer, Contact form 7) and addon plugins that contain all the custom functionality that you see in the theme demo. So before using the theme’s front-end, make sure you install all the required plugins. For full instructions on how this works take a look at this free course:

Having done that, install the sample demo that comes with the theme. Most themes come with step by step installation instructions, so follow the steps provided. Once completed check your website’s front-end. Make sure it doesn’t show any errors, that the links work, and that there aren’t any broken images. 

Note: If something goes wrong I recommend you reset WordPress to its default state using this plugin (skip user and user_meta tables). Then go to Settings > Media and uncheck the checkbox Organize my uploads into month- and year-based folders. Try uploading the sample content once more.

If your site contains absolute links (not relative to your domain) I suggest making a global search/replace of the domain with this plugin.

Switch to Using a Child Theme

No matter how customizable your theme is, at some point you will need to make styling corrections, modifications, and overwrite the theme files. You can do all of this within the core theme files, but by doing this you’ll no longer be able to update the theme. For this reason you should use a child theme instead; a theme which piggybacks the main (parent) theme and contains only the files which need to be different from the originals. 

If your theme comes with a child theme, activate that one after you’ve installed the parent theme and required plugins. If your theme does not provide child theme, you can easily create your own using the tutorial above, or with this plugin.

Designing the Right Way

So many websites are created with beautiful themes, but still look awful! The main reason is that the website owner fails to follow the established theme colors, typography, spacing, sizing, and alignment rules.

So before creating your own pages and layouts take a closer look at the theme demo. Pay attention to how colors are used in the design, what the primary and secondary fonts are, and how they’re used. Possibly most importantly, make note of the spacing! Look at how much space is used in the design, the padding of rows, the margins of headings, the visual relationship between sections.

To better inspect the theme use your browser’s developer console, for example in Google Chrome press F12, or right-click and Inspect the element.

Overwriting Theme Code

You should at least be familiar with CSS and HTML to successfully overwrite parts of your new theme.

Here I want to show how you can overwrite styles, shortcodes, even full theme/plugin files.

CSS

To overwrite any style first copy the original style to your child theme, or in WordPress go to Appearance > Customize > Additional CSS (a feature that has existed for years, but not many users know about it). At the end of each rule you can add the !important keyword to give force your custom style. You might prefer to avoid using the !important keyword in which case you can add a parent element to your custom css, or increase the specificity some other way. Take a look at cssspecificity.com for an amusing guide to how this works.

WordPress Shortcodes

Sometimes you will need to overwrite a WordPress shortcode. This can be done without modifying the core theme or plugin files, but you will need to remove the shortcode and add it again with your own modification. Let’s say you have a shortcode [video], and you want to modify the output of the shortcode. Begin in your child theme’s functions.php by adding an action with the after_setup_theme hook, which is called when a page is loading, after the theme is initialized:

add_action( 'after_setup_theme', 'my_child_theme_setup' );

In the my_child_theme_setup function we’ll remove the original shortcode and add a new one:

function my_child_theme_setup() {
    remove_shortcode( 'video' );
    add_shortcode( 'video', 'new_video_shortcode' );
}

Now we just need to define what happens in that shortcode. You might want to paste in the contents from the original shortcode, so you can modify them accordingly:

function new_video_shortcode( $atts, $content = null ) {
 // shortcode contents
}
Testing

Even if you examined and tested the theme demo thoroughly, after you complete your website you should double-check it with the following points:

  • Make sure the website has no PHP errors and warnings. Enable the wp_debug from wp-config.php and test each page.
  • Check your site validation for styles and HTML using the Markup Validation Service.
  • Check your website performance using Pingdom Website Speed Test. The results here will reflect the website as a whole, including the hosting, the content, not just the theme files.
  • Test your website on different browsers and different screen sizes and devices. Make sure no critical errors are present. If you find anything that you think comes from the theme, ask the theme author to make the necessary corrections (they will want to know if something isn’t right with the theme!).
Optimizing and Maintaining Performance

To take your website to the next level performance-wise you should consider using a caching and image optimization plugin, my personal favorites being WP Super Cache and Smush Image Compression and Optimization. These two combined will earn you up to 200% optimization and load improvements.

You should also use a backup system like updraftplus or vaultpress so that any mistakes made when making changes or updates can be reversed.

Working with Theme Support

A theme’s author is your new best friend. Whenever you have questions, feel free to ask for support through the author’s preferred channel, whether that be through the comments on Themeforest, or a support ticket system. There are no silly questions, as only the theme author truly knows how the theme works. Saying that, please do not panic if you don’t get an immediate answer, as different authors work in different time zones. Generally speaking, the maximum gap to be expected between question and answer is 24 hours. Theme reviews will usually feature the level of support, as it’s a key part of the theme-buying experience.

Note: as an Envato customer you’ll have access to the Envato forums. Here’s you’ll find customers, theme authors, and moderators alike comparing notes, sharing advice, and asking questions. Join in!

Officially support will not include customization or modifications, it will only include general questions and bug fixing. However, if you build a good relationship with the theme author, give the theme in question a deserved rating, I guarantee that you will get thorough and professional support.

Conclusion

That wraps up this guide! You’re the proud owner of a new website theme (be it WordPress, another CMS, or for a static website), so go ahead and enjoy it! If you have any tips of your own, or any questions, please leave them in the comments.

More Resources to Help You Buy the Right Website Theme

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

So far in our series of CSS chart tutorials I’ve shown you how to build a column chart, a bar chart, and a semi-circle donut chart

In this tutorial I’ll cover the process of creating a pure CSS animated “thermometer” chart; the perfect way to track achievement of a single target.

What We’re Building

Here’s the chart we’ll be creating (hit reload to see it animate):

1. Begin With The Data

For the purposes of this demo, we’ll need some data. Let’s work with some fictional figures that describe the funding of a charitable organization over the years:

Year Funding
2018 €95,000
2016 €72,000
2015 €50,000
2012 €35,000
2010 €15,000

As you might’ve guessed, our challenge is to visualize this data in a thermometer chart. We’ll be taking our visual inspiration from those troublesome do-gooders Extinction Rebellion (if you haven’t heard of them, check out what they’re up to!). 

2. Specify the Page Markup

We’ll specify a wrapper element which contains three lists:

  • The first list sets the y-axis range. If you take a closer look at the table data above, you’ll see that the second column includes values up to 95,000. Keeping this in mind, we’ll define six values from 0 to 100,000 with a step size of 20,000. The values of the y-axis will therefore be 0, 20,000, 40,000, 60,000, 80,000, and 100,000.
  • The second list sets the x-axis data. These are extracted from the first column of our table, from lowest to highest. But their order doesn’t matter because we’ll absolutely position them. Notice in the markup below though, that a list item contains the same year twice. We could’ve omitted setting the year as the item’s text node. But it’s important to store this value in the data-year attribute. As we’ll see later, we’ll pass the value of this attribute to the related ::before pseudo-element. 
  • The third list groups the aforementioned table data, from the highest funding value to the lowest one. Again here the order isn’t important. You can show them from lowest to highest as well. This is completely up to you.

Here’s the required markup:

<div >
  <ul >
    <li>€100,000</li>
    ...
  </ul>
  <ul >
    <li data-year="2010">2010</li>
    ...
  </ul>
  <ul >
    <li>2018 - €95,000</li>
    ...
  </ul>
</div>
3. Define Some Basic Styles

Coming up next, we’ll set up a few CSS variables and some common reset styles:

@font-face {
  font-family: "Cheddar Gothic Sans";
  src: url("cheddargothic-sans-webfont.woff2") format("woff2"),
       url("cheddargothic-sans-webfont.woff") format("woff");
}

:root {
  --brand-color: #21a73d;
  --chart-bg-color: rgba(211, 211, 211, .3);
  --chart-line-color: black;
  --chart-x-color: white;  
  --line-color1: crimson;
  --line-color2: gold;
  --line-color3: firebrick;
  --line-color4: orange;
  --line-color5: darkblue;
  --black: #2d2929;
  --white: white;
  --transition-delay: 0.6s;
  --transition-delay-step: 0.6s;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

body {
  font: 1rem/1.2 Georgia, serif;
  padding-top: 70px;
  background: var(--brand-color);
}

Nothing really spectacular happens here, but perhaps one thing to note is that apart from the well-known “Georgia” system serif font, I’ve also used the premium “Cheddar Gothic” font taken from Envato Elements

Cheddar Gothic Font Family on Envato Elements

Note: For simplicity I won’t walk through all the CSS rules in the tutorial. You can check the rest of them by clicking the CSS tab of the demo project.

4. Style the Chart

The chart wrapper will be a grid container with horizontally centered content. Each column (list) will have its default width, with a 4rem gap between them.

Here’s the related CSS:

.chart-wrapper {
  display: grid;
  justify-content: center;
  grid-column-gap: 4rem;
  grid-template-columns: auto auto auto;
}
The y-axis

The first list which contains the y-axis data will also behave as a grid container. There’ll be a 3rem gap between the items:

Here’s the associated CSS:

.chart-wrapper .chart-y {
  display: grid;
  grid-row-gap: 3rem;
}
The x-axis

The second list which includes the x-axis data will have a fixed width of 50px. Furthermore, we’ll give it some additional styles so it’ll have the appearance of a real thermometer:

The corresponding styles are as follows:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x {
  position: relative;
  width: 50px;
  border-radius: 25px;
  border: 8px solid var(--chart-line-color);
  background: var(--chart-bg-color);
  overflow: hidden;
}

The list items will be absolutely positioned with an initial height of 0–hence by default, they’ll be invisible. Another thing we do is set their foreground color as transparent. In such a case, their text which contains the year won’t be visible:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  color: transparent;
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
  background: var(--chart-x-color);
  transition: height 0.5s ease-out;
}

For the next step we’ll specify some styles for their ::before pseudo-element. Remember its content will include the value of the associated data-year attribute (see markup above). Plus, it’ll be initially hidden:

The required styles:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li::before {
  content: attr(data-year);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  border-top: 4px solid;
  width: 20px;
  opacity: 0;
  padding-left: 3px;
  color: var(--black);
  font-size: 0.75rem;
  transition: opacity 0.5s ease-out;
}

.chart-wrapper .chart-x li:nth-child(1)::before {
  border-color: var(--line-color1);
}

.chart-wrapper .chart-x li:nth-child(2)::before {
  border-color: var(--line-color2);
}

.chart-wrapper .chart-x li:nth-child(3)::before {
  border-color: var(--line-color3);
}

.chart-wrapper .chart-x li:nth-child(4)::before {
  border-color: var(--line-color4);
}

.chart-wrapper .chart-x li:nth-child(5)::before {
  border-color: var(--line-color5);
}
Animate the Items

As soon as the page loads, the height of the list items will be animated and receive a value that’ll be determined by the associated funding value (see table above). For example, a value of 15,000 corresponds to height: 15%. Besides the list items, their ::before pseudo-element will be animated as well, though the animations won’t run simultaneously. The item will become visible first, then its pseudo-element.

Let’s now turn all the requirements above into code.

When the page loads, we’ll first add the loaded class to the body:

window.addEventListener("load", () => {
 document.body.classList.add("loaded"); 
});

At that point the items can be animated sequentially. To achieve this, we’ll take advantage of a technique used in my previous chart demos. We’ll define two CSS variables that determine the transition speed (feel free to change them if needed) and we’ll combine them with the calc() function.

Here are the CSS styles responsible for revealing the x-axis items:

/*CUSTOM VARIABLES HERE*/

.loaded .chart-wrapper .chart-x li:nth-child(1) {
  height: 15%; /*represents €15,000*/
  transition-delay: var(--transition-delay);
}

.loaded .chart-wrapper .chart-x li:nth-child(2) {
  height: 35%;  /*represents €35,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(3) {
  height: 50%;  /*represents €50,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(4) {
  height: 72%;  /*represents €72,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  );
}

.loaded .chart-wrapper .chart-x li:nth-child(5) {
  height: 95%;  /*represents €95,000*/
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

As already mentioned in previous chart demos, Microsoft Edge doesn’t support these math operations, so if you need to support it, you’ll have to pass some static values instead, like this:

.loaded .chart-wrapper .chart-x li:nth-child(2) {
  height: 15%;
  transition-delay: 1.2s;
}

.loaded .chart-wrapper .chart-x li:nth-child(3) {
  height: 35%;
  transition-delay: 1.8s;
}

Note: I could have defined the transition-delay property outside the loaded class like this:

.chart-wrapper .chart-x li:nth-child(1) {
  transition-delay: var(--transition-delay);
}

In either case, the result will be the same; the animation won’t run until the page loads. I only chose to include that property within the loaded class because I wanted to limit the CSS code and group the properties that share the same selector, for example those two:

.loaded .chart-wrapper .chart-x li:nth-child(1) {
  height: 15%; /*represents €15,000*/
}

.chart-wrapper .chart-x li:nth-child(1) {
  transition-delay: var(--transition-delay);
}

As already discussed in previous steps, the ::before pseudo-element should also appear on page load:

.loaded .chart-wrapper .chart-x li::before {
  opacity: 1;
}

But with an even bigger delay:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-x li:nth-child(1)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.chart-wrapper .chart-x li:nth-child(2)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.chart-wrapper .chart-x li:nth-child(3)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  ); 
}

.chart-wrapper .chart-x li:nth-child(4)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

.chart-wrapper .chart-x li:nth-child(5)::before {
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 5
  );
}
The labels

The third list which includes the table data will be hidden by default.

But at the moment the chart animations finish, it will appear:

.chart-wrapper .chart-labels {
  opacity: 0;
  transition: opacity .6s 3.8s; 
}

.loaded .chart-wrapper .chart-labels {
  opacity: 1;
}

Notice the value of the transition-delay property which is set to 3.8s. We’ll use this value because the transition-delay property of the last ::before element of the x-axis is set to 3.6s:

Finally, we’ll use the ::before pseudo-element of its list items to create the colorful rectangle which appears in the left corner of each item:

 Here are the styles needed for that:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-labels li::before {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.chart-wrapper .chart-labels li:nth-child(1)::before {
  background: var(--line-color5);
}

.chart-wrapper .chart-labels li:nth-child(2)::before {
  background: var(--line-color4);
}

.chart-wrapper .chart-labels li:nth-child(3)::before {
  background: var(--line-color3);
}

.chart-wrapper .chart-labels li:nth-child(4)::before {
  background: var(--line-color2);
}

.chart-wrapper .chart-labels li:nth-child(5)::before {
  background: var(--line-color1);
}

Our final project looks like this!

Conclusion

That’s it folks! In this tutorial, we built a pure CSS animated thermometer chart. I hope you found this exercise interesting and that it will challenge you to create your own CSS charts.

As always, thanks for reading!

More Tutorials About Charts and Animation

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

There is no shortage of bright and beautiful WordPress themes that catch visitors’ attention. But sometimes, a colorful website loaded with animations is not the right choice. It could well be that you need a WordPress website theme that presents your products and services in an elegant and simple fashion. And that’s exactly where clean WordPress themes fit in.

Merchandiser - Example of a clean WordPress eCommerce theme with beautiful, minimal site design. Embrace the Clean Beauty of Simplicity (To Make Better Websites in 2019)

Clean WordPress themes remove all the distracting elements and bring the focus onto your content. This allows your website visitors to see what you have to offer. 

“By thinking about the how you shape your layout and communicate with white space, your designs will look cleaner and clearer, and while being more usable, and converting better.” – David Kadavy

Freelancers and business owners, as well as authors, who want to put the focus on their products and services can benefit greatly from a minimal WordPress theme.

Find beautiful, clean WordPress themes on ThemForest and browse through the best themes that are trending in 2019

Best premium WordPress themes with clean, modern designs (2019)

Aside from minimalistic design, simple WordPress themes are also equipped to load faster and make it much easier for visitors to browse your site, ingest your message, and appreciate your brand offer. 

To put it simply, a beautiful website theme with a clean modern design will be inviting and can encourage your target audience to spend more time browsing your content or products. In this roundup we feature a number of the best-selling, simple, clean WordPress themes to work with.

The Best Clean and Simple WordPress Themes (2019)

These themes will help you make a fresh, modern website design with a minimalist aesthetic to be on trend for 2019. 

1. Roneous - Minimal Multipurpose WordPress Theme for 2019

The Roneous theme can be used for a variety of websites, including small businesses, freelancers, personal sites, music sites, and more. With comments like these:

“A really nice Theme to work with. Easy install, FANTASTIC support, quick very knowledgeable answers. The Theme is very well thought out, super flexible and easy to customize. Great hints in the right places!”

It’s clear why many customers are loving the theme. Some of the features include:

  • 100% Fully Responsive
  • 30+ Custom Visual Elements
  • Child Theme Ready
  • Advanced Blog, Portfolio, Product options
  • Custom post types including Team, Testimonial and Client
  • 12 Stunning Blog Pages
  • Latest Google Web Fonts included
  • WPML Multi-language ready
  • Social Media Sharing Ready
  • 950+ Retina Icons

Use this simple clean WordPress template to make a modern style website in 2019 with a beautiful minimal design. Learn how to install and setup the Roneous WordPress theme yourself in this Envato Tuts+ tutorial: 

2. Airi - Clean, Minimal WooCommerce Theme Airi - Clean, Minimal WooCommerce Theme

Airi is a clean, modern WooCommerce theme. Its design is minimal and it puts the focus on the display of the shop’s content. The design allows for a fun and vibrant branding and personality to shine through without unnecessary clutter and content overload. Airia is also an extensive theme featuring over 20 homepage demos, over 9 product page demos and a variety of creatively designed inner pages. It’s a fantastic choice for an eCommerce store that’s looking to have a simple but clean online presence.

3. The Ark - Modern and Elegant 2019 WordPress Theme

The Ark theme is a newcomer to the ThemeForest marketplace but is already breaking sales records. Theme buyers appreciate the ease of use and versatility of the theme, with comments like:

“Amazing theme! Easy to use out of box for any newbies. If you a "noob" that theme its for you, but if you geek you can create magic sites :) Love that :)”

Some of the theme’s features include:

  • Innovative design with 300+ pre-designed pages and more than 200 content blocks
  • Powered by Fresh Builder that allows you to drag and drop the desired element into place quickly to create a unique layout fast
  • Customizable theme options panel
  • The ability to add both custom and Google Fonts

This is a one of the many modern WordPress themes similar to SquareSpace style simple site designs.

4. Werkstatt - Simple Creative Portfolio WordPress Theme

The Werkstatt theme was built with creatives in mind. It’s a great choice for architects, freelancers, or design agencies that want a minimal and clean look for their portfolios. The demos show that you can present your portfolio in a variety of ways using a masonry or column layout. This simple WordPress theme also integrates with WooCommerce and Visual Composer and is optimized for SEO and fast loading times.

5. CheerUp - 2019 Clean WordPress Blog Theme Design

Lifestyle or fashion bloggers who love a modern style and clean design should look no further than the CheerUp WP theme. Its comes with several elegant layouts and over 200 possible layout combinations. It also boasts a high focus on images and allows you to start building your list thanks to easy integration with MailChimp.

6. Authentic - Lifestyle WP Blog and Clean Magazine Theme

Authentic is a light and minimalist WordPress blog and magazine theme with plenty of features to make your site stand out in 2019. You can choose between different slider options and galleries and take advantage of the complete Pinterest and social media integration so your readers can share your content effortlessly. 

On top of that, it also pays special attention to typography styling with drop caps and paragraph lead-ins. You can monetize this clean minimal WordPress theme using ads or selling your products. It’s also responsive and fully customizable.

7. XStore - Minimalist eCommerce Clean WordPress Theme

If you’re looking for a clean theme for your online store, consider the XStore theme. It offers a variety of clean modern homepage designs and different page layouts for individual products, allowing you to present them in a visually appealing way and share all the relevant details. 

This minimal modern WordPress theme also comes with several premium plugins such as Visual Composer, Revolution Slider, Smart Product Viewer 360, Subscription WooCommerce, and more. It’s also optimized for SEO and highly customizable for that perfect branded look.

8. Merchandiser - Clean WooCommerce Theme for WordPress

The Merchandiser theme is another excellent choice for making a clean and minimal online store that has all the right features to create a powerful WooCommerce store. This modern WordPress theme comes with extended shop catalog options, infinite loading, widgetized search, and the ability to include an off-canvas shopping cart and a quickview of products that doesn’t prevent your buyers from seeing the rest of the products in your store.

9. Once - Clean & Elegant WordPress Blog Theme Once - Clean & Elegant WordPress Blog Theme

Once is a wonderful theme for bloggers who are seeking an interesting but clean and modern design. This theme has been optimized for the newest WordPress version and its Gutenberg block editing style. Additionally, it features a variety of customizable page layouts such as grid, list, or masonry. Once also features automatic AJAX fetching of next posts when a visitor scrolls all the way down the page, encouraging users to keep reading.

This fantastic WordPress theme includes adaptive image sizes to help with loading speeds, free custom fonts, slide out menus and widgets on mobile screens, plus optimized code to keep your website loading even faster.

10. Search and Go - Modern 2019 WordPress Directory Theme

Consider the Search and Go theme if you plan on launching a directory site in 2019. This minimal directory WordPress theme has powerful search options that allow your visitors to quickly find the listing they want. 

Also, you can integrate Google Maps to show the location of places featured in your listing directory. Visitors can easily login using their Facebook or other social network account and you can offer custom pricing packages to charge for listing submission.

Find more great directory WordPress themes from ThemeForest: 

11. Ratio - Beautiful Modern Architecture WordPress Theme

The Ratio theme has plenty to offer to any architect looking for a clean and modern WP theme to make their site in 2019. Several homepage layouts are available and you can add parallax effects to your slideshows to catch the visitor’s attention and highlight your recent projects. 

This is one of the modern WordPress themes like SquareSpace in style, but packs in so many more features and customizability. The theme also includes custom social sharing buttons and a place to include testimonials from your previous clients. 

12. Toro - Clean, Minimal WooCommerce Theme Toro - Clean, Minimal WooCommerce Theme

Toro is a fantastic WordPress option for an eCommerce store that’s looking for a simple, minimal and of course, clean design aesthetic. Toro’s front-end builder, Elementor, makes it extremely easy to edit the theme to your liking and branding. The creators of Toro wanted to keep the experience of customization easy on for the owners as well:

"The goal was to design something that offers all the possible features you need to create your amazing website without having to add extra customization."

This clean and beautiful WordPress theme has many premade pages, including 19+ homepage templates, 51+ mobile design layouts, and an additional 70+ ready-made design elements.

13. Minimal - The Final Minimal Solution Minimal - The Final Minimal Solution 

Minimal is a multi-purpose WordPress theme with a stylish but clean visual design. The flow of the pages is smooth and easy-going for visitors. This theme will work great for a range of businesses, including hotels, restaurants, shops, small business, startups, or creative agencies. It features a broad range of pages such a lightbox portfolio–and regular portfolios–services, reports, and many more among its included 129 unique page designs.

14. Overlap - Fast Loading Clean WordPress Theme for 2019

How to make modern website with WordPress quickly starts with a pro theme design. The modern Overlap WP theme not only looks good but it also comes with parallax backgrounds and extensive customization options on the page and post level. This theme loads fast which means your portfolio will load instantly for your visitors. Also, each item will look great on mobile devices thanks to its responsive design. 

15. Sober - Beautiful Minimal WooCommerce WP Theme

Sober is a minimal and modern WooCommerce theme that can be used for digital stores, fashion stores, furniture stores or any other type of online store that wants to feature a clean look. The theme’s features include:

  • Mini cart
  • Custom widgets
  • Unlimited color schemes
  • Slider with smooth transition effects
  • Menu with multiple column styles and advanced widgets

This style of WordPress theme is similar to SquareSpace, but building your online store on WordPress in 2019 will give you much more customizability.

16. Anders - Clean Portfolio Theme Anders - Clean Portfolio Theme

Anders is clean and light WordPress portfolio theme. Visually, Anders has a lively look and feel to it thanks to its use of colors, images, typography, and layout. For a clean and simple theme it has a playful, fun, and even vibrant personality. Moreover, this theme comes with over 12 creative and intriguing portfolio layouts which will impress and wow your visitors. Anders also features a wonderful blog and a shop to give your online portfolio a lot more functionality if you need it.

17. Grand News - Clean WordPress Magazine Theme for 2019

The Grand News theme lets you publish your magazine in style with multiple layouts designed specifically with news and editorial sites in mind. The simple WordPress theme also has a complete social media integration which makes it easier to share your stories and your readers can filter through posts with a little help from the filterable posts module. 

You can also share reviews, which is useful for tech sites that often showcase different products. The Grand News theme is fully customizable, mobile responsive, and optimized to load fast. Use it to quickly make a great news site in 2019.

18. Alia - Minimal Personal Blog Alia - Minimal Personal Blog

Up next we have the lovely Alia theme; perfect for personal bloggers who are looking for a clean and simplistic design that’s spacious, minimal and designed for reading longer content. Yes, it comes with all the features you’d need, such as GDPR compliance, retina readiness, mobile designs, and a live customizer. Above all, this clean WordPress theme has a super high customer rating on Themeforest of 4.93/5 stars.

Here are a couple of happy reviews left by Alia’s customers:

"As a freelancer and an author this item is a very high quality of design and code, features are in place easy and clear, saved my time building blog for a client. What an amazing theme, absolutely loving it. Keei up up guys.""
"What I love about the Alia theme is that, it’s simple and clean, yet, still very attractive. Easy on the eye. Five stars for design, flexibility and customizability. Another 5 stars for customer support. They are a supportive, friendly bunch. I’m so happy and satisfied with this theme. Thank you, A-Works and more power!""
19. Gridlove - Grid Style WordPress Magazine Theme Design

The Gridlove WP theme allows you to share your news in a grid-based layout with the ability to highlight posts and widgets to encourage visitors to stay on your website longer. 

There are also plenty of places to insert third party ads and you can start building a community around your site through bbPress support. This simple WordPress theme is also translation-ready to allow you to publish your stories in any language you want.

20. GrandPhotography - Clean WordPress Photography Theme

Consider the GrandPhotography theme for your photography website. It has pre-built layouts that allow you to add slideshows, Ken Burns effects, video and parallax backgrounds, and much more to showcase your photography in style. Features include:

  • 80+ templates for photo gallery & portfolio
  • WooCommerce integration to sell your photography
  • Password Protected Galleries so you can keep client images safe
  • Photo Proofing so your clients can approve or reject their photos
  • MailChimp integration
  • Extensive Customization options
21. Arredo - Clean Furniture Store Arredo - Clean Furniture Store ..
Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Stuck on how to get your next website off the ground? Set up a landing page to attract attention, capture leads, and prep to launch your site. This collection of landing page WordPress themes should start you off right.

If you’re getting ready to launch your site or a new product, there’s no better way to announce the launch date and collect visitor information than to use a landing page theme for WordPress. They also come in handy when you want to host a webinar and allow people to register and attend.

The reason WordPress landing page themes work so well is because they focus on one goal alone: that goal will likely be to collect information from anyone who lands on the page, but could equally be to encourage people to follow social media accounts, purchase one single product, or show support in some other way. They’re void of all potentially distracting elements and offer visitors only two options–to convert, or leave.

“Being a Conversion-Centered Designer is the next evolution of design in business, and armed with today’s learning you’ll be making your boss/clients very happy when their conversion rates go up.” – Oli Gardner, Unbounce

In this article, we’ll show you the best WordPress landing page themes available on Themeforest and share some tips on making sure your landing page converts.

Landing page WordPress themes on Themeforest 20 Best Landing Page WordPress Themes

These landing page WordPress themes are a great choice whether you want to create a coming soon page or build hype for an upcoming product or a webinar. They’re also responsive, so you can rest assured your landing page will look great no matter the device.

1. Moto - Multipurpose WordPress Landing Page Theme

The Moto theme is a responsive and multipurpose landing page template for WordPress. It can be used to promote an upcoming launch of your app as well as promote a new product or a service. You can display all the benefits, showcase testimonials from other users, and insert several calls to action to encourage visitors to sign up.

2. Alfena - SaaS Startup WordPress Theme Alfena - SaaS Startup WordPress Theme

Alfena is an amazing WordPress theme if you’re looking to create a landing page for a SaaS product, a mobile app, or even a web app. Additionally, consider the Alfena theme if you’re looking for a theme that’s been heavily optimized, especially for SEO and mobile devices.

3. Permatex - Flat Lead Generation WordPress Theme

The Permatex theme is a great choice if you want to promote the launch of your website. You can embed a signup form right in the header and include testimonials from past clients as well as showcase your past projects. That said, it could also be used to announce the launch of a new app or a new product. The theme is also fully responsive and includes plenty of customization options.

4. LandKit - Intuitive WordPress Landing Page Theme

LandKit is an intuitive WordPress landing page theme that comes with Hybrid Composer page builder, so you can easily create and modify page layouts simply by dragging and dropping elements into place. It can be used to promote not only the launch of your app or a website, but also to promote the launch of your ebook or a book, contest entries, crowdfunding, and more.

5. Meminz - Modern WordPress Landing Page Theme

The Meminz features a modern design and is a perfect choice for any company or developer that wants to encourage people to download their newest software. Key features include:

  • Includes Visual Composer Builder
  • Easy Digital Downloads Compatibility
  • Supports Contact Form 7
  • Theme Options with Redux framework
  • Responsive
  • Unlimited Color and Variants
  • Translation Ready
  • Includes the ability to insert accordions, Tabs, and other elements
6. LeadInjection - Versatile Landing Page WordPress Theme

The LeadInjection WordPress landing page theme can be used for a variety of purposes, from promoting an ebook to announcing the launch of your online course. The theme features a clean and modern design and comes packed with premade layouts and a custom plugin designed to help you convert visitors into buyers and subscribers. Customers love the design quality:

Great theme, amazing support! Simple, original, clean and modern theme for landing page or entire site. ;)
7. BeSmart - Beautiful Landing Page WordPress Theme With Responsive Design

The BeSmart theme features a beautiful and elegant design on top of advanced features designed to help you increase conversion rates. It can be used to promote web apps, mobile apps, and a variety of marketing and startup websites. It’s fully responsive, optimized for search engines, and comes with an advanced framework with tons of customization and theme options.

8. IT Solutions Mitech - Technology, IT Solutions & Services WordPress Theme IT Solutions Mitech - Technology, IT Solutions & Services WordPress Theme

The Mitech WordPress theme is perfect for creating landing pages for software, technology, or app websites. Alternatively, it’s also a great choice for startups and small businesses who are looking to create professional landing pages. Mitech comes with 6 unique demos and 6 header designs for setting up a strong first impression and a variety of useful plugins including the WPBakery Page Builder and Slider Revolution. Additionally, this theme is cross-browser and SEO optimized to help you reach a wider audience.

9. Ola - App Landing Page Theme For WordPress

If you want to promote your app, consider the Ola theme. The theme features a colorful design packed with features such as:

  • Powerful theme admin panel
  • The ability to display testimonials and app features
  • Optimized to load fast
  • Extensive documentation
  • Fully responsive
  • WooCommerce integration
10. Urip - Professional WordPress Landing Page Template

The Urip template is a modern and responsive WordPress landing page template with bold typography and clean design. You’ll be able to edit the premade layouts with ease thanks to the Visual Composer builder and you can customize the entire look of your site through the admin panel. It also includes Revolution Slider and integrates with WooCommerce on top of being responsive and optimized for SEO. Customers praise the design and features available:

This is a great theme with lots of extras. Support is friendly and very helpful. I will look at themes from Ninetheme from now on before considering any theme from anyone else.
11. Attraction - One Page WordPress Theme

If you want to launch your landing page quickly, try the Attraction landing page WordPress template. It’s a responsive one-page template, built for promoting and selling products, services, or events. The template includes several layouts which can be easily customized with the drag-and-drop page builder and you can create as many sections as you need to promote your products and events.

12. Fluid - Startup and App Landing Page Theme Fluid - Startup and App Landing Page Theme

Fluid is an excellent choice if you’re looking to create a tech, startup, or app related landing page. It’s a great WordPress theme that comes with over 40 custom shortcodes, 9 modern and simplistic homepage designs, and a full setup for an online portfolio too. Of course, Fluid is a fully responsive and retina ready theme that comes pre-equipped with all the standard plugins such as Contact Form 7, Revolution Slider and Visual Composer so you can easily customize your landing pages.

13. Focus - Flexible Responsive WordPress Theme

The Focus landing page WordPress theme comes with a clean and responsive design and powerful features to help you design a highly-converting landing page. Main features include:

  • Visual Composer Drag & Drop Page Builder Plugin.
  • One-click demo install
  • Several premade demos
  • Optimized for search engines
  • Beautiful CSS3 Animations
  • And more
14. LandX- Multiconcept Landing Page Theme

The LandX is a multi-purpose and responsive WordPress landing page template with five homepage styles, unlimited color schemes, MailChimp integration, and a plethora of other features that allow you to customize the theme and display the main benefits of your product as well as your team members, testimonials, and more. Check out what our customers love about this theme:

Great looking landing page. Very customizable. Helped make [our website] a success.
15. Sonno - WordPress Landing Page Template for Startups

If you’re a startup that wants to gather leads before the official launch date, the Sonno theme is a great choice. It features a responsive, modern design and it’s easy to customize. You can choose between four homepage variations, embed YouTube videos anywhere, and use more than 500 icons to add extra visual appeal to your site.

16. Innovio - Multipurpose Landing Page Theme Innovio - Multipurpose Landing Page Theme

Innovio is a WordPress theme that’s been specifically designed to function as a multipurpose landing page theme; that means it’s going to match whatever your landing page needs might be. Customization and editing are made easy through the drag and drop page builder. In addition to the integrated social media sharing, Innovio also includes a wide variety of shortcodes specifically created to help you design a custom landing page.

17. Shopaddict - WordPress Landing Pages To Sell Anything Shopaddict - WordPress Landing Pages To Sell Anything

Shopaddict is a WordPress landing page theme that’s been specifically designed and optimized to help you make the most sales. Thanks to the drag and drop page builder, you can create landing pages that are as simple and minimal or as long and diverse as you need them to be. Some of Shopaddict’s notable features include:

  • Coundown plugin
  • GDPR and RTL-ready
  • 99+ Ccstom shortcodes
  • Fully responsive and retrain ready layouts
  • Custom, advanced SEO options
  • Layer Slider and Revolution Slider
18. One - Creative Product Landing Page Theme

The One theme is a creative WordPress landing page template that integrates perfectly with MailChimp and Contact Form 7, so you can easily capture visitor information. The theme is fully responsive, and you can easily showcase the benefits of your product and feature testimonials to build social proof. The theme is also easy to use which is one of the main reasons customers love it:

Good support and easily editable.
19. Animo - Elegant Landing Page Theme

The Animo theme features a clean and elegant design that allows you to remove distractions from your website, so your visitors have higher chances of converting. You can create unlimited layouts, include as many screenshots of your product as you want, and display testimonials to build social proof. On top of being responsive and optimized for SEO, the Animo landing page WordPress theme makes it easy to collect visitor data.  

20. Cora | A Creative MultiPurpose WordPress Theme Cora | A Creative MultiPurpose WordPress Theme

The Cora theme is a large, multipurpose WordPress theme that makes fantastic and highly creative landing pages. It works great for just about any business, for example for freelancers, agencies, consultants, photographers, or filmmakers’ sites. Its code is clean and written for fast loading. Additionally, Cora comes with a plethora of premade designs such as 25 inner pages and 12 homepages that you can easily turn into a compelling and creative landing page.

5 Tips For Creating a Landing Page That Converts

Landing pages, when used right, can be your best marketing asset and dramatically impact your bottom line. Here are a few important best practices to keep in mind so you can create a great landing page that converts visitors into buyers and subscribers.  

  1. Leave Out Unnecessary Elements. The goal of a landing page is to convert the visitor into a buyer or a subscriber. With this in mind, avoid linking back to other parts of your website or any other external link. If you’re building a coming soon page and want to build your social media following at the same time as you build your email list, consider including the links to your profiles on the thank you page that displays after they fill out the form.
  2. Reinforce Your Company’s Credibility. If people can see you’re credible, they’re more likely to convert. Add testimonials, reviews, and features in other publications on your landing page. You can also showcase partnerships with other reputable companies.
  3. Write Compelling Headlines. When writing a headline for your landing page, use words that identify your visitor’s problem and explain why your product or service is the best solution for it.
  4. Ask Only for the Necessary Information. While it might be tempting to gather as much information about your visitors as possible, keep in mind that shorter forms convert better. Ask only for the absolute crucial information and use your email campaigns to get to know them better.
  5. Test Everything. The last piece of advice is to test everything on your landing page. This includes your calls-to-action, buttons, colors, form placement, and more. For best results, make sure the current version of your landing page is up for at least two weeks so you can see how effective it is. You can then start making small changes to fine tune your landing page.
Get Started with the Best Landing Page WordPress Theme

Thanks to a plethora of WordPress landing page themes, you can whip up a gorgeous landing page in a couple of hours without breaking the bank. Pair that with our themes above and you’ll have a landing page that not only looks great but also converts. Get one step closer to launching your website or product by choosing the best landing page WordPress theme right now and you’ll be off to the races!

Learn More About Landing Pages and Conversion

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

In a previous post, I showed you how to build a beautiful fullscreen portfolio page. During that tutorial we also learned how to create a responsive CSS column chart. In this tutorial we’ll build another attractive static portfolio page, this time featuring a pure CSS bar chart without using any external JavaScript library, SVG, or the canvas element!

What We’re Building

Here’s the project we’ll be creating:

We have a lot of exciting things to cover, so let’s get started!

Note: This tutorial assumes some good CSS knowledge. For instance, you should be familiar with CSS positioning and flexbox basics.

1. Begin With the Page Markup

The page markup consists of a header and three fullscreen sections:

<header >...</header>
<section >...</section>
<section >...</section>
<section >...</section>

Note: Beyond the elements’ specific classes, our markup contains a number of utility (helper) classes. We’ll use this methodology to keep our CSS as DRY as possible. However, for the sake of readability, within the CSS we won’t group common CSS rules.

2. Define Some Basic Styles

Following what we’ve just discussed above, we first specify some reset rules along with a number of helper classes:

:root {
  --gray: #cbcfd3;
  --white: white;
  --black: #1a1a1a;
  --lightwhite: whitesmoke;
  --lightblue: #009dd3;
  --peach: #ff9469;
  --transition-delay: 0.3s;
  --transition-delay-step: 0.3s;
  --skills-width: 120px;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

.d-block {
  display: block;
}

.d-flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-content-center {
  justify-content: center;
}

.justify-content-between {
  justify-content: space-between;
}

.align-items-center {
  align-items: center;
}

.align-items-end {
  align-items: flex-end;
}

.flex-grow-1 {
  flex-grow: 1;
}

.vh-100 {
  height: 100vh;
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-fixed {
  position: fixed;
}

.text-center {
  text-align: center;
}

.text-gray {
  color: var(--gray);
}

.text-lightblue {
  color: var(--lightblue);
}

.text-peach {
  color: var(--peach);
}

.bg-white {
  background: var(--white);
}

.bg-lightwhite {
  background: var(--lightwhite);
}

.h1 {
  font-size: 2.5rem;
}

.h2 {
  font-size: 2rem;
}

The naming conventions for our helper classes are inspired by Bootstrap 4’s class names.

3. Build the Page Header

The page header includes:

  • The logo
  • Main navigation
Header HTML
<header >
  <nav >
    <a href="" >
      <strong>DM</strong>
    </a>
    <ul >
      <li>
        <a href="#skills">Skills</a>
      </li>
      <li>
        <a href="#contact">Contact</a>
      </li>
    </ul>
  </nav>
</header>
Header CSS 
.page-header {
  left: 0;
  right: 0;
  top: 0;
  padding: 20px;
  z-index: 10;
}

.page-header .logo {
  font-size: 1.7rem;
}

.page-header li:not(:last-child) {
  margin-right: 20px;
}

.page-header a {
  font-size: 1.1rem;
}
4. Build the Hero Section

The first section of our page includes:

  • A heading
  • A call-to-action

Here’s what it will look like:

Section #1 HTML
<section >
  <h1 >...</h1> 
  <div >...</div>  
</section>
Section #1 CSS

The call-to-action includes a thin line which is animated infinitely, compelling the user to scroll down to see what’s beneath “the fold” (which may or may not exist).

Its styles:

.scroll-down {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  text-transform: uppercase;
  transition: all 0.5s;
}

.scroll-down.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.scroll-down::after {
  content: '';
  display: block;
  margin: 3px auto 0;
  width: 1px;
  height: 60px;
  background: var(--black);
  transform-origin: bottom;
  animation: pulse 3.5s infinite linear;
}

@keyframes pulse {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(0.65);
  }
  100% {
    transform: scaleY(1);
  }
}
Section #1 JavaScript

Initially the call-to-action will be visible. But when the user starts scrolling, it will disappear. More specifically, it will receive the is-hidden class which we have just defined in the styles above.

Here’s the required JavaScript code:

const scrollDown = document.querySelector(".scroll-down");

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
  window.pageYOffset > 0
    ? scrollDown.classList.add("is-hidden")
    : scrollDown.classList.remove("is-hidden");
}
5. Build the Section #2

The second section of our page includes:

  • A background image
  • The bar chart which demonstrates web skills

Here’s what it looks like:

Section #2 HTML
<section  id="skills">
  <div ></div>
  <div >
    <div >
      <ul >
        <li >
          <span>CSS</span>
        </li>
        ...
      </ul>
      <ul >
        <li >
          <span >Novice</span>
        </li>
        ...
      </ul> 
    </div>
  </div>
</section>
Style the Background Image

The left part of this section contains an image taken from Wordpress Code Backgrounds on Envato Elements. It will give us the atmosphere we’re looking for, whilst inspiring the colors we use elsewhere in the design:

WordPress Code Backgrounds

Some key things:

  • The image will appear on screens wider than 900px and
  • we’ll use CSS (via the background-image property) and not HTML (via the img element) to place the image within the page. We choose this method because that gives us an easy way to enhance the image appearance. For example, we’ll skew it by taking advantage of its ::after pseudo-element. You could even play with its colors using background-blend-mode: luminosity;, for example.

Note: By default an img is an empty element and doesn’t have pseudo-elements.

The corresponding styles:

.bg-img {
  background: #fff url(bg-programming.jpg) no-repeat center / cover;
}

.bg-img::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 7rem;
  background: var(--lightwhite);
  transform: skew(-5deg);
  transform-origin: left bottom;
}

@media screen and (max-width: 600px) {
  .bg-img {
    display: none;
  }
}
Style the Chart

At this point we’ll concentrate on the most challenging part of our demo; how to construct the bar chart. 

The chart will have two axes. On the y-axis we’ll place the web skills (CSS, HTML, JavaScript, Python, Ruby). On the other x-axis we’ll put the skill levels (Novice, Beginner, Intermediate, Advanced, Expert).

The y-axis

In terms of markup, each skill is a list item placed inside the .chart-skills list. Next, each list item will hold its text within a span element, like this:

<ul >
  <li >
    <span>CSS</span>
  </li>
  ...
</ul>

We define a fixed width for the span element equal to 120px. To avoid repetition and so we can easily change this value (as other values will depend on it), let’s store it inside a CSS variable:

:root {
  --skills-width: 120px;
}

.chart-wrapper .chart-skills span {
  display: inline-block;
  width: var(--skills-width);
  padding: 15px;
}

Each list item will contain its own ::before and ::after pseudo-elements:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-skills li::before,
.chart-wrapper .chart-skills li::after {
  content: '';
  position: absolute;
  top: 25%;
  left: var(--skills-width);
  height: 50%;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  z-index: 2;
}

The ::after pseudo-element will have a light gray color and a static width which is calculated by subtracting the span width from the list item width:

.chart-wrapper .chart-skills li::after {
  width: calc(100% - var(--skills-width));
  background: rgba(211, 211, 211, 0.3);
}

Here’s how it looks:

The initial width of all ::before pseudo-elements will be 0:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-skills li::before {
  width: 0;
  background: var(--lightblue);
  transition: width 0.65s ease-out;
}

But as soon as the chart becomes visible in the viewport, their width will be animated and receive a value that will be determined by the associated skill level:

Add Class When in View

There are multiple ways to detect whether an element is visible in the viewport or not. Let’s take advantage of the following handy function extracted from an old, yet popular StackOverflow thread:

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

If you have read my previous tutorials, you might remember that I’ve also used this function to animate a vertical timeline.

So, back to the job in hand! When the chart becomes visible in the current viewport, we’ll give it the in-view class.

Here’s the JavaScript code that does this job:

const chartWrapper = document.querySelector(".chart-wrapper");

window.addEventListener("scroll", scrollHandler);

function scrollHandler() {
  if (isElementInViewport(chartWrapper)) chartWrapper.classList.add("in-view");
}

The ::before pseudo-elements should be animated sequentially. To give them the desired transition speed, we’ll use two other CSS variables along with the calc() CSS function.

Here are the CSS styles responsible for revealing those sudo-elements:

:root {
  ...
  --transition-delay: 0.3s;
  --transition-delay-step: 0.3s;
  --skills-width: 120px;
}

.chart-wrapper.in-view .chart-skills li:nth-child(1)::before {
  width: calc(90% - var(--skills-width));
  transition-delay: var(--transition-delay);
}

.chart-wrapper.in-view .chart-skills li:nth-child(2)::before {
  width: calc(75% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step)
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(3)::before {
  width: calc(62% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 2
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(4)::before {
  width: calc(49% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 3
  );
}

.chart-wrapper.in-view .chart-skills li:nth-child(5)::before {
  width: calc(38% - var(--skills-width));
  transition-delay: calc(
    var(--transition-delay) + var(--transition-delay-step) * 4
  );
}

Keep in mind that Microsoft Edge doesn’t support the above math operations, so if you need to support it, just pass some static values instead, like this:

.chart-wrapper.in-view .chart-skills li:nth-child(2)::before {
  transition-delay: 0.6s;
}

.chart-wrapper.in-view .chart-skills li:nth-child(3)::before {
  transition-delay: 0.9s;
}
The x-axis

In terms of markup, each level is a list item placed inside the .chart-levels list. Next, each list item will hold its text within a span element, like this:

<ul >
  <li >
    <span >Novice</span>
  </li>
  ...
</ul>

Some things to note:

  • We set the list as a flex container. Also, we absolutely position it and give it a left padding equal to the width of the spans of the first list.
  • We give list items flex-grow: 1 to grow and take up all the available space. 
  • The spans are positioned at the very bottom of their parent list item. 

The associated styles for that list:

/*CUSTOM VARIABLES HERE*/

.chart-wrapper .chart-levels {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding-left: var(--skills-width);
}

.chart-wrapper .chart-levels li {
  border-right: 1px solid rgba(211, 211, 211, 0.3);
}

.chart-wrapper .chart-levels li:last-child {
  border-right: 0;
}

.chart-wrapper .chart-levels span {
  bottom: 0;
  transform: translateY(50px) rotate(45deg);
  padding: 10px;
  width: 100%;
}
6. Build the Section #3

The third section of our page includes:

  • A heading
  • A mailto link

Here’s what it looks like:

Section #3 HTML
<section  id="contact">
  <h2 >...</h2>
  <a href="mailto:hello@digitalmonsters.com" >...</a> 
</section>
7. Go Responsive

We’re almost done! As one last thing, let’s ensure that the text has a solid appearance across all screens. We’ll apply a rule targeting narrow screens: 

@media screen and (max-width: 600px) {
  html {
    font-size: 12px;
  }
}

One important note here is that in our styles we’ve used rem for setting the font sizes. This approach is really useful because the font sizes are relative to the root element (html). If we decrease its font size like in the code above, the rem-related font sizes will be dynamically decreased. Of course, we could have used rems for the other CSS properties as well.

The final state of our project:

Conclusion

In this tutorial we improved our CSS knowledge by learning how to build an attractive static portfolio page. We went one step further and created a responsive bar chart without using any external JavaScript library, SVG, or the canvas element. Just with plain CSS!

Hopefully this tutorial has given you enough inspiration for building your awesome portfolio site. I’d love to see your work–be sure to share it with us!

Next Steps

If you want to further enhance or extend this demo, here are two things you can do:

  • Add smooth scrolling behavior to the menu links without using any external JavaScript library.
  • Use the more effective Intersection Observer API instead of the scroll event for checking whether the chart is visible in the viewport or not. 

As always, thanks for reading!

More Practical Projects to Boost Your Front-end Skills

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

A simple one page website is a great way to get your company’s presence established online. It allows you to share important information about your business in a concise way, letting your visitors see everything at a glance. 

One of the reasons one page websites are so attractive is because they can make great use of parallax effects to add visual appeal (and when done properly) without slowing your website down. There are more key advantages to consider making a one page website:

Why Make a One Page Website (With Parallax Effect)

This type of website is a great choice for any business owner who doesn’t have a lot of time to spend on maintaining their website or for any new business that’s just getting started. Busy freelancers or design agencies can also benefit from showcasing their company through a one page website.

Finally, one page websites are perfect for app developers or companies looking to tease a product launch. Since one page websites are usually accompanied by multiple calls to action, they can be a great way to build your email list before you’re ready for the official launch.

As is often the case with WordPress, there is no shortage of one page themes with beautiful parallax effects. From multipurpose themes to corporate and portfolio themes, you can find a one page theme that suits your industry and the nature of your business. There are more top WP themes featured here: 

How to Use a One Page Parallax Theme to Make Your Website

In this article, we’ll show you how to use one of those great WordPress themes to make a simple one page website with a parallax effect.

What You’ll Need to Get Started

Let’s walk through the steps of how to make one page website. Before creating your site, there are a few things you’ll need to get started. Aside from the theme you’ll be using, you’ll also need to purchase a domain name and a hosting plan. Finding a nice set of images to go along with your website is recommended to take full advantage of the parallax effect. Now, let’s get started:

1. Purchase Your Domain Name

Before anything else, you will need a domain for your new website. It’s your online home and the face of your business. If you have a business name, the obvious choice is to use your business name as the domain name. But if you’re a freelancer doing business under their own name, then your domain name should reflect that.

2. Select a Quality Hosting Plan

After you’ve decided on the domain name, next up is to purchase your hosting plan. Most hosting companies will allow you to purchase a domain name at the same time when you sign up for a hosting plan. In fact, most of them will include a free domain name for a year. A shared hosting plan is a good place to start and you can always upgrade your plan later on if you decide to switch to a multi-page website.

Managed WordPress hosting can make a lot of sense. In this case the host takes care of security, updates, and a lot of the other behind-the-scenes stuff, leaving you to focus on producing great content and building your audience. Envato has a partnership with SiteGround that offers you up to 70% off managed WordPress hosting.

Managed WordPress Hosting from SiteGround3. Grab a Top One Page WordPress Theme

Both free and premium themes are available for WordPress, but it is often recommended to choose a premium theme. A premium WordPress theme will include dedicated support from the theme developer which means it will always be kept up to date and follow development best practices.

And in case you need help with the theme setup, a developer of a premium theme is more likely to get back to you in a timely manner. Or, you can purchase additional theme support at the time of purchase. 

For this tutorial, I’m using powerful The Ark theme from ThemeForest. It’s a one-page theme that comes with several different demo layouts:  

The Ark WordPress theme with multiple layout options, ready to use quickly.

On top of that, it’s also completely responsive so your site will display perfectly across all screen sizes. It also includes a page builder that will allow you to create a completely unique one page website layout from scratch or to easily add extra sections to your site on a whim.

The Ark WordPress theme allows you to make a one page website quickly.

You can browse through the one page themes to find the one you like. When you’ve found a theme that meets your needs, go ahead and purchase it and then download the theme files to your computer.

The Ark WordPress theme comes with several demos.4. Compile Your Content and Images

The last thing on our list are the content and the images. While it’s true that one page websites are limited in terms of how much content you can display, it still helps if you already have your content pre-written, rather than coming up with it on the spot.

You should also take some time to gather all the images you want to use. This includes background images for the parallax sections which can be photos of your workspace, your employees, your company, or even your product. Don’t forget to include photos of past clients for the testimonial section or team member photos if you want to add a more personal touch to your brand.

Getting Started

Once you’ve purchased the hosting plan along with the domain and the theme, it’s time to get started with your website. The first step is to install WordPress, then your theme, as well as any needed plugins.

1. Installing WordPress

Your hosting company will send you a welcome email with all the necessary information about your hosting plan. Open the email and make note of the username and password for your cPanel. Click the link that will take you immediately to the cPanel login page. Enter the provided username and password and then you’ll be ready to install WordPress.

  1. In the cPanel, look for Website Installers or Fantastico Installer or Softaculous Installer. Click on the WordPress icon and then click on Install button. You will be asked to provide a username and password and select the domain where to install WordPress.
  2. Choose a username and a strong password that contains both uppercase and lowercase letters as well as numbers and a special symbol. Write the username and password down somewhere safe.
  3. Click on Install button once more to finish the installation process.

When WordPress has finished installing, you will see a notification screen with a link to your WordPress dashboard. Click on the link and then enter the username and password you chose during the installation process.

2. Installing Your WordPress Theme

Now that you’re logged into your WordPress website, click to Appearance > Themes > Add new. On the screen that loads, select Upload Theme.

Installing your WordPress theme quickly.

Click on the button to select the zipped folder with your theme files and then click Upload. Once the theme is installed click on Activate.

3. Install and Activate Required Plugins

After the WordPress theme has been activated, it will give you a notice that it requires additional plugins to be installed. To install them, click on the Begin Installing Plugins, select all the plugins and click on Install in the drop down menu.

WordPress Plugins to install.

After that, navigate to Plugins > Installed Plugins and select all the plugins that you just installed and this time select Activate from the drop-down menu.

Activate your WordPress Plugins.How to Setup Your One Page WordPress Site

Now that your WordPress theme is activated and the additional plugins have been installed, it’s time to customize the theme to match your brand and to add in your content. One of the easiest ways to set up your one page website is to start with a premade layout.

Thankfully, most premium WordPress themes include several layouts that are already configured, so all you need to do is replace the information with your own. For this tutorial, I’ve selected the main demo as it has a wide range of premade page layouts, including attractive one page layouts.

Once your chosen demo is installed, you can begin customizing the theme and replacing the information.

First, click on Settings > Reading > Front Page Displays a Static Page and choose one of the one page layouts as your homepage. Then select the desired layout for your posts page and click on Save Settings.

To replace the content, navigate to Pages > All Pages, choose your homepage and click on Edit.

To customize the images used in the header, click on the Edit icon for the section you want to customize and then select Box Model. Scroll down to the Image or Parallax section and replace the image with your own. Remember to use images that aren’t too distracting so your copy stands out and conveys the message about your company.

Add your company’s messaging to WordPress.

Keep the headings and main text short and to the point as you don’t want the text to become too hard to read on the image. You can also customize the colors and adjust margins and paddings in this area, as well as customize the fonts.

To edit the demo content, click on the section that contains text and enter your own copy in the Visual Editor. Simply repeat this process for each section that needs editing. As you are editing sections, click on element.style tab and enter an ID with lowercase letters in the ID field. This will help you set up your navigation menu shortly.

Adding ID attributes to your WordPress theme.Alternatively, you can further customize the layout or create one from scratch by going to Ark > Sitemap.

The Ark submenu also includes options for customizing headers, footers, sidebars, and more.

Now that you’ve replaced the content with your own, let’s setup the navigation menu. Go to Appearance > Menus and choose One Page Navigation from the dropdown. Tick the box next to the Main Navigation under Display Location and click Save.

Adding a menu to your one page WordPress theme setup.

Click on Custom URL and enter the ID of all the sections that you named during the content editing process in the URL field. Click on Update Menu and your navigation is all set.

The final step is to customize the WordPress theme to match your branding. In your dashboard, click on Ark > Theme Options. On this page you can change which headers you want to use on your site, customize your colors, add custom fonts or select Google Fonts.

Work with the WordPress theme Options panel.

Keep in mind that the colors you choose should complement each other, but do make sure to make your accent color stands out from the rest of the page. This will bring your call to action buttons into main focus.

How to Add Extra Sections to Your One Page Website

In case you need to add more sections added to your one page website, you can easily do so by going to your page, scrolling to the bottom and clicking the icon to add a section, a row, or any other element.

Add sections quickly to your one page website in your WordPress theme.

You can also create a completely new layout by clicking on Pages > Add New > Use Fresh Builder and adding sections as elements the way you want them to appear. New layout can also be created by going to Ark > Sitemap > Default Page layout button and clicking the + sign at the bottom. Simply, give your template a name, click Save, and then add sections and elements that you want.

Adding a new page layout to your WordPress theme setup.

And with that, your one page website is setup. Now that you’ve learned how to make one page website from a WordPress theme,  it’s now time to start driving traffic to it.

What To Do After Your Site is Live (Promote It)

Just because your website is live, that doesn’t mean people will immediately know that they can find your business online. The first step is to update your social media profiles and add a link to your site in the profile section.

Another easy way to promote your website is to include the link to it on your business cards and any other collateral you might have, such as: your letterhead, brochures, or fliers. You can also include your new website in your as email is still widely used today.

The best way, however, is to add a blog and publish content on a regular basis. This will not only give you your own content to share on social media, but it will help drive traffic to your website where people can learn more about what you do.

Get Started (Quickly) With a Great One Page WordPress Theme

A business website doesn’t always have to include multiple pages to convey information about your products or services. Sometimes, a one page website is more than enough to pique the interest of your target audience and encourage them to contact you. Take advantage of being able to present your information on a single page and use one of our premium WordPress themes to create a great one page website for your business.

Learn How to Use WordPress

Are you new to using WordPress? Learn how to use WordPress in our complete guide. This guide will take you through the full process, from the basics of creating posts and pages right through to installing and customising your first WordPress theme and setting up plugins for security and performance.

Read Full Article
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Nowadays, it’s essential for any business to have an established online presence. Aside from various social media profiles, a website is an absolute must if you want to promote and market your company.

WordPress is, no doubt, a popular platform of choice for many business owners; partly because it’s easy to use and partly because of the sheer amount of themes that allow anyone to create an attractive site quickly.

However, some business owners don’t want a typical website with multiple pages. They want a simple site that allows them to get their message across, to invite potential customers and clients to take action, all while still looking like a million bucks. 

That’s where one page WordPress themes come in.

Beautiful one page WordPress template layout examples - from the Bateaux theme.Why Use a One Page WordPress Theme?

A one page Wordpress theme is a great way to present the information about your company in a clear and concise way: 

  • They work well for websites that don’t have a lot of content for their inner pages which can leave your website feeling bare or unfinished.
  • They don’t have to visit multiple pages to find your contact information or to take a look at services and products you offer.
  • Your information is immediately available to anyone who lands on your site and you can clearly direct your visitors. 

Another benefit of one page WordPress themes is the fact that most of them come with a stunning parallax effect. If you ever wanted to use full-width images on your site without causing your site to load slowly, then a parallax design is exactly what you’ve been looking for. What’s more, the parallax effect lends itself greatly to highlighting your calls to action and drawing attention to them.

Today, we showcase the best one page WordPress themes with parallax designs that our ThemeForest marketplace has to offer:

Best one page WordPress themes, available on ThemeForestThe Best One Page (Parallax) WordPress Themes

Here we've curated a selection of featured one page WordPress themes that are suitable for a variety of business websites: from agencies and startups to designers and photographers, there’s a theme for everyone on this list. Browse through these to find the best one to make your one page website with.

1. Uncode - Creative Multiuse WordPress Theme Uncode - Creative Multiuse WordPress Theme

Like many of the one page WordPress themes listed in this roundup, Uncode is a creative multi-purpose theme based on WPBakery Page Builder (Visual Composer). It comes packaged with a wide range of one-page possibilities (50+), including the screenshot you see above which uses a subtle parallax hero section to great effect. If you’re looking to build a landing page, and you’re in need of inspiration, Uncode will suit you perfectly.

2. 907 - Responsive Multi-Purpose WordPress Theme 907 - Responsive Multi-Purpose WordPress Theme

907 shows off full-screen images in all their glory (as you can see above), allowing parallax video, customizable color overlays, with recent updates allowing full screen background videos on mobile too. 907 is another multipurpose theme which gives you the flexibility to build your own unique one-page website from the range of components available.

3. DynamiX - Business / Corporate WordPress Theme DynamiX - Business / Corporate WordPress Theme

Parallax is at its most effective when it’s barely noticeable–the subtle presence of depth and dimension, rather than jarring movement and confusing scroll actions. Nowhere better can that be seen than in the Lakeside demo from DynamiX (screenshot above). It’s perfect for a one page website. DynamiX has been sold over 10,000 times since its launch; testament to its reliability and popularity over the years. 

4. Fevr - Creative One Page Parallax WordPress Theme

All of you mobile developers or business owners who are about to launch their own app, product, or service should take a close look at the Fevr one page website template. The layout has plenty of sections and space to showcase all the features and benefits and help you generate buzz for launch day. 

On top of an elegant design, this one page, parallax WordPress theme also offers a setup wizard to help you get your site up and running as fast as possible. There are also endless possibilities to customize colors, fonts, menus, icons, and much more.

5. The Ark - Fast One Page Parallax WordPress Theme

Touted as “the next generation WordPress theme” Ark has a lot to offer. The demos feature one page layouts for a restaurant and a hair salon, but Ark is flexible enough to be used by any other type of business to create a stunning one page website. 

The theme includes the Fresh Page Builder and more than 200 big section blocks that you can drag and drop anywhere on the page. The parallax effects are there as well, thanks to their Fresh Grid feature. Lastly, this one page website template can be integrated with your brand seamlessly thanks to the powerful theme options panel.

Learn how to quickly setup a one page website using this great WordPress theme: 

6. Bateaux - Versatile WP Theme With One Page Parallax Design

If you are on the lookout for a one page WP theme for your creative studio, look no further than Bateaux. This WordPress theme has a minimal and clean design that puts your services into main focus, accompanied with sections to show your past work, highlight theme members, and incorporate elegant calls to action. 

The parallax WordPress theme is powered by the Blueprint page builder which gives you a preview of changes in real time. It’s also compatible with popular plugins such as WPML so you can translate your website and market to an international audience.

7. TwoFold - One Page WordPress Parallax Photography Theme

TwoFold offers a variety of different layouts that were designed with photographers in mind. From Ken Burns effects to sliders and full-width single image, the one page WordPress template will showcase your photography with style. Several header layouts are also available as well as password protected pages to protect client photos.

8. Skrollex - Creative and Modern One Page WP Theme

Skrollex is a modern WordPress theme with a unique design that’s perfect for any creative agency or studio. The parallax sections draw attention to your services, portfolio, and calls to action while the customization options allow you to turn this theme into a perfectly branded website. You can take advantage of the video support to showcase your portfolio or product in use or to simply greet your customers.

9. Comet - Bold And Responsive One Page WordPress Theme

Consider Comet if you like bold typography and plenty of whitespace to showcase your business. The one page site template uses Visual Composer to create different layouts and you can easily create your own unique layout too. The WordPress theme includes pricing tables as well as progress bars, countdown timers, and even more features to help you stand out.

10. Overlap - High Performance Parallax WordPress Theme

The Overlap theme sets itself apart with its ability to automatically generate page sections and navigation tags for your one page website. Pair that with a stunning design and awesome parallax effects, and you’ve got a great starting point for your one page site. Customize it further with brand colors and fonts, and use the generated sections to provide information about your company, key employers, testimonials, and more.

11. Grand Photography - One Page Parallax WordPress Theme

Another great choice for photographers who want to quickly launch a website to showcase their photos is the Grand Photography WordPress theme. The parallax effect is a great way to tell a story using your photography and guide potential clients to your hire me page or contact page to inquire about a photoshoot. The one page website template includes plenty of customization options as well as a bulk uploader and editor for the uploaded photos and galleries.

12. Dazzle - Sophisticated One Page WordPress Theme Design

The Dazzle theme has a sophisticated design and it allows you to share the idea behind your company along with a mission statement. You can also insert testimonials and share your creative process with potential clients. 

The contact form is accompanied by a Google Map to show your location. Parallax effects can be used for any section of the website and the options panel allows you to customize every aspect of the one page WP theme.

13. Kameleon - Multipurpose WP Theme With Parallax Effect

With a name like that, you know the Kameleon theme can be used for any purpose and by any business industry. Aside from parallax effects, this one page WordPress template also offers several premium plugins such as Visual Composer Builder, Layer Slider, and Contact Form 7 builder so you can quickly adjust the layout of your site, and make it easy for potential clients to get in touch with you.

14. Fildisi - Scrolling One Page WordPress Website Theme

The Fildisi one page site theme has a beautiful scrolling and parallax effect that’s sure to capture the attention of your visitors. What’s more, each section fills the whole screen and allows the visitor to focus on your message. 

This works great for various calls to action and the fact that the template can be entirely customized only makes it easier to market your best product or service. It's also optimized to load fast and comes with detailed video instructions.

15. Dylan - Well Documented Parallax WordPress Theme

If you're looking for a one page WP theme that’s easy to setup and provides plenty of tutorials to get your site up and running, look no further than Dylan. The website template offers several concepts and thanks to the Visual Composer Builder integration, you can create an attractive layout simply by dragging and dropping modules into place.

16. Morello - Professional One Page WordPress Theme

Try out the Morello theme if you want a clean and corporate look for your website. On top of the appealing parallax design, the one page site theme also has various icon sets available to help you add even more visual interest to your page and highlight your services and testimonials. Make this theme truly yours by taking advantage of Visual Composer and various customization options in the admin panel.

5 Things To Keep In Mind When Designing a One Page Parallax Website

The parallax effect is an in demand design trend right now. If you want to make sure you use it the right way, keep the following five things in mind:

1. Parallax Effects Help You Tell an Uninterrupted Story

A Parallax effect is almost always used with the best one page websites. It gives you the perfect opportunity to create a story about your company and your business and share it without any interruptions. Organize your sections in a logical fashion as natural extensions of one another, rather than jumping randomly between them.

2. Use Only High Quality Images

Images are the backbone of a great parallax effect. Rather than settling for the first set of images available, take some time to find high quality photos that don’t cause too much visual distraction. Remember, you’re telling a story so use the images as the backdrop rather than the star of the show. 

3. Less Is More

Keep the copy on your page to a bare minimum and avoid using jargon. This is not the place to use industry-related terms that require an in-depth explanation. Use a theme like Kameleon or Anema to create as many sections as you need to describe your business and your services without cluttering any particular section.

4. Don’t Ignore Your Calls To Action

Calls to action play a large part in one page websites and the parallax effect does a great job of drawing attention to them. However, that doesn’t mean you should rely on parallax and the default styling to encourage visitors to click on your CTA. Opt for a customizable theme that allows you to style your calls to action as well as the rest of your website.

5. Keep Your Heroes in Mind

The real heroes of your site are your products and services. You want your visitors to focus on them so don’t be afraid of adding icons to highlight them or use a subtle animation effect to help them stand out. You can even use videos to showcase features and the benefits of the product.

Get Started With Your One Page Parallax Website

Launching your one page parallax website has never been easier thanks to the huge selection of beautiful WordPress themes. Browse through our top WordPress theme selection to find the perfect one for your site and create a stunning one page site with parallax design.

Learn More About Parallax Scrolling on Tuts+

Read Full Article

Read for later

Articles marked as Favorite are saved for later viewing.
close
  • Show original
  • .
  • Share
  • .
  • Favorite
  • .
  • Email
  • .
  • Add Tags 

Separate tags by commas
To access this feature, please upgrade your account.
Start your free month
Free Preview