custom blog layout

Hi there,

you could build something similar using the GPP 2.0 Block Element with GenerateBlocks and using the Block Type: Content Template:

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

Youtube Video here shows an example being created:

https://www.youtube.com/watch?v=-ZTQP_KA2xE

Some of the effects features and making the whole container clickable are features of the GenerateBlocks Pro plugin though.

Hi David,

i've built the above before, but i was hoping to create something like the example i gave above.

Yep and that is definitely possible with GenerateBlocks. This took me a minute to knock up - create a new Block element > Content Template, switch to the Code editor view and paste this in:

<!-- wp:generateblocks/container {"uniqueId":"0af4cc7c","paddingTop":"0","paddingRight":"0","paddingBottom":"0","paddingLeft":"0","paddingSyncUnits":true,"borderSizeTop":"0","borderSizeRight":"0","borderSizeBottom":"0","borderSizeLeft":"0","borderRadiusTopRight":"5","borderRadiusBottomRight":"5","borderRadiusBottomLeft":"5","borderRadiusTopLeft":"5","borderColor":"#b6b6b6","backgroundColor":"#ffffff","isDynamic":true,"blockVersion":2} -->
<!-- wp:generatepress/dynamic-image {"imageType":"featured-image","imageSize":"medium_large"} /-->

<!-- wp:generateblocks/headline {"uniqueId":"8dfa4238","element":"p","textColor":"#0693e3","showAdvancedTypography":true,"fontWeight":"700","fontSize":15,"textTransform":"uppercase","marginTop":"20","marginBottom":"12","paddingLeft":"27","borderSizeLeft":"3","className":"dynamic-term-class","gpDynamicTextType":"terms","gpDynamicLinkType":"term-archives","gpDynamicTextReplace":"Terms","gpDynamicTextTaxonomy":"category"} -->
<p class="gb-headline gb-headline-8dfa4238 gb-headline-text dynamic-term-class">Terms</p>
<!-- /wp:generateblocks/headline -->

<!-- wp:generateblocks/container {"uniqueId":"b69b5c43","paddingTop":"","paddingRight":"30","paddingBottom":"20","paddingLeft":"30","showAdvancedTypography":true,"fontSize":14,"isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/headline {"uniqueId":"29491daa","showAdvancedTypography":true,"fontSize":24,"marginBottom":"15","gpDynamicTextType":"title","gpDynamicLinkType":"single-post","gpDynamicTextReplace":"Hello World"} -->
<h2 class="gb-headline gb-headline-29491daa gb-headline-text">Hello World</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:generatepress/dynamic-content {"contentType":"post-excerpt","excerptLength":25,"useThemeMoreLink":false} /-->
<!-- /wp:generateblocks/container -->

<!-- wp:generateblocks/button-container {"uniqueId":"0f990ce5","alignment":"right","isDynamic":true,"blockVersion":2} -->
<!-- wp:generateblocks/button {"uniqueId":"2b338047","hasUrl":true,"hasIcon":true,"iconLocation":"right","backgroundColor":"#0366d6","textColor":"#ffffff","backgroundColorHover":"#222222","textColorHover":"#ffffff","showAdvancedTypography":true,"fontSize":14,"paddingTop":"12","paddingRight":"18","paddingBottom":"14","paddingLeft":"20","borderRadiusBottomRight":"5","borderRadiusTopLeft":"5","iconPaddingRight":"","iconPaddingLeft":"0.5","gpDynamicLinkType":"single-post"} -->
<a class="gb-button gb-button-2b338047" href="#"><span class="gb-button-text">LEARN MORE</span><span class="gb-icon"><svg aria-hidden="true" role="img" height="1em" width="1em" viewBox="0 0 256 512" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></a>
<!-- /wp:generateblocks/button -->
<!-- /wp:generateblocks/button-container -->
<!-- /wp:generateblocks/container -->

Then switch back to Visual Editor.
Its around 90% there give or take the colors, icon etc - but the other features will require GB Pro or CSS.

hi David,

i've just done the above, thank you.

i do have GB pro, what is it that i have to do to get it looking like the way i want?

feel free to use temp login details to have a look. thank you.

Thats looking good :)

Few things:

1. Edit the Block Element, first select the Buttons block ( make sure to select the button container - not the individual button), in Advanced > Additional CSS Class(es) add more-button
2. Now select the Parent Container Block and give it a CSS Class of post-card
3. With the Parent Container still selected, we need to add 2 x Opacity Effects.
3.1 Effect #1 - State Normal, Target > Custom Class = more-button, set Opacity to 0
3.2 Effect #2 - State Hover, Target > Custom Class = more-button, set Opacity to 1

Then we need some CSS to make the full border radius show and bottom align the buttons:

.post-card {
    overflow: hidden;
    height: 100%;
}

.post-card .gb-inside-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.post-card .gb-inside-container .more-button {
    margin-top: auto;
}

hi David,

i just did as you instructed, it's working great, perfect. thank you so much.

i want to ask another question...

i want the title of the page to show like i have on about me and videos page etc...with the white background and black text with the seperator at 20% width in yellow?

do you want me to open a new topic on this or can you advise here...

david,

going back to the custom blog lay out...

the overlay on the image on normal state and than on hover goes back to original...how's that achieved please?

Easiest way would be some CSS:

.post-card > .gb-inside-container > a {
    position: relative;
    
}
.post-card > .gb-inside-container > a:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255,0,0,0.25); /* overlay color */
    opacity: 1;
    transition: opacity  0.2s ease;
}
.post-card:hover > .gb-inside-container > a:after {
    opacity: 0;
}

thank you David, much appreciated.

how about the title on top of the blog archive ....

i want the title of the page to show like i have on about me and videos page etc…with the white background and black text with the separator at 20% width in yellow?

thanks v much

Simply create a new Block Element and use the Element Type > Page Hero. Then copy and paste one of your existing 'heros' into the new block element, and set the Display Rules for your Blog / archives.

david,

quick question...

how do i get the featured image on the block element to appear the same height as the others so that they are all equal when viewing on the blog page.

have a look at the blog page on my site using the temp link and see the latest post featured image not equal in height to others.

is there a way to have this automatically adjust itself so they all look the same?

Hi Tony,

Give this CSS a try, feel free to change the value of image height.

.gb-container.gb-container-0af4cc7c.post-card a img {
    height: 250px;
    object-fit: cover;
}

that works perfectly, thanks Ying

No problem :)