$99 Websites + Website Design: January 2020

Friday, January 31, 2020

Signs It's Time to Move on to New Adventures

Don't overstay your welcome, or go down with a sinking ship. Here's how to know it's time to go.

This Accomplished Executive and Investor Shares How to Guide a Business Out of Stagnation

This business expert believes there are always opportunities for growth. But you need the discipline to identify them, and the stamina and courage to execute.

One Anonymous App Is An Unmatched Force For Positivity

While the issue of bullying has been around for as long as anyone can remember, it has taken a new and more sinister form in apps. Technology makes certain tasks or parts of our lives faster, more efficient, and easier. Unfortunately, that doesn’t exclude negative communication, specifically bullying. Though social tools [...]

How to Prepare for the Coronavirus (Tips From a MERS Outbreak Survivor)

This CEO contracted MERS (Middle East Respiratory Syndrome) early in the outbreak and survived. Here are her tips for preventing and surviving the Wuhan Coronavirus.

3 Top Fan Video Templates for After Effects to Celebrate the Super Bowl

The big game is nearly upon us! With nearly 100 million viewers last year, it's safe to say that plenty will be tuned in to the main event on Sunday.

Whether you're watching to see your favorite team or to tune into the commercials, why not make a promo video of your own? With the help of a template, you can put together something quickly.

In this article, you'll see three top templates from Envato Elements that help you create a promo for the Super Bowl! They're all available as part of Elements' library.

3 Top Fan Video Templates for the Super Bowl

1. Football Night V.2

Promoting your party for the big game? This template might be a perfect choice. Even better, if your team didn't make the cut, you can use your logo to help you imagine the matchup.

2. Sport - American Football

This football-themed video is downright epic. It's intense and sets the stage for a clash of titans on the field. No matter what two teams you want to include, it's easy to update with your favorite squad.

3. Sports Fan

How about a video that focuses on fans? Its viewers that drive the success of their favorite leagues and this template puts the fan front and center. It's the perfect way to feature the most passionate of your team's followers.

CSS Animations and Effects on CodeCanyon

If you head over to the CSS Animations and Effects section on CodeCanyon, you will see that there are currently over 140 different libraries related to CSS animations.

New libraries are added periodically to the collection and you can select one from the best sellers or apply your own filters to fine tune the results.

There are libraries to animate all kinds of elements or apply different kinds of effects to elements like buttons.

12 Best CSS Animations Libraries (on CodeCanyon for 2020)

CSS3 Image Hover Effects

The first one on our list is CSS3 Image Hover Effects. You can use it to add around 17 different kinds of image hover animations.

This includes basic effects like fading and sliding overlays as well as more advanced animations like splitting overlays and joining overlays. Other interesting effects include image levitation on their shadow as well as image stacks.

Visit the description page to know more about the library. The included video on the description page shows all the animations in action.

SolidEffects—CSS3 Image Hover Effects

The SolidEffects CSS3 animation library is perfect for people who want to add truly unique image hover animations to their websites.

There are over 150 pure CSS based animation effects that look fantastic. They will definitely help you grab the attention of your visitors.

The image hover effects generally fall under following categories:

image integration effects (horizontal and vertical)
image dispersion effects
venetian blinds effects
slide and sweep effects
fold effects
zoom effects
blur, saturate and mosaic effects

Each of these animation categories include multiple animation effects that animate the overlay with different speeds in directions.

The customization is really easy because the downloaded product include LESS files to quickly change different aspects of the animation like the overlay color.

CSS3 Image—Text Hover Effects

The CSS3 Image—Text Hover Effects library is ideal for people who want to use a combination of image hover effects with some text effects.

There are 8 standard background animations that you can use with 14 different text effects. You can also combine multiple animation effects to show them on a single hover.

There is an option to choose between light and dark overlays for images to blend with your website theme.

Images can be displayed in 8 different types of boxes. This includes full-width images as well as image thumbnails.

