Tutorials


bm.png

 Quality Tutorials for Blocs 3

A collection of easy-to-understand step by step tutorials designed to help you master your web design skills with Blocs for Mac.

So, you have got the Blocs for Mac, but what’s next?

Where do you start?

Blocs Master is a series of constantly updated video tutorials and extensive design resources designed to help you master Blocs app to make great looking websites without coding.

 

Hundreds of Tutorials for Blocs

When you join Blocs Master, you get access to all detailed tutorials we have ever created for Blocs 3 and Blocs 2, and all future tutorials we will release for Blocs 3. 

 
 


Thumbnail Mastering Blocs.jpg
 

Mastering Blocs 3

Over 300 tutorials for Blocs 3 and Blocs 2
Including 172 exclusive videos, free premium template
+ All future Blocs 3 tutorials FREE

Blocs 3 Essentials

Basics – 1. Keyboard Shortcuts
Basics – 2. Breakpoints Basics
Basics – 3. Column Width and Offset Controls
Basics – 4. Element Structure in Blocs
Basics – 5. Custom Class Basics
Basics – 6. Freehand Classes
Basics – 7. Preparing Images for Blocs
Basics – 8. Managing Project Assets
Basics – 9. Dimension Units
Basics – 10. Using the Alerts Bric
Basics – 11. Using Embedded Assets Feature
Basics – 12. Generating Packages for Transfers


Buttons

Buttons – 1. Default Button Styles
Buttons – 2. Advanced Editing of Default Styles
Buttons – 3. Creating Custom Button Styles
Buttons – 4. Adding Custom Effects
Buttons – 5. Creating Gradient Backgrounds
Buttons – 6. Creating Buttons with Icons
Buttons – 7. Adjusting Scroll to Top Button
Buttons – 8. Adjusting Style of Dropdown Buttons
Buttons – 9. Creating Social Icons
Buttons – 10. Adding Hover Effects to Images


Creating a Timeline

Timeline – 1. Explanation
Timeline – 2. Instructions
Timeline – 3. Custom Bloc


Recreating Apple.com

Apple – 1. Parallax
Apple – 2. Tabbed Content
Apple – 3. Animated Lines Effect
Apple – 4. Adjust Scroll Effects
Apple – 5. Macintosh Template


Columns

Columns – 1. Adjusting the Width
Columns – 2. Adjusting the Position
Columns – 3. Adjusting the Order
Columns – 4. Adjusting the Vertical Alignment
Columns – 5. Creating a Sidebar
Columns – 6. Grouping Multiple Elements
Columns – 7. Aligning Multiple Elements
Columns – 8. Hiding Multiple Elements
Columns – 9. Adjusting the Style
Columns – 10. Adjusting the Margin and Padding


Classes

Classes – 1. Dimensions
Classes – 2. Padding & Margin
Classes – 3. Position
Classes – 4. Background
Classes – 5. Border
Classes – 6. Typography
Classes – 7. Shadow
Classes – 8. Appearance (Opacity)
Classes – 9. Standard, Hover, and Active States
Classes – 10. Subclass Library
Classes – 11. Bootstrap 4 Classes
Classes – 12. Using Inspector to Find Classes
Classes – 13. Improvisation


Snap Scrolling

Snap Scroll – 1. Bric Basics
Snap Scroll – 2. Adjusting the Position of Indicators
Snap Scroll – 3. Adjusting the Color of Indicators
Snap Scroll – 4. Adjusting the Labels


Blogging with Blocs

Blogging – 1. Intro
Blogging – 2. Overview
Blogging – 3. Structure
Blogging – 4. Example


Accordion Bric

Accordion – 1. Bric Basics
Accordion – 2. Basic Appearance Settings
Accordion – 3. Adjusting Header with Classes
Accordion – 4. Adjusting Body with Classes
Accordion – 5. Adjusting Colors of Text
Accordion – 6. Fine-Tuning Appearance


Video

Video – 1. Basics of Using Video in Blocs 3
Video – 2. Using Local / Remote Videos in Blocs
Video – 3. Embedding Videos from YouTube or Vimeo
Video – 4. Creating Responsive Video Players
Video – 5. Adding Video as Bloc Background


