Blocklayouts

Building a WordPress site from scratch can take a lot of time. Choosing layouts, styling blocks, and wiring up pages often slows down projects that should move faster.

Blocklayouts is a WordPress plugin that tries to fix that. It gives you a library of pre-designed patterns, full-page templates, custom blocks, and extra styling controls so you can build pages in minutes instead of hours. In this first look, we walk through the website, the documentation, and a live test inside the block editor to see how it works in real use.

How to Get the Best Deal on Blocklayouts

InfluenceWP has an exclusive Blocklayouts deal.

Blocklayouts – First Look Video

Documentation and Pre-Designed Patterns

Getting Started With Installation and Docs

From the footer, the documentation link stands out and leads to a clean docs area. For a first-time user, this is where confidence starts to build.

The docs include:

• A getting started section
• Installation steps
• Screenshots with annotations
• Short videos that walk through the basics

The screenshots are clear and show the WordPress admin, so you can follow along without guessing. During setup, there is no license screen inside the main plugin settings. Instead, the plugin asks for your license key prompt when you try to add a pro element, like a premium pattern or template. At that point you can either paste your key or choose to upgrade.

The basic flow looks like this:

1. Install and activate the Blocklayouts plugin in WordPress
2. Open the block editor on a page or post
3. Add a Blocklayouts pattern, and enter your license key when you select a pro item

This keeps the initial setup light while still connecting pro features to licensing when needed.

Patterns Library Highlights

The patterns library is the core of Blocklayouts. On the site, there is a patterns page where you can preview designs and copy them directly. In the editor, you see the same idea, but within the block editor panel.

Patterns are grouped into clear categories. For example, when you open the hero sections category, you see multiple ready-made hero layouts. Each one can be copied in two ways:

• Unstyled so it uses your theme’s colors and fonts
• Styled so it brings in the custom styles from Blocklayouts, like colors, font sizes, and spacing

This copy preference is great if you want more control over branding. You can start with layout only or pull in full styling and adjust from there.

Pattern types include:

• Hero sections for strong page intros
• Full-page templates for quick site starts
• FAQs, team sections, feature grids, and call-to-action blocks
• Search and filter tools so you can find what you need fast

In the editor pattern library, you can also sort patterns by title, premium status, or date created. You can adjust the preview size and use pagination when there are many entries. That mix of browsing tools makes it easy to scan layouts and drop in the one that fits your page.

Free Plugins, Custom Blocks, and Extensions

Blocklayouts does more than patterns. The site also lists several free plugins, two custom blocks, and one extension that extends the styling tools inside the block editor.

Free Plugins Overview

On the plugins page, Blocklayouts offers some small, focused add-ons at no extra cost. These include:

• Enable hover color for more interactive hover states
• Inverted radius for different border shapes
• A throwable block that lets you throw and bounce content with physics

These mini tools are fun and add unique touches to a site. Since they are free, they are an easy way to test the style and quality of the developer’s work.

Custom Blocks in Depth

The main Blocklayouts plugin includes at least two custom blocks that we tested: an icon block and a marquee block.

Icon block – The icon block gives you an icon library inside the editor, where you can:

• Browse icons by category
• Use a search field to find what you need
• Preview icons before inserting
• Add your own custom SVGs

When you add a custom SVG, you paste in the SVG code and control size, color, and other design options. This makes the block useful for both simple icons and more tailored brand assets.

Marquee block – The marquee block handles scrolling content. If you have seen text or logos sliding across a screen on a loop, that is a marquee effect. In Blocklayouts, the marquee block can handle text, images, logos, or buttons.

The options include:

• Direction of scroll
• Speed of the movement
• Gap between items
• Pause on hover

You can place partner logos, short messages, or badges into the marquee and let them scroll across the page. The plugin lets you put almost any block inside it, so you are not limited to plain text. If you want to see this section in action, the “Custom Blocks Overview” part of the video starts around the 3:21 mark of the First Look video.

Extensions for Advanced Tweaks

Blocklayouts also offers an extension called Additional CSS. This is built to extend the style controls on both WordPress core blocks and Blocklayouts blocks.

With this extension, you can adjust:

• Position, z-index, and transform
• Effects like background blur and opacity
• Overflow handling and other layout details
• A custom CSS editor for more direct control

These tools sit inside the block sidebar under styles, so you can push designs a bit further without jumping into a theme file.

Hands-On Demo: Building a Page With Blocklayouts

To see how Blocklayouts works in practice, we installed it on a clean test site with no other plugins active. That gave us a clear view of its features inside the editor.

Setting Up and Accessing Patterns

