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?
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.
- Step One
Make a numbered list - Step Two
In the block settings sidebar, expand the advanced tab - 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.
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.