- This topic has 14 replies, 3 voices, and was last updated 4 years ago by
.
-
Posts
-
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 topCan someone please get back to me.
thanks
Customer Support
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.
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
Customer Support
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-nameHi,
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-analysisPlease help
If we can help tackle one of them to begin with:
https://backlinko.com/keyword-research-tool-analysis1. 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-2Change the Background Image to none, and give it a background color.
Then below the last line of content add this shortcode:[db_feat_img]Hi David,
It’s getting there – just need a few tweaks to look like this:
https://backlinko.com/content-marketing-tipsIve decided this is the template i want my posts to look like
I would appreciate your help to make it look like this
Thanks
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; }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?
I made minor change to the CSS here:
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; }Hi David
Thank you so much!
Quick follow up question:
How do I get the following to be on one line in mobile:
[page_hero_gravatar] {{post_author}} {{post_date}}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; } }Genius!
Thanks
Glad to be of help
- You must be logged in to reply to this topic.