Introduction

Introducing Blockbooster, the ultimate Full Site Editing (FSE) WordPress theme designed to empower you to create any type of website with unparalleled ease. With its innovative block-based approach and intuitive interface, Blockbooster allows you to effortlessly customize every aspect of your site, from headers to footers, to perfectly match your vision. Crafted with a focus on simplicity and versatility, Blockbooster’s minimalistic design ensures that your content remains the center of attention, while its robust features provide the flexibility needed to bring your ideas to life. Whether you’re a startup, motivational speakers, influencers, law firm, ideal blog, business, freelancer, or marketing agency or any type of Corporate website. Blockbooster offers the tools and flexibility you need to build a stunning, professional-grade website in no time. With a wide range of ready-to-use pre-built patterns, Blockbooster enables you to get your site up and running within minutes, eliminating the need for extensive customization. Say goodbye to limitations and hello to limitless possibilities with Blockbooster – the best FSE WordPress theme for unlocking your creativity effortlessly.

Install and Activating Blockbooster Theme Documentation

There are 2 ways to install Blockbooster: 

  1. Installing using ZIP file:
  • Download the Blockbooster theme installation file from here by clicking the Download button from here theme page.
  • Login to your WordPress website and go to Appearance > Themes
  • Click on the Add New button and then click on the Upload Theme button
  • Chose the .zip file you downloaded (for example blockbooster.zip)
  • Click on the Install Now button
  • After the theme is installed, click on the Activate button.

    2. Installing using WordPress Theme Directory

  • Go to Dashboard > Appearance > Themes
  • Click on the Add New button. In the search field, type Blockbooster and hit the Enter key.
  • Now, click on the Install button and then the Activate button to install and activate the theme.

Recommended Plugins

You must install and activate the following plugins to get the best out of the Smartversity theme.

  • Cozy Blocks: Provide 30+ advanced blocks for FSE and Gutenberg editor.
  • Cozy Essential Addons: It provides basic skeletal for the custom post type. It gives base functionality of custom post type so that we will extend the features and layout for our products like plugins and themes.
  • Advanced Import (To import demos): It is a  powerful data importer plugin. It has several features that make it more manageable and convenient for WordPress user to import their WordPress site data from another website.

Importing Demo

After you install and activate the theme and the plugins, follow the steps below to import demo content:

  • Go to Appearance > CT Demo Import
  • Click on the “Import” button of the demo you want to import
  • Read the confirmation message and click on “Yes, Import Demo!”
  • You may need to wait a while because it may take some time.
  • That’s all, your demo will successfully be imported and you can start editing your content.

Customizing Header

  • Log in to your WordPress Dashboard.
  • Click “Edit Site” at the top.
  • Under areas, click on the header section to customize it.
  • Save your changes.

OR

  • Go to “Appearance” in the Dashboard.
  • Click “Editor.”
  • Choose the “Patterns” tab.
  • Under template parts, select “Header” to customize it.
  • Save your changes.

Typography Settings

To customize the typography:

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Click on the styles icon at the top right
  • You will see an option for typography, click on it. 
  • You can now edit the typography from this section.

Color Settings

To change the theme’s colors or to add your own custom colors,

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Click on the styles icon at the top right
  • Now, click on the colors tab and go to the palettes section.
  • You can now choose whichever color you like or even add your own custom colors.

Global Styles Switching

To switch the global styles of the theme,

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Click on the styles icon at the top right
  • You will see an option to browse styles, click on it.
  • Choose whichever global style you feel suits your website.

Adding/Editing Logo/Brand

You can add/edit the site logo of your website by following these steps:

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Click on the template part where you want to add/edit your logo
  • Click on the blue ‘+’ symbol on the top left
  • Search for ‘site logo’ and add it
  • Now, upload your site logo

  • You can edit the logo from the dashboard on your right.

Adding/Editing Site Icon/Favicon

To add/edit the Site icon/favicon, follow these simple steps:

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • You can also choose your site logo to be your site icon by clicking on the site logo and enabling the ‘Use as site icon’ option.

     

