Introducing the Blocs Blogging Course
Learn how to build a fully functional blogging website with Blocs 4 and Volt CMS.
In Blocs Blogging Course, I am sharing my experience using Blocs app 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 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 Commerce Course - The Curriculum
Blocs 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’ settings
⁃ 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