I want to layout my blog page like this

I want to create a blog layout like this – Wingspan Optics Field Journal - Exclusively for Bird Watchers!

but once I drag in the collection it automatically populates all sections consecutively.
How to I make it so when I drag in the blog collection it populates every other div/section/link block…
I know this is an easy, stupid question but my brain simply is not seeing the ‘easy answer’ that I know is there.
Please advise.
Thank you!
Jay


Here is my public share link: LINK
(how to access public share link)

bumpity bump bump bump

Hi.

The only way you can do this is by nth-child. wingspanoptics (URL example) - their is “even” and “odd” class - so the same idea could be solved by nth-child (First start from simple example - try to create first collection item with red border and next with blue - idea like this - to learn this issu)

You should manually add code to the head tag (And you see the zig-zag effect only on published site):

  1. wrapper (for box1 and box2)
    display: flex;

  2. box1 and box2: width: 50%;

  3. Set order: 2 for the zigzag effect (google it)

    #shopify-section-blog-template .feature-row .even .post-image {
    order: 2;
    }

Start from this than add URL if it wont work (beacuse your Q is more for Video tuturial and/or job-aboard).

1 Like

Thank you Siton_Systems, very much appreciated!
-Jay

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.