Will Your Ads Soon Be Blocked by Google?

Will Your Ads Soon Be Blocked by Google?

Early next year, Google will shake up the online advertising world with the introduction of its newest version of Chrome. The biggest change to Chrome, which is the world’s most popular web browser, is that it will begin blocking ads on websites that are determined by Google to be overly intrusive or annoying to a user’s online experience. Here is what you need to know…

Powered by WPeMatico

How to Create a Person Module with Bio on Click

In this post, we’ll show you how to create a person module with bio on click. As soon as you click on another person module in that same row, the text within the bio will change. At any time, you can close the bio by clicking on the person module again.

You can use this to, for example, show some additional information about your employees on your company’s website. The concept helps you do two things: interact with your visitors and save place on your website. The only time the bio will actually get shown is once a visitor shows interest and decides to click on the elements within the Person Module.

Result Person Module With Bio on Click

Before we dive into the different steps that you’re required to follow to achieve a Person Module with bio on click, let’s take a look at the final result on desktop:

person module with bio

and the end result on mobile and tablet:

person module with bio

With mobile, if one bio gets opened, the other two bios will automatically be closed. You’ll always have just one bio section open, although each bio has its own section.

Person Module With Bio on Click for Desktop

To make everything work smoothly, we’ll need to make two versions: one for desktop and one for tablets and phones. Each one of these versions will need its own jQuery code. We’ll get started with the desktop version and in the next part of the post we’ll show you how to make the version for tablets and phones.

Add The Person Standard Section With a Three-Column Row

The first thing we’ll need to do is add a section that contains the Person Modules.

Open a new page (or the page where you’d like to add the Person Module with bio) and add a new standard section. Within that section, place a row of three columns. Of course, you could use another number of columns as well, but the code that we’ll be using takes 3 Person Modules into account. If you want to create the same thing for other types of rows, you’ll have to make some modifications to the jQuery code that we’ll provide later on this post.

Row Settings

Open the row settings and within the content tab, add ‘#e5e5e5’ as the background color of each column.

person module with bio

Then, move on to the Advanced tab and insert the following box shadow to the Main Element of each one of the three rows:

Add a Person Module

The next thing you’ll need to do is add a Person Module to the first column of the row.

Content Tab

Within the Content tab of that module, type down the info and social media links and upload the image.

Advanced Tab

We’re not going to make any modifications to the Design tab of this module (feel free to make any changes to the appearance afterwards). Instead, we’re going to the Advanced tab right away where we’ll add the same box shadow we added to the row columns, to the member image.

Clone The Person Module

The next thing you’ll need to do is clone the Person Module twice and place it in the two other columns. We’ll need to come back to this section to add the different CSS classes. But before we do that, we’re going to add the bio section first.

Add The Bio Standard Section with a Fullwidth Row

Add another standard section right below the previous section you’ve created. In this section, we’ll need to add the different text modules that are linked to the various Person Modules. Open the settings of the section and use the ‘#a0a0a0’ color as your background color.

Add Two Text Modules

Depending on how many Text Modules you want the bio of the person module to have, you can add Text Modules. In this case, we’ll be adding two Text Modules per Person Module.

First Text Module

Type down some text in the first Text Module and go to the Design tab. Within the Design tab, make the following changes to the Text subcategory:

  • Text Orientation: Center
  • Text Font Size: 31
  • Text Color: #FFFFFF
  • Text Line Height: 1.7em

Second Text Module

Add another Text Module and make the following changes to the Text subcategory of the Design tab:

  • Text Orientation: Center
  • Text Font Size: 16
  • Text Color: #FFFFFF
  • Text Line Height: 1.7em

Clone Each Module Twice

These two Text Modules are going to be the same for each one of the bios. That’s why you should clone each one of the Text Modules twice. This is how the final structure should look like on the back-end of the page:

The Different CSS Classes

Assign CSS Classes to The Person Modules

Go to the Advanced tab of each one of the Person Modules and assign the following CSS classes:

  • First Person Module: person1
  • Second Person Module: person2
  • Third Person Module: person3

Assign CSS Class to The Section

Open the settings of the section where your bios are placed. Go to the Advanced tab and write down “section_1” into the CSS class.

Assign CSS Classes to The Text Modules

Now, add the CSS Classes to Text Modules you’ve created in the following way:

  • Linked to the first Person Module: div_text_1
  • Linked to the second Person Module: div_text_2
  • Linked to the third Person Module: div_text_3

Add Display CSS Code to Section & All The Text Modules

The next step you’ll need to do is go to to the Advanced tab of the section and all the Text Modules. Then, add the following line of CSS code to the Main Element of the section:

display: none;

Disable on Phone & Tablet

Now, disable both sections you’ve created for mobile and tablet.

Person Module With Bio on Click for Tablet & Phone

Now that we’ve shown you how to create the person module with bio on click for desktop, we’ll show you how to make it for tablet and phone as well. We’ve already disabled the previous sections for phone and tablet. This is what the layout of the desktop looks like on the backend:

And this is the structure we need for the tablet & phone version.

Add Six New Sections

So, go ahead and add six new sections to the page. Then, clone the person modules and put each one in a section individually. Make sure you leave a section in between, that’s where the bio will eventually come.

Next, add clone the text modules and place them in the section below each section that contains a Person Module. The bio will, by default, be shown below the Person Module on mobile and tablet.

.

The Different CSS Classes & IDs

Once you’ve put all the sections and modules into place, it’s time to start adding the CSS classes.

Assign CSS Classes to The Person Modules

Start by opening each person module individually and changing the CSS classes in the Advanced tab to:

  • First Person Module: mobile_person1
  • Second Person Module: mobile_person2
  • Third Person Module: mobile_person3

Assign CSS Classes to The Sections

Next, open all the different bio sections and assign the following to each one of them:

  • First Bio Section: section_mobile_1
  • Second Bio Section: secton_mobile_2
  • Third Bio Section: section_mobile_3

Assign CSS Classes to The Text Modules

The last CSS classes you’ll need to give a place are the ones linked to the Text Modules in the different bio sections. According to the bio section, assign the following CSS Classes to the Text Modules within that section:

  • Linked to the first Person Module: div_mobile_text_1
  • Linked to the second Person Module: div_mobile_text_2
  • Linked to the third Person Module: div_mobile_text_3

