[Support request] Change layout of blog page

Home Forums Support Change layout of blog page

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1296873
    Kevin

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

    Want to change to alternating layout

    Image | content
    Content | Image

    #1297305
    Tom
    Lead Developer
    Lead Developer

    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!

    #1300948
    Kevin

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

    #1303491
    Kevin

    Added url to original post.

    #1303690
    David
    Staff
    Customer Support

    Hi there,

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

    #1303707
    Kevin

    Done

    #1303740
    David
    Staff
    Customer Support

    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;
        }
    }
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.