Visibility

Visibility – 1. Introduction & Basic Principles
Visibility – 2. Changing Visibility of Blocs
Visibility – 3. Changing Visibility of Brics
Visibility – 4. Changing Visibility of Text Spans
Visibility – 5. Creating Dropdown Menus
Visibility – 6. Grouping Elements
Visibility – 7. Creating Custom FAQ Sections
Visibility – 8. Creating Custom Navigations

Icons

Icons – 1. What’s New in Blocs 3
Icons – 2. Basic Appearance Settings
Icons – 3. Interactions
Icons – 4. Advanced Appearance Settings
Icons – 5. Shadow Effects
Icons – 6. Icon Heading Bric
Icons – 7. Using PNG icons
Icons – 8. Using SVG icons


Images

Images – 1. Basic Settings
Images – 2. Basic Appearance & Interactions
Images – 3. Round Image Bric
Images – 4. Carousel Basics
Images – 5. Customizing Carousel with Subclasses
Images – 6. Gallery Basics
Images – 7. Backgrounds
Images – 8. Using Parallax Effect
Images – 9. Multi Resolution Images
Images – 10. Custom Frames & Shadows
Images – 11. Editing Caption Style
Images – 12. Hover Tilt Bric
Images – 13. Image Comparison Bric
Images – 14. Images with Text Bric
Images – 15. Image Overlay Bric


Animations

Animations – 1. Summary and Recommendations
Animations – 2. Scroll Effects Basics
Animations – 3. Scroll In and Out
Animations – 4. Fade In and Out
Animations – 5. Scroll Effects Zoom
Animations – 6. Regular Animations Basics
Animations – 7. Appear on Screen
Animations – 8. Mouse Over
Animations – 9. Custom Class Hover Effects
Animations – 10. Combining Effects and Animations
Animations – 11. Third Party Custom Animations


Menu

Menu – 1. Menu Basics in Blocs 3
Menu – 2. Menu Manager vs Manual Editing
Menu – 3. Creating Multiple Menus in Menu Manager
Menu – 4. Appearance Customization
Menu – 5. Adding Buttons to Navigation Menu
Menu – 6. Creating Dropdown Menus
Menu – 7. Customization of Dropdown Menus
Menu – 8. Adjusting the Special (Mobile) Menu
Menu – 9. Active Page Menu Link Customization
Menu – 10. Optimizing Menu for Mobile
Menu – 11. Creating Mega Menus in Blocs
Menu – 12. Hero and Sticky Navigations in Blocs 3
Menu – 13. Appearance Customization of Sticky Menu
Menu – 14. Combining Blocs to Create Scroll-In Menu
Menu – 15. Image Sliders with Transparent Navigation
Menu – 16. Image Headers with Navigation
Menu – 17. Appearance Customization of Toggle Icon
Menu – 18. Changing the Alignment of Toggle Icon
Menu – 19. Creating Double Menus in Blocs 3
Menu – 20. Creating Multilingual Websites


Forms

Form – 1. Basics for Using Forms in Blocs 3
Form – 2. Building Custom Form Layouts
Form – 3. Customizing the Style of Forms
Form – 4. Customizing Email Messages
Form – 5. Customizing the Appearance of Alerts
Form – 6. Removing Blue Shadow from Fields
Form – 7. Creating Success Pages for Forms
Form – 8. Mobile Optimization for Forms
Form – 9. Using Third Party Forms


Card

Card – 1. Basic Settings
Card – 2. Basic Customization
Card – 3. Advanced Customization
Card – 4. Getting Creative with Cards


Modal

Modal – 1. Basic Settings
Modal – 2. Basic Customization
Modal – 3. Advanced Customization


SEO

SEO – 1. Summary and Basics
SEO – 2. Keyword Research
SEO – 3. Title and Meta Description
SEO – 4. Content Structure with Headings
SEO – 5. Image Optimization for SEO
SEO – 6. Page Links / URLs
SEO – 7. Building Backlinks
SEO – 8. Content Marketing
SEO – 9. Google Search Console
SEO – 10. Generating & Submitting a Sitemap
SEO – 11. Google Analytics
SEO – 12. Fixing Broken Links with .htaccess