Make sure you check out the live preview on the description page to see all the nice animations in action.

CSS3 Mega Tooltip Animation Pack

This CSS3 Mega Tooltip Animation Pack offers a great solution for people who want to integrate nice animations with different tooltips on their website.

The animation pack comes with 10 different tooltip animations. There are 8 different predefined color options. However, you can change the CSS files to add your own unique colors.

There is support for all major browsers. You can even support browsers as old as IE8 with a fix included in the download files after purchase.

The download files also contain detailed documentation and HTML samples that illustrate how to use the animation pack effectively.

tFigure—Image Captions

The tFigure—Image Captions library offers five different hover animations to display image captions.

You can use them to show nicely animated captions for different images. The overlays for each animation are available in four different colors.

The animations themselves are pretty simple. However, the way in which the captions are laid out on the overlays makes them very attractive.

These animations are framework independent so you can install them on any website you want. They are also easily customizable so you can make sure that the color scheme of the overlay matches the theme of your website.

Check out the animation's live preview page to see the awesome image caption animation in action.

Animated Loaders Kit

There are a lot of times where users might have to wait a while for a process to complete. This might be a very large image that has to load or some other computation process that needs to complete.

If the process takes a couple of seconds, it is a good practice to let users know that you are working on it. A good way to do that is with simple animated loaders.

The Animated Loaders Kit is perfect for this situation. It comes with 10 CSS-only animated loaders.

There are many advantages of using these pure CSS based animated loaders. They are easy to customize. It will change only a couple of minutes to change the color, font and size of the loaders. You can also change the animation speed. They have a very small file size compared to using GIF files.

The best way to appreciate how nice they are is to see the live preview on from the description page.

Image Hover Effects Collection

This Image Hover Effects Collection kit was added fairly recently to CodeCanyon and comes with 20 different animation styles.

They follow a responsive design philosophy and support all major browsers. So you can be rest assured that any effects you use on your website will look good on all devices and all screen sizes.

The animations are also fully customizable and you can easily change the overlay and text colors for all animations to better align them with the overall theme of your own website.

The code is well documented so it would be easier to make changes whenever necessary. You should definitely check out the live preview to see how good these hover animations are.

Dex Preloader Kit

This Dex Preloader Kit also contains over 30 different preloaders that you can easily integrate in your projects.

They are completely different in style from the Animated Loaders kit we covered above. For instance, these ones are created using a single background color. You can easily change this preloader color to the dominant color on your website.

The animations are also different and the preloaders use a variety of shapes like circles, squares and lines to create the animation.

You can also add a little bit of text under each preloader to let users know what is going on in the background.

This kit was also added fairly recently to CodeCanyon and has a lot of offer for a very low price.

Free CSS Animation Libraries for 2020

Generally, you can expect these paid CSS animation libraries to have a lot of variety in the animations compared to free alternatives. They also come with free support for six months and lifetime updates.

Many times, these premium libraries also support old browsers. However, this might not be the case with free animation libraries.

It might be easier for anyone who is just starting out to simply use these paid libraries. However, if you don't have the budget to purchase these paid plugins, we have also listed some free alternatives below.

Here are four free CSS animation libraries that you can use in your projects:

image hover.css

This library gives you the option to add simple image hover animations from different directions. It comes with 40 different hover animations.

SlipHover

This is also a free image hover animation library. However, it only comes with basic sliding animations.

The unique features of this library is that the hover animations are aware of the cursor direction. So, the overlay will appear to move in from the left side if the user hovers over the image from the left side.

animate.css

This animation library is not aimed at a specific use case like image hover animations or tooltips.

It is simply a general purpose library that you can use to animate different elements on a webpage. There are a bunch of classes that you can add to different elements to control the speed and delay of the animation.

loaders.css

This library consists of pure CSS based loading animations. You can use them in your project if you are looking for some nice preloader animations.

Additional Resources

