All templates are compatible with the new Blocs Version 6

blocs_premium_templates_plus

The smart way to build websites with Blocs

Create your website in no time with 120 pre-designed blocs.

Create and customize stunning websites in no time. Choose from 12 sections, each containing 10 professionally designed blocs. Easily adjust colors, fonts, and content, and publish your site in minutes—no coding required.

Feature

smart feature

Header

smart feature

Hero

smart feature

Pricing

smart feature

Gallery

smart feature

Team

smart feature

CtA

smart feature

Contact

smart feature

Testimonial

smart feature

FAQ

smart feature

Error

smart feature

Footer

smart feature

Unlock Premium Smart now

premium_templates_plus

Get the ultimate collection! Purchase Premium Smart and access a variety of beautifully designed sections across 12 categories.

€ 99.00
One time - no V.A.T  Secure payments are handled by Payhip.

Coming soon

MasterCardVisaVisaPayPal

Premium Smart

12 sections, each with 10 blocs

Create unlimited sites

Instant Download

Lifetime usage license

Works with Blocs V5 & V6

Smart Site Template (.BEX)
120 Custom Blocs (.BEX) 

Instructions: Check the Tutorial

One time purchase - no subscription

Premium Smart Tutorial

Premium Smart is a powerful extension for Blocs that helps you create modern and professionally designed websites quickly and efficiently. This tutorial will guide you step by step through the installation, setup, and customization so you can unlock the full potential of Premium Smart.

Follow these steps to install Premium Smart:

  1. Launch Blocs – Open the Blocs app on your Mac, iPad, or iPhone, but do not load any project yet.

  2. Open the Extension Manager – Go to the top menu bar, select Window, and click on Extension Manager.

  3. Add a New Extension – Click the “+” symbol in the top right corner.

  4. Select the Files – Navigate to the location where the Premium Smart files are stored and select all of them.

  5. Start Installation – Click Open and wait for the installation process to complete.

  6. Restart Blocs – To finalize the installation, restart the Blocs app.

After installation, you will find a new site template in your template library named Premium Smart Site Template. This template contains all the essential settings and code components for Premium Smart. It is recommended to start all new projects with this template.

  1. Open the Class Manager – Control global typography settings through the Class Manager.

  2. Edit Basic Fonts – Modify the typography for headings, paragraphs, and buttons (h1, h2, h3, h4, h5, h6, p, label, .btn, a).

  3. Define Bold Text – Adjust the .bold class to use a stronger weight for bold text.

  4. Modify Button Fonts – Customize the .btn class if buttons should have a different font style or weight.

Premium Smart utilizes four predefined color palettes for quick switching between light and dark themes:
Adjusting Colors:

  1. Open the Global Swatch Manager – Access the color settings.

  2. Modify Colors – Adjust the primary and secondary colors as needed.

  • Primary – Main heading color

  • Primary Variant – Main text color

  • Secondary – Main background color

  • Secondary Variant – Main color for frames and icons

Adjusting Colors:

Open the Global Swatch Manager – Access the color settings.

Modify Colors – Adjust the primary and secondary colors as needed.

  1. Open the Global Swatch Manager – Access the color settings.

  2. Modify Colors – Adjust the primary and secondary colors as needed.

  1. Open the Class Manager – Control corner rounding globally using specific classes.

  2. Round Button Corners – Modify the .btn class to apply the desired corner radius to all buttons.

  3. Set Global Rounding – The .smart-radius class manages the corner rounding of images, cards and form fields.

  4. Apply Important Settings – Enable the !important option in the rules tab of the .smart-radius class to enforce changes.

  5. Exclude Specific Elements – If certain elements should not have rounded corners, simply remove the .smart-radius class from them.

  6. Ensure Consistency – When adding new elements, apply the .smart-radius class to maintain a uniform design.

  1. Style the Button.btn

  2. Round Button Corners – Modify the .btn class to apply the desired corner radius to all buttons.

  3. Set Global Rounding – The .smart-radius class manages the corner rounding of images, cards and form fields.

  4. Apply Important Settings – Enable the !important option in the rules tab of the .smart-radius class to enforce changes.

  5. Exclude Specific Elements – If certain elements should not have rounded corners, simply remove the .smart-radius class from them.

  6. Ensure Consistency – When adding new elements, apply the .smart-radius class to maintain a uniform design.

If you need to remove Premium Smart from your computer, follow these steps:

  1. Open the Extension Manager – Go to Window and select "Extension Manager."

  2. Select the 'Blocs' Category – Use the dropdown menu to filter by "Blocs."

  3. Choose the Extensions to Uninstall – Select all Premium Smart custom blocs you want to remove.

  4. Remove the Extensions – Click on the '-' icon in the top right corner and confirm by clicking Yes, remove Extensions.

  5. Select the 'Sites' Category – Change the dropdown menu to "Sites."

  6. Uninstall the Site Template – Select the Premium Smart Site Template and remove it using the '-' icon.

  7. Restart Blocs – Close and reopen the Blocs app.

  8. Clear Library References

  • Open a new project in Blocs.

  • Open the Bloc Bar and select the Library using the Library Selector.

  • Click on the Bloc Bar settings icon in the top right corner.

  • Select "Organize," click on the trash can icon, and confirm the deletion by clicking "Delete Library."