Archived topic
Styling archive page
4 replies · Started by ballerinamoose on July 25, 2021
Hi,
I'm trying to approximate the design of this home page: https://www.ediblebozeman.com/
The instructions in this video would get me partway there: https://www.youtube.com/watch?v=-ZTQP_KA2xE
But how would you do full width images interspersed with half width images (seen a little way down the page)?
How do I get full width images if my container width is defined in the customizer?
Is the best way to do a subtitle still by use of a plugin?
I'm starting with a blank/default install of GP.
Thank you for your help!
Hi there,
But how would you do full-width images interspersed with half width images (seen a little way down the page)?
The page uses Elementor + a plugin for the grid. (essential grid gallery) but the main thing about this is the plugin as it's the only thing added to the content. If you wish to replicate this layout, you can use that plugin. (The page is basically multiple instances of the shortcode coming from the plugin. Contains multiple queries.)
If you wish to have multiple queries, I don't think this is doable because the content template only modifies the styling of the default query.
I believe the way to go about this is by placing multiple post lists of varying layouts (1 column layout and 2 column layout) placed within the page's content.
Thank you, that makes sense. What if I just went with a full width image or two half width images (that is, the size of all the images on the page is constant)? How would I get those to display across the whole width of the page if the container width is constrained by what's in the customizer?
Never mind, found it.
body.home .site.grid-container {
max-width: 100%;
}
Thank you, that makes sense. What if I just went with a full width image or two half width images (that is, the size of all the images on the page is constant)? How would I get those to display across the whole width of the page if the container width is constrained by what’s in the customizer?
You can force some posts to go full width of the page with CSS :nth-type-of but I don't think you can exactly replicate how the grid is laid out on the reference site because there's no definite sequence to follow. :nth-type-of is limited to what's here - https://css-tricks.com/examples/nth-child-tester/
You can try styling selectively with script as well but I'm afraid this requires custom JS that's is out of our scope.
