'Building a Website in Blocs' course

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

24 VIDEOS

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

AMAZING VALUE

You get 10% off Blocs app and Blocs Templates Membership, $10 off Core Training course, and Photograph template (a $20 value)

44.99

 LIFETIME ACCESS

VIDEO SAMPLE

Watch a sample video from this course

THE CURRICULUM

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.

01

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

02

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

03

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

04

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

05

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

06

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

07

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

08

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

09

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

10

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

11

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

12

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

13

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 

14

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

15

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

16

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

17

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

18

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

19

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

20

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

21

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

22

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

23

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

24

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

BECOME A BLOCS MASTER

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

Receive updates on my projects: pop your email into the form below. You will receive one email a month at most. Your email address will not be shared with any third party

BLOCSTEMPLATES

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

LET’S CONNECT

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

HAVE QUESTIONS?

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

SECURE & SAFE

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

NEWS   |   YOUTUBE   |   TEMPLATES   |   GALLERY   |   BLOCS

Copyright © 2017 Eldar Gezalov