[Support request] Gutenberg, GP and GB editing, im confused.

[Richard]

I am used to Elementor, now I want to get up and running with Gutenberg, GP and GB but things don’t seem to be matching some of the tutorials so I am getting really confused.

I am trying to replicate this website which I built in elementor https://www.spacestylez.com/ but struggling to get the header layout sorted as

1. Cannot seem to put menu to the left with a search bar to the right of the central logo.
2. Cannot gradient the background so that it flows nicely into the body.

I have yet to even work out how to make content pages with GP, GB and Gutenberg.

I am fairly new to coding/development as a whole but watching some of the tutorials made me even more confused.

[Fernando]

Hi Richard,

To achieve a menu like that, you’ll need some custom CSS.

Here’s a link you may refer to: https://docs.generatepress.com/article/header-examples/#example-3

Alternatively, another approach is to use a Block Element – Site Header, to have full control of the layout of your header: https://docs.generatepress.com/article/block-element-site-header/

Once you’ve done this, you’ll need to create a Header Element with the merge setting enable, and set the display rule to your preference. This will merge the header with the content of your site. We need to do this so we can apply a “continuous” background your aiming for.

Lastly, in Customize > Background Images, set an image for your Body.

Hope this helps!

[Richard]

Thank you for the reply.

That didn’t seem to work as planned, I get what you are saying with it in theory but it doesn’t work as planned.

1. When using the 1st method, the menu is divided which is now what I want, I need the logo central, the menu on the left and a search bar on the right.

2. using the second option, is identical and does not really change anything,

Also, both methods don’t allow me a gradient background that is translucent for the background image to come through.

If I select the merge button and put an offset in, that does nothing also.

I know it’s not your job to code/design for me but I was highly recommended coming across from elementor to GP/GB but I seem to be having far more difficulties. I have coded my own site a few times before, but this is so much more challenging.

Here is the site i am using to test the build on https://titanreviews.co.uk/

Richard

[Fernando]

Will the background image with a gradient run through from top to bottom in your entire page?

Well, we’re setting a merge to have the header be part of the content to make it look seamless. However, if we’re setting the background image to the entire body, we can just make the header transparent, and in this way, we wouldn’t need a header element.

We can just add the gradient through custom CSS with your setup now.

For instance, this is what it may look like: https://share.getcloudapp.com/DOudZo1E

You can try adding the background image first, and then let us know, and we’ll help adding the gradient through CSS.

[Richard]

No, the gradient will only be top to bottom of the header per how it’s styled on http://www.spacestylez.com

I have also tried to replicate the footer in GP, but it ain’t happening; I need the footer to look the same as the link for the original site too.

Again the header needs a menu on the left, the logo centre and the search bar on the right.

Need to be able to have the blue background and green highlight shadow.

This is a client’s website (my partner) but still a client of sorts so it needs to be virtually identical. Were moving it away from Elementor due to speed optimisation issues.

[Fernando]

Let’s try to fix the header first.

Try setting the Navigation location of the Primary nav to float right in Customize > Layout > Primary Navigation.

Then, we’ll use CSS to move the logo to the center.

[Richard]

Hi,
I Have changed it to float right

Richard

[Fernando]

It’s still below the header from my end. Am I looking at the correct site? – https://titanreviews.co.uk/

If yes, and I’m not seeing the updated version, can you try clearing all caching mechanisms set in the site?

[Author]

Posts