- This topic has 25 replies, 5 voices, and was last updated 3 years, 6 months ago by Tom.
-
AuthorPosts
-
August 30, 2020 at 10:28 pm #1424552Stefan
Hi Generate Press,
I created header pages by creating one re-usable block. I wanted them all to be the same shade of blue as in the top header (please seen screenshot).
The black box was at one point blue and now it has changed to black across all pages. I only have two GP Elements active, one for the Search Page and one for the 404 page. I do not have a special element for the header.
Can you please help me troubleshoot this issue as I cannot seem to locate where to change the color for the re-usable block.
Looking forward to your response.
Regards,
StefanAugust 31, 2020 at 4:39 am #1424859DavidStaffCustomer SupportHi there,
will this Block be displayed in the same place across your site?
If so use the Block Element:
https://docs.generatepress.com/article/block-element-overview/
You won’t need to use a reusable block in there.
And we recommend using the GenerateBlocks plugin for building that content:August 31, 2020 at 8:39 am #1425301StefanHi David,
– Yes, this Block will be displayed across all pages.
– One more problem. I would like to have 40px padding on all sides of the container. When I do that, I get some space between the Block that I would like to have and the header. Please refer to the screenshot. How do I get rid off it across all pages?
https://prnt.sc/u925y8Regards,
StefanAugust 31, 2020 at 4:14 pm #1425767LeoStaffCustomer SupportDavid’s suggestion of using GB with block element would definitely be the best method.
The space between the header and content is coming from a few different things.
Can you try using the full width page builder container option first?
https://docs.generatepress.com/article/page-builder-container/If you need the full width layout for all pages, then you can create a layout element for it:
https://docs.generatepress.com/article/layout-element-overview/#content-1It would work the best for what you are trying to create.
I would again highly recommend GenerateBlocks – should be super helpful for what you are doing π
September 8, 2020 at 4:59 am #1435110StefanHi,
I created a block element (hook) to use as the header but still not working as intended. I tried to activate it on all pages, but it messes things up for me. Is it possible to customize the activation of the hook element to certain pages?
By the way, here’s the problem:
This is the current HTML code of the bugged header:
https://prnt.sc/udltvqThis is what the header looks like in the visual editor:
https://prnt.sc/udluvsThis is what the start here page looks like:
https://prnt.sc/udlv5fThe way it’s supposed to look is the black box is supposed to be merged with the top blue box (menu items) and the white space (padding) to be gone.
https://prnt.sc/udlx17The issue is not the width, I found ways to solve it, but it’s the padding. In the GeneratePress website settings, I selected 40px of padding, but is there a way to remove this container padding for the top section for the header block I want to create?
I hope you can help with this.
Regards,
StefanSeptember 8, 2020 at 5:45 am #1435185DavidStaffCustomer SupportHi there,
First off the spacing issues:
1. The default content container has top padding. So any element placed inside it will be affected by the padding. Use the
after_header
hook in the Block Element as this is outside the content container and will fill full width.2. Use the GenerateBlocks plugin instead of a Cover Block. This has zero top margin ( unlike the cover block – which is where the other space is coming from ) and the CSS is dynamic so it should render correctly.
September 8, 2020 at 8:02 am #1435504StefanHi David,
Thanks for the help. I re-did everything as per your instructions and now it seems to work.
I used GenerateBlocks to create the homepage, but for some reason I cannot find the settings to stretch the block to full width and make the full background blue.I fixed some and broke another π
Here’s the screenshot with the issue.
https://prnt.sc/udq1nuSeptember 8, 2020 at 8:19 am #1435524LeoStaffCustomer SupportCan you guide me to the page where the issue can be seen?
I checked the URL you’ve provided in the original topic but don’t see GB there.
Let me know π
September 8, 2020 at 11:39 am #1435718StefanHi,
This is the link:
https://www.lifestyledemocracy.com/
Please let me know if there is anything else.
September 8, 2020 at 11:47 am #1435727StefanI also noticed that after creating the Block Element Hook, in the mobile version I need to slide to the right to see the rest of the web content. There are a few more pixels on the right that are not shown immediately upon entering the site. I think that Block Element hook (on all pages) is wider than the phone screen width for some reason.
I didn’t have this issue with the previous setup. Can you help me with this as well?
September 8, 2020 at 3:15 pm #1435881LeoStaffCustomer SupportLet’s take care of one issue at the time.
The full width setting should be in the container block settings:
https://postimg.cc/56m9Y3W5Do you see that?
September 8, 2020 at 10:17 pm #1436071StefanHi Leo,
I used the “Grid” block and that’s why I couldn’t find the option. I changed the block to “Container” and it worked. Now, I still have space between the Element: Header Block and the Generate Blocks: Container.
Could you please help me remove the spacing as indicated in the screenshot?
https://prnt.sc/ue1n2zRegards,
StefanSeptember 8, 2020 at 10:22 pm #1436076LeoStaffCustomer SupportWhich page should I be looking at now?
I don’t see GB in this one:
https://www.lifestyledemocracy.com/September 9, 2020 at 9:26 am #1436962StefanHi Leo,
Yes, we are talking about that website: http://www.lifestyledemocracy.com.
If that is not GB, then I don’t know what I am doing πThe thing I want to resolve now is the spacing between the blue squares.
https://prnt.sc/ueeharLooking forward to your feedback.
Regards,
StefanSeptember 9, 2020 at 2:50 pm #1437298ElvinStaffCustomer SupportHi Stefan,
I’ve checked your site and narrowed down the cause of the white space.
As shown in the video, there’s an empty <p> html tag on your web page.
https://share.getcloudapp.com/9ZuX6k8rPerhaps you have a Block Element that inserts a Cover on generate_after_header hook. This block probably has an empty <p> underneath.
Can you check if this is the case? Thanks.
-
AuthorPosts
- You must be logged in to reply to this topic.