How to Create Stunning Grid Layouts with Divi’s Video Module (Part 4)

Welcome to post 4 of 5 in our miniseries How to Create Stunning Grid Layouts with Divi’s Video Module. In this series we are going to walk you through how to create amazing grid layouts from scratch using the Divi Visual Builder. And if you are worried about this being too complicated, think again! All of these layouts can be created and styled using the Visual Builder without additional code.

I hope you are enjoying the grid layouts so far. Today’s layout is number 4 in the series, and it is one of my favorites (and fastest to implement). Not only is it easy (and fun) to build using Divi, but it is also customizable to fit the color scheme of your site. The background gradient options are the main feature of this design which have been used to create the two tone colors separated by a diagonal line. The spacing is also purposeful to make the videos readily perceived. Arguably, this design may fall outside the scope of what we would normally call a “grid”, but I think you will see the potential.

So here we go. I’m going to show you how easy it is to build this grid design using the video module and a few custom background elements.

Here is what the Final Result will Look Like

video grid

The Concept & Inspiration

I was looking for a nice and clean layout that organized small batches of videos to be used for things like tutorials or courses. This combined with my impulsive eagerness to play around with background gradients, I came out with this. I hope you like it.

Let’s get started.

Implementing The Design With Divi

First, add a regular section with a fullwidth (1-column) structure.

video grid

Next add a Text Module to the column. This will serve as a title or headline for the section of the page.

Update the Text Settings as follows:

Content Options
Content: [enter text for title]

video grid

Design Options

Text Color: Light
Text Font: Arimo
Text Font Size: 56px
Text Letter Spacing: 1px
Text Line Height: 1em

video grid

Save Settings

You won’t be able to see anything yet because you have white text on a white background but that’s okay. Let’s go ahead and add our section background gradient. Go to the Section Settings and, under the Content Section, update the following options:

Background Gradient Colors: #121212, #ffffff
Gradient Type: Linear
Gradient Direction: 198deg
Start Position: 45%
End Position: 45%

video grid

Next, update the Row Settings for the row you just added as follows:

Design Options

Make This Row Fullwidth: YES
Use Custom Gutter Width: YES
Gutter Width: 4
Equalize Column Heights: YES
Custom Padding: 1% Top, 5% Right, 5% Bottom, 5% Left

video grid

Save Settings

Now add another row with a ⅔ ⅓ (2 column) structure directly under the row you just created.

video grid

Next, add a Video Module to the left column.

video grid

Update the Video Settings as follows:

Content Options

Video MP4/URL: [enter URL of your video]
Image Overlay URL: [enter overlay image URL]

video grid

Save settings

Next, duplicate (or copy) the video module you just created twice and drag (or paste) the two duplicate videos so that they stack on the right column.

video grid

Update the content of the videos to include the correct URL’s and cover images.

Go ahead and add a Blurb Module under the two video modules in the right column. This can serve as a description of the videos within this grid.

video grid

Update the Blurb Settings as follows:

Content Options

Title: [enter title]
Content: [enter content or description]

video grid

Design Options

Text Color: Light

video grid

Save Settings

Now edit the Row Settings for the row holding the videos you just created as follows:

Content Options

Background Gradient Colors: #4999c1, #121212
Gradient Type: Linear
Gradient Direction: 198deg
Start Position: 45%
End Position: 45%

video grid

Design Options

Make This Row Fullwidth: YES
Use Custom Gutter Width: YES
Gutter Width: 4
Equalize Column Heights: YES
Custom Padding: 5% Top, 5% Right, 5% Bottom, 5% Left

video grid

Great! You finished the first section. We are almost done. Check out the progress so far.

video grid

To create the next section, duplicate the entire section you just built by clicking the duplicate section button..

video grid

Update the new section settings as follows:

Content Options

Background Gradient Colors: #ffffff, #121212 (these colors are in the opposite order of the first section)

video grid

Next update the Text Module Settings in the duplicated section with the following:

Design Options

Text Text Color: #333333

video grid

Save settings

To complete this section, update the Row Settings that contain your videos with the following:

Content Options

Background Gradient Colors: #121212, #4999c1 (basically you are switch the order of colors so they are in the opposite order of the first section)

video grid
Save settings

Now let’s check out the result after adding the second section…

video grid

If you haven’t already noticed, you can continue adding more sections easily since we already have these two sections created. Let’s create one more section just for good measure. Since our section background color is black at the bottom, we want to start the next section with a black background color at the top. That means we need to duplicate the first section at the top and drag it to the bottom of the page under the second section. This keeps the continuity of the design throughout the page.

