Blocksy: Gutenberg Optimized Template

Following a pitch that slipped under the radar for most, blocksy quickly became the 'topic on everyone's lips'. Their proven speed and the strategic use of the Gutenberg Editor They caught the attention of the community. Packed with customization options and coupled with Blocksy "companion", This Free Theme deserved our full attention. Today, here we present the fruit of our analysis.

Note: This article also includes a guide to Blocksy and the (optional) installation of its Child Theme.

Blocksy and Gutenberg

As if its name wasn't enough of an indication, 'Blocksy' is based on the construction of content by blocks. Sure, it's 100% compatible with Gutenberg, and actually works in conjunction with it.

“Stacking” content is an intuitive way that, particularly, quick to master for the general public (read, non-programming administrators and WordPress insiders). Each block has its own configuration, which allows you to customize every detail of the design as one seems.

Rearrange blocks in real time and the Live Preview option are features that allow monitor progress while we work on the visual design.

Furthermore, Blocky adds a lot of powerful features, including the great advantage of being ready to set up a virtual store.

Blocksy in its version Hardware is included in our service Managed WordPress.

blocksy

Main Aspects

In its official website of presentation and download (note: it can be downloaded from WordPress itself; we will see it later), Blocksy is presented with 6 characteristic strengths.

The main functionalities are:

Fast
really

Not only is it fast, but the usual speed tests (PageSpeed, GTmetrix, etc.) give it really enviable scores.

Ready for
Gutenberg

Its code was written with the intention of working in conjunction with the WordPress Home Block Editor: Gutenberg. This makes it even lighter.

Division
of code

All JavaScript-based behaviors are loaded only when needed. Dynamic import webpack support is used.

eCommerce Ready

It allows you to quickly and easily build a professional online store. You can upload products and services and start selling right away.

Ready for
multi-languages

Blocksy was coded in such a way that absolutely all texts, messages and buttons can be changed to any language.

agile code
and I clean

Each line of code was carefully written for simplicity and agility. In addition, the programming is prepared to add functions and scale.

Preview
live

Theme customizer changes are synced in real time within the preview window, speeding up your workflow.

Design
Self Adaptive

Programmed to respond to the different screen sizes of cell phones and tablets, adjusting its design and sizes automatically.

In addition, Blocksy allows the content created to be instantly shared on social media. For this one can add the social media buttons wherever they want (even in the header). This encourages user interaction and increased traffic from shared content.

blocksy allows drag and drop social buttons that you need and redirect our social network profiles in pursuit of a better viralization.

Theme Customization

Blocksy theme shortcut menu
Blocksy Shortcuts

We consider that few Themes have as many customization features as Blocksy. Really the detail put into the possibilities and a clear and clean interface allows us to make changes and give our personal touch to our site with ease and simplicity.

Among the possible settings you can set the appearance of buttons, forms, breadcrumbs, layout alternatives for Pages and Posts and WooCommerce Shop. There are even Performance options related to lazy loading of images and dynamic CSS creation (note: Duplika gives you even more options through Blocksy Companion, included in the service Managed WordPress).

Blocksy also allows you to decide different aspects of your design for Desktop PCs, Tablets and Mobiles.

Header Builder

with blocksy it is possible to drag and drop up to nine elements in the header.

The Theme allows us to add buttons to the header, configure sections like Blog, Gallery, Contact, About, and even insert a search field. These elements can be ordered at our whim or particular need.

Backgrounds and Colors

The color palette is a distinctive aspect, vital in all graphic design, and the web is no exception.

That's why Blocksy allows us all the freedom in the world when it comes to customizing our website. This includes the ease of being able to configure three palettes or outlines for easy editing.

Typography

Some Themes offer few variations when it comes to fonts and sizes. This is not the case with Blocksy.

Blocksy gives us complete control of font format, color and size. In fact, we can choose from the 900 fonts of Google Fonts. We better have an idea of the font we want because if we don't go through such a catalog looking for THE font it will take us a long time.

Footer Builder

The same review we did for the header builder goes for the footer builder*. The constructor allows us to customize this section 100% by dragging and dropping elements.

We can customize our footer in the elements tab by entering contact information, social media login, and adding up to 4 widget areas. In the General Tab view it is possible to add a site reveal effect.

* Only with Blocksy Companion.

WooCommerce

The first great success of the Blocksy Theme is its integration with the Gutenberg page builder. The second great success is his perfect fusion with the best plugin for online commercial stores: WooCommerce.

Note: it does this through its Blocksy Companion plugin. More on this later.

Blocksy includes additional features for this powerful eCommerce, such as the easy view of the product, add to cart wherever you want, and the different types of predesigned galleries to present the products. Below we can see some screenshots of some of the customization possibilities included.

Compatibility with Elementor, Beaver, etc.

You can't launch a WordPress Theme today that works poorly, or doesn't work at all, with the most popular site builders. Especially considering that perhaps Blocksy ends up being the new Theme of an 'old' site, made with a different builder than Gutenberg.

So Blocksy hugs all the following builders and says 'welcome'.

beavers
Elementor
Brizzy

Gutenberg

Blocksy CHILD Theme

