What Makes a Good Divi Layout Pack?

Our weekly FREE layout packs have been a big part of our Divi Design Initiative and so far they have been a huge success. The Divi layout packs are becoming an extremely valuable asset to our Divi community which is awesome! Our ultimate goal for this initiative is to make you (the Divi Nation) the most empowered community on the web.

In addition to providing you with free layout packs from our design team, we want to help you understand what makes a good Divi layout pack and further empower you with the know-how to create amazing layouts for our community as well. It is also helpful to know the inner workings of a good layout pack as a consumer so that you know what to look for and how to get the most out of the layout pack.

In this post I hope to shed some light on what makes a good Divi layout pack by offering some best practice guidelines for creating layout packs and also a few tips to help take your layout packs to another level.

So, what makes a good Divi layout pack?

We will start with the most obvious need that these layouts fulfill – design.

It Solves Real Design Problems for Specific Niches

Great design is extremely difficult to do and it can take a lot of time. So if you are a business owner without a design background, you are looking for a layout that does most (if not all) of the design for you. More specifically, they are looking for a design that works for their users. Whether it is a photo gallery for an artist, a landing page for a dentist, or a blog for an affiliate site, the layout pack should be designed for a specific consumer. The biggest problem that a person without a website has is not that they don’t have a website (anyone can throw a few pages on the web) but that they don’t have an effective website. A layout pack designed for a specific niche solves that problem.

Also, make sure the overall design of layouts are outstanding. Colors should work great together. Images should be meaningful and beautiful. Spacing should be consistent throughout. Font choice is huge as well. I can go on but I will digress because, in my opinion, it is always best to leave design to the professionals. But, if you are dedicated and on a tight budget, consider these recent articles from our blog to point you in the right direction.

3 Important Areas of Design to Focus on for Every Website Build

3 Effective Web Design Principles for the Non-Designer

3 Ways to Learn How to Have a Better Eye for Design

Now that we have established that great design is perhaps the most important aspect of layout packs, lets talk about what should be included in a good layout pack.

It Includes General Pages Every Website Needs

general pages

When we say layout “pack”, we mean more than one page layout is included. Ideally, this would include every page that a website would need to get up and running right away. The following page layouts should be included in all layout packs:

  • Home
  • About
  • Contact
  • Blog
  • Landing

I think it is safe to say that those 5 pages are included with most websites. But we would be foolish to assume that these are the only pages all websites need.

It Adds Specific Pages According to Layout Niches

specific pages

Depending on the kind of site you are targeting with your layout pack, you may need to add a page or two that is necessary to that specific site niche.

Here are a few examples:

  • A Product Page for an E-Commerce Layout
  • A Gallery Page for an Artist Layout
  • A Menu Page for a Restaurant Layout

Consider asking the following questions when deciding on whether or not the layout needs any niche specific pages:

1. Can the page be easily created using the 5 standard page layouts? If so, you may want to go ahead and leave it up to the user to build. You don’t have to include every possible page in a layout pack. If designed well, a good layout pack will easily inspire users to mix and match pieces of the existing layouts to create any additional pages they may need easily.

2. Is the page obviously necessary? Use good common sense and a little research on what a company needs to get a working sit up and running. If a page stands out as an obvious need for most websites in the area then go ahead and add it to the layout pack.

A Good Layout Pack is Divi Friendly

no theme customizer

Have your layout work with Divi, not against it. Divi is a powerful tool for building all kinds of websites so your layout should maximize what Divi already does well!

Here are some tips to consider when making your Layout Divi friendly:

  1. Don’t add inline CSS to style text in a module (if possible)

    There may have been a greater need for doing this in the past, but not now. The design tab settings can target and style any body text, header text (h1, h2, h3, etc.) and any link within the content box. Adding inline CSS to the text via html will just confuse the issue.

    One exception would be add multiple colors to a block of text or header. In that case, you may be inclined to do something like this:

    <h2>This text is black and <span style="color: #a00000;">This text is red</span></h2>
    

    Try to avoid doing things like this. It will confuse the user, or worse, introduce them to a customization they have no idea how to replicate. Instead, think of some other way within the module settings to set your content apart. There is plenty of room to get creative with those options.

  2. Avoid Adding Custom Code (Custom CSS, PHP, or Javascript) If Possible.

    Avoid the temptation to add bloated custom CSS and Javascript/PHP to set your layout a part from the others. Remember, there will be a wide range of people who will want to use your layout. Don’t leave the newbies in the dust. Make sure your layouts are easily customizable using the built in design settings of the Visual Builder instead of trying to over-impress your users with styling and functionality they won’t be able to control or customize themselves. Divi users expect to have control over building their site without having to know code.

  3. Avoid using custom code like javascript in the Theme Options.

    If you must include custom code, you should include it within a code module as a part of the layout page if possible. This makes it easier to locate the isolate the code to one page and is easier to handle by the user.

  4. Don’t Add Custom CSS in the Theme Customizer or Page Settings

    Yes, you can export the Theme Customizer and Page Settings but any custom CSS added to those areas will not export along with it.

    If you must add Custom CSS (and you shouldn’t 99% of the time), here are your choices:

    Option 1: Add it to your Custom CSS under your Theme Options, under General Settings and then export your theme options and include that file in your layout pack. However, this is dangerous because your user may not want to override his or her theme options and if they do so by accident, they aren’t going to be happy.

    Option 2: Add the CSS inside of a code module on the page your wish to style. This is a better option than the one above but not ideal since the user will have a hard time customizing the code or understanding its influence.

    Option 3 (recommended): Add it to the custom CSS blocks under the Advanced tab of your settings within each section, row, and module. This is the best option for adding CSS if you must.

It Sets the Stage for other Plugins

plugins

Despite all of the wonderful and powerful tools Divi can offer a website, there are times when a third party plugin is needed. That is why Divi is built to make sure most of those great WordPress plugins are compatible with Divi. Therefore, you should prepare the layout packs to integrate well with any plugin(s) needed to complete the site they are being used to design.

Here are two ways you can prepare your layout for plugin integration:

  1. Pre-design the Shop Module Whenever Applicable

    If you are building an e-commerce site with WooCommerce, it is obvious that users will need a functioning shop or product page so it makes sense to go ahead and build that page using Divi’s Shop Module. The shop module won’t be visible until WooCommerce is installed and products are added, but at least you have done the work of design for the user already.

    Here is what the the shop module looks like on our fashion shop layout before woocommerce products are added.

    shop

    But because of we took the time to design the shop module beforehand, this is what it looks like as soon as products are added.

    after shop

  2. Include Plugin Shortcodes for Future Integration

    There may be times when you need help from a third party plugin or shortode to add something extremely useful most people will either want or need. Instead of leaving it up to the user to do the work of integrating the plugin with Divi, why not go ahead and simplify the process by adding the module, shortcode or snippet that will become active whenever the user uploads the plugin.

    For example, let’s say you are build an e-commerce layout pack. By anticipating the woocommerce pages that will be needed to handle the checkout process and account information, you can prepare your layout accordingly by adding the WooCommerce Shortcodes (used to generate the content for WooCommerce Pages) to your layout pack WooCommerce pages. Sure, the page layouts with shortcodes won’t be fully operational before the plugin is integrated, but at least you have set the stage for the user to build upon.

    Here is an example of a page created for a specific woocommerce page.

    finish cart page

    All of the content you see (other than the header) is generated with a shortcode. But Divi is able to style certain elements of the text generated by the shortcode using the module settings. Go ahead and customize that shortcode content beforehand so that when the user installs woocommerce, the shortcode will automatically stylize the content generated.

    And WooCommerce is not the only plugin out there that uses shortcodes to display content. Look for those opportunities to frame that shortcode with a great design that matches the rest of the layout pack.

It Uses Optimized Images Throughout

optimize

Having great images in your layout is a must. But any image, nomatter how beautiful, is not worth having if it takes forever to load. A good layout requires that one takes the time to optimize the images for the Divi layout pack.

