[Resolved] How to create header like this

[Tom Snelders]

Hi,

Just a short one, how can I create a header(not squire) like the site library BhambrBland Awaken?

Is the red background behind the phone just a background image? What size should this background then need to have, and how do I need to set it up?

Thanks,
Tom

GeneratePress 2.2.2

[David]

Hi there,

like your own site it is using a GP Header Element:

https://docs.generatepress.com/article/header-element-overview/

The red background image is just a background image set in the header element.
The content e.g the phone, in the case of Awaken is Elementor added by way of a short code in the header element.

It really shouldn’t be no different to how you have your current site set-up.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom Snelders]

And what pixel size(width and height) should you advice for such a background?

[David]

Awaken is only using a 960px width image, which ‘works’ for that image.
I am more inclined to use a 1600px+ wide image for full width header background images.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom Snelders]

I’m testing out something like a curved header.

https://web-creations.nl/test/

Are able to explane why there is a thin line below the header?

[David]

Check in the Header Element and set the background color to 100% transparent.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom Snelders]

Looks nice now, only the curved line is not perfect yet.

And the background from this header looks a little weird on my iphone.

Thanks for the help again.

[David]

You’re welcome.
You may want to investigate using SVG’s and how they can be absolutely positioned.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom Snelders]

What do you mean by SVG’s.

Have you got manuals?

[David]

SVG’s are scalable vector graphics which are creating using Adobe Illustrator or your chosen vector design tool. To use them in WordPress requires a plugin:

https://en-gb.wordpress.org/plugins/svg-support/

This solely allows you to upload them as normal media attachments. As WP blocks them by default.

Theres a lot of tutorials if you google SVG in webdesign. This article covers some of the basics.
https://torquemag.io/2017/09/scalable-vector-graphics-wordpress/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom Snelders]

Thanks David,

New stuff to learn and to become a better webdesigner.

Love it!
Cheerz

[David]

Glad to be of help 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts