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:
- Call to action. A short sentence or phrase that communicates your value proposition or prompts the visitor to take a specific action.
- 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.
- 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.
Modern Law’s homepage is another simple, textbook example of a hero call to action.
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.
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.
Roulston Urquhart uses a striking hero image and moves the call to action to the upper right where it is visible on every page.
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.
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.
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.
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.
Here’s another textbook example from Haugen Law Group. However, this is another hero that might be a little low-contrast.
One more textbook example, from Eifert Law Firm.
If you are designing a law firm website, I hope you’ve found some inspiration for your homepage!