Official Documentation — v1.1.0

AxcelersBlocks

Custom Gutenberg blocks to help you build beautiful, responsive WordPress pages faster — no coding required.

WordPress 6.7+ PHP 7.2.25+ Version 1.1.0 Free — GPL v2 Approved on WordPress.org
What is it?

A smarter way to build with Gutenberg

AxcelersBlocks is a focused collection of nine powerful Gutenberg blocks — each with deep style controls, responsive design settings, and dynamic content support — so you can build any page section without leaving the WordPress editor.

9 Purpose-Built Blocks

Every block carries the AXB prefix and is built for real-world page building. From containers to headings, columns to buttons — each block has everything you need and nothing you don’t.

Fully Responsive Controls

Every style property — spacing, typography, layout, backgrounds — can be set individually for desktop, tablet, and mobile. No extra plugins needed.

12 Ready-Made Patterns

Pre-built section layouts — heroes, CTAs, testimonials, media sections, and more — let you drop a polished section onto any page in seconds.

Official WordPress.org Plugin. AxcelersBlocks is reviewed and approved by the WordPress.org team. You can install it directly from your WordPress dashboard or download it from WordPress.org.

What is it?

A smarter way to build with Gutenberg

AxcelersBlocks is a focused collection of nine powerful Gutenberg blocks — each with deep style controls, responsive design settings, and dynamic content support — so you can build any page section without leaving the WordPress editor.

Dynamic Tags

Display live content from your WordPress database inside any AXB block — post titles, excerpts, dates, authors, taxonomy terms, custom fields (meta), ACF fields, and more. Perfect for building query loops and dynamic templates.

Full Style Controls

Every block ships with a complete suite of style panels: Typography, Spacing (padding & margin), Layout (Flexbox & Grid), Backgrounds (solid, gradient & image layers), Borders, Sizing, Position, and Effects (box shadow, text shadow, transforms, transitions, CSS filters).

Responsive Design Controls

Switch between desktop, tablet, and mobile views inside the editor and set different styles for each breakpoint. You can also customize tablet and mobile breakpoint widths from the plugin settings page.

Performance First

AxcelersBlocks uses a block-based inline CSS system — only the styles for the blocks on a given page are loaded. No global stylesheets bloating every page. Clean, semantic HTML output follows WordPress best practices.

HTML Tag Control

Choose the correct semantic HTML tag for each block — h1h6 for headings, pspandiva for body copy, sectionarticleasidediv for containers. Great for SEO and accessibility.

Built-in Icon Library

Insert icons from an included icon library covering general UI icons and social media icons (Facebook, Instagram, X/Twitter, LinkedIn, YouTube, TikTok, Discord, and more). Upload a custom SVG icon if you need something else.

Full Width Template

A dedicated “AxcelersBlocks — Full Width” page template removes the default theme header/footer constraints and gives you an edge-to-edge canvas. Works with both classic and block (FSE) themes.

Secure & Future-Ready

Built following WordPress coding standards with proper sanitization, escaping, and capability checks. Supports the latest block registration APIs (WordPress 6.7 and 6.8+) and provides stable extension hooks for a Pro addon.

Block Reference

The 9 AXB Blocks

All blocks appear under the AXB: Blocks category in the Gutenberg inserter. Search for AXB to find them instantly.

AXB: Box

The foundation block of AxcelersBlocks. A flexible container (like a divsection, or article) that can hold any other block. Use it to wrap content sections, add backgrounds, control spacing, and build complex layouts.

Container Backgrounds Flexbox Grid Full Styling

AXB: Columns

A responsive multi-column layout wrapper. Choose the number of columns, control gap and alignment at each breakpoint, and let columns stack gracefully on smaller screens — all from the sidebar controls.

Layout Responsive Multi-Column Flexbox

AXB: Column

An individual column used inside the AXB Columns block. Each column is its own styled container, giving you independent control over width, background, padding, and other styles per column.

Child Block Container Full Styling

AXB: Heading

A semantic heading block with full typography control. Pick your HTML tag (h1–h6) for proper document structure and SEO, set font size, weight, line height, letter spacing, and colour per viewport. Supports icons and dynamic tags.

Typography SEO Dynamic Tags Icons

AXB: BodyCopy

Styled body text for paragraphs, spans, labels, and more. Choose the HTML tag, control typography, add an icon before or after the text, link to a URL, and use dynamic tags to pull content automatically from WordPress.

