[Resolved] Top Section Customisation and Blog Customisation

[Osman]

Hi,

I LOVE the GeneratePress theme especially the speed!

I am looking to customise the aesthetics of this theme.

Firstly, I want to change the top section of post, blog and pages to look like the following website:

https://backlinko.com/keyword-research (Article page) – Blend page title with image
https://backlinko.com/content-marketing-tips (Article page) – Blend page title with image
https://backlinko.com/blog (Blog page) – Add optin at top

Can someone please get back to me.

thanks

[David]

Hi there,

check out the Header Element:

https://docs.generatepress.com/article/header-element-overview/

They also accept shortcodes – which you can use to add your Optin Form.

[Osman]

Hi,

Thanks fo your reply.

I implemented your suggestions but I need the post title to be on top and the post image to be below it like:

https://backlinko.com/keyword-research-tool-analysis

Please help

[Leo]

You can output the post title and featured image using template tags:
https://docs.generatepress.com/article/header-element-template-tags/#post_title
https://docs.generatepress.com/article/header-element-template-tags/#custom_field-name

[Osman]

Hi,

This is not answering my question. The closest thing I saw that will give me the customisations I need is found here:

https://docs.generatepress.com/article/page-hero-examples/

However, I’m looking for any these outcome:

https://backlinko.com/content-marketing-tips
https://backlinko.com/keyword-research-tool-analysis

Please help

[David]

If we can help tackle one of them to begin with:
https://backlinko.com/keyword-research-tool-analysis

1. Add this PHP snippet to your site:

function db_feat_img_shortcode() {
    $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'large', false );
	return '<img src="' . $img_src[0] . '"/>';
}
add_shortcode( 'db_feat_img', 'db_feat_img_shortcode' );

https://docs.generatepress.com/article/adding-php/

2.Configure the Header Element as per this example:
https://docs.generatepress.com/article/page-hero-examples/#example-2

Change the Background Image to none, and give it a background color.
Then below the last line of content add this shortcode:

[db_feat_img]

[Osman]

Hi David,

It’s getting there – just need a few tweaks to look like this:
https://backlinko.com/content-marketing-tips

Ive decided this is the template i want my posts to look like

I would appreciate your help to make it look like this

Thanks

[David]

Edit the Header element and:
1. in Element Classes add: post-hero
2. give it 65px of Top Padding.

Then add this CSS:

.post-hero time + img {
    display: block;
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    margin-bottom: -160px !important;
}

.post-hero + #page {
    padding-top: 140px;
}

[Osman]

Hi

It’s getting there – The background colour (purple) shouldn’t be the same height as image – I want it to be half way in the middle of the image like:

https://backlinko.com/content-marketing-tips

Is this possible?

[David]

I made minor change to the CSS here:

https://generatepress.com/forums/topic/top-section-customisation-and-blog-customisation/#post-1229035

Which was adding !import to margin-bottom: -160px !important;
This will create the overlapping image. Which means you must make this rule has sufficient top padding to stop the content from getting covered:

.post-hero + #page {
    padding-top: 140px;
}

[Osman]

Hi David

Thank you so much!

[Osman]

Quick follow up question:

How do I get the following to be on one line in mobile:
[page_hero_gravatar] {{post_author}} {{post_date}}

[David]

Edit the Header Element, next to padding you can select Mobile – reduce the left and right to 10px to give it more space, then add this CSS:

@media (max-width: 500px) {
    .page-hero span, .page-hero time {
        font-size: 14px;
    }
}

[Osman]

Genius!

Thanks

[David]

Glad to be of help

[Author]

Posts