[Resolved] Fancy Frame

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

[Ying]

Hi Sasa,

You can build it with GB container block and headline block, and some CSS:
https://www.screencast.com/t/z2U76Lcuv

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

[Sasa]

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 element

Cheers

[Sasa]

I’m not sure how to add this CSS code to additional CSS class?

[Ying]

The CSS I provided goes to customizer > additional CSS.

The CSS class custom-title goes 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/

[Sasa]

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?

[Ying]

Yes, once the CSS code is added, you can add the CSS class custom-title to multiple blocks that you wish to have the same style 🙂

[Sasa]

That’s awesome. Thank you very much!

[Ying]

You are welcome 🙂

[Author]

Posts