Using the Right Tools Makes All the Difference

The Start of a New Website Project

Master Roofing Company  is a family-owned and operated Oakland roofing contractor with nearly 40 years experience of servicing residential and commercial clients in and around the San Francisco Bay Area. They had a Yelp page, but they didn’t have their own website.

The Process

After a phone call to clarify the scope of the project, budget and timeline we had the client send us a list of the 8 pages they wanted and the text that they wanted for each page, as well as some layout suggestions.

And the clock started ticking…

Where to build the site – our choice for most clients is Sitedistrict

Sitedistrict hosting logoOnce we had the initial content and a “sitemap” we chose to build the site at Sitedistrict. This the hosting company we usually start with because of their developer tools and the support they provide — including the best site migration and staging site creation I’ve ever seen.

In addition, we can start to build a site for a client for no charge on our account, then create an account for the client and transfer the site to the new client account without bothering the client. Only when the site is ready to go live and we’re ready to point a domain to the new site do we need to automatically send an email to the client inviting them to take ownership of the site and add a payment method for the account. Sitedistrict charges monthly ($25/mo for a single site) at the end of the month once the site is live.

This workflow lets us start to build a site

  • without engaging the client in a lot of administrative details setting up new accounts
  • the client doesn’t have to commit to a year or more of hosting costs before the site is even built
  • we don’t incur any hosting expenses while building the site.

Page Layout Using Beaver Builder Pagebuilder

I was unhappy with the previous tools I had been using for several years to build client WordPress websites. The tools were getting clunky, bloated, not WYSIWYG, and slow, both during the page creation and editing, and also when the pages loaded. Beaver Builder page builder plugin logoAfter 6-months of researching and trying alternatives I’ve chosen to use Beaver Builder, the best page layout plugin for building WordPress websites, and the Genesis theme framework from StudioPress as our main tools and framework for creating websites.

Studio Press Genesis logos

There are numerous reasons for this choice of theme, but it boils down to Genesis being a solid foundation for the website with great coding, support, and perhaps most important — significant market share. I’m risk adverse, after we turn over a website to the client, we don’t want to hear 6 months or a year later that after updates to WordPress core, the theme, and the multiple plugins to customize the website, that some update has broken the site because an incompatibility between the plugin and the theme. If a plugin has a conflict with Genesis, the plugin developer will notice and fix it almost immediately. If it is some other theme (other than the WordPress default themes), then maybe not so much.

While there are several modern page builder plugins available these days Beaver Builder seems to be the best-in-class. This is why I picked Beaver Builder.

  • It really is WYSIWYG page layout for building responsive web pages. It’s like when Aldus introduced Pagemaker document page layout program in 1985 and started the desktop publishing revolution.
  • Beaver Builder doesn’t leave messy shortcodes behind, or remove the content entirely when you disable it — all your content is always there.
  • There is a thriving 3rd party ecosystem building addons for Beaver Builder, no vendor lock-in.
  • There are active Beaver Builder developer communities on Slack and Facebook groups and many video tutorials on YouTube and Vimeo. The support is great.

Proof of the Pudding is in the Eating

By using Genesis and Beaver Builder, we were able to go — from request to the site launch — in under 3 weeks and for less than $600.

Now part of that economy was having a savvy client who knew exactly what he wanted and had the content ready to go. Since this is a simple “brochure” website we didn’t spend a lot of time on the graphic design. He knew what fonts and colors he wanted. The majority of the layout emerged from standard Beaver Builder tools and pre-built templates.

One key aspect of website design is meeting the requirements and desires of the client for a particular header, either specifically on the homepage, with other designs on the interior pages, or just a global header design. Header layout options have been one of the primary factors in choosing a theme – Not anymore!

Beaver Theme Builder Plugin – build page Headers to look the way You want

The Beaver Themer plugin is an additional plugin that lets us create theme elements like headers, footers, single post layouts, archive pages, 404 pages, etc. using the standard Beaver Builder page layout tools. These layouts can be saved and reused throughout the site as well as downloaded and applied to other sites. We’re no longer beholden to the theme developers’ design choices. With these tools we can make any page look the way the client wants from the top of the browser window to the bottom.

Turning Over the Site to the Client – Site Changes and Enhancements

The site has just launched at the end of March 2017. But it’s not done. Websites are never done. In this case, the client already knows he wants to add a bunch more photos of the roofing work, but he doesn’t have those yet. One of the advantages of a WYSISYG page layout tool is that it simplifies training the client to do most of the editing and adding additional content as the site evolves. As I’ve said, this happens to be a particularly savvy client who was comfortable editing the page content after we set up the pages with his original text. we were able to quickly coach him in how to make editing changes, as well as changes to the individual page layouts. When he gets stuck, he can call on us to help out, but we expect him to take the site forward from here.

You can see the current state of the homepage in the screenshot below, or you can visit the live site and see the rest of the pages as well as the interactive elements like the popup contact form on the homepage.


click on the image to see the larger size

Master Roofing Company homepage screenshot

Pieter Hartsook

WordPress website coaching, design, implementation, support, and training. Background in Marketing Research and Communications. See my profile at:

Reader Interactions

Leave a Reply

Your email address will not be published. Required fields are marked *

Limit search for phrases by using " " around the phrase

Signup for Monthly Email Notification

Get notified of new posts from WordPress Website Coach. We only send these out once on the 1st of each month.

Something went wrong. Please check your entries and try again.

Recent Code Snippets

Bulk remove posts from category 1

Bulk remove posts from category

Posted in ,

After creating a child category I wanted to remove the parent category from 30 posts. I finally searched for “how to remove a post category in bulk edit in wordpress” and and lo and behold the second result led me to this plugin. It works perfectly. I’m only sorry I […]

Read More
wizard of oz lions, tigers, and bears

Privacy, Cookies, & ADA Compliance — Oh My!
— Privacy Pt. 1

Posted in , , , ,

With more and more privacy laws on the horizon, we advise all of our clients to not only have a Privacy Policy in place but also have a strategy to keep it up to date with newly required disclosures. An up to date Privacy Policy can help you avoid significant […]

Read More
Elementor vs Beaver Builder review

Elementor vs Beaver Builder review

Posted in , , ,

I came across an Elementor vs Beaver Builder comparison review that was published in August 2020. While I am pretty biased in favor of the Beaver Builder platform the reviewer seemed to favor Elementor. If you are trying to decide which page builder platform to use I’d encourage you take […]

Read More
Mix and Match your RSS feeds 2

Mix and Match your RSS feeds

Posted in , , ,

Ever want to provide your readers with email updates to your website? WordPress’ built in RSS feed functionality provides an easy way to provide the content to email newsletter services like Mailchimp or Mailerlite. But what if you want to create email updates that don’t include all your new posts, […]

Read More
Online GIF tools for regular and animated GIF images 6

Online GIF tools for regular and animated GIF images

Posted in , ,

I made an animated gif screenshot recording to demonstrate a code snippet, but I wanted to resize the image and make it loop. I found a useful website that has easy tools to do that. I reduced the size by 50% and made it auto-loop 30x. Then optimized it to […]

Read More
When should I NOT use WordPress for a website 9

When should I NOT use WordPress for a website

Posted in , , , ,

click the green switch at the top of the screenshots to compare the WordPress vs the Static HTML versions of the same website the static version is live at:

Read More


Skip to content