[Support request] Image, heading, details in a section.

Home Forums Support Image, heading, details in a section.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1099710
    Paddy Cannon

    I would like to have a section with an image of a book, with a title above and ranged right of the book the details and some blurb about it, I’ve tried using the tool within wordpress but it doesn’t seem to work…
    is there a simple solution around this, not being a coder is proving difficult.

    #1099735
    David
    Staff
    Customer Support

    Hi there,

    are you using the Block Editor in WordPress?
    If so then it should simple enough with a Columns Block, then you can add a Heading Block and an Image Block in one column and a text block in the other column.

    Let us know.

    #1099739
    Paddy Cannon

    I was just using the sections within GP, is this a plugin (Block Editor)?

    #1099750
    David
    Staff
    Customer Support

    Aah ok – Block Editor is built into WordPress but it doesn’t work inside Sections.
    If you want to do this in Sections, then switch to the Text editor view in the section and add this HTML

    <div class="flex-grid-container">
        <div class="grid-item flex-50">
            <div class="grid-item-inner">
                <h2>Your book Title</h2>
                <img src="full_url_to_image" alt="Alt name of image">
            </div>
        </div>
        <div class="grid-item flex-50">
            <div class="grid-item-inner">
                <p>Your book text</p>
            </div>
        </div>
    </div>

    Update it to include your heading, image and text.

    Then add this CSS:

    /* General and Mobile styling */
    
    .grid-item {
        padding: 30px;
        box-sizing: border-box;
    }
    
    /* Desktop styling */
    
    @media (min-width: 769px) {
        .flex-grid-container {
            display: flex;
        }
        .grid-item {
            padding: 40px;
        }
        .grid-item.flex-50 {
            flex: 1 0 50%;
        }
    }

    You can re-use the HTML on as many pages and sections as you need, and only add the CSS once.

    #1099758
    Paddy Cannon

    That seems to work, is there a way of neatening up the section… to something like this?? sample

    #1099763
    David
    Staff
    Customer Support

    do you have a link to the page with the code i provided ? Then i can tweak and send you the updated code.

    #1099772
    Paddy Cannon
    #1099786
    David
    Staff
    Customer Support

    Ok – so we move the H2 outside of the grid container, remove the sizing for the columns and let flex do its magic and then set the image to a minimum size like so:

    <h2>Your book Title</h2>
    <div class="flex-grid-container">
        <div class="grid-item">
            <div class="grid-item-inner">
                <img class="book-image" src="full_url_to_image" alt="Alt name of image">
            </div>
        </div>
        <div class="grid-item">
            <div class="grid-item-inner">
                <p>Your book text</p>
            </div>
        </div>
    </div>

    CSS:

    /* General and Mobile styling */
    
    .grid-item {
        padding: 30px;
        box-sizing: border-box;
    }
    
    /* Desktop styling */
    
    @media (min-width: 769px) {
        .flex-grid-container {
            display: flex;
        }
        .grid-item {
            padding: 40px;
        }
        .grid-item .book-image {
            min-width: 200px;
        }
    }
    #1099954
    Paddy Cannon

    That seems to be working thankyou!

    #1099957
    David
    Staff
    Customer Support
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.