Add Display CSS Code to Sections

Moving on, you’ll have to make all bio sections invisible. Go to the Advanced tab of each one of the sections and copy and paste the following line of CSS code into the Main Element:

display: none;

Make sure you remove this line of CSS code in the Main Element of each Text Module. In the Desktop version, we needed to make them invisible, but that’s not necessary for mobile and tablet.

Disable on Desktop

Now, after you’ve made all the modifications, there’s one thing left to do before adding the code: disable the three bio sections on desktop. Go ahead and open each one of the sections and go to the Advanced tab. Within the Visibility subcategory of the Advanced tab, disable the sections on desktop.

Add The jQuery Code

Now that we’ve made all the practical changes to the Divi builder, it’s time to move on to the last step; adding the jQuery code.

Add a New Code Module

The easiest way to add the code to your page is through Code Module. You’ll probably use this person module with bio on click on one page only. By using a code module, you’ll make sure the code only gets loaded when someone’s on that page. Copy and paste the two jQuery separate codes into the same code module.

Place the Desktop jQuery Code into Your Code Module

Copy and paste the following lines of CSS code into your Code Module to make the desktop bio on click version work:

Place the Tablet & Phone jQuery Code into Your Code Module

And the following lines of code to make the version for tablet and phone work:

Final Result

Let’s have a last look at the result once you’ve followed all the steps throughout this post. This is how it’ll look like on desktop:

person module with bio

And on mobile and tablet:

person module with bio

Wrapping up

In this post, we’ve shown you how to create a person module with bio that hides and shows on click. By applying this method, you’ll be able to save some place on your website and only show it to your visitors once they’ve shown interest. If you have any questions or suggestions, feel free to leave a comment in the comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

The post How to Create a Person Module with Bio on Click appeared first on Elegant Themes Blog.

Powered by WPeMatico

Git and Github: A Beginner’s Guide for Complete Newbies

Despite what television and movies tell us, life as a software developer does not include sitting in a dark room, our keyboard illuminated only by the glow of the monitor, the thought of interacting with another human being repulsive. No, life as a software developer is social and collaborative–sometimes to the point of frustration. That’s why we have git and Github.

Git is version-control software that makes collaboration with teammates super simple…once you’ve gotten past the initial learning curve. It can be intimidating, but that’s why I’m here!

What is Git?

Well, it’s not just the way we Southerners shoo varmints off our porches, I’ll tell you that.

Like I said above, Git is version-control software. It was created by Linus Torvalds, the guy who invented Linux. You don’t have to be running Linux to use git–you can use it on Windows and Mac, too.

Git lets you easily keep track of every revision you and your team make during the development of your software. You all share one repository of code that is worked on independently and then merged back together. You also do not need to be connected all the time because the project is both saved locally on each machine and remotely (probably at Github).

Git is special (and pretty much mandatory) because you can to revert back to any previous version of your code, branch off and develop a specific feature without affecting anything or anyone else, and maintain safety from data corruption because of its distributed nature.

It also provides easily implemented encryption and cross OS compatibility, as well as asynchronous, non-linear workflows so that no matter where you are, you can work on some aspect of your project.

Basically, if you’re not using git, you’re coding with one hand tied behind your back.

Required Vocabulary

When you’re first starting to use git, it can be intimidating. Commands and concepts may seem totally foreign if you’ve never used any form of version control in the past. You will pick them up super fast, though.

Repository:

Often referred to as a repo. A repository is the collection of files and folders that you’re using git to track. The repository consists of the entire history of your team’s changes to the project. It’s the big ole box you and your team throw your code into.

Github:

The most popular remote storage solution for git repos. It also allows you to set access permissions for projects, track and submit bugs, accept feature requests, subscribe to repository notifications, and utilize a graphic interface, rather than use the command line. Repos default to public, but paid accounts can have private ones.

Commit:

Think of this as saving your work. When you commit to a repository, it’s like you’re gathering up the files as they exist at that moment and putting them in a time capsule. The commit will only exist on your local machine until it is pushed to a remote repository.

Push:

Pushing is the bread to committing’s butter. Committing throws your files into the timecapsule, and pushing is what launches the capsule into space. Pushing is essentially syncing your commits to the cloud (again, probably Github). You can push multiple commits at once, too. You can work offline, commit lots of work, and then push it all up to Github when you’re back in civilization with that sweet, sweet wifi.

Branch:

You can think of your git repo as a tree. The trunk of the tree, the software that goes live, is called the Master Branch. That’s the one that goes live. The branches of that tree are, well, called branches. These are separate instances of the code that offshoots from the main codebase. You might branch off for a single feature or an experimental patch. By branching, you can preserve the integrity of the software and have a way to revert if you do something totally bonkers. It also allows you to work on your task without stumbling into your team’s way (or they into yours).

Merge:

When a branch is polished up, free of bugs (as far as you can tell, at least), and ready to become part of the primary codebase, it will get merged into the master branch. Merging is just what it sounds like: integrating two branches together. Any new or updated code will become an official part of the codebase. Anyone who branches off from the point of merging will have this code in their branch as well.

Clone:

Cloning a repo is pretty much exactly what it sounds like. It takes the entire online repository and makes an exact copy of it on your local machine. You will need to do this for any number of reasons, not the least of which are starting in the middle of a project with a new team, swapping workstations, or starting over from a corrupted repo.

Fork:

Forking is a lot like cloning, only instead of making a duplicate of an existing repo on your local machine, you get an entirely new repo of that code under your own name. This feature is mainly used for taking an existing codebase and going an entirely new direction with it, which happens a lot in open-source software; developers see a base idea that works, but want to go a different way with it. Forking allows that to happen. You can also play in another developer’s repository like it’s your own personal sandbox. And if you do something that you think they may like, you can make a pull request for it to be merged in.

Pull Request:

A pull request is when you submit a request for the changes you have made (either on a branch or a fork) to be pulled (or merged) into the Master Branch of the repository. This is the big time. This is where the magic happens. If the pull request is approved, you will have officially contributed to the software, and Github will forever show exactly what you did. However, if the pull request is denied for any reason, the denier will be able to give feedback on why the request was turned down and what you can do to get it accepted.

