[Resolved] Change layout of blog page

[Kevin]

Hi. Is it possible to change blog layout to match following?

Want to change to alternating layout

Image | content
Content | Image
…

[Tom]

Hi there,

Should be possible with some CSS. Any chance you can set up a page with your featured image aligned left or right, then link us to it?

Thanks!

[Kevin]

Let me work on that for you and I will reply with admin access.

[Kevin]

Added url to original post.

[David]

Hi there,

in Customizer > Layout > Blog can you:
1. Disable the Columns
2. Set the Featured Image ( archive ) to display above the title ?

[Kevin]

Done

[David]

First we need to wrap our post content in a container so we can set it aside of the image.

1. Create a new Hook Element.

1.1 Add this to the Hook content:

<!-- open post content wrap -->
<div class="post-content-wrap">

Note – the editor will automatically add a closing </div> – delete it!

1.2 Select before_content hook
1.3 Set Priority to 20
1.4 Set the Display Rules to Blog and Post Archives.

2. Create a second Hook
2.1 Add this to the content:

</div>
<!-- close post content wrap -->

2.2 Select the after_content hook
2.3 Set display rules as above.

Now add this CSS to your Site:

@media(min-width: 769px) {
    body:not(.single):not(.page) .inside-article {
        display: flex;
    }

    body:not(.single):not(.page) .post-image {
        margin: 0 20px 0 0;
    }

    body:not(.single):not(.page) .post:nth-child(even) .inside-article {
        flex-direction: row-reverse;
    }

    body:not(.single):not(.page) .post:nth-child(even) .post-image {
        margin: 0 0 0 20px;
    }
}

[Vanja]

Hey there,

I’m amazed how there seems to be an answer to almost every question I have on this forum, so thanks!

A thing that helped me with this kind of layout, as it makes it possible to distribute the “column” width evenly and therefore keep the design more balanced:

body:not(.single):not(.page) .inside-article {
        display: flex;
	justify-content: space-between;
    }
	
    body:not(.single):not(.page) .post-image {
        margin: 0 20px 0 0;
	width: 45%; 
    }
	
	body:not(.single):not(.page) .post-content-wrap {
	width: 45%; /* if you keep the percentages even, the remaining % will build a gap/axis */	
    }

[David]

Glad to hear that!

[Author]

Posts