Divi Web Designer

About Divi

In case you’re wondering, Divi is a website building framework by Elegant Themes that significantly reduces the amount of coding typically required to build and manage a WordPress theme or website.

Divi includes a library of pre-coded, highly-configurable modules, that can be dropped into position at will and customized via a graphical user interface (GUI). For example, there are Code, Image, Slider, Text and Video modules, just to name a few. Wait. A Code module? Yes, while Divi diminishes the need for coding, it does not preclude a skilled web designer from writing and using custom code if you’d like to do something Divi, or an existing plugin, can’t do by default.

Is Divi the Best Choice for Your New Website?

If you plan to use Divi for your next website, or already have, congratulations! You’re in good company. In fact, Divi is the world’s most popular WordPress Theme/Framework (source: builtwith). But is it right for you?

Since Divi overrides WordPress’ block editor, I rarely need to custom-code template files or create a client-friendly UI (user interface) for editing those pages anymore. So, not only is it faster to design/build a new website with Divi — it is also faster to redesign an existing page or entire web site using this framework.

Note: Blog content (i.e., WordPress Posts) are sometimes handled a bit differently than WordPress Pages, by design. For Posts and other blog-related elements, it’s best to design templates using Divi’s Theme Builder. In that case, you will use WordPress’ block editor, which is ideally suited for writing blog posts.

Already Using Divi? Can’t Stand It?

Common Complaints About Divi

Custom Divi Websites I’ve Created

Just a Few Examples

My Custom Website Design Process – Overview

Phase 1: Discovery

Phase 2: Ideation

Phase 3: Design/Development

Custom Website Process

Phase 1: Discovery

1A

Strategy Brief/Session

PURPOSE: To clarify, define, and prioritize your strategic objectives.

We begin — not by installing Divi — but by thoughtfully defining and/or clarifying your strategic objectives using my Strategy Brief. That’s because, for example, a website targeting prospective clients for high-end residential architecture firms, will look and behave very differently than one targeting IT managers at Fortune 500 companies.

Here are some of the questions I ask my clients:

• What are your primary objectives?
• Who are you targeting?
• What products and/or services will be featured?
• Who are your top competitors?
• What are your success metrics?
• What are your favorite websites?
• What are your technical requirements?
• What are your creative requirements?

1B

Preliminary Site Map

PURPOSE: To prioritize and define mission-critical pages; to scope the project.

After your strategic objectives have been thoughtfully defined and clarified, it’s time to create a Preliminary Sitemap. A Preliminary Sitemap is a diagram that serves as a high-level view of your entire website. Each rectangle within this diagram represents a single page or group of similar pages (e.g., blog posts). The Preliminary Sitemap helps us define and organize content — or, in the case of an existing website — determine which content needs to be removed and/or added. And yes, the Preliminary Sitemap is also a helpful tool for defining header navigation and the overall scope of your project.

1C

Research/Needs Analysis

PURPOSE: To determine if existing plugins can satisfy the desired functionality; to consider target keywords for SEO

The Technical Requirements section of my Strategy Brief helps identify uncommon features you’d like to incorporate into your new website. However, we have not yet determined what it will take to implement these features.

Is the requested functionality available within a standard Divi module? If not, are there any well-supported plugins we can use with Divi to streamline the development process? What if some subfeatures are unavailable? Is it worth the expense of creating a custom plugin?

Phase 2: Ideation

2A

Use-Case Scenarios

PURPOSE: To better empathize with your target audience(s).

Use-case scenarios are “day-in-the-life-of” profiles based on the target audiences defined in my Strategy Brief — with one big question at the end of each: “how would ‘Jane Doe’ use this site?”. This exercise helps my client envision the experience from their visitors’ perspective — and, it helps me design with greater empathy… all of which results in a better experience for your visitors.

2B

Competitive Analysis

PURPOSE: To survey the landscape and capitalize on competitors’ weaknesses.

Here, I take a closer look at your top 3 competitors’ websites to see what they are doing well, and not so well. This gives me an opportunity to differentiate your brand and products/services from your competitors’.

2C

Concept Development

PURPOSE: To explore creative solutions for communicating your brand personality.

Most websites are soulless. They lack imagination and fail to visually reinforce the company’s brand.

What adjective best describes your brand? Is it innovative or old-fashioned? Quirky or conventional? Tranquil or high-energy? Youthful or mature? And so on.

During this subphase, we explore visual styles and subject matter that best represent this adjective — via a mood board. Ultimately, a mood board helps improve the visual design and creates a more emotional and memorable experience.

Note: This part of my process is sometimes excluded to accommodate budgetary constraints.

2D

Final Site Map

PURPOSE: To incorporate the knowledge gained from preceding exercises.

The insight gained from the Use-Case Scenarios and Competitive Analyses usually has a significant impact on the information architecture. Consequently, the Visual Sitemap is modified and finalized, and we move forward.

Phase 3: Design/Development

3A

Functional Wireframes

