The hero homepage call to action is an effective way to help web design and development visitors do the thing they probably came to do: hire you. It puts the key step—contacting you or scheduling an appointment with you—somewhere it can’t be missed.

Heroes have three key components, all of which should be visible “above the fold” on the page:

  1. Call to action. A short sentence or phrase that communicates your value proposition or prompts the visitor to take a specific action.
  2. Action button. A button or prominent link that allows the visitor to take an action. Usually this is a large button that says something like “Contact Us” or “Schedule Now” and leads to a contact form or appointment scheduler.
  3. Hero image. A hero can work without an image, but an image helps enhance the call to action. On a law firm website, it can be especially effective to use a picture of yourself, so your potential clients feel like they are contacting you, not just filling out a form.

Keep in mind that not every visitor to your law firm website will be ready to hire you right away. Some will want to learn more about you and your firm or their legal problem, first. That’s why the other navigation on your website is also important. Make sure you have a menu in the header that makes it easy to learn more and that contains a secondary call to action for visitors to find when they are ready.

Here are a bunch of law firm website heroes to inspire you. Let’s start with a textbook example: Lisa Feldstein’s website.

Hero homepage from Lisa Feldstein Law Office
Lisa Feldstein Law Office

Modern Law’s homepage is another simple, textbook example of a hero call to action.

Hero homepage from Modern Law
Modern Law

Some firms need to balance more than one call to action, perhaps because they have identified more than one reason people visit their website. Here is one example of that, from Palace Law.

Hero homepage from Palace Law
Palace Law

Here is another homepage with multiple calls to action, from Hoglund Law. I do wonder if this has too many highlighted buttons. There are five calls to action visible above the fold, which might tend to distract visitors rather than help them do what they came to do.

Hero homepage from Hoglund Law
Hoglund Law

Roulston Urquhart uses a striking hero image and moves the call to action to the upper right where it is visible on every page.

Hero homepage from Roulston Urquhart
Roulston Urquhart

The hero homepage for Kimbrough Legal is close to a textbook example, although the action button falls below the fold on most screens, which means visitors will have to scroll down to see it.

Hero homepage from Kimbrough Legal
Kimbrough Legal

The next two, LayRoots and Zafiro Law, are built with the StudioPress (Genesis) Breakthrough Pro theme for WordPress, which uses a twist on the classic hero homepage layout that divides the page horizontally between the call to action and the hero image.

Hero homepage from LayRoots
LayRoots
Hero homepage from Zafiro Law
Zafiro Law

Kim Bennett uses a hero call to action on every page of her website. This is one of those pages, which is close to a textbook example. This text and button may not meet accessibility contrast guidelines, though.

Hero homepage from K Bennett Law
K Bennett Law

The call to action can be more interesting than just bare text. Hamra Law Group takes it to another level, although the action button itself may be a little hard to find.

Hero homepage from Hamra Law Group
Hamra Law Group

Here’s another textbook example from Haugen Law Group. However, this is another hero that might be a little low-contrast.

Hero homepage from Haugen Law Group
Haugen Law Group

One more textbook example, from Eifert Law Firm.

Hero homepage from Eifert Law Firm
Eifert Law

If you are designing a law firm website, I hope you’ve found some inspiration for your homepage!

Leave a Reply

Client Login