Using the Block Editor with Inspiro Premium

The block editor, previously known as Gutenberg, is the default content editor in WordPress. It replaced the Classic Editor and introduced a new way of building pages and posts using modular components called blocks.

Inspiro Premium is fully compatible with the block editor and includes multiple starter sites built entirely with blocks, offering a fast, lightweight, and flexible way to build a website.

---

1. Block Editor Basics

The block editor is built directly into WordPress, meaning no third-party plugin is required to start creating custom layouts. It offers improved performance, cleaner code, and better loading speeds compared to many page builders.

While the block editor still has some limitations in terms of customization compared to visual builders like Elementor, it continues to evolve rapidly. It’s a great choice for building lightweight websites, especially for portfolios, blogs, business sites, and personal projects.

Starter Sites built with the block editor are available in WPZOOM → Demo Importer. These sites are marked with a black round icon with a stylized “G”, representing the Gutenberg editor.

---

2. The Structure of the Block Editor

The block editor is made up of three main areas:

1. Inserter (+ icon): Click to open the block library and insert new content blocks
2. Content Canvas: The main editor where you build the layout using blocks
3. Settings Panel: Appears in the right sidebar; displays settings for the selected block or for the entire post/page

In the block editor, each piece of content—text, images, buttons, videos—is added as an individual block. Each block comes with its own set of controls and can be moved, styled, duplicated, or removed independently.

You can combine multiple blocks to create sections and layouts, and the editor stores the entire page content in the WordPress database in a structured format.

---

3. Inspiro Integration with the Block Editor

Inspiro Premium is fully integrated with the block editor, allowing you to build your entire website using blocks, including:

• Pages
• Blog posts
• Portfolio items
• Slideshow posts

Inspiro Specific Features in the Block Editor

🛈Inspiro Settings Panel

When editing a page, click the black circular icon with a stylized “i” in the upper-right corner. This opens a panel where you can:

• Choose between default and full-width content layouts
• Show or hide the page title

Inspiro Premium Block Patterns

Go to Block Inserter → Patterns → Inspiro Premium to find pre-built layouts (e.g. About, Services, Hero sections).
These patterns allow you to quickly insert styled sections and replace the demo text with your own.

WPZOOM Plugin Blocks

If you install a WPZOOM plugin (like the Social Icons or Portfolio plugin), new blocks will appear under the WPZOOM category in the block inserter. You can insert:

• Social Icons
• Instagram Feed
• Video Popup
• Portfolio Gallery
• Contact Form

WooCommerce Integration

After installing WooCommerce, the block inserter will include a set of shop-related blocks (e.g. Product Grid, Featured Product, Cart, Checkout). You can use these to build custom product pages or even full shop layouts—directly from the block editor.

---

4. Customizing Blocks

After inserting a block into your page:

1. Click on the block to select it

2. The right sidebar will display block-specific settings (if not visible, click the gear icon in the top-right corner)

3. Customize the block’s:

• Typography
• Spacing
• Color
• Alignment
• Link behavior
• Style options (depending on the block type)

Different blocks have different customization options, and these settings let you control the appearance and behavior of each element individually.