Wireframing Blocks from Kadence Blocks are a new set of WordPress block elements that give you prebuilt, clean sections to help you build your site … right from within the native WordPress block editor. Pretty cool, right?
The free Kadence Blocks Wireframe Library just got even bigger! We just added 20 new wireframe block elements so you can start building your page layouts with a quick and easy starting point.
What is Wireframing and Why Is it Useful?
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!
Accessing the Wireframe Elements in Kadence Blocks
When creating a new post or page, click the Design Library tab just to the top left of your content area.
Next, click to open the Wireframe tab. There you’ll see a list of all available wireframes that you can easily import into your page. You’ll now see the whole library of Wireframe block elements you can use.
Newly-Added WireFrame Elements in Kadence Blocks
And now we’ve added even more power to the Kadence Wireframe Library with 20 new elements. Let’s dive in!
1. Pricing Table – Dark
If you are looking for a three-tier pay plan option, then this pricing table wireframe is perfect to help you with your building.
2. Pricing Table – Light
This pricing wireframe will also give you three payment options but the background color of the top section is white. Instead of icons, you have a place to upload a custom image for each plan.
3. Content Layout
This content wireframe element provides two columns and a place for an image along with a headline. This block could be helpful to highlight product features, value propositions, team info, and more.
4. Content Layout with Featured Content Box
This content wireframe also provides two columns but features a box on the left side (similar to a sidebar). A box will draw the eye and call attention to the words or design elements you choose to place in it.
5. Content – Varying Alignment
Another great content wireframe, this one allows for a numbered approach to what you are presenting with varying alignment. It also includes image frames. The breakup of the content helps keep the attention of the reader.
Footers are a great way to add in legal requirements, additional social buttons, and other contact information. This wireframe provides all of that plus a logo.
This gallery wireframe provides a simple way you can share multiple images. It’s perfect for recapping events, sharing new products, or highlighting a new product line.
8. Grid – Cards
A grid allows you to put information together in an easy-to-scan format. You can use this wireframe to show the basics of your services, products, or programs.
9. Grid – High Contrast with Icons
Another great grid option with different color blocks to allow the information to stand out even more.
10. Grid – Light
This grid offers space to add additional information about the elements you are sharing. This wireframe presents a formal block for your readers and would be ideal for lawyers, educational organizations, and the health industry.
11. Grid – Dark Background
This is the perfect grid for showing a product or service that has multiple elements included. The large block with button and image could be used to direct to a landing page while the smaller blocks offer more information about the three main components.
12. Content Section with Quote
When you are writing content for your blog post, it can be helpful to separate out certain information. This wireframe offers two columns, evenly spaced, with one side a large, eye-catching font.
13. Content Section with Pulled Quote
Another content wireframe with two columns but featuring a shaded block for quotes to call out or highlight information.
14. Content Section – Centered Quote
Another way to highlight quotes or feature content is with a block within the content itself. This wireframe works best when you want to draw attention to the most important parts of your content.
15. Content Note – Dark Background
This wireframe block is perfect for defining elements of your content or sharing tidbits of information for your reader.
16. Content Note – Light Background
Do you want to add information that is not necessarily related to the body of content? This note wireframe can be used to give callouts to readers, share random information beyond the content, or to offer words of snarky wisdom.
17. Table of Contents – Left
A Table of Contents will let your reader view the highlights of your content without having to scan the full document. This wireframe places the TOC to the side of the content.
18. Table of Contents – Inline
This wireframe places the Table of Contents at the top of your content and breaks down the content beyond the main subheaders.
19. Simple Cards
Another way to highlight information is to utilize simple cards. This wireframe gives you blocks to customize your icons and information.
20. Simple Card – 3 Column
Finally: here’s another simple card that will allow you to highlight points, products, or tiered information.
Who Gets Access to Wireframe Blocks?
Wireframing Blocks are available to anyone and everyone! If you’re a Kadence Member you will see this as a new tab in the Design Library with the latest Kadence Blocks Pro update.
If you’re not a member, no sweat! Free Kadence Blocks users can get access by subscribing to our mailing list. You’ll find a subscribe pop-up in the Wireframe tab from your Design Library to get free access.
Nearly 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 have over almost 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!
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!