Switching an Elementor Site to the Blocksy Theme

It has been two years since the launch of the Elementor360 website and it is time for a refresh. As a first step in that process, I decided to replace the Page Builder Framework theme with the Blocksy theme. In this post I share an overview of the Blocky theme, show you my process for changing themes, and share my overall impression of Blocksy.

Reasons for Switching to the Blocksy Theme

I use Elementor for many of the advanced features on the site and Gutenberg for producing post content, so I wanted a theme that works well with both of those. I’ve been using the Page Builder Framework and when I set p the site I used the Central Color Palette plugin so that I would have consistent color options in the Customizer, in Gutenberg, and in Elementor. Last September when Elementor introduced its global color option, the Central Color Palette plugin stopped working.

During the process of picking a theme I compared several and shared the results of that testing in a previous post. Unfortunately the Page Builder Framework does not integrate its colors with Elementor or Gutenberg. I was surprised to find that Astra didn’t either. Of the ones I tested, there were three that provided full site-wide color palette integration: Kadence, Neve, and Blocksy. Of course a global color palette is just one feature among many, but I think it is a good indicator of the attention, care, and extent that a team is willing to go to provide a great user experience.

Kadence Theme
neve theme
Blocksy Pro

I’ve been curious about Blocksy and many of my online friends have recommended it to me. I purchased the Pro version when it was released and have found that the team is very responsive to user requests. For example, I’ve asked for several features which they added. I decided that this was the perfect time to try it out.

Blocksy Overview

The base Blocksy Theme is available in the WordPress theme directory with more than 20,000 active installs. Wow, Blocksy has a perfect 480 five star reviews!

blocksy wordpress org

I always like to check the support forums to see if the team is active in helping users. As you can see, the Blocksy team is on top of support questions, most of which are resolved.

blocksy support forum

Blocksy Pro is sold from the Creative Themes website. Their website has the documentation, which is pretty good. Blocksy Pro is available in annual or lifetime packages.

blocksy website

Blocksy Installation

After I installed the theme I was prompted to install the free Blocksy companion plugin. However, I knew I was going to install the Blocksy Pro plugin, which replaces that free one, so I installed that instead.

You get a new menu for the theme near the top. Usually themes put their dashboard under the Appearances menu and that is where it is found if you don’t have a companion plugin installed.

The Blocksy page has several tabs. The home tab has shortcuts to many of the Customizer options.

blocks menu home tab

Looking at the Starter Sites I see that at this point, they only have 10 starter sites.

blocksy starter sites

The extensions tab has an area for free and for pro. Here are the free extensions.

blocksy menu free extensions

And here are the pro extensions.

blocksy menu pro extensions

Another feature of Pro are Content Blocks. This is where you can create some content as a template part and use hooks to place it. We will use this feature later on.

blocksy content blocks menu item

Blocksy Removes the Need for Two Plugins

I’ve already mentioned that Blocksy, the free version, provides the integration features that the Central Color Palette plugin offered. The Blocksy Pro header builder has an Account widget, which will replace a small utility plugin, “Login Logout Menu.” This plugin adds a login link to a menu that is contextually aware and changes to a logout menu if the user is logged in. I’m the only user on the E360 website, but I login every day, so I don’t feel guilty adding a login menu item for convenience. I’ll replace the functionality of the Login Logout menu when doing the header.

central color palette
login logout menu

Customization

I recently did a deep dive looking at the themes and found that the most popular general purpose, page builder friendly themes have a very plain starting style. This is because they have options to let you Customize them for your brand and purpose. Blocksy was no exception, with a plain white header, for instance.

blocksy by default

Customizer Organization

The Blocksy Customizer is very well organized. Instead of one long screenshot, I split it into three. At the top are the General options. Of course each of these high level menu items has sub areas.

blocksy cusotmizer general options

Then the post types are listed, with the option to Customizer the single and archive.

blocksy cusotmizer post types

Finally, there are the WordPress core options.

blocksy cusotmizer core

Colors

I found a good help doc on the Blocksy website that explained the global colors.

blocksy color help

Before deactivating the Central Color Palette plugin, I copied the colors into the Blocksy Customizer. Note, one thing I noticed when working in the Customizer was that it was a good idea to save on each page to make sure changes were not lost. I don’t recall needing to to that before with other themes.

blocksy colors in customizer

Header

Now that was done, the next step is to work on the header. Here is the header I want to create.

e360 current header

