WordPress Designer & Developer

Divi Web Designer

Looking for a Divi Web Designer?

Welcome! I’m Tommy Oddo — a Divi web designer with over 20 years of professional graphic design, web design, and web development experience. I live and work in the USA. Small- and medium-size businesses hire me to design and develop custom WordPress themes and websites with Elegant Themes’ Divi. If you’re in need of an experienced Divi web designer — whether it’s to create a new custom website, or customize the one you already have — I can help!

WordPress Designer and Developer Austin TX

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.

About Divi Web Designer Icon
Divi Code Module Icon Divi Image Module Icon Divi Slider Module Icon Divi Text Module Icon Divi Video Module Icon

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?

Clients who don’t mind rolling up their sleeves to edit or publish content — often prefer Divi’s front-end “Visual Builder” over WordPress’ default block editor for editing pages. That’s mainly because Divi is a WYSIWYG editor and design tool, similar to Adobe Indesign, Affinity Publisher, or even a word processor like Apple Pages or Microsoft Word. With Divi, a single web browser window allows you to see the entire design while editing the page.

Divi Web Designer WYSIWYG
Divi Web Designer UI

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.

Divi Web Designer UI

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

Divi Web Designer Complaints

Sluggish Performance.

None of the performance issues I’ve investigated, had anything to do with Divi. Budget hosting; over-sized and unoptimized images; the lack of a content delivery network (CDN); the excessive use of plugins; the overuse of animation; loading too many resources from other domains; and so on, all contribute to a slow-loading website. These issues are not exclusive to Divi by any stretch.

Ugly, Bloated Code.

It’s true. The front-end code that Divi and other page builder frameworks spit out is verbose and hard to read. However, your website visitors will never see any of it. Yes, as a web designer, I adhere to writing succinct, neatly-formatted, and well-organized code. But writing code for the sake of writing code — is unethical and clearly a waste of my clients’ budgets. Furthermore, I’ve seen sloppier code written by “purists” who are averse to using drag and drop frameworks like Divi.

Lack of Flexibility.

Like WordPress, Divi is extraordinarily flexible in the hands of an experienced, knowledgeable web designer. For better or worse, some small businesses argue that WordPress in general, is actually too flexible — and ultimately settle for more restrictive, proprietary content management platforms with permanent  training wheels. When combined with other tools and techniques, I’ve found Divi to be very flexible — otherwise, I would not use it for my own websites, nor recommend it to my clients.

All Divi Websites Look Alike.

If a web designer is incapable of deviating from Divi’s default settings — whether due to budgetary or time constraints, or even a lack of design experience — every website she or he creates with the Divi framework, will naturally look familiar and uninspired. Divi is not a web designer. It’s a tool that web designers use.

Poor Support.

Elegant Themes support for Divi is as good as any I’ve experienced. As a licensee, you’ll also have access to a user forum and tech support via email and chat — if you need them. However, when you hire me, there will be no need for you to reach out to Elegant Themes for assistance. Among the few complaints I’ve witnessed, most were due to a lack of web design experience by the questioner.

What is a Divi Web Designer?

According to dictionary.com, a web designer is “a person who plans, designs, creates, and often maintains websites.” In other words, a web designer is not a person who assembles websites. This may seem like a trivial distinction, but hiring someone who relies exclusively on Divi layout packs or predesigned templates as a crutch, will probably turn out to be a costly, frustrating experience for you. I know, because I’m often hired to fix these “frankensites”.

What is a Divi Web Designer

As for me, I’m a classically-trained graphic designer who spent a decade refining my talent and skills as a visual communicator. At design school, and during subsequent employment with several internationally-recognized graphic design firms, I learned about the finer points of concept development, color, composition, typography, illustration, and photography — all before I began designing and coding websites in 1994.

By the time I created my first Divi website (2015), I had spent the prior decade learning how to extend WordPress’ functionality, by writing a lot of code and fixing broken websites I did not create. This learning process, which never actually ends, taught me a lot about how WordPress works. Back then, I used a code-centric framework that I developed to streamline my process. When the web design industry pivoted from skeuomorphism to minimalism, I found myself designing in the web browser more and more — without the need to create and present full-color non-functional mockups in advance (which is relatively time-consuming and expensive).

Above all, a web designer designs websites — regardless of the tools she or he uses to create them. Divi just happens to be my favorite web design tool — one that I’ve used exclusively to create new websites for over 5 years.

What is a Divi Web Designer

Custom Divi Websites I’ve Created

Just a Few Examples

Getting a New Custom Divi Website

Yes, Divi is stuffed with over 100 predesigned “website packs” to help do-it-yourselfers and aspiring web designers jumpstart the website building process. Predesigned child themes are also available from a variety of 3rd-party websites.

However, clients who hire me, do not want a hacky frankensite, nor one that resembles their competitors’. They realize that a new custom-designed website is an opportunity to create a more personalized experience for their target audience and better differentiate their products and/or services.

Furthermore, my “Divi Wireframe Kit” speeds up the process of designing and building custom page templates — which erases the potential time-savings compared to using and modifying a predesigned theme.

Creating a New Custom Website with Divi

So, if starting with a predesigned theme is the wrong approach, how do we go from a blank page to a live custom website? As Stephen R. Covey said: “If the ladder is not leaning against the right wall, every step we take just gets us to the wrong place faster.”

My battle-tested design process helps us determine where to “place the ladder” and which steps we need to take to achieve success.

Creating a New Custom Website with Divi

My Custom Website Design Process – Overview

Phase 1: Discovery

1A

