Case Study Blueprint Part 2: How To Build Case Study Templates Fast with Page Blocks
You already know how effective client case studies are at converting prospective clients into paying customers…
...especially if you read our Ultimate Case Study Blueprint post that walks you through exactly how to write a case study. In it, we analyzed several examples from across the web to distill the best qualities from each and end up with a step-by-step guide on how to build your own conversion focused case study landing pages.
But sometimes, putting step-by-step guides into practice can be more difficult than you expect, so this post will pick up where the Case Study Blueprint article left off.
Watch the video or keep reading to learn how to create a beautiful, reusable and conversion focused client case study template fast using nothing but the Page Block designs available inside Thrive Theme Builder & Thrive Architect.
The Ultimate Case Study Blueprint
If you haven’t had the chance to download a PDF copy of the Ultimate Case Study Blueprint yet, click the button below so you can see all the different sections and elements we’ll be recreating with Page Block designs:
By using Page Blocks to create your own case study template (following the exact Blueprint structure), you’ll end up with landing page that looks something like this:
This design is not only quick and easy to create with Page Blocks, but it’s also mobile responsive – straight out of the box!
And because all our Page Block templates are also Smart Color enabled, your case study pages will always match your site’s Brand Color no matter how often you change it:
So how ‘bout it? Are you ready to build your own client case study template with Page Blocks using the Ultimate Case Study Blueprint design? Keep scrolling...
How To Build It with Page Blocks
To get started, open your WordPress dashboard and create a new Page.
Name it something generic like “Case Study Template” (so you can one-click clone it for actual case studies once your template is finished) then save the page as a draft. After that, click the “Launch Thrive Architect” button to open the visual editor.
Select the “Completely Blank Page” option when prompted:
From there, start building your case study template by clicking the “Add A Block” button to open the Page Block Template Library:
Once the Page Block Template Library appears on screen, it’s time to select your...
1. Hero Area Section
As per the Case Study Blueprint design, this template begins with an above-the-fold Hero Area that includes a:
- Benefit driven headline
- Positive and engaging quote about your business from the client
- And an authentic, eye-catching image of your client or their business
To find the right Page Block design, filter for the “Hero Area” templates in the library’s left sidebar and select one of the options that includes these elements:
Once the Page Block design loads, you can swap out demo images for photos of a client (or their business) and replace the demo text with more instructional style copy (to help prompt yourself to write good copy when crafting an actual case study):
From here you can continue on to building the next section by clicking either the “+ BLOCK” button at the bottom of the existing Page Block (shown above) or by dragging & dropping the Block element into the editor window (shown below):
2. Impressive Stats Section
The next thing to add to your case study template is an Impressive Stats section. If you filter for “Statistics” templates in the Page Blocks library, there’s a design available that was made for exactly that purpose:
Once loaded, just update the demo text as needed to give yourself the necessary instructional prompts for future case studies:
3. The Challenge Section
Next, you need to add a Challenge section. Do this by filtering for “Text/Content” Page Block designs and selecting the one you feel will help you best showcase a client’s problems, goals & frustrations:
Once you replace the demo text with instructional copy, it should look something like this:
4. The Solution Section
Move on to building your Solution section by filtering for “Illustrated List” templates.
If you don’t find the design you’re looking for, click the “Filter blocks” dropdown menu (underneath the search bar of the template library’s left sidebar) and select the “Show me all the blocks!” option. This setting will make sure both your Shapeshift Theme Page Blocks AND the Thrive Architect Content Block templates are available to choose from.
Filter for the “Illustrated List” designs again and select the one you like best:
Once the Page Block design loads, create an attention-grabbing pattern interrupt by changing the Block element’s default white background color to one of the light accent colors from your Thrive Theme Builder brand color palette. This change of background color will visually signal to readers that they’ve entered a new landing page section and help keep them reading:
And once you replace the demo text with more relevant instructional copy, your Solutions section should look similar to this:
5. Client Testimonial Section
Moving on, it’s time to add a small Client Testimonial section. If you’ve been following along so far, you know the drill…
Add another Page Block to your landing page, filter for Testimonial templates and select one that looks similar to the Case Study Blueprint:
Again, you can change the Page Block template’s default white background color here with your Thrive Theme Builder brand color… this will really make your testimonials POP.
Just be aware that the default grey text color on this template won’t look very readable with certain dark brand colors — so you may need to change the text color to white if this happens.
But instead of changing each individual Text element’s font color, you should follow the Outside-In Principle and highlight the largest container (in this case the Block element), open the Typography tab in the left sidebar, and then change the font color to white there instead.
By doing it this way, all the Text elements within that particular Page Block will update together automatically:
6. The Results Section
Here’s the place to show off impressive client results with graphs and charts by using some of the Page Block “Statistics” templates available. Filter for them in the Page Blocks library and select one of the options with a Heading element:
Then, if you still need to include even more graphs or charts to your Results section, add another “Statistics” template to the page and then drag and drop them into the first “Statistics” Page Block you chose. Just delete the empty Page Block this step leaves behind.
After replacing the demo text with your instructional copy, your Results section could look something like this:
7. Feel Good Results Section
The Case Study Blueprint recommends creating a “Softer, Feel Good Results” section that follows your charts and graphs. If you decide to include this optional section, you’ll find some interesting Page Block options to fit this purpose by filtering for the “Illustrated List” designs once again:
After you update the demo text with instructional copy, you should have a neat image-commentary section you can now use whenever you need to show off some feel good results to help better connect with your prospective clients:
8. Client Video Testimonial Section
As per the Case Study Blueprint’s design recommendations, you should do your best to acquire happy client video testimonials.
If you’re able to get such client testimonials, use one of the video “Call to Action” Page Block designs to create this next section:
From there, you can templatize the text and swap out the demo video for one of your own.
Also, because the Case Study Blueprint recommends creating a dedicated Call to Action section after the video section, delete any default Call to Action buttons included in the template you chose:
And don’t forget to scroll back up to your Hero Area section at this point so you can assign a smooth scrolling jumplink to the Button element there. Doing so will send visitors down to the testimonial video upon clicking:
9. Call to Action Section
The most important part of any conversion focused landing page is its Call to Action section.
That’s why it’s no surprise that the Case Study Blueprint features a prominent Call to Action section immediately after the Client Video Testimonial section.
As you might expect, you can add a Call to Action Page Block design by filtering for the “Call to Action” templates and selecting the one that suits your needs best:
Now, if the default background color of a Page Block you select ever conflicts with the Page Block design above it (e.g. the Fancy Divider of the Video Testimonial section doesn’t transition well into the background color of the new Page Block below it), don’t worry because it’s easy to fix that color clash.
In this example, you can just change the background color of the new Call to Action section to white, and then open its Decorations tab so you can modify the color of its bottom Fancy Divider design to one of your brand color palette’s accent colors (shown below):
These customizations make sure that the Testimonial Video section and Call to Action section beneath it blend together naturally while preserving their Fancy Divider design flourishes.
Also, you may need to increase the pixel height of your Call to Action section’s Fancy Divider (shown in the sidebar below) so it can blend seamlessly into the next landing page section too.
After making all these customizations and replacing the demo text with instructive copy once again, you should get a good looking result like this:
10. Related Products or Services Section (Optional)
If it makes sense for your business, the Case Study Blueprint recommends adding a Related Products or Services section beneath your Call to Action. The best Page Block templates for this purpose are the “Product Highlight” designs. Filter for them in the Page Block Template Library and select the one you like best:
Then, make any design customizations you need to (most likely the Block element’s background color and the Button element's hover styling).
To do this, change the Block element’s background color to match the color of the Fancy Divider design above it (again, so they blend together seamlessly) followed by changing the hover styling for one of the Button elements in your related products/service Content Box (shown below):
After making these customizations, you can delete the other default related product/service Content Boxes, clone the one you already customized, and then drag & drop the clones into the empty Column elements.
You should end up with a final design for your Related Products or Services section that looks like this:
11. Minimal Footer
To finish off your case study template, simply add a footer to the bottom of your landing page. You can do this by highlighting the Page element in the breadcrumbs and then click on the eyeball icon within the Footer box in the left sidebar:
With that, your case study template is locked & loaded for desktop!
You only need to double check that the design you just put together displays properly for tablet and mobile devices by making small tweaks where necessary. Remember that Page Blocks are mobile responsive by default so only a few design modifications to tablet and mobile should be required.
You can do this tablet and mobile design quality control step by first clicking on the Tablet icon (at the bottom of the visual editor window), scrolling through the tablet mode to make any necessary adjustments, and then doing the same thing for mobile (by clicking on the mobile icon).
Save your work and you now have a fully functional landing page template ready to reuse over and over again for your upcoming case studies!
How To Clone Your Template for Actual Client Case Studies
When you’re ready to create an actual client case study, you just need to one-click clone the template you just built.
To do this, simply open the Pages tab in your WordPress dashboard and locate your “Case Study Template” page.
Hover your cursor over the page to see a set of options appear under its title. Click on the “Clone” option to create a copy of your template:
Now rename the clone to fit the client you’ll be featuring. From there, just open the Thrive visual editor and start replacing each section’s demo images and instructional text with appropriate content about your client.
Once that’s complete, just save your work, update the page’s backend information (e.g. the featured image, permalink, etc.) and publish your new case study!
Dynamically Display Your Published Case Studies with the Post List Element
If you end up publishing several client case studies on your website, consider showcasing them on either your homepage or a “Success Stories” silo page (maybe both!) where prospective clients are more likely to find them.
Luckily, the Post List element makes the task of dynamically displaying your latest case study pages super easy. Simply add a Post List element to a section of your homepage or use one of Thrive Theme Builder’s many silo page templates (that all prominently feature Post List elements in their designs) to create a search engine friendly “Success Stories” page in a matter of minutes.
Just use the Post List element’s advanced filtering rules to dynamically display your client case studies by clicking on the “Filter Posts” button inside the Post List tab of the left sidebar:
Once you’ve programed your Post List element to display all of your case study pages (we recommend from newest to oldest in descending sort order), save & preview your work to see how they’ll now dynamically display based on the display rules you established:
Time to Make Your Case (Study)
Yes it’s true… Page Blocks really do make it that easy to build a conversion focused client case study template — in just a couple of clicks.
They even give you the added bonus of being mobile responsive and smart color enabled straight out of the box!
So are you ready to start publishing new client winning case studies using the Page Block designs showcased in this post? Make sure to get your copies of Thrive Theme Builder and Thrive Architect by joining the Thrive Membership…
… and leave us any questions about or design ideas you have for new Page Blocks in the comments section below!