Creating Efficient Routines for your Divi Web Design Business

Welcome to part 1 of 5 of our series Organizing and Taking Control of your Divi Web Design Business. In this series, we’re exploring several tactics, tools and strategies that will help you overcome the daily struggles that we all face as Divi Web Designers. From optimizing your daily routines, to creating systems and processes, to providing the best web design experience for your clients; we’re providing actionable items and steps that you can implement immediately with the purpose of helping you take control of your Divi Web Design business whether you’re a solo freelancer, a small agency or a remote team.


Taking control of your business starts with taking control of your time. And a great way to take control of your time is to create daily and weekly routines to ensure that YOU are running your business and that your business isn’t running you. In this post, we’ll explore some practical, actionable routines that you can apply to your daily and weekly web design work schedule!

Before diving in, here’s a quick snapshot of this series so you can know what to expect:

  1. Creating Efficient Routines for your Divi Web Design Business
  2. Organization Tactics and Practices for your Divi Web Design Business
  3. Effective Client Onboarding processes for Your Divi Web Design Business
  4. Refining and Standardizing your Divi Design and Development Process
  5. How to Effectively Manage Multiple Divi Web Design Projects

Though this series is directed to Divi Web Designers, you can apply many of these tactics and practices to any sort of web design business and any type of work for that matter. Ok, now that you know what to expect and are prepared for the rest of the series, let’s dive in!

Creating Efficient Routines for your Divi Web Design Business

To start, I’m going to share with you two major practices that have drastically helped me in maintaining and taking control of my Divi Web Design business:

Daily Routines and Weekly Routines

In my 6 1/2 years so far of freelance website design, implementing these 2 practices have helped me stay fresh and creative while juggling the administrative and monotonous duties of web design and running a business. Now this may look different depending on your situation – i.e. whether you work from home or at an agency, whether you’re single or have a family and children, whether you’re a solo freelancer or work with a team, etc. But regardless of your situation, it’s important to set routines that work for you to help keep you organized.

1) Implementing A Daily Routine and Schedule for your Divi Web Design Business


During the day to day activities of running a Divi web design business, you’re going to juggle many positions. You’ll be the salesman, IT, support, creative director, HR and yes if you’re working from home, even the janitor 🙂 Setting disciplined daily routines and practices can help you stay on track while juggling the responsibilities of all these roles.

What’s really helped me stay in control of my business is setting parameters in my day. For example; to start the day, I generally don’t look at my phone or a screen in the first half hour. I typically get up, make coffee and read a “real” book or sit outside and just give my mind some time to warm up before taking on the stresses of the day. Some may call this time “priming” or some sort of meditation. Whatever name you choose to give it, it’s a time to organize your thoughts, plan out your day and decide how YOU’RE going to run it before it starts running you. After that, I can getting started on my work and I know what my major goals are for the day.

When it comes to starting the day, you must do what works for you. Some bloggers feel more creative in the morning and like to write first thing. Some designers like to start designing immediately before doing any admin work. And some developers like to take care of any support inquiries before getting to anything else. Personally, I like to get to my email at the start of my work day and clear out as many as possible to help free me up to start my creative work. I take care of the emails that are most urgent and reach out to clients whose projects I may be working on currently, then I can move on to designing and developing.

Here’s an integral part of my daily routine – I generally break my day into 3 or 4 main segments and only work on 2 or 3 projects at most with email/administrative work and quick updates in between those segments. And perhaps the most important daily routine I’ve added recently is allowing at least one hour a day for “reactionary” work. With my Divi Web Design business In Transit Studios, I offer website maintenance, web hosting and SEO services which means I’ve opened myself up to some support roles, so I can’t just turn my email off all day. I am very intentional about having creative time and space but also allowing time in the day to take care of my monthly retainer client issues when they arise.

Before being intentional about this “reactionary work time,” I found myself completely caught off guard when clients had issues. I’d have to break free from a project to handle an issue and it would throw my creativity completely off. Depending on the urgency or situation of course I’ll handle an emergency right away but I’ve found most issues can wait until I get around to them in my reactionary time which is generally in the afternoon. It’s allowed me to focus on my work and if I happen to see an email with a website update or quick fix, I know I’ll be able to get to it shortly and I’ll still look like a rock star for my client. And if there isn’t anything I need to handle in my allotted reactionary time…then there’s some extra time I can spend on a project or an ET blog post 🙂

So, here’s what a typical web design day looks like for me:

  • 8:30a-9:30a (After my morning warm up time and planning out what I want to accomplish in the day) Engage with some awesome Divi people in my Divi Web Designers group. Answer as many emails as possible pertaining to current ongoing projects and take care of any urgent administrative work.
  • 9:30a-11:30a Project One
  • 11:30a-12:30p Emailing round 2, scheduled calls and quick work/additions or updates and any invoicing or administrative work.
  • 1p-3p Project Two
  • 3p-4p Reactionary work time
  • 4p-5p Email wrap ups, quick updates, time in my Divi Web Designers group, etc.

Now of course not every day looks like this. There are meetings, calls and many other things that come into play on a day to day basis. But things can quickly get out of hand if you don’t have a daily routine that YOU set and stick with. This daily routine has helped me manage and balance my business to a very effective level and has not only helped me stay on top of my projects but also to stay fresh for my creative and problem-solving work. So now that we have a good idea of setting up a productive daily routine, the next is…yep you guessed it, a weekly routine!