Blocksy has an easy to use header builder. When I set the colors, I got the background colors for the header and page. I also got the colors for the header menu items. In the screenshot we see the header preview at the top, then there are three rows (below the content), then below that tabs to switch between the desktop and mobile header, and finally over to the side is a list of elements you can use. Note that the top and bottom rows don’t show yet because there isn’t anything in them.

blocksy header builder

First, I went in and tweaked the primary menu settings. Though it picked up the right menu, I set it explicitly. Note the four boxes of menu types. These are different styles for hover. I picked the third one and adjusted the height of the background box to 50%.

primary menu options

Next I selected the logo and adjusted the height of the main row. I also added a bottom border.

logo element
main row options

This was my header so far.

header so far

Now for the top bar. This was pretty simple to implement.

top row 1
top row 2

I disabled the Login Logout plugin and I assigned the menu the same way I did for the main row, but gave it different colors since the background is different. There is a header element called “Account” which I dragged over next to the top bar menu. I didn’t see the option to have the words, so just configured the icon and behavior options.

account menu item options

Footer

Now for the footer builder. The desired e360 footer looked like this.

desired footer

But the current footer looked like this.

default footer

So I went into the Blocksy Footer Builder. i clicked on the row and then the design tab to change the background color. Then I went to the bottom row and clicked on the “copyright” element. I pasted in a modified version of the copyright notice from the existing site, but then realized I needed to add it to the text tab or I got the HTML markup showing.

footer text

I needed to add some CSS for the spacing and to underline links on hover.

footer css

Here is the final version.

final footer

Home Page

The Home page needed two tweaks: I didn’t want the title “Home Page” showing and I wanted a layout with a sidebar. The Home Page was a page that was using a Gutenberg block to show the posts. I went into the page and accessed the Blocksy settings for the page. I set the Page Structure to have content with a right sidebar.

blocksy page settings

I clicked on the Page Title panel and disabled the page title.

disable page title

I now had the home page without a title and with a sidebar, but the sidebar needed some work.

Sidebar

There is a panel for the sidebar in the Customizer. At the top there are 4 predesigned options related to the divider and background options. I selected one with a boxed background and adjusted the size and padding.

blocksy sidebar customizer

Setting the Default Page Layout

There was no sidebar on the About and Contact Us pages and that content was very wide.

about page with no sidebar

So I went to the pages area of the Customizer and turned on the sidebar and featured image. The result looked nicer.

customized about page

The other pages looked fine. Most of them had been created with Elementor, so there wasn’t an issue of the sidebar showing or not. They were laid out as desired.

news page

Newsletter Archives and Single Pages

I checked the newsletter archive page and saw that the featured images were being cropped off.

archive feautred images

A cool feature of Blocksy is that you can customize the layouts for each post type and its archive separately.

post types customizer options

I went into the archive settings for Newsletters. Like we’ve seen in other areas, there were some predesigned layout options available.

newsletter archive first level

I clicked to go to the card options and found more settings that could be changed.

newsletter archive settings

I changed it to two columns, moved the title below the image, and adjusted the size of the featured image. There were some other card options, but I left them at their default.

card options

The single newsletter page also needed to be tweaked.

newsletter single

I selected the layout option with a sidebar and turned on the featured image. I was also happy to see a share option. However, it showed at the bottom of the page. I noticed a small chevron next to the toggle.

newsletter single customized

Here I was able to switch it to the top. You have the predesigned option of a bar or separate buttons. I left it as a bar. You can also select the social networks you want to add.

share box options

Tweaking the Header

After looking at that yellow orange for a while, I decided to change it to light blue.

image
image 1

Post Single

Seeing the option for the social share box got me thinking. I had created the template for the post single using the Elementor theme builder, but I was wondering if I might be able to use the various Blocksy options and simplify. This is what a single page currently looked like. At the top there was nice post meta with icons, then share buttons and then a table of contents.

current features of single post top

At the bottom there was post navigation and an accordion with my affiliate disclosure.

current features of single post bottom

I went to the Elementor Theme Builder template area and changed the Post Single template to draft. That seemed safe instead of deleting it, in case it didn’t work.

single post template changed to draft

I took a look now at the single post and found that it was very bare and the sidebar was gone.

bare bones single post template

So I went in the Customizer to the post single are and enabled the option with a right sidebar.

single post layout with sidebar

I enabled the featured image, turned on the share box and put it at the top, and adjusted the post meta options. I now had everything at the top except for the table of contents.

top of post single

At the bottom I saw that the featured image for the post navigation was a circle and I didn’t see a way to change that, so I turned off the featured image option. That circle didn’t work in my case and I was surprised there were no options with it. Now I had everything at the bottom, except for the accordion with the affiliate disclosure.

