WordPress.com Experiments With Allowing Business Plan Customers to Install Third-Party Plugins and Themes

One of the most important things that distinguishes self-hosted WordPress from WordPress.com is the ability to install custom themes and plugins. A recent change to WordPress.com’s Business Plan removes this limitation, allowing customers to install most third-party plugins and themes.

WordPress.com Comparison Chart
WordPress.com Comparison Chart

In a WordPress.com support thread created in February, a user asked how to install plugins on WordPress.com. Volunteers responded with the usual explanation that plugins can not be installed on WordPress.com and that they would need to use the self-hosted version of WordPress instead.

A few days ago, Valedeoro, a member of WordPress.com’s support staff, updated the thread announcing that third-party plugin support had recently been opened to customers on the WordPress.com Business Plan.

Quick update on third-party plugins: We’ve recently opened the opportunity to install plugins for Business Plan users. Keep in mind that most features are covered already by the plugin included in your WordPress.com account, so it is possible that you do not need any additional plugins.

Further into the thread, a second support staff member acknowledged that WooCommerce can be installed. A third support staff member confirmed that the ability to install most third-party plugins and themes was added to the Business Plan.

Details of the changes have not been published yet. “We’re still in an experimentation phase,” Automattic representative Mark Armstrong said. “It’s something we’ve rolled out to Business Plan users over the last couple weeks, and we’re looking forward to continued testing.”

This move would place WordPress.com squarely in the managed WordPress hosting space. If installing custom plugins and themes becomes a permanent feature, it will be interesting to see how it affects the confusion between WordPress.com and self-hosted WordPress.

Comparing conditional logic in WordPress forms

Conditional logic is the key to online forms

Physical forms don’t ever feel as imposing as web forms. I don’t know why that is, but when I get a form at a doctor’s office, for example, that form collects tons of data on a single sheet of paper and I don’t feel stressed.

But when people design forms on your websites, because of the way most forms are designed, the form that might collect the same data ends up taking up the virtual space of three pages.

How do you get around this problem? You only show the fields that you need to. In other words, you do the thing that you can’t do on paper forms – you dynamically present (using conditional logic) only the fields that are appropriate to each user.

Because this is a critical feature of online forms, it’s no surprise that many WordPress form plugins support conditional logic.

These plugins offer it as a key part of their main features:

These plugins offer it as a part of their “pro” offering, or as an add-on:

Regardless of whether it’s an add-on or as part of the plugin, you’re going to want support for conditional logic in your WordPress forms because they make everything better.

The Cost of Conditional Logic in WordPress Form Plugins

Here you see the cost of the plugin (and added add-on, if needed) to do an apples-to-apples comparison.

Plugin Name  Add-on/License required?  Plugin Cost  Add-on/License  Total Price
Ninja Forms Add-on $0 $49 $49
WPForms License (Basic) $39 $0 $39
Formidable Pro License (Personal) $49 $0 $49
Gravity Forms License (Personal) $39 $0 $39
Caldera Forms None $0 $0 $0

(Note, this is not a sponsored post but some of the links above are affiliate links which means if you buy a product from these links, I will receive a small thank you, in the form of affiliate revenue. As I’ve articulated before, this doesn’t impact my stated opinions in this post. If you’re uncomfortable with these links, you can type the names of these plugins directly into your browser and find them via Google.)

Comparing their support for conditional logic

The good news is that each of these WordPress form plugins support conditional logic in one way or another. Some offer more nuance than others, and I’ll show you that below. But let’s start with the good news – if you use any of these plugins, you’ll be in a pretty good spot – especially because the cost of buying them is under $50.

There are three kinds of conditional logic I normally look for. Here they are.

Displaying Questions (Fields) Conditionally

As I started this post, I talked about the need to show or hide fields based on another question that was answered. All of the plugins supported this feature. Some of them did it directly in the form field control, while others did it in a central place.

WPForms did it directly as you were building the field in your form.

wpforms-conditional

This approach makes it easy to configure and also ensures that I can understand the logic really well. It supports both “and” and “or” functions (show this field if this option says this AND this other field says that, OR show this field if this option says something else).

This approach is the one multiple form plugin vendors choose and the rule groups that WPForms supports is powerful because it supports a lot of variable expressions.

Another way to do the “or” statement is how Formidable Pro does it, with the option for “all or any” in their conditional logic processing.

formidable-conditionals