2) Implementing A Weekly Routine and Schedule for your Divi Web Design Business

I have one weekly meeting every Friday morning with my networking group (which is where nearly 50% of my leads and referrals come from) so I rarely miss that one. The rest of my week is open but can quickly get booked up if I’m not careful and if I let my clients dictate my schedule. For years my meetings were sporadic and booked randomly. Not so anymore. Now I generally schedule all my other meetings and calls on Tuesdays, Wednesdays and Thursdays and rarely more than 2 days in a week. There are numerous reasons for this.

First off, in my experience, Monday’s are generally not great days for website meetings. I’ve found that clients are just getting going with their week and are distracted by THEIR tasks and to do’s which make for some difficulties for a web developer planning out a website strategy, getting feedback, etc. And on the flip side, at the tail end of the week, Friday’s have proven to be fairly unproductive meeting days as well. This is probably a bit more obvious because at the end of the week most people are planning the weekend and are generally checked out by early afternoon. So I keep all my in-person meetings and most calls to the middle days of the week.

One very important lesson I’ve learned when it comes to in-person meetings is to group them together if possible. A one hour meeting, let’s say a half hour away, is roughly a 3-4 hour commitment. Here’s why; think of everything that goes into the time before and after the actual meeting. If you set a meeting at 10a and you have to leave at say 9:30a, you’re more than likely preparing your materials between 9a and the time you leave. If the meeting lasts an hour or so, that puts you at roughly 11a. Take account the drive back and the time it takes to decompress from the meeting and get back into the swing of your tasks. Now it’s closer to noon. Oh and then it’s lunch time. So what sounds like a “short” meeting can turn very quickly to a half day ordeal.

Now if you compile several meetings a week, you can see how 3 or 4 “quick” meetings can take up your whole week and leave you little time for your creative and productive work. So I’ve learned to group them together if possible. I’ll generally try to schedule meetings early if possible and layer them up. So I may have a meeting at 9a with one client, then 10:30a or 11a with another nearby. This allows me to do both meetings and have at least half a day left for my projects and daily routine stated above.

Some final quick tips on maximizing your daily and weekly routines:

  • When setting up a meeting or a call, be specific. Give the client some options to choose from that work for you. For example: don’t ask a potential client “Are you available to meet next week?” Instead ask, “Are you available Tuesday at 9a or 2p or Thursday at noon?” This practice can save you hours of back and forth emails and wasted time trying to find out a time that works for the both of you. Provide 2 or 3 times that work for YOU and see if one of those options happens to work for your client or colleague.
  • When grouping meetings together, be sure not to group them too close together in time or too far apart in distance. Make sure you give yourself a window for travel, cognitive decompression, etc. You don’t want to leave one meeting and head into another with the first meeting too much on your mind. You also don’t want to have to rush around and find yourself in a stressful window of time trying to get from one meeting to another if they’re far apart.
  • When coming up with a daily routine that works for you, make sure it is realistic, attainable and flexible depending on your situation. If things come up and my day doesn’t line up exactly like I planned it, it’s ok – I’ll often reallocate the work that I missed to the next day in my open segments. I’ve found if I stick to a daily routine and focus on one or two projects and have some reactionary work time, it’s amazing what I can get done and can catch up on if I missed any to do’s from the day before.

In Closing

Well I hope the daily and weekly routines that I’ve implemented in my business have helped inspire you to set some routines in your web design schedules! Again these are practices that have worked for me in my solo, work from home business but it may vary depending on your situation. So do what works for you! Do you have any daily or weekly routines that have helped you and your Divi Web Design business? If so, feel free to mention those in the comments below and let us know if these ideas have helped or inspired you!

Coming up tomorrow: Organization Tactics and Practices for your Divi Web Design Business

Organization is the key to your success with any business. Once you have control of your time with daily and weekly routines that work for you, it’s time to focus on organizing the technology and tools you use on a daily basis. We’re going to explore some practical ways to help you stay organized so you can take better control of your Divi Web Design business. Till then!

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 Creating Efficient Routines for your Divi Web Design Business appeared first on Elegant Themes Blog.

Powered by WPeMatico

Button Design Guide: How to Design Buttons that Convert

Why write a button design guide? Are buttons that important? Why spend so much energy on such a small part of the user interface?

While buttons are very common in web design and seem simple, their importance should not be underestimated. They are vital site elements that perform very important duties.

Especially as main calls to action and on e-commerce sites, buttons literally influence the bottom line. However, also as social sharing buttons, email sign-up and form-submission buttons are they central to a website’s success.

For that reason, in this article want to talk in detail about this often-neglected design element and how to create high-converting buttons for WordPress websites. While the focus will be on CTAs (calls to action), we will also talk about a lot of general advice when it comes to button design.

Did that topic push your button? Then keep reading.

Before We Get Started, a Quick Word on A/B Testing

Further below, we will go over some clear guidelines for creating and using buttons. These principles will help you think through the design, positioning and other important attributes of any buttons on your site.

However, at the same time it is important to keep in mind that this only forms the basis for improving your conversion rate. Design principles let you take an educated guess on what will work, yet to truly know which kind of button holds the key to converting visitors to subscribers, buyers or else lies in testing. Running A/B tests allows you to figure out what truly works for your site, which button colors, copy, position and other markers visitors best respond to.

Because everything matters. Even the smallest change can have a surprisingly large effect on conversion rates — both positive and negative. Go over these examples to understand what I am talking about.