Typography Dynamic Tags Icons Linkable

AXB: Button

A fully customisable call-to-action button. Control label text, link URL (including dynamic links), HTML tag, icon placement, typography, background, border, hover effects, and animations — all from the editor sidebar.

CTA Dynamic Link Hover Effects Icons

AXB: Image

An image block with fine-grained display controls. Set object-fit, object-position, width, height, border-radius, aspect ratio, lazy loading, and alt text. Supports full responsive sizing, visual effects like filters and transforms, and dynamic image sources including Featured Image and Author Avatar.

Media Dynamic Tags Responsive Sizing Lazy Load Effects

AXB: List

A styled list container supporting both ordered (numbered) and unordered (bulleted) lists. Control list style, spacing between items, and custom marker icons from the icon library. Supports nesting.

Ordered Unordered Custom Markers Nested Lists

AXB: List Item

An individual list item used inside the AXB List block. Each item can have its own icon, icon colour, and link. Supports nested AXB List blocks for multi-level lists.

Child Block Icons Nested Support

Hover styles included. Most style controls — typography, background, border, effects — have a separate Hover tab so you can set a completely different look on mouse-over, without writing any CSS.

Ready-Made Layouts

12 Pre-Built Section Patterns

Start with a polished layout and customise it to match your brand. Patterns are available in the Gutenberg Pattern Library under the AXB categories.

Hero Sections

AXB: Hero – Image Overlay Centered

AXB: Hero – Split (Text + Image)

AXB: Hero – Dark + Stats Row

Call to Action (CTA)

AXB: CTA – Centered Banner

AXB: CTA – Split (Text + Button)

Media With Text

AXB: Media With Text – Image Left

AXB: Media With Text – Text Left

AXB: Media With Text – Stacked Centered

Testimonials

AXB: Testimonials – 3 Column Grid

AXB: Testimonials – Featured Centered

Featured Posts / Blog

AXB: Featured Post – Hero Card

AXB: Featured Posts – Editorial Layout

All patterns are fully responsive. Each pattern is built with AXB blocks and includes pre-configured desktop, tablet, and mobile styles. They stack and reflow gracefully on smaller screens out of the box.

Getting Started

Installation Guide

AxcelersBlocks can be installed in two ways. Choose whichever suits you best.

Method 1 — Install from WordPress Dashboard (Recommended)

  1. Open your WordPress admin

    Log in to your WordPress dashboard and navigate to Plugins → Add New Plugin.

  2. Search for AxcelersBlocks

    Type AxcelersBlocks in the search box. The plugin will appear in the results.

  3. Install & Activate

    Click Install Now, then click Activate. The plugin is ready to use immediately.

Method 2 — Install Using a ZIP Upload

  1. Download the ZIP package

    Download the AxcelersBlocks .zip package from wordpress.org/plugins/axcelersblocks.

  2. Go to Plugins → Add New Plugin

    In your WordPress admin, navigate to Plugins → Add New Plugin and click Upload Plugin.

  3. Choose the ZIP file and install

    Select the downloaded ZIP file, click Install Now, then click Activate.

Method 3 — Install Manually Using FTP

  1. Extract the ZIP file

    Download the AxcelersBlocks ZIP and extract it on your computer.

  2. Upload the plugin folder

    Upload the extracted axcelersblocks folder to /wp-content/plugins/ on your server using FTP or your host’s File Manager.

  3. Activate in WordPress

    Go to Plugins in your WordPress admin, find AxcelersBlocks in the list, and click Activate.

System Requirements

  • WordPress 6.7 or higher — Gutenberg block editor is required.

  • PHP 7.2.25 or higher — Modern PHP versions (8.0+) are recommended for best performance.

  • Any Theme — Works with classic themes and block/FSE themes. The full-width template adapts to both.

  • ACF (Optional) — Advanced Custom Fields integration is available for the Dynamic Tags feature when ACF is active.

Usage Guide

How to Use AxcelersBlocks

Once the plugin is active, your AXB blocks are available everywhere in the Gutenberg editor.