Here is what it looks like after the third section is added:

video grid

That’s it! All finished.


This layout actually looks even better on mobile without any modifications. Check it out!

Further Customization

After building this grid layout with multiple sections, you can probably already notice how easy it would be to change the colors to match the theme of your next project. All it takes is changing the background gradient colors for the sections and rows.

If you would like to tweak the design further, I suggest adding semi-transparency to the gradient colors to expose the background behind them. Or try getting rid of one of the gradient colors altogether and see what it looks like. Here are a couple of examples of what changing just one gradient color can do…

video grid

You could also add a Video Slider Module to the grid on the left column.

video grid

Coming Up…

Coming up next is our last video grid layout in the series. This one gives you the option of keeping things nice and clean with subtle framing elements or using colors in a unique way to make each video standout.

Until then, I look forward to hearing from you in the comments.


The post How to Create Stunning Grid Layouts with Divi’s Video Module (Part 4) appeared first on Elegant Themes Blog.

Powered by WPeMatico

Canadian Web Hosting [Ad]

8 Best Countdown Timer Plugins for WordPress

Want to add a countdown timer to your WordPress site? Countdown timers are a great way to keep visitors informed and, depending on the use, add some urgency to an offer or promotion that you’re running.

But unless you’re already using the Divi Builder, you’ll need a third-party plugin if you want to easily add a countdown timer to WordPress. That’s what I’m here to help with – a list of the best countdown timer plugins for WordPress.

Normal Countdown Timers vs. Evergreen Timers

Before I get to the list of countdown timer plugins, I want to lead with some quick definitions for terms I’ll use in the list. See, there are actually two different types of countdown timers you can use on your site.

First up, there’s what I’ll call “normal” countdown timers. These are timers that count down to a specific date or time. That is, no matter who visits your site, the countdown timer is the same.

Then, you have a slightly more complicated technique called evergreen countdown timers. These are a marketing tactic designed to create an artificial sense of urgency by giving each visitor to your site their own unique countdown timer.

Most of the countdown timer plugins exclusively offer “normal” countdowns. But I will include one freemium option that lets you create marketing-focused evergreen countdown timers.

Best Countdown Timer Plugins for WordPress in 2017

Below, you’ll find some of the best countdown timer plugins for your WordPress site. As usual, though, I didn’t just throw up the first 8 plugins that showed up in my search. Instead, I looked for specific criteria like:

    • What is the plugin’s rating? and Code Canyon make user ratings easily accessible. I looked for 4.5-stars or above if possible. The minimum I would accept is 4-stars.
    • How popular is the plugin? Popular plugins are more likely to be high quality and receive continued support.
  • Has the plugin been recently updated? While a plugin that hasn’t been updated recently isn’t always bad, I tried to find plugins that at least receive semi-regular maintenance.
  • What’s the technology used? Flash is outdated – so I made sure to pick countdown timers that use modern methods (usually jQuery).

Let’s dig into the list, starting with…

1. T(-) Countdown


T(-) Countdown is a popular free option that gives you both a shortcode and widget to generate a countdown timer. You can specify an exact date and time to count down to, and it also lets you include custom HTML to display once the countdown reaches zero.

The only downside is that the base styles are…a little bit ugly. That is, you may need to add some custom CSS to make them work for your design. But in terms of functionality, this is one of the best free options you’ll find.

Key Features:

  • Countdown timer is powered by jQuery and CSS, not Flash
  • Can count down to a specific date, hour, minute, and second
  • Option to include custom HTML that’s displayed in place of the timer once it reaches zero
  • Premium extensions to add recurring countdown timers and events

Price: Free with premium add-ons | More Information

2. jCountdown Mega Package


jCountdown Mega Package is a premium, but quite affordable, countdown timer that adds a better selection of included styles. It’s the most popular countdown timer at Code Canyon and has maintained a stellar 4.71-star rating on over 3,900 sales.

Like T(-) Countdown Timer, it’s based on jQuery and lets you execute custom HTML when the countdown timer finishes. Basically, you’re paying $7 for better pre-made styles.

Key Features:

  • Based on jQuery
  • 8 modern styles
  • Can execute custom HTML when the timer reaches zero

Price: $7 | More Information

3. Evergreen Countdown Timer


Evergreen Countdown Timer is the first plugin on this list to offer both normal and evergreen countdown timers. For evergreen timers, you can opt to track visitors by cookie or IP address (or both for maximum accuracy).

It’s overkill for basic normal countdown timers, but if you want evergreen timers, it’s a good option with a Pro version that adds even more functionality.

