Introducing the Blocs 4 Blogging Course

Introducing the new video course covering how to build a fully functional blogging website with Blocs 4 and Volt CMS.

In Blocs 4 Blogging Course, I am sharing my experience using Blocs 4 and Volt CMS. to build a fully functional blogging website. In a total of three parts, I am covering the Volt CMS basics, the process of installing and setup up a Volt Blog, and the full appearance customization process.

Visit Blocs 4 Blogging Course

Available for Free to Blocs 4 Ultimate Pack Customers

If you have previously purchased the Blocs 4 Ultimate Pack, the new Blocs 4 Blogging Course is available to you for free. In fact, it is already in your dashboard waiting for you.

Blocs 4 Commerce Course - The Curriculum

Blocs 4 Blogging Course Overview

Part 1. Volt CMS Basics

1-1. Installing Volt CMS on your Computer

⁃  How to install Volt CMS custom blocs and brics
⁃  Setting the default settings for Volt CMS project

1-2. Setting Up the Volt Core Bric

⁃  Project Settings Overview
⁃  Writer Volt CMS project overview
⁃  Installing Volt CMS Core Bric
⁃  Changing the settings of Volt Core Bric
⁃  Uploading the Website to FTP server

1-3. Creating a Login & Logout Page

⁃  Creating a Login & Logout page
⁃  Adjusting the design of the Login page
⁃ Testing the login experience on live website

1-4. Adding Volt Content Areas

⁃  Adding the partial Volt Content areas
⁃  Adding the full Volt Content area pages
⁃  How to edit Volt Content areas
⁃  Basic workflow for adding content via Volt Content Editor

1-5. Volt Content Editor Tools Overview

⁃  Adding Content to Volt Content page
⁃  Adjusting the style of Volt Content page
⁃  Content Editor tools overview
⁃  Typography styles overview
⁃  Inserting different types of lists
⁃  Uploading & embedding images and videos
⁃  FTP server folder structure overview

1-6. Adjusting Default Content Styles

⁃  How to adjust paddings and margins
⁃  Overview of the content item properties
⁃  Making the embedded video responsive
⁃  Adjusting the size of the embedded video
⁃  Enabling the Image Protection
⁃  Enabling the Lightbox for images
⁃  Overview of the localhost preview
⁃  Changing the site-wide color for typography
⁃  Creating specific text styles
⁃  Creating specific image styles
⁃  Adding custom styles to Volt Core Bric
⁃ Applying custom text or image styles

1-7. Using Volt Gallery Bric

⁃  Volt Gallery Bric overview
⁃  Checking the different gallery styles
⁃  Uploading the images to our website
⁃  Changing captions for gallery images

Part 2. Setting Up a Volt Blog

2-1. Adding a Volt CMS Blog to a Website

⁃  Adding the Volt Blog bric to the Blocs project
⁃  Creating the basic layout for our blog
⁃  Adding a sidebar to our blog page
⁃  Setting up the Volt Blog Bric Settings

2-2. Overview of the Blog Post Editor

⁃  Adding new blog posts to our website
⁃  Overview of the blog post editor
⁃  Adding thumbnails to your posts
⁃  Different content areas in post editor

2-3. Optimizing URLs for SEO & Setting the RSS Feed

⁃  Enabling the Pretty URLs
⁃  Setting up the RSS feed
⁃  Adjusting the code for .htaccess file
⁃  Creating the .htaccess file on your computer
⁃  Checking the RSS feed on the live website

2-4. Using the Volt Recent Posts Bric

⁃  Changing the ‘Hide Feature Posts’ setting
⁃  Adding Volt Recent Posts bric
⁃  Adjusting the settings for Volt Recent Posts bric
⁃  Checking the Recent Posts Bric in action on the live website

2-5. Adding a Sidebar to the Blog Page

⁃  Sidebar structure overview
⁃  Setting the basic sidebar structure inside the Blocs project
⁃  Creating the post category list
⁃  Using the Volt Recent Posts bric in the sidebar
⁃  Changing the style of the sidebar

2-6. Using the Volt Blog Search Bric

⁃  Adding the Volt Blog Search bloc to our website
⁃  Adding the Search box to the sidebar
⁃  Limitations of using the Search bloc in the sidebar
⁃  Testing the Search functionality on the live website

Part 3. Styling the Volt CMS Blog

3-1. Overview of the Styling Process

⁃  Adjusting the negative margin for the content area
⁃  Two methods to change the style of the Volt Blog
⁃  Using the list of default classes
⁃  Adjusting the padding under header area
⁃  Adjusting the style of the specific element
⁃  Using the Webkit Inspector to find classes

3-2. Fine-Tuning the Layout of the Blog Page

⁃  Adjusting the space between the sidebar and content area
⁃  Experimenting with the sidebar and padding
⁃  Adding extra padding to the post bloc
⁃  Adjusting the header content margin

3-3. Adjusting the Style of Post Titles

⁃  Changing the default styles for post titles
⁃  Changing the line height for titles
⁃  Changing the blog page structure to 1-column layout
⁃  Scroll to Top in Detail view setting live example

3-4. Styling the Blog Post Metadata

⁃  Metadata section overview
⁃  Changing the formatting of the date
⁃  Adjusting the style of the date
⁃  Changing the structure of the category
⁃  Adjusting the style of the category link
⁃  Adjusting the margin of the post title

3-5. Adjusting the Social Share Bric

⁃  Adjusting the maximum width of the Social Share Icons bar
⁃  Adjusting the margin for Social Share Icons bar
⁃  Checking the Social Share Icons on the live website

3-6. Adjusting the Style of Buttons

⁃  Example of the Social Share function
⁃  Creating the new button style from scratch
⁃  Overview of the Volt button classes

3-7. Adjusting the Position of Buttons

⁃  Adjusting the margin of the post navigation buttons
⁃  Changing the alignment for post navigation buttons
⁃  Changing the number of posts shown on the blog page
⁃  Changing the alignment for the page navigation buttons

3-8. Styling or Hiding the Page / Post Counter

⁃  Hiding the post counter for the post page
⁃  Class for the page counter overview

3-9. Optimizing the Margins & Title Sizes

⁃  Optimizing the spacing for post items
⁃  Adjusting the size of post titles
⁃  Targeting the specific title in the footer
⁃  Changing the layout for the Volt Recent Posts bric
⁃  Adjusting the general structure of blocs on the blog page

3-10. Mobile Optimization, Backup & Final Test

⁃  Mobile optimization of our website
⁃  Adjusting the order of sidebar and bloc content areas
⁃  Adjusting the sizing of some text for mobile
⁃  Adjusting the margin between elements
⁃  Backing up your Volt CMS data
⁃  Posting the final blog post

Learn More