This list of Genesis Blocks tips and tricks will help you as you build your site. Most of the tips and tricks are obvious once you understand how Genesis Blocks works. But I hope that listing the tips here will help you get your site up and running faster I got mine set up.
Favorite the layouts you want to reuse
From the ready-made layouts, cherry pick the layouts you will use most often. Then add them to your layout favorites. Pick layouts that you can rely on to look good on all devices, large and small.
Stick to one and two column layouts if possible
Build your pages using one and two column layouts wherever you can. If you must use a three or four column layout, weigh the pros of having all three or four columns of content on one row, against the cons of squished or narrow columns on some tablets and mobile screens.
Some three column layouts look OK
Whenever you use a three or four column layout, test on small screen devices to see what your layout looks like on a smart phone or tablet computer. If the columns look too narrow, change your layout to a two column layout.
Test on small screens
Always test on real devices to see what your design looks like in the real world.
Media & Text is my go-to block
To place text at the side of an image, I always use the Gutenberg Media & Text block. There are several Genesis Blocks layouts that place an image at the side of text, but I rarely use those layouts. The Media & Text block is always my first choice.
The Post and Page Grid block has limited styling options
The Slate Blog Posts layout uses the post and page grid block. This automatically draws in blog posts or web pages and displays them in a grid or column layout. Using the Slate Blog Posts layout, you can display or hide several elements of each blog post, such as the featured image, postdate and post excerpt text.
The post grid block is extremely useful, and it’s quick and easy to set up. But you can’t change the size or color of the text. And you can’t change the background color of the individual columns.
The Image and Text column Layouts are customizable
The layouts section tab in Genesis blocks, includes two layout blocks that look like post grid blocks, but they are not post grid blocks. So be careful!
The two blocks are…
- Slate Feature Image and Text Columns block (this is a two-column layout)
- Slate Image and Text Columns block (this is a three-column layout)
These two layouts have more styling options than the post grid block, because the image and text columns blocks are built from several other blocks. And each of those blocks has its own styling options.
This is how the image and text columns layouts are built…
- The outer wrapper div is an advanced columns block. This contains a single column.
- The inner wrapper div is an advanced columns block. This contains two or three columns.
Each column contains these blocks…
- Image block
- Headline block
- Paragraph block
- Button block
All of these individual blocks have their own settings. You can find the settings for the active block in the toolbar above the block and in the block settings sidebar.
The Team Members and Testimonial layouts are customizable
These ready-made layout sections contain profile box blocks and testimonial blocks stacked inside the advanced columns block.
Place your cursor in the text of the profile or testimonial block. Then change the settings in the toolbar above the block or the setting in the block setting sidebar.
You can change text size, text and background color and several other settings.
If you select the advanced columns block wrapper div, you can change the background color of the whole row.
Converting a three-column layout in to a two-column layout
You can reduce the number of columns in the ready made layouts. Do this BEFORE your place content in any of the columns or you’ll lose your work!
- Place your cursor in a paragraph.
- Go back up the breadcrumbs and select the first advanced columns block you come to.
- In the block editor sidebar reduce the number of columns from three to two.
If the hero header headline looks too big on small screens
Genesis Blocks includes three hero header sections. After you place a hero header at the top of your page, you may think the font size looks too big on small screens. You can reduce the font size via the headline block settings in the block settings sidebar.
I change the headline size from 60 pixels to 40 pixels. But always test on your theme and see what looks best.
Changing the width of the text in the hero header
On some small screens the text in the hero header only occupies half of the screen and I think it looks a bit cramped. The hero headers are built from two advanced columns blocks, one wrapped inside the other. By changing the settings of these two advanced columns blocks, we can change how much of the screen the text spans.
- I set the inner advanced columns block to one column and set the max inner width to 700pixels.
- In the outer or wrapper div, the outer advanced columns container, I toggle off the center columns in container option. And I change the column max inner width to 1400 pixels.
Change padding from em to %
There are several layouts that have the padding set in em and I prefer %. These layouts include the black and blue boxes and the hero headers.
To find the padding settings…
- Place your cursor in the text of the layout you want to edit.
- Look in the block breadcrumbs at the bottom of your screen.
- Find and select the first instance of Advanced Columns.
- In the block editor sidebar scroll down to the Margin and Padding tab.
- After expanding the tab, find the Padding Unit and change it from Em (em) to Percent (%).
You will then need to change the amount of padding that block has, to suit your needs.
Black and blue box alignment
In the demo, the black and blue box both have identical content. If the blue box has less content than the black box, the two boxes will be different heights.
When this happens, I center align the boxes. Place your cursor in one of the boxes and look in the block breadcrumbs at the bottom of the screen. Select column. Then in the toolbar above that active block, choose the center align button. Do this for both the black box and the blue box.
To place two or more images, use a gallery
If you want to place more than one image on any row, use the gallery block. This looks much better than placing images side by side using the advanced columns block.
These two plugins make the gallery block even more useful…
- Gallery Custom Links by Jordy Meow
- Lightbox for Gallery and Image block by Johannes Kinsat
