bm.png

Master Web Design with Blocs

A collection of video courses designed to help you master your web design skills with a visual web design tool 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.

Access to Hundreds of Tutorials for Blocs

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

Thumbnail Mastering Blocs.jpg

Mastering Blocs 3

96 videos + new every month

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

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. 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

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

 
blocs 2 master.jpg

Building a Website in Blocs 2

24 videos + 1 template

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

 
Thumbnail Getting Started with Blocs.jpg

Getting Started with Blocs 3

8 videos

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

 
Thumbnail Blocs 3 for Beginners.jpg

Blocs 3 for Beginners

16 videos + 1 template

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

 
blocs 2 master.jpg

Core Training for Blocs 2

82 videos

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

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

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

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

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

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

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

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

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

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

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

Getting Started with Blocs 2

14 videos

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

+

FREE Mastering Blocs 3 Updates

In addition to all videos above, you will receive free monthly updates with fresh high quality tutorials for Blocs 3 absolutely free of charge.

templates-2019-bg.jpg

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

 

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 sofware 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 endebted to him for the hours he has spent helping others.

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

- David

As I worked my way through the lessons I realised 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

 

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

Get Your LIFETIME Access NOW

100s of quality videos for just $99

templates.jpg

The Creator of Blocs Master

eldar round.png

Eldar Gezalov

An Authorized Trainer and Professional Web Designer
for Blocs & Squarespace.