PURPOSE: To define site navigation; page layout; and technical complexity for mission-critical pages.

After completing my Strategy Brief and creating a Visual Sitemap at the very least, it’s time to identify and prioritize pages that are directly tied to your success metrics (aka “goal pages”). Of course, one of these pages will be your home page. Another may be a product or a service page. Another, such as the “contact us” page will be tied to a call-to-action that prompts visitors to “request a consultation”; “make an appointment”; “request a demo”; “request an estimate”; or “purchase this product”.

Once these pages have been identified, I begin roughing in sections for each page using my Wireframe Kit, which consists of a variety of gray-scale Divi modules with placeholder text and images. In a sense, the resulting functional wireframes are similar to a set of 2-dimensional floor plans architects and interior designers use.

3B

Functional Prototype

PURPOSE: To establish look and feel after the wireframes have been approved.

Once the wireframes have been approved, I add final text; apply brand-compliant colors; and propose images. Sometimes I recommend a logo redesign (or a refresh) beforehand. In either case, it’s important to ensure that the color palette and typography have been finalized before moving forward.

When applying color, I use accents derived from my clients’ brand palette — whether I’m subtly guiding the eye toward calls-to-action, choosing/creating images, or choosing background colors for each section.

3C

Production

PURPOSE: To build out remainder of page templates/site; add content; create and fine-tune creative and technical assets.

Once the final versions of your goal pages have been built out and approved, I’ll begin saving modules with customized settings to the Divi Library so that I can re-use them on your site as needed. I often rely on Divi’s new Theme Builder to create reusable page and post templates where applicable.

3D

Testing

PURPOSE: To identify and correct bugs before going live.

After all pages and post templates have been built out and tested, it’s time to go live. If a previous site existed, we may want to create 301 redirects — so that visitors are redirected to the newer pages, and Google can update its database.

My WordPress Customization Process – Overview

WordPress Customization Process

1

Consult & Gather Requirements

All that’s required to begin many customization and “fixer-up” projects is a list of issues you’d like me to solve. However, some projects require more consulting and planning than others. In some cases, we may need to begin with my Strategy Brief so that I can help you clarify your strategic objectives — budget and time permitting. Other times, a Website Audit may be helpful, particularly if you’d like a formal assessment of your website.

Depending on the scope of work involved, a Requirements Document, that you provide, may be useful. A Requirements Document is a detailed, prioritized list of tasks you’d like me to take care of. Ideally, this document includes:

• The web address of each page to be modified or fixed
• A description of what needs to be modified or fixed on each page
• A screenshot of the issue for each page

Your “Requirements Document” can be a single email, a Word document, a spreadsheet, a shared Todoist project, or even an Asana Kanban board.

2

Migrate Website to Test Server

After reviewing your requirements document, I’ll need access to your WordPress Dashboard and website files (i.e., “sFTP access”) so that I can evaluate the current condition of your website and troubleshoot any issues if applicable. But first, I’ll need to copy your website to a Staging server (aka, a Test server) if you haven’t already done so. That way, I can aggressively troubleshoot the issues without affecting your live website.

3

Inspect & Diagnose

After successfully logging into your website and copying it to a Staging environment, I’ll do a high-level assessment of your website.

When debugging a technical issue, I may disable plugins; revert to WordPress’ default theme; examine and/or rewrite code; search your database; and so on.

When adding new functionality, I may research, configure, and test multiple plugins to see if they meet your technical requirements and determine how much customization work will need to be done.

When the scope of work involves design improvements, I’ll pay close attention to how your website was originally developed. Sometimes, simple changes can take many hours unnecessarily, particularly if a website was poorly developed and/or maintained. Therefore, I may need to do some corrective work beforehand.

4

Recommend Solutions

If I’ve completely debugged a technical issue while inspecting and diagnosing your website, you’ll be asked to approve the work. Or, I’ll let you know what it will take to complete the work. At some point, the fix will be pushed out to your live site.

Where new functionality is concerned, you’ll be asked to review and approve the proposed solution so that I can complete the work at hand.

Where design is concerned, I may create a functional wireframe for you to approve — to make sure I’ve covered everything to your satisfaction before finalizing the design.

5

Estimate Hours/Fees (if possible)

Next, depending on the type of project I’m working on, I may attempt to provide a “guesstimate” for the work that needs to be performed. However, as mentioned in the “Pricing for Customizing (or Fixing) Your Divi Website” section near the bottom of this page, this is not always possible.

6

Design & Development

For smaller projects, the design and/or development work may have been addressed while researching and recommending solutions. Otherwise, it’s full steam ahead!

Along the way, you’ll receive status updates and requests to approve the work in progress.

7

Testing & Debugging

Before we go live, you’ll be asked to help me test the work that was performed on your staging server. At this time, I’ll pay closer attention to how the improvements work on various devices and web browsers.

8

Deploy to Live Server

Now, I’ll copy the entire staging site to your live environment, or, for simpler projects, I may manually copy the changes to your live site.