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.
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
- 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, but I’ll give them their own design post elsewhere later.
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).
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.
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.
This is basically the column widths and how they will appear on the three main device types – desktop / laptop, tablet, and phone.
Spacing means the padding and margins on all four sides of the columns.
Background type can be a color (green, here), gradient, or image.
Border style can be any of these.
- Inset (chosen here)
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.
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.