Audio

Audio – 1. Using Default Audio Player in Blocs 3
Audio – 2. Customizing the Appearance of Audio Player
Audio – 3. Embedding 3rd Party Audio Players

E-Commerce

E-Commerce – 1. Summary
E-Commerce – 2. Selling Physical Products with Ecwid
E-Commerce – 3. Selling Digital Products with Podia
E-Commerce – 4. Selling Services with Acuity Scheduling
E-Commerce – 5. Blocs Store with PayPal Buttons

 


Thumbnail Getting Started with Blocs.jpg
 

Getting Started with Blocs 3

8 videos, included in Mastering Blocs 3

1. Introduction to Blocs 3
2. Working with Blocs
3. Working with Brics
4. Visual Design Basics

5. Freehand Controls
6. Working with Classes
7. Building a Website in Blocs 3
8. Next Steps

 


 

Blocs 3 for Beginners

16 videos + 1 template, included in Mastering Blocs 3

Agency Template for Blocs 3

1. Exploring the UI of Blocs 3
2. Exploring the Settings in Blocs 3
3. First Steps to Creating a Project
4. Adding the Content
5. Understanding the Power of Columns
6. Adjusting the Typography Settings
7. Custom Classes

8. Using Columns, Rows, and Brics
9. Advanced Styling of Buttons
10. Creating Responsive Columns Grids
11. Building the Footer
12. Reusing Blocs and Brics
13. AddingMorePages
14. Creating Contact Forms
15. Double Checking Everything
16. Exporting and Publishing Our Website

 


 

Getting Started with Blocs 2

14 videos, included in Mastering Blocs 3

1. Introduction to Blocs 2
2. Exploring the User Interface
3. Managing the Project Settings and Files
4. Page Settings and Basic SEO
5. Adding and Managing the Blocs
6. Adding and Managing the Brics
7. Adding Image and Video Backgrounds

8. Adding and Managing the Text
9. Adding and Adjusting the Icons
10. Editing the Custom Classes
11. Adding and Adjusting the Buttons
12. Using the Image Carousels
13. Adding the Videos and Links
14. Editing the Navigation and Exporting the Project

 


blocs+2+master.jpg
 

Blocs 2 Core Training

82 videos, included in Mastering Blocs 3

Basics

1-1. Basics – Essential keyboard shortcuts
1-2. Basics – Object placement
1-3. Basics – Padding and margins
1-4. Basics – Adjust position using classes


Button

2-1. Button – Basic customization
2-2. Button – Customization using classes
2-3. Button – Wire button
2-4. Button – Adding custom effects
2-5. Button – Hover effect for images 
2-6. Button – Social icons
2-7. Button – Editing default styles
2-8. Button – Gradient backgrounds
2-9. Button – Hybrid style buttons


Icon

3-1. Icon – Basic appearance customization
3-2. Icon – Advanced appearance customization
3-3. Icon – Advanced appearance customization
3-4. Icon – Adjusting the position using classes
3-5. Icon – Using the interaction settings
3-6. Icon – Adding animation affects
3-7. Icon – Icon Font Manager
3-8. Icon – Icon heading bric


Panel

4-1. Panel – Basic customization
4-2. Panel – Advanced customization
4-3. Panel – Advanced customization
4-4. Panel – Getting creative with panels


Menu

5-1. Menu – Understanding the basics
5-2. Menu – Using the Menu Manager
5-3. Menu – Dropdown via Menu Manager
5-4. Menu – Basic appearance customization
5-5. Menu – Manual editing of the menu
5-6. Menu – Advanced appearance customization
5-7. Menu – Creating buttons in navigation
5-8. Menu – Creating dropdown menus
5-9. Menu – Images in dropdown menus
5-10. Menu – Mobile optimization
5-11. Menu – Adjusting the special menu
5-12. Menu – Different menu on each page
5-13. Menu – Hero navigation bloc


Text

6-1. Text – Basics & Project Settings
6-2. Text – Adjusting the text via sidebar
6-3. Text – Adjusting the text with custom classes
6-4. Text – Using text spans
6-5. Text – Using Google Fonts

