Website wireframe blocks: Design from inside WordPress!

The WordPress block editor is gaining popularity with every update. The possibilities of building beautiful websites with it are now a reality. 

The WordPress block editor-based page builder Spectra makes the web design process easier than ever.

Spectra comes with different professional page templates, patterns and wireframes. You use the ready resources and customize them with your own content and images to create a fresh looking website.

You can design website wireframes from within the familiar WordPress dashboard and edit, customize and save them as you go. 

This eliminates the need to learn third-party wireframing tools and extends the WordPress block editor’s ability to create prototypes as well as amazing websites.

What are website wireframe blocks?

Wireframe blocks are a set of ready-made WordPress blocks.

Let’s say you want to create a mock-up of a homepage.

You would typically want a top hero section, small introductory section, a section showcasing the services you offer, perhaps a team section, some testimonials, and a call to action to end it all.

You could use a wireframe block that includes that hero section along with a call to action, button and placeholder text.

Rather than building from a series of individual blocks, you can use a website wireframe block to create a complete section in one go.

Wireframe blocks are available in different categories and serve the needs of every section of your website. For example, there are wireframes for about, team, testimonial, CTA, FAQs, and many more. 

By using the ready-made wireframe blocks, you get to focus more on the actual content and leave the structure of your website to us.

Benefits of using Wireframe blocks: 

• Mockup in WordPress: No need to learn any other design software or page builder. Use the familiar WordPress block editor to do the wireframing. 
• Huge time saver: Create complete sections of a website with one simple move.  
• Sleek, clean design: No extra text, no distracting images. Create wireframes with a clean design. 
• Easy conversion: Convert your mockup to the final website design quickly and easily. 
• Theme independent: Wireframe blocks work with all WordPress themes. 
• Inherits customizer settings: Imported wireframe blocks will inherit theme color, typography, and styles from your customizer. 

Wireframe blocks in Spectra

Spectra offers a growing library of powerful WordPress blocks to build stunning websites. 

Along with creative blocks, Spectra also has beautiful page templates in its arsenal and now – Wireframe blocks. 

Wireframe blocks are built to be fully compatible with the WordPress block editor and are available with Spectra and Starter Templates plugins – for FREE! 🙂 

Once you have the latest version of the Spectra – edit the page or post, click on the Spectra Templates button and you’ll notice a new tab called Wireframes.

On the left-hand side, you’ll also notice many categories and an option to choose from among dark and light color wireframes.

Want only dark-colored website wireframes? Select the dark tab. And vice versa for light-colored ones.

Currently, wireframes have 9 categories with 50+ blocks. There’s a wireframe block for just about any section you want to create on your website.

Simply import a block and customize it just the way you want.

The best bit is that it comes free with the Spectra plugin.

How do we include a wireframe on a page using the Spectra plugin? 

Include Wireframe blocks using Spectra

Using Wireframe blocks is incredibly easy once you get the hang of it.

Step 1: Add/edit your page or post 

To begin, log into your WordPress dashboard and create a new page or post or edit and existing one. 

For the sake of this example, we’ve gone ahead and created a page ‘Wireframe Blocks’.

Click on the Spectra Templates Kits button.

Step 2: Select a wireframe

Clicking on a Spectra Templates button will open a window for the template library. You’ll notice a new tab called Wireframes.

Click on Wireframes to see what options you have available.

Step 3: Select a wireframe block

You now get to see all the Wireframe blocks currently available across various categories.

Select a block based on a category of your choice. You can also filter based on the color.

For instance, we’ve selected the About category and filtered the blocks based on light color.

Then click Import.

Your wireframe will be imported onto the page ready to customize.

Step 4: Edit the block and publish

Once you’ve imported the block, you can go ahead and tweak it.  

As mentioned before, wireframe blocks are made up of multiple independent blocks. 

To edit any element within the wireframe, click on the element and edit the settings on the right-hand side. 

Just like you would to any block while working in the WordPress block editor.

Once you are done with your editing, click Update.

You’ve just created your mock-up page using wireframe blocks!

Step 5: Replace wireframe with your content 

Once your wireframe is finalized, you can replace the text, image and color, and your final web page will be ready.

That’s how easy it is! 🙂 

How to design a website using wireframes

We showed you how to use the Spectra website wireframe blocks on a page. Now we’re going to give you a real life example and show you how to create a website from scratch using Spectra wireframe blocks.

We’ll use the following website wireframe blocks to design the website.

• Hero
• Services
• Portfolio
• Team
• Testimonial

Let’s get started.

Add and Customize Hero Section

We’ve created a new page ‘Home’.

Go to the Template Kits > Wireframes area. Click the Hero block from the left sidebar menu.

Choose a suitable hero block and hit the Import button.

The system will import the design onto your page.

Under the General setting, you get the Inner Container Presets option. 

If you want to set preset to the entire container, you can select from the four options:

• The first preset comes with a border in the outside area of the container.
• The second preset has a border inside the container content.
• The third offers a border and box shadow outside the container.
• The fourth adds a border and box shadow inside the container content.

Go to General > Container. 

From here you can manage container width, content width, content box width and minimum height.

You can enable the Equal Height of the content, define the HTML tag and customize other essential settings if you need to.

If you want to change the default flex layout of the hero area, you use the Flex Properties settings.

Under settings, you can set the configure Flex Direction, Align Items, Justify Content and Wrap.

For more design customization, you can use the Styles settings.

Let’s change the heron section content.

Change the hero image first. You can customize the image using the right side block settings.

Now update the left side content of the hero section as required.

Add and customize the services area

Visit the Wireframes area once again.

Find a suitable service design layout. Hit the Import button.

The service section has been added successfully to your homepage.

Change the service section heading. You can use General > Content area settings to customize the heading.

You can manage the alignment, HTML tag and other settings to make the heading more eye-catching.

Now remove the default service image and add your own. You can use the right side block setting to modify each image.

We’ve added other three service images so you can see how the section changes.

Now change the sub heading as required.

Let’s move on and design the portfolio section.

Add and customize the portfolio section

Choose a portfolio wireframe block and import it into the page.

After adding the wireframe, you get a new portfolio section for your website.

Update the heading text and customize it as required.

Finally, change the images to make a good looking portfolio showing off your best work.

Add and customize the team area

Spectra comes with several team wireframe blocks. You can use them to help tell your story and share personalities that make up your business.

Here, we’ve added the following team block.

Change the images, update the heading and add a description if you need to.

Add and customize a testimonial section

If you want to add a testimonial section to your website, you can easily do it using Spectra wireframes.

There are multiple testimonial design layouts. You can choose and customize any of them and make them unique.

We’ve added a testimonial design layout from the wireframes area.

Let’s customize it.

Update the testimonial quote.

Change the name of the person who gave the testimonial and add an image if you have one.

Finally, click the Update button to save the page content.

Let’s have a look at our newly designed website.

Create website wireframes inside WordPress

If you’re a freelancer, developer, or business owner, website wireframes are a great way to create a mock-up. 

They help you finalize the design and reduce your workload. All while delivering an amazing website.

Instead of using complicated online tools or old-fashioned paper to plan out your website, using wireframes, you get to create one right from your WordPress dashboard.

Wireframe blocks are built for the WordPress block editor. They work seamlessly with any theme and make short work of building pages and entire websites.

Go ahead and update the Spectra plugin now and get cracking on your wireframes. We think you’ll love them!

For any assistance, our dedicated support team is just an email away.

Cheers!