It can be hard to figure out where to start for an absolute beginner. We are listing some tutorials here which will make it easier for you to understand how CSS animations work and how you can start using them in your own projects.

You should start by reading this tutorial that provides a beginner level introduction to CSS animation. After that, you should consider learning how to use CSS variables for animation.

Using different pre-built CSS animation libraries is not hard at all. However, having a basic understanding of the concepts will go a long way when it comes to making changes to these animations on trying to create something of your own in future.

You should also consider reading these two tutorials that teach you how to create your own CSS based animations for scratch. The first tutorial is for basic hover effects while the second one is a quick tip for page loading animations.

A Beginner’s Introduction to CSS Animation

In this tutorial I am going to introduce you to CSS animations; a highly performant way of animating on the web which is becoming more and more popular as...

Catalin Miron
03 Jun 2014

CSS Animation
How to Use CSS Variables for Animation

Not only are CSS variables a real and tangible option for developers, they can also be used in animation scenarios. Still skeptical? Follow along to find out...

Dennis Gaebel
22 May 2017

Animation
How to Create 7 Different CSS Hover Effects From Scratch

In today’s tutorial, we’re going to create 7 different CSS hover effects. We’ll learn loads along the way, including how to animate font icons, borders, and...

George Martsoukos
14 Nov 2019

CSS
Enhance the Way a Web Page Loads With CSS Animations

In a previous tutorial we created a full-screen responsive page with flexbox. Today, we’ll make this page more attractive by adding a few CSS animations to it.

George Martsoukos
11 Dec 2018

CSS Animation

Final Thoughts

Using a bit of animation for different elements on your website can make the content more interesting and engaging.

Coming up with our own unique animations from scratch can take some time. So, we listed some of the best free and premium CSS based animation libraries that will help you get started in no time.

New animations and effects are added all the time to CodeCanyon—you can choose from from one of the best sellers or try something fresh and new.

What is a WordPress Plugin?

If you’ve been using WordPress for any time at all, you’ll probably have realized that you can get a lot more from it if you install plugins on your site.

Plugins are extra bits of code that will add additional functionality to your WordPress site: in other words, they let it do more things.

In this article, I’ll explain exactly what a plugin is, when you might want to use one, and how it works. I’ll also share some tips to help you identify which plugins you should be adding to your WordPress site.

Plugins vs Themes: What’s the Difference?

The first question to clear up is the difference between a theme and a plugin.

Your theme is the code that makes your website look the way it does. It includes styling for all of your content, images, layouts and more. It contains the code that fetches your posts and pages and displays them on the page, and it’s essential for your site to work.

Every WordPress site needs a theme. Without one, you won’t be able to display any content on the page. In fact, if you don’t install a theme of your own choosing, WordPress will install and activate the default theme for you. At time of writing, that theme is Twenty Twenty.

2020 theme

A plugin is different. Instead of dictating the way your site looks and the way it outputs content, it will add extra functionality to your site.

In theory, you could run a WordPress site with no plugins installed. WordPress would still work just fine; it would display your blog posts and your static pages. It would provide you with some widgets that you can add to your sidebar or footer.

But in reality, if you want to get the most from your WordPress site, you’ll probably need to install some plugins.

How Does a Plugin Work?

A plugin works by adding extra code to your site. The plugin will consist of functions or classes that make stuff happen. In turn, these will be hooked to action hooks or filter hooks. These action or filter hooks are snippets of code in WordPress itself (or sometimes in your theme) that are designed to make WordPress extensible. That means that WordPress is designed to be extended by plugins.

I’m not going to go into detail about how plugins are coded here, but if you do want to code your own plugin, or at least understand how the plugins you install work, then check out our complete course on writing your first plugin.

What Kind of Plugins are Available?

There is a vast range of plugins to help you add extra functionality to your WordPress site. These include the free plugins on the WordPress plugin directory and premium plugins from providers such as Envato.

Plugin types include:

