Applying cover color to the section instead of just block

  • Resolved justanothertechbro

    (@justanothertechbro)


    3 months, 1 week ago

    I want wp cover applies to the whole body not just a block. In addition, it won’t let me specify the hex value for the actual color. Is there a way that I can specify the hex value for the cover color

    <!-- wp:cover {"overlayColor":"contrast","isUserOverlayColor":true,"layout":{"type":"constrained"}} -->
    <div class="wp-block-cover"><span aria-hidden="true" class="wp-block-cover__background has-contrast-background-color has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"><!-- wp:paragraph {"align":"center","placeholder":"Write title…","fontSize":"large"} -->
    <p class="has-text-align-center has-large-font-size"></p>
    <!-- /wp:paragraph --></div></div>
    <!-- /wp:cover -->

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • Hi, @justanothertechbro ????

    The Cover block includes two options that expand it into its available space: Align > Full width and Toggle full height. These options are available in the block’s menu:

    You can use the customOverlayColor prop for defining a hex value, e.g. combining both of these:

    <!-- wp:cover {"dimRatio":50,"customOverlayColor":"#dd66cc","isUserOverlayColor":true,"minHeight":100,"minHeightUnit":"vh","isDark":false,"align":"full","layout":{"type":"constrained"}} -->...

    The Learn site also has a detailed Cover block video walkthrough that is worth checking out. In the tutorial’s example, they create a block-based header template that makes the block appear full-page.

    Thread Starter justanothertechbro

    (@justanothertechbro)

    @ironprogrammer Thanks, you save the day

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

Tags