Key Features:

  • Can create both normal and evergreen countdown timers
  • Unlimited timers + colors
  • Can automatically reset timers on certain days (Pro)
  • Track visitors by IP address, cookie, or both
  • Count down available seats/tickets (Pro)

Price: Free. Pro starts at $37 | More Information

4. Countdown by POWr

countdown by powr

Countdown by POWr is a cloud-based countdown timer plugin. By that, I mean you need to register an account at POWr to use the plugin…which I’m not a huge fan of. But it does include one really nifty feature, which is why I still included it in the list:

You can count events over time (e.g. a baby is born every 4.3 seconds).

Beyond that, you can also create regular timers that count down or up. That’s all for free – but if you want to remove POWr’s branding, you’ll need to upgrade to Premium.

Key Features:

  • Create timers that count up or down
  • Add timers that track events over time (unique)
  • Requires a free POWr account to use

Price: Free. Premium version starts at $3.99 per month for all POWr products | More Information

5. Waiting: One-click countdowns


Waiting: One-click countdowns is a free plugin that offers up some stylish designs in a neat package. Beyond good looks, it also lets you count down to the second and also choose from a few different scenarios for what to do when the countdown timer reaches zero.

Key Features:

  • Stylish, modern design
  • Visual builder with live preview to generate shortcodes
  • When the timer reaches zero, can choose between doing nothing, hiding the countdown, redirecting visitors, or triggering DOM events.

Price: Free | More Information

6. WordPress Countdown Widget

WordPress Countdown Widget

WordPress Countdown Widget is another free plugin that adds basic, but functional, jQuery countdown or countup timers to your WordPress site. You can either use the included widget or shortcodes to add your timer.

There’s a good chance you’ll need custom CSS to make it work for your site – but the actual functionality is solid.

Key Features:

  • Can create timers that count down or up
  • Basic styling options in the widget
  • Timer is accurate to the second

Price: Free | More Information

7. Coming Soon by Supsystic

Coming Soon

As the name suggests, Coming Soon by Supsystic helps you add countdown timers specifically for “coming soon” pages. To that end, it gives you full coming soon templates to go along with your countdown timer.

If you’re looking to add a countdown timer because your site is still under construction, this is a good option. But it’s not really built for more general usage.

Key Features:

  • Includes complete “coming soon” page templates that work with any theme
  • Lets you filter who sees the “coming soon” page by user role
  • Includes options to help you build your email list and social following

Price: Free | More Information

8. WooCommerce Sales Countdown

WooCommerce Sales Countdown

Let’s round things out with a WooCommerce-specific countdown timer. WooCommerce Sales Countdown adds a countdown timer to products that are on sale to give buyers a sense of urgency.

You can add it to your sidebar, your category pages, or individual product pages.

Key Features:

  • Built specifically for WooCommerce
  • Works in sidebars, product category pages, and individual product pages

Price: $20 | More Information

For Elegant Themes Members

Guess what – if you’re an Elegant Themes subscriber, you already have access to a flexible countdown timer in the form of the Divi Builder’s Countdown Timer Module.

It’s easy to use – all you need to do is insert the Countdown Timer module like you would any other. Then, give it a title (optional) and choose the day, hour, and minute you’d like your timer to count down to:

Divi Countdown Timer module

Below that, you can choose the text color, background color (or disable background color), and responsive settings:

Divi timer module settings

And, like any other module, you can also play around with more design options in the Design tab, as well as add custom CSS in the CSS tab.

If you want some help with advanced styling, Tim Strifler wrote a whole series of posts on styling the Divi Builder Countdown Timer Module:

Wrapping Things Up

And that wraps up all your best options for adding countdown timers to WordPress! If you’re an Elegant Themes member, the Divi Countdown Timer Module is a great option for creating normal countdown timers.

If you need evergreen countdown timers, the Evergreen Countdown Timer can help you out.

And if your site doesn’t have access to the Divi Builder, any of the jQuery plugins are a good option for adding countdown timers. Just pick the one with the styling that you like best.

Now over to you: what role do countdown timers play on your site? Do you use them to boost urgency or just keep visitors informed?

Article thumbnail image by Chareez /

The post 8 Best Countdown Timer Plugins for WordPress appeared first on Elegant Themes Blog.

Powered by WPeMatico

WordPress Plugin Roundup – June 2017

In this post, we round up 10 cool and useful (oh, and free!) WordPress plugins available on the WordPress Plugin Directory. This month’s WordPress Plugin Roundup includes everything from a way to add a reading progress bar to a page to tools for customizing the WordPress admin dashboard.

1. When Last Login

when last login plugin

