• Skip to primary navigation
  • Skip to main content

Genesis Blocks Demo

A website built with Genesis Blocks

  • Home
  • Services
    • Genesis Blocks Services Page
    • Service Professional Demo Page 1
    • Service Professional Demo Page 2
    • Service Professional Demo Page 4
  • About
    • About Us Demo Page 1
    • About Us Demo Page 2
  • Contact
    • Contact Us Demo Page 1
  • Page Sections
    • Genesis Blocks Sections
    • Sections I Use Most
  • Show Search
Hide Search

Page Sections I Use the Most

I analyzed 150 successful small business websites to see what page layout elements are most common.

I discovered the best websites use relatively simple page layouts.

Genesis Blocks has most of the layouts you need, and you can add those layouts to your own page with one click. However, as you become more skilled using Genesis Blocks, you’ll want to make a few small tweaks to the built in layouts and maybe even make some of your own layouts from scratch.

I built all of the layouts on this page using Genesis Blocks plugin.

This is an advanced columns block with a background image

I used a PNG image to make the semi-transparent dark background behind the text. Genesis Blocks does not have a setting for this. Why to experiment yourself and see what you can come up with?

Unsplash Image

This is a Gutenberg Columns block nested inside a Genesis Blocks Advanced columns block

This Gutenberg Columns block uses a single column and that single column is set to 65% width. This is the easiest way to make this column wide on small devices, whilst still being the exact width you need on desktops.

This Is a Short Headline

This is a demo paragraph of example text. It’s only here to help me show you what this page would like like with content in it. This is a demo paragraph of example text. It’s only here to help me show you what this page would like like with content in it.

This Is a Short Headline

This is a demo paragraph of example text. It’s only here to help me show you what this page would like like with content in it. This is a demo paragraph of example text. It’s only here to help me show you what this page would like like with content in it.

This Is a Short Headline

This is a demo paragraph of example text. It’s only here to help me show you what this page would like like with content in it. This is a demo paragraph of example text. It’s only here to help me show you what this page would like like with content in it.

Single Column Advanced Columns Block

This is the inner column of an advanced columns block. The column is 700px wide and has “center columns in container” toggled on, outer block has “center columns in container” toggled off.

This looks better on small devices than the ready made Genesis Blocks layout.

Media & Text

Whenever I place a photo at the side of text, I use the Media & Text block.

This has some settings that are not available when I use the advanced columns block in Genesis Blocks.

The main benefit is that the photo will scale better on smaller devices. I can also choose the focal point, so whatever size the photo is displayed, the most important part, the face in this instance, is still shown.

This is a numbered list

Genesis Blocks plugin has a built in CSS class that highlights the numbers in a numbered list. To get this effect you must add gpb-number-list class to the advanced CSS box in the list block settings sidebar.

  1. Step One
    Make a numbered list
  2. Step Two
    In the block settings sidebar, expand the advanced tab
  3. Step Three
    In the Additional CSS class(es) box, type this gpb-number-list

Semi-transparent backgrounds

To give this inner column a semi-transparent dark background, I used a semi-transparent PNG background image. The outer advanced columns block has a transparency setting, but I couldn’t apply that to this inner block.

This is a three columns advanced columns block

This is an advanced columns block

This is paragraph text inside one column of the advanced columns block. You can put photos in these columns too, if you want to.

This is an advanced columns block

This is paragraph text inside one column of the advanced columns block. You can put photos in these columns too, if you want to.

This is an advanced columns block

This is paragraph text inside one column of the advanced columns block. You can put photos in these columns too, if you want to.

This is a another three columns advanced columns block

But this time I added background colors and padding to the individual columns.

This is an advanced columns block

This is paragraph text inside one column of the advanced columns block. You can put photos in these columns too, if you want to.

This is an advanced columns block

This is paragraph text inside one column of the advanced columns block. You can put photos in these columns too, if you want to.

This is an advanced columns block

This is paragraph text inside one column of the advanced columns block. You can put photos in these columns too, if you want to.

Media & Text

Whenever I place a photo at the side of text, I use the Media & Text block.

This has some settings that are not available when I use the advanced columns block in Genesis Blocks.

The main benefit is that the photo will scale better on smaller devices. I can also choose the focal point, so whatever size the photo is displayed, the most important part, the face in this instance, is still shown.

This is an advanced columns block
This is paragraph text inside one column of the advanced columns block. You can put photos in these columns too, if you want to.

This is an advanced columns block
This is paragraph text inside one column of the advanced columns block. You can put photos in these columns too, if you want to.

This is an advanced columns block
This is paragraph text inside one column of the advanced columns block. You can put photos in these columns too, if you want to.

I used a semi-transparent background image here

This is the left hand column of an advanced columns block. I couldn’t add a background transparency, so I made a semi-transparent background image using graphics software such as Photoshop.

This Image came From Unsplash

Colors and Separators

This single column advanced columns block contains headline, paragraph and separator blocks. I also changed the background and text colors for the whole row via the advanced columns block settings.


Be Subtle

When you’re choosing colors for your website, be subtle. Don’t use too many colors, I often use one main color and several shades of that color.

More than one image

Whenever you place more than one image side by side in a row, use the gallery block. It’s easy to use and saves a lot of messing about. There are plugins that enable you to add links to the images if you need to.

Single column advanced columns block

This is a single column advanced columns block containing a headline, paragraph and image. Making the image a single image, instead of three independent images, simplifies the layout.

You can make checker board layouts using the media and text block

Media & Text

Whenever I place a photo at the side of text, I use the Media & Text block.

This has some settings that are not available when I use the advanced columns block in Genesis Blocks.

The main benefit is that the photo will scale better on smaller devices. I can also choose the focal point, so whatever size the photo is displayed, the most important part, the face in this instance, is still shown.

Media & Text

Whenever I place a photo at the side of text, I use the Media & Text block.

This has some settings that are not available when I use the advanced columns block in Genesis Blocks.

The main benefit is that the photo will scale better on smaller devices. I can also choose the focal point, so whatever size the photo is displayed, the most important part, the face in this instance, is still shown.

This Is a Simple CTA

Genesis Blocks has a built in Call to Action block, but that restricts you to the built in layout. With a bit of practice you can make all kinds of row and column layouts to build your own calls to action. Why not try it yourself?

Adding Icons to Your Page

The icons below are images but you can use the Better Font Awesome Icons plugin if you prefer. If you do use the plugin, set the icon color via the column settings and set the headline and paragraph colors via the headline block and paragraph block settings.

Build your site with Genesis Blocks today.

Genesis design collections have everything you need to design beautiful block-powered websites with just a few clicks.

Build your site with Genesis Blocks today.

Genesis design collections have everything you need to design beautiful block-powered websites with just a few clicks.

Build your site with Genesis Blocks today.

Genesis design collections have everything you need to design beautiful block-powered websites with just a few clicks.

This layout looks like a blog listing but it’s not

This layout is built from nested media and text blocks. The images, headline and paragraph blocks are stacked inside each column of a three column advanced columns block.

Build your site with Genesis Blocks today.

Genesis design collections have everything you need to design beautiful block-powered websites with just a few clicks.

Build your site with Genesis Blocks today.

Genesis design collections have everything you need to design beautiful block-powered websites with just a few clicks.

Build your site with Genesis Blocks today.

Genesis design collections have everything you need to design beautiful block-powered websites with just a few clicks.

Clean and simple trumps fancy and confusing

You’re much more likely to look unprofessional by “jazzing it up a bit” than you are by keeping it simple. When I see an ugly looking website my first thought is almost always the same. They’re trying too hard, they’ve added unnecessary elements, and that ‘s made their message unclear.

This is the Before Footer CTA section.

Use this banner to grab your readers attention and guilde them to an important page on your website.
Findout More!

Genesis Blocks Demo

Copyright © 2023 · Monochrome Pro on Genesis Framework · WordPress · Log in