[Resolved] Post Template Design

[iamarghya]

On your website in the hero section there is an image of a post template, can u give me quick instructions or a short screen record on how to copy that post-template block design?

[David]

Hi there,

inside the post container the blocks added in order are:

Buttons Block – set to display List of Terms ( n1 )
GB Image Block – display Featured Image
Container Block
— Image Block – Avatar ( n2 )
— Headline Block – Title
— Headline Block – Date
— Headline Block – Excerpt

n1 – use Negative Bottom Margin and z-index to pull the image up behind the buttons.
n2 – use negative top margin and z-index to pull the avatar over the image.

Note you will need to additional bottom padding to the parent Container block to offset the negative margins.

[iamarghya]

Hey, do I need to put the z-index in the container?
Check once and tell me what to do now…
I structured it as u said…

[David]

Increase the z-index of the Buttons block.

[iamarghya]

But there is no Z-index option available for button blocks, they are only available for my containers.

[David]

Aah – ok, you need to put the Buttons inside their own Container and then apply the z-index to that.

[iamarghya]

oh Ok OK, I can get that…
Perfect Now how to overlay my featured image can I do it without any CSS?

And I didn’t understand what u said last that you need to add bottom padding in the parent container… I didn’t understand that. Check the link and tell me what need to do after that…

[David]

Perfect Now how to overlay my featured image can I do it without any CSS?

I am not sure what you mean, the page you linked to looks correct to me, just some of your posts need a featured image now.

And I didn’t understand what u said last that you need to add bottom padding in the parent container… I didn’t understand that. Check the link and tell me what need to do after that…

It doesn’t look like you need the padding, its only required if the posts overlap each other and that isn’t the case on your site.

[iamarghya]

Ya ya.
no, I am asking if I can add some shade of overlay in my featured image (like we add some color shade over the image to tone them down) I want to like that, is it possible?

[Ying]

If you don’t want to use CSS, then the option would be using GenerateBlocks Pro.

It has built in CSS effects.

[iamarghya]

Can u tell me the CSS for it…
And also can u set this post box’s size the same for me?

[iamarghya]

And a quick question I wanna add Montserrat font to the local font..But that website doesn’t have that font, so now is there any alternative I can download the font and add?

[Ying]

Let’s handle one question at a time, try this CSS:

.gb-block-image-7a39bb90:before {
    content : '';
    position : absolute;
    top : 0;
    left : 0;
    right : 0;
    bottom : 0;
    background-color : black;
}
.gb-block-image-7a39bb90 img{
    opacity : 0.5;
}
.gb-block-image-7a39bb90 {
        position:relative;
}
.gb-container.gb-container-1a459cbf .gb-inside-container {
    position: relative;
}

[iamarghya]

Giving weird results…

[Ying]

Oops, some typos..
Updated code here: https://generatepress.com/forums/topic/post-template-design/#post-2212759

[Author]

Posts