This optimization consists of…

  1. File format. This is usually a choice between jpg (best for photographs) and png format (best for icons and buttons and other graphic elements that need a transparent background)
  2. Image dimensions. I recommend keeping a ratio of 16:9 or 4:3 for all images. Then determine the max width of the column it will sit in and set your dimensions accordingly.
  3. File size. This involves using a photo editor (Photoshop or Gimp) or a online software like Tinypng to shrink or strip out unneeded bloat from the image.

It Contains High Resolution Images as a part of the Pack

It is important that you optimize the photos that are already published on the layout. However, you also want to give the user the ability to customize those same photos however they want for future use. This provides excellent value and sets your layout pack apart from the others. Allowing them to use those images without restriction on other websites (even e-commerce sites) is a great idea as well. This means they can use the photos without having to worry about paying licensing fees or attributing the photographer.

Feel free to add these images in a separate folder next to your layouts in the pack.

add image

It Is Exported Properly for Convenient Imports

Each layout pack should contain properly exported files in a single folder for easy access.

The Process for properly exporting the layouts for future user imports contains the following steps:

  1. Save each layout page to the Divi Library as a new layout.
  2. Export each layout individually from the Divi Library to produce a separate json file for each layout page.

    export

  3. Export all layouts collectively from the Divi LIbrary to create a single file containing all layouts.

    export all

  4. Create a new folder and add your individual layout page json files and your single json file containing all layout pages to the folder.

    all file in pack

  5. Compress the folder into a zip file so that it can easily be downloaded from your website to the user.

The Process for Properly Importing the layouts to a new website contains the following steps:

  1. Unzip the layout pack zip file and open the folder.
  2. Go to the Divi Library and click the import/export button.
  3. Choose Import
  4. Find the single json file containing all the layouts and click import.

For more details on how to best handle layout pack imports and exports, read these tips for creating, exporting and sharing your own Divi library elements.

It Has Been Thoroughly Tested

Don’t overlook this one. A good Divi Layout Pack needs to be tested before you share (or sell) it to others. Here is a helpful checklist you should consider before offering your layout to the world (for best practice, try to conduct these tests on a fresh install of WordPress and Divi):

General Testing

  • Make sure you used optimized images for the layouts.
  • You may want to run performance tests on each of the pages to see if there are any problems (like large images slowing down to page load time).
  • Check for glaring spelling mistakes. It is true that the user will need to update the content once they use the layouts, but a spelling mistake on a page header could be off-putting.

Check the Download File Contents

  • Make sure all of your layout files are in your layout pack folder.
  • Make sure you have included an “all” layout file that imports every layout at once.
  • Include a separate folder for your high resolution images.

Test the Portability Process

  • Import each of the layouts from your pack into a separate Divi theme library (on a different wordpress install).
  • Create a new page for each of the layouts and using the divi builder, add the corresponding layout to each of the pages.
  • Check the pages to make sure the layouts look like the original design and that nothing is broken. (If something is broken, I would first go and export the original file again and import it again to make sure you had the correct version of the layout.)
  • If your layout depends on a plugin, install the plugin and check the layout for proper rendering.
  • Delete the layouts you just added to the library and import the “all” layouts file to the library.
  • Then test those layouts on each of the pages you already created to make sure the layouts look good.

Take your Layouts to the Next Level

Even though layout packs aren’t technically themes, you can add value to the layout packs by making them easier to use with the Divi Theme. Users will appreciate the effort and your layout packs will rise to another level of awesomeness. Here are just a few ideas.

Include Pre-Designed Sections, Rows, and Modules as additional library items so that the user will have an easier time building additional pages with those items.

One good way to separate your layout pack from the rest is to think about what sections, rows, or modules a user will need to build other custom pages and then include those in the layout pack. Some of these elements would include a Fulwidth Header Module, a text module for content, a dark and a light version of a button, or a call to action. If you take the time to include these smaller elements (instead of just the page layouts), you will allow your users to build things a lot more quickly.

Include a Color Palette with color codes that can be used to update the default color palette in theme Options

Another way to add additional value to your layout packs is to give users a color palette to use when making adjustments to there new site. This can be a simple text document with the color codes in the layout pack folder, or you can even design a branding layout page that has all the design elements used for easy reference and duplication.

Design your layout with Divi’s default accent color in mind.

There is still room to better merge the Divi Theme and the Layout Packs. By taking into consideration what elements can be changed by adjusting the global accent color, you can leave room for those changes as you build the layout. That way people will have the option of tweaking the accent color to change design throughout the site as apposed to changing the design of those elements on a page-by-page basis.

These are just three ideas that come to mind, but I’m sure there are many ways to add quality to the Layout Packs above and beyond the competition.

In Closing

Hopefully you have a better idea of what makes a good (or even great) Divi Layout Pack. If anything, I hope you are inspired to create something amazing! I look foward to seeing your new layout pack soon.

Until then, feel free to reach out in the comments.

Cheers!

The post What Makes a Good Divi Layout Pack? appeared first on Elegant Themes Blog.

Powered by WPeMatico

Printify for WooCommerce Overview: You Sell Designs, They Print & Fill Orders

Ever wished that you could add the power of print on demand to your WooCommerce Store? Print on demand opens the doors to you selling a huge variety of products via your store without needing to maintain an equally huge physical inventory.

As you might be able to guess, WooCommerce doesn’t support print on demand by default. But with the right tools, it’s surprisingly simple to start selling print on demand products via WooCommerce.

Printify is one of those tools. It’s a free web app that lets you easily connect your WooCommerce store to a number of different print on demand services. Your visitors can shop at your WooCommerce store like normal, but you’re able to seamlessly outsource production and distribution to your chosen print on demand service(s).

The whole process is surprisingly simple and has no upfront costs. And in this post, I’m going to give you a full tutorial on how you can use Printify to add print on demand to WooCommerce.

Here’s What Printify Helps You Do

First, I want to start with what Printify is not:

It’s not an actual print on demand service by itself.

Instead, Printify helps you easily connect your WooCommerce store to a variety of print on demand services, which gives you access to different product inventories and pricing.

It’s an all-in-one solution to:

  • Create products based on hundreds of available items (clothing, cups/mugs, phone cases, etc.)
  • Automatically sync those products to your WooCommerce store
  • Manage order production and shipping

To start, you can create your product designs from inside the Printify interface, complete with a live preview. If you’ve ever used a print on demand service before, you should feel pretty familiar with the interface.

Once you create your products in the Printify interface, Printify automatically syncs them to your WooCommerce store without you needing to complete any manual actions. All you do is click a Publish button and they’re live.

And finally, you can then manage orders and shipping right from the Printify interface. You can either manually approve all orders before they get sent to your chosen print on demand service, or you can have Printify automatically send orders to production as they come in.

There’s no fixed cost just for using Printify – instead, Printify takes a transparent cut of each product that you sell (you’ll see exactly how much this is when you create each individual product).

How To Add Print On Demand to WooCommerce With Printify

To show you how Printify actually works, I’m going to go through the entire process of creating a fictional Elegant Themes laptop sleeve (using our logo).

The only thing you’ll need to already have in order to follow this guide is a WooCommerce store.

Once you have WooCommerce installed, you’re ready to dive right in.

Step 1: Create Your Printify Account

To get started, you need to head to Printify and create your free Printify account:

Once you sign up, you’ll be asked to enter Your store name. This is purely internal – so don’t stress about it:

On the next page, you’ll need to enter your billing details. And then after that, you should see a screen that’s ready to launch you into a quick tutorial:

Step 2: Sync Printify With WooCommerce

Once you click through the 3-step onboarding tutorial, you should be in the main Printify interface. I’ll show you how to use this interface in more detail in a second. But for now, it’s time to sync Printify with your WooCommerce store.

To do that, click on your store name and then select Manage Stores:

Then, click Connect:

In the popup, select the option for WooCommerce:

And then enter the URL to your WooCommerce store:

Once you click Continue, you’ll need to give Printify API access to your WooCommerce store so that it can manage products and orders for you:

And that’s it! Your store is now connected to Printify.

Step 3: Install Printify Plugin For Accurate Shipping Calculations

At this point, your store is all synced up with Printify. But in order to get accurate shipping calculations for your print on demand products, you need to install the free Printify plugin.

It’s free and listed at WordPress.org, so you can install it like you would any other plugin.

Once you activate the plugin, go to WooCommerce → Settings → Shipping → Printify Shipping and check both boxes:

