Blocs 4 Course On Sale

Blocs 4 Website Course

Learn everything you need to know to build a fully functional e-commerce website in Blocs 4 and popular payment processors.

The Curriculum

Blocs 4 Website Course Overview

Part 1. Introduction
1-1. Exploring Blocs 4 User Interface
1-2. Project & Page Settings
1-3. Blocs Website Structure
1-4. Visual Web Design Basics
1-5. Classes Basics
1-6. Managing Menus
1-7. Image Editor & SEO Helper
1-8. Next Steps

Part 2. Preparation
2-1. Overview of the Part 2
2-2. Planning a Website Project
2-3. Setting Up a Project
2-4. Creating Pages & Site Structure
2-5. Installing Custom Google Fonts
2-6. Default Typography Settings
2-7. Preparing Images
2-8. Preparing Videos
2-9. Review of the Part 2

Part 3. Design
3-1. Creating a Custom Menu
Adaptive menu
Subclass Library
Visibility options
Flex Justify Content
Flex Align Content

3-2. Adjusting the Style of Menu
Customization of navigation links
Creating and editing custom classes
Adding responsive padding to links
Hiding Items from Design Canvas

3-3. Setting the Color Scheme
Using Global Swatches Manager
Creating a color palette for a website
Using Color Pickers
Adding colors to favorites
Hover color for navigation links

3-4. Optimizing the Mobile Menu
Using Full Screen menu on mobile
Changing the style of the special menu
Aligning any element with ‘auto’ margins
Changing the style color of special menu
Changing the color of the close button

3-5. Completing the Custom Menu
Page name & page title connection to nav links

3-6. Creating banners with Responsive Headers
Adding background images to blocs
Adding textures to background images
Enabling Parallax efect
H1 Title importance
Creating responsive headers
Setting the max width for elements or columns

3-7. Responsive Padding
Breakpoint-specific padding settings
Holding ‘Option’ key to apply to all breakpoints
Freehand Control
Reusing Custom Classes
Mobile-first rules in Bootstrap

3-8. Applying Gradients to Text
Applying colors to elements
Creating gradient text colors
Line Height tip

3-9. Bloc Edge Shape Dividers
Adding Edge Dividers to blocs
Adjusting divider style
Creating responsive styles
Switching between breakpoints
Divider shape types

3-10. Building Responsive Column Grids
Saving project
Automatic backup feature
Creating responsive column grid
Using built-in blocs vs creating yourself
Image ratio recommendations
Column Width & Offset settings basics
Adding margins to rows, images
Creating text links
Adding responsive padding to columns
LG first rules for custom class editor

3-11. Applying Css Filter Effects
Adding buttons
Creating a page and reordering it Page navigator
Adding interactions to images or links
Adding CSS filter effects to images
Creating hover effects for images

3-12. Class Library Manager
Class Manager basics
Saving Custom Classes to Class Library
Adding Custom Classes from Library
Using Delete all unused classes feature

3-13. Custom Button Styles
Creating new button styles
Hover effets for buttons
Previewing in Browser
Deleting the border of buttons
Adding shadows

3-14. Building Website Footer
Creating a shortcut to another page
Adding shape dividers
Creating custom footer bloc
Building for mobile and desktop simultaneously

3-15. Social Links & Footer Optimization
Using Follow Links custom bric
Creating custom footer nav links
Optimizing footer navigation for mobile
Adding extra top padding to footer bloc

3-16. Writer Mode & Text Editing Options
Creating full-screen image banners
Adjusting the width of columns
Edit text in Writer Mode
Splitting text brics
Inserting headers and images
Adjusting margins for text brics

3-17. Multi-layer Parallax Effect
Creating transparent PNG background
Adding multiple background images
Adjusting z-index
Enabling double parallax
Adding animated text
Using Layer Navigator to select items
Adjusting margin with Freehand V2 Control
Using Scroll FX

3-18. Building a Grid of Icons with Text
Moving blocs on design canvas
Building grid of columns with text and icons
Duplicating columns
Using Copy & Page feature
Freehand control for column padding
New Font Awesome 5 Icons
Changing Icons

3-19. Edge to Edge Feature Blocs
Making the text bric width responsive
Creating custom 2 column full width bloc
Positioning text bric in the middle of the column
Making a column with text responsive
Duplicating blocs
Changing the order of columns per breakpoint

3-20. Gradient Background & Wire Button
Creating gradient backgrounds for blocs
Adding video backgrounds
Creating wire style for buttons

3-21. Installing 3rd Party Brics
Downloading 3rd party brics
Installing custom brics
Using Particles bric
Adjusting the particles bric style
Blocs Store details

3-22. Creating a Shop Page
Adding page banners
Duplicating blocs to another pages
Adding shape dividers to banners
Reusing blocs from other pages
Creating another page shortcut