What you notice with the “any” option is that you can mix and match multiple fields. In this case what I’m doing is saying that I want a particular field / question to show up if a) the initial question is answered one way, or b) a different sub-question is answered a specific way.

This kind of logic chaining between multiple questions is powerful (as in the case of the example I’m using for all these forms) because I can daisy chain the logic to fields that may not even be visible to everyone.

It looks like this:

  • Who you trying to contact > sales > show sales question
  • Who you trying to contact > product > show product question
  • Who you trying to contact > support > show support question, also show if product was selected with support option chosen

Of course, this brings up a challenge dynamic that wasn’t solved by many of the plugins.

When a person changes an earlier option, and starts the logic again, do you support a way to hide the previously shown question?

Most of the plugins create a single “show” or “hide” logic at the start of their conditional logic articulation. This means you don’t have the ability to create a secondary “hide” path once you’ve started with the “show” logic.

Only Ninja Forms supports this – because they aren’t doing the conditional logic within the field creation. They have it centrally managed like Caldera Forms, but with more advanced capabilities.

Ninja-Conditional

Sending Email Notifications Conditionally

All of the plugins let you manage conditional emails based on form field selections. WP Forms, Ninja Forms, and Formidable Pro all make it pretty easy (see wpforms below).

wpforms-notifications

The UI for Caldera seems a bit more complex than it needs to be. Mostly because they separate the form processing from the actual email notification. So you have to create a form processor and then work out the body of the email separately.

caldera-notifications

But it’s Gravity Forms that adds a tiny bit more to the process. At the bottom you see the standard conditional logic to determine if you should process this email or not. But at the top, they add some additional conditional logic for the recipient. This means you could say, not only send it if it goes to sales, but based on other fields, send it to different sales people.

While you could do this with the others, you’d be creating a lot more entries in a more complicated way.

gravity-notifications

Form Completion Routing Conditionally

The third conditional logic feature I like is what I get to do when a form is completed (or submitted). It’s post-form processing and while every plugin gives me the ability to either show a message, redirect to a url, or show a specific page on the site, almost none of them let me use conditional logic in that selection.

They just give me those three options. And of course, I want more.

Thankfully, lots of conversations almost a year ago with the Ninja Forms guys have resulted in the power I like.

ninja-routing

This is where you see the advantage of centralizing your conditional logic. They can offer me conditional logic on form fields, on emails, and even on routing – making it really powerful.

How do you choose?

The question of which plugin you choose for your WordPress forms is always going to be based on a variety of factors that are important to you.

If you want to spend absolutely no money, you could go with Caldera Forms, but I find the UI the least pleasing of all of them. That said, some people would make that trade-off every day.

If you want to get the most for the money you spend, while also being really price-focused, WP Forms offers a ton of value at $39 and their conditional logic is really solid. Outside of page routing on completion, it’s UI is clean, easy to read and use, and beats everyone else on price.

If you want all the conditional logic I like, then you’re going to want to take a look at Ninja Forms. But you should note that when you start down this route, you’ll end up needing to pay for other features (because many of their features come as paid-for add-ons).

The best news is that you can use any of these and still get most of the conditional logic you want or need.

The post Comparing conditional logic in WordPress forms appeared first on ChrisLema.com.

JavaScript Chat Agenda for May 16th

Join us for our weekly JavaScript Chat on May 16, 2017 at 13:00 UTC, where we will discuss:

If you have anything to propose to add to the agenda or specific items related to the above, please leave a comment below. See you there!

#agenda, #javascript

WordPress Is Now on HackerOne, Launches Bug Bounties

WordPress now has its own official HackerOne account where security researchers can responsibly disclose vulnerabilities to the security team. The project’s page was previously listed under Automattic’s profile before HackerOne launched its free community edition for open source projects. WordPress has now transitioned to its own account, which also includes sister projects BuddyPress, bbPress, GlotPress, and WP-CLI, along with all of their respective websites.

The WordPress Security team launched its HackerOne profile privately at first and had been inviting reporters to use it when they reported security issues via email. Having the profile public makes it possible for the team to work together on triaging the issues that are submitted. WordPress Security Czar Aaaron Campbell said the new system will reduce the time spent on responding to commonly reported issues, allowing the team to spend its time more effectively.

“We have about 40 people with access to triage reports, although, like most volunteer groups, not everyone is usually triaging at the same time,” Campbell said.