Getting Started and Required Commands

That wasn’t too bad, was it?

Right. Now that you’ve got a clear idea of what git is, it’s time to dig in and get your hands dirty.

I should take this opportunity to note, however, that I am going to assume you’re using the command line to interact with git. Sure there are graphical git clients (and Github even allows you to do pretty much everything through it’s web interface), but for the purposes of this post we’re not going to bother with them. You will do a handful of things outside of the terminal, but the command line is going to be your new BFF. So that’s what we’re going with, too.

How to Install Git

Git (probably) didn’t come installed on your computer, so we have to get it there. Luckily, installing git is super easy, whether you’re on Linux, Mac, or Windows.

For Linux, open the terminal and type sudo apt-get install git-all (if you’re in Ubuntu. If not, there is a list of all the Linux package installation commands for whichever other distro you’re on.)

On Windows, it’s just as simple. You download the installer and run it.

On Mac, you just need to open up the terminal and type git. If git is not installed, you will see this:

Once you click Install, you’re good to go.

See? Super easy!

Using Git

Here’s where the fun starts. Now that you have git installed, it’s time to…git-r-done! Hah! But it really is time to dig in and learn to start using this amazing little piece of command line wizardry. And what better place to start than Github?

So head on over and register for your new Github account (or login if you have one already, and I’ll be with you in a second).

Github is free for public repositories, and you can have private ones for a price. (FYI: you can get free private repos at Bitbucket, which is a lesser-known-but-awesome place). For the most part, the free option on Github is fine for most people (and it functions like a living resume, too!), but some clients and employers will require privacy and security, so it’s good to have options.

After that, you’re ready to set up your first repository! After you verify your email and all that fun stuff.

You will want to set up the repository in Github first. You can do it on your computer and then upload it, too, but it is simpler to just do it on the web first.

Notice that I am not worrying about a license or .gitignore in this repo. Because this isn’t a real piece of software, I don’t have to worry about those, but in production cases, .gitignore lets you, obviously, ignore files within your repo’s directory. And you can read up on what license your software needs here.

I am, however, initializing the repo with a README file, which you should use to keep the basic documentation for the project. I tend to use them as a tracker for major changes, to-do lists, and different kinds of notes as I am working. But that’s on personal projects. Different team leaders will have different expectations.

Now that the repo exists at Github, it’s time to get it to your local machine via cloning. To the right of your repo, just above the file list, you will see a green button that says “Clone or Download.” Click it and you will see this:

Since we’re cloning, we can ignore everything except the part about Cloning with HTTPS. You won’t have to configure a thing. You will just need to enter your username and password when you push.

First, though, you need to set up where you want your repo to live on your local machine. Open up your terminal. (Windows users, search for and open up a program called Windows Powershell. I also suggest that you right-click and select “Run as Administrator.”)

The first command you need to learn is ls. This will list everything in the current directory. To keep things simple, let’s just make our dev folder live in the home directory of the computer. You can use mkdir dev to make a directory named dev. Pretty straightforward, right? If you ls again, you will see the new folder listed.

Then you want to move into your new directory by using cd dev, which is the command for change directory. See, the command line isn’t scary at all! If you need to go back to the previous directory, you just use cd ...

Once you’re inside your new dev folder, it’s time to git this party started. Heh heh heh.

Start by copying the URL that comes up after you click the green “Clone or Download” button on Github. It will look something like this: https://github.com/bjk1337/myfirstrepo.git

Commands to Clone a Git Repository from Github

  • git clone https://github.com/bjk1337/myfirstrepo.git
  • ls
  • cd myfirstrepo – or whatever you named your repo
  • ls

After that, your terminal should be something like this, showing your README file that you set up on Github. Congrats! You just used Git for the very first time, and you’re now ready to start developing.

The Nitty Gitty Gritty

Now that you have a repo on your machine, you need to learn to use it. So let’s fast-forward a little bit and say that you’ve been working a while on a cool project and have some files in the directory. It’s time to commit and push them to Github.

Adding and Committing to a Git Repository

  • git status – This command will show you what files have not been added to the list for the next commit. In most terminal apps, the unadded/added files will be red/green, respectively.
  • git add . – by adding a . at the end of the command, you’re telling git to include everything in the directory. If you want to add a single file, just use it’s filename. Such as functions.php.
  • git status – Depending on if you used the . or the filename, whatever you added should be green now.
  • git commit -m “add three empty files” – When you commit these files, you should also leave a quick message to let your teammates (or your future self) know exactly what was in that commit. Standard git conventions say that you should be as concise and specific as possible, and start the message using the present tense of the verb.

Your terminal will have a lot of text in it now, and it should look like this. But now you know what all of it means!

Pushing to a Remote Git Repository like Github

Pushing to a repo is even easier than that.

  • git status – You should always check to see how things look and to make sure you’re on the correct branch.
  • git push
  • Enter your username and password for Github – Be aware, the password field will remain empty, even as you type. It’s okay. Just type it out and hit enter. If you used SSH, you will skip this step.

You can go to your Github account and check the repo, and your files will be there, commit messages and all!

Branching and Merging

The final two commands you’ll need to be familiar with deal with branching and merging. Like I said above, working on a branch keeps the main codebase safe, and once your changes are all dandy, you can merge it all back together.

They can be a little tricky, so it may just take some prodding to get them to play nice.

  • git checkout -b “branch1” – This command will both create a new branch that you title and swap you over to it as your working branch. It combines both the git checkout and git branch commands into one handy-dandy line of code.
  • touch awesome.html – this is just a filler command to create a new html file that I will merge back into the master.
  • And like before, you will git status, git add awesome.html, git commit -m “create awesome.html”
  • git status again will let you see that everything is as it should be.

If you try to push it before you merge, you will get a message that you need to set the repo’s origin. Origin is a strange naming convention for what your computer considers the remote repo. So basically, you’re just telling it that, yes, it’s okay to push this branch to Github like it did the master. Here’s a good thread on git origin from Stack Overflow.

With that out of the way, it will tell you that it went to branch1 –> branch1.