3-23. Using Toggle Visibility
Creating Reviews/Testimonials area
Adding responsive padding around columns
Using Toggle Visibility feature
Using Visibility settings

3-24. Setting Up a Product Page
Creating product page header
Creating product details pane
Freehand control for text
Installing custom bric from Blocs Store
Adding Star Ratings to our product page

3-25. Setting Up a Tabbed Contact Bric
Adjusting the width per breakpoint
Inspecting the website with Webkit Inspector
Finding the right classes
Aligning the nav tabs using flex class
Adjusting the style of tabs
Adjusting the style of tab links on hover
Changing the style of active tab

3-26. Adding Content to Tabs
Adding Content
Using 2-column row bric
Using Card bric for reviews
Adjusting the Star Rating bric
Adjusting the spacing between elements

3-27. Using Toggle Class Interaction
Enabling Lightbox interaction
Using Toggle Class interaction
Creating image carousels
Using positioning tab in Class Editor
Creating cool overlay windows / pages
Creating close button for overlay window

3-28. Completing the Product Page
Changing the default cursor type
Adjusting the page for all breakpoints
Adding parallax image banners
Creating similar products bloc
Adding bloc edge dividers

3-29. Setting Up a Gallery Page
Creating full screen edge to edge gallery
Removing all padding from columns and blocs

3-30. Setting Up a Contact Page
Creating a page banner
Custom columns layouts per breakpoint
Using Telephone Link interaction
Creating ‘mailto’ links
Adding padding to bottom of columns

3-31. Adding & Editing the Form
Setting up a form bric
ReCapture bric
Adjusting the settings for forms
Editing the Bootstrap classes
Removing the Focus Shadow from form fields
Freehand Control
Setting max width for forms

3-32. Embedding Google Maps
Finding embed code in Google Maps
Placing the map using Code Widget bric
Adjusting the width of the map

3-33. Adjusting the Style of Alert Messages
Alert bric intro
Changing the style for Alert container
Changing the style for individual alert type
Blocs Form troubleshooting tips

3-34. Adjusting the ‘Scroll to Top’ Button
Adding a Bootstrap class from subclass library
Adjusting the background color of scroll to top button
Part 4. Optimization

4-1. Website Design Optimization
Optimization Part Overview
Checking each page on all breakpoints
Checking mobile menu
Rebuilding column grid for SM breakpoint
Adjusting bloc padding
Adding missing edge dividers
Adjusting Specs columns for mobile
Adjusting Tabbed Content Bric’s tabs
Removing duplicate images from gallery
Rebuilding column layout for contact page
Safari’s Responsive Device Mode

4-2. Local Host Preview
Accessing local host versions of our websites
Previewing on iPad or any other device

4-3. Troubleshooting Links
Checking for spelling
Checking for broken links
Changing links in the footer navigation
Buttons, Images, all elements with interactions
Social icon’s links
Checking the form settings
Using online tools to check for broken links

4-4. Adjusting Page Settings
Checking page settings for each page
Filling the SEO title and description for each page
Robot Meta tag, Index This page, Follow links
Canonical Meta tag
Keywords
SEO description tips

4-5. Adding Social Cards
Adding title and description to social cards
Preview image for Twitter
Preview image for Facebook
Recommended sizes

4-6. Search Engine Optimization
SEO Helper
Page URL tips
H1 title tag
Using H1~H6 headers to structure web pages
Optimizing Page Settings
Social images
Generating and submitting sitemap
Alt text for all images
My free SEO guide

Part 5. Publishing

5-1. Exporting & Publishing a Website
Exporting Blocs Project
Domain name and hosting providers
FTP Clients
Uploading files to FTP server
Updating websites
Overriding files setting
Testing email form

5-2. Analyzing Website Performance
Checking the performance with GTmetrix
Checking the speed with PageSpeed
Checking the performance with Pingdom Tools
Recommendations and advice

5-3. Creating and Editing .htaccess File
Showing hidden files on our server
Creating .htaccess file
Editing .htaccess file
Redirecting to HTTPS
Fixing broken links and setting up redirects

5-4. Preparing Project Files for Transfer
Generate package feature
How to use it
Custom Fonts
Custom Brics

Blocs 4 Website Course Review

Part 6. Bonus Videos
6-1. DIV Container Bric
6-2. Styling Dropdown Menus
6-3. Class Editor – Flex
6-4. Class Editor – Positioning
6-5. Vertical Menu – Part 1 – Flex & Position
6-6. Vertical Menu – Part 2 – Body Classes
6-7. Continuous Scroll FX
6-8. Class Editor – Filters
6-9. Class Editor – SVG
6-10. Carousel Bric
6-11. Class Editor – Shadows