The project also launched bug bounties to reward reporters for responsibly disclosing security issues and Campbell said the team has awarded more than $3,700 in bounties to seven different reporters.

“So far bounties have ranged from $150 to $1,337,” Campbell said. “Anything that qualifies for a cash bounty will be $150+. We have a few swag bounties (hoodies) for really small things that will be going out soon as well (finishing getting everything set up with the swag store to do this now).”

Campbell confirmed that $1,337 is not the upper limit of the bounties and that there are bugs that could qualify for larger bounties.

“Bounties are calculated based on bug severity, the product or site it’s on (WordPress core being weighted more heavily than say the swag store), and also the quality of the report,” Campbell said. Automattic is sponsoring the bounty payouts on behalf of the WordPress project.

Learn the Business Side of Running a Premium Plugin Shop with Making Pro Plugins


Learn the Business Side of Running a Premium Plugin Shop with Making Pro Plugins →

If you’ve ever wanted to offer a WordPress plugin on the open market, you’ll know a lot of questions come right up. “How?” and “Is my code good enough?” and “Will I immediately drown in support tickets?” are just three.

Brian Hogg’s course is just what the doctor ordered. It’s a business-oriented look at authoring and selling pro plugins. It comes highly recommended by its current customers, and is precisely the kind of know-how that you should soak up before sinking your first 500 hours into a new business. Sign up for a free lesson before making a purchase (link at the bottom of the page) if you want to get a feel first.

An Introduction to WordPress Themes and Plugins (Plus How to Install Them)

The core WordPress platform provides a decent range of options for personalizing your website. It also enables you to add to and edit your site’s code in any way you see fit. However, if you want true flexibility but don’t have the time or experience required to make changes by hand, you’ll need some additional tools.

In other words, you should check out the extensive world of WordPress themes and plugins. These are add-ons that enable you to customize how your site looks and functions, and there are thousands of them available. No matter what you want to do – manage a forum, build an online store, or completely change the design of your site – there’s a WordPress-specific tool out there that will help you accomplish the task with minimal fuss.

If you don’t know anything about themes and plugins yet, don’t worry. To help you out, we’ll explain what they are, where to find them, and how to begin using them to your advantage. Let’s start with the basics!

What Are WordPress Themes and Plugins?

The Total WordPress theme.

Total is an example of a WordPress theme that can help you customize the appearance of your site.

Before we discuss how to find and install themes and plugins, lets talk about what they are. After all, if you’re new to WordPress, you might never have heard these terms before.

In a nutshell, themes and plugins are individual pieces of software that function as add-ons to the core WordPress platform. You can install a theme or plugin to get access to additional features. A WordPress website needs a theme to exist, but it doesn’t need any plugins. (That said, the likelihood of you eschewing plugins is extremely remote.)

A theme is an add-on that controls your site’s appearance – what it looks like and how it’s laid out. Some themes are very simple and might only change basic things about your site’s design, such as colors and fonts. Many themes, however, offer a variety of new layouts and styles. Either way, you usually have the ability to customize your theme to suit your needs. You can find flexible themes that are adaptable to many situations (such as our very own Total), or you can look for a theme with options and layouts specific to the type of site you’re creating (such as a business theme or a wedding theme.)

If you want to change something about the way your site functions, however, you’ll need a plugin. The purpose of a plugin is to add new features or functionality to your site (or expand on what already exists). No matter what you want to do with your site, there’s almost certainly a plugin that can make it possible. Some enable simple changes, such as adding new widgets to your back end, while others give you access to entirely new features, such as a calendar or an online store. There are also plugins that can help you with practical tasks like ensuring your site’s security.

It’s impossible to describe all the different theme and plugin options out there. Now that you understand how these crucial tools work, however, let’s talk about how to find the ones you want.

Where to Find the Best WordPress Themes and Plugins

There are thousands of themes and plugins available online, and they come in many varieties – free and premium, simple and complex. You can often find the ones you need by conducting a simple search. However, since anyone who wants to can build a theme or plugin, it can be difficult to know which ones are reliable and won’t negatively impact your site.

That’s why it can be helpful to visit a directory where themes and plugins are listed, rated, and commented on. You can also go straight to the website of a reputable company that is known for creating dependable add-ons. Here is just a sampling of some excellent places to look for themes and plugins:

If you’re not sure where to start, we’d recommend checking out the official WordPress directories first – everything there is completely free, and you can view ratings from other users. Also, take a look at our previous posts on how to buy a theme and how to choose the best plugin for advice to guide you in your search.

How to Install WordPress Themes and Plugins

If you’re looking for add-ons from WordPress.org, you can install themes and plugins directly from the WordPress back end. Otherwise, you’ll first need to download the file you want and save it to your computer, then follow the relevant instructions below. The file should be zipped – don’t extract it!

Installing a WordPress Theme

To install a theme, first navigate to Appearance > Themes in your WordPress back end. Then, click on the Add New button at the top of the screen:

The Themes section of the WordPress back end.

On the next screen, click on the Upload Theme button and select Choose File. Navigate to the place where you saved the zipped theme file, and open it. You’ll be taken back to the Add Themes screen, where you can select Install Now:

The option to install a new theme.

The installer will take a moment to run, after which you’ll get a message telling you that the theme has been successfully installed. At this point you can preview the theme, or choose Activate to start using it right away:

A message stating that your theme was installed successfully.

That’s it! Your new theme is ready to go.

Installing a WordPress Plugin

Plugins are installed in essentially the same way as themes. Start by navigating to Plugins and choosing Add New at the top of the screen:

The Themes section of the WordPress back end.

On the next screen, click on the Upload Plugin button and select Choose File. Find and open the zipped plugin file on your computer, then click the Install Now button:

The option to install a new plugin.

After a moment, a message will display telling you if the plugin was installed successfully. At this point, simply click on Activate Plugin:

A message stating that your theme was installed successfully.

Your new plugin is now ready to use! Some plugins may require additional setup once activated – check the page you downloaded the plugin from or the developer’s website for more information if necessary.

Conclusion

The ready availability of themes and plugins is one of the most compelling reasons to use WordPress. The core platform is pretty fantastic on its own, but when you start including themes and plugins, you suddenly have access to nearly limitless options. No matter the type of site you want to create, the wider world of WordPress offers a tool to get the job done – most likely in a simple and affordable way.

To start taking advantage of WordPress themes and plugins, you’ll first want to check out a reliable directory. Some excellent options are WordPress.org itself, ThemeForest and CodeCanyon, and our own website. Make sure you know how to select the best theme and choose the right plugin for your needs. Then you can simply follow our directions above to install your new theme or plugin, and you’ll be all set!

Do you have any questions about how to get started with WordPress themes and plugins? Post your questions in the comments section below!

WordPress Now on HackerOne

WordPress has grown a lot over the last thirteen years – it now powers more than 27% of the top ten million sites on the web. During this growth, each team has worked hard to continually improve their tools and processes. Today, the WordPress Security Team is happy to announce that WordPress is now officially on HackerOne!

HackerOne is a platform for security researchers to securely and responsibly report vulnerabilities to our team. It provides tools that improve the quality and consistency of communication with reporters, and will reduce the time spent on responding to commonly reported issues. This frees our team to spend more time working on improving the security of WordPress.

The security team has been working on this project for quite some time. Nikolay Bachiyski started the team working on it just over a year ago. We ran it as a private program while we worked out our procedures and processes, and are excited to finally make it public.

With the announcement of the WordPress HackerOne program we are also introducing bug bounties. Bug bounties let us reward reporters for disclosing issues to us and helping us secure our products and infrastructure. We’ve already awarded more than $3,700 in bounties to seven different reporters! We are thankful to Automattic for paying the bounties on behalf of the WordPress project.

The program and bounties cover all our projects including WordPress, BuddyPress, bbPress, GlotPress, and WP-CLI as well as all of our sites including WordPress.org, bbPress.org, WordCamp.org, BuddyPress.org, and GlotPress.org.

How to Create a Wedding Announcement Homepage With Divi

This post is part 1 of 5 in our miniseries How to Create an Elegant Wedding Website with Divi. In this series, we’ll guide you through the most important parts of creating a wedding website for yourself or a client with Divi.


Setting up a wedding announcement page is a creative way to let your guests know you’re getting married. By providing them with your website URL, they’ll stay in touch. They’ll also be able to see the wedding details online whenever they want to.

Let’s have a look at the homepage layout that we’re going to help you build step by step:

Creating Your Navigation Menu

We’ll show you exactly how to create an announcement page, a gallery page and a giftlist page for your wedding website. This first post is dedicated to making the announcement page. But before we go there, we want to make sure guests can find their way through your website smoothly.

