{"id":52499,"date":"2015-08-19T03:19:44","date_gmt":"2015-08-19T07:19:44","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=52499"},"modified":"2017-07-28T06:00:28","modified_gmt":"2017-07-28T10:00:28","slug":"cherryframework-4-how-to-manage-header-layout-and-background-options","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cherryframework-4-how-to-manage-header-layout-and-background-options.html","title":{"rendered":"CherryFramework 4. How to manage header layout and background options"},"content":{"rendered":"<p>\r\n<p>This tutorial will show you how to manage header layout and background options in CherryFramework 4 templates.<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=RAub7iHNY_M?width=1280&amp;height=720\" rel=\"prettyPhoto\">CherryFramework 4. How to manage header layout and background options<\/a><\/p>\r\n<div class=\"inline-banner\">\r\n<a href=\"https:\/\/www.templatemonster.com\/service-center\/\">\r\n<img src=\"\/help\/files\/banners\/inline\/Banner-3-(835-x100).jpg\" \/>\r\n<\/a>\r\n<\/div>\r\n<p>Log into <strong>WordPress admin panel<\/strong>, go to <strong>Cherry <\/strong>-><strong> Options<\/strong> -> <strong>Header<\/strong>.<\/p>\r\n<p> Here you will see all the options to manage header and each option has description in details on how it will affect the front end: <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-1-300x254.png\" alt=\"CherryFramework4-How_to_manage_header_layout_and_background_options-1\" width=\"300\" height=\"254\" class=\"aligncenter size-medium wp-image-52500\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-1-300x254.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-1-150x127.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-1.png 1021w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>We will review  all the options now.<\/p>\r\n<ol>\r\n<li><strong>Background:<\/strong>\r\n<p>You can set a background image with <strong>Choose Media<\/strong> button:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-2-300x25.png\" alt=\"CherryFramework4-How_to_manage_header_layout_and_background_options-2\" width=\"300\" height=\"25\" class=\"aligncenter size-medium wp-image-52501\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-2-300x25.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-2-150x12.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-2-1024x84.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-2.png 1492w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p> You can set a solid color background in <strong>Background Color<\/strong> field: <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-3-300x144.png\" alt=\"CherryFramework4-How_to_manage_header_layout_and_background_options-3\" width=\"300\" height=\"144\" class=\"aligncenter size-medium wp-image-52502\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-3-300x144.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-3-150x72.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-3.png 923w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p>  There are some options to adjust the background included below too: <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-4-300x88.png\" alt=\"CherryFramework4-How_to_manage_header_layout_and_background_options-4\" width=\"300\" height=\"88\" class=\"aligncenter size-medium wp-image-52503\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-4-300x88.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-4-150x44.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-4-1024x300.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-4.png 1185w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n  <\/li>\r\n<li>\r\n<p><strong>Grid type:<\/strong> set it <strong>Wide<\/strong> for the full width, or set it <strong>Boxed<\/strong> into a box with a specific width: <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-5-300x84.png\" alt=\"CherryFramework4-How_to_manage_header_layout_and_background_options-5\" width=\"300\" height=\"84\" class=\"aligncenter size-medium wp-image-52504\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-5-300x84.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-5-150x42.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-5.png 669w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n    <\/li>\r\n<li>\r\n<p><strong>Boxed width:<\/strong> This field will work if you set the grid type as Boxed: <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-6-300x25.png\" alt=\"CherryFramework4-How_to_manage_header_layout_and_background_options-6\" width=\"300\" height=\"25\" class=\"aligncenter size-medium wp-image-52505\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-6-300x25.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-6-150x13.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-6-1024x87.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-6.png 1488w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n\t<\/li>\r\n<li>\r\n<p><strong>Sticky header:<\/strong> <\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-7-300x41.png\" alt=\"CherryFramework4-How_to_manage_header_layout_and_background_options-7\" width=\"300\" height=\"41\" class=\"aligncenter size-medium wp-image-52506\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-7-300x41.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-7-150x21.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-7.png 992w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<ul class=\"list\">\r\n<li>\r\n<p><strong>On<\/strong>: The Header section will be sticky to the top if you scroll down the page.<\/p>\r\n<\/li>\r\n<li>\r\n<p> <strong>Off<\/strong>: No header can be viewed when you scroll down the page.<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<li>\r\n<p><strong>Sticky selector<\/strong>: Select the block selector that will be used to build sticky panel, including:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-8.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-8-300x29.png\" alt=\"CherryFramework4-How_to_manage_header_layout_and_background_options-8\" width=\"300\" height=\"29\" class=\"aligncenter size-medium wp-image-52507\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-8-300x29.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-8-150x14.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-8-1024x98.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-8.png 1480w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<ul class=\"list\">\r\n<li>\r\n<p><strong>Header<\/strong>: The whole header with background will be sticky.<\/p>\r\n<\/li>\r\n<li>\r\n<p><strong>Main Menu<\/strong>: Just the menu will be sticky. <\/p>\r\n<\/li>\r\n<li>\r\n<p> <strong>Header top static area<\/strong>: The whole header will be sticky except the background.<\/p>\r\n<\/li>\r\n<\/ul>\r\n<\/li>\r\n<li>\r\n<p> <strong>Select MotoSlider to show in header<\/strong>: shows a drop down list of sliders, which is <em>MotoPress Slider plugin<\/em>:<\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-9.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-9-300x61.png\" alt=\"CherryFramework4-How_to_manage_header_layout_and_background_options-9\" width=\"300\" height=\"61\" class=\"aligncenter size-medium wp-image-52508\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-9-300x61.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-9-150x31.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-9.png 827w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\r\n<p><a href=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-10.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-10-190x300.png\" alt=\"CherryFramework4-How_to_manage_header_layout_and_background_options-10\" width=\"190\" height=\"300\" class=\"aligncenter size-medium wp-image-52509\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-10-190x300.png 190w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-10-95x150.png 95w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/08\/CherryFramework4-How_to_manage_header_layout_and_background_options-10.png 579w\" sizes=\"(max-width: 190px) 100vw, 190px\" \/><\/a>\r\n <\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=RAub7iHNY_M?width=1280&amp;height=720\" rel=\"prettyPhoto\">CherryFramework 4. How to manage header layout and background options<\/a><\/p>\r\n<p><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial will show you how to manage header layout and background options in CherryFramework 4 templates.<\/p>\n","protected":false},"author":69,"featured_media":52511,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2017,728],"tags":[1008,2012,627,482,900],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52499"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/69"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=52499"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52499\/revisions"}],"predecessor-version":[{"id":82309,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/52499\/revisions\/82309"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/52511"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=52499"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=52499"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=52499"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}