Setup website transparent header

TODO: review these notes

These notes demonstrate how to configure a page (or entire site) to use the transparent header. So that the navigation elements appear on the header background image and not a colored background.

<note!> : Works for the Adventist design. (2024.11.14)

Example website

• Entity Demo Union Frontend (frontend) (backend)

Website

• Navigate to Web > website > Layouts
• Click on "Add Layout" button.
• Add the following:
  • Name: "Transparent Header"
  • Collapse header: set checkmark
  • Click "Create" button (& layout is created)
• Edit the empty layout:
  • Click on the page
    • Under Layout section, add block "Site Header" to the page
    • Under Styles, Background type: Solid
    • Background color: transparent
  • Click on page again
    • Under Layout section, find "Content Placeholder" block 
    • Beneath the Site Header block, add a "Content Placeholder" block (no settings needed)
  • Save your changes

Appearance (whole website)

• <note!> : ONLY follow these steps, if you are making transparent header the default for the website
• web > website > appearance > design tab > design section
• Default layout field: set the layout created above
• click on Update button
• If this is done, you can skip Page Settings below

Page Settings (individual pages)

• <note!> : Do this if using on individual pages. If default layout under appearance is set, skip this section
• Choose a page that should have a transparent header on the page tree and click on the menu icon (3 dots) next to the page name to access the Page Settings 
• Go to the General tab
• In the layout field, select the new Transparent layout you just made
• Click on Update button

Page Content

• On the page itself, add a Section ("Header")
• Inside the Section, add a Hero block
• Add an image, Title, Description text, call to action, as needed
• <note!> : Call To Action URL is accessed by the small gear icon. Click on that to adjust the CTA settings
• Set Height: set to what is needed. It's a responsive field, as the value typically varies based on the breakpoint.
• <note!> : Consider incrementing at 5rem intervals at each breakpoint until largest needed height. Can use px values also. Values need to be adjusted by a factor of 16. So 40rem -> 640px. Usually, it's better to use rem though.
• As needed, adjust Text align, position, color, background type, gredient type as the pictures dictate
• View in frontend to check