So, while our button design guide will help you understand best practices, it is best supplemented with healthy experimenting to find the winning combination to your site’s success.

How to Design Buttons That Users Actually Click on

After this caveat, we now turn to what goes into crafting well-performing buttons for better calls to action and increased conversion rates. Enjoy!

Design Them to Fit Your Brand or Site

Before getting into functional design, it’s important to think about the context in which the buttons will appear. It’s no use creating the perfect button if it messes up your site.

For that reason, while the guidelines below are important, it also matters that their result integrates well with the context it appears in. That means your buttons fit you site’s color palette, style and overall design guidelines.

While you want buttons to stand out in order to prompt action, the goal is to have them stand out in a positive way. That means one that is in harmony with the overall design and doesn’t destroy it.

At the same time, don’t be afraid to experiment a bit. Sometimes a button in a contrasting color is just what’s needed to spice up an otherwise bland design.

Make Buttons Look Like Buttons

The first step to design buttons that get clicked on is to make them actually look like buttons. Calls to action and sharing options are good for nothing if users don’t understand they are supposed to take advantage of them.

Users have certain expectations when it comes to button design. If you don’t fulfill them at all, they will have a hard time taking the desired action. Therefore, it’s important to include visual cues that help them understand.

The first clue is shape. The most common shape for buttons is rectangular or rectangular with rounded corners. Computer users have been exposed to this design for a long time and are thus very familiar with it.

windows98 buttons

Source: Wikipedia Used with permission from Microsoft

Of course, other shapes are also possible, including squares, circles, triangles or even custom shapes. In fact, there are many examples of quirky and unusual buttons, for example on dribbble

Going with a less traditional shape can make sense in order to keep your site design congruent. Yet, as Apple’s iOS has proved with its rounded squares, that doesn’t mean it doesn’t work.

ios buttons example

Image by Ienjoyeverytime / shutterstock.com.

Whatever you choose, just makes sure to stay consistent. Avoid using different designs for different buttons. Not only does that make for much better UI but also ensures that users will be able to identify buttons throughout your entire site.

Another important design cue are shadows and highlights. Drop-shadows have become a universal cue to show that elements are clickable or can be tapped. Even otherwise flat design uses them as a signal for functionality.

material design button

Source: Material.io

Provide Clear Labels

Besides the basic design, clear labels are also important for button usage. Without a label, there is no way for users to determine what they do.

Labels don’t necessarily have to be written, icons also work (see social sharing buttons). Using both together is another possibility, especially on buttons related to e-commerce.

ecommerce buttons example

Image by Prixel Creative / shutterstock.com.

What’s important is that the user can understand what effect their action of clicking on a button will have. If they don’t, they might avoid doing so in the first place.

Here are some guidelines for clear labels:

  • Be descriptive and specific
  • Use action verbs, e.g. Sign Me Up, Submit Form, Create Account
  • Address the user directly
  • Create a sense of urgency with words like Now or Today
  • Keep it simple and clear

Labels are of special importance when it comes to CTAs. Changing just a few words can have great impact on a buttons performance. For example, Unbounce saw a 90 percent increase in click through rate by simply changing their button copy from “Start your free 30 day trial” to “Start my free 30 day trial”.

Yes, such can be the power of one word.

Put Buttons Where Users Can Find Them

This is really a no-brainer. If your users can’t find your buttons, will be hard pressed to click on them. For that reason, another factor for their effectiveness is location.

There are some conventions. For example, the main CTA can usually be fond above the fold. This makes sense and is by now anticipated by users.

netflix call to action example

Source: Netflix

The same goes for other types of buttons where users have be trained to expect certain locations. For example, buttons for previous and next are usually ordered left and right of each other.

Since this is so ingrained in the public consciousness, reversing the order might frustrate visitors and cause them to leave. And that’s the last thing you want.

However, also for buttons that have more flexible locations, e.g. social sharing buttons, thinking through where to put them is paramount. For example, you might think that placing social buttons at the end of your articles is a good idea. That way, users can share the post once they have finished it, right?

However, the majority of readers doesn’t even get to the end of your posts. As a consequence, a better idea is to place buttons where they can be accessed at any point of the reading experience. One such example is the Monarch floating sidebar:

monarch social sharing buttons example

When in doubt, a good rule of thumb for button placement is to ask yourself where users are going to look next. Design is supposed to guide the user on their way, so buttons can be the logical conclusion to their path across the site.

Pay Attention to Size and Spacing

Now we come to a topic that is especially important in mobile design. People who interact with your site via touch are less precise in their actions that those using a mouse. For that reason, you need to make it possible for them to use and reach buttons without a problem or the danger of tapping on the wrong one.

button size and spacing

Source: Apple

The first step is to make sure your buttons are large enough. The average human fingertip is 8-10mm large. As a consequence, Apple suggest to make elements that are to be used by touch at least 44px by 44px (use points instead of pixels for retina displays). The recommendations from other manufacturers also revolve around the 10mm mark. Of course, the size can be slightly decreased for web design aimed at desktop usage.

At the same time, you need to consider the spacing between buttons. You don’t want to frustrate users because they accidentally push stuff they didn’t mean to. Ample space also makes the elements easier to spot, which matters for primary calls to action.

Provide Feedback