Plugins that add small snippets of code to your site such as Hello Dolly, which just adds a song lyric to your admin screens.
Plugins that add eCommerce functionality to your site, including WooCommerce, the world’s most popular free eCommerce solution.
Plugins to help you keep your site secure and backed up, such as the free UpdraftPlus.
Page builder plugins to help you build content with a WYSIWYG interface, like WPBakery.
Plugins to help your site run faster, such as W3 Total Cache.
Plugins to add visual effects to your site, like the Slider Revolution plugin.
Plugins to give you extra widgets you can add to your widget areas, such as the Instagram Widget plugin
Plugins to help you enhance your search engine optimization (SEO), such as Yoast SEO.

This is just the tip of the iceberg—there are thousands of plugins available. Which ones you need will depend on the specifics of your site.

How Do I Install Plugins?

You can install free plugins from your WordPress admin screens, without having to upload or download any files. For premium plugins, you’ll need to upload a file, but you can do this from your admin screens.

Start by going to Plugins > Add New.

add new plugin screen

Then use the search box to find the plugin you’re looking for. You can either type in the name of a plugin if you know which one you want, or type in a description of what you need and then pick from a list of suggestions.

Find the plugin you want to install, and click the Install Now button. Once it’s installed, that button will change to an Activate button. Click it to activate the plugin (the plugin won’t work unless you activate it).

If you’re installing a plugin you bought from a third party instead of from the plugin directory, then you’ll need to upload the file. When you buy the plugin, you’ll be emailed a zip file (or you’ll be able to download it). Follow these steps to install the plugin from this file.

Go to Plugins > Add New. Click the Upload Plugin button at the top of the screen. This will take you to the plugin upload screen.

Upload the zip file from your computer and click the Install Now button. You’ll then be given the option to activate it. Once you’ve done that, it will work in the same way as if you’d installed it from the WordPress plugin directory.

Once you’ve installed some plugins, you’ll be able to see them in the Plugins page in your admin. From here, you can activate and deactivate plugins, see more information about them, and in some cases access settings screens.

Some plugins will also add extra menu items to the WordPress admin menu on the left hand side. For example, if I activate the Yoast SEO plugin, it adds a menu item of its own. Some plugins won’t add a top level menu item, but they will add an item under an existing menu item, such as the Tools or Settings menu.

What are the Pre-installed Plugins?

If you install WordPress using the manual ‘famous five-minute install’, then you’ll find that it comes with two plugins pre-installed:

Hello Dolly, which adds some text to your admin screens and to be honest isn’t very useful.
Akismet, which is useful and prevents spammers from attacking your site through the comments.

If you install WordPress using an auto-installer from your hosting company, or your hosting company installs WordPress for you, you might find you have different plugins installed. These will either be plugins developed by your hosting provider to help you site run on their servers, or other plugins to make your site more efficient or secure.

It’s up to you whether you keep these plugins activated or installed—it’s your site, after all. Sometimes, plugins added by hosting providers will add code to your site that you don’t want, so you might choose to delete them and replace them with your own preferred plugins.

Where Can I Get WordPress Plugins?

You can get WordPress plugins in a verity of places, both free and paid-for.

Where Can I Get Free Plugins?

The best place to get free WordPress plugins is the official WordPress plugin directory. You access this via your plugins screen, as described above.

Unless you really know what you’re doing, I would avoid downloading free plugins from anywhere other than the plugin directory. This is because it’s much harder to know if the code can be trusted. Developers who want to distribute plugins fro free know that by submitting their plugin to the directory, their code will be checked to ensure that it’s secure and reliable. If you get a free plugin elsewhere, the developer could have an ulterior motive for distributing it.

You might wonder why anyone would want to make a plugin available for free: after all, it costs time and sometimes money to develop and maintain a plugin. There are four main reasons for plugin developers giving their code way for free:

