{"id":631,"date":"2020-06-03T18:51:56","date_gmt":"2020-06-03T18:51:56","guid":{"rendered":"https:\/\/directorist.com\/documentation\/?post_type=wpwax_direo&p=631"},"modified":"2020-06-04T00:03:18","modified_gmt":"2020-06-04T00:03:18","slug":"header-customization","status":"publish","type":"wpwax_direo","link":"https:\/\/directorist.com\/documentation\/direo\/customization\/header-customization\/","title":{"rendered":"Header Customization"},"content":{"rendered":"

Direo lets you customize your site header area from the\u00a0WordPress Dashboard \u2192 Appearance \u2192 Customize <\/strong>option.<\/strong><\/p>\n

Menu Area<\/strong><\/p>\n

There are three types of Menu Style<\/strong> available for Single Post<\/strong> and Single Listing<\/strong> in the Direo theme. To set a global style for all the Single Post or Single Listing, navigate to WordPress Dashboard \u2192 Appearance \u2192 Customize \u2192 Header Options \u2192 Menu Area<\/strong><\/p>\n

<\/p>\n

Default\/Transparent:<\/strong> The default style can also be coined as a transparent style. Default or Transparent style blends in the header image with the menu area. For better clarification refer to the GIF below.<\/p>\n

Light Background: <\/strong>Selecting Light Background will set the menu background to white color.<\/p>\n

Dark: <\/strong>Selecting Dark Background will set the menu background to Black color.<\/p>\n

<\/p>\n

Menu Area For A Specific Post Or Listing<\/strong><\/p>\n

Following the section above will guide you to set the menu background for all the Single Posts and Single Listings. Our theme also allows you to change the menu style for a specific post or listing. To do that, edit the specific listing or post and on the right sidebar you will notice “Header Options”; select your preferred style.<\/p>\n

<\/p>\n

 <\/p>\n

Header Background Image<\/strong><\/p>\n

You can set the Header Background image for all the single posts and listings globally. To do so, navigate to WordPress Dashboard \u2192 Appearance \u2192 Customize \u2192 Header Options \u2192 Header Background Image <\/strong>and upload an image.<\/p>\n

<\/p>\n

 <\/p>\n

Image Opacity<\/strong> will add a dark overlay on the image and if you prefer color over a header image then you can set the header background color<\/strong> as well.<\/p>\n

Header Background Image For A Specific Post, Listing, or Page<\/strong><\/p>\n

You have the privilege to add a different header image for a specific post or a single listing. When you add a new listing, adding a preview image will automatically set the header image.<\/p>\n

Furthermore, if you want to have a different header image for a specific page, for example, say you would like to have a different header image for the “Single Category” page only. Simply, edit the page and add a featured image. The featured image is basically the header image.<\/p>\n

<\/p>\n

 <\/p>\n

Adding a logo<\/strong><\/p>\n

To set a logo, navigate to WordPress Dashboard \u2192 Appearance \u2192 Customize \u2192 Site Identity.\u00a0<\/strong><\/p>\n

<\/p>\n

You will notice there are two options to upload the logo, the former sets the logo globally and the latter for the light background. So, if you have selected “Light Background” for menu styles, then adding a light-colored logo may produce visibility issues. You can upload a darker version of your logo here which will be visible in “Light Background” menu styles.<\/p>\n

Site Icon:<\/strong> Site Icon refers to the icon you see on the browser tab.\u00a0 You can set it in WordPress Dashboard \u2192 Appearance \u2192 Customize \u2192 Site Identity.\u00a0<\/strong><\/p>\n

<\/p>\n

 <\/p>\n

Add Listing Button<\/strong><\/p>\n

<\/p>\n

By default, clicking on the add listing button on the header area will allow users to add a listing. However, you have the freedom to change the action according to your need. To change the button action go to WordPress Dashboard \u2192 Appearance \u2192 Customize \u2192 Header Options \u2192<\/strong><\/p>\n

<\/p>\n

Add Listing Button Text:<\/strong> Change the text of the button here and name it as per your need.<\/p>\n

Add Listing Button Link:<\/strong> Add the URL you want the button to redirect to. Leaving it empty will set the default link which is the link to the “Add Listing” form.<\/p>\n

Adding Menu Items: <\/strong>Menu is a salient aspect of a site as it lets users navigate to different locations from the header. There are a couple of ways to add menu items.<\/p>\n

    \n
  1. Adding items from the WordPress Dashboard \u2192 Appearance \u2192 Customize \u2192 Menus:\u00a0<\/strong>The name of the menu for Header Menu Items is “Primary Menu”. You may add a new item, reorder, and delete existing menu items in this section.\n

    <\/li>\n

  2. Adding items from the WordPress Dashboard \u2192 Appearance \u2192 Menu<\/strong><\/li>\n<\/ol>\n

    <\/p>\n

     <\/p>\n

     <\/p>\n","protected":false},"author":2298,"parent":0,"menu_order":0,"template":"","class_list":["post-631","wpwax_direo","type-wpwax_direo","status-publish","hentry","wpwax_direo_category-customization"],"acf":[],"_links":{"self":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/wpwax_direo\/631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/wpwax_direo"}],"about":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/types\/wpwax_direo"}],"author":[{"embeddable":true,"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/users\/2298"}],"wp:attachment":[{"href":"https:\/\/directorist.com\/documentation\/wp-json\/wp\/v2\/media?parent=631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}