After activation, we opened the WordPress block editor and created a new page, named simply “BL.” Inside the editor, there are a few ways to add blocks: the blue plus icon in the top left, the inline plus inside the canvas, or the slash command.

Blocklayouts adds its own entry in the interface, labeled as a pattern library. When we clicked it, a panel opened that showed all available patterns and templates.

Key tools in that panel:

• Categories to narrow down pattern types
• A search bar to find layouts by name
• Filters to show, for example, free or pro items
• A settings panel that controls sort order, preview size, and pagination

Some patterns have pro tags. When you insert one of those, a prompt appears that asks you to either enter your license key or upgrade to a paid plan. That is how the plugin handles access to premium layouts.

To insert a free full-page template, such as “Home 1,” the flow is simple:

1. Click the Blocklayouts pattern library icon in the editor
2. Pick the “Home 1” template from the list
3. Insert it into the page and wait a moment for it to load

In a single click, you have a complete page design ready for your own text and images.

Building and Mixing Patterns

Once the page template is in place, you can keep building by adding more patterns. Blocklayouts lets you treat patterns like building blocks you can stack.

For example, you might:

• Use a hero section at the top
• Add a features block to explain your product or service
• Drop in a team block to show who is behind the business
• Add a CTA block for your main call to action
• Insert an FAQ pattern near the bottom to answer common questions

You can mix and match in any order. If you change your mind, the editor’s undo and redo tools work as usual, so you can test layouts without fear of breaking the page.

We published the page once, then came back to add an FAQ pattern below the template content. It dropped into place cleanly. That showed that you can start with a full-page template, then layer on more patterns over time as your content grows.

Styling With Additional Options

Every block on the page still uses the normal WordPress block sidebar. With Blocklayouts active, that sidebar gains more options, especially in the styles tab.

On a typical block, you can adjust:

• Width and height
• Padding and margin
• Borders and radius

In the styles tab, with the Additional CSS features, you also see:

• Position (static, relative, absolute, and so on)
• Z-index for stacking order
• Transform options
• Background blur and opacity
• Overflow controls
• A field for custom CSS

There is also an effects section that covers animation. You can choose:

• Trigger (on appear or on scroll)
• Animation type
• Easing
• Duration
• Delay

As a simple example, we added an animation to a CTA block.

1. Select the CTA block in the editor
2. Open the styles tab and find the effects section
3. Set the trigger to “on scroll.”
4. Choose a “slide up” animation
5. Set a delay of 0.5 seconds
6. Save and view the page on the front end

When we scrolled down the page, the CTA slid up into view after a short pause. It looked clean and helped draw attention to that section. You can see similar styling in the video around the 9:10 mark of the First Look video.

Custom Blocks in Action: Icons and Marquee

After testing patterns and templates, we moved on to the custom blocks inside Blocklayouts: the icon block and the marquee block.

Using the Icon Block

To add the icon block, we used the slash command in the editor, typed “block,” then selected the Blocklayouts icon block from the list. Once the block was in place, the sidebar showed the icon library options.

You can:

• Browse icons or search for a keyword
• Pick an icon and see it update live
• Adjust size and color
• Paste your own SVG code through the custom SVG paste feature

In our quick test, we changed the icon color to yellow and increased the size. The block responded right away. That kind of control makes it easy to keep icons aligned with a brand color palette.

Marquee Block Demo and Options

Next, we added the marquee block. We searched for “marquee” in the block inserter, then dropped it onto the page.

We replaced the default text with “InfluenceWP loves Blocklayouts” to see how it looked. With the marquee selected, the sidebar revealed its settings.

Marquee controls include:

• Direction of the scroll (for example, horizontal with a fade)
• Speed of the animation
• Gap between each item in the line
• Pause on hover to stop the scroll when the mouse is over it
• An inner plus icon that lets you add more items, such as text or media

To test images inside the marquee, we clicked the inner plus button and added an image from the media library. On the front end, the text and image scrolled together across the page. It was a bit rough in our quick demo, but it proved that the marquee can carry more than just text.

The effect is super cool when used with care, especially for logo strips or short promo messages. If you want to see the closing thoughts and overall reaction, check the video around the 15:41 mark of the First Look video.

Final Thoughts

Blocklayouts left a strong first impression. The plugin gives you pre-designed patterns, full-page templates, custom blocks, and extra styling controls, all inside the native block editor. You can go from a blank page to a structured layout in a few clicks, then fine-tune details with animations and CSS options.

The documentation is solid, with clear screenshots and videos. The free plugins, icon block, and marquee block add personality to sites without extra effort.

We are definitely going to consider Blocklayouts on future builds where speed and design flexibility both matter.