Forms

7-1. Form – Basics & Form Settings
7-2. Form – Building an advanced form
7-3. Form – Altering the layout of form
7-4. Form – Advanced appearance customization
7-5. Form – Customization of alert messages


Images

8-1. Images – Understanding the basics
8-2. Images – Applying image backgrounds
8-3. Images – Preparing the images
8-4. Images – Hosting images externally
8-5. Images – Multi-resolution images
8-6. Images – Using pre-made galleries
8-7. Images – Creating galleries with unique layouts
8-8. Images – Creating in-place slideshow galleries
8-9. Images – Creating carousel galleries
8-10. Images – Adding default animations
8-11. Images – Adding shadow effects
8-12. Images – Creating custom animations


Columns

9-1. Columns – Grouping brics
9-2. Columns – Aligning multiple elements
9-3. Columns – Building complex layouts
9-4. Columns – Improving tablet site structure
9-5. Columns – Adding margins and paddings
9-6. Columns – Adding background colors
9-7. Columns – Adding hover effects
9-8. Columns – Hiding multiple elements


Visibility

10-1. Visibility – Change visibility of blocs
10-2. Visibility – Change visibility of brics
10-3. Visibility – Change visibility of specific elements
10-4. Visibility – Creating a dropdown menu
10-5. Visibility – Change visibility of multiple brics
10-6. Visibility – Getting creative with visibility feature


Mobile Optimization

11-1. Mobile Optimization – Text
11-2. Mobile Optimization – Images
11-3. Mobile Optimization – Buttons
11-4. Mobile Optimization – Columns
11-5. Mobile Optimization – Margins & Paddings
11-6. Mobile Optimization – Menu
11-7. Mobile Optimization – Blocs

 


blocs+2+master.jpg
 

Building a Website in Blocs 2

24 videos, included in Mastering Blocs 3

1. Course Introduction
2. First steps
3. Preparing the image files
4. Customizing the navigation menu
5. Adding, adjusting and duplicating blocs
6. Creating and adjusting faded effects
7. Advanced customization of buttons
8. Social icons and visibility feature
9. Using panel brics with classes
10. Using column rows with classes
11. Customizing buttons using classes
12. Creating and adjusting the social icons

13. Creating and adjusting custom forms
14. Using the custom class manager
15. Creating image thumbnails
16. Adding and adjusting icons
17. Using panel brics for pricing tables
18. Creating button overlays
19. Creating the portfolio item page
20. Applying faded effects to blocs
21. Finishing building the landing page
22. Connecting all links on the website
23. Optimization for mobile devices
24. Finalizing and exporting the project

What people are saying.

 

You’ll learn how to master each feature and how classes can take your design to the next level. The course organization is a valuable resource, I can go back to watch any videos if I need a refresher on using anything in Blocs. This is the ultimate one-stop resource for Blocs. You won’t regret this purchase.

– Casey

As I worked my way through the lessons I realized both how much more flexible Blocs can be and how much I never knew.

My recommendation? If you make this purchase you won’t regret it. It will turn into a reference library you will revisit over again with clear, short ‘watch and learn’ videos on call.

– Andy

 

I took the plunge with Blocs about a year ago and just love it. I like many asked a few idiot questions when I started, but the real solution to my true understanding of this software masterpiece was Eldar Gezalov!

This wonderful guy has created a series of videos (many free) which cover every aspect of Blocs in simple to understand examples. The basic set is free and you can sign up to his masterclass for a few quid.

I promise he’s not paying me to write this, but I like many are indebted to him for the hours he has spent helping others.

Cheers Eldar. All I can do is spread the word!!

David

Eldar’s Tutorial and Templates are off the charts!I’m use them often when I get stuck or want to re-learn some really cool things.

I’m waiting patently for more more of his tutorial to be released. Without his assistance I would be struggling getting to know necessary steps.I highly recommend any of his tutorials or templates.

You will be making one of the best decision to help you move forward and design eye catching parallaxing responsive website using Blocs.

– Allen

Monthly Newsletter

Get latest news and updates to your inbox.

Copyright © 2021  Blocs Templates