Image, heading, details in a section.

[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.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paddy Cannon]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paddy Cannon]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paddy Cannon]

yes, it’s https://domjoly.tv/books/

[David]

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;
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paddy Cannon]

That seems to be working thankyou!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts