How to Make Responsive Landing Pages

 with WordPress’ editor Gutenberg + the C9 Blocks plugin

The C9 Grid block is what makes up the majority of our full landing page templates.   This is because the responsive grid allows your content to expand and contract for various screen sizes in both overall width, columns, and sizes of fonts and imagery. Without a responsive framework and grid system, your website won’t load fast on mobile screens, and won’t offer a good experience for your users.

How we use the C9 Grid

We use the C9 Grid block as a responsive container for columns of text, or even a single column of text.

Why use the C9 Grid instead of just dropping your blocks right on the page?

The C9 Grid allows for complex layouts.

The C9 Grid makes it easy to create layouts that guide site visitors, visually, through the information on the page, often towards some sort of action, like a form, comment section, or related posts.

Responsive grids allow your designs to scale down on mobile and stack the columns on top of one another so no text runs offscreen. This means that your potential customers or any website visitors won’t see jumbled up, microscopic text.

Quick start with the C9 Grid

The fastest way to see the C9 Grid in action is to click on the feather icon (like the one pictured next to the above heading) and then click on either the Section Templates or Page Templates buttons to open up a modal with pre-built examples for you to use on your own site.

Just click on the section templates or page template you want to start with as a guide and simply change out the content!

Walk Through Video

What better way to learn about how to use our editor than with one of the people who helped make it!

In the above video, we replicate the layout of a popular video streaming website with our C9 Grid and C9 Posts Grid blocks, some sample posts in a few different categories, and a fan-made Star Wars short film YouTube link.

What you’ll learn
  • Build a landing page using Gutenberg + the C9 Blocks Plugin
  • Make a fullscreen video background with Gutenberg and a YouTube video
  • Use the C9 Grid + C9 Post Grid block to create a grid of posts in WordPress with the help of our starter WordPress theme and C9 Admin plugin
  • Bear the weight of your own existence as you sit in silence through YET ANOTHER screen recording
Grid
After selecting the C9 Grid block, you’ll be asked how many columns you want. A lot of our most used layouts only have one column!

Building a new Twenty Twenty Homepage

The new theme for WordPress 5.3 is out, and it’s called Twenty Twenty. The theme doesn’t come with a ready to go home page based on the design mockups, so we figured we’d make one!

We got pretty close in the above timelapse video.

What you’ll learn
  • How to build a landing page for the Twenty Twenty Theme
  • How to use the C9 Grid block
  • How to use the C9 Posts Grid block
  • How to use Image Carousel blocks