4,9 based on 300 reviews
Trusted by 1500+ businesses and student of all shapes and sizes
4,9 based on 300 reviews
Trusted by 1500+ businesses and student of all shapes and sizes

Blocksy Theme Tutorial

WordPress,WordPress Themes

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.

Timestamps

00:00 Intro
02:52 Get The Blocksy Theme
02:52 Import Dummy Content
09:29 Place a Logo And Menu
13:04 Create A Transparent Header
15:50 Blocksy Theme Configurations
17:46 Global Colors The Heading
19:13 Configure The Heading
23:16 Global Colors
25:35 Configure The Menu
27:17 Add Custom CSS
29:59 Adjust The Site Width
31:17 Style The SubMenu
33:35 Create A Top Header
37:56 Optimize Your Header For All Devices
40:35 Create A Sticky Header
50:26 Create The Footer
01:05:44 The Customiser
01:14:21 The Sidebar
01:20:42 Colors And Fonts
01:26:09 Custom CSS Blog
01:28:41 The Blog Archive Page
01:37:54 The Single Blog Post
01:49:37 Configure The Page Layout When Using The WordPress Editor
01:53:52 WooCommerce Configurations
02:12:16 More Blocksy Features
02:15:26 Import A Pre Made Website
02:15:26 Blocksy Pro Overview
02:23:15 What’s Next?

18 thoughts on “Blocksy Theme Tutorial”

  • Ferdy, it was taking me weeks to build a website. Plus my footers and headers were awful. I started using bocksy and it is awesome. I am going to purchase pro. Do you have an affiliate link that i can buy from

  • Hallo Ferdy,

    Je maakt mooie tutorials bedankt daarvoor.
    Nu ben ik de tutorial “hoe maak je een wordpress website” aan het volgen en heb geprobeerd om een comment te geven. Helaas zie ik die niet meer terug bij de commentaren en weet nu dus niet of die bij jouw is binnen gekomen.
    Het gaat om Blocksy 1.7.58 die jij installeert. als ik dat wil doen wordt echte versie 1.7.60 geïnstalleerd en daar zit niet de applicatie companion bij. Hoe krijg ik of de oude versie of waar kan ik de companion downloaden.

  • 2021-02-01 21:59:35

    You title both – Blocksy and Kadence – the best free WP-theme.
    So which one is really better?
    Could you do a comparison between those two with pros and cons?

  • Ferdy,
    I used Blocksy and Elementor for making pages is that correct? In the Blocksy header I made background green and when scrolling to make sticky and turn to white background.
    But its not working. What am i doing wrong?
    http://ac-bc.ca/
    You can see here.
    Thanks

  • 2021-03-18 09:43:54

    Ferdy, this video you showing only the presentation of how you created the website, can you please drop a link of how to actually create the website step by step from start to finish?

  • 2021-04-12 02:42:34

    I forgot to ask… is it possible to create categories on your Blog like on this website: https://www.clare.com/ using the Blocksy theme?

    Thanks again,
    Alexia

  • 2022-02-17 19:00:41

    Hello Ferdy
    I am wondering if I should design websites using previous version of wp or start using the new wp 5.9 in 2022.

  • Hi ferdy, i downloaded the affiliate marketing template but I uninstall it, I try to import it again through all in one wp migration but is not importing, what should I do

  • 2023-03-08 23:30:16

    Hello Ferdy, I wonder how many English-speaking visitors watching your video tried to go to ferdycorp.com/blocksy! Definitely dangerous difference between a “c” and a “k”.

    Thank you for another great turorial!

  • HI, Thank you for covering this Blocksy theme. I myself spent time to deeply compare 6 high rated free themes. And Blocksy is one of them and it is the best for blogging and affiliate website because it has rich customization and color scheme options. Am using it for my blog.

  • Hi Ferdy, The most significant aspect of Blocksy is its constant updates and compatibility with plugins.

  • 2024-02-05 14:18:15

    Hi Ferdy, in your youtube tutorial about woocommerce you are using the blocksy theme and the cart widget in the sidebar. Sinse recently this cart in the sidebar has a broken layout with the blocksy theme due to a lazy loading of the css for it. You might want to check if your tutorial needs adjusting. If yes it would be good if you can share how you plan to change it. I use custom css but I don’t really like it.

    Cheers,
    Vladimir

  • is this possible on Elementor? Thanks

    • A

      Hi! Yes, absolutely – this works great in Elementor. Check out my Elementor Pro tutorial on YouTube for a full walkthrough. Elementor Pro gives you the most flexibility for building dynamic layouts. Hope that helps!

  • Hi Ferdy,
    Dank ik heb super veel gehad aan je filmpjes.
    Maar ik kom er niet uit hoe ik het cart icon in het dropdownmenu (op mobiel) van kleur kan veranderen. Mijn achtergrond van het dropdown menu is nul zwart en het icon is ook zwart. Hopelijk heb jij een tip.
    Thanks!

    • A

      Hi Faysal! Yes, the sidebar in Blocksy can be added via the Customizer or your page builder. For a blog layout, set up a 2-column layout with your main content and a sidebar widget area. The Blocksy theme has great built-in sidebar options. Hope that helps! ????

  • Hi there can you help me please sir

    • A

      Hi Shafici! Happy to help ???? What specific issue are you running into with the Blocksy theme? Let me know the details and I’ll do my best to point you in the right direction!

Leave your comment

Build stunning websites with Elementor
Hostinger web hosting with real power

magenta-gnu-130148.hostingersite.com
TUTORIALS

Learn step by step how to create a WordPress website for your business, organisation or hobby. Thanks to Ferdy’s video tutorials and simple way of explaining things, you don’t have to hire an expensive web designer and wait months before your website is finished.

With Ferdy’s WordPress tutorials, you are in charge of the progress and you save yourself a ton of money. Don’t have a domain and web hosting yet? No problem. Ferdy shows in you in each tutorial how to get web hosting and a free domain.