Make sure to click Save changes when you finish.

Now, your shipping calculations will always be accurate no matter which print on demand service you’re using.

Step 4: Design Your First Product

At this point, your Printify account is fully synced with your WooCommerce store. All that’s left to do is start creating some products.

To do that, head back to your Printify dashboard.

The first thing that you need to do is choose what type of product you want to create. You can do that by using the filter options on the left-hand side of the interface:

Once you find a product that you like, all you need to do is click on it to get started. Printify will then give you some basic information on pricing, production time, sizes, etc.

If you’re happy with everything, you can click the Start Designing button to add your design:

Then, Printify will take you to the design interface. Here, you can use different Layers to upload images to use as your design:

And to preview what your design will look like on the final product, you can quickly switch over to Preview Mode:

Once you’re happy with how your design looks, click Save and Continue.

Step 5: Finalize Your Product Details And Publish Product

Once you save your design, you’ll be able to customize smaller details about your product like:

  • Mockup image(s) choose which mockup image(s) to use as product images at your WooCommerce store.
  • Description – Printify pre-fills this with information for the base product that you can further customize if desired.
  • Pricing – set retail pricing for each variation of your product.
  • Store details – choose which store to publish to (i.e. your WooCommerce store).

What’s especially nice is that Printify makes the pricing tab very transparent. You can instantly see the actual costs, as well as your profit per item at the prices you’ve set:

This cost includes Printify’s fee – so you won’t need to pay anything beyond the number listed here to use Printify and the associated print on demand service.

Once you’ve chosen the mockups, description, and pricing, go to the Store details tab to choose which store to publish the product to:

Then, all you need to do is click Save Changes and Publish to publish your product to your WooCommerce store.

Once you click that button, your product is Live, including the description and images that you set. You don’t need to perform any actions in your WooCommerce store.

Printify will even create product variations for the different sizes:

And that’s it! People can now purchase your products like normal.

Managing And/Or Approving Orders

Ok – so what actually happens when people start purchasing your print on demand products via WooCommerce? Because you’re not fulfilling the orders yourself, you obviously need some mechanism to handle when orders get sent to production.

To do that, Printify lets you choose two different ways to send orders to production:

  • Manual – orders are only sent after you manually click a Send to Production button. This gives you more control but requires you to log in regularly to process orders.
  • Automatically – you can choose to automatically send orders to production after a certain delay or at a certain time per day. While it’s less manual work, you also lose some control when you do things automatically.

You can set these options by going to Manage Stores → Settings and scrolling down:

And you’ll also be able to manage all of your orders by going to the Orders tab:

If you’re more concerned with the nitty-gritty details of order fulfillment, Printify’s FAQ sections on Production & Shipping and Terms & Returns are a good resource for many of the questions you’re likely to have.

Generally, Printify is responsible for fixing issues with lost or damaged items, while you’re responsible in the case of a fully-functioning product where your customer simply changed his or her mind. As a result, you’ll likely want to use a returns policy that takes that into account.

Wrapping Things Up

If you want to sell print on demand products through WooCommerce, Printify provides an easy-to-integrate solution with no upfront costs.

It’s simple to get set up. And once you complete the setup, you can quickly create a large variety of custom-designed products via the Printify interface. And because those products automatically sync to your WooCommerce store, it’s easy to quickly produce new products as needed to stay on top of current trends.

Now over to you – have you ever integrated print on demand products into WooCommerce? If so, how did you do it?

Article thumbnail image by belka graphics  / shutterstock.com

The post Printify for WooCommerce Overview: You Sell Designs, They Print & Fill Orders appeared first on Elegant Themes Blog.

Powered by WPeMatico

How to Use CSS Even and Odd Rules to Create Engaging Tables in WordPress

Cascading Stylesheets (CSS) enable you to create some fantastic effects if you have the relevant expertise. However, there are so many elements you can customize that mastering the language can be difficult.

Take CSS even and odd rules, for example. They’re little-known selectors that enable you to target even and odd elements on tables, lists, and pretty much anything else you can think of. In this article, we’ll talk about how CSS even and odd rules work, and how you can use them. Then we’ll teach you how to use Divi to replicate their effects for even better results. Let’s get to work!

An Introduction to CSS Even and Odd Rules

An example of CSS even and odd rules.

CSS even and odd rules enable you to target very specific elements.

The name for this type of CSS selector gives away its purpose. Even and odd rules enable you to target those two types of elements in almost any situation, and apply styles to them.

Take the example at the top of this section – the even columns all share the same text color, whereas the uneven numbers use a different one. That effect is possible because we used even and odd selectors to target each type of element and apply unique background colors to them.

Right now you’re probably curious about what the applications for such specific selectors could be, so let’s break them down using examples:

  • Pricing tables. The best pricing tables use colors to pull your eyes towards the plans they want you to sign up for. In this case, you could use even and odd selectors to make specific plans stand out.
  • To make extended datasets more readable. Imagine you’re trying to make sense of a long table full of data. With a little CSS, you can apply even and odds rules to create a contrast between the rows or columns to make things more readable.
  • To highlight specific items within a list. If you include a long list in an article, even and odd rules can come in handy to highlight particular entries. Instead of playing with background colors, you can bold specific items, change their font size, and more.

To be fair, CSS even and odd rules aren’t something you often see in the wild. However, they’re easy to apply, so there’s no reason why they shouldn’t be a part of your arsenal. Let’s talk about how to put them into practice!

How CSS Even and Odd Rules Work in Practice

Tables are the most common use case for CSS even and odd rules because they’re elements with clear visual limits. Plus, tables tend to be made up of multiple elements, which makes them the perfect candidates for the selectors in question.

Here’s an example of a quick and dirty table with minimal styling applied to it. It’s easy to read, and it gets the information it needs to across, but that’s pretty much it:

A simple table with minimal styling.

If we wanted to apply even and odd rules to it, here’s an example of how the CSS would look:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #4D4D4D}

Here, tr refers to the HTML elements for each row on your table. The code above will set white backgrounds for all the even rows and grey ones for the odd numbers, just like this:

A table with color backgrounds for the odd rows.

In this example, the green cell in the corner of the image is simply highlighted.

You can also target columns instead of rows, which comes in handy when highlighting unique plans in pricing tables. Here’s the same code as earlier, only with columns instead of rows:

col:nth-child(even) {background: #CCC}
col:nth-child(odd) {background: #4D4D4D}

Here’s what the result would look like:

An example of colored backgrounds for odd columns.

As we mentioned earlier, you can use even and odd rules to target basically any element. The key is that it should contain sub-elements, such as rows or columns – otherwise, the selector wouldn’t know which ones to target. Lists, for example, include li HTML elements for each entry. Here’s an example:

  • First element.
  • Second element.
  • Third element.
  • Fourth element.

In this case, you want your even and odd selectors to target li elements specifically, so your CSS should look like this:

li:nth-child(even) {background: #CCC}
li:nth-child(odd) {background: #4D4D4D}

Of course, adding background colors to list elements isn’t a common practice, so you’d probably want to use other types of customizations. For example, you can bold the odd elements in your list to make them stand out:

  • First element.
  • Second element.
  • Third element.
  • Fourth element.

As you can see, there are no tricks to using even and odd selectors. All it takes is targeting the right elements, and you can implement any changes you want without affecting the rest of your page.

How to Replicate CSS Even and Odd Rules Using Divi

If you’re a Divi user, the module system enables you to add sophisticated elements such as contact forms, pricing tables, galleries, and more to any of your pages with a few clicks. What’s more, you get access to powerful customization features to personalize those elements.

When it comes to pricing tables, for example, it’s all too easy to replicate the effects of CSS even and odd rules without using any code thanks to Divi. Here’s an example of a barebones pricing table we cooked up with the Divi Builder:

A barebones pricing table.

Now, let’s say we wanted to apply different colors for each column, to add a little contrast to the table. Using CSS even and odd rules, we’d end up targeting entire columns with the same color, which would look terrible. With Divi, you can customize the specific sections you want to target. Let’s try adding blue backgrounds to the headers for the first and third columns. To do that, locate the pricing table module on the page you’re editing and click on its Module Settings button:

Opening the module settings screen.

Now locate the specific column you want to target and click on its settings button once more:

Customizing one of your pricing table's columns.

If you jump to the Advanced tab, you’ll find a field called Pricing Heading. You can change that section’s background color with a simple line of CSS:

background: #0C71C3;

Now here’s what our table looks like:

Applying a background color to a single section.

If you apply the same change to the Developer column, you’ve basically implemented even and odd rules for that particular row:

Applying the same color to yet another section.

The rest of the table looks good, but what if you also wanted to highlight some of the features of each plan? That’s something you usually see in pricing tables, so visitors can compare the features each plan offers. You could use even and odd rules targeting rows, and stagger your plan’s features so only the ones you want will stand out. With Divi, you can replicate that effect with simple plus and minus signs.

To do this, go to the settings sections for the column you want to modify. For this example, we’re going to target the Basic column once more. If you scroll down its main settings screen, you’ll find a text editor including the list of features you saw earlier:

Divi's text editor.

As you can see, plus signs are preceding each element. If you replace them with minus signs, here’s what they look like on the front end:

Configuring some of your features to show up as deselected.

If you stagger the plus and minus signs, you can implement your own even and odd design. Plus, you can play around with the text editor to customize things even further. Here’s what our table looks like after a bit more tweaking:

What our pricing table looks after customizing it.

Naturally, you’ll want to be more picky about which elements to highlight in a real pricing table. That way, users will know at a glance exactly what each plan offers them and how it compares to the others.

Finally, remember that the Pricing Table module enables you to highlight specific columns, as featured tables:

Enabling the featured table functionality.

To choose which columns you want to highlight, go into their settings and then jump to the Design tab. You’ll find the option right at the top.

Conclusion

CSS is easy to learn, but difficult to master. With some patience, anyone can create amazing designs and effects using the language. Even elements that aren’t so flashy, such as tables, can be brought to life using CSS in the right way – in this case, with even and odd rules.

If you’re not one for sitting around tweaking code until things look just right, the Divi theme enables you to customize nearly every aspect of your website using simple menus. Plus, you can preview your changes in seconds. With so many customization settings, it’s possible to replicate the effects of CSS even and odd rules reasonably easily.

Do you have any questions about how to use Divi to replicate even and odd rules in WordPress? Let’s talk about them in the comments section below!

Article thumbnail image by Ket4up / shutterstock.com

The post How to Use CSS Even and Odd Rules to Create Engaging Tables in WordPress appeared first on Elegant Themes Blog.

Powered by WPeMatico

Appointment Booking and Online Scheduling Plugin by vCita: A Detailed Overview and Review

One of the hardest elements of running a business online is making sure that you can deliver your products efficiently to your clients and customers. If you’re a service-oriented business, that becomes even harder because you don’t have to simply worry about shipping details. You have to worry about booking and scheduling appointments that work for everyone involved.

There are a ton of plugins that offer some of the functionality, but one of the most robust is the Appointment Booking and Online Scheduling Plugin by vCita. Now, there are a lot of different apps that do some of what vCita’s plugin does, but not nearly all.

That’s why in this post I thought it would be helpful to do a thorough overview and review of the plugin for those of you operating service, appointment, and booking based businesses. Or for those of you building websites for those businesses.

Let’s get into it!

Getting Started with the Appointment Booking and Online Scheduling Plugin by vCita

First of all, find and activate the plugin in the WordPress.org plugin repo. You should know the drill by now. Once it’s installed and activated, you will see a warning at the top of your screen that tells you to go through setup.

Appointment Booking and Online Scheduling Plugin by vCita

When clicked, the notification will bring you to the main scheduling tab that has been added to your dashboard menu. This is where things get fun, and you start to see all the stuff you’re going to be able to do to make your life easier and better.

As you can see, there’s a lot going on here, so let’s break it down into more manageable pieces so that you can get what you need put together.

Time to Connect!

This might be a no-brainer, but you have to register an email to make appointments. The kicker here, though, is that you’re going to be setting up a vCita account, too, which will hold all of your contact information and location info for the plugin to pull from.

When that’s done, your dashboard gets updated, and you finally have settings to fiddle with.

Settings, Settings, Everywhere

When you first get into the vCita page itself, you’re gonna be a little overwhelmed. There is so much that you can do. But let’s head into the actual settings tab for the dashboard and look at what you have control over. (Hint: so much.)

Business Info

My first suggestion is to fill out your business information. They have spots for you to upload logos, a personal picture of yourself, business descriptions, and even branding styles for the actual widgets that will appear on your site. And that’s just under the Business Info card.

You also have an opportunity to add staff members that can handle certain kinds of events and bookings that you set them to, individualized schedules, and to have separate user roles and permissions if you have the premium subscription.

You can also set up autoresponders and email messages to your users, too, that will give them information and you a notification of their scheduling.

Livesite

The middle column gives you cards to set up exactly what your users will see. From what services and events they can actually schedule–a phone consultation, in-person meetings, 60-minute massages, etc.–to whether you let them request time slots that need to be approved or if you have to go in and finalize them, you’re able to carve out exactly the kind of calendar you want to offer.

You can also collect payments through appointment booking and online scheduling plugin by vCita, but you’re limited to $300 each month via PayPal or bank transfer if you’re on the free plan. That’s fine if it’s a side-hustle (probably), but might be a bit limiting for anything more than that.

Additionally, you can create coupons and discounts and offers if you upgrade to the Business package or above. Being able to track coupon redemption is also super important, and it’s not really that often I find a plugin that lets you do that.

Other Stuff

vCita also lets you integrate with different services outside of the plugin, and this is a big deal. You can connect to Zapier to create if/then processes to help automate your workflow. And then there’s QuickBooks. Yep, it integrates with QuickBooks. That’s enough for me. And when you add in Webooks so that you keep everything updated and synced in real-time, you’re cookin’ with fire.

YOu also get Google Analytics, Facebook, and Adwords integrations which let you track conversions, and the code is only called on completed actions on your site. Like Homer Simposon once said…s m r t.

Another fantastic feature that you will definitely get a lot of use out of are client cards. Basically, it’s a full digital address book that keeps a record of every client you have. From phone number to address to purchase history, you’ll have individual cards for everyone.

And note how it says that if you keep the same label names, the client card is created and autofilled from the widget at booking. That might not sound like much, but that’s like the goose that laid the golden egg, y’all.

Emails and Messaging

While much of what vCita does as a free app is awesome, the messaging is really a fantastic feature that seems to be worth the price. If you updgrade from free, you get the ability to customize all the default email templates. Free users get branding on them, sure, but if you want to edit the content for your own needs, that’s an upgrade.

And so is sending text messages. If you upgrade, you get the ability to send SMS messages to your clients. You can send reminders, set the times and delays, follow-ups, and confirmations and auto replies. It’s really robust for an SMS service through a plugin, and this alone could be why you upgrade (because people respond better to texts than they do emails).

Just Getting Started

And that’s just the settings tab. If you look at the sidebar, you have all the individual pages where you manage each part of the software. The pages are self-explanatory for the most part, with inbox, calendar, clients, and so on being pretty standard far. You get document storage for your team and clients (increased from 200mb to 20gb if you upgrade), and the ability to make SMS or email campaigns.

I wanted to specifically point out about the campaigns feature. It does tie into the email and messaging features from above, and the cool thing is that you do it all from within the vCita plugin dashboard. Usually these kinds of campaigns are handled via an external service like Aweber or MailChimp or Emma, but keeping it consolidated in the plugin itself just makes things run smoothly on your end. Analytics and tracking is included, too.

Actual Usage

Once you get all of that put together, it’s time to dig into putting all that stuff into practice. If you do back to the vCita Online Scheduling menu in your WordPress dashboard, you will see four items that you can integrate into your site. You don’t have to use all four, obviously, and you can pick which combination is right for your business.

Active Engage

Like it sounds, Active Engage is a fly-in/pop-up tab that engages with your users. It’s not just a “hi there, chat with us!” box, either. You can have any number of the following items available to your folks. And if you don’t want a fly-in or pop-up, you can always embed the form inline. Oh, and you can also style it for mobile.

  • Scheduling
  • Make Payment
  • Call
  • YouTube – For promotional videos, tutorials, testimonials, welcome messages, etc.
  • Document sharing
  • Send an email
  • Map

Basically, if you need to make sure your visitors are aware of anything you offer, the Active Engage will get it done for you.

Scheduling Calendar

This is the real meat-and-potatoes of the appointment booking and online scheduling plugin by vCita…because it’s where the appointment booking and online scheduling happens. As you can see in the screenshot above, you get control over size, service, business hours, clients, branding, time slot availability, etc.

It’s incredibly in depth, and you basically get a chance to edit what you want to show on the Book Appointment page that the plugin creates for you.

Contact Form

There are so many contact form plugins out there. Tons. Oodles. This one’s the same…and different. It can be a basic “shoot me an email form.” That’s not the cool part. The cool part is being able to integrate it specifically with the booking and appointment scheduling side. Your clients can reserve a time for your services, as they contact you about something else.

Adding the extra button gives the user the impetus to go ahead and check it out, which wouldn’t be there if they were separated. It’s well worth using for that feature on its own. You also get the normal customization options you’d expect from contact forms, and they all seamlessly work together in style with the other vCita widgets.

Sidebar

Despite people being trained to avoid sidebars these days, vCita does come with a sidebar widget you can install and customize so people never don’t have an option to schedule with you. Personally, I think this one is overboard given the other options, but if you like it, use it.

Shortcodes

And as you’re implementing any of these into your site, you should be aware that they are controlled by shortcodes. If you want them somewhere, toss in a shortcode, and you will be ready to go.

The User’s Perspective

Now, the user’s side of things is super smooth. Up til now, I’ve only discussed your end of stuff and not what the users see.

When the users hit your site and start to make appointments, it’s as polished as you’d want. Depending on how you want to integrate the schedulers in your design, this is what you can expect to see.

Active Engage

This has the option of showing up on every page on your site. That may or may not work for your users because it can be pretty obtrusive. I find myself getting annoyed at this kind of pop-up and flyin, but you know your users and how to get them to engage.

Booking Page/Calendar

The meat-and-potatoes of the vCita plugin comes with the calendar, so it’s not a surprise that within the plugin settings they give you the option to automatically create a “Book Appointment” page.

The page it creates is a pretty basic one, though, and doesn’t include any styling.

Luckily, the created page is just for convenience. You can take the shortcode [vCitaSchedulingCalendar] and put it in any text field (or in a text module if you’re using Divi)

You can use any of the normal WordPress tools and CSS to move it around and position it, and all the shortcodes have height and width properties you can edit to make them fit better.

Contact Form

Then there’s also a contact form that vCita offers. Plus, like I said above, it can also include a scheduling option for your users, too, and you can customize the colors and fonts to match your site in the Contact Form area of the vCita settings.

Widgets

You also get your choice of semi-customizable sidebar widgets with vCita. Just use the height and width properties within the shortcake to customize the dimensions within your design, whether it’s in the sidebar of your blog, a footer widget, or even a before/after post field.

Just set it and forget it.

Actually Using It

All of the widgets and profiles above take you to the same end result: a booking page. It, like everything else with vCita, works like a charm. You can see the whole workflow in this amazing animated GIF! #internet

Appointment Booking and Online Scheduling Plugin by vCita

That’s It?

Maybe? I guess? Ain’t that enough?

In the end, I think that the vCita plugin really is worth giving a shot. It just does so much, and even if you stick with the free plan, you get more functionality than I was able to get out of some professional scheduling and tracking software I used at my last job.

Even if you don’t take advantage of all the ridiculous number of features, the ones that you pick and choose from are worth it. It’s not often that you find a plugin that just works, but this is one that does. I’ve had zero problems working with it during my trial run, so I gotta recommend it to you folks.

If you’ve been looking for a good booking solution for your site look at the appointment booking and online scheduling plugin by vCita. I think it’ll be worth your time.

Article featured image by Jane Kelly / shutterstock.com

The post Appointment Booking and Online Scheduling Plugin by vCita: A Detailed Overview and Review appeared first on Elegant Themes Blog.

Powered by WPeMatico

WordPress User Survey Data for 2015-2017

For many years, we’ve invited folks to tell us how they use WordPress by filling out an annual survey. In the past, interesting results from this survey have been shared in the annual State of the Word address. This year, for the first time, the results of the 2017 survey are being published on WordPress News, along with the results of the 2015 and 2016 survey.

So that information from the survey doesn’t reveal anything that respondents might consider private, we do not publish a full export of the raw data. We’d love to make this information as accessible as possible, though, so if you have a suggestion for an OS project or tool we can put the data into that allows people to play with it that still protects individual response privacy, please leave a comment on this post!

Major Groups

This survey features multiple groups, dividing respondents at the first question:

Which of the following best describes how you use WordPress? (Mandatory)

Those who selected “I’m a designer or developer, or I work for a company that designs/develops websites; I use WordPress to build websites and/or blogs for others. (This might include theme development, writing plugins, or other custom work.)” were served questions from what we’ll call the “WordPress Professionals” group.

This “WordPress Professionals” group is further divided into WordPress Company and WordPress Freelancer/Hobbyist groups, based on how the respondent answered the question, “Which of the following best describes your involvement with WordPress? (2015) / Do you work for a company, or on your own? (2016-17).”

Those who selected “I own, run, or contribute to a blog or website that is built with WordPress.” were served questions in what we’re calling the “WordPress Users” group.

The relevant survey group is noted in each table below. In the case of questions that were served to different groups in 2015 but then served to all respondents in 2016 and 2017, the group responses from 2015 have been consolidated into one set of data for easier comparison between years.

Survey results

Jump to answers from WordPress Professionals

Jump to answers from WordPress Users

Jump to answers from All Respondents

Which of the following best describes how you use WordPress? (Mandatory)

2015 2016 2017
Number of responses (since this question was mandatory, the number of responses here is the total number for the survey) 45,995 15,585 16,029
I’m a designer or developer, or I work for a company that designs/develops websites; I use WordPress to build websites and/or blogs for others. (This might include theme development, writing plugins, other custom work.) 26,662 58% 8,838 57% 9,099 57%
I own, run, or contribute to a blog or website that is built with WordPress. 16,130 35% 5,293 34% 5,625 35%
Neither of the above. 3,204 7% 1,460 9% 1,306 8%

WordPress Professionals

Which of the following best describes your involvement with WordPress? (Mandatory, 2015) / Do you work for a company, or on your own? (Mandatory, 2016-17)

2015 2016 2017
Group: WordPress Professional
Number of responses 26,699 8,838 9,101
My primary job is working for a company or organization that uses WordPress. 9,505 36% 3,529 40% 3,660 40%
My primary job is as a self-employed designer or developer that uses WordPress. 9,310 35% 3,188 36% 3,440 38%
I earn money from part-time or occasional freelance work involving WordPress. 5,954 22% 1,633 18% 1,590 17%
Work that I do involving WordPress is just a hobby, I don’t make money from it. 1,930 7% 491 6% 411 5%

How does your company or organization work with WordPress?

2015 2016 2017
Group: WordPress Company
Number of responses 9,342
Build/design and/or maintain websites or blogs for other people, companies, or organizations. 7,772 27%
Develop or customize themes. 5,404 19%
Build/design and/or maintain websites or blogs for my own use. 4,733 16%
Host websites for customers. 4,397 15%
Develop or distribute plugins. 3,181 11%
Provide educational resources to help others to use WordPress. 1,349 5%
Sponsor and/or attend WordCamps. 1,127 4%
Contribute bug reports and/or patches to WordPress core. 914 3%
Other Option 182  1%
Number of responses 3,457 3,598
We make websites for others. 2,695 24% 2,722 23%
We make websites for ourselves. 2,355 21% 2,470 21%
We develop or customize themes. 1,866 16% 1,910 16%
We host websites for others. 1,564 14% 1,595 14%
We develop or distribute plugins. 1,283 11% 1,342 11%
We provide educational resources to help others to use WordPress. 581 5% 631 5%
We sponsor and/or attend WordCamps. 561 5% 579 5%
We contribute bug reports and/or patches to WordPress core. 444 4% 468 4%
Other Option 98 1% 96 1%

How would you describe the business of your typical client(s)? (2015) / How would you describe the business of your typical client/customer? (2016, 2017)

2015 2016 2017
Group: WordPress Company
Number of responses 9,154 3,317 3,498
Small business 6,893 32% 2,398 31% 2,510 31%
Large business or Enterprise 3,635 17% 1,361 18% 1,447 18%
Non-profit 2,644 12% 934 12% 992 12%
Individual 2,600 12% 888 12% 1,022 12%
Education 2,344 11% 854 11% 966 12%
Website development (sub-contracting) 2,065 10% 637 8% 677 8%
Government 1,410 6% 524 7% 552 7%
Other Option 127 1% 66 1% 64 1%

How does your company or organization use WordPress when developing websites? (2015) / When making websites, how does your company or organization use WordPress? (2016, 2017)

2015 2016 2017
Group: WordPress Company
Number of responses 9,078 3,369 3,552
Mostly as a content management system (CMS) 6,361 70% 2,482 74% 2,640 74%
About half the time as a blogging platform and half the time as a CMS 1,222 13% 370 11% 383 11%
Mostly as a blogging platform 721 8% 137 4% 129 4%
Mostly as an application framework 629 7% 303 9% 303 9%
Other Option 145 2% 78 2% 97 3%

How much is your average WordPress site customized from the original WordPress installation?

2015 2016 2017
Group: WordPress Company
Number of responses 9,054 3,302 3,473
A lot of work has been done, the front end is unrecognizable, but the Dashboard still looks like the usual WordPress interface. 5,651 62% 2,025 61% 2,105 61%
There’s a different theme and some plugins have been added. 2,230 25% 799 24% 905 26%
Not at all, it’s still pretty much the same as the original download. 756 8% 302 9% 298 9%
You’d never know this was a WordPress installation, everything (including the admin) has been customized. 417 5% 177 5% 165 5%

Roughly how many currently active WordPress sites has your company or organization built?

2015 2016 2017
Group: WordPress Company
Number of responses 8,801
200 + 1,074 12%
51 – 200 1,721 20%
21 – 50 1,718 20%
11 – 20 1,284 15%
6 – 10 1,109 13%
2 – 5 1,418 16%
1 390 4%
0 87 1%
Number of responses 3,358 3,540
Thousands. 291 9% 331 9%
Hundreds. 770 23% 894 25%
Fewer than a hundred. 1,144 34% 1,177 33%
Just a few, but they are really great. 926 28% 896 25%
Prefer not to answer. 228 7% 242 7%

How many person-hours (of your company’s work) does the typical site take to complete?

2015 2016 2017
Group: WordPress Company
Number of responses 9,091 3,353 3,522
More than 200 939 10% 309 9% 325 9%
100 – 200 1080 12% 329 10% 367 10%
60 – 100 1541 17% 527 16% 513 15%
40 – 60 1854 20% 583 17% 620 18%
20 – 40 2066 23% 691 21% 685 19%
Fewer than 20 1611 18% 479 14% 519 15%
Prefer not to answer (2016, 2017) 436 13% 493 14%

Roughly what percentage of your company or organization’s output is based around WordPress (as opposed to other platforms or software)?

2015 2016 2017
Group: WordPress Company
Number of responses 8,950 3,345 3,503
100 % 1,089 12% 438 13% 480 14%
90 % 1,043 12% 417 12% 459 13%
80 % 955 11% 367 11% 424 12%
70 % 831 9% 305 9% 344 10%
60 % 534 6% 246 7% 226 6%
50 % 973 11% 335 10% 338 10%
40 % 613 7% 245 7% 202 6%
30 % 877 10% 335 10% 310 9%
20 % 806 9% 242 7% 280 8%
10 % 1,039 12% 344 10% 348 10%
0 % 190 2% 72 2% 92 3%

In which of the following ways do you work with WordPress?

2015 2016 2017
Group: WordPress Freelancer/Hobbyist
Number of responses 17,009 5,221 5,425
Build/design and/or maintain websites or blogs for other people, companies, or organizations 15,342 34% 4,795 34% 5,064 34%
Develop or customize themes 10,549 24% 2,997 21% 3,021 20%
Host websites for customers 8,142 18% 2,466 17% 2,728 18%
Develop or distribute plugins 4,125 9% 1,395 10% 1,416 9%
Provide educational resources to help others to use WordPress 3,276 7% 1,187 8% 1,308 9%
Sponsor and/or attend WordCamps 1,559 4% 648 5% 724 5%
Contribute bug reports and/or patches to WordPress core 1,107 2% 381 3% 393 3%
Other Option 389 1% 243 2% 299 2%

How would you describe the business of your typical client(s)?

2015 2016 2017
Group: WordPress Freelancer/Hobbyist
Number of responses 16,863 5,151 5,353
Small business 14,185 35% 4,342 35% 4,622 36%
Individual 8,513 21% 2,581 21% 2,583 20%
Non-profit 6,585 16% 2,004 16% 2,113 16%
Website development (sub-contracting) 4,301 11% 1,258 10% 1,216 9%
Education 3,458 8% 1,049 8% 1,139 9%
Large business or Enterprise 2,391 6% 805 6% 857 7%
Government 1,150 3% 300 2% 329 3%
Other Option 173 0% 101 1% 99 1%

How do you use WordPress in your development?

2015 2016 2017
Group: WordPress Freelancer/Hobbyist
Number of responses 16,768 5,145 5,372
Mostly as a content management system (CMS) 11,754 70% 3,641 71% 3,959 74%
About half the time as a blogging platform and half the time as a CMS 2,825 17% 812 16% 721 13%
Mostly as an application framework 1,012 6% 343 7% 344 6%
Mostly as a blogging platform 992 6% 246 5% 226 4%
Other Option 185 1% 105 2% 122 2%

How much is your average WordPress site customized from the original WordPress installation?

2015 2016 2017
Group: WordPress Freelancer/Hobbyist
Number of responses 16,699 5,131 5,317
A lot of work has been done, the front end is unrecognizable, but the Dashboard still looks like the usual WordPress interface. 9,457 57% 2,837 55% 2,998 56%
There’s a different theme and some plugins have been added. 5,526 33% 1,694 33% 1,781 34%
Not at all, it’s still pretty much the same as the original download. 977 6% 341 7% 310 6%
You’d never know this was a WordPress installation, everything (including the admin) has been customized. 739 4% 261 5% 228 4%

How many currently active WordPress sites have you built? (2015) / Roughly how many currently active WordPress sites have you built? (2016, 2017)

2015 2016 2017
Group: WordPress Freelancer/Hobbyist
Number of responses 16,690
200 + 514 3%
51 – 200 1,728 10%
21 – 50 3,000 18%
11 – 20 3,146 19%
6 – 10 3,405 20%
2 – 5 3,838 23%
1 698 4%
0 361 2%
Number of responses 5,165 5367
Thousands. 110 2% 104 2%
Hundreds. 603 12% 713 13%
Fewer than a hundred. 2,264 44% 2,457 46%
Just a few, but they are really great. 1,871 36% 1,813 34%
Prefer not to answer. 319 6% 280 5%

Roughly what percentage of your working time is spent working with WordPress?

2015 2016 2017
Group: WordPress Freelancer/Hobbyist
Number of responses 16,658 5,039 5,241
100 % 949 6% 459 9% 461 9%
90 % 1,300 8% 527 10% 540 10%
80 % 1,784 11% 637 13% 711 14%
70 % 1,850 11% 608 12% 627 12%
60 % 1,313 8% 438 9% 465 9%
50 % 2,095 13% 612 12% 639 12%
40 % 1,438 9% 391 8% 384 7%
30 % 2,076 12% 530 11% 511 10%
20 % 1,743 10% 445 9% 429 8%
10 % 1,819 11% 342 7% 419 8%
0 % 291 2% 52 1% 55 1%

How many hours of your work does the typical site take to complete? (2015) / How many hours of work does your typical WordPress project take to launch? (2016, 2017)

2015 2016 2017
Group: WordPress Freelancer/Hobbyist
Number of responses 16,670 5,164 5,378
More than 200 503 3% 222 4% 245 5%
100 – 200 973 6% 386 7% 393 7%
60 – 100 2,277 14% 788 15% 815 15%
40 – 60 3,896 23% 1,153 22% 1,216 23%
20 – 40 6,068 36% 1,487 29% 1,582 29%
Fewer than 20 2,953 18% 712 14% 751 14%
Prefer not to answer 418 8% 376 7%

Which of the following have you done with WordPress?

2015 2016 2017
Group: WordPress Professional (Company/Freelancer/Hobbyist)
Number of responses 20,687
I’ve written a theme from scratch. 11,894 25%
I’ve written a plugin. 9,719 21%
I’ve answered a question in the WordPress forum. 8,805 19%
I’ve attended a WordPress meetup. 4,062 9%
I’ve submitted a WordPress bug report. 4,062 9%
I’ve attended a WordCamp. 3,571 8%
I’ve contributed to WordPress documentation. 1,778 4%
Other Option 1,739 4%
I’ve contributed a WordPress core patch. 1,055 2%

What’s the best thing about WordPress?*

2015 2016 2017
Group: WordPress Professional
Number of responses 22,718 7,891 8,267
Easy/simple/user-friendly 9,450 42% 3,454 44% 3,852 47%
Customizable/extensible/modular/plugins/themes 8,601 38% 3,116 39% 3,555 43%
Community/support/documentation/help 3,806 17% 1,211 15% 1,340 16%
Free/open/open source 2,291 10% 802 10% 908 11%
Popular/ubiquitous 249 1% 86 1% 187 2%

 What’s the most frustrating thing about WordPress?*

2015 2016 2017
Group: WordPress Professional
Number of responses 21,144 7,294 7,691
Plugins & themes (abandoned/conflicts/coding standards) 6,122 29% 2,194 30% 2,187 28%
Security/vulnerabilities/hacks 2,321 11% 712 10% 829 11%
Updates 1,544 7% 422 6% 508 7%
Nothing/I don’t know/can’t think of anything 1,276 6% 344 5% 476 6%
Speed/performance/slow/heavy 1,196 6% 644 9% 516 7%

WordPress is as good as, or better than, its main competitors.

2015 2016 2017
Group: WordPress Professional
Number of responses (this question was not asked in the 2015 survey) 8,672 9,059
Agree 7551 87% 7836 87%
Prefer not to answer 754 9% 795 9%
Disagree 370 4% 428 5%

WordPress Users

Which of the following describes how you use WordPress?

2015 2016 2017
Group: WordPress User
Number of responses 15,169 5,043 5,521
My personal blog (or blogs) uses WordPress. 9,395 36% 3,117 36% 3,424 36%
My company or organization’s website is built with WordPress software. 7,480 29% 2,519 29% 2,841 30%
I have a hobby or side project that has a website built with WordPress. 6,112 23% 1,973 23% 2,200 23%
I write (or otherwise work) for an online publication that uses WordPress. 2,329 9% 806 9% 821 9%
Other Option 872 3% 234 3% 288 3%

Who installed your WordPress website?

2015 2016 2017
Group: WordPress User
Number of responses 15,055 5,020 5,523
I did. 11,216 66% 3,659 73% 4,129 75%
My hosting provider 2,236 13% 667 13% 767 14%
An external company 909 5% 182 4% 178 3%
An internal web person/team or a colleague 874 5% 178 4% 191 3%
A friend or family member 787 5% 192 4% 172 3%
I don’t know 502 3% 145 3% 87 2%
Other Option 345 2% n/a n/a n/a n/a

How much has the site been customized from the original WordPress installation?

2015 2016 2017
Group: WordPress User
Number of responses 14,789 4,997 5,494
There’s a different theme and some plugins have been added. 7,465 50% 2,337 47% 2,660 48%
A lot of work has been done, the site itself is unrecognizable from the original theme, but the Dashboard still looks like the usual WordPress interface. 4,715 32% 1,707 34% 1,872 34%
Not at all, it’s still pretty much the same as it was when I started out. 1,841 12% 635 13% 673 12%
You’d never know this was a WordPress installation, everything has been customized. 768 5% 321 6% 290 5%

What’s the best thing about WordPress?*

2015 2016 2017
Group: WordPress User
Number of responses 14,328 4,613 5,076
Easy/simple/user-friendly 7,391 52% 2,276 49% 2,511 49%
Customizable/extensible/modular/plugins/themes 4,219 29% 1,569 34% 1,632 32%
Free/open/open source 1,586 11% 493 11% 538 11%
Community/support/documentation/help 1,085 8% 388 8% 458 9%
Popular/ubiquitous 223 2% 74 2% 48 1%

What’s the most frustrating thing about WordPress?*

2015 2016 2017
Group: WordPress User
Number of responses 13,681 4,287 4,758
Plugins & themes (abandoned/conflicts/coding standards) 2,531 19% 1,183 28% 1,300 27%
Customization/design/look/template 1,273 9% 381 9% 408 9%
Code/coding/PHP 931 7% 306 7% 277 6%
Updates 926 7% 209 5% 296 6%
Security/vulnerabilites/hacks 785 6% 255 6% 292 6%

WordPress is as good as, or better than, its main competitors.

2015 2016 2017
Group: WordPress User
Number of responses 5,026 5,498
Agree 4,038 80% 4,462 81%
Prefer not to answer 737 15% 782 14%
Disagree 254 5% 255 5%

All Respondents

Can you (truthfully!) say “I make my living from WordPress”?

2015 2016 2017
Group: All Respondents
Number of responses (combination of all three groups from 2015; this question was not broken out by group in 2016-2017) 42,236 14,906 15,616
Not really, but I do get some or all of my income as a result of working with WordPress. 16,607 39% 5,408 36% 5,702 37%
Yes. 9,635 23% 4,791 32% 5,033 32%
No. 15,995 38% 4,713 32% 4,882 31%

Which devices do you access WordPress on?

2015 2016 2017
Group: All Respondents
Number of responses (combination of all three groups from 2015; this question was not broken out by group in 2016-2017) 42,433
Web 40,503 95%
Android phone 15,396 36%
iPhone 12,353 29%
iPad 11,748 28%
Android tablet 9,223 22%
Desktop app, like MarsEdit 6,018 14%
Other Option 1837 4%
Number of responses (this question was not broken out by group in 2016-2017) 14,840 15,597
Web browser on a desktop or laptop 14,160 54% 15,052 55%
Web browser on a mobile device (tablet or phone) 7,952 30% 8,248 30%
An app on a mobile device (table or phone) 3,309 13% 3,311 12%
A desktop app like MarsEdit 517 2% 498 2%
Other Option 282 1% 240 1%

WordPress now updates minor & security releases automatically for you. Check all that apply: (question not asked in 2016, 2017)

2015 2016 2017
Group: All Respondents
Number of responses (combination of all three groups) 39,726
I love auto-updates. 17,367 44%
I’d like to see auto-updates for plugins. 12,796 32%
Initially, I was nervous about auto updates. 11,868 30%
Auto updates still make me nervous. 10,809 27%
Auto updates don’t make me nervous now. 10,708 27%
I’d like to see auto-updates for themes. 10,449 26%
I’d like to see auto updates for major versions of WordPress. 10,225 26%
This is the first I’ve heard of auto-updates. 8,660 22%
I hate auto-updates. 3,293 8%

What is your gender?*

2015 2016 2017
Group: All respondents (This question was not asked in the 2015 survey.)
Number of responses 13,953 14,680
Male 10,978 78.68% 11,570 78.81%
Female 2,340 16.77% 2,511 21.70%
Prefer not to answer 601 4.31% 562 3.83%
Transgender 11 0.08% 8 0.05%
Nonbinary 8 0.06% 17 0.12%
Genderqueer 4 0.03% 3 0.02%
Androgynous 6 0.04% 5 0.03%
Fluid 3 0.02% 4 0.03%
Demimale 2 0.01% 0 0

Where are you located?

2015 2016 2017
Group: All respondents (This question was not asked in the 2015 survey.)
Number of responses 14,562 15,343
United States 3,770 25.89% 4,067 26.51%
India 1,456 10.00% 1,424 9.28%
United Kingdom 810 5.56% 900 5.87%
Germany 555 3.81% 729 4.75%
Canada 511 3.51% 599 3.90%
Australia 389 2.67% 460 3.00%
Italy 298 2.05% 356 2.32%
Netherlands 343 2.36% 350 2.28%
France 232 1.59% 283 1.84%
Bangladesh 257 1.76% 263 1.71%
Spain 271 1.86% 252 1.64%
Brazil 239 1.64% 251 1.64%
Pakistan 254 1.74% 240 1.56%
Indonesia 230 1.58% 226 1.47%
Iran, Islamic Republic of 190 1.30% 173 1.13%
Sweden 144 0.99% 173 1.13%
Nigeria 196 1.35% 172 1.12%
South Africa 193 1.33% 172 1.12%
Russian Federation 181 1.24% 151 0.98%
Poland 129 0.89% 137 0.89%
Romania 144 0.99% 132 0.86%
Switzerland 122 0.84% 130 0.85%
Philippines 92 0.63% 125 0.81%
China 136 0.93% 123 0.80%
Austria 89 0.61% 122 0.80%
Ukraine 105 0.72% 118 0.77%
Denmark 107 0.73% 114 0.74%
Greece 120 0.82% 114 0.74%
Portugal 94 0.65% 109 0.71%
Vietnam 101 0.69% 108 0.70%
Mexico 94 0.65% 105 0.68%
Nepal 76 0.52% 97 0.63%
Ireland 72 0.49% 94 0.61%
Israel 78 0.54% 94 0.61%
New Zealand 77 0.53% 91 0.59%
Finland 63 0.43% 90 0.59%
Turkey 91 0.62% 86 0.56%
Malaysia 91 0.62% 81 0.53%
Belgium 84 0.58% 79 0.51%
Norway 66 0.45% 79 0.51%
Argentina 65 0.45% 76 0.50%
Bulgaria 74 0.51% 72 0.47%
Japan 61 0.42% 68 0.44%
Thailand 69 0.47% 67 0.44%
Czech Republic 76 0.52% 66 0.43%
Serbia 89 0.61% 63 0.41%
Kenya 58 0.40% 62 0.40%
Colombia 39 0.27% 59 0.38%
Egypt 40 0.27% 52 0.34%

What is your age?

2015 2016 2017
Group: All Respondents
Number of responses (This question was not asked in 2015.) 14,944 15,636
60 and over 1,139 8% 1,641 11%
50-59 1,537 10% 1,996 13%
40-49 2,205 15% 2,643 17%
30-39 3,914 26% 3,972 25%
20-29 5,013 34% 4,444 28%
Under 20 1142 8% 941 6%

Thank you to everyone who made time to fill out the survey — we’re so happy you use WordPress, and we’re very grateful that you’re willing to share your experiences with us! Thanks also to everyone who spread the word about this survey, and to those of you who read all the way to the bottom of this post. 😉

*Text Field Questions: Each survey included some questions that could be answered only by filling out a text field. In the case of the questions “What is the best thing about WordPress?” and “What is the most frustrating thing about WordPress?” we listed the five most common responses, aggregated when applicable. In the case of the question “What is your gender?” in the 2016 and 2017 surveys, we aggregated responses as best we could. Responses meant to obscure respondents’ gender entirely are aggregated in “prefer not to answer.”

Powered by WPeMatico

Using WordPress 4.9’s Customizer Updates to Enhance Your Web Designs

WordPress 4.9 released with a much needed (and much longed-for) feature: drafting, scheduling, and previewing theme changes. For a while now (since WP 3.4), the customize option in our admin dashboards has given us a modicum of control over our sites, but 4.9 really skyrocketed the feature into one of Core’s best. If you haven’t played around with the WordPress 4.9 customizer updates, here’s a rundown of what to expect.

Keep in mind that unlike the upcoming WordPress 5.0 with its launch of Gutenberg as the primary editor, WP 4.9 might seem a little lacking. But the real strength of WordPress is not in its flashiness–it’s in the utility it provides users.

And 4.9 is all about utility and quality of life. So let’s dig in and celebrate the small stuff.

Business as Normal…Mostly

When you first head to Appearance -> Customize, things look pretty normal. In all honesty, they are. You won’t see anything different at all than it was prior to 4.9, really. The Core contributors have made sure that over the past few updates the experience with the customizer has become slick and smooth, and they wouldn’t want to break that here.

WordPress Customizer Updates

With the first change, however, you’ll see a small alteration from the normal Publish button that you’re used to. A gear icon will appear when you make even the smallest change. As you can see, I just added the text for Divi to the site title, and the new gear button appeared.

WordPress 4.9 Customizer Updates

And when you open up the gear menu, the real content that came with this update shows up. It may not look like much at first, but it’s a super powerful menu, even though it’s only a handful of options.

WordPress 4.9 Customizer Updates

Three is the Magic Number

You get three new publishing options with the WordPress 4.9 customizer updates. And under that, you get the Share Preview Link section–which is awesome all by its lonesome–which we will discuss in-depth below.

  • Publish
  • Save Draft
  • Schedule

The first option…well, I think it’s pretty self-explanatory. Leave the Publish radial active (or select it after you have saved a draft), and any changes that you make will go live on the site immediately. This is the same functionality the theme customizer has always had. Nothing new here, and nothing to see here.

The cool stuff is with drafting and scheduling.

Drafting

When you use Save Draft the button up top changes, and you can leave the customizer at any point and come back. Until you select Publish again, nothing you do will actually hit the live site. You will be able to go in and out of the customizer as much as you want, as long as you keep your changes saved as a draft.

More than anything else, drafting is the most-needed change in the update because you can now avoid having multiple windows/tabs open at the same time. I used to have to keep one customizer tab open, while another was open to mess around in the rest of the admin dashboard.

No more! I can finally save a draft. If you use the customizer in your daily routine, your workflow just got better.

WordPress 4.9 Customizer Updates

Scheduling

The schedule function works pretty much the same way. The main difference being that you set a date and time in the future for the changes to go live. You are still drafting, yes, but you are giving yourself some time to make edits, proof the copy, and make final changes. You may have a lot of reasons to do this, and it’s a really important part of the update.

WordPress 4.9 Customizer Updates

By including this scheduling and drafting functionality in the WordPress Core, the developers have essentially given users a premium feature of many established hosting companies: staging sites. No longer will users have to pay to show off their work before it’s live on the interweb!

Between saving drafts and scheduling, designers and developers can work together to make sure that every change they want and need is exactly right before it goes live. And even better, a major function for staging sites comes in the ability to share a live site link with anyone who may need to checkout changes.

You Can Do That, Too!

Yep! You sure can! 4.9 lets you copy a link that you can send to anyone to check out what you’ve done before it goes live.

WordPress 4.9 Customizer Updates

Your editor can proofread your copy so you can discuss changes, your designers can make sure you’ve transferred their PDF glory into pixel-perfect CSS, or you can just show off your work to your adoring fans in a tutorial without altering your money-maker. Whatever you need the preview link for, you got it. All without any of the extra muss and fuss that usually comes with making preview links.

WordPress 4.9 Customizer Updates

It’s amazing that live site draft previews have been incorporated into Core, really. They are normally a pretty limited feature that only comes when you specifically work toward them. You either need to have a dev site set up with limited access for people, a local server (such as MAMP or Flywheel’s Local), or use a host that provides staging areas.

By putting this particular ability in all WP users’ hands, it opens up a lot of options for even better (and more efficient) development and design to happen.

Is That All?

What do you mean “is that all?” Isn’t that enough? The answer is a resounding yes. Absolutely, it is.

Like I said before, this is not the most controversial, flashy, or even publicized feature WordPress has ever included. But it really is one of the most useful. Part of the design strategies driving WP these days is making sure that features that might have been missing from Core that provide basic quality-of-life functionalty get implemented.

With the WordPress 4.9 customizer updates, you can see that the strategy is playing out very nicely.

Have you been able to try out the new 4.9 additions yet? What do you think, and have they made your life just a little better?

Article featured image by ibrandify gallery / shutterstock.com

The post Using WordPress 4.9’s Customizer Updates to Enhance Your Web Designs appeared first on Elegant Themes Blog.

Powered by WPeMatico