Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

GeneratePress GenerateBlocks

Duotone possible with filters?

  • Cheezballz
    December 28, 2024 at 12:30 pm

    I couldn’t find anything here for the topic ‘duotone’ as the search showed ‘button’ instead, but is it possible to make a 2 tone colored image with GB’s filters?

  • Ying
    December 28, 2024 at 1:34 pm

    Hi there,

    Yes, it’s possible with GB 2.0 and GB Pro 2.0.

    1. You can create a structure like this:

    - container 
 -- image

    2. set the image width to 100%, position to relative, z-index to 1, object-fit: cover, filter: grayscale(100%), contrast (200%).

    3. create a pseudo-element for the container, by clicking the More button > + New > before, set content to ”, position: absolute, inset :0 0 0 0, z-index:2, mix-blend-mode: multiply, add a gradient background to it.

    Here’s the example code:

    <!-- wp:generateblocks/element {"uniqueId":"2f404bc4","tagName":"div","styles":{"height":"400px","overflowX":"hidden","overflowY":"hidden","\u0026:before":{"backgroundImage":"linear-gradient(to right, rgb(255, 126, 179) 0%, rgb(84, 0, 232) 100%)","backgroundSize":"cover","backgroundRepeat":"no-repeat","backgroundPosition":"center","content":"\u0022\u0022","position":"absolute","top":"0px","left":"0px","bottom":"0px","right":"0px","zIndex":"2","mixBlendMode":"multiply"},"position":"relative"},"css":".gb-element-2f404bc4{height:400px;overflow-x:hidden;overflow-y:hidden;position:relative}.gb-element-2f404bc4:before{background-image:linear-gradient(to right,rgb(255,126,179) 0%,rgb(84,0,232) 100%);background-size:cover;background-repeat:no-repeat;background-position:center;content:\u0022\u0022;position:absolute;top:0px;left:0px;bottom:0px;right:0px;z-index:2;mix-blend-mode:multiply}"} -->
<div class="gb-element-2f404bc4"><!-- wp:generateblocks/media {"uniqueId":"b7b943dd","tagName":"img","styles":{"height":"400px","maxWidth":"100%","objectFit":"cover","filter":"grayscale(100%) contrast(200%)","position":"relative","zIndex":"1","width":"100%"},"css":".gb-media-b7b943dd{filter:grayscale(100%) contrast(200%);height:400px;max-width:100%;object-fit:cover;position:relative;width:100%;z-index:1}","htmlAttributes":{"src":"https://new.local/wp-content/uploads/2024/01/uran-wang-nyngJ-jKiOY-unsplash-1.jpg","title":"uran-wang-nyngJ-jKiOY-unsplash"},"mediaId":19} -->
<img class="gb-media-b7b943dd" src="https://new.local/wp-content/uploads/2024/01/uran-wang-nyngJ-jKiOY-unsplash-1.jpg" title="uran-wang-nyngJ-jKiOY-unsplash"/>
<!-- /wp:generateblocks/media --></div>
<!-- /wp:generateblocks/element -->
  • Cheezballz
    January 2, 2025 at 2:29 pm

    Where is the ‘more’ button in a container?

  • Ying
    January 2, 2025 at 4:39 pm

    Under the styles tab:
    https://app.screencast.com/RTjyczRvrouVz

  • Cheezballz
    January 3, 2025 at 2:58 pm

    Thanks. Is there a way for text inside (position:relative) containers can not be affected by the filters? I’m testing a container with a filtered background image, with a (position:relative) container inside it with text. The text is being affected by the holding container’s image filters.

  • Ying
    January 3, 2025 at 3:58 pm

    Can I see what you created?

  • Cheezballz
    January 4, 2025 at 1:14 pm

    Here you go.

  • Cheezballz
    January 5, 2025 at 9:21 am

    I figured it out, I had to move the container with the copy outside of the container with the duotoned bg image and use absolute positioning.

  • Ying
    January 6, 2025 at 9:27 am

    OK, good to hear that.

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