Archived topic
Generateblock help!
8 replies · Started by angelarose on September 24, 2020
Hi!
I'm using generateblock to create a design. I'm looking to create a colored large block, similar to a header but not a full width with little padding on the top which I used the generate container block for. However, I also want to layer am image on top of that container to the right but whenever I try to add an image the original colored block size changes. I'm confused how to do this using just the theme's blocks. Thank you!
Hi,
I'm not sure I fully get what's happening. Can you provide a screenshot or screen recording?
Is the size change happening on width? height? or both?
https://ibb.co/6tmnC1p is is a style I'm trying to get but when I use the generate blocks both change, height and width of the colored block. When I add a image to the container block, if i make the image just slightly large, the container box will significantly grow in height. Not sure if how I'm going about building this is not the right way to start and that's why
Unsure if maybe I would need to use an element instead and then add an image on top of that?
Hi there,
first add a Container Block - which you would set the Background color.
Inside the container - add a Grid Block. 2 columns.
The left hand column contains your Headline block, and the right hand column contains your image.
Each of the grid containers you can adjust its Spacing which you can use negative margins to pull elements over each other. Please note neg margins are not truly represented in the Gutneberg editor so you will need to preview them on the front end.
Select the grid container with the image inside, and apply -negative bottom margin to pull it down outside the parent container.
For the text overlap - select is grid container and apply +positive left margin and -negative right margin to pull the text over the image. You may need to increase the z-index of the grid container which is under Advanced.
Thank you David! will try it now! Also, for the font for the headline, I'm looking to add a nongoogle font and I checked and read through the documentation on adding local and custom fonts and i have a child theme activated so I added the php code from the documentation into my php code for the child theme but after doing that I was confused as to what to do next. Read in another topic on this forum that I had to make a fonts folder on my child theme but I don't know how to do that, thank you!!
Would you mind raising a new topic so we can keep the two issues separate :)
Yes, I just submitted a new topic for it!
Thank you :)
