In part two of this very sober video series, plugin installation, configuration, and data imports are complete. (If you haven’t seen part one yet, watch it here:
Now it’s time to construct the full homepage for the band. We’ll start from a blank screen and use section templates from the C9 Blocks plugin and get to our finished layout in just a few minutes.
Once done with this two-part video, you’ll have a Gutenberg-powered WordPress site built from the C9 Blocks plugin, and an animated scrolling single page navigation with the help of GreenSock and ScrollMagic Javascript libraries.
The final WordPress theme we end up with is available for free download from us or from Github.com and we call it C9 Music.
We’re also working on our third free Gutenberg theme called C9 Work that you can see in action at the link below. Now if we could just get around to submitting the themes to WordPress.org…
In this video we:
1. Construct block section templates using content from a band including Spotify links, band imagery, and YouTube videos
2. Use C9 Grid blocks, C9 Image Carousels, C9 Carousels, pre-made Section Templates, and build your own sections from scratch to re-create the music.covertnine.com homepage
3. Add anchor IDs to C9 Grid elements, and links in the Appearance Menus part of the WordPress admin so your links will scroll down to your sections when clicked
4. Add a YouTube video background to a C9 Grid block
5. Add a full-screen background image to the C9 Grid block as a fallback for mobile
6. Override mobile settings for background image positioning
7. Adjust spacing settings using Inspector settings that use Bootstrap Classes
8. Use responsive CSS Grid columns in Bootstrap containers for mobile-friendly landing page layouts
Skip ahead to specific parts
• 00:35 Download the free internet goods… suite, for free
• 01:17 Setting theme color palette
• 01:30 Beginning of building the homepage sections from scratch
• 01:40 WordPress 5.4 removed the borders from the editor so ignore those
• 01:51 C9 Grid block settings
• 02:09 YouTube video background
• 02:22 Vertical alignments of grid elements
• 03:15 Using pre-designed section templates
• 04:34 Using embed blocks for Spotify playlists
• 06:01 Editing a C9 Carousel block
• 06:42 C9 Posts Grid block setup
• 07:09 WooCommerce Products block
• 08:25 Adjusting C9 Grid block spacing, margins, + padding
• 09:20 Adding section IDs for navigation links
• 10:03 Appearance, Menus to add links to section IDs
• 11:01 Adding section CSS classes to menu links
The plugin for the admin, the blocks, and the theme in this video are available for download now for free from the link below (So be nice.) or from the WordPress.org plugin repo if you want to install it right from WordPress’ admin interface.
See additional videos, walk-throughs, and documentation on our demo site and blog
FOLLOW US OR BE DAMNED
I guess, but only if YOU PROMISE to follow us before you slip into our DMs with your questions or comments.