You can switch back to the master branch with git checkout master (there’s no checkout -b this time because you only use that on creation of a new branch, not swapping. I got my commands mixed up in the screenshot below and tried git branch master. It didn’t succeed because master already existed.

  • git status – As always.
  • git merge branch1 – Since everything in that branch is fine, we can go ahead and merge.
  • If we git status again, we will see that we’re ahead of origin/master by 1 commit. That means that we haven’t pushed all the changes we’ve made to Github.
  • git push to sync things up!

Check your Github account–you will see everything you have done is reflected there. You can see the different commit messages, number of branches and commits that we’ve made, as well as any contributors to the repo and what they did, too.

And that’s it! Congratulations! You just rocked your basic git workflow. You can do way, way, way more intricate stuff than this with git, but this is pretty close to what you’ll probably use on a daily basis when you’re just…gitting started.

Oh, One More Thing!

The Github Repo, myfirstrepo, I’ve used for this article is still live. Feel free to check it out, play with it, fork it, clone it, or whatever you think will get you used to using git. Have fun! (And thanks for bearing with me and all my git puns.)

Article thumbnail image by MchlSkhrv / shutterstock.com

The post Git and Github: A Beginner’s Guide for Complete Newbies appeared first on Elegant Themes Blog.

Powered by WPeMatico

15 Best WooCommerce Extensions

WooCommerce comes loaded with functionality, but there are some things it could do a bit better, and that’s where WooCommerce extensions come in. Once you install WooCommerce on your website, you might have some more advanced needs not handled by WooCommerce out-of-the box.

What are WooCommerce Extensions?

WooCommerce extensions are WordPress plugins that add additional features to WooCommerce’s default functionality, extending what’s possible with WooCommerce.

Since WooCommerce now powers over 52% of e-commerce stores, the complex (and sometimes custom) needs of millions of e-commerce sites can be met with WooCommerce extensions.

18 Best WooCommerce Extensions

We’ve compiled this list of the 18 best WooCommerce extensions, curated by iThemes’ own Marcel Schmitz. Marcel is a veteran WordPress developer and has specialized in high-end e-commerce websites built with WooCommerce, so he has experience finding the best WooCommerce extensions. Marcel is also leading up the HelloSales team, a new advanced WooCommerce reporting plugin.

Take a look at each of these WooCommerce extensions to see how you can enhance your own WordPress e-commerce store!

Importing and Exporting

WooCommerce allows you to import products into WooCommerce from a CSV file, but the process leaves some things to be desired.

1. WP All Import

The WP All Import extension makes the WooCommerce importing and exporting process much easier. It allows you to convert currencies, import large files and images, and even includes drag and drop from your XML or CSV file right into your WooCommerce product screen.

WooCommerce Extensions

WooCommerce Bulk Editing

Bulk editing in WooCommerce is limited, so you can add a WooCommerce extension that expands bulk editing capabilities.

2. Advanced Bulk Edit

The WooCommerce Advanced Bulk Edit extension will allow you to filter products, create new categories, replace text, generate sales prices from original, and much, much more.

Advanced Bulk Editing Screenshot

WooCommerce Multi-Currency

You may wish to offer different currencies for your WooCommerce store, but WooCommerce only allows one base currency.

3. WooCommerce Multi Currency Store

The WooCommerce Multi Currency Store extension will fix WooCommerce’s limited base currency issue. You can automatically display pricing in your customer’s local currency, and convert exchange rates on the fly.

WooCommerce Multicurrency Screenshot

 WooCommerce Analytics

If you’ve used WooCommerce at all, you’ve probably already taken a look at the default reporting. If you want even more in-depth insights and data, you’ll need a WooCommerce extension.

4. Google Analytics for WordPress

With the Google Analytics for WordPress extension, you can get more in-depth reporting, including real-time data, page-level analytics, referral tracking, and lots more.

monster insights screenshot

WooCommerce Booking System

Some WooCommerce shops require booking functionality, something WooCommerce by default can’t handle.

5. Pinpoint Booking System WordPress Plugin

If you want to use WooCommerce to handle rentals or appointment bookings, you’ll want the Pinpoint Booking System WordPress Plugin extension. With both free and Pro versions available, your customers will be able to “Book anything, anytime, anywhere.”

pinpoint booking screenshot

WooCommerce Dynamic Pricing

Dynamic pricing is another highly-requested need of some WooCommerce websites. Out-of-the-box, WooCommerce can’t handle complex pricing (such as conditional cart discounts, customer loyalty discounts, BOGO promotions, etc.)

6. WooCommerce Dynamic Pricing and Discounts

With the WooCommerce Dynamic Pricing & Discounts extension, you can offer wholesale and retail pricing, bundle products into buy-one-get-one deals, offer flash sales, create reward programs … just about any way you’d like to create a promotion, deal, or bundle is available within this extension. Take your e-commerce site from a shop to a full-fledged store, and encourage customer loyalty, all at the same time!

Dynamic Pricing Extension

WooCommerce Shipping

If you’re looking to extend the built-in WooCommerce shipping options, there are two great WooCommerce extensions to choose from.

7. Table Rate Shipping

Built by the WooCommerce team, the Table-Rate Shipping extension offers flexibility in defining shipping zones, setting shipping rates based on weight, class, quantity, and much, much more.

table rate shipping woocommerce

8. WooCommerce Advanced Fees

If you’d like access to the powerful WooCommerce Fees API, you’ll want the WooCommerce Advanced Fees extension. With it, you can manage complex fee rules assisted by WooCommerce Advanced Fees, rather than hiring a developer.

woocommerce advanced fees

WooCommerce Payment Gateway Extensions

While WooCommerce includes support for PayPal and Stripe for free, there are many other payment gateway extensions available; over a hundred, in fact.

9. Payment Gateway Extensions for WooCommerce

Looking for a country-specific gateway? Need to integrate with a brick and mortar POS system? Check out the WooCommerce payment gateway extensions available from WooCommerce. You can use these to integrate the payment gateway of your choice with your e-commerce store, and get selling.

woocommerce payment gateways

WooCommerce VAT

10. WooCommerce EU VAT Assistant

Oh, taxes … unless you’re an accountant, it can be hard to keep up with the differing tax rates and regulations for selling to or from the EU.

The WooCommerce EU VAT Assistant extension makes that process easier, giving you the information you need to file the proper VAT/MOSS reports and stay compliant.

woocommerce VAT

Multiple Warehouses for WooCommerce

Do you have stock or inventory in various locations? Do you drop-ship from different warehouses? If so, you’ll need a WooCommerce warehouse extension.

11. WooCommerce Warehouses

The WooCommerce Warehouses extension will help manage your inventory levels, so you’ll have an accurate accounting of stock on hand in various warehouses. You can even set up warehouses as delivery points for in-warehouse pickup!

woocommerce warehouses

WooCommerce Membership Extensions

Membership websites have increased in popularity because you can provide a unique experience for your customers in the way they access products or content. With a WooCommerce membership extension, you can add WooCommerce membership functionality to your WordPress site.

12. WooCommerce Membership

The WooCommerce Memberships extension allows you to turn your WooCommerce website into a membership site, along with a variety of other options.

woocommerce memberships

13. Restrict Content Pro

If you need to restrict who can view and purchase certain products, then Restrict Content Pro is another great option. With it, you can easily integrate content protection into your WooCommerce store.

restrict content pro

Store Credit

If you need to offer “store credit” functionality for your customers, you’ll need a WooCommerce extension.

14. WooCommerce Store Credit

From the ninjas at WooCommerce themselves comes the WooCommerce Store Credit extension to offer store credit, allowing your customers to use credit vouchers for multiple purchases, or to apply them toward a single purchase.

woocommerce store credit

Location-Based Pricing

While WooCommerce has some fantastic geolocation built in, it’s harder to serve a different price based on that to your customers.

15. WooCommerce PBC

The WooCommerce PBC extension makes location-based pricing a breeze, allowing you to have an international store, and display a different price based on the user’s detected country.

woocommerce location-based pricing

Bonus: WooCommerce Marketing Automation & Email Marketing Integration

Marketing automation and list integration are crucial parts of any e-commerce store. Here are three different WooCommerce extensions that offer integration options for your WooCommerce store.

16. MailChimp

The MailChimp integration extension allows you to integrate your WooCommerce shop with your MailChimp account.

woocommerce mailchimp

17. Campaign Monitor

If you’re a Campign Monitor user, you can integrate your WooCommerce shop with the Campaign Monitor WooCommerce extension.

woocommerce campaign monitor

18. ActiveCampaign

Integrate WooCommerce with ActiveCampaign with the WooCommerce ActiveCampaign extension.

woocommerce activecampaign

Happy Selling with WooCommere Extensions

Hopefully, you’ll find one or more of these WooCommerce extensions and plugins useful in your e-commerce store. Happy Selling!

5 Ways to Make More Money with WooCommerce

Get WooCommerce Tips
+ 5 Easy Ways to Make Your WooCommerce Store Successful

Just getting started with WooCommerce? In this ebook, we cover 5 ways to make more money with WooCommerce.

Download the Free Ebook

The post 15 Best WooCommerce Extensions appeared first on iThemes.

Powered by WPeMatico

The Ultimate Guide to the Divi Theme Customizer

The Divi Theme Customizer is a powerful and convenient tool for making customizations to the Divi Theme. Like the Visual Builder, the Divi Theme Customizer allows visual front-end customizations and design changes that take the guessing game out of the customization process. If used effeciently, this tool can be a great time saver and jumpstarter for future projects.

Todays post is meant to help you better understand how the Theme Customizer works so that you can use it to increase productivity for future projects. I cover almost all of the options available in the Theme Customizer with an emphasis on those options that are specific to Divi. In a way, this post serves as a documentation piece that offers some in-depth explanations and design tips along the way. I will also show you how to export the Customizer settings to use on your next project.

We have a lot to cover, so let’s start at the beginning.

Built with WordPress in Mind

The theme Customizer was introduced in WordPress 3.4. This convenient feature allows WordPress users to preview changes they make to their themes in real time and then save those changes in one click. What used to take multiple windows and countless refreshes, now can be done quickly in one browser window.

Here is an example of the Theme Customizer options on the theme TwentySeventeen:

Divi Theme Customizer

As you can see, many of the features of WordPress that used to reside in different pages in the backend of WordPress (Site Identity, Menus, Widgets, etc…) can now be accessed in this front-end customizer all in one place.

On the other hand, the Divi Theme Customizer was built as an enhanced version of this Theme Customizer with all kinds of Divi specific options. For users, this makes the process of customizing Divi a lot easier. And the fact that you can actually see the customizations while editing (simultaneously) makes this a convenient design tool.

The Divi Theme Customizer still has many of the standard WordPress Customizer options, but it also has a lot more.

Divi Theme Customizer

As you can see there are a lot more settings that have been added to the Divi Theme Customizer.  Now let’s start exploring these in more depth.

General Settings

Divi Theme Customizer

When you start customizing your theme, I think it is best to start at the top with General Settings and work your way down.

Site Identity

Divi Theme Customizer

This is section is not unique to Divi. This is a convenient place to change the site title and tagline for your site. You can also enter a site icon which is used for browsers and apps, different from the favicon icon you can add in Divi Theme Options.

Layout Settings

Divi Theme Customizer

The layout settings allow you to adjust the framework of your theme by determining how much space is between sections and rows and what the max width of your main content section is going to be.

ENABLE BOXED LAYOUT

Here you can change your site into a box layout which frames the content of your site and exposes a background that can be customized.

WEBSITE CONTENT WIDTH

This is where you can set the max width of your content section. Since your content is on a responsive layout, it will adjust to smaller sizes but will not expand any wider than the max width set here.

The default is set to 1080px. This is a good width for most standard laptops and desktops.

WEBSITE GUTTER WIDTH

Gutter width corresponds to the amount of horizontal space (margin) between the columns in each row.

Optional values for gutter width range from 1 to 4.

1 represents zero margin between columns.
2 represents a 3% right margin between columns.
3 represents a 5.5% right margin between columns.
4 represents a 8% right margin between columns.

USE CUSTOM SIDEBAR WIDTH

This sets the default sidebar width for your theme. This applies to all pages on your theme that have a sidebar and are not built using the Divi Builder.

SECTION AND ROW HEIGHT

These options adjust the amount of vertical spacing (top and bottom padding) for each section and row.

By default, the section padding is 50px on the top and bottom. For the Row, the default padding is 30px on the top and bottom. However, by changing the section or row padding using the Customizer, the padding value turns into a percentage that corresponds to the number on the option dial on the theme customizer.

For example, “0” represents 0% of top and bottom padding, “1” represents 1% of top and bottom padding, “2” represents 2%, and so on. The percentage of padding is based on the width of the container (the section or row). So if the actual width of the section is 1080px and you have set the section height to 1, this means that you will have…

1080px x 0.01 = 10.8px

… 10.8px of padding on the top and bottom.

The options range from 0 to 10 so you can have as much as 10% of padding.

Divi Theme Customizer

THEME ACCENT COLOR

Before you start changing the colors for your other elements, you should change this first. Once you change it, save & publish your settings and refresh your page. Now the updated Theme Accent Color should have populated other elements automatically.

Updating the Theme Accent Color will also update the following:

  • Body Link Color
  • Widget Header Color
  • Widget Bullet Color
  • Footer Social Icons Hover color
  • Default color for icons
  • Footer Menu Active Link Color
  • Secondary menu background color
  • Slide In and Fullscreen Header Style background color
  • Hamburger Menu Icon for mobile menu color
  • Primary Menu Active Link Color
  • Dropdown Menu Line Color
  • Secondary Menu Background Color
  • Secondary Dropdown Menu Background Color
  • Secondary Menu Background Color
  • Active Primary Menu Link Color
  • Footer Menu Active Link Color

Typography

Divi Theme Customizer

This is one of the most important aspects of your website that tends to be neglected by users and developers. Don’t make the mistake of overlooking these options. Getting these details right can make a big difference. Taking the time to set your default typography for your theme can also save you time in the long run because you won’t have to do customizations at the module level.

BODY TEXT SIZE

This changes the default body text for your theme. The default size is 14px.

Design Tip: It seems that 14px is a little too small for a standard body text size. You really shouldn’t go less than 16px for your base level body font size. Those of us close to 40 years of age and older will thank you. Even most browsers use 16px as their standard base level font size.

BODY LINE HEIGHT

The line height of each individual line of text.

Design Tip: Line-height is measured in the length value “em”. Divi’s default is 1.7em for body text. This em value is better than a pixel (px) value because it is based on the current font-size of the element and so it scales with the parent inline value (or in our case, the current font size). The value “1.7em” basically represents 1.7 times the current font size. So if your current font size is 16px, the line height will be 27.2px. This give you 5.6 pixels of extra space on the top and 5.6 pixels on the bottom. This seems to be a good leading (space between lines of copy) for readability.

HEADER TEXT SIZE

Divi allows you to set your default h1 Header text size here. This effects elements of Divi like the Fullwidth Header Module titles. If you want to adjust the size of the other header levels (h2, h3, etc…), then I suggest adding those in Additional CSS (this is covered later in the post).

Design Tip: In most cases, you will have only one header per page, so make it count. Think of it as the title on the cover of a book. It is the first thing a person notices. And, contrary to the popular slogan, people still do judge books by their covers, especially in this case.

The default value for Header text size is 30px. This is a good safe size to start with. Especially since some headlines will require longer copy. However, I tend to gravitate to a larger header size to accommodate the growing size of monitor displays. Plus, most clients need websites with simple and short headlines like “About us” and “Contact Us” which looks better with larger font sizes. I like to set my h1 headers to at least 48px.

HEADER LETTER SPACING

Letter spacing adjusts the horizontal space between letters. The Header Letter Spacing value affects all of the header levels (h1, h2, h3, h4, h5, h6), blockquotes, and slide titles.

Design Tip: It is a good design technique to decrease letter spacing for larger text and increase letter spacing for smaller text. When it comes to headers, the larger text with a greater font-weight (bold) can look better with a decreased letter spacing of -1px.

Divi Theme Customizer

However, if you put that same header in uppercase, you may find that increasing the letter spacing to 1-2px will look better.

Divi Theme Customizer

HEADER LINE HEIGHT

Just like for the letter spacing value, the header line height value affects all of the header levels (h1, h2, h3, h4, h5, h6), blockquotes, and slide titles. Because of the larger font size, 1em is the default settings. I think a line height somewhere between 1em and 1.3em looks good, especially when the header goes to two lines or more.

Divi Theme Customizer

HEADER FONT STYLE

Use these options to change the font style of your headers.

HEADER AND BODY FONT

The default font in Divi is Open Sans , but the Divi Theme Customizer has almost a hundred fonts to choose from! Take advantage of these built-in fonts and test which ones work best for your theme.

Design Tip: For inspiration for font pairings, you can check out fontpair.co which helps to pair Google Fonts together. Divi won’t support all of these fonts out of the box, but you could do a search for the ones Divi does support to see pairings that work well together.

Divi Theme Customizer

BODY LINK COLOR

The body link color is inherited by your theme accent color. But you can always change it here.

Design Tip: If you want, you can add an underline attribute for all your body links using Additional CSS (see end of post).

BODY TEXT COLOR

Here you can change the color of your body text. Popular Blogs like the New York Times and Smashing Magazine use #333333 for their body text color. This tends to read better on a white background in my opinion.

HEADER TEXT COLOR

Here you can change the color of your headers. If you are sticking with a shade of black, I would go a tad darker than the body text to make it stand out a bit. Something like #121212 would work.

Background

Divi Theme Customizer
This option sets the background for your theme. For the Divi Theme, this option really only applies to the box layout. The default background color is white (#ffffff) unless you change it here. You can also add a background image if you like.

Divi Theme Customizer

That’s it for the Layout Settings.  After you have the layout in place, you can start looking at more specific elements.

Header & Navigation

Divi Theme Customizer

The header and navigation menu is probably the most important element on your theme.  This section has a lot of options to create almost any kind of header you want.

Header Format

Divi Theme Customizer

Header Style

The four header styles can give your website a brand new look with only one click. These styles include Centered, Centered In-line Logo, Slide-in, and Fullscreen.

You can also add vertical navigation to your site which can be a unique feature. And, you could choose to hide the navigation until you scroll. This would be useful for a single page site that wants to highlight more content above the fold without the distraction of the navigation bar.

Primary Menu Bar

Divi Theme Customizer

Your Primary menu bar is the main menu inside the header of your website. You can completely customize the way your primary menu looks.

Design Tip: You really need to know what your menu links are going to be before you start perfecting the menu with the Divi Theme Customizer. Don’t forget you are going to be styling a responsive menu so take the time to make sure the menu looks great on all screen sizes. You can do this by clicking on the device icons at the bottom of the customizer or by simply adjusting the size of your browser. If you are interested, you can find out how to fix your responsive navigation here. ***enter link***

Make Full Width

This extends the menu the full width of the browser window.

Hide Logo Image

If you want, here you can completely hide the logo image from your menu.

Menu Height

Here you can change the menu height to whatever you want.  Although, be careful not to make your menu height too large since you could be wasting valuable real estate on a menu instead of your homepage content.

Logo Max Height

Here you can increase or decrease the max width percentage of your logo to make it bigger or smaller.

Text Size, Letter Spacing, Font, Font Style, Text Color, Active Link Color

These options allow you to customize the menu links any way you want.

Background Color

This allows you to change the background color of your primary menu.

Design Tip: If you use the semi transparent (or completely transparent) colors for your header, Divi will automatically overlap the header over the section underneath seemlessly. This creates a pretty cool effect. For example, this is a centered header style with a transparent background and a fullwidth header directly under it. Notice how Divi automatically adjust the background image to fit nicely behind the header:

Divi Theme Customizer

Dropdown Menu Settings

Your dropdown menu doesn’t have to inherit the style of the main menu. Here you can create a unique design for your dropdown menu. You can even add custom animation when displaying the dropdown menu.

Secondary Menu Bar

Divi Theme Customizer

Here you can customize your secondary menu bar using the options provided.

When enabled, the secondary menu bar sits above the primary menu bar at the very top of your browser. It can hold additional elements including an email address, social media links, and a secondary menu.

By default, the secondary menu will remain hidden unless you enter a secondary menu or add elements under the Header Elements section. You may need to save and refresh the theme customizer to see the menu.

Fixed Navigation Settings

Divi Theme Customizer

Fixed Navigation refers to the state of the menu being “fixed” or stuck to the top of the browser window when the user scrolls down the page. By default the fixed navigation shrinks in height to provide a larger viewport for displaying the site’s content.

Design Tip: You can also set your Fixed Primary Menu Background Color to a semi transparent color to reveal some of the content behind it.  This make it even less intrusive but still accessible.

Divi Theme Customizer

Header Elements

Divi Theme Customizer

Header elements are additional elements that you can add to your header.  These elements include social icons, a search icon, a phone number, and an email. Aside from the search icon, all of these elements will be displayed in the secondary menu.

Divi Theme Customizer

Social Icons

By default Divi displays icons for Facebook, Twitter, Google+, and RSS. You can edit these profiles in Divi’s Theme Options.

Divi Theme Customizer

Footer

By default, the footer section is hidden unless populated by content. Also, the footer should not be confused with the Bottom Bar which is displayed at the very bottom of the site by default and includes the footer credits and social icons.

Divi Theme Customizer

Layout

Here you can choose between 5 layouts for your footer section.

Divi Theme Customizer

You can also set a footer background color which is set to #222222 by default.

Design Tip: This section will be displayed on all pages of your site (unless you choose a blank page template).  Therefore, it makes sense to make the color more neutral so that it matches all the pages of your site.

Widgets

Divi Theme Customizer

If you added widgets to your Footer Sections, you can style what those widgets look like here.

Widgets are not unique to Divi. These are built in to wordpress and can be found in the wordpress dashboard under Appearance > Widgets. There you can see four Footer Areas where you can add widgets. Any widgets you add to these sections will show in your footer area.

However, you can also access the widget areas without ever having to leave the theme customizer (one of my favorite things about it).

Footer Elements

Divi Theme Customizer

Here you can choose to show your social icons on your bottom bar just like in the secondary menu.

Footer Menu

Divi Theme Customizer

If you have a footer menu, you can style it here.

Bottom Bar

The bottom bar sits at the very bottom of your website and it displays your footer credits and social icons by default. Here you can customize the style of these elements including changing the social icon font size and color.

Edit Footer Credits

You can also replace the default footer credits with whatever html you want inside this box.

Divi Theme Customizer

Buttons

Divi Theme Customizer

This section controls what you want the default button styles to be.

Buttons Style

Divi Theme Customizer

Here you can customize the style of your buttons for your theme. I’m not going to go into great detail on each option here. You can go to our documentation on the button module for more info on how to style buttons.

Text Color

If you notice, by default, the button color is inherited by the Theme Accent Color set in General Settings. This is only for modules that have their text set to “dark”. And the buttons are white when module text is set to “light”. But, as soon as you set a custom text color for you buttons, this color is set for both dark and light text versions within a certain module.

Design Tip: Let your Theme Accent Color set the text color of your buttons so that you can keep the keep the ability to add dark and light versions of your button in your Modules.

Buttons Hover Style

Divi Theme Customizer

This is where you can customize the style of the hover state of your buttons.

It is important for users to understand that what they are about to click is actually a button. Adding a hover effect solidifies this in there minds and encourages them to interact. Be default Divi adds a light background and animates an arrow icon to the right. But, you can change it to whatever you want.

Design Tip: Whether you change the background to a darker or lighter color isn’t as important as just making sure that the button change in some way. You could also increase the letter spacing or adjust the border radius to give your button a unique effect on hover.

Blog

Post

Divi Theme Customizer

This section changes the style of the post header content within a single post. This doesn’t change the look of your blog excerpts on your blog page or blog module. At times your blog post headers will need to look different from the headers on the rest of your site. This is where you would make those adjustments.

If you choose to use the Post Header Module, these options would not be effective.

Mobile Styles

I love this section. Here you can adjust how your site looks on mobile devices and see the results in real time.

Tablet and Phone Styles

Divi Theme CustomizerDivi Theme Customizer

You can select Tablet or Phone and the window on the right of the Customizer will adjust automatically to show you how the page looks on the device. Then much like we did in General Settings under Layout, you can adjust the Section Height, Row Height, Body Text Size, and Header Text Size.

Design Tip #1: One customization I like to make for phone layouts is to set the Row Height to “0”. This creates a better flow of content when scrolling on a phone since it takes out that spacing between rows.

Design Tip #2: Find a font scale that works for your site. Here is a good one I like to follow for my headers:

Desktop: 48px

Tablet: 40px

Phone: 32px

Mobile Menu

Divi Theme Customizer

Don’t overlook this or you may miss out creating a completely unique header for your mobile menu. You can Hide the logo just on mobile devices and change the background and text colors.

Color Schemes

Divi Theme Customizer

These can be convenient for a quick solution. But I wouldn’t advise using the color schemes if you plan on changing some of these colors later on in the theme customizer. Once set, these colors cannot be overridden in the Customizer because the CSS generated contains the !important rule.

Divi Theme Customizer

In my opinion, it is best to leave this set to default.

Menus and Widgets

No longer to you have to blindly edit your menus or widgets in the wordpress dashboard. Now you can add and customize these items and see them come to life on your page in real time. I love the convenience!

Static Front Page

By default, WordPress displays your latest post on your front page (homepage). You can change this to be any static page you want in this section. And you can also designate your Posts Page (or blog page).

I didn’t know this until writing this post, but you can actually deploy a new page from within the Theme Customizer to serve as your Front Page or Blog Page without ever having to leave the customizer.

Divi Theme Customizer

Additional CSS

Divi Theme Customizer

The Additional CSS section offers a great opportunity to put the final touches on your theme setup. Whatever style changes that the Divi Theme Customizer can’t control, you can do here with some custom CSS. Because the Customizer allows you to see the CSS changes in real time, you can make those necessary adjustments to your theme much easier than going back and forth on an external stylesheet.

Additional CSS Examples

Example #1: Adjust the Size of All Headers

One good example of additional CSS would be styling for your remaining header tags. Divi allows you to customize the setting for your heading font, but that is just for your h1 headers. You can use the Additional CSS box to enter the rest of the header tags (h2, h3, h4, etc…) customizations. I like to use the following scale: 16, 18, 21, 24, 36, 48.

h2 {
	font-size: 36px;
}

h3 {
	font-size: 24px;
}

h4 {
	font-size: 21px;
}

h5 {
	font-size: 18px;
}

h6 {
	font-size: 16px;
}

Example #2: Match Bottom Paragraph Padding with Body Line Height

If you set the body text line-height to 1.7em you may also want to set the same value to your bottom padding between paragraphs in order to keep a consistent baseline grid and vertical rhythm. In other words, the distance between paragraphs is equal to the line-height. To do this you would simply add the following:

p { padding-bottom: 1.7em}

Because the length value em is based on the parent font-size, if you changed the base font size to something else in the theme customizer, the 1.7em value will adjust accordingly.

Example #3: Add Underline Attribute to Your Links

Add underline attribute to body links.

a {
    text-decoration: underline;
}

Exporting and Importing Divi Customizer Settings for Your Next Project

The Divi Theme Customizers has a portability option that allows users to export or import Customizer Settings. This presents a great opportunity for developers to make a sort of customizer setting template to use on their future projects.

First, I suggest taking the time to figure out what customizations you tend to make when building a website. Once you identify those settings, you can enter those customizations into the Divi Theme Customizer and then export those settings so that you have headstart on your next projects. Why keep doing the same things over and over when you can already have it done? Plus, this will help make sure you don’t skip any important customizations.

To export your settings, click the portability icon at the top the Divi Theme Customizer.

Divi Theme Customizer

Give you export file a name and click the button “Export Divi Customizer Settings”

Divi Theme Customizer

Now you can use this .json file in the future by clicking the same portability icon in the Divi Theme Customizer and selecting Import instead of export. Then all you need to do is upload the .json file and click “Import Divi Customizer Settings”.

Divi Theme Customizer

And that’s it.

What Does the Divi Customizer Settings Include?

The customizer settings include basically everything in the first 7 sections.

  1. General Settings
  2. Header & Navigation
  3. Footer
  4. Buttons
  5. Blog
  6. Mobile Styles
  7. Color Schemes

The last 4 sections are WordPress specific and will not carry over to other Divi Installs. These sections include:

  1. Menus
  2. Widgets
  3. Static Front Page
  4. Additional CSS

It’s important to note that the Additional CSS does not carry over. You may be relying on those settings to give you a time saving boost on your next build.  If this is the case, I suggest creating a child theme with that CSS so that you can add it with your Customizer Settings on your next project.

How the Divi Customizer Styles Are Stored

For the Divi Customizer (along with Divi Options and the Divi Builder), Divi serves static CSS resources that can be cached by the browsers to decrease page load time.  This means the styles are not printed on the page but stored in a separate static CSS file.  Everytime you save your Customizer Settings, the static CSS file is updated.  This includes any Additional CSS you have added as well.

Divi Theme Customizer

Closing Thoughts

The Divi Theme Customizer comes with some pretty powerful options and the customization process is both conventient and enjoyable to work with.  And gaining a deeper understanding of what these options can do will definitely improve how you build websites with Divi.   If you haven’t already, take some time to explore what your optimal baseline settings would be for a project, plug those into the Customizer, and create an export file.  You will be surprised at the boost (and confidence) this will give you when starting a new project.

I look forward to hearing from you in the comments.

Cheers!

The post The Ultimate Guide to the Divi Theme Customizer appeared first on Elegant Themes Blog.

Powered by WPeMatico

The State of SEO in 2017 #semrushchat

The State of SEO in 2017 #semrushchat

To help you learn about some of the most interesting trends and novelties in the world of SEO, we invited Kevin Indig, SEO ninja at Atlassian, growth hacker, and startup mentor, to our weekly SEMrush Chat to discuss some of the newest Google SERP changes, updates, and much more:

Powered by WPeMatico

Canadian Web Hosting [Ad]