If you’re using GeneratePress, along with GenerateBlocks, and looking to create a cohesive design and layout for your blog posts — you’re in the right place!
I’m going to walk through the steps on how you can setup and implement the layout design so it creates a consistent and cohesive look across all your blog posts.
If you’d rather, you can watch the video below — and be sure to Subscribe to our YouTube for more tutorials!
For this demo, this is the hero layout we’re going to look to accomplish, created in Figma:
It has a hero image on the left hand side, and then a right column with the publish date, post title, excerpt and author name.
Let’s get to it!
1. Create an Element
First, we’re going to want to go to Appearance > Element, and click “Add New Element”.
Under Choose an Element Type, choose a “Block” Element.
Add the name of your Element, this is not super important, as it won’t be displayed on the front end — just for admin labeling purposes.
2. Insert & Setup Your Containers
First, using GenerateBlocks, add a Container, and an Inner Container (with the ‘add Inner Container’ button).
In this layout, we’re going to utilize flex, so we’ll need to add 2 more containers within our Inner Container — one for each column.
So inside the Inner Container, go ahead and add another Container block, then, either hit CMD+Shift+D, or click the three dots and select “Duplicate” to create a second flex container.
Choose the Inner Container (the one holding your two new containers), and choose “Flex” in the Layout > Display settings in the right hand block settings.
Then, select both of those containers, and set them also to “Flex” in the Layout > Display setting in the righthand column.
With both containers still selected, go to Sizing, and under “Width” insert “50%”.
Click back to your Inner Container, and under the Column Gap, add 40px. You should now see two containers (as dotted lines) and a gap between them in the middle, like this:
3. Add your Featured Image
Select your left container, and click to add a new “Image” block from GenerateBlocks.
Click “Media Library” to open up your library and choose an image.
Still with the Image selected, go to the Block settings panel on the right and scroll to Dynamic Data.
Toggle the “Enable Dynamic Data” to turn it on. Leave “Current Post” as the Data Source, and in Image Source choose “Featured Image”.
This will set it up dynamically so the featured image on all posts will show there.
In the Size settings for the Image, change the Height to 400px, and choose Object Fit > Cover in the dropdown.
4. Add the Date
On the right container, add a new Headline block from GenerateBlocks.
Scroll to the Dynamic Data options in the settings panel, and once again Enable Dynamic Data. Under Current Source, choose “Post Date”.
Change the heading style to a paragraph (p) in the Block toolbar.
Change the Font Size to 14px, and Letter Spacing to .05em. Adjust the Font Weight to Semi Bold.
Now go to Colors, and under Background choose a dark blue hue, and Text Color to white.
Add some Padding in the Spacing settings to 2px top and bottom, and 8px for left and right.
Now visit the container that’s holding the date Headline, and change the Flex setting Direction to “Column” instead of “Row”.
Also change Align Items to “Left”.
5. Add the Title
With your date headline selected, go ahead and hit Enter on your keyboard to create a new line. Select another Headline block from GenerateBlocks, and change this to a H1 heading.
Scroll to the Dynamic Data options in the settings panel, and once again Enable Dynamic Data. Under Current Source, choose “Title”.
Go to the Typography panel and change the font size to 48px, and font weight to Bold.
6. Add the Excerpt
Hit Enter once again to start a new line and add another Headline block. Change this to a p tag in the heading options.
Scroll to the Dynamic Data options in the settings panel, and once again Enable Dynamic Data. Under Current Source, choose “Excerpt”.
Disable the “Use default read more link” below the Excerpt Length, and change the Excerpt Length to 55.
7. Add the Author
Add yet another Headline block below the excerpt, and in the toolbar for that Headline, click on the Dynamic icon — which looks like a stack of pancakes or coins.
Under Dynamic Text Type, select the dropdown and choose “Post author name”. In the Before Text type in “By ” with a space after it — don’t forget the space!
Here’s what it should look like:
Now in the settings panel for that headline block, go to the Typography panel and change the font size to 12px, and font weight to Bold.
Go to Borders and add a 2px border on the top and bottom each.
To help the borders go full-width of the container, go to the Min Width setting and input “100%”. Your border lines should now be full width of the container.
Go to Spacing and insert 10px top and bottom padding.
8. Top Border
Select the right hand container that’s holding your date, Title, etc. and in the Settings panel, go to Border and add a 2px top border.
In spacing, add 20px of padding on top.
9. Set the Display Rules
In the righthand side, choose the “Element” tab instead of Block.
Change the Element Type to “Content Template”. You may have to set the Editor Width back to 100%.
Below the content editor, under the Display Rules > Location, choose Post, and All Posts.
Now, in the top right corner of your website, click “Publish” to save it.
10. Add Padding
We need to add some padding to the outer most container, so it doesn’t overlap our navigation and doesn’t go full-width responsively.
So with the outer container selected, go to Spacing > Padding and insert about 120px on top — this will vary on your design and needs, and add 20px left and right.
11. Push Author to Bottom
One of the last things we want to accomplish is making sure the Author name is always stuck to the bottom of the righthand container, regardless of the copy length of the Title.
So select your Container that’s holding the headline block for your author name, and under Sizing > Min Height insert “100%”.
Then, select the Headline of your author name, and under Spacing > Margin, insert “auto” in the Top, and zero out the bottom Margin.
You should now see the author name be pushed right to the bottom of the container.
12. Insert Post Content
With the outer most container selected, hit “Enter” and on that new line, insert a new Container block, followed by an added Inner Container.
With the new Inner Container block selected, go to Sizing > Max Width, undo the Global Setting by clicking the globe icon, and insert 800px.
This will limit the width of our content to a more readable length.
Under Spacing > Padding add 60px top and bottom, and 20px left and right.
Now, inside that Inner Container, let’s add a new block called “Dynamic Content” — it has a GeneratePress icon. Now choose “Post Content” in the dropdown.
This block dynamically pulls in the blog post content for us.
13. Fix Responsive Layout
If you jump into the Appearance > Customize panel, and view the layout on mobile, you’ll notice it needs some help.
- Within our post template editor, click the Mobile icon in the top of the Settings panel on the right.
- Choose the first Inner Container (the second one on your Block list), and change the Flex Direction to “Column”, and add 20px of Row Gap.
- Now select the two containers within that one, and go to Sizing > Width and insert 100%.
- Select the Featured Image block, and in the Height setting insert 200px to create a better aspect ration on mobile.
- Tweak any padding as needed around the main Container for your post content as well.
Repeat steps 1-5 here for the Tablet view as well.
Wrapping Up
Take a look at your final blog post template on the front end and ensure all looks great for Desktop, Tablet and Mobile.
I hope this helped you understand the power of GeneratePress Elements, paired with GenerateBlocks dynamic features, to really create custom designs that look and work great.
Have any questions? Or need help setting up your template design? Get in touch!
