10 Ways to Use Wireframe Blocks

The Kadence Blocks plugin’s Design Library includes a whole new collection of pre-built blocks or elements called Wireframes. These clean sections are designed to help you build and plan out your site without getting too bogged down by design details so you can focus on the way

If you’re new to the wireframing stage of the web design process, we hope you’ll quickly see the way it can speed up your workflow when it comes to new designs or revisions of existing content.

The intent of a wireframe is to give the designer an obvious overview of a website’s:

• Layout
• Structure
• User flow
• Intended behaviors
• Information architecture
• Functionality

Wireframing is a useful tool because it provides a raw layout – more like a sketch – for you to use for your page designs. It allows you to plan how everything is going to be set up on your website before you get bogged down with too many details.

• You can think of wireframing in terms of a blank sketch or a raw layout.
• Wireframing helps you, the designer, plan how everything is laid out on a page or screen before getting bogged down with details.
• Wireframing can also be an incredible tool in simplifying your content and eliminating extra “fluff” that can be ineffective and distracting.
• Wireframes are a great starting point before building out a web page, especially when you’re working with clients.
• Wireframing often takes place in a separate app or even on paper, but now you can wireframe inside WordPress!

50+ Free Wireframe Blocks You Can Use

Let’s just say the free Kadence Wireframe Blocks library is robust. You can even filter the wireframes by category, making your search even easier.

Right now, you can access 50+ different wireframe blocks you can use, including:

• Content Wireframe Blocks – Use this set of wireframe blocks to lay out the content-rich areas of your site, like sections for FAQs, a styled bulleted list, even email signups.
• Pricing Table Wireframe Blocks – Wireframe pricing tables with minimal styling to get a better grasp on pricing options
• Footer Wireframes Blocks – These wireframe blocks make it easy to plan the footer area of your website
• Testimonial Wireframe Blocks – Don’t forget all the great things your customers have to say! These helpful blocks help wireframe testimonial sections on a page.
• Countdown Wireframe Blocks – Countdowns help drive urgency, but all the style options can get unruly when you’re first starting out with a new design. These blocks give several options for wireframing countdown timers.
• Portfolio Wireframe Blocks – These wireframe blocks provide a starting point for portfolios.
• Form Wireframe Blocks – Forms are another element that can come with a ton of design options, so these simple form blocks give you several basic bstarting points when wireframing.
• Grid Wireframe Blocks – Use these wireframes to display content in a compelling way.
• Table of Contents Wireframe Blocks – Table of contents allow your readers to better navigate long-form content.
• Gallery Wireframe Blocks – Show off images and visual content.
• Simple Cards Wireframe Blocks – Cards allow you to highlight content or divide things into better-organized sections.
• Countdown Wireframe Blocks – Countdown timers help drive urgency related to the expiration of an offer or certain date/time.
• More to come! Our plan is to provide a total of 50 helpful wireframe blocks, so stay tuned as more are added!

10 Ways to Use Wireframe Blocks

Here are 10 ways you can use the wireframe elements provided in the Kadence Block’s plugin’s Design Library.

1. Home Pages

A redesign of a home page can seem risky, especially if it’s the “front door” to a company’s business or brand. Wireframing the basic design structure can help you (and your clients) break down the process into a more manageable process. These wireframe elements can help you quickly build out a “sketch” of a new home page design in just a few clicks: Header, Content w/ Columns, Cards, Testimonials, FAQs, Forms, and Footers.

2. Product or Services Pages

When it comes to selling products or services online, a dedicated page that unpacks the features or benefits of a product or service can lift sales and generate more leads. Wireframing the design or a product or services page allows you to think through how to display features, unique selling propositions, CTAs, pricing tables, FAQs, and more.

3. Lead Generation Landing Pages

Lead generation pages can take all sorts of different forms depending on the sector and motivation behind the page. They all have one thing in common, however: to collect valuable user information that can be harnessed for marketing purposes. Wireframing the most necessary and important parts of a landing page allows you, as the designer, to think through user flow and CTAs all for the purpose of raising conversions.

4. Splash Pages for Sales & Special Offers

For businesses that run seasonal sales or coupons as a marketing strategy, a splash page that highlights a special offer can greatly lift conversions. Having a landing page that explains the offer and when it ends can also assist with email marketing and social media marketing efforts as well. A wireframe of this type of page allows you to plan the design of the most important information, like when the sale ends, what the offer includes, and how to buy. The Kadence Blocks plugin’s Wirefame collection includes elements for countdown timers and pricing grids, which are both key elements of this type of landing page.

5. Longform Content Pages

Often, longform content deserves a more intentional design focus to keep a reader engaged with the content. The challenge of designing the layout of longform content can be tackled with wireframing basic page elements before adding final design details like images, quotes, and section divisions. This way, writers can also take inspiration from ways to organize lengthy content.

Wireframe content elements like table of contents, pulled quotes or block quotes, inline images, highlighted text, and more.

6. Portfolios

Portfolio pages represent an opportunity to show off your company’s best work. Say, for example, you own a web design agency. Your portfolio page should include beautiful photos of your past projects, including brief contextual descriptions. Wireframing the ways these photos and descriptions are displayed, along with additional information and CTAs that guide site visitors to scheduling a consultation or purchasing a service plan.

7. Contact Pages

Your contact page is incredibly valuable, helping to convert leads to sales and ensuring that communication channels with stakeholders remain open. Try to incorporate only necessary information such as a contact form, contact information such as email address(es), phone numbers, and office addresses. You can also include links to social media accounts. Wireframe out how your contact page will look as you think through the purpose of providing contact information to visitors and the action you want them to take.

8. FAQ pages

Well-designed FAQ pages can significantly reduce the number of customer inquiries while saving your visitors time and effort. A comprehensive FAQs page enriched with keywords will also work wonders for your search engine optimization (SEO) strategy. The Kadence Blocks plugin’s Wireframe collection includes great starting points for accordion-style FAQ elements to help guide the basis of an FAQ page design.

9. Team Pages

Behind every thriving company is a team of creative and personable individuals. If you want to boost faith in your brand and encourage talented people to apply for your vacancies, a compelling team page is fundamental. As well as adding headshots of your staff members, you should include brief employee profiles that contain details such as their name, job title, number of years spent with the company, key accomplishments and awards, and a few fun facts. A wireframe of a compelling team page will help with the organization of all of your necessary team information.

10. About Pages

About pages represent an excellent opportunity to tell a brand’s story, build customer trust, and highlight your key selling points. You may also wish to elaborate on your unique business model or add explanatory content that you cannot squeeze into your homepage. Taking the time to wireframe an About page design means moving beyond a standard page layout to incorporating well-planned design elements such as photos, facts, testimonials, and more.

Putting it All Together: An Example Wireframe Built with Kadence Wireframe Blocks

Just in case you’re wondering how a whole wireframe might look for a page, we built out this example for a product page. In this example, you can see how quickly you can get a solid starting point for a new design. This page includes wireframe blocks for the header, buttons, features, testimonials, pricing table, and FAQs.

Get Kadence Blocks Today to Start Wireframing in WordPress

The new Wireframe blocks are available in the free Kadence Blocks plugin (v2.1+). Download Kadence Blocks for free to get started!