That’s why you’ll have to make a proper and elegant navigation menu first.

Start by going to Divi > Theme Options > and upload the logo you’d like to use throughout your whole website.

Click Save Changes and move on to the pages of your WordPress website. Add a new page where you’ll be creating the announcement page. Do the same thing for the gallery page and gift list page that we’ll show you how to create in the upcoming posts.

Let’s leave the content empty for now and go to the Theme Customizer of your website to modify the navigation menu. Start by adding the pages of your website to your menu by going to Menus > Add a menu > Add the pages to your menu. This menu should be the primary menu of your website.

Next, go to Header & Navigation > Primary Menu Bar and make the following changes:

  • Menu Height: 66
  • Adjust the Logo Max Height depending on the dimensions of the image
  • Text Size: 16
  • Letter Spacing: 2
  • Font: Raleway Light
  • Font style: Bold
  • Text color: #9b7461
  • Background color: rgba(155,116,97,0.13)

Now, go back to Header & Navigation and change the header style to ‘Centered’ within Header Format.


Save & Publish the changes you made.

Get Started on the Announcement Page

The website has four sections, and each of them contributes its value to the website – making your wedding announcement complete. We’re going to explain each section in detail, and we’ll show you how exactly you can create the same design as the layout shown above.

Hero Section (Including Countdown)

The first part of the design is the header. We decided to make guests feel immediately interacted with the website and the wedding by putting a Countdown Module in it. Inside the Divi builder, the header section looks like this:

We’re going to use a standard section with a full one row in fullwidth modus in this part of the website. In the row section, you’ll have to add three modules; two Text Modules and one Countdown Module. The Countdown Module is located in the middle of both text modules.

Get Started With the First Text Module

Start by adding a Text Module to the row. Write the text you want to use, change the Text Orientation to ‘Center’ and apply the following changes to the Advanced Design Settings tab:

  • Text Font Size: 100px (desktop), 80px (tablet), 66px (phone)
  • Text Font: Tangerine
  • Text Color: #9b857b

In the same tab, scroll down and change the margins of your Text Module by adding ‘10%’ to the top and ‘5%’ to the bottom.

Click on Save & Exit

Counting Module (Desktop)

Add a Countdown Module below the Text Module you just created. In the General Settings tab, add the date and time of the wedding and change the background color to ‘#fae4de’. We’ll use this countdown on desktops only, go ahead and disable it for tablets and phones.

Move on to the Advanced Design Settings and make the following changes:

  • Numbers Font: Tangerine
  • Numbers Font Size: 74px
  • Numbers Font Color: #9b857b
  • Numbers Line Height: 70px
  • Label Font: Raleway Light
  • Label Font Size: 14px
  • Label Text Color: #9b857b
  • Label Line Height: 25px

In the same tab, scroll to the bottom and adjust the Top Custom Padding to ‘10%’ and the Bottom Custom Padding to ‘10%’.

Next, go to the third Custom CSS tab and add the following code to the main element:

max-width: 50%;
margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Your countdown will now look exactly like the one in the layout image we’ve shown you above.

Countdown Module (Tablet & Phone)

Now go ahead, clone the previous countdown you made and disable it on desktop (instead of tablet and phone). Next, make the following changes to the module:

  • Numbers Font Size: 72px (both tablet and phone)
  • Numbers Line Height: 70px
  • Label Font Size: 14px (tablet), 12px (phone)

And change the code in the Main Element of the CSS tab into:

margin-left: auto;
margin-right: auto;
box-shadow: 0px 12px 50px #a9a9a9;

Second Text Module

Now, under the Countdown Module, add another Text Module. In the General Settings tab, change the Text Orientation to ‘Center’. Continue by adding the groom and bride’s name and going to the Advanced Design Settings tab.

In the Advanced Design Settings, make the following changes:

  • Text Font: Tangerine
  • Text Font Size: 50px  
  • Text Color: #9b857b
  • Text Line Height: 1.7em

Continue scrolling in the Advanced Design Settings tab to Custom Margin and add ‘10%’ to the top margin.

Divider

The last part of this hero section is the divider. Add a divider and change the color in the General tab to ‘#9b857b’. Make sure the divider is made ‘visible’ as well.

