Site logo

Archived topic

Not sure where to start - how do I do this?

2 replies · Started by mdgallagherdesign on September 13, 2017

Viewing posts 1–3 of 3

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.

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

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 :)

This archived topic is closed to new replies.