{"id":7916,"date":"2023-06-19T10:50:52","date_gmt":"2023-06-19T10:50:52","guid":{"rendered":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/?post_type=ht_kb&p=7916"},"modified":"2025-01-23T08:05:29","modified_gmt":"2025-01-23T08:05:29","slug":"page-header-and-background","status":"publish","type":"ht_kb","link":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/knowledge-base\/page-header-and-background\/","title":{"rendered":"09. Page header and background"},"content":{"rendered":"

The page header is the top section of default pages.<\/p>\n

There are 2 main parts:<\/p>\n

    \n
  1. The content<\/li>\n
  2. The background<\/li>\n<\/ol>\n

    Customizing page header content<\/h2>\n

    Customize the design of the page headers as hide\/display breadcrumb, alignment and padding.<\/p>\n

    For Podcasts and Series, additional options are available in a dedicated section, covered in the next chapters.<\/p>\n

    When editing a single page, from the Classic editor, you can choose to hide the default page header and title. This is useful when creating a page with Elementor.
    \nMore info in the next chapters about page creation.<\/p>\n

    Customizing the page header background and appearance<\/h2>\n

    To edit the header<\/strong> appearance go to Appearance > customize > Header and menu > Page header and background<\/strong><\/p>\n

    \"\"<\/p>\n

    Header padding<\/h2>\n

    Header padding can be adjusted for mobile, desktop and tablet. If your menu has transparent background, set a taller top padding, to allow space for the menu.<\/p>\n

    \"\"<\/p>\n

    Header background<\/h2>\n

    This area of the customizer controls the background appearance. You can set a default background color and picture, and set the alignment.<\/p>\n

    If set to fixed, the page content will scroll on top of the background picture, which instead stays in the same position.<\/p>\n

    \"\"<\/p>\n

    Custom background for single podcasts or pages<\/h2>\n

    For each page you can override the featured image<\/strong> or the global<\/strong> background by uploading a custom picture in the custom field “Custom header and slideshow background”. This field is available in the single page editor below the main content.<\/strong><\/p>\n

    The same image will be used as background for the slideshows<\/strong>. Is recommended to use a picture with horizontal format, for instance, 2000×1000. The proportion depends on your global header size and sliders height, so there isn’t a fixed recommended image size.<\/p>\n

    \"\"<\/p>\n

    Header background height<\/h2>\n

    This option changes the height of the background picture container,<\/strong> the number is expressed in percentage on te total height of the page.<\/p>\n

    Below an example of background height 40% and 100%.<\/p>\n

    \"\"<\/p>\n

    \"\"<\/p>\n

    Header picture opacity<\/h2>\n

    This option defines the opacity<\/strong> of the picture and allows to dim the visibility<\/strong>. Is specially useful in case the picture doesn’t allow a good readability. <\/strong><\/p>\n

    If the text color is too similar to your pictures, you should set a low opacity.<\/strong><\/p>\n

    \"\"<\/p>\n

    Header picture blur<\/h2>\n

    This parameter allows to blur the background picture to generate an evocative background gradient, increasing readability and fixing low quality images.<\/p>\n

    \"\"<\/p>\n

     <\/p>\n

    Header gradient opacity<\/h2>\n

    This parameter changes the gradient opacity on the picture. This theme blends the header backgroun with the page background color by adding a gradient on top of the header picture.<\/p>\n

    The header gradient can control the transparency of the gradient. Below an example with low and high opacity.<\/p>\n

    You can see with low gradient opacity that the picture has a neat end instead of blending with the background. Use at your own taste.<\/p>\n

    Low gradient opacity<\/h3>\n

    \"\"<\/p>\n

    High gradient opacity<\/h3>\n

    \"\"<\/p>\n

     <\/p>\n

    Page gradient opacity:<\/h2>\n

    this option controls a similar gradient but it’s applied on top of the content area, it allows a fade-out effect on the header background when scrolling the page.<\/p>\n

    Parallax<\/h2>\n

    The parallax effect adds visual depth to your WordPress theme by making the background scroll at a different speed compared to the foreground content.<\/strong> This effect is widely used to create engaging and modern web designs.<\/strong><\/p>\n

    \"\"<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht_kb_category":[624],"ht_kb_tag":[634,633,771,839],"class_list":["post-7916","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-theme-customizations","ht_kb_tag-background","ht_kb_tag-customizations","ht_kb_tag-header","ht_kb_tag-page-header"],"_links":{"self":[{"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb\/7916"}],"collection":[{"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb"}],"about":[{"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/comments?post=7916"}],"version-history":[{"count":3,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb\/7916\/revisions"}],"predecessor-version":[{"id":8219,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb\/7916\/revisions\/8219"}],"wp:attachment":[{"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/media?parent=7916"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb_category?post=7916"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/manuals.qantumthemes.xyz\/wpcasterpro\/wp-json\/wp\/v2\/ht_kb_tag?post=7916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}