[Resolved] Blog layout as a grid using elements – block – content template

[Brad]

Blog layout as a grid going off Leo’s YouTube tutorial. Trying to apply this without customizer so as to use with CPTs, other site areas.

Secondary Issue: Links (categories, author archive, comments) on feature image on blog page grid do not work as feature image takes precedence. Tried adding z-index to button containers of those button areas. It didn’t work. Any ideas? This though, is a secondary issue. Not a main concern.

1.
Started off creating a single grid with one container, 50% wide.

Links to screenshots below

2.
Basically went through Leo’s YouTube tutorial.
GeneratePress – Block Element Content Template Demo

3.
Post are stacking, not wrapping. Tried adding this css to my single grid 50% container.

.j66co-layout-grid-two {
flex-direction: row;
background-color: limegreen;
padding: 10px;
}

Any ideas. Sincere thanks for suggestions.

https://www.dropbox.com/s/h6sgwbm5aigkccp/IMG_7550.jpg?dl=0

https://www.dropbox.com/s/5qdyhqn4irw9ikn/IMG_7552.jpg?dl=0

LInk to site page in private info box

[Elvin]

Hi there,

Secondary Issue: Links (categories, author archive, comments) on feature image on blog page grid do not work as feature image takes precedence. Tried adding z-index to button containers of those button areas. It didn’t work. Any ideas? This though, is a secondary issue. Not a main concern.

This is because there’s an assigned link value to the dynamic container block. You can remove it to it’s not wrapped in link.

You can keep link dynamic link value to “Choose..” so it won’t turn into a link. 😀
https://share.getcloudapp.com/8Lupo7zN

As for the columns, you’ll still need to set it on the customizer settings.

https://share.getcloudapp.com/4guZnjBy

[Brad]

That doesn’t help or solve either issue unfortunately.

Secondary issue: objective is to keep the whole feature image as a link yet have the items above also be links. I’ve been using a plugin which I’m trying to ditch, Content Views Pros, which lets you layout everything, every template file, archives, tags, blogs, etc and control all aspects.

Pinterest, layout, Instagram layout; there are about 8 different layout options. Anyways, I’m trying to minimize plugins, build everything natively or using if using a plugin, just using GenerateBlocks with a few others.

Question with secondary issue:
Is the objective possible? I’ve tried it using z-index. Didn’t work. Any ideas?

______

First / Main question:
There has got to be a way to build this. I understand this is more of a customized inquire. If you guys can point me in the right direction that would be most appreciated. I wish to create a grid loop for not only post but also for CPT, maybe archive categories, tags, etc.

Are there generate press parent theme template parts for grid columns? My main grid flexbox container (display: flex;) is 100%, flex item 50%. The posts are flex items it looks like. I intentionally tried placing the whole, main grid flexbox container within a container thinking possibly making that container width 600px and the flex item 100% would work; unfortunately this didn’t solve it either.

Any suggestions?

Easiest solution is I keep using Content Views Pro.

[David]

Hi there,

first lets deal with the columns – are those enabled in the Customizer > Layout > Blog as per Elvins screenshare:

https://share.getcloudapp.com/4guZnjBy

[Brad]

Secondary objective: I don’t think it’s possible. Back to top button, etc doesn’t work. I can deal with it. I left it for now though with the full container as a link if you have a trick up your sleeve.

First objective: i do not have it set to columns. I’m using the default layout. I’m doing this because I really want to eventually apply this element I’m building to be a “content template” to display in other site areas (custom posts, all category archives, etc)

[Brad]

Addition css:

.j66co-flexbox-container-layout-blog-cpt {
margin-left: 30px;
margin-right: 30px;
 background-color: lime;
}

.j66co-layout-grid-two {
flex-direction: row;
background-color: red;
padding: 10px;
}

.j66co-layout-grid-three {
flex-direction: row;
background-color: purple;
padding: 20px;
}

[David]

Columns:

Today – the simplest way to display Columns is to use the Customizer > Layout > Blog settings. It adds the necessary column/columns containers that GP requires.

Tomorrow – when we release Query Loop Block for GB you’ll be able to create your own Grid Layouts but until then its best to use the themes columns option.

Make links clickable inside a clicakble container – it is possible. Are you using GB Pro options to Make the Container Clickable ?

[Brad]

Thanks for your patience and assistance. I am using GB Pro. When setting the container though to “Dynamic link, post”, it takes over the whole block container are as if it has a z-index, even the “ back to top” button on mobile.

https://www.dropbox.com/s/2wfc23xe3154jwa/IMG_7555.jpg?dl=0

[Ying]

it takes over the whole block container are as if it has a z-index

It is indeed the case. Container links have a very high default z-index (999).

You can try set the container Outer z-index to 9.

[Brad]

Ok I can’t find this “outer / inner z-index” section. Would you mind doing a quick screenshot. I tried putting this in additional css. It didn’t work.

.j66co-layout-grid-two-inner {
z-index: 9;
}

[Brad]

Also tried

.j66co-layout-grid-two {
z-index: 9;
}

[Brad]

Ok. Found z-index location.tried changing setting everywhere. Cleared cache. Tested on different devices. Not working. It’s strange. Any other suggestions.

https://www.dropbox.com/s/bdlr21dixsc4mlv/IMG_7561.jpg?dl=0

https://www.dropbox.com/s/5jsublitjr9bd19/IMG_7562.jpg?dl=0

https://www.dropbox.com/s/zsf8mkfpmurndk0/IMG_7564.jpg?dl=0

[David]

That method won’t work.
Disable the Container Link
Select your read more button and give it class of: container-link
Then add this CSS:

.container-link:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

This by default should position the link behind the container.

[Brad]

I wish I could say it worked but it didn’t. Your suggested css turned off the links for everything including single post and lowered opacity. It did though bring tag links forward to work.

https://www.dropbox.com/s/czb3nkt6g3nooml/IMG_7565.jpg?dl=0

Query loop block to create grid layouts for cpt archive pages, etc.

Does this come out in a beta update. I’m working on a dev child theme site not yet for production. More than happy to test beta if available.

[Brad]

Which container specifically?

[Author]

Posts