- This topic has 9 replies, 2 voices, and was last updated 1 year, 1 month ago by
David.
-
AuthorPosts
-
December 10, 2019 at 5:16 am #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.December 10, 2019 at 5:53 am #1099735David
StaffCustomer SupportHi 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/December 10, 2019 at 6:02 am #1099739Paddy Cannon
I was just using the sections within GP, is this a plugin (Block Editor)?
December 10, 2019 at 6:09 am #1099750David
StaffCustomer SupportAah 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/December 10, 2019 at 6:24 am #1099758Paddy Cannon
That seems to work, is there a way of neatening up the section… to something like this??
December 10, 2019 at 6:26 am #1099763David
StaffCustomer Supportdo 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/December 10, 2019 at 6:31 am #1099772Paddy Cannon
yes, it’s https://domjoly.tv/books/
December 10, 2019 at 6:47 am #1099786David
StaffCustomer SupportOk – 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/December 10, 2019 at 7:30 am #1099954Paddy Cannon
That seems to be working thankyou!
December 10, 2019 at 7:33 am #1099957David
StaffCustomer SupportYou’re welcome
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.