[Support request] Header

[James]

I have GerneratePress premium and I am trying to customize the header area.
https://yoursecretself.com/

What’s the best way to create a header or customer header?

I have tried to edit the text but it appears I am limited with ( Functionality )

I can not center the Title or Taglines and I can not edit the space between them.

[Elvin]

Hi James,

I believe this is a good opportunity for you to use GP Premium’s Block Element – Site Header.

When you create a Block Element on Appearance > Elements. It lets you set the type/purpose of Block Element you’re creating.

On this screenshot – https://share.getcloudapp.com/qGuJWRem – it shows a dropdown option of the type of Block ELement you’re creating.

For this specific purpose, pick “Site Header”.

Layout created on a Block Element - Site Header replaces the default header of the theme.

That said, create your desired layout that will serve your site’s header.

After you’re done with the layout, go to its Display Rule tab and set its location to you where you want the layout to apply.

After you’re done w/ the layout and display rule location settings, save the Block element.

You should see the layout you’ve created applied on the front end. 🙂

[James]

Ok great! So now how can i get rid of the default navigation area with the Site Title and Tagline completely.. the white area. https://yoursecretself.com/

[Ying]

Hi James,

So you are looking to remove the entire header not customizing the header?

If so, you can use a layout element:
https://docs.generatepress.com/article/layout-element-overview/#disable-element

Make sure the Disable element module is activated at Appearance > GeneratePress.

Let me know if you need further assistance 🙂

[James]

Hi, do you know how I can put a border around my images like this example and to add the shadow effect as well?
https://tinylittlebusinesses.com/frank-and-matt/

[Elvin]

Will this be for images added as an image block within your content?

If so, add this CSS on your site:

.frame {
    -webkit-box-shadow: 0 2px 18px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 18px 0 rgb(0 0 0 / 20%);
}

And then add frame on the Additional CSS Class(es) field of the image blocks you want to have shadow effect.

[James]

So can you make a quick video explaining this.. I am a bit confused.

[Elvin]

Here’s a demo video – https://share.getcloudapp.com/WnukzXlJ

You can use this CSS instead if you wish to apply it on the image bounds only.

.frame img{
    -webkit-box-shadow: 0 2px 18px 0 rgb(0 0 0 / 20%);
    box-shadow: 0 2px 18px 0 rgb(0 0 0 / 20%);
}

[James]

Hi, do you know how to make the Testimonials block font smaller? Look on this page:
https://yoursecretself.com/p-2/

[Leo]

Is the original topic resolved?

If so please open a new topic for a separate question.

Thanks!

[Author]

Posts