- This topic has 5 replies, 3 voices, and was last updated 4 years, 9 months ago by Tom.
-
AuthorPosts
-
June 22, 2019 at 4:32 am #937725Katharina
I want to recreate this section from my other website. What would be the best way to build something similar.
https://paste.pics/6c671d789eabea5895348eb925318b66Thanks
KatiJune 22, 2019 at 10:24 am #938024LeoStaffCustomer SupportHi there,
I would recommend using the columns block from Gutenberg.
Let me know if this helps π
June 27, 2019 at 3:49 am #942684KatharinaI tried few different things to replicate this section with Gutenberg but could not find any good solution.
https://paste.pics/5d0fa33b2b88c59d613df288bae2b8e4That’s what I have using image block and I also tried cover block in a column
https://paste.pics/50b9384622b42774ad8023154eac5b58I can link in the Image block but not at any text in the images.
With the cover images I can’t link the image and the can’t change the sizeI thought I found a way to change CSS but It’s also not working
.wp-block-cover-image{ height: 300px; width: 300px; }
Do You have any Ideas, thanks
June 27, 2019 at 9:03 am #943050TomLead DeveloperLead DeveloperIn order to link the entire box, you’ll likely need to use javascript.
For example, create columns and add cover blocks inside of them. Then link the text inside the cover to the target page.
Then, give the columns container a custom class so we can target it. For example, “linked-boxes”.
Now we can add this CSS:
.linked-boxes .wp-block-cover { cursor: pointer; } .linked-boxes .wp-block-cover, .linked-boxes .wp-block-cover-image { min-height: 350px; }
Now we need to do the javascript:
1. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
2. Set the hook towp_footer
3. Add this as the content:<script> jQuery( document ).ready( function( $ ) { $( '.linked-boxes .wp-block-cover' ).on( 'click', function() { var _this = $( this ), url = _this.find( 'a' ).attr( 'href' ); if ( url ) { window.location.href = url; } } ); } ); </script>
Then set your Display Rules.
June 29, 2019 at 6:47 pm #944969KatharinaThanks Tom,
I tried it but it wasn’t working. Properly still to complicated for me π but I keep it in mind.
I did try now the Gutenberg image block because it has the link option. But I cannot add any text on top of the image. Is there a way to do it with hooks?
That’s what I want https://paste.pics/dc9e03051466a9fd679941e8d05da412
That’s what I have https://paste.pics/3aa98812bdd8288683c6af4b94736fc6Otherwise I’ll go back to your first option and try it again π
And thanks again for your support, I couldn’t do it without your team!
June 30, 2019 at 9:31 am #945388TomLead DeveloperLead DeveloperI think the first method is the way to go. We did something similar on the homepage of this site: https://roseandpurl.com
If you can set it up as much as you can and let me know, I can help get you the rest of the way π
-
AuthorPosts
- You must be logged in to reply to this topic.