Once buttons or your site are identifiable as such and usable, it’s time to think about the moment they are actually called in to action. Buttons can have several states of existence:

  • Normal — Identifiable as button, signals ability to be clicked
  • Focused — Changing when hovering mouse over it, confirmation for user that action is possible
  • Pressed — Further change to reward user for taking action and confirms that something is happening
  • Busy — When action is taking place in the background, button can reflect that
  • Disabled — Shows that other actions are possible, just not at this time
button states

Source: Material.io

By providing visual feedback to users for make use of buttons, you can make the interaction clearer and more pleasant. For other, similar ideas, check out article on micro interactions.

Make Good Use of Contrast

Not all buttons are created equal. While a landing page might have several links to click on, there should be only one that really matters.

The tools to make this clear to visitors are color, contrast and location. Use them effectively to grab attention and get users to click.

By contrasting buttons from the rest of the interface, you make them more noticeable. In addition to that, it avoids that they are getting lost among other elements.

button contrast

When it comes to color, there is no one best option. Again, much here depends on your own design. A good rule of thumb is to go with a contrasting color and take it from there. For more on that topic, check our article on color matching techniques.

In addition to color, you can use different ways to introduce contrast including size, typography and whitespace. Contrast between button color and text can further enhance the effect and make copy more legible. Combined with a prominent position, these make buttons really pop.

call to action button example

Source: Prezi

To figure out whether your call to action is noticeable, use the good old “squint test”. Apply the design, take a few steps from the screen, squint your eyes and see if your button stands out. I know, it doesn’t sound very professional but it works!

Are you squint testing your #CTA? It’s the best way to tell if your call to action stand out. http://t.co/uO53xJIOPu pic.twitter.com/wzNPyTErD2

— Design Pickle (@designpickle) July 25, 2015

Contrasting buttons also matters in order to establish order between them. When given two or more choices, a stronger color can signify which one you’d prefer or advise visitors to take.

button design guide quicksprout popup

Source: Quicksprout

Summing Up

Buttons are a central but often neglected element of web design. Undeservedly so. Especially in the form of calls to action, they can have tremendous influence on conversions, click through rates and other important markers of success.

For that reason, the topic of button design and placement should not be taken lightly. To recap, in order to create effective buttons:

  • make sure they fit your overall design
  • ensure users can identify them as buttons
  • provide clear labels
  • place them where users can find them
  • pay attention to size and spacing
  • provide feedback when they are used
  • make them stand out from the rest of the site

These guidelines will help you set up buttons your users can’t help but click. However, as mentioned in the beginning, these best practices are meant to be treated as a starting point. To really figure out what buttons work for your site and how to improve conversions, button design should always go hand in hand with thorough A/B testing.  Luckily, we also have an article on that topic.

What is your experience with button design? Anything important to add to the above? Please let us know in the comments section below!

Article thumbnail image by BerryCat / shutterstock.com

The post Button Design Guide: How to Design Buttons that Convert appeared first on Elegant Themes Blog.

Powered by WPeMatico

Divi Plugin Highlight – Divi Custom Blog Module

Divi’s blog module allows for all kinds of customizations. Aside from its standard adjustments, such as layout, font styles, borders, overlays, content, etc., you can adjust it even further with CSS. What if you wanted to change the look and add some features without having to code your own? A third party plugin called Divi Custom Blog Module might be what you need.

Divi Custom Blog Module adds a new module to the Divi Builder that provides new styling and features including social media tags, background colors for meta and categories, and more. It works in both full width and grid layouts. Add your own CSS to customize it even further. It adds 12 new customizer options so you can adjust colors in real time. It also includes three new widgets to place in your sidebars.

In this article we take a look at the Divi Custom Blog Module plugin and see what it can do. I’ve created a few sample blog posts so we can see how it works. The images for the blog posts are from Unsplash.com.

Installation and Settings

Upload and activate the plugin just like any premium plugin. Once it’s activated you’ll find a new menu item in your dashboard called Divi Custom Modules.

This menu lets you choose the additional items that can be added to the blog snippets.

DCM Options allow you to enable or disable social media and email icons that are displayed on the blog snippet.

DCM Options – Custom Meta allows you to enable or disable custom meta fields for author, date, and comments.

I’ve included all of these options within my examples.

Creating a Blog Layout

I created a page to display my sample blog posts and placed the module. Notice there are now two blog modules – the original Divi module (simply called Blog) and a new module called Custom – Blog. Select Custom – Blog.

All of the blog features that you’re used to are here including layout, post number, categories, meta, pagination, offset, featured image, image overlay, font styles, borders, icons, etc. You can set up the blog layout and design it the same way you would the standard Divi blog module with the same level of control.

To help us see the added features I first want to show the standard blog module. I’ve selected a grid layout and left everything else at default. It includes the featured image, name of author, date, category, number of comments, and a snippet of the article. It’s clean and looks great.

Here’s the blog layout using the Divi Custom Blog Module with the same settings. It moves the category name to the upper left corner, centers the post name and places it within a colored box, adds the social sharing buttons that I selected in the dashboard menu, and moves the meta information under the post snippet.

Here’s a closer view. Hovering over the social icons swaps the icon color and its background color – so the icon is now white while its background color is the social network’s branded color. In this example I’m hovering over the Google+ icon. Clicking the button takes you to that social network where you can share the article (just like any social sharing button).

Here’s the regular homepage (not using the Divi Builder) that just displays the latest posts. It’s using vertical navigation with an image in the background, the standard WordPress posts, and regular WordPress widgets in the sidebar. I wanted to show this for comparison.

