All templates are compatible with the new Blocs Version 6
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
Header
Hero
Pricing
Gallery
Team
CtA
Contact
Testimonial
FAQ
Error
Footer
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.
Smart Site Template (.BEX)
120 Custom Blocs (.BEX)
Instructions: Check the Tutorial
One time purchase - no subscription
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:
Launch Blocs – Open the Blocs app on your Mac, iPad, or iPhone, but do not load any project yet.
Open the Extension Manager – Go to the top menu bar, select Window, and click on Extension Manager.
Add a New Extension – Click the “+” symbol in the top right corner.
Select the Files – Navigate to the location where the Premium Smart files are stored and select all of them.
Start Installation – Click Open and wait for the installation process to complete.
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.
Open the Class Manager – Control global typography settings through the Class Manager.
Edit Basic Fonts – Modify the typography for headings, paragraphs, and buttons (h1, h2, h3, h4, h5, h6, p, label, .btn, a).
Define Bold Text – Adjust the .bold class to use a stronger weight for bold text.
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:
Open the Global Swatch Manager – Access the color settings.
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.
Open the Global Swatch Manager – Access the color settings.
Modify Colors – Adjust the primary and secondary colors as needed.
Open the Class Manager – Control corner rounding globally using specific classes.
Round Button Corners – Modify the .btn class to apply the desired corner radius to all buttons.
Set Global Rounding – The .smart-radius class manages the corner rounding of images, cards and form fields.
Apply Important Settings – Enable the !important option in the rules tab of the .smart-radius class to enforce changes.
Exclude Specific Elements – If certain elements should not have rounded corners, simply remove the .smart-radius class from them.
Ensure Consistency – When adding new elements, apply the .smart-radius class to maintain a uniform design.
Style the Button – .btn
Round Button Corners – Modify the .btn class to apply the desired corner radius to all buttons.
Set Global Rounding – The .smart-radius class manages the corner rounding of images, cards and form fields.
Apply Important Settings – Enable the !important option in the rules tab of the .smart-radius class to enforce changes.
Exclude Specific Elements – If certain elements should not have rounded corners, simply remove the .smart-radius class from them.
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:
Open the Extension Manager – Go to Window and select "Extension Manager."
Select the 'Blocs' Category – Use the dropdown menu to filter by "Blocs."
Choose the Extensions to Uninstall – Select all Premium Smart custom blocs you want to remove.
Remove the Extensions – Click on the '-' icon in the top right corner and confirm by clicking Yes, remove Extensions.
Select the 'Sites' Category – Change the dropdown menu to "Sites."
Uninstall the Site Template – Select the Premium Smart Site Template and remove it using the '-' icon.
Restart Blocs – Close and reopen the Blocs app.
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."