Blocksy Theme Tutorial

WordPress 6 June 2024 Tutorial 43 of 154

The Blocksy theme is one of the best free WordPress themes available in 2026. It is lightweight, fast, and packed with customization options that most premium themes charge for. Whether you are building a blog, an online store, or a business website, Blocksy gives you the tools to create a professional looking site without writing a single line of code.

Blocksy logo

In this Blocksy theme tutorial, Ferdy walks you through everything you need to know to build a beautiful WordPress website using the Blocksy theme. From installing the theme and setting up your homepage to customizing headers, footers, colors, fonts, and WooCommerce product pages.

What Makes Blocksy the Best Free WordPress Theme?

Blocksy stands out from other free WordPress themes for several reasons. It offers a deep integration with the WordPress Customizer, meaning you can change almost anything about your site in real time without touching code. It is also fully compatible with popular page builders like Elementor and Gutenberg, giving you maximum flexibility.

Here are some of the key features that make Blocksy special:

  • Blazing fast performance with clean, optimized code
  • Full WooCommerce support for building online stores
  • Advanced header and footer builder with drag and drop elements
  • Multiple blog layouts including grid, list, and masonry
  • Built in transparency and sticky header options
  • Extensive color and typography controls
  • Compatible with Elementor, Gutenberg, Beaver Builder, and more
  • Free Starter Sites to get you going quickly

What You Will Learn in This Tutorial

This is a complete step by step Blocksy theme tutorial that covers everything from the basics to advanced customizations. Here is an overview of the topics covered in the video:

  • How to install and activate the Blocksy theme
  • Setting up the Blocksy Companion plugin for extra features
  • Importing a Starter Site template
  • Customizing your header with logo, menu, search, and cart icons
  • Creating a transparent and sticky header
  • Designing your homepage layout
  • Customizing blog post layouts and archive pages
  • Changing colors, fonts, and global styles
  • Setting up your footer with widgets and links
  • Configuring WooCommerce product pages and shop layout
  • Adding custom CSS for advanced effects like a blurry backdrop
  • Mobile responsive design settings

Who Is This Tutorial For?

This Blocksy tutorial is perfect for beginners who are just starting with WordPress, as well as experienced users who want to explore what the Blocksy theme has to offer. If you want to create a professional WordPress website without spending money on a premium theme, this tutorial will show you exactly how to do it.

Whether you are creating a personal blog, a portfolio, a business website, or an eCommerce store with WooCommerce, Blocksy can handle it all. The tutorial is designed to be easy to follow, with clear visual instructions that you can pause and replicate on your own site.

Blocksy Free vs Blocksy Pro

While the free version of Blocksy is incredibly powerful, there is also a Pro version that unlocks even more features. Blocksy Pro includes advanced header elements, more WooCommerce options, custom content blocks, and priority support. However, the free version already gives you more customization options than most premium themes, making it an excellent starting point for any WordPress project.

How to Install the Blocksy Theme

Installing Blocksy is simple. Go to your WordPress dashboard, navigate to Appearance and then Themes. Click Add New and search for Blocksy. Click Install and then Activate. After activation, you will be prompted to install the Blocksy Companion plugin, which adds extra functionality like Starter Sites, custom extensions, and header/footer builder elements.

Customizing Your Header

One of the best features of Blocksy is its header builder. You can create a completely custom header using a visual drag and drop interface. Add your logo, navigation menu, search icon, shopping cart, social icons, and call to action buttons. You can also create a transparent header that overlays your hero section, and a sticky header that follows visitors as they scroll down the page.

Setting Up WooCommerce with Blocksy

Blocksy has excellent WooCommerce integration built right in. You can customize your shop page layout, product card design, product gallery style, and cart functionality without any extra plugins. The theme also supports features like product quick view, wishlist functionality, and advanced filtering options in the Pro version.

Create A Blurry Backdrop (CSS Code)

Want to create a modern blurry backdrop effect for your sticky header? You can add the following custom CSS to your Blocksy theme. Go to Appearance, Customize, and then Additional CSS. Paste the code below to give your sticky header a sleek frosted glass look:

[data-sticky], [data-sticky] [data-row], [data-sticky] [data-row*=boxed]>div {
	background: rgba(50, 50, 50, 0.6);
backdrop-filter: blur(30px);
-webkit-backdrop-filter: blur(30px);
}

Frequently Asked Questions

Is the Blocksy theme really free?

Yes, Blocksy has a completely free version available in the WordPress theme repository. The free version includes most of the features covered in this tutorial. There is also a Pro version with additional features like more header elements, content blocks, and WooCommerce enhancements.

Is Blocksy good for SEO?

Blocksy is built with clean, semantic HTML and follows WordPress coding standards. It is fast and lightweight, which are important factors for SEO. The theme also works well with popular SEO plugins like Yoast SEO, Rank Math, and SureRank.

Can I use Blocksy with Elementor?

Absolutely. Blocksy is fully compatible with Elementor and other page builders. You can use the Blocksy Customizer for global settings like headers, footers, and colors, while using Elementor to design individual pages.

Can I build an online store with Blocksy?

Yes, Blocksy has built in WooCommerce support. You can customize your shop page, product pages, cart, and checkout without any additional plugins. The theme makes it easy to create a professional looking eCommerce store.