[Resolved] Fancy Frame

Home Forums Support [Resolved] Fancy Frame

Home Forums Support Fancy Frame

  • This topic has 8 replies, 2 voices, and was last updated 2 months ago by Ying.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #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/

    #2359329
    Ying
    Staff
    Customer Support

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

    #2361487
    Sasa

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

    #2361876
    Ying
    Staff
    Customer Support

    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/

    #2362420
    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?

    #2363058
    Ying
    Staff
    Customer Support

    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 πŸ™‚

    #2363102
    Sasa

    That’s awesome. Thank you very much!

    #2363211
    Ying
    Staff
    Customer Support

    You are welcome πŸ™‚

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.