The plugin is a free version of a premium plugin that has more features. The developer hopes that you’ll try out the free version and decide you need the extra features in the premium version.
The developer sells add-ons to the plugin that you have to pay for. These are separate plugins that will add extra functionality. WooCommerce is a good example of this.
The plugin links to s service that you have to pay to use. So the plugin itself is free, but to get the most of it you might have to pay a subscription.
The developer wants to contribute to the community. WordPress is an open source project which is free for everyone to use. Lots of developers like to give something back in the form of plugin development.

If a plugin as available for free outside the plugin directory, you can add another potential motive for distributing the code for free: malicious or at least spammy code. This is particularly likely to be the case if a site is allowing you to download a plugin fro free that you’d have to pay for elsewhere. This is pirating. You have been warned!

Where Can I Get Premium Plugins?

There are plenty of premium plugin providers out there, including providers who specialize in just one plugin and those who offer a range of plugins, such as CodeCanyon.

If you buy plugins, do your research. Look at the reviews for the plugin. Ask other WordPress users. Find independent reviews, and look at roundups of the best premium plugins.

Check that there isn’t a free plugin that meets your needs first. Sometimes there will be something in the plugin directory that does what you need, but on some occasions you’ll need a premium plugin for the extra functionally.

A good plugin provider like CodeCanyon will offer support, will keep their plugins updated, and will offer a money back guarantee our a trial period.

Which Plugins Should I Install on My Site?

Exactly which plugins you install will be up to you and will depend on the needs of your site. But there are key plugins that I would recommend every site owner include on their site. This is because these plugins will make your site faster, more reliable and secure, and will help you get more visitors.

A Backup Plugin

The very first plugin you install should be a backup plugin. This is because anything you do on your site, you will want to keep backed up.

When looking for a backup plugin, try to find one that makes the process of restoring your site from a backup as easy as possible, This is because while backing up is easy, restoring is less so. Chances are when you have to restore your site, you’ll be panicking because it’s just developed a fault or has been hacked, and you won’t be able to follow a complicated process.

Your backup plugin should also include the ability to schedule regular automatic backups, and to store these on remote servers or services such as dropbox or Google Drive. This is because is your server experiences problems, you don’t want your backups to be stuck on it.

A Security Plugin

Once you know your site is going to be backed up regularly, the next step is to install a security plugin.

This will make it much less likely that you’ll have to use that backup plugin to restore your site, because it will protect you from hacks and other security problems.

A good security plugin will alert you by email if there is a problem, and let you scan your site to identify any vulnerabilities.

A Performance Plugin

A performance plugin will make your site run faster. It will do things like caching pages, minifying files, and compressing images. It will scan your site and identify anything that might be slowing things down, and tell you how to fix it.

Sometimes the plugin won’t be able to make those fixes for you (e.g. if your hosting is too slow or you’ve got an inefficient plugin installed), but sometimes it will include the option to fix the problem and speed up your site right from within the plugin screens.

A SEO Plugin

Using a performance plugin to make your site run faster will help with your SEO, as search engines like sites that load quickly (and so do users).

But it won’t make as big a difference as installing a SEO plugin.

A SEO plugin will help you optimize your metadata and descriptions to improve your search engine rankings. It will analyze your content to identify ways you would make it more search engine-friendly. And it will create an XML sitemap and a robots.txt file to give search engines the information they need to crawl your site.

Plugins Can Take Your Website to the Next Level

Plugins are what make WordPress more than just a simple blogging platform. You can use them to turn your WordPress site from a simple website to a full-featured online store, a media hub, a sales platform and more.

By installing plugins you will make your site more robust and effective. You’ll also give it a whole lot of extra functionality. Try installing some plugins today and seeing how they can enhance your site.

The Best WordPress Plugins on CodeCanyon

Explore thousands of the best WordPress plugins ever created on CodeCanyon. With a low-cost one time payment, you can purchase these high-quality WordPress plugins and improve your website experience for you and your visitors.

Here are a few of the best-selling and hot new WordPress plugins available on CodeCanyon for 2020.