This post is all about designing the way you want your articles to show up on a page. The Content Display Block (PublishPress) is great for the home page. Blocks related to columns are for each individual post (or page) and how the paragraphs and so on are arranged within the post.
Content Display Block (PublishPress)
To see a Content Display Block is action, go to The WP Inn’s home page. There, I have a grid of 4 posts within a Content Display Block. This block has a multitude of other options.
Besides arranging posts in a grid format, you can choose from any of these.
- List
- Slider
- Frontpage
- Newspaper
- Masonry
Sorry, I’m not going to try to demonstrate these displays. Please play with them on your own time.
You can choose to either include Posts or Pages (not both) and determine their order of presentation based on these factors – in either direction (A to Z, or Z to A, for example).
- Creation Date
- Alphabetically (by Title)
- Alphabetically by Author
- Modified Date
- Post ID
- Comments
- or Randomly
You can choose the number of items that will appear (four, in mine) in the block. You can filter them by Category, Tag, and Author. You can decide how many columns to display (two, in mine). You can show a Featured Image for all posts, just the first one, just the first two, etc. – up to the first 5 posts.
You can show / hide the post’s Author, Date, Category, and Tags. You can show / hide the first x-number (the amount of which you can set) of post words and the “Continue reading…” text – which you can also change to whatever you want.
Finally, you can add text (or HTML) of your choosing to go right after the title and / or right before the Read More area. I suppose this is most useful if you decide not to include any of the text from the post itself.
Yeah…that’s a lot of stuff. Most of it you’ll probably never use.
Edit: I probably should have included Post Grid, Post Masonry, and Post Carousel blocks from Ultimate Addons here. I may give them their own design post elsewhere later.
Columns
Though there is an element of columns in the Content Display Block, when it comes to individual posts and pages, you want a columns block of some sort to handle the text.
Basic Columns Block
When you first insert a Columns Block, you get a popup like this.
I chose the thirds arrangement (33 / 33 / 33), so WP next presented me with 3 boxes across my screen. Each had a plus sign, which is a prompt telling me I should add a block to each column.
In this first column, I added a Paragraph Block. If I hit Enter at the end of a paragraph, I start a new paragraph within the Columns Block.
You can always change the column setup later if you don’t like what you first picked (or if you skipped that part all together).
Column 2
In this second column, I first chose a Heading Block and set it to H4.
Then I hit Enter and started typing in a Paragraph Block just as I would normally do, but I’m still in the Columns Block.
Columns can be of different vertical lengths. You can see some of the coloration changes you can make.
If you select a column and change its text color (to orange, for example) that color will only show up later. It’s still black in the editor.
After hitting enter, I’m in a new Paragraph Block.
Don’t expect everything to look the same in the editor as it will after you publish. Use preview extensively to check it out as you go.
Advanced Columns Block (Ultimate Addons)
As it should, the Advanced Columns Block gives you more initial options.
And, as you should also expect, this block has a bunch of options in the right column of the editor.
The general categories of options include the following.
- Layout
- Spacing
- Background
- Border
I won’t be able to show you all of them, and you likely won’t need most of them, but it’s one of those cases where it’s good to know the options are there when you do need them.
Layout
This is basically the column widths and how they will appear on the three main device types – desktop / laptop, tablet, and phone.
Spacing
Spacing means the padding and margins on all four sides of the columns.
Background
Background type can be a color (green, here), gradient, or image.
Border
Border style can be any of these.
- None
- Solid
- Dotted
- Dashed
- Double
- Groove
- Inset (chosen here)
- Outset
- Ridge
And you can set the border radius and color (gold, here).
Again, don’t expect what you see in the editor to be an accurate reflection of real life. Use previewing.
I’ve also discovered that, if you’re logged in to your site, what you see on the front end may not be what your visitors (who are not logged in) will see. This feels like a WP bug, but I’m not 100% sure of that. There are so many pieces in this puzzle that it;s hard to tell where the glitch may be.
Columns Manager (PublishPress)
The Columns Manager from PublishPress shows you a ridiculous number of starting options for columns. This is really overkill. You could just as easily pick from a smaller selection and make adjustments later.
The choices you can make with this block are mostly related to the size and spacing of the columns. One option that could be really useful in certain cases is setting the rows within the columns. For example, I set the maximum height of this row to 150 pixels. What I think should happen, though, isn’t what’s happening.
Since it wasn’t happening as expected, I started over and didn’t try that again.
An important point (yet again) here is that, when working in this block in the editor, I’m seeing the columns set to 50/50, even though I chose 66/33. It’s going to look much different in preview and publish mode.
I’m not sure all the options here are working (with this theme (Astra) as expected.
The left column has a Double Border and border radius set to 30. This column has a Groove border. Both have the border width set to 10.
After my latest preview, I set all Padding to 5 pixels because the borders I had chosen made the text just too close to the edges.