The When Last Login plugin is a lightweight plugin that allows you to see active users according to their last login time. No need to configure, simply activate When Last and you’re ready to go! Adds a custom column to your Users list of “Last Login” and a timestamp linked to that user. When Last also integrates with other plugins.

Nathan’s Notes:

    • Excellent little plugin for sites supporting many users.
    • Last login timestamp in the users list is sortable.
    • Has helpful dashboard widget for admins showing top users and their activity
    • A couple of nice free add-ons:
      • Export User Records – exports all user login records to CSV or JSON
      • Welcome Email – send your users a welcome email when they log in for the first time
    • A couple of nice paid add-ons:
      • Slack Notifications – records logins by users of a certain role in a Slack channel ($9.95)
      • User Statistics – generates detailed reports that can be viewed as PDF and automatically emailed at set intervals ($39.95)
    • The iThemes Security plugin provides similar functionality with the WordPress user security check.

2. Worth the Read

worth the read plugin

The Worth the Read plugin adds a light-weight reading progress bar indicator showing the user how far scrolled through the current post or page they are. There is also a reading time commitment feature that you can separately enable.

Nathan’s Notes:

  • Originally featured in September 2016 Plugin Roundup, now with a nice update
  • Nice touch for content-heavy sites
  • Reading bar is highly customizable without much fiddling
  • Reading time uses the standard 200wpm measure for average time

3. Salt Shaker

salt shaker

The Salt Shaker plugin changes your WordPress security keys and salts automatically.

Nathan’s Notes:

  • Simple plugin that could enhance your website’s security, especially if you have multiple users logging in.
  • One button click to change WordPress Salts and Keys
  • Schedule salts and keys to be changed automatically daily, weekly and monthly.
  • WordPress salts & keys can also be changed with the iThemes Security plugin.

4. WP-Notification

wp notification plugin

The WP-Notification plugin shows custom notifications in the WordPress dashboard.

Nathan’s Notes:

  • Provides visual editor for adding notifications for back-end users
  • Notifications can be styled by type and can be set to be dismissible.
  • Notifications can be set per role or even per user and can be shown only on specific pages or throughout the dashboard.
  • Hides its interface under the “Appearance” menu

5. Extra Featured Image

The Extra Featured Image plugin is a tool if you need an extra featured image for posts, pages and/or custom post types.

Nathan’s Notes:

  • Provides a second featured image box on all post types.
  • Use shortcode [my5tech_extra_image] to display the extra featured image in content.
  • Could be very useful for post types where a second image is needed
  • Unfortunately, no settings page to control which post types can have the extra featured image, so this could be confusing to some users.
  • You could use a plugin like Advanced Access Manager to hide the Extra Featured Image metabox on post types to which it does not apply.

6. Admin Menu

admin menu plugin

The Admin Menu plugin allows you to show/hide specific WordPress menu items, change title, reorder the menus for users. You can have a clean and mistake-free menu for your clients, to other WordPress users and even entire roles.

Nathan’s Notes:

  • Really nice drag and drop interface allows you to reorder, and even drag the top level menu item some plugins create into a submenu.
  • Create your own menu items and link to defined pages.
  • Customize menus for user roles and even capabilities
  • Also allows you to change the admin color scheme, nice for corporate branding
  • Similar functionality can be found in iThemes Sync’s Client Dashboard

7. WP Custom Admin Interface

wp custom admin interface

With the WP Custom Admin Interface plugin, you can easily customize the WordPress admin menu and customize the admin and login interfaces. You can also create a coming soon/maintenance page and create a custom dashboard widget.

Nathan’s Notes:

  • This plugin offers just most of the customizations you’d likely want to make to the WordPress admin area in a totally free plugin with no pro version.
  • This is one of the most full-featured free plugins I’ve ever seen! Kudos to the dev!.

8. WP Link Preview

The WP Link Preview plugin adds a button to your post/page editor which can be used to generate a link preview for the given URL. The link preview consists of a title, description and image which will result in a similar look as sharing a link on Facebook.

Nathan’s Notes:

  • Adds new icon on the visual editor toolbar to insert a link.
  • Uses OpenGraph info from the site that is linked and pulls in a nice link box into the content.
  • Link box is wrapped with sufficient CSS classes to style the box just about however you’d want it to look.

9. World Domination This Month’s “Pat Matt on the Back Plugin”

world domination plugin

The World Domination plugin adds a summary of the current WordPress market coverage to your dashboard.

Nathan’s Notes:

  • Appends the percentage of the Internet using WordPress to the bottom of the “At a Glance” dashboard widget.

10. Rock & Metal Lyrics This Month’s “Bang Your Head” Plugin

