- This topic has 8 replies, 2 voices, and was last updated 3 years, 7 months ago by
Ying.
-
AuthorPosts
-
September 30, 2022 at 1:06 pm #2359256
Sasa
Hi!
How can I make a frame like this one here – Best overall dog food without peas or legumes? Do I need some kind of page builder like Elementor or is it possible to build it with the blocks?
https://www.k9ofmine.com/7-best-dog-foods-without-peas-legumes/
September 30, 2022 at 3:47 pm #2359329Ying
StaffCustomer SupportHi Sasa,
You can build it with GB container block and headline block, and some CSS:
https://www.screencast.com/t/z2U76Lcuv1. Add a headline block inside the container block.
2. Set the headline block to inline width, add background color to it.
3. Set padding around it, and negative margin top/left to position it.
4. Add an additional CSS class to the headline block, eg.
custom-title.5. Add this CSS based on the additional CSS class:
.gb-headline.custom-title:before { content: " "; display: block; position: absolute; left: -18px; bottom: -7px; border-color: rgba(0,0,0,0) #599396 rgba(0,0,0,0) rgba(0,0,0,0); border-style: inset solid inset inset; border-width: 0 19px 7px; } .gb-headline.custom-title { position: relative; }October 3, 2022 at 4:53 am #2361374Sasa
Thank you Ying!
I’m not good at CSS but I’ll give it a try.
Can I built it in the Elements? Appearance–>Elements—>New elementCheers
October 3, 2022 at 7:30 am #2361487Sasa
I’m not sure how to add this CSS code to additional CSS class?
October 3, 2022 at 11:41 am #2361876Ying
StaffCustomer SupportThe CSS I provided goes to customizer > additional CSS.
The CSS class
custom-titlegoes to the additional CSS class field in the page editor.
Adding additional CSS classes to blocks: https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/October 4, 2022 at 2:25 am #2362420Sasa
I see now 🙂
Is it possible to use this a few times on the same page or even better to use it on several pages/posts?
Maybe to build it like page hero?October 4, 2022 at 10:09 am #2363058Ying
StaffCustomer SupportYes, once the CSS code is added, you can add the CSS class
custom-titleto multiple blocks that you wish to have the same style 🙂October 4, 2022 at 10:40 am #2363102Sasa
That’s awesome. Thank you very much!
October 4, 2022 at 12:35 pm #2363211Ying
StaffCustomer SupportYou are welcome 🙂
-
AuthorPosts
- You must be logged in to reply to this topic.