Here’s a look at the normal WordPress post layout with Divi Custom Modules active. Even though this page wasn’t built with the Divi Builder it still displays the posts using Divi Custom Blog Module in full width layout with all of the same additional content.

The posts are stacked vertically with the image to the left, the title without a styled background, social follow buttons, and snippet. The category is in the upper left corner and the meta information across the bottom just like using the module.

Three New Widgets

The plugin also adds three new widgets:

DCM-About – name, title, position, image, description, and social networks.

Divichild Latest Posts – title, number of posts, category.

Divichild Popular Posts – title, number of posts, category.

Like the Divi Custom Blog Module, the widgets can be styled with the Theme Customizer.

Here’s a look at the widgets when placed on the standard WordPress homepage. The widgets are encased with the module’s colors. The About widget uses a similar layout design as the module when viewed within a grid.

Theme Customizer

Of course the fonts and colors can be modified to your heart’s content and you can add overlays with icons just like the standard blog module. We can do even more customizations using the Theme Customizer.

A new customization is added to the Theme Customizer called Divi Custom Blog Layout. Here you can adjust the colors of the tags, backgrounds, fonts, icons, and links for the module and the widgets. You can adjust the widgets individually or all together.

In this example I’ve adjusted the background, icon, and font colors. You can see all of the adjustments in real time.

Here’s a look at the blog module in full width with all of the adjustments I made in the Theme Customizer. This one uses the full width layout. Adjustments include the category tag color, meta module background and font colors, post title background, About widget background and social icons colors, and all widgets title color.

This one uses the grid layout. Both blog card styles look great.

License

The license allows for the plugin to be used on unlimited websites for you and your clients for as long as you like. Divi Custom Blog Module is so easy to use it doesn’t require documentation. If you can use a Divi module and the Theme Customizer you can use this third party plugin.

Final Thoughts

All of the additional elements give the post snippets a new look, but it isn’t just visual. The additions are actually useful. And of course you can adjust the colors and fonts to make it fit perfectly with your branding or topic.

I especially like the social sharing buttons added to each post and the About widget with social follow buttons. The Latest Posts and Popular Posts widgets add even more flare, allowing you to match the styling or style them individually.

Divi Custom Blog Module is simple, but between the module and the widgets it adds quite a bit of customization to make any blog look great. If you want to add some new features to your blog page or sidebars, this plugin is worth a look.

We’d like to hear from you! Have you tried Divi Custom Blog Module? Let us know about your experience in the comments.

Featured Image via hanss / shutterstock.com

The post Divi Plugin Highlight – Divi Custom Blog Module appeared first on Elegant Themes Blog.

Powered by WPeMatico

17 WordPress Functions.php File Hacks

Out of all your WordPress core files, few are as versatile as functions.php. If you know how to interact with it, this file will enable you to add all sorts of functionality to your site with just a few lines of code.

In this article, we’ll tell you everything you need to know about the WordPress functions file and how to use it to your advantage. We’ll discuss what it does, why you should use it, and when not to. Plus, we’ll introduce you to 17 useful file hacks to extend your site’s functionality without having to install a plugin.

Let’s get this show on the road!

An Introduction to the WordPress Functions File

The functions.php file is one of WordPress’ core files. In other words, it’s one that helps to power the entire platform, and it’s behind many of the features on your site.

A child theme's functions.php file.

You can also use the functions.php file as a makeshift way to implement new features to your website, such as adding new widgets to your dashboard or custom image sizes for your installation. It’s the perfect alternative to WordPress plugins for simple or temporary features.

It’s also worth noting there’s a ‘parent’ functions.php file that influences your entire site, but each theme comes with its own child version (much like your style.css file). This effectively enables you to implement functions only for specific themes without affecting your site globally.

17 File Hacks for Your WordPress Functions.php File

As we mentioned earlier, each theme comes with its own functions.php file. If you’re going to make extensive modifications to yours, the best course of action is to set up a child theme so your changes don’t disappear during updates. You’ll also want to backup your site before making any changes, just in case things go wrong and you need to roll back your changes.

Moving on, you’ll need to access your functions.php file using an FTP (File Transfer Protocol) client – such as FileZilla – to navigate to the wp-content/themes/ directory. Inside, you’ll find a folder for each of your themes, all of which should have their own functions.php files within:

The Divi functions.php file.

Just right-click on it and pick the option that says Edit, which will open your default text editor. With that out of the way, let’s get on to business!

1. Add a New Admin User to WordPress

There are some occasions where you could get locked out of your admin account, and be unable to either change your password or access your site. With this tweak, you’ll have an additional way of regaining access via FTP.

As with all of these hacks and snippets, simply copy the following code, paste it at the end of your theme’s functions.php file, and save the changes.

function wpb_admin_account(){
$user = 'username';
$pass = 'password';
$email = 'email@mywordpresssite.com';
if ( !username_exists( $user )  && !email_exists( $email ) ) {
$user_id = wp_create_user( $user, $pass, $email );
$user = new WP_User( $user_id );
$user->set_role( 'administrator' );
} }
add_action('init','wpb_admin_account');

You’ll need to replace the values where it says username, password, and email with your own, and you’re all set!

2. Display the Total Number of Registered Users

