2 headers: A header with transparency and a header without transparency.

  • atalanttore

    (@atalanttore)


    1 month, 3 weeks ago

    I would like to use 2 different headers for different posts on my WordPress site.

    • Both headers should be sticky, i.e., not disappear when scrolling down.
    • The first header should have a solid, dark background color without transparency.
    • The second header should have a mostly transparent background that darkens the background image of the post displayed below.

    How can I configure the second header appropriately without affecting the first header?

Viewing 12 replies - 1 through 12 (of 12 total)
  • Moderator jordesign

    (@jordesign)

    1 month, 2 weeks ago

    Hi @atalanttore – the great thing about Block Themes is that you can have multiple types of header set up 👍

    First of all I would suggest going to manage all your template parts – and click ‘Add New Template part’. That will let you set up a new Header part.
    https://developer.wordpress.org/block-editor/reference-guides/block-api/block-templates/#custom-post-types

    Once that is done – you’ll need to set up a second ‘single post’ template – and assign the new header template to that post. So what you end up with is:

    • Single post template #1 (the original) with the original header
    • Single post template #2 with the new header

    When you publish your post you can select the correct template for the header you want to have in place.

    Thread Starter atalanttore

    (@atalanttore)

    1 month, 2 weeks ago

    Hi jordesign,

    Unfortunately, there is no ‘Add New Template part’ button in my WordPress 6.5.

    However, there is an ‘Add New Template’ button.

    Moderator jordesign

    (@jordesign)

    1 month, 2 weeks ago

    Hey @atalanttore you’ll find the ability to do that if you go to Patterns > Manage all Template Parts

    Thread Starter atalanttore

    (@atalanttore)

    1 month, 2 weeks ago

    Hi @jordesign,

    Unfortunately, there is only an “Add New Pattern” button in the “Patterns” section.

    Moderator jordesign

    (@jordesign)

    1 month, 1 week ago

    Hi @atalanttore – in the ‘Patterns’ view – there is a ‘Manage all Template Parts’ on the left hand menu.

    Here’s a screencast:
    https://cloudup.com/chqNVqiPDHS

    Thread Starter atalanttore

    (@atalanttore)

    1 month, 1 week ago

    Hi @jordesign,

    Many thanks for your screencast. I finally found the place.

    I have created a new, second header template part.

    So that I don’t have to start from scratch with an empty new second header, I copied and pasted the complete code of the original, first header via the Code Editor. I then changed the title in my new second header, but this also changed the title in the original first header.

    Why can’t the second header be edited independently of the first header?

    Moderator jordesign

    (@jordesign)

    1 month, 1 week ago

    Hi @atalanttore – It may depend on what kind of Block that header title is using…

    If it is the ‘Site Title’ block – that’s one where the setting is site-wide (as actually using the ‘title’ option of the site itself.

    If you switched to using a standard ‘Heading’ block – you’d be able to have the text different in each header 👍

    Thread Starter atalanttore

    (@atalanttore)

    2 weeks, 2 days ago

    Hi @jordesign,

    I’ve been creating posts and pages for 2 different headers for a few weeks now. So far, both headers only have a different background color and a different title. A Site Title block is used in the first header and a Heading block in the second header.

    I kept looking for a setting to add transparency to the second header. Unfortunately, I can only find settings for the color, but not for transparency. I never had a eureka moment.

    How can transparency be added to a header?

    Moderator jordesign

    (@jordesign)

    2 weeks, 1 day ago

    Hi @atalanttore

    How can transparency be added to a header?

    If you remove the background color from a header – it should be transparent? or I may be misunderstanding what you mean?

    Thread Starter atalanttore

    (@atalanttore)

    2 weeks, 1 day ago

    Hi @jordesign,

    I have just realized that my question is somewhat imprecise. From the beginning, I thought of a percentage value for setting the transparency of the background color of the header.

    Moderator jordesign

    (@jordesign)

    2 weeks ago

    Hey @atalanttore – thanks for explaining 🙂

    When changing the background of an image – clicking on the large color window will let you set a color code. One of the options in the dropdown is ‘RGB’ which will let you select an opacity as part of the settings. In this image it is the bottom ‘a’ (for alpha) value

    Thread Starter atalanttore

    (@atalanttore)

    1 week ago

    Hi @jordesign,

    Thanks for pointing out the alpha value. The header appears to be transparent. When scrolling down, the website content or background should shine through the header. That’s what I planned.

    Unfortunately, I’ve been struggling with a new problem, which I haven’t been able to solve. The parent Group block within the header is set as ‘Sticky’, but when scrolling down the page, the header does not remain at the top, but disappears as if it were not ‘Sticky’.

    Does ‘Sticky’ also work differently than I meant it to?

Viewing 12 replies - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.