Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Support request] Not sure where to start – how do I do this?

Home Forums Support Not sure where to start – how do I do this?

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #384814
    mdgallagherdesign

    Hi guys!

    We use GP for pretty much every site we do, and I have a client that is looking for something like this page. https://www.mileenddeli.com/

    Most of it isn’t an issue. It is the look and feel when you get midway where there is a black box over a picture High Holidays, with text and a learn more CTA. Is this something doable, I know this site was done in squarespace, but we are using wordpress exclusively.

    Hoping someone can steer me in the right direction.

    GP Premium 1.4.3
    #384977
    David
    Staff
    Customer Support

    A lot of designers would resort to using a page builder to create this content. I would use Sections and within as per the squarespace site use a flex box to create this. The example is an outer flex container with two nested divs both occupying 50% width the left hand has overflow visible allowing the image to extend behind the content of the second column which has a nested div containing the text and CTA with some inner padding and some margins to position and probably a z-index adjustment to move it to the front. But yes all is possible with GP and some code

    #385013
    Tom
    Lead Developer
    Lead Developer

    You could also use relative and absolute positioning.

    For example:

    Overlay text

    Then some CSS:

    .box-container {
        position: relative;
    }
    
    .box-text {
        background: black;
        color: white;
        padding: 30px;
        position: absolute;
        right: -30px;
    }

    Obviously that’s just thrown together and will need tweaking, but hopefully it’s a start 🙂

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