Skip to content

Blocks are the individual bits of content that end up composing your page. Content blocks are differentiated by their type, and each one has a variety of options associated to it that are specific for that type.

Common settings

Each block has a set of options that are common for every other block type:

  • Spacing: alters the spacing of the block in terms of margins and paddings.
  • Effects: add an entrance effect to the block as soon as it becomes visible in the browser’s viewport area.
  • Advanced: add a CSS class (not the style, just the class) to the block element, or choose to hide it from being displayed, while maintaining its editability in the backend.

Read more about common settings in the "Common attributes of sections, columns and blocks" section of the Getting started page.

Available blocks

Here’s a list of available blocks.

Text

A rich text area that supports embeds and shortcodes, this block pretty much replicates the regular WordPress editor. It’s good to write, embed content from external providers, and also make use of the shortcodes other plugins might put at your disposal.

The Fit embeds option in the Style tab will make embedded contents take the whole horizontal space available.

Divider

An horizontal spacer element. Being essentially an horizontal line that visually divides content, it can either be invisible or have a solid appearance: in the latter case, you’ll be able to control both its height and its color.

Blog

Display a list of blog posts. You can select how many posts to load, optionally including or exluding specific categories or tags, and you can also choose to paginate the results. Pagination options are:

  • Do not paginate: only the first page of the results will be displayed,
  • Regular pagination: navigation will be placed at the bottom of the blog posts list,
  • Reload block content: pagination is accomplished via AJAX reloading the entire block content,
  • Append new content: pagination is accomplished via AJAX appending the subsequent page’s results to the block content.

Tabs

Display tabbed content. Tabs can either be horizontal or vertical, and each tab is composed by a title, a content area that uses the regular WordPress editor, and a decoration element that can either be an icon or an image.

Post

Display a single blog post.

Widget area

Display contents from a registere Widget area.

Team member (premium version only)

Display information about a person/team member. The information that can be displayed are:

  • Name of the person,
  • Picture,
  • Role,
  • Biography (uses the regular WordPress editor).

Additional display settings can be found the Style tab of the block editing screen:

  • Alignment will make the entire block align left, center or right,
  • Image shape will alter the shape of the person’s picture.

Accordion

Accordions are a set of grouped toggles. Each toggle is composed by a title, a content area that uses the regular WordPress editor, and a decoration element that can either be an icon or an image.

Accordions have an option to choose which element should be open by default (Expanded index setting), and can work in two ways: either only one toggle can be open at a time, or multiple toggles can be open at the same time.

Progress bar (premium version only)

Display numeric values as multiple progress bars. Each value can be given a Label, a numeric Value and a specific Color.

Bars can be dragged one on top of the other to rearrange their order.

Feature box

Similar to regular text blocks, feature boxes offer the option to be decorated with an icon or picture, choosing from a variety of layouts available.

Counter (premium version only)

Display an animated counter. The numeric value is required, while other options are optional.

List (premium version only)

Display a list of items. Items support both links and icons.

Icon

Display an icon. Icons can be either chosen from the available icon libraries, or an image from the Media Library or an external URL can be fetched. Icons inserted with this block can also support hyperlinks.

In the Style tab of the block editing modal screen, you can select the alignment of the icon within its column.

Button

Display a call to action button control, that allows you to link to a different page or website.

There are a variety of visual controls that are available under the Style tab in the block editing modal screen.

HTML

With this block you can either output HTML markup or import a specific template.

The HTML markup imported can be written directly in the block editing modal screen, and supports shortcodes.

If you have more detailed needs, you can include a template file from the theme you’re using: to do so, fill the Template path field with the path to the file you want to load, relative to the current theme, or its parent.

WordPress default widgets

Brix supports the WordPress default widgets as regular content blocks, with the exception of the text widget.

The editing screen of a widget content block that’s being added to the page replicates completely the editing form you’d use in the Widgets screen in your WordPress admin.

The output of the widget content block replicates exactly the output of the single widget, with the widget CSS class applied to the block itself.

Please note that, due to how each and every theme might be implemented, the appearance of a widget content block might differ a little from its regular widget counterpart, since it’s placed in the content of the page, rather than its sidebar.

Here are the widgets available as content blocks:

  • Recent Posts widget: Your site’s most recent Posts.
  • Calendar widget: A calendar of your site’s Posts.
  • Custom menu widget: Add a custom menu.
  • Meta widget: Login, RSS, & WordPress.org links.
  • Search widget: A search form for your site.
  • Recent comments widget: Your site’s most recent comments.
  • Archives widget: A monthly archive of your site’s Posts.
  • Categories widget: A list or dropdown of categories.
  • Pages widget: A list of your site’s Pages.
  • RSS widget: Entries from any RSS or Atom feed.
  • Tag Cloud widget: A cloud of your most used tags.

WooCommerce widgets and shortcodes (premium version only)

Brix supports the widgets and shortcodes defined by WooCommerce as regular content blocks.

Concerning blocks based on widgets, the editing screen of a widget content block that’s being added to the page replicates completely the editing form you’d use in the Widgets screen in your WordPress admin.

For shortcodes, instead, the options provided in the content block editing screen are based on the shortcode’s input parameters.

The output of the widget content block replicates exactly the output of the single widget, with the woocommerce CSS class applied to the block itself, along with a class that identifies the type of the block.

Please note that, due to how each and every theme might be implemented, the appearance of a widget content block might differ a little from its regular widget counterpart, since it’s placed in the content of the page, rather than its sidebar.

Here are the WooCommerce widgets and shortcodes available as content blocks:

  • WooCommerce Cart widget: Display the user’s Cart.
  • WooCommerce Product Search widget: A Search box for products only.
  • WooCommerce Recently Viewed widget: Display a list of recently viewed products.
  • WooCommerce Top Rated Products widget: Display a list of your top rated products on your site.
  • WooCommerce Recent Reviews widget: Display a list of your most recent reviews on your site.
  • WooCommerce Product Categories widget: A list or dropdown of product categories.
  • WooCommerce Products widget: Display a list of your products on your site.
  • WooCommerce Product Tags widget: Your most used product tags in cloud format.
  • WooCommerce Page: Display a WooCommerce page.
  • WooCommerce products list: Display a list of WooCommerce products.
  • WooCommerce Product: Show a single product by ID or SKU.
  • WooCommerce Add to cart button: Show the price and add to cart button of a single product by ID or SKU.
  • WooCommerce product category: Show multiple products in a category by slug.
  • WooCommerce product categories: Display product categories loop.
  • WooCommerce product attribute: List products with an attribute shortcode.