Adding Blocks to a Page or Post

  1. Open the editor

    Create a new page or post, or edit an existing one. The Gutenberg block editor will open.

  2. Click the + inserter

    Click the + button in the toolbar or within the editor canvas to open the block inserter panel.

  3. Search for AXB

    Type AXB in the search box. All AxcelersBlocks will appear instantly under the AXB: Blocks category.

  4. Insert and configure

    Click a block to add it. Use the right-hand Inspector panel to switch between the Content tab (text, links, images) and the Style tab (typography, spacing, backgrounds, effects).

  5. Switch device views

    Use the device icons (desktop / tablet / mobile) in the Style panel to set different values per breakpoint. Changes apply only to the selected device.

Using Pre-Built Patterns

  1. Open the Pattern Library

    Click the + inserter and switch to the Patterns tab at the top of the panel.

  2. Browse AXB categories

    Scroll down to find the AXB: HeroAXB: CTAAXB: MediaAXB: Testimonials, and AXB: Posts categories.

  3. Insert the pattern

    Click or drag any pattern to insert a fully-styled section. Edit the placeholder text, images, and colours to match your brand.

Configuring Plugin Settings

  1. Open AxcelersBlocks Settings

    In your WordPress admin sidebar, click AxcelersBlocks. This opens the plugin settings page.

  2. Set Device Breakpoints

    Under Device Configuration → Device Widths, set your preferred breakpoint widths for Tablet (default: 1024px) and Mobile (default: 768px). These values control when responsive styles switch in the editor and on the frontend.

  3. Save

    Click Save Changes. Your breakpoints are now applied across all AXB blocks on your site.

Using the Full-Width Template

When editing a page or post, open the Page panel on the right → click Template → select AxcelersBlocks — Full Width. This removes the theme’s default content width constraints and gives you an edge-to-edge canvas ideal for landing pages.

Managing Font Family

Font family is managed from the Typography panel in supported text-based blocks. Select the block, open the block settings sidebar, go to the Styles area, and expand Typography. From there, choose the required value in the Font Family field.

The Font Family dropdown uses the fonts available in WordPress, including theme fonts, installed fonts, and system fonts. This lets each block follow the typography setup already available on your site..

Font family can be set separately for desktop, tablet, and mobile. In the Button block, font family can also be managed for hover styles where hover typography settings are available.

Supported blocks for font family control: AXB Heading, AXB BodyCopy, AXB Button, and AXB List Item.

Dynamic Content

Dynamic Tags Reference

Dynamic Tags let you connect AXB block content to real WordPress data. Select a tag in the block’s content settings and the block will display live data from your posts, terms, or users.

Dynamic Tags are available on AXB HeadingAXB BodyCopyAXB Button, and AXB Image blocks. Look for the Dynamic Tag toggle in the block’s Content settings panel.

Tag

What it displays

Available on

Post Title

The title of the current or a specific post/page.

Posts, Pages, Custom Post Types

Post Excerpt

The excerpt of the current or specified post. You can limit the character count.

Posts, Pages, Custom Post Types

Post Permalink

The URL of the current or specified post. Ideal for linking blocks dynamically.

Posts, Pages, Custom Post Types

Post Date

The published date of the post. Supports custom date format strings.

Posts, Pages, Custom Post Types

Post Meta

Any custom meta field value stored on a post. Specify the meta key.

Posts, Pages, Custom Post Types

Comments Count

The number of approved comments on the current post.

Posts, Pages

Comments URL

The URL linking to the comments section of the current post.

Posts, Pages

Term List

A comma-separated (or custom separator) list of terms from any taxonomy assigned to the post.

Posts, Custom Post Types

Author

The display name of the post author.

Posts, Pages

Term Name

The name of the current taxonomy term (category, tag, or custom taxonomy).

Term Archives

Term Description

The description of the current taxonomy term.

Term Archives

Term Meta

Any custom meta field stored on a term. Specify the meta key.

Term Archives

Featured Image

The featured image of the current or specified post. Available on the Image block as the image source.

Posts, Pages, Custom Post Types

Author Avatar

The avatar image of the post author. Available on the Image block as the image source.

Posts, Pages

ACF Field

A value from any Advanced Custom Fields field. Requires ACF to be installed. Specify the field name.

Posts, Terms, Users (ACF scope)

Responsive Design

Per-Device Style Controls

AxcelersBlocks gives you complete control over how every block looks on every screen size — no custom CSS required.

🖥️

Desktop

Full-width styles. The base from which tablet and mobile inherit unless overridden.

📱

Tablet

Default breakpoint: 1024px. Customisable in plugin settings. Styles apply at this width and below.

