Everything you need to get started with Blocksy Theme and Companion

Content Blocks

Content blocks is an feature from Blocksy PRO that is aimed at advanced users that know their way around building a highly dynamic WordPress site. The main idea of it is that you can have a piece of content and dynamically insert it in a spot of your WordPress site with the help of actions. Fortunately, Blocksy comes with an easy to use UI for doing this so no coding knowledge is necessary.

There are three components of a content block:

  1. Content — the content that you define with any design tool (Brizy, Gutenberg, Elementor etc)
  2. Action — the place where the content is inserted
  3. Conditions — Attach an additional set of conditions to the content block for deciding where exactly it will be placed

There are a lot of other options present in Blocksy for content blocks, but this three are the main building blocks.

After that, it’s important to mention that there are 4 types of content blocks out there:

  1. Hook — The one that is attached to a WordPress action
  2. 404 — Attach the content (#1) to the 404 pages of your site for designing it from scratch
  3. Header — replace your header with the content and also respect the conditions
  4. Footer — replace your site footer with the content and also respect the conditions

Later on for this article we’ll be interacting only with Hooks as the other three types of content blocks are very easy to grasp after the hooks are covered.

Creating a hook manually

To understand what content blocks are, first we’ll start with creating a hook manually and then we’ll introduce more shortcuts and further options that accompany this feature. See the following video to understand to to create a hook and place it After the header of Every page of the site.

Hooks debugger

Next, it makes sense to understand what the hooks debugger is so that you can create hooks more easily, in a visual fashion.

Container settings

Blocksy offers a way to use regular containers for the hook content, but it disables it by default. The three possible values for the hooks container are:

  • No container
  • Narrow container
  • Regular container
After header hook in Normal width

On the frontend this will obviously be boxed in respect with the other elements from the page.

Other hooks options

Expiration Date/Time allows you to display the hook on your location only for a limited amount of time. For example it can be useful for a limited offer you’re running or for a countdown.

Block Position allows you to create a fixed element on the top/bottom sides of the viewport. This can be useful for global announcements to your users.

Just like in other places of Blocksy, Visibility option allows you to hide the piece of content on some specific devices. Very useful for targeting your mobile device users, which tend to be so numerous these days.

Load content block styles with page builders

Content Blocks have out of the box support for a handful of tools for building pages. Specifically:

  • Elementor
  • Brizy
  • Zion Builder
  • Gutenberg

For the tools that are not supported, Blocksy implements a general purpose mechanism which any tool could use to hook into the loading process for our hooks and inject their assets. Example of how to use:

add_action('blocksy:pro:content-blocks:pre-output', function ($id) {
  // Enqueue assets for the specific content block

Code for tools that is too big to put into Blocksy but can be added manually by users who absolutely need the support (as of Blocksy Companion 1.7.64 they’re no longer part of our code because of the big size):

Not the solution you are looking for?

Please check other articles or open a support ticket.