Another must-have feature in a professional modern theme is the inclusion of a 'Child Theme' or Child. Of course, Blocky gives us the possibility, through its Child Theme, to make changes to the Theme code without affecting the original Theme files or our changes being trampled by future updates. In fact, there is a child theme.

For those of you new to the Child Theme business, know that this is a Theme based on (and dependent on) its 'Parent' Theme, ie the original Theme itself. A Child Theme is just a set of basic files that allow a WordPress admin to make safe modifications to a Theme without stepping on it.. However, to achieve this, the Child Theme must be selected as the Theme instead of the Parent. In this case, we would choose as our WordPress Theme a Blocksy Child.

At the end of the note we will see additional information on how to install Blocksy and get your Blocksy up and running. child.

Blocksy Companion

In the very words of its developers, “Blocksy Companion is the plugin that turns the Blocksy Theme into a powerful Swiss Army Knife». In other words, it is the plugin that adds to Blocksy a generous amount of extra features.

the plugin companion has a free version and provides access to demo templates, extensions and a lot of other useful things to start a site in the shortest possible time and with all the functionalities served.

The provided link explains (in English) how to install it.

If you have come this far in reading, we trust that the note is to your liking, which makes us really proud. We take this opportunity to remind readers that Duplika offers the PREMIUM version of Blocksy Companion together with blocksy PRO in your service Managed WordPress Hosting.

Blocksy Companion provides:

  • Cookie Consent Notice.
  • Integration of Instagram galleries.
  • Newsletter subscription form with integration with mailchimp.
  • Integration with WooCommerce.
  • Additional widgets

speed tests

We anticipated that it was fast. It is. Our tests are just another of many that certify that your clean code and use of modern web technologies (such as react, web pack Y Babel) return to Blocksy a ultrasonic rocket. In fact, activating the Theme already lightens the WordPress Dashboard. Anyone can notice it.

Installing Blocksy

Install Blocksy in its free version it is just like installing any other Theme. Review:

We're going to Appearance → Themes and click on the “Add new” button.

Hovering the mouse cursor over the result, we will click on Install, and then, after a few seconds of downloading, in Activate. Clever.

Let us remember that, like all Themes, we can make your customization in Appearance → Customize.

Installing Blocksy Child (Child Theme)

If you intend to modify the main files of the Blocksy Theme, the universal suggestion for this (or any other Theme) is to always install and activate the Child Theme. After this step, we don't have to worry about ruining the main theme. Any "hardcore" changes we make will only affect the Child Theme.

The topic Blocksy Child is downloaded from here.

The steps to install it correctly:

  1. We're going to Appearance → Themes on our WordPress Dashboard.
  2. We will click the button Add new and then we will press on Upload Theme to load the .zip file of the already downloaded child theme, blocksy-child.zip.
  3. After uploading the file, we must click on Install Now and then about Activate the theme.

After this last step, we can now make modifications to the Theme at ease and safely. For more information, we recommend viewing the official documentation on Blocksy Child.

Blocksy PRO

The Creative Themes team has not stood still after the success of Blocksy. They recently launched the premium version of his Blocksy theme, called Blocksy Pro.

As is often the case with Premium/Pro versions of Themes and Plugins, Blocksy Pro includes many advanced features that aim to cover less common or more demanding contexts. Among its PRO features we find:

  • multiple headers conditionals, different sidebars Y footer alternatives.
  • Hooks of content block (hooks).
  • Possibility to add custom fonts and use google fonts locally.
  • mega menu with advanced features.
  • Desk drawer off canvas (off canvas).
  • floating shopping cart.
  • Off-canvas filters (they slide on screen with an activation, and can be hidden again).
  • cart off canvas (Idem previous explanation).
  • Slide projector (image slider/animated gallery).
  • List of desired products (wish list).

Blocksy Pro plans start starting at U$D49 for a single site, U$D69 for 5 sites, and U$D99 for unlimited sites.

Please note that these amounts are annual and must be renewed in order to continue using Blocksy PRO on our site.

Blocksy Pro and Blocksy Companion are included for free in our Managed WordPress Hosting Service.

Conclusions

In the web race, speed is not only an imperative quest, but also a constant encounter with increasingly efficient, complete and useful technologies when it comes to saving us work.

Blocksy, Blocky Companion and Blocksy Pro bring together one of the best current alternatives to improve our workflow and immediacy to our content. They are not mere words: Blocksy shines for the neatness of its code, its brotherhood with native WordPress tools and a speed that feels as soon as we activate the Theme.

Blocksy is a theme that can be used for various scenarios including Portfolios/Showrooms, corporate sites, online stores and blogs of any kind.

And Blocksy is built to stay with us, being at the height of any professional topic used today (like Aster).

We hope you liked the analysis. If you have questions, please do not hesitate to write them in the comments. Share your experiences. We read and answer all messages.

Good luck, and thanks for reading.

no comments on Blocksy: Gutenberg Optimized Template

back to blog

Duplika

Duplika

We are online, we are not a bot :)

I will be back soon

Duplika
Hi 👋
Select the prefered contact method to get in touch.
Connect via:
chat