📲

Mobile

Default breakpoint: 768px. Customisable in plugin settings. Styles apply at this width and below.

Style Properties with Responsive Control

The following style categories can all be set independently for desktop, tablet, and mobile:

Typography (size, weight, line-height, letter-spacing)

Padding & Margin

Display, Flexbox & Grid

Background (color, gradient, image)

Border & Border Radius

Width, Height & Sizing

Effects (shadow, transform, transition, filter)

Position (static, relative, absolute, fixed, sticky)

Common Questions

Frequently Asked Questions

Click the + block inserter in the Gutenberg editor and type AXB in the search box. All AxcelersBlocks will appear grouped under the AXB: Blocks category. You can also scroll down to the category list and look for AXB: Blocks directly.

Yes. AxcelersBlocks works with any WordPress theme — classic themes (like Astra, GeneratePress, or OceanWP) as well as block/FSE themes (like Twenty Twenty-Four or Kadence). The blocks render inside the standard Gutenberg editor regardless of which theme you use.

Yes, the current version is completely free and available on WordPress.org under the GPL-2.0-or-later license. A Pro version with additional blocks, features, and patterns is planned for future release.

Go to AxcelersBlocks in your WordPress admin sidebar → Device Configuration → Device Widths. Set your preferred breakpoint for Tablet (default: 1024px) and Mobile (default: 768px), then click Save Changes.

Yes. When the ACF plugin is active, an ACF Field option appears in the Dynamic Tags dropdown. Enter the ACF field name and choose the scope (post, term, or user) to display the field value dynamically inside any supported AXB block.

No. AxcelersBlocks uses a block-based inline CSS system — styles are collected and printed only for the blocks that are actually used on each page. There are no global CSS files loaded on every page. This keeps your pages lean and fast.

The AXB Box block is a flexible container — think of it as a super-powered div or section. Use it to wrap other blocks, apply a background (solid, gradient, or image with overlay), control padding, set up a Flexbox or Grid layout, or define a section of your page. Most patterns start with an AXB Box as the outer wrapper.

Yes. The AXB List Item block supports nesting — you can insert another AXB List block inside a List Item to create multi-level, hierarchical lists. This works for both ordered and unordered lists.

You can ask questions and report issues on the official WordPress.org Support Forum for this plugin. For additional help, visit axcelersblocks.com or contact the team at contact@axcelershub.com.

What’s New

Changelog

Version 1.1.0

New blocks and editor improvements.

  • Added AXB List block (ordered & unordered lists)
  • Added AXB List Item block with nested list support
  • Custom marker/icon support for list items
  • List item spacing controls
  • Improved shared editor settings and extensibility
  • Improved Columns and Heading editor behaviour

Version 1.0.0

Initial release of AxcelersBlocks.

  • 7 core blocks: Box, Columns, Column, Heading, BodyCopy, Button, Image
  • Full style controls (typography, spacing, backgrounds, effects)
  • Responsive per-device controls
  • Dynamic Tags support
  • Icon library (general + social)
  • 12 pre-built section patterns
  • Full-width page template (classic & block themes)
  • Plugin settings page with configurable breakpoints
Page Building Workflow

Working with AxcelersBlocks

A simple, structured workflow for building any page with AxcelersBlocks.

AxcelersBlocks is built around a simple page building workflow. Start with layout blocks such as BoxColumns, and Column to create the structure of the page. Then add content blocks such as HeadingBodyCopyButtonImage, and List to build the actual content.

Each block can be refined using the available style panels, including spacing, sizing, typography, backgrounds, borders, position, and effects. For responsive work, review the layout on desktop, tablet, and mobile and adjust values where needed.

When dynamic content is required, use Dynamic Tags to pull values from posts, authors, terms, metadata, or custom fields. To speed up page creation, start from a pattern and then customize the blocks as needed.

This workflow keeps page structure, content, and styling organized while making it easier to build reusable layouts. Save repeated sections as Block Patterns directly from the Gutenberg editor for future reuse.

🏗️

1. Structure

Use Box, Columns, and Column for layout containers and page structure.

✍️

2. Content

Add Heading, BodyCopy, Image, Button, and List blocks for real content.

🎨

3. Style

Use the Style tab to apply responsive controls, typography, and effects.

Ready to start building?

Install AxcelersBlocks for free from WordPress.org and start creating beautiful pages with Gutenberg today.