{"id":370,"date":"2022-03-12T08:05:46","date_gmt":"2022-03-12T08:05:46","guid":{"rendered":"https:\/\/fluentthemes.com\/wp\/cosonix-green\/?p=157"},"modified":"2022-09-06T19:12:49","modified_gmt":"2022-09-06T19:12:49","slug":"page-header-2","status":"publish","type":"post","link":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/page-header-2\/","title":{"rendered":"Page Header"},"content":{"rendered":"\n<p>Take a look at the front-end preview of Page Header Widget from Maxhost Live Demo:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/03\/page-header-1024x124.png\" alt=\"\" class=\"wp-image-158\"\/><figcaption><strong>\u21d1 Front-End Sample of the Widget<\/strong><\/figcaption><\/figure><\/div>\n\n\n<p><strong>Using Page Header in WPBakery<\/strong><\/p>\n\n\n\n<p>Go to&nbsp;<strong>Pages<\/strong>&nbsp;-&gt;&nbsp;<strong>Add New<\/strong>&nbsp;on your WordPress Admin Dashboard and click on the \u2018<strong>WPBakery Page Builder<\/strong>\u2018 button given at the top of the page. Now, click on the \u2018<strong>Frontend Editor<\/strong>\u2018 button, and you will have a screen like below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/Untitled.png\" alt=\"\" class=\"wp-image-257\"\/><\/figure><\/div>\n\n\n<p>Click on the \u2018<strong>Add Element<\/strong>\u2018 button and you will find a window as shown in the following image:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/fluent.png\" alt=\"\" class=\"wp-image-258\"\/><\/figure>\n\n\n\n<p>Under the \u2018by Fluent-Themes Shortcodes\u2019 tab, you will get all the custom WPBakery elements created for Maxhost theme.<\/p>\n\n\n\n<p>Choose <strong>&#8216;Page Header&#8217;<\/strong> element from there. You will get the \u2018<strong>Settings<\/strong>\u2018 window from where you can set your content of Page Header as you need.<\/p>\n\n\n\n<h4><strong><strong><strong><strong><strong>Settings<\/strong><\/strong><\/strong><\/strong><\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/page-header.png\" alt=\"\" class=\"wp-image-259\"\/><\/figure>\n\n\n\n<ul><li><strong>Change Parallax Background Image<\/strong>&#8211; Put the URL of the image to Change parallax background image.<\/li><li><strong>Heading Line 1<\/strong>&#8211; Heading Line 1. <\/li><li><strong>Heading Line-2<\/strong>&#8211; Heading Line 2.<\/li><li><strong>Show Breadcrumb?<\/strong>&#8211; Check tick mark in the below box if you want to show breadcrumb.<\/li><\/ul>\n\n\n\n<h4><strong>Row Settings<\/strong><\/h4>\n\n\n\n<h4 class=\"sub-sub-heading\"><strong><em>General Tab<\/em><\/strong><\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/08\/wpbakery-row-settings-maxhost-1-1-533x1024.jpg\" alt=\"\" class=\"wp-image-442\"\/><\/figure><\/div>\n\n\n<ul><li><strong>Row Stretch<\/strong>&nbsp;\u2013 Select stretching options for row and content (Note: stretched may not work properly if parent container has \u201coverflow: hidden\u201d CSS property).<\/li><li><strong>Columns Gap \u2013<\/strong>&nbsp;Select gap between columns in row.<\/li><li><strong>Full Height Row \u2013&nbsp;<\/strong>If checked row will be set to full height.<\/li><li><strong>Equal Height \u2013<\/strong>&nbsp;If checked columns will be set to equal height.<\/li><li><strong>Reverse Columns in RTL \u2013<\/strong>&nbsp;If checked columns will be reversed in RTL.<\/li><li><strong>Content Position<\/strong>&nbsp;\u2013 Select content position within columns.<\/li><li><strong>Use Video Background?<\/strong>&nbsp;\u2013 If checked, video will be used as row background.<\/li><li><strong>Parallax<\/strong>&nbsp;\u2013 Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).<\/li><li><strong>CSS Animation<\/strong>&nbsp;\u2013 Select type of animation for element to be animated when it \u201centers\u201d the browsers viewport (Note: works only in modern browsers).<\/li><li><strong>Row ID<\/strong>&nbsp;\u2013 Enter element ID (Note: make sure it is unique and valid according to&nbsp;<a rel=\"nofollow noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\" target=\"_blank\">w3c specification<\/a>).<\/li><li><strong>Disable Row<\/strong>&nbsp;\u2013 If checked the row won\u2019t be visible on the public side of your website. You can switch it back any time.<\/li><li><strong>Extra Class Name<\/strong>&nbsp;\u2013 Style particular content element differently \u2013 add a class name and refer to it in custom CSS.<\/li><li><strong>Want to have Top Padding?<\/strong>&nbsp;\u2013 Input top padding in pixel (i.e 50px).<\/li><li><strong>Want to have Bottom Padding?<\/strong>&nbsp;\u2013 Input bottom padding in pixel (i.e 50px).<\/li><li><strong>Want to have Left Padding?<\/strong>&nbsp;\u2013 Input left padding in pixel (i.e 50px).<\/li><li><strong>Want to have Right Padding?<\/strong>&nbsp;\u2013 Input right padding in pixel (i.e 50px).<\/li><\/ul>\n\n\n\n<h4><strong><em><strong><em>Design Options Tab<\/em><\/strong><\/em><\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/Row-design-2.png\" alt=\"\" class=\"wp-image-261\"\/><\/figure>\n\n\n\n<ul><li><strong>Border Color<\/strong>&nbsp;\u2013 You can select border color whatever you want.<\/li><li><strong>Border Style<\/strong>&nbsp;\u2013 You can select border color whatever you want.<\/li><li><strong>Background<\/strong>&nbsp;\u2013 Background Image can be uploaded from from your system or Media Library.<\/li><\/ul>\n\n\n\n<h4><strong><strong>Column Settings<\/strong><\/strong><\/h4>\n\n\n\n<h4><strong><em><strong><em>General Tab<\/em><\/strong><\/em><\/strong><\/h4>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/colum-gen.png\" alt=\"\" class=\"wp-image-262\"\/><\/figure><\/div>\n\n\n<ul><li><strong><strong>Use Video Background<\/strong>&nbsp;\u2013 <\/strong>If checked, video will be used as row background.<\/li><li><strong><strong>Parallax<\/strong>&nbsp;\u2013 <\/strong>Add parallax type background for row (Note: If no image is specified, parallax will use background image from Design Options).<\/li><li><strong><strong>CSS Animation<\/strong>&nbsp;\u2013 <\/strong>Select type of animation for element to be animated when it \u201centers\u201d the browsers viewport (Note: works only in modern browsers).<\/li><li><strong><strong>Element ID<\/strong>&nbsp;\u2013 <\/strong>Enter element ID (Note: make sure it is unique and valid according to&nbsp;<a rel=\"nofollow noreferrer noopener\" href=\"https:\/\/www.w3schools.com\/tags\/att_global_id.asp\" target=\"_blank\">w3c specification<\/a>).<\/li><li><strong><strong>Extra Class Name<\/strong>&nbsp;\u2013 <\/strong>Style particular content element differently \u2013 add a class name and refer to it in custom CSS.<\/li><li><strong>Position<\/strong>&nbsp;\u2013 here you can choose between <strong>Absolute and Fixed<\/strong> position.<\/li><\/ul>\n\n\n\n<h4 class=\"sub-sub-heading\"><strong><em>Design Options Tab<\/em><\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/column-design.png\" alt=\"\" class=\"wp-image-264\"\/><\/figure>\n\n\n\n<ul><li><strong><strong>Border Color<\/strong>&nbsp;\u2013 <\/strong>You can select border color whatever you want.<\/li><li><strong><strong>Border Style<\/strong>&nbsp;\u2013 <\/strong>You can select border color whatever you want.<\/li><li><strong><strong>Background<\/strong>&nbsp;\u2013 <\/strong>Background Image can be uploaded from from your system or Media Library.<\/li><\/ul>\n\n\n\n<h4><strong><em><strong><em>Responsive Options<\/em><\/strong><\/em><\/strong><\/h4>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" src=\"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-content\/uploads\/2022\/06\/Column-respons.png\" alt=\"\" class=\"wp-image-265\"\/><\/figure>\n\n\n\n<ul><li><strong><strong>Width<\/strong>&nbsp;\u2013 <\/strong>You can select column width from the Drop Down.<\/li><li><strong><strong>Responsiveness<\/strong>&nbsp;\u2013 <\/strong>Adjust column for different screen sizes. Control width, offset and visibility settings.<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Take a look at the front-end preview of Page Header Widget from Maxhost Live Demo: Using Page Header in WPBakery Go to&nbsp;Pages&nbsp;-&gt;&nbsp;Add New&nbsp;on your WordPress Admin Dashboard and click on the \u2018WPBakery Page Builder\u2018 button given at the top of the page. Now, click on the \u2018Frontend Editor\u2018 button, and you will have a screen [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[8,16],"tags":[],"_links":{"self":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/posts\/370"}],"collection":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/comments?post=370"}],"version-history":[{"count":0,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/posts\/370\/revisions"}],"wp:attachment":[{"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/media?parent=370"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/categories?post=370"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fluentthemes.com\/knowledgebase\/maxhost\/wp-json\/wp\/v2\/tags?post=370"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}