rock and metal lyrics plugin

The Rock & Metal Lyrics plugin is all you need to rock your account even more! Displays Metal & Rock lyrics in your WordPress Dashboard. This is a very simple plugin, just install, activate and it will do all the magic by itself.

Nathan’s Notes:

  • A more hardcore version of the famous “Hello Dolly”
  • Hello Ozzy …
This post is based on the June 2017 Plugin Roundup webinar by Nathan Ingram. In this webinar, Nathan demonstrates how to use each of these plugins so you can get a better idea of how they work. Check out the entire series of monthly WordPress Plugin Roundup posts here.

The post WordPress Plugin Roundup – June 2017 appeared first on iThemes.

Powered by WPeMatico

Relationships Matter for Rookie Freelancer Adam Soucie

We often interview veteran freelancers who have the wisdom that comes with experience. But there’s a different perspective to be had from rookie freelancers—they’re still learning, but they’ve got that hungry spirit. There’s a fire and energy that can be inspiring for even the most jaded veteran.

adam soucieToday we talk with Adam Soucie. He’s a WordPress developer who founded the digital creative agency, Impossibly Creative, in 2015. He also volunteers with WordCamp Orlando and the WordPress Accessibility Team.

“I’ll always choose long-term relationships over short-term gains.” -Adam Soucie

We talked about the power of networking and the importance of building relationships.

How did you get started in freelancing?

Toward the end of my second year working for an agency, I was contacted by a smaller agency that needed some help. The potential billings fell below the threshold where it made sense to make it agency business, so I decided to take on the work at home in my free time. That helped me quickly develop a working relationship.

After doing the math, I realized I’d be able to make as much if not far more on my own. That combined with needing a more flexible schedule due to a family situation at the time, it was the perfect opportunity to branch out on my own and become my own boss.

What’s been the most important contributor to your early success?

I’ve survived because of the networking contacts I made early on. As I shifted into looking for more recurring revenue to offset the feast/famine cycle of project work, my contacts became the basis for that side of my business. Now my monthly maintenance contracts pay the bills and keep a roof over my head. I don’t have to worry about a dry spell in new projects as much anymore.

Where do you think you need to improve as a new freelancer?

Most freelancers I’ve met are terrible sales people. I am too. Like a lot of devs, we’re natural introverts. The idea of talking to people on the phone or in person is legitimately terrifying. I’m actually working with a therapist now to help me overcome those fears so that my business can grow.

Another way to help with those fears is an exclusive networking group in the model of BNI. It puts you in a situation where the other members of the group become an extension of you, become your sales team, while you foster and grow relationships. Those relationships are your biggest asset as a freelancer.

What advice do you have for veteran freelancers? What are veterans overlooking or missing that you notice as a relative newcomer?

I’m constantly told by veteran freelancers that if I want to grow, I need to raise my rates. That kind of advice makes sense in a vacuum, but not in practice. You have to look at your local market conditions because at the end of the day you can only charge what your market can afford.

Building up those recurring revenue streams will allow you to be pickier with your clients, but don’t be afraid to take on a client with smaller billings.

Consider the relationship you can have with those cheaper clients and what outside, long-term benefits they can provide. In the short term, one client that nets you $10,000 for a project is great. But three clients that net you $2,500 each initially, but also become recurring revenue clients and end up referring you to five other clients each is the long-term win. Both are extreme examples, but I’ll always choose long-term relationships over short-term gains.

Check out more from our WordPress Freelancer series.

The post Relationships Matter for Rookie Freelancer Adam Soucie appeared first on iThemes.

Powered by WPeMatico

5 Ways to Freshen Up Your WordPress Blog

If you’ve been blogging for a while, there’s a chance your blog could start to feel outdated. You might think you need a new theme to change the look of your website, but there are other ways to freshen up your WordPress blog without embarking on a total redesign.

freshen blog

Before You Start a Redesign or Install a New Theme

There are thousands of themes out there and countless new design trends for websites and blogs. The truth is: it’s easy to get focused on design rather than content. If you aren’t blogging regularly, a new design can be a distraction from actually writing and producing content for your blog.
Sometimes it’s best to work with the website you have now. Make some changes and get creative. Because, at the end of the day, your goal as a blog owner is to focus on producing new high-quality content.

Focus on Reframing & Displaying Content Instead

The whole point of your blog is to share new content and keep writing. The most successful blogs produce consistent content, and updating your blog on a regular basis is the best way to build a following.

One more time, for emphasis:

Focus on content.
Focus on content.
Focus on content.

Powered by WPeMatico

Canadian Web Hosting [Ad]