Next, go to the Design tab and make the Divider Style ‘Solid’, the Divider Position ‘Top’, change the divider weight to ‘1px’ and hide on mobile.
Move on to the CSS tab and add the following code to the main element:

margin-left: auto;
margin-right: auto;
width: 30%;

Click on Save & Exit. You finished the first section of the website, which should look like this:

We can now move on to the second part of this layout where you can begin telling your story to the guests.

Storytelling The Announcement: Second Section

This second section has two symmetric rows that form one part of the wedding homepage. This part has a slightly smaller width that creates a little bit more perspective on your website.

First Row of The Section

Start by making a standard section, change the background color to ‘#fffaf6’ and add ‘5%’ to the Bottom Padding. Next, add a two-column row to this section.

Next, open the row settings. In the General Settings, select ‘YES’ to use custom width, change the unit to percentage and fill in ‘90%’. Scroll down in the same tab, activate Gutter Width and hide for phone & tablet.

Then, go to the Advanced Design Settings tab, equalize the column heights and add ‘#9b857b’ as the background color of the first column. In that same tab, change the column 1 padding to ‘5%’ top, ‘10%’ right, ‘5%’ bottom and ‘10%’ left.

For the second column, we won’t need to set up a background color but upload a background image instead.

Text Module

Now, add a text module in the first column of the row. In the General Settings tab, put the text orientation to ‘Center’ and type the text you want to share in the text box. Then go to the Advanced Design Settings tab.

In the Advanced Design Settings tab, make the following changes:

  • Max Width: 500px  (for desktop only)
  • Text Font: Tangerine
  • Text Font Size: 44
  • Text Color: #fffaf6

And add 5% to the bottom padding.

Press Save & Exit and add another Text Module. Make the Text Orientation ‘justified’. Continue by making the following changes to the Text Module in the Design Settings:

  • Max Width: 500px 
  • Text Font Size: 14px
  • Text Font: Raleway Light
  • Font Style: Bold
  • Text Font Color: #fffaf6
  • Text Line Height: 1.7em

Press Save and Exit.

Clone The Previous Row

Now, clone the row you just created. The cloned row will automatically be placed beneath the one you just created. But in this case, we need the modules to be on the opposite side. Place the two text modules in the second column instead of the first.

Then, open the row settings and add a background image to the first column. Delete all the padding settings that we’re made in the first column padding and place them in the second column padding.

Press Save & Exit and you’re good to go.

Row for Phone & Tablet

Create another two-column row and hide for desktop.  Make the row fullwidth and change the gutter width to ‘3’.

Next, go to the Design tab and upload a background image for both columns and make the following changes to the Custom Padding of both columns:

  • Top: 5%
  • Right: 10%
  • Bottom: 5%
  • Left: 10%

After having added this second section, this is how your layout should look like right now:

Best Man, Maid Of Honor, Bridesmen and Groomsmen

Why not put the most important people in your life on your wedding website? Giving away who the best man, maid of honor, bridesmen and groomsmen are going to be, can give that little extra boost to your website. 

To add this part to your site, start by adding a new standard section to your page. Within that new section, you’ll have to create three rows with different columns and modules. 


Now, once you created the section, which is a standard section, give it the following background color: ‘#fae4de’. You won’t have to change anything else in the section’s settings so you can press Save & Exit.

Creating The Text Module

Next, create your first fullwidth row. The only thing you’ll have to put in there is a Text Module. Open the Text Module, fill in the text box and select ‘Center’ in the Text Orientation field.

Then go to Advanced Design Settings, set the Text Font to ‘Tangerine’,  Text Font Size to ‘100px’ (desktop & tablet) and ‘68%’ (phone) and the Text Font Color to ‘#9b857b’ . Scroll down the same tab and change the margins to ‘10%’ top and ‘5%’ bottom.

Click on Save & Exit. Your first module and row are now done. 

Add another row, in this case with two columns and add 5% to the top and bottom margin. Next, add a person module in the first column of the row.

The Image And Person Module

Moving on, open the settings of the person module. Upload an image, enter the URL of social media channels in the fields and write a little bit about them in the text box. If you’re not sure what dimensions your images should have, take a look at this blog post.

Next, go to the Advanced Design Settings and make the following adjustments:

  • Header Font: Raleway Light
  • Header Font Style: Bold
  • Header Font Size: 14
  • Header Text Color: #9b857b
  • Header Line Height: 1em
  • Body Font: Raleway Light
  • Body Font Style: Bold
  • Body Font Size: 14
  • Body Text Color: #9b857b
  • Body Line Height: 1.7em