If you’ve ever wanted to brag to the world about how many users your site has, this tweak enables you to add a simple count to your front end. This hack also has uses beyond just bragging rights. For example, people might be more willing to trust your site if they know it has a strong user base. Here’s the snippet:

function wpb_user_count() {
$usercount = count_users();
$result = $usercount['total_users'];
return $result;
}
add_shortcode('user_count', 'wpb_user_count');

This is a bit advanced, as we’ve actually registered the [user_count] custom shortcode to display the total registered users on your site. While this can be a complex topic, our implementation is simple!

3. Remove Your Dashboard’s ‘Welcome Panel’

Your welcome panel is the section of your dashboard that appears as soon as you log into WordPress, and it usually contains a few tips and checklists to get you started. With this code snippet, you’ll be able to remove it permanently:

remove_action('welcome_panel', 'wp_welcome_panel');

Sure, the welcome panel isn’t invasive at all, but it can get a bit old if you’ve been using the platform for a while and don’t need the tips anymore. Plus, since all it takes is a line of code, there’s literally no downside to this hack.

4. Hide Your WordPress Version Number

As you probably know, depending on the theme you’re using, WordPress tends to display its version number in your site’s footer. It’s a tiny detail that you can remove easily with this code:

function wpb_remove_version() {
return '';
}
add_filter('the_generator', 'wpb_remove_version');

If you’re running an old version of WordPress (which of course, you shouldn’t be), this tweak can come in handy to make you a less tempting target.

5. Modify Your Dashboard Footer

Your WordPress dashboard probably includes a bit of text at the footer, often stating a credit of some kind (usually WordPress itself). It’s something you may have become blind to, but this hack does offer you a good opportunity to customize or brand your site with a simple hack. Let’s check out the corresponding code:

function remove_footer_admin () {
echo 'Hello world!';
}
add_filter('admin_footer_text', 'remove_footer_admin');

For this hack, you should replace the Hello world! text with your own, including any links you’d like to include.

6. Add a Simple Text Widget to Your Dashboard

If you decided to clear up some room on your dashboard by removing the welcome widget, you might want to replace it with one of your own. Using this code, you’ll be able to set up a simple text widget:

add_action('wp_dashboard_setup', 'my_custom_dashboard_widgets');
function my_custom_dashboard_widgets() {
global $wp_meta_boxes;
wp_add_dashboard_widget('custom_widget', 'More Information', 'custom_dashboard_information');
}
function custom_dashboard_information() {
echo 'If you need help making changes to your site, you can always contact me via email at...';
}

This snippet will add a widget called More Information to your dashboard, including the text within the custom_dashboard_information function. For this example, we chose to create a contact widget of sorts, which you can use to white label client websites and remind them to stay in touch if needed.

7. Add Custom Image Sizes to Your Installations

WordPress enables you to resize your images to specific dimensions after uploading them, and provides some presets by default. With this code, you’ll be able to add new presets to avoid having to set custom dimensions:

add_image_size( 'sidebar-thumbnail', 120, 120 );

Keep in mind you can add as many new sizes as you want, and they can come in particularly handy if there’s a specific resolution you use throughout your site.

8. Add Featured Images to Your RSS Feed

A lot of people don’t know this, but WordPress generates RSS feeds for your sites automatically. If you intend on using yours, you’ll want to set up a featured image for your posts, which you can do with this code:

function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '

' . get_the_post_thumbnail($post->ID) .
'

' . get_the_content();
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');

Featured images can go a long way towards making your RSS feed look more attractive, which is crucial for any type of content that relies on click-throughs.

9. Exclude Categories From Your RSS Feed

One of the best things about WordPress RSS feed’s feature is how customizable it is. With this code, you’ll be able to hide specific categories from your feed, so you can pick and choose which content is added:

