[Resolved] Linear Gradient Part of Page

Home Forums Support [Resolved] Linear Gradient Part of Page

Home Forums Support Linear Gradient Part of Page

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1559841
    soulhaven.nz

    Hi team,

    First up, apologies if you have answered this before. I’ve scanned a range of linear-gradient posts in here and just haven’t quite been able to achieve what I’m after, and it mostly comes down to me being a beginner/dabbler (I only redesign my own website as and when it needs it, not multiple sites at a pro-level).

    I would love to learn how to recreate the gradient over background image effect used here: https://joeabercrombie.com/

    I just think it looks really stylish, but while I’ve managed to get the gradient to show, I haven’t been able to get it to slide over the image the way this one does, so I must still be missing something!

    Love you work, team. Your help forums are an amazing resource.

    #1559898
    Elvin
    Staff
    Customer Support

    Hi,

    The difficulty you’re having w/ this is from how the layout is structured and where the background is applied.

    Consider mimicking the DOM structure of the reference size so we can easily replicate how the CSS is applied.

    We can do that by using GenerateBlocks Containers or Grid Blocks and applying the background image and gradient on these containers rather than having the image fixed on the <body> tag.

    A wise man once said:
    "Have you cleared your cache?"

    #1562089
    soulhaven.nz

    Thank you. I have seen mention of GenerateBlocks in the forum; will check it out!

    #1562371
    Elvin
    Staff
    Customer Support

    No problem.

    I believe you don’t even have to do CSS with this particular one as Background Gradient is added to GenerateBlock’s block settings within Gutenberg editor. It’s a nice tool to have. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

    #1564747
    soulhaven.nz

    Right. I got it. I have, at this stage, added the background image to only my Home page using CSS, and then used GenerateBlocks containers to do the gradient over top. If there is a more elegant way to do this, feel free to share.

    I ran into one hiccup where I lost the gradient in a container for some reason and could not figure out why or how to get it back, so dragged all its contents into a new container that does work. Seems odd. Regardless, all working now.

    Thanks.

    #1564928
    Elvin
    Staff
    Customer Support

    Right. I got it. I have, at this stage, added the background image to only my Home page using CSS, and then used GenerateBlocks containers to do the gradient over top. If there is a more elegant way to do this, feel free to share.

    The best way to do these kinds of things is to do everything within the UI first, as much as possible.

    This, in some sense is the more elegant way as its simple and it didn’t have to resort to any customization (CSS). πŸ™‚

    Glad you were able to make it work. No problem. πŸ™‚

    A wise man once said:
    "Have you cleared your cache?"

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