• Resolved atalanttore

    (@atalanttore)


    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 15 replies - 1 through 15 (of 16 total)
  • Moderator jordesign

    (@jordesign)

    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.www.ads-software.com/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)

    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)

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

    Thread Starter atalanttore

    (@atalanttore)

    Hi @jordesign,

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

    Moderator jordesign

    (@jordesign)

    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)

    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)

    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)

    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)

    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)

    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)

    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)

    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?

    Hi @atalanttore,

    There’s a bug where setting a block to Sticky does not work if the block is included in a Template part. Please check if the block you’ve set to Sticky is in a Template part. If yes, a workaround would be to ?add a new group at the top of the template, make it sticky, and place the template part in the group instead.

    Thread Starter atalanttore

    (@atalanttore)

    @kel-dc Thanks for your advice. Yes, the parent Group block is included in a Template part.

    Thanks also for your recommendation of a workaround.

    Hi @atalanttore

    As we haven’t received a response in over 3 weeks, we assume your issue has been resolved. However, if you’re still experiencing any problems, please feel free to mark the topic as unresolved or start a new one. ??

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