[Support request] How to create featured image cover, and add title and categories within

[wordpressuser13]

Similar to this https://imgur.com/a/TPa1fBW

I want the top of the post to have a featured image, with the post title and post categories within the featured image. Responsive for mobile. Any idea what css etc. to add to achieve this?

Thank you!

[David]

Hi there,

can you provide a link to your site, where you want to add this ?

[wordpressuser13]

I haven’t made the site yet, I want to convert an old site to the GeneratePress theme and maintain a similar design

I wrote the current domain name in the private information box

[David]

Ok, so for the blog ( or home latest posts ) or archive pages you can create a Block Element Content Template see here:

https://docs.generatepress.com/article/block-element-content-template/

In the video, and included in one of the built in templates is a similar design.

[wordpressuser13]

Thank you for the video! However the website already has thousands of posts using the classic version of WordPress (NOT Gutenberg). What can be done in this case? Also, the video only shows how to change the actual “blog page” or “archive page”, not the individual post pages themselves which I’m trying to achieve

[Leo]

Unfortunately it would require a significant amount of custom CSS to achieve that appearance without Gutenberg and the content template as David suggested.

You can still use the Content Template to create the layout without changing your previous posts in the classic editor though.

As for single posts, I believe the block element page hero with dynamic data would be what you are looking for:
https://docs.generatepress.com/article/block-element-page-hero/

[wordpressuser13]

Sorry for opening this again, however, I’m still a little confused. Why would it be so complicated to just add the post title and post categories on top of the featured image on a single post? Just something simple like this: https://www.checko.nl/boxspring/ but including the categories as well?

If there is any CSS you know might help achieve this, or an option in GeneratePress, please let me know as these types of post format are very popular and I’m sure many are looking for them!

[Ying]

Why would it be so complicated to just add the post title and post categories on top of the featured image on a single post?

It’s not complicated, if you watch the video attached to the below link, you’ll find it’s pretty simple.
https://docs.generatepress.com/article/block-element-page-hero/

[wordpressuser13]

Hi Ying,

Is it possible to convert old posts (using the WordPress classic editor) to using block elements? Would I be able to apply it across thousands of posts? If not, then wouldn’t there be a simple CSS solution for what I need? I would truly appreciate any help

[David]

Lets cover some basics – sorry its kinda teaching granny to suck eggs, but i just want to be clear:

It is not a problem that your posts are written in the Classic Editor.
They can remain as Classic Editor posts even if you are using the Block Editor.
Editing a classic post in the block editor, and WP will output the content inside a Classic editor block.
And that block gives the optional choice to convert them to blocks if you want. But don’t bother.

Now GP Block Elements don’t care about your Post Content, whether they be classic editor or block editor.

So for your Single Post.
Lets start with creating the Hero Element.

1. Install the GenerateBlocks plugin:
https://wordpress.org/plugins/generateblocks/

2. In WordPress > Appearance > GeneratePress activate the Elements Module.

3. Im Appearance > Elements -> Add New –> Block Element.

4. In the Block Element settings:
https://docs.generatepress.com/article/block-element-page-hero/#settings

4.1 set the Element Type to Page Hero

4.2 Select Templates -> Basic Page Hero.
Its fairly similar to what you need. We can adjust later

4.3 Check: Disable title , Disable featured image and Disable primary post meta
The page hero is set to display the featured image as background with the title and meta over it. So those options will remove the ones the theme automatically outputs.

5. Set the Display Rules > Location to: Posts –> All Posts

Then go check out a single post.

[Author]

Posts