NEW

v1.4.1 is out — Updated the SVG allowed elements.

Docs

Official Documentation — v1.4.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.4.0 Free – GPL v2 Approved on WordPress.org
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.

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.

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.