Archived topic
Not sure where to start - how do I do this?
2 replies · Started by mdgallagherdesign on September 13, 2017
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:
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 :)