post navigation with circle

Blocksy Pro has the ability to create content blocks and place them using hooks.

content blocks menu

Creating the Affiliate Accordion Using Blocksy Content Blocks

I clicked to create new and got a popup. The first one is to create a content block placed by hooks, the 2nd is for your 404 page, and then there is the option to create a custom page header or footer. I named mine Affiliate Accordion.

create new content block

First I set the conditions. To access them, click on the B for Blocksy button. I set the location to be bottom of content and the display condition to include on single posts.

affiliate accordion display rules

Next I added an accordion block. I’m using Kadence blocks on this site. It starts out giving you a few predefined options. I selected the one on the lower left.

kadence accordion styles

I copied over the title and content from the live site. Then I set the title icon and position.

setting the icon

I then adjusted the settings for the accordion block so that it starts closed and the title color.

adjusting accordion settings

This is what the final looks like.

affiliate accordion final

Adding the Table of Contents Using Blocksy Content Blocks

I went back and clicked to create a new content block. I gave it a name and clicked to create template.

creating content block for toc

Again, I clicked on the B and entered the location and display conditions.

blocksy toc placement settings

Then I added the Kadence Table of Contents block and adjusted it’s settings.

toc block settings

I saved and this was what the final looked like. Yay, I was able to replace the Elementor Pro template for post single.

post toc final

Final Customizer Tweak

I was testing and noticed that on mobile the default menu showed all pages.

mobile menu issue

So in the Customizer I went back to the header builder and at the bottom I selected the mobile header tab and then the off canvas menu. There I was able to assign the menu.

selecting menu for mobile

Then instead of clicking on the Offcanvas Menu card, I clicked on the entire frame and was able to style the background color.

styling the panel

Making the Move

I’m ready to port the changes over to the live site now. I make another backup in case anything goes wrong. I install and activate Blocksy. I then install the Blocksy pro companion plugin and disable the Page Builder Framework companion plugin. I turn off Central Color Palette and the Login Logout plugins.

Blocksy Pro has an export and import Customizer settings feature. In the Customizer you go to General / Manage Options / Export Options.

export customizer settings

When you click the Export Customizations button you get a dialog. Since I didn’t change the widgets I didn’t need to check that. When you Export you get a file called “blocksy-export.dat” which you can then import on the other site.

export settings dialog

I imported it. I saw all the changes when the Customizer was open, but not after closing the Customizer, so I made a small change and saved in the Customizer and then everything showed correctly.

Some changes I made were not in the Customizer and I needed to go in and tweak things like pages where the title was disabled.

home page after import

Now I needed to switch the Elementor Single Post template to draft. The Blocksy Content Blocks aren’t part of the Customizer either. However, I just recreated them and when it came to the blocks, I was able to copy and paste them.

blocksy website

Blocksy Pro is sold from the Creative Themes website. Their website has the documentation, which is pretty good. Blocksy Pro is available in annual or lifetime packages.

Discussion and Conclusions

Switching themes on an existing site can be a bit nerve racking. You want to minimize disruption as much as possible. By making the Customizer changes on a cloned site first, I was able to import them to the live site quickly through the Blocksy Customizer import. The other things were mostly page by page changes. In general, everything went smoothly. Of course after the Customizer import and other quick changes, I checked over the site carefully in case there were tweaks that needed to be made.

There are several themes that, like Blocksy, have a lot of Customizer options. I found the Blocksy Customizer settings to be very logically laid out with the general, post types, and core sections. In fact, I think this was the best organized of any theme I’ve tried. Pretty much any layout and style option I needed was available. I liked the fact that you had a lot of control for customizing the different post types, both single and archive options. This is useful if, for example, the featured images of each post type are different sizes.

The Blocksy Content Blocks are very powerful. As you saw, it was easy to create and place the table of contents and affiliate accordion to customize the single post template for my site needs. I imagine that this functionality will become even more robust when WordPress adds more blocks for Full Site Editing. I was happy with Blocksy Pro.

If you remember back to beginning when I discussed the reasons for trying out Blocksy? They were because friends were very happy with the theme and shared their good experiences. Also, the theme developers are engaging users, paying attention to feedback, and then adding things users need. That kind of behavior turns users into fans and ambassadors. Blocksy is obviously doing a lot of things rights.

Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. You will still pay the same amount so there is no extra cost to you. I am disclosing this in accordance with the Federal Trade Commission’s 16 CFR, Part 255: “Guides Concerning the Use of Endorsements and Testimonials in Advertising.”  

E360
>