Open the settings of the person module and go to the CSS tab. Within the Member Image field, add the following code:

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
margin-left: 5%;
margin-right: 5%;

Now go ahead and clone both the Image and Person Modules and put them in the right column.

Continue by adding a new row with four columns and clone the Image and Person module again (four times) and put them in each column. The code and settings we used the first time will apply to all of them.

Your layout should look like this by now:

Where and When

This is the last part of your wedding homepage, where you’ll inform your audience about the place and time of your wedding. For this section, we’ll need a row with 3 columns (1/2, 1/4, 1/4) with the following background color: ‘#fffaf6’.

Adding a Map

In the first column of this section, add a Map module. To be able to use the Map feature, you’ll have to enter a Google API key. If you don’t have an API key, read here how to make one. Enter the address of your wedding and let the module find the location. To create a pin on your map, add a new pin and put the location again, the pin will then show up on the map.

In the other columns, we’ll be making use of text modules and blurbs. Add a text module and set the settings the Text Orientation in the General Settings to ‘Center’. Next, go to the Advanced Design Settings and make the following changes:

  • Text Font: Tangerine
  • Text Font Size: 50px
  • Text Color: #9b857b
  • Text Line Height: 1.7em


The settings of this text module apply to the text modules in both columns.

Blurb Module

Under the Text Module, add a Blurb Module. Choose the location icon, change its color to ‘#f9c8b8’, add the location in the text box and change the Text Orientation to ‘Center’. Then, go to the Advanced Design Settings and make the following changes:

  • Icon Font Size: 42px
  • Body Font: Raleway Light
  • Font Style: Bold
  • Body Font Size: 14
  • Body Text Color: #9b857b
  • Body Line Height: 1em

In the next column, do the exact same thing. Only change the blurb icon into a clock and add the ‘when’ details in the text box.

That’s it. Your layout should now look as smooth as the layout in this tutorial:

Next up

In the second part of this miniseries, we’re going to see how you how to create a gallery page dedicated to sharing pictures with your guests after the wedding. If you have any comments on this tutorial, or if you have any requests for future tutorials; make sure you leave a comment in the comment section of this blog post so we can get back at you!

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 Wedding Announcement Homepage With Divi appeared first on Elegant Themes Blog.

The Most Important Elements of Providing Superb Customer Support

Why is SouthWest Airlines so well known for their outstanding customer service?

Sure, they get most of the basics right. Minimizing delayed and cancelled flights, staying affordable for the average Joe and maintaining strategic hubs all helps them compete with the likes of United, Delta and American.

But there’s more to it than that.

SouthWest lets people pick their own seats on every flight, making the entire process less formal and better suited for the laid back way most people want to fly.

There are also countless stories of SouthWest going above and beyond for their customers.

If you’ve travelled during the holidays, you know SouthWest employees celebrate them unapologetically.

And this doesn’t just make customers happy. It fuels a financially successful company.

swemployees

It’s true – the operations of a successful airline most likely don’t directly apply to you. But providing good customer service in order to increase customer loyalty and improve financial gains is not as different as you’d think for you and one of the most well-known airlines in the world.

Whether you’re a freelancer or you run a small business, these elements, when combined correctly, will help catapult you forward.

Respond Quickly

A key to making your customers feel the love is to get back to them quickly when they reach out to you.

One way to make sure customers know they’re being taken care of is to set up an auto-reply for your inbox. Just receiving confirmation that their ticket has been received goes a long way.

customer support

If you’re not a big fan of automated responses, no problem. Making sure someone is managing your help desk in real-time (or at least checking in on it regularly) and replying to tickets within a few hours of receiving them should work wonders.

Reply While or Before Addressing The Issue

If you receive a ticket, solve it, and reply 12 hours later telling your customer you’ve addressed the issue, that’s half a day they’ve spent in the unknown!

But if you reply after 1 hour saying you’re taking care of the issue and get it done 11 hours later, they’ve spent half a day knowing you’ve got their back.

customer support

Taking advantage of this psychological concept is essential. The more time you can get customers thinking positively about you, the better off you’ll be.

Set Expectations

The easiest way to make customers happy is to over-promise and over-deliver.

That’s hard to do when you’re a small business, so if you have to settle for under-promising and over-delivering, you’ll do just fine.