function exclude_category($query) {
if ( $query->is_feed ) {
$query->set('cat', -2, -3');
}
return $query;
}
add_filter('pre_get_posts', 'exclude_category');

Keep in mind WordPress identifies categories according to ID numbers (i.e. -2 and -3) in the code above. So you’ll need to identify the IDs for the categories you want to remove before implementing this hack.

10. Disable Your RSS Feed

Although its a great WordPress feature, if you aren’t interested in using RSS at all, you can disable it altogether using this code snippet:

function fb_disable_feed() {
wp_die( __('Sorry, we don't use RSS!') );
}
add_action('do_feed', 'fb_disable_feed', 1);
add_action('do_feed_rdf', 'fb_disable_feed', 1);
add_action('do_feed_rss', 'fb_disable_feed', 1);
add_action('do_feed_rss2', 'fb_disable_feed', 1);
add_action('do_feed_atom', 'fb_disable_feed', 1);

You’ll notice the code includes a little message for users who attempt to access your feed after you’ve disabled it. There’s no downside to keeping it active, but if you’re sure you’re not going to use it, this enables you to turn it off altogether and potentially save a cycle or two.

11. Hide Your WordPress Login Error Details

Login errors that are too detailed can give undesirables the information they need to help gain access to your site. With this code, WordPress won’t specify where you made an error when attempting to log in:

function no_wordpress_errors(){
return 'Something is wrong!';
}
add_filter( 'login_errors', 'no_wordpress_errors' );

By using this hack, it makes it harder for attackers to attempt to gain access to your site, while real users should have no problem figuring out where they’ve made a mistake. A win-win all around!

12. Force Users to Login With Their Usernames

A lot of people tend to sign up for every service using the same email, which means that attackers can attempt to gain access just by knowing their email addresses. With this code, you’ll force users to log in using usernames exclusively:

remove_filter( 'authenticate', 'wp_authenticate_email_password', 20 );

To be fair, usernames also tend to get reused a lot, but this small tweak can still help improve your security and minimize attacks.

13. Change the Length of Your Post Excerpts

WordPress blog indexes usually display brief excerpts of your posts to give readers an idea of what they’re in for. If you’ve ever wanted to change the default length of these excerpts, here’s an opportunity to do so.

functionnew_excerpt_length($length) {
return 75;
}
add_filter('excerpt_length', 'new_excerpt_length');

The default length is 55 but in the code above, we raised it to 75 to give us a little more wiggle room.

14. Enable WordPress to Upload Any File Type You Want

By default, WordPress only enables you to upload a very limited range of file types, including common media formats such as .png and .jpg. With this code, you’ll be able to force your installation to allow more types:

function my_myme_types($mime_types){
$mime_types['svg'] = 'image/svg+xml';
return $mime_types;
}
add_filter('upload_mimes', 'my_myme_types', 1, 1);

Take .svg, for example, which is a file type we’ve discussed in the past. With this snippet, you’ll be able to add support for it without the need for a plugin.

15. Disable Automatic Image Linking

Out of the box, WordPress will add links to each image you include in your content that points to its full version. By using this code, you’ll disable this functionality:

function wpb_imagelink_setup() {
$image_set = get_option( 'image_default_link_type' );
if ($image_set !== 'none') {
update_option('image_default_link_type', 'none');
}
}
add_action('admin_init', 'wpb_imagelink_setup', 10);

Keep in mind, though, you can still access this feature by editing each individual image – all this does is prevent it from working automatically.

16. Add a Widget Ready Area

WordPress already includes multiple widget-ready areas for you to use, but you can always add new ones using a little functions.php magic. As with our earlier shortcodes hack, you’re beginning to get into the realm of developer here. However, this is a simple implementation that could help you immensely:

function custom_sidebars() {
	$args = array(
		'id'            => 'custom_sidebar',
		'name'          => __( 'Custom Widget', 'text_domain' ),
		'description'   => __( 'A custom widget, 'text_domain' ),
		'before_title'  => '


', 'after_title' => '

', 'before_widget' => ' ', ); register_sidebar( $args ); } add_action( 'widgets_init', 'custom_sidebars' );

Keep in mind this code merely ‘registers’ your new widget area. You’ll still need to call it for specific theme sections, such as your footer, by editing their respective files.

17. Disable the WordPress Search Feature

Almost every site needs a search feature to help users find their way around. However, if you’re going to build a single-page site, you may not need it. Here’s the code that will enable you to turn if off:

function fb_filter_query( $query, $error = true ) {
if ( is_search() ) {
$query->is_search = false;
$query->query_vars[s] = false;
$query->query[s] = false;
// to error
if ( $error == true )
$query->is_404 = true;
}
}
add_action( 'parse_query', 'fb_filter_query' );
add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

Before disabling this feature, you need to be 100% sure you won’t need it since it can heavily impact your site’s usability. Of course, you can always remove the code to reinstate search on your site, but if you’re not sure, err on the side of caution and don’t turn it off!

Conclusion

Your functions.php file is one of the most powerful assets in your WordPress toolbox. Not only does it enable you to add all sort of features with a few lines of code, but it’s also critical for your site to function (see what we did there?).

If you’re a Divi user, the functions.php file can help you add several complementary features to your site without having to set up additional plugins, which is always a win.

Do you have any questions about these WordPress functions file hacks? If so, ask away in the comments section below!

Article thumbnail image by MchlSkhrv / shutterstock.com

The post 17 WordPress Functions.php File Hacks appeared first on Elegant Themes Blog.

Powered by WPeMatico

12 Examples of Divi Personal Coaching Websites

Personal coaching is a popular industry both on and off the web. Those providing personal coaching services needs well-designed websites to tell potential clients about their services and products. Fortunately there are a lot of personal coaching websites made with Divi to help spark your imagination. In this article we’ll take a look at 12 examples of Divi personal coaching websites.

Personal coaching covers a lot of topics including lifestyle, health, finances, relationships, careers, and more. The needs of the personal coach are different from one coach to another because of the wide range of services. Most include signup forms, booking information, products, contact info, blogs, and more. Some offer their services through their websites while others use their websites to showcase their products.

These 12 websites are in no particular order. We even have a bonus at the end – a personal coaching site made with Extra. Let’s take a look…

1. Amber Chalus

Amber Chalus uses a full-screen image with a styled email signup form on the right of the screen. Following this is an about section with fonts styled with branded colors. Next is a full-width section with images that link to pages, a blog section, a full-width section with a quote using an elegant white font over the blue background, and a section about the site owner with an image, text, and media icons where she’s been featured. Navigation is simple with no dropdowns. The layout looks well-designed and the site uses soft blues and elegant fonts.

2. Cortney McDermott

Cortney McDermott includes a full-screen image with a tagline followed by a full-width section of media icons and an email signup form. An information section uses a text module with background color and an elegant font as a Read More message. Three CTA’s (call to action) line up horizontally followed by a full-screen image as a testimonial. The blog section uses three clickable images. Following this is a book CTA, links to media, and a footer with signup form. The site makes great use of images and fonts.

3. Heidi Rose

Heidi Rose displays a full-screen image with logo, tagline, and styled button. Clicking the button takes you to the home screen, revealing a full-screen image and top navigation. Scrolling displays several sections with motivating messages, CTA, and a footer menu. The blog displays three images in full-width over the post title. The posts themselves are centered in single column with no sidebar, creating an elegant look. The Work With Me page uses an stylish layout with alternating images with text in parallax. The store is powered by WooCommerce. The site makes excellent use of layouts, fonts, and images.

4. Courtship vs Dating

Courtship vs Dating uses a full-width slider with CTA’s and a newsletter form. Scrolling reveals a CTA for a book with an image and description, and a list of books with links to the Kindle store. A three column information section uses text and icons. An events section displays an image with link to the events page. Following this is a testimonials section, a blog section, and footer with branded colors. The site makes good use of branded color.

5. Insight Coaching

Insight Coaching uses a large header with logo with tagline above the menu. A full-width image includes the tagline with more information. Scrolling reveals a three column section with blurbs with icons and links about the services. An about section places text within a styled block. An information section provides information in bullet points. A testimonials section uses a mirrored version of the header image as a background. The site is simple and makes good use of color and fonts for the target audience.

6. Michelle Luft

Michelle Luft uses a full-width image with CTA and a chat system powered by Tawk.To. It includes a tagline placed over a background image in parallax. Circled images have links to services. An animated information section displays a slideshow above a contact form. The blog section displays posts within a slider. Testimonials are placed over the same parallax background as the tagline. The footer includes an embedded Facebook link. The event calendar is powered by WP Event Plus. The layout is clean and uses colorful background images to fit the topic.

7. We2Me

We2Me uses a full-screen image with logo in parallax. Scrolling reveals the mission statement as a quote followed by links to various pages. The sections of the home page are separated by full-screen images in parallax with introductory text. The sections use images, text, video, etc. It includes links to articles in the press, embedded audio, a contact form, and a four column section with CTA’s. Subscriptions are powered by WooCommerce. The site uses branded color to attract the target audience.

8. Breathe and Bliss

Breathe and Bliss uses a full-screen background image with rotating message in parallax. An information section uses header text with a background image showing through. Blurbs for the services are placed over a background in parallax. A two column about section displays an image on one side and bullets on the other. A full-width CTA displays images to demonstrate the classes and workshops. It also includes a full-width Instagram feed. Branded colors are used to set the mood.

9. My Heart Alchemist

My Heart Alchemist displays a full-width image with tagline in an overlay, link, and CTA. An about section that describes problems uses centered text. A personal quote is placed within a full-width text section using a colored background. A full-width image collage uses a statement in an overlay as a CTA. An about section displays the benefits followed by a full-width testimonial and a full-width CTA with image and text with the entire section being a link. Booking is handled through a LeadBox form. The site makes great use of branded color, images, and CTA’s.

10. Deeper Than That

Deeper Than That displays a full-width image with CTA followed by a tagline over a full-width image in parallax. The blog section uses hover animation. An about section places a text box with link to one side of a full-screen image. Embedded YouTube videos display a snippet of the video with links to view the videos on YouTube. An Instagram section displays Instagram feeds in a masonry grid. The footer includes an email signup form, links to pages, and contact information. Downloads are embedded files from Dropbox. The site sets the mood using black and white.

11. Laurie Erdman

Laurie Erdman uses a two column section with a large image on one side and a signup form on the other which is powered by ActiveCampaign. A full-width section displays a tagline over a background pattern. Scrolling reveals an embedded video with link to hear more, images with blog categories using hover animation, a two column section with a testimonial on one side and media links on the other, and a footer with links and social media follow buttons. The shop is powered by WooCommerce. The site makes great use of color and images.

12. Wild Sacred

Wild Sacred uses a boxed design with a centered logo that includes a colored splash that’s used throughout the website as a highlight behind header text. Using a two-column design, the site includes an image on one side with a welcome message and newsletter form on the other. Following this is a series of images with a text overlay on one side as CTA’s. Some of the text is placed over one side of full-width images. Testimonials are displayed within a full-width slider. Purchasing for courses are handled through WooCommerce. The site makes excellent use of color and photography.

Bonus: Extra Example – Hope and Cents

Hope and Cents includes a full-screen image with a tagline and CTA in parallax. The homepage includes a single column layout with sidebar which includes a post slider, tabbed post module with all of the categories, newsletter CTA, and popular and recent posts in two columns. The sidebar displays social follow buttons, an about widget, media icons, an award certificate, and recent tweets. The footer displays a large centered logo and menu. The Work With Me page steps through each of the services, separating them with full-width images in parallax. It has a clean layout and makes excellent use of color, and is a fine example of using Extra’s magazine modules to create a regular website.

Final Thoughts

These 12 Divi sites and 1 Extra site are great examples of personal coaching websites no matter the coaching topic. Whether you need inspiration for layouts, colors, fonts, contact info, signup forms, booking information, products, blogs, etc., there’s sure to be something here to help with your next Divi design for personal coaches.

We’d like to hear from you. What are your favorite design elements from these examples of Divi personal coaching websites? Let us know what you think in the comments below.

Featured Image via Vector Goddess / shutterstock.com

The post 12 Examples of Divi Personal Coaching Websites appeared first on Elegant Themes Blog.

Powered by WPeMatico

Canadian Web Hosting [Ad]