- This topic has 8 replies, 3 voices, and was last updated 3 years, 6 months ago by David.
-
AuthorPosts
-
September 24, 2020 at 8:07 pm #1457838angelarose
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!
September 24, 2020 at 8:21 pm #1457855ElvinStaffCustomer SupportHi,
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?
September 24, 2020 at 8:56 pm #1457873angelarosehttps://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
September 24, 2020 at 9:04 pm #1457882angelaroseUnsure if maybe I would need to use an element instead and then add an image on top of that?
September 25, 2020 at 2:50 am #1458178DavidStaffCustomer SupportHi 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.
September 26, 2020 at 3:18 pm #1460359angelaroseThank 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!!
September 27, 2020 at 5:54 am #1460874DavidStaffCustomer SupportWould you mind raising a new topic so we can keep the two issues separate ๐
September 27, 2020 at 7:51 am #1461077angelaroseYes, I just submitted a new topic for it!
September 27, 2020 at 2:00 pm #1461409DavidStaffCustomer SupportThank you ๐
-
AuthorPosts
- You must be logged in to reply to this topic.