{"id":2037861,"date":"2021-04-30T13:04:51","date_gmt":"2021-04-30T13:04:51","guid":{"rendered":"https:\/\/toolset.com\/course-lesson\/styling-a-site-header-and-footer\/"},"modified":"2021-05-11T07:05:29","modified_gmt":"2021-05-11T07:05:29","slug":"styling-a-site-header-and-footer","status":"publish","type":"course-lesson","link":"https:\/\/toolset.com\/fr\/course-lesson\/styling-a-site-header-and-footer\/","title":{"rendered":"Styling a Site Header and Footer"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Designing the Header<\/h2>\n\n\n\n<p>Don\u2019t reinvent the wheel when it comes to your header. It\u2019s important that users navigate without getting confused, so try to make sure that your header has all the expected elements in sensible places.&nbsp;<\/p>\n\n\n\n<p>Some examples of useful header elements are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Site logo<\/li><li>Navigation menu<\/li><li>Search bar<\/li><li>Language switcher<\/li><li>Contact or call-to-action button<\/li><\/ul>\n\n\n\n<p>A well-known way to order the elements is to have your logo on the left, the menu or navigation in the center or middle-right, and then a search or language switcher on the right side of your header.&nbsp;<\/p>\n\n\n\n<p>You can control your header in the Customizer, but if you are not sure how then check your theme documentation or consult their team.&nbsp;<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"fa0c1190b0af3a2c4458f57340245800\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desing-styling-header.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desing-styling-header-500x255.png\" alt=\"\" class=\"wp-image-2042793\"\/><\/a><div class=\"tb-image-caption\"><figcaption>A site with a Header displaying the logo on the left and navigation on the right.\u00a0<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>Please note that if your site is in a language that reads from right to left (RTL), then we recommend reversing this order.&nbsp;<\/p>\n\n\n\n<p>If you want to design a site with a logo or other header elements above your menu navigation, you need to build a 2-3 row header. Some themes, such as Astra, Blocksy, and Kadence allow building these in the Customizer.&nbsp;<\/p>\n\n\n\n<p>Here is an example:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"d15eadb7f250355724998a0e2b3ee1e0\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desing-2-row-header.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desing-2-row-header-500x211.png\" alt=\"\" class=\"wp-image-2042805\"\/><\/a><div class=\"tb-image-caption\"><figcaption>An example of a website with a 2-row Header<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>Compared to 1-row headers, these offer more customization options but are more complicated to design and style.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Header Styling Guidelines<\/h3>\n\n\n\n<p>When it comes to designing your header, please follow these guidelines:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Keep the header slim. We recommend 60-80px for its height.<\/li><li>Don\u2019t use a logo with colors that clash with your site design and color palette. Either adjust the logo or adjust the site design. They must complement each other.&nbsp;<\/li><li>Use the correct logo size. It needs to be noticeable, but not so big that it takes up too much space. People pay attention to the upper left corner the most, so even if it\u2019s a moderate size it will be noticeable.<\/li><li>Keep your navigation tidy, and don\u2019t overwhelm it with too many menu options. If you need a lot of different navigation options, try incorporating dropdowns to arrange them better.&nbsp;<\/li><li>Use 15-18px for the font size of your navigation menu. Your text should be readable, so make sure it\u2019s a color that doesn\u2019t disappear into the header color. As a nice touch, add a hover color that contrasts well with the background. You can use your accent color for this.&nbsp;<\/li><li>Always check that your Header shows up appropriately on different screen sizes, such as mobile.&nbsp;<\/li><\/ol>\n\n\n\n<p>As a bonus, if your theme allows you to, using a transparent background over your header image makes it very stylish and professional. Themes such as Astra, Kadence, and Blocksy have this feature. You can see it applied in the example below:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"17c1c2735a1fa330a38327fa4c61e7d3\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desing-transparent-header.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desing-transparent-header-500x238.png\" alt=\"\" class=\"wp-image-2042825\"\/><\/a><div class=\"tb-image-caption\"><figcaption>An example of a website with a transparent header<\/figcaption><\/div><\/figure>\n<\/div>\n\n\n<p>Sometimes you might need to set up a different version of your logo for your Header because the colors on other pages differ from your home page color. In this case, you can change the logo in the Customizer. This functionality depends on your theme, so make sure to check your theme documentation.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-toolset-blocks-grid tb-grid\" data-toolset-blocks-grid=\"3d9c399fe625e1b972f817a0680229f6\">\n<div class=\"wp-block-toolset-blocks-grid-column tb-grid-column tb-grid-align-top\" data-toolset-blocks-grid-column=\"3034fbe886c11054e95b46b09d3e4112\">\n<p><strong>The usual page header uses a dark logo (Astra Theme)<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"0551c4d5a3fde68ac1af58cd0e39aa75\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desing-header-dark-logo.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desing-header-dark-logo-500x238.png\" alt=\"\" class=\"wp-image-2042835\"\/><\/a><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-toolset-blocks-grid-column tb-grid-column tb-grid-align-top\" data-toolset-blocks-grid-column=\"3034fbe886c11054e95b46b09d3e4112\">\n<p><strong>The transparent header for the homepage uses a white version of the logo (Astra Theme)<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"2ddf317b8b8432814209651d85452c3b\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desing-header-white-logo.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desing-header-white-logo-500x250.png\" alt=\"\" class=\"wp-image-2042845\"\/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Designing the footer<\/h2>\n\n\n\n<p>The footer, found at the bottom of every site, is important for helping users navigate a website. It is the safety net for those who were not able to find the info they needed from navigating the site.&nbsp;<\/p>\n\n\n\n<p>The footer usually includes:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Terms of Use<\/li><li>Refund Policy or Privacy Policy<\/li><li>Copyright Information<\/li><li>Contact information (if there is none in the header)<\/li><li>Company logo<\/li><li>Icons with links to relevant social network pages<\/li><li>Search widget<\/li><li>Language switcher<\/li><li>Additional links<\/li><\/ul>\n\n\n\n<p>To control what goes in the footer, use the <strong>Footer<\/strong> tab or <strong>Footer Bar<\/strong> tab in the Customizer. Sometimes, themes have different names for this tab so check your theme documentation to find it.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Styling the footer<\/h3>\n\n\n\n<p>It\u2019s important you keep your footer design as simple as possible. When styling the footer, you should follow these guidelines:<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>Use the same font size for all texts, preferably around 12-16 for best readability<\/li><li>Control the text hierarchy and readability of your content by using Typography styling correctly.<\/li><li>Avoid using a lot of images, icons, or long paragraphs of text in the footer.<\/li><\/ol>\n\n\n\n<div class=\"wp-block-toolset-blocks-grid tb-grid\" data-toolset-blocks-grid=\"3d9c399fe625e1b972f817a0680229f6\">\n<div class=\"wp-block-toolset-blocks-grid-column tb-grid-column tb-grid-align-top\" data-toolset-blocks-grid-column=\"3034fbe886c11054e95b46b09d3e4112\">\n<p><strong>A website footer with no styling<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"b9a5e550ce59b5e24e2d54f666eecf68\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desig-footer-no-styling.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desig-footer-no-styling-500x110.png\" alt=\"\" class=\"wp-image-2042857\"\/><\/a><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-toolset-blocks-grid-column tb-grid-column tb-grid-align-top\" data-toolset-blocks-grid-column=\"3034fbe886c11054e95b46b09d3e4112\">\n<p><strong>A website footer with styling applied<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\" tb-image tb-image-dynamic aligncenter\" data-toolset-blocks-image=\"5446e458ae007a62dd059b190c486e42\"><a href=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desig-footer-with-styling.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/toolset.com\/wp-content\/uploads\/2021\/05\/toolset-desig-footer-with-styling-500x114.png\" alt=\"\" class=\"wp-image-2042867\"\/><\/a><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p>Feel free to use a dark or light background color for your footer, but make sure the text is still readable over it.&nbsp;<\/p>\n","protected":false},"author":84277,"featured_media":2037985,"template":"","related-lesson":[8417],"class_list":["post-2037861","course-lesson","type-course-lesson","status-publish","has-post-thumbnail","hentry","related-lesson-designing"],"_links":{"self":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/2037861","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson"}],"about":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/types\/course-lesson"}],"author":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/users\/84277"}],"version-history":[{"count":7,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/2037861\/revisions"}],"predecessor-version":[{"id":2050685,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/course-lesson\/2037861\/revisions\/2050685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media\/2037985"}],"wp:attachment":[{"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/media?parent=2037861"}],"wp:term":[{"taxonomy":"related-lesson","embeddable":true,"href":"https:\/\/toolset.com\/fr\/wp-json\/wp\/v2\/related-lesson?post=2037861"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}