|
/ Documentation /Blocks/ Wireframe Blocks

Wireframe Blocks

Note:

The Wireframe block has been deprecated and replaced with the newly enhanced adaptive design library.

Wireframing the structure of any website before beginning the design process is very important. It increases work efficiency, makes the workflow more effortless, and helps you get the final website design ready in less time. Now you can create your page or website mockup faster than ever with Spectra Wireframe Blocks.

This document will help you to understand how wireframe blocks work and what benefits they bring. 

What Are the Wireframe Blocks?

Wireframing means having a basic structure of your webpage like some sections, their layout, image position, text position, and so on. This gives you an idea of how you can manage content on any webpage.

But if you ever try creating wireframes using online tools or even with simple pen-paper, you will understand it is not quite easy. You will have to understand and study how the online tool works. And well, working with pen-paper is neither convenient nor reliable as the design might end up undone.

Usually, you would create wireframes on external platforms and then transfer the designs to your website. Spectra offers ready-to-use Wireframe blocks right inside the Gutenberg editor, helping you avoid those extra efforts. You can now create your wireframe design directly on your website.

Benefits of using wireframe blocks:

  • Provides basic structure to start any website design.
  • Save your time in creating a wireframe with an external tool or traditional pen-paper
  • Just replace the image, text, and add colors in the wireframe to make the final website design ready in less time
  • Make website designing smooth and effortless

How To Use the Wireframe Blocks?

The Wireframe blocks can be accessed through the page/post editor. You can add an unlimited number of blocks and create the whole page or post structure in no time.

Note:

The Wireframe Blocks are available with Spectra version 1.25.0 and above.

We’ll show you an example of how you can create a page structure that you can share with your team or client:

Step 1 – Navigate to Dashboard > Pages > Add New. In the top menu of the page editor, click on the “Spectra Templates” button. This will open the Spectra Templates Library;

Wireframe Blocks

Step 2 – In the top menu of the Library, click on the “Wireframes” tab. Here you can find all wireframe blocks available;

Wireframe Blocks

Note:

If you don’t see the Wireframe blocks, please sync the Spectra templates Library (the “Sync” button is located in the top right corner of the Library).

Step 3 – Here, you can filter the blocks by color and category and import the wireframe block to your page. You can do this by hovering over the block you need and clicking on the “Import” button;

Wireframe Blocks
Wireframe Blocks

Step 4 – Repeat steps 2 and 3 until you import all the blocks you need;

Step 5 – Once imported, you can reposition and modify blocks as you wish. Once your wireframe design is done, click on the “Publish” button to save your changes.

Now you’re ready to review and share your wireframe page mockup with whomever you want. 

Once the final page design is decided, there is no need to create a new page. You can directly modify the wireframe blocks as needed and replace placeholders with your content.

That’s all. Your wireframe design is turned into the final design in no time. 

Was this doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

%title %title
On this page

Get Notified When Available

Note - You can purchase the Essential Toolkit now and easily upgrade to the Business Toolkit once it becomes available.

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Get your hands on Spectra Pro

Enter your name and email address to get access to Spectra Pro.