use as site icon

  • If you want to use a different favicon than your site icon then click on ‘Site icon settings’

     

favicon setting

  • This will redirect you to a new tab where you can add your site icon/favicon

  • Now, set your site icon from here.

Adding/Editing Navigation

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Go to Navigation and select the navigation you would like to edit
  • You can add, remove, or update your navigation from this dashboard.

Customizing Templates

    • Log in to the WordPress admin Panel.
    • Go to Appearance > Editor
    • Go to Templates and select the template you would like to edit and start customizing

Customizing Templates Parts

    • Log in to the WordPress admin Panel.
    • Go to Appearance > Editor
    • Go to patterns and at the bottom, you will see template parts.
    • Select the template you would like to edit and start customizing

Customizing dynamic Query Loop

You can add a dynamic query loop to your website by following these steps:

  • Log in to the WordPress admin Panel.
  • Go to Appearance > Editor
  • Click on the template part where you want to add a query loop
  • Click on the blue ‘+’ symbol on the top left
  • Search for ‘query loop’ and add it
  • You can now choose a pattern for your query loop or start from scratch.
  • Choose from this range of patterns for query loop or create your own.
  • Now to customize the dynamic query loop, select the query loop and disable ‘Inherit query from template’.
  • Now, by going into display settings, you can customize your query loop.
  • You will also find other customization options on the right side of the editor.

Reset/Restore default layout for Templates/Template Parts

To reset or restore the default layout for templates or template parts, follow the steps below:

  • Go to Admin Dashboard > Appearance > Editor
  • Now, click on the ‘Templates or Template Parts’, whichever you would like to restore
  • You will see three dots around the template or template parts you have modified
  • Click on the three dots and you will get an option to clear customization.
  • Click on the button to restore the default layout for templates or template parts.

Adding Animation on Scrolling

To add animation on scroll effect for any section of block, follow the steps below:

  • Go to Admin Dashboard > Appearance > Editor (Or you can access direct from top bar with clicking on “Site Edit” )
  • Click on any blocks like group, columns or paragraph where you want to add animation effect on scroll.
  • Click on “Advanced” at the bottom of the right sidebar panel.
  • Add the following animation classes on “Additional CSS Classes field” (type space for multiple class name) 

Animations Class Name:

 

  • Fade animations:

    • blockbooster-fade
    • blockbooster-fade-up
    • blockbooster-fade-down
    • blockbooster-fade-left
    • blockbooster-fade-right
    • blockbooster-fade-up-right
    • blockbooster-fade-up-left
    • blockbooster-fade-down-right
    • blockbooster-fade-down-left

  • Flip animations:

    • blockbooster-flip-up
    • blockbooster-flip-down
    • blockbooster-flip-left
    • blockbooster-flip-right

  • Slide animations:

    • blockbooster-slide-up
    • blockbooster-slide-down
    • blockbooster-slide-left
    • blockbooster-slide-right

  • Zoom animations:

    • blockbooster-zoom-in
    • blockbooster-zoom-in-up
    • blockbooster-zoom-in-down
    • blockbooster-zoom-in-left
    • blockbooster-zoom-in-right
    • blockbooster-zoom-out
    • blockbooster-zoom-out-up
    • blockbooster-zoom-out-down
    • blockbooster-zoom-out-left
    • blockbooster-zoom-out-right
 

Easing functions:

 

  • blockbooster-linear
  • blockbooster-ease
  • blockbooster-ease-in
  • blockbooster-ease-out
  • blockbooster-ease-in-out
  • blockbooster-ease-in-back
  • blockbooster-ease-out-back
  • blockbooster-ease-in-out-back
  • blockbooster-ease-in-sine
  • blockbooster-ease-out-sine
  • blockbooster-ease-in-out-sine
  • blockbooster-ease-in-quad
  • blockbooster-ease-out-quad
  • blockbooster-ease-in-out-quad
  • blockbooster-ease-in-cubic
  • blockbooster-ease-out-cubic
  • blockbooster-ease-in-out-cubic
  • blockbooster-ease-in-quart
  • blockbooster-ease-out-quart
  • blockbooster-ease-in-out-quart