If you’re expecting an issue to be fixed in 48 hours, don’t tell a customer it will be addressed in the next few hours. Much better to give them a 48-hour timeframe and get their issue fixed in 36 hours.

Depending on what kind of support you’re providing, you’ll want to be clear on your website and in your introductory materials what kind of support your customers can expect. That way, they know what they’re getting into before they sign up.

Personalized Everything

“Your edits are done!”

This doesn’t suggest to your audience that you care much about them. In fact, it makes them feel like their just another customer and not worth the time of a personal response.

Always use first names when addressing customers. They’re real people and deserve to be addressed that way! You should also include a screenshot or link in communication when appropriate. That allows your customer to check out their changes right away and will increase the confidence they have in you.

I know exactly what you’re thinking. You don’t possibly have time to answer all these emails personally, do you?

If you’re using the right software, you sure do. We’re in love with Teamwork Desk and their canned messages and auto-filled variables make personalizing every email we send a breeze.

customer support

Educate Your Customers

It doesn’t matter what industry you’re in; customers who just don’t get it are out there.

So if you’re running a help desk, you need to plan for people not understanding the best ways to work with you.

There are a couple ways to tackle this issue:

Self-Help Documentation

Build a support hub for your business where customers can get easy answers to frequently asked questions. This means fewer support tickets for you and faster resolution time for your customers.

Our friends over at AffiliateWP do it right. Their customers can find answers to their own questions and find a solution to their problem without ever speaking with a customer service rep.

customer support

And if they really feel stuck, they can always contact support as a last resort.customer support

Onboarding Documentation

When new customers sign up, be sure to send them all the information they need to work with you in bite-sized pieces. We provide ongoing WordPress maintenance for our customers, so we send everyone an automated drip email campaign to make sure people have the resources and best-practices to interact seamlessly with us.

customer support

Put Smiles on Faces

This is something we’re big fans of at WP Buffs but it’s going to depend largely on the culture you’re trying to promote and the feeling you want to convey to your customers. In my humble opinion, if you’re not going to have a good time running your business, then what’s the point?

customer support

Speak The Same Language As Your Customers

Are your customers technical? Then feel free to include more technical jargon in your communication.

Do your customers not care or understand the technical aspects of what you do and just need their problem fixed? Shut down the developer-speak and dumb it down for them.

Speaking your customers’ language is the key to communicating with them in a way that makes them feel taken care of. If you have the technical wherewithal, do what ManageWP does with their support and give customers the option.

customer support

Schedule Regular Check-Ins

What’s the one thing that customers love most?

When you go above and beyond for them, no questions asked.

That means following up with them without having to be reminded.

Use the functionality provided by your help desk to tag tickets for a follow up if they haven’t been solved or closed.

Teamwork’s Smart Inboxes lets us review all open tickets during our Monday Reviews and follow up on each and every one of the to make sure all our customers (and potential customers) know that we don’t leave anything hanging.

customer support

Hire The Right People

This is a hard one for any small business.

You need people with the skills necessary to get the job done but the personality required to fit in well with where you want to go culture-wise.

Often times, someone with both qualities are out of your price range. Woof.

Unless you’re working on something really technical, opting for personality over experience is usually the way to go for most small operations.

  • Let’s say you hire an experienced, proven employee for $80,000 / year. They end up clashing with you and the vision you have for the future of the business. 6 months and $40,000 later, they leave for another job.
  • If you’d brought someone less experienced in on a $40,000 / year salary who fit into your company’s culture, you’d be much better off! After 6 months, $20,000 in salary + $5,000 for training yields an employee who costs $25,000, can do the job and is a loyal compatriot to your company.

I’m not against hiring a more expensive, seasoned, experienced employee. The fact is that during the early days of any startup, a less expensive hire may be necessary.

Wrapping Up

These are some aspects of customer service that our company takes to heart. You probably know by know, the internet is 95% garbage. As is true with any advice you hear on a podcast or read in a post like this one, do not take what I’ve said as the only way forward.

The most important thing you can do now is implement what you think will work best for your business, experiment with it for a set time period and succeed or fail quickly. That way you can keep what works, toss what doesn’t and spend more time on the things that make your freelancing business or small company successful.

Invest heavily where you see a return-on-investment and keep moving forward!

The post The Most Important Elements of Providing Superb Customer Support appeared first on ManageWP.