[Resolved] Change single post layout design

[Suraj]

Hi,

I need to design a single post layout something similar to https://www.helpscout.com/blog/customer-communications-management-software

Currently, my blog has a default layout and I’m trying to create using block elements but it’s appearing under box and really want to get rid. To test, i have selected only one blog post for now. Please let me know the best possible way.

Regards

[Leo]

Hi there,

Just to confirm, is this the section that you are trying to replicate?
https://www.screencast.com/t/wezuqafvK

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suraj]

Hi Leo,

Yes, I am trying to replicate the complete section including the title and full content section.

[Leo]

Ok let’s start from scratch and take it one step at a time.

The first section indicated in my screenshot above can be achieved with a Block Element page hero:
https://docs.generatepress.com/article/block-element-page-hero/

The Basic single post page hero template should be very similar to what you are looking for:
https://docs.generatepress.com/article/block-element-page-hero/#templates

You just need to remove the Dynamic background image:
https://docs.generatepress.com/article/dynamic-data/#dynamic-background

Then add a featured image underneath by using the GB image block:
https://docs.generatepress.com/article/dynamic-blocks/#dynamic-image

Please implement the steps above to the /word-of-mouth-marketing-strategies first.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suraj]

Leo, thanks for your assistance. I think I have completed the first step. Now, what should I do next for full content?

Please review the blog given in private information.

Also, from where can I set the padding for the TITLE to appear something similar – https://tinyurl.com/2ouatys8

Right now, it has broader and getting out compared from the featured image.

For the featured image, should I keep it full or large?

Thanks in advance

[Leo]

Can you clear and disable WP Rocket while I’m trying to help?

This is what I’m seeing currently and it’s not quite right:
https://www.screencast.com/t/BYiqHiTypJ

Thanks!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suraj]

Sorry for the inconvenience. I have disabled it now. Please do check.

[Leo]

Also, from where can I set the padding for the TITLE to appear something similar – https://tinyurl.com/2ouatys8

Right now, it has broader and getting out compared from the featured image.

Two options:

– Add some left and right padding to the H1 GB Headline block:
https://docs.generateblocks.com/article/spacing-options-overview/#padding

– Or you can set a max-width to it:
https://docs.generateblocks.com/article/sizing-options-overview/

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suraj]

It’s done now. Although, not squeezing more than that but it works.

Appreciate your next steps for adding the complete content below.

[Leo]

The content part looks very similar to the example already.

What are you trying to achieve here? Just changing the background color?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suraj]

I want to remove this bulging box and keep the same white background color similar to shared site – https://tinyurl.com/2gbq4duu

Also, Breadcrumb I want to shift to the top before the title.

[Leo]

I want to remove this bulging box and keep the same white background color similar to shared site

Try this CSS:

.single.separate-containers .inside-article {
    background: #f4f4f4;
}

Learn how to add CSS: https://docs.generatepress.com/article/adding-css/

Also, Breadcrumb I want to shift to the top before the title.

Then just add the Rankmath breadcrumb shortcode above the Post Title headline block in the page hero created in the steps before.

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suraj]

Thanks Leo, I kept that for the specific blog post. For social share button, how I can add similar to this – https://tinyurl.com/2kc54lu6

Do i need to use the plugin or do you have inbuild solution?

[Leo]

A plugin is required for social share function.

I believe we’ve resolved the original topic. If that’s the case, can we mark this topic as resolved and you can open new topic(s) for new questions if needed?

This one is getting long already.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Suraj]

Sure, Leo. Thank you so much. I’ll open a new ticket for new questions.

[Author]

Posts