Strategy Brief/Session

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

Learn More…

1B

Preliminary
Site Map

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

Learn More…

1C

Research/
Needs Analysis

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

Learn More…

Phase 2: Ideation

2A

Use-Case Scenarios

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

Learn More…

2B

Competitive Analysis

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

Learn More…

2C

Concept Development

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

Learn More…

2D

Final Site Map

PURPOSE: To incorporate the knowledge gained from preceding exercises.

Learn More…

Phase 3: Design/Development

3A

Functional Wireframes

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

Learn More…

3B

Functional Prototype

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

Learn More…

3C

Production

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

Learn More…

3D

Testing

PURPOSE: To identify and correct bugs before going live.

Learn More…

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.

Pricing for New Custom Divi Websites

Pricing for New Custom Divi Websites

Starting with a clean slate?

The Divi websites I custom-design/develop are reasonably priced — generally in the $5,000 to $15,000 (USD) range. If you’d like a more accurate estimate, we’ll need to go through my Discovery Phase, when as previously noted, we define/clarify your strategic objectives; create a visual sitemap; and determine if the required functionality already exists within the Divi framework and/or existing plugins. My fees for Discovery are usually in the $500 to $1,500 range, depending on the size and complexity of your new website.

As we work together through the Discovery Phase, I’ll help you determine what your true needs are — relative to your strategic objectives and budget.

For example, if you have an existing WordPress website and do not plan significant edits to the original text, I may be able to use your existing WordPress database, which may decrease the overall cost of building your new website.

Another alternative is to hire me to custom design/build your home page and create several custom templates for your interior pages. Then, I can step in when needed — to provide design direction; create new design assets; write custom code; provide assistance with Divi; and so on.

Remember: the work I do is custom-tailored to meet your needs — not mine! Going through the Discovery Phase is the best, most cost-effective way to determine what you need, while tapping into 20+ years of web design experience.

Getting Your Existing Divi Website Customized (or Fixed)

Many clients initially reach out to me because they had a terrible experience with a previous Divi web designer/developer. Or, they have a single glaring issue on their existing website that needs to be fixed. While Divi isn’t perfect (no theme or website framework is), I can improve your existing Divi website in ways you might not  imagine.

Getting Your Divi Website Customized

For example, a client has a website that was created with Divi, by another web designer. Out of frustration, my client assumed he needed a brand new website. As I worked with his team and became more familiar with their needs and website, I realized he originally hired a novice who built his site poorly, with Divi.

I corrected a few nagging technical issues and made some major design improvements that ultimately saved him from the unnecessary expense of a new website ($3k vs $10k).

If you’re already using Divi for your website and you’d like to improve the original design and functionality, I can help!

Getting Your Divi Website Customized

My WordPress Customization Process – Overview

1

Consult & Gather Requirements

Learn More…

2

Migrate Website to Test Server

Learn More…

3

Inspect and Diagnose

Learn More…

4

Recommend Solutions

Learn More…

5

Estimate Hours/Fees
(if possible)

Learn More…

6

Design & Development

Learn More…

7

Testing & Debugging

Learn More…

8

Deploy to Live Server

Learn More…

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.

Pricing for Customizing Your Divi Website

Pricing for Customizing (or Fixing) Your Divi Website

The majority of websites I’m hired to customize or fix are brought to me with underlying conditions — many of which are not immediately apparent. In many cases, I’ll need to correct the pre-existing issues before I can begin the work you’ve hired me to do.

Real-world examples:

  • Your website was previously hacked and is still infected
  • Your website is loaded with outdated, buggy plugins, causing it to function erratically
  • Your website was a “lab experiment” for computer science interns and it’s a buggy pile of spaghetti code
  • Your previous web designer did not use a child theme
  • Your web host environment is slow, unreliable, and/or vulnerable to attacks
  • Your web host environment lacks a one-click staging/test environment

Since it would have cost these new clients more time and money to ignore these problems, I had to correct them beforehand. Otherwise, tasks that normally take me minutes to do, would have taken hours.

In addition, I frequently receive estimate requests from prospective clients which often include vague project requirements, or none at all.

Real-world examples:

  • “I built my own website. How much would it cost to take it to the next level?”
  • “I can’t figure out why my website isn’t working. Can you share some thoughts regarding pricing to fix it?”
  • “My website is outdated and I’d like some help modernizing it. How much?”
  • “I customized a layout pack, but need to make sure I haven’t missed any blank pages or extra things”

In other words, for websites I did not personally design or develop, it’s practically impossible to provide an accurate cost- and/or time-estimate in advance. In most cases, I must dig a lot deeper to better understand your needs; evaluate the current condition of your website; and propose solutions. On small tasks, I may have to do 50% or more of the work to adequately scope the project.

All of my time (consulting, design, and development) is billed at $100 per hour.

Hiring a Divi Web Designer

Are We a Good Fit for One Another?

Clients who hire me to design a new Divi website, or customize an existing one, have already worked directly with at least one or two professional web designers. Some of my clients are small business owners, while others are seasoned marketing professionals who are employed by larger companies in a variety of industries. Many had the misfortune of hiring an unskilled, unreliable low-baller who did subpar work, before reaching out to me.

While my clients are not cash-strapped do-it-yourselfers, hiring a large web agency may be a luxury they can’t afford and/or they would prefer to work directly with a web designer. In all cases, they appreciate and respect what it takes to do good custom work, and are happy to pay for expert advice that can help prevent costly mistakes and increase their return on investment.

Need a Divi Web Designer?

Let’s Get Started!