'Building a Website in Blocs' course

A series of 24 videos covering every step involved in building this multi-page website in Blocs


These 24 highly detailed videos cover every step involved in bulding this multi-page website in Blocs


When you sign up, you get 10% off Blocs Templates Membership, and Photograph template (a $20 value)




Watch a sample video from this course


Building a multi-page website in Blocs

In this course, I am explaning every single action, step by step, which you have to take to build a beautiful and fairly complex multi-page website in Blocs.


Introduction to Building a website in Blocs 
- Introduction of Blocs Master creator
- Introduciton of Building a website in Blocs course


Creating the project and building the site structure
- Saving the project
- Adjusting project settings
- Adjusting page settings for each page
- Building the site structure


Preparing the images for the project
- Downloading copyright-free images
- Optimizing the image resolution
- Optimizing the image size
- Managing the project files


Customizing the navigation menu
- Importing the images to Blocs project
- Setting the bloc background image
- Enabling and disabling areas
- Managing the menu items
- Customizing the menu appearance with custom classes
- Customizing the text logo with custom class


Adding, adjusting and duplicating blocs
- Building the page header
- Customizing text with custom classes
- Adjusting the bloc background
- Adding and editing the icon bric
- Duplicating blocs to other pages


Creating and adjusting the faded background effect
- Adding and editing text brics
- Creating the faded effect
- Adjusting the faded effect via custom classes
- Adjusting the bric position using custom classes
- Deleting the custom classes


Advanced customization of button brics
- Creating the team photo bloc using button brics
- Customizing the dimensions of buttons using custom classes
- Creating the hover color effect using the custom class
- Preparing the overlay images using Pixelmator
Adjusting the text position using custom class


Creating social icons and using visibility feature
- Creating the social icons using buttons
- Customizing the appearance of icons
- Aligning the elements to center using custom class
- Using column row bric
- Using the toggle visibility feature


Using panel brics customized with custom classes
- Duplicating blocs and brics
- Using parallax background feature
- Using panel brics
- Adjusting the appearance of panels with custom classes
- Using round image bric
- Adjusting default typography settings
- Creating reverse faded effect
- Adjusting bric positioning using negative margins


Using column rows customized with custom classes
- Creating hover effects for logos
- Using column row with custom classes
- Giving the class to senate element of the row


Customizing the buttons using custom classes
- Changing the image backgrounds
- Creating the newsletter blocs
- Adjusting the button styles using custom classes
- Adjusting the button dimensions
- Adding the shadow to button


Creating and adjusting the social icons
- Creating text links
- Using buttons to create social icons
- Using buttons to align social icons to center
- Customizing the icon appearance using custom classes


Creating and adjusting custom forms
- Creating the contact page
- Building the customized contact form
- Adjusting the style of form fields using custom classes
- Adjusting the width of the blocs
- Creating the ‘mailto’ links
- Adding the color swatches
- Creating customized flat buttons 


Using the custom class manager
- Removing the shadow from sticky navigation bar
- Searching the custom classes online
- Applying and adjusting custom classes to invisible elements
- Adjusting alert notifications appearance


Creating the image thumbnails for blog posts
- Adjusting the margins using custom class
- Adding shadows to images
- Creating the custom styled text links
- Duplicating the blocs and brics


Adding and adjusting the icon brics
- Adjusting the icon style using custom classes
- Adding the hover effect to icons
- Adding and adjusting the icon frame
- Changing the icon type and color


Using panel bric to build pricing tables
- Using the parallax backgrounds with multiple blocs
- Adjusting the darkness of the background images
- Building the pricing tables using panel brics
- Using the heading with icons
- Adjusting the padding, borders and shadows of the panels


Creating the image grid with button overlays
- Managing files in images folder
- Importing the images
- Creating the customized text links
- Creating the images grid
- Creating button overlays
- Adjusting the button position using negative margin
- Linking the categories navigation


Creating the portfolio item pages
- Adding the margin using custom class
- Creating the image rich pages
- Duplicating layouts from other pages
- Editing the text and links
- Adjusting the padding of blocs
- Finalizing the Portfolio page


Applying fade-in and fade-out effects to home page
- Editing the pre-set custom classes
- Applying text styles
- Customizing the buttons
- Changing the bloc background to adjust auto color of text
- Creating fade-in and fade-out effects
- Using negative margin custom classes to adjust position


Finishing building the landing page
- Creating the shortcut to portfolio page on home page
- Using custom classes to apply previously used styles
- Duplicating the bloc to other pages
- Creating the buttons and linking them to other pages
- Creating the customized text links


Checking all links on the website
- Assigning the IDs to each bloc
- Linking all the buttons
- Linking all the links
- Linking the images and custom text links
- Checking all links in our projects


Optimization for mobile devices
- Editing classes from subclass library
- Editing previously created custom classes
- Optimizing every page for tablet and mobile
- Optimizing custom classes for tablet and mobile
- Optimizing panels for tablet and mobile
- Optimizing customized buttons with photos
- Optimizing button overlays
- Optimizing regular text and headings
- Changing the tablet and mobile navigation styles
- Disabling brics and bloc not suitable for mobile viewing


Finalizing and exporting the project
- Checking the page settings
- Filling the SEO information
- Exporting the project in to system folder

You don’t need to know coding to build beautiful websites


And you will able to build any kind of website yourself

Learn basics

Getting Started with Blocs

This free course includes 14 easy-to-follow videos on Blocs basics

Learn to build a full website

Building a website in Blocs

24 videos covering every step involved in building a multi-page website

Master the advanced features

Blocs Core Training

Detailed videos explaining various aspects of using Blocs.

About the creator of Blocs Master

Hi, my name is Eldar.

I have used the Blocs app to build over 70 beautiful websites, including the full collection of templates on Blocs Templates. I was able to do that without any technical knowledge about coding.

I want to share my skills with you.

Visit my website >

Sign up for newsletter

Get product updates, launch info, and special deals by signing up for my newsletter.


Blocs Templates is the best place to download beautiful, high-quality templates for Blocs


Let’s connect on social media and help each other learn new things about Blocs.


Whatever you are a customer or not, I am always happy to answer your questions.


Blocs Master is based on Podia, which is a safe and completely secure platform.


Copyright © 2018 Eldar Gezalov