Content
- Advent
- Putting In
- Insert Header Customizer In Your Topic
- Fonts
- Normal Settings
- Top Header
- Heart (Major) Header
- Backside Header
- Emblem Space
- Main Menu
- Submenus
- Breadcrumbs
- Page Title
- Searchbox
- Responsive Header
- Sticky Header
- Social Menu Icons
- Uninstall
- Beef Up
Advent
Header Customizer is a WordPress plugin advanced through vmux which allows you to create your header by way of live previewing it on the related time. Handiest when you are happy with your settings, you'll retailer and submit it thoroughly. This Documentation is meant to assist you configure and get the most of your Header Customizer.
Header Customizer is a top rate WordPress plugin which is able to replace your WordPress header completely, is responsive and in addition has a sticky feature. It allows you to have as much as 4 layers of navigation on your header.
It’s purpose is to make your website online extra helpful, user pleasant and to enhance the general glance and feel, even on telephones and pills.
you can regulate your header visually the usage of WordPress Customizer API, which enables you to make adjustments to the header whilst looking at your site on the comparable time.
you may also need to take a look at my FREE plugin, the Lite model of the Header Customizer.
Putting In Header Customizer
This plugin requires minimum WordPress version 3.4.
you can install Header Customizer via FTP (or copy it by means of another tactics) within the following way:
- Download the plugin from and extract the contents
- Reproduction the awesome-header folder to the /wp-content/plugins/ listing
- Turn On the plugin during the Plugins web page in WordPress dashboard
- Placed following code inside of your content material:
<?php echo apply_filters('hc_print_header', ''); ?>
- Most of the time it will be on your header.php report, right after opening <frame> tag
Subsequent, using WordPress Customization you'll start customizing! Merely inside admin space go to Appearance -> Customize. There make a choice Header Customizer pane to use this plugin’s options. I prepared you nice gif so you don’t really feel puzzled:
Insert Header Into Your Subject Matter
Simply insert following code proper underneath <body> tag:
<?php echo apply_filters('hc_print_header', ''); ?>And that may be it. You’ll have the option to look changes even as editing your header through Header Customizer!
How Can I modification fonts?
you can amendment fonts for the whole header, or explicit portions of the header, i.e. for brand, site description, menus, breadcrumbs, search field, web page identify. Take a look at this presentation beneath for logo font family how easy it's:
for those who need more font households, simply touch me right here via e mail and that i’ll add them ASAP! But remember that, this plugin only helps Google Fonts for now.
Common Settings
Header Customizer can exchange your subject matter’s header and it could appear once a person scrolls down and your subject matter’s header disappears from sight (sticky possibility).
This panel incorporates following settings:
- Header width – width of the header content material
- Stretch header width? – should header wrapper stretch the whole width of a browser?
- Header left place – in case your header is sticky, you should use this feature in case you don’t need header to be horizontally at the center
- Margin top
- Margin bottom
- Margin left
- Margin proper
- Google Font – select font for the header; there are extra explicit choices for fonts (e.g. only for emblem area) but that is for the whole header immediately
- Custom CSS – you can type any CSS here; make sure to begin your CSS definitions with ”.hc-wrap so that you don’t mess with different site’s CSS definitions
Here you can see a few playing around within Normal Settings (click this symbol to see it fully enlarged):
Middle Header
Middle Header is element of Header Customizer which includes brand house (logo & description) and primary menu (with submenus). you'll be able to customise following:
- Header kind – how are your brand and menus placed; by means of default brand is going at the left facet, while primary menu is going to the suitable side of the header; you'll set them each centrally aligned, or move menu to the left subsequent to the logo
- Heritage colour – heritage color of center header, cast colour with transparency set optionally via color picker
- Heritage image – history image of middle header (overrides background colour)
- Background symbol repeat – background image of middle header (overrides heritage color)
- Heritage image attachment – the heritage-attachment belongings sets whether a background symbol is fastened or scrolls with the remaining of the page; it’s nice to set parallax impact for instance if set to “fixed”
- Background image place – the history-position belongings sets the starting position of a background symbol
- History image measurement – the historical past-measurement assets specifies the scale of the heritage images
- Padding (top/bottom) – padding of heart header so you'll be able to fit vertically your menu or brand well
- Padding (left/right) – padding of heart header so you'll be able to set the gap of inner content material from left or proper facet of the reveal
- Border most sensible (and bottom, left, proper) color – now not visual until border width is ready to no less than 1 (one) pixel (px)
- Border most sensible (and bottom, left, right) width – width of the border
- Best left (and backside left, best right, backside right) radius – border radius of the middle header
Here you can see a few being silly with backgrounds inside Center Header (click on pictures to peer them absolutely enlarged):
Right Here you'll see some being silly border radius of the center Header so it appears to be like rounded>
Most Sensible Header
Top Header is every other important portion of Header Customizer. It contains (comparable as bottom header) left and proper aspect, which works centrally aligned when responsive mode is became on (when your reveal measurement is small, i.e. dimension set in Responsive Header panel). you'll be able to make a choice for all sides to have either: another menu, breadcrumbs, present web page title or seek field. Following are settings that you'll modify:
- Enabled? – is the highest Header enabled in any respect? (checkbox)
- Left menu facet kind – make a choice from menu, breadcrumbs, current page name or search box for the left facet of Best Header
- Right menu side sort – choose between menu, breadcrumbs, present page title or seek box for the fitting facet of Most Sensible Header
- Background color – related here as for Center Header
- Background symbol – related here as for Center Header
- Historical Past symbol repeat – related here as for Center Header
- Background symbol attachment – same right here as for Center Header
- Heritage symbol position – similar right here as for Heart Header
- Heritage image size – same here as for Center Header
- Google font family – select font circle of relatives only for this (best) header; you can also touch me if you wish to have extra fonts brought
- Font dimension – make a selection font measurement only for this (top) header
- Border most sensible (and bottom, left, proper) color – related here as for Heart Header
- Border most sensible (and bottom, left, proper) width – similar here as for Heart Header
- Padding (most sensible/bottom) – same right here as for Heart Header
- Padding (left/right) – comparable here as for Middle Header
- Link margin (left/proper) – margins between hyperlinks (as an example menu items)
- Link padding – paddings (top, backside, left, proper) of all hyperlinks
- Menu item padding (left/proper) – left and right paddings of menu pieces simplest (if menu is ready to at least one of left or proper aspects); acceptable to LI (list) tags of menu
- Menu merchandise padding (most sensible/bottom) – best and bottom paddings of menu pieces handiest (related applies right here)
- Hyperlink colour (and hover colour, historical past color, hover heritage colour) – colors of hyperlinks
- Text colour – color of texts (“non-links”, i.e. breadcrumb’s ultimate piece or web page title)
- Link border color – all four (most sensible, bottom, left, right) borders colour; now not visual until border width is set to at least 1 (one) px (pixel)
- Hyperlink border width – all 4 (most sensible, bottom, left, right) borders width for hyperlinks
- Link border radius – all four (best, bottom, left, proper) borders radius for hyperlinks
- Most Sensible left (and backside left, most sensible right, backside right) radius – same right here as for Middle Header
Backside Header
Backside Header is another essential portion of Header Customizer. It incorporates (related as backside header) left and proper side, which matches centrally aligned while responsive mode is became on (when your monitor dimension is small, i.e. dimension set in Responsive Header panel). you'll be able to make a selection for each side to have either: any other menu, breadcrumbs, present page name or search field. Following are settings that you'll alter:
- Enabled? – is the ground Header enabled at all? (checkbox)
- Left menu side sort – similar right here as for prime Header
- Right menu aspect sort – comparable right here as for Bottom Header
- Historical Past colour – similar right here as for Heart Header
- Heritage symbol – same right here as for Center Header
- Heritage symbol repeat – related here as for Heart Header
- Background image attachment – same right here as for Center Header
- History symbol position – same here as for Center Header
- Heritage image size – comparable right here as for Middle Header
- Google font family – same here as for prime Header
- Font dimension – comparable here as for high Header
- Border most sensible (and bottom, left, proper) color – related right here as for Heart Header
- Border top (and bottom, left, right) width – comparable here as for Middle Header
- Padding (top/bottom) – similar right here as for Center Header (exists handiest if you happen to’re these days no longer on entrance page)
- Padding (best/bottom) on entrance web page – this is same as above except for it’s best while you’re on house web page! while you’re on web page instead of house or front (relies on your WordPress settings) then this option gained’t exist
- Padding (left/proper) – related here as for Heart Header
- Textual Content colour – comparable right here as for high Header
- Hyperlink color (and hover colour) – comparable here as for top Header
- Margins for menu pieces (left/right) – if menu is chosen to be on left or proper side, this may increasingly be their left and right margins
- Top left (and backside left, most sensible proper, backside proper) radius – same right here as for Middle Header
Brand Space
Emblem house is a component of your header which incorporates brand (as text or symbol hyperlink) and site description. Following are the settings you can modify:
- Logo image – symbol as your logo
- Emblem sort – set type of your logo: hyperlink symbol or link textual content
- Logo text – site identify via default
- Most width – it’s helpful to not stretch while header goes responsive
- Padding (top/bottom) – best and bottom paddings; play around to set it vertically well against major menu
- Google font circle of relatives – for textual brand simplest
- Google font circle of relatives for description – for description only
- Show brand area? – sure or no (checkbox); if you need to take away logo space utterly
- Show emblem? – yes or no (checkbox); if you need to take away logo simplest
- Display brand description? – yes or no (checkbox); if you want to take away description (tagline) most effective
- Web Site title color (and hover color) – in case your brand is textual, set it’s colour right here
- Web Site description color – color of logo description (tagline)
- Web Site identify font size – font size for textual logo
- Web Page description font dimension – font size for description (tagline)
Main Menu
Main menu is part of header which is positioned inside of Middle Header alongside with brand space. It’s submenus are placed within Primary Submenus phase. Following are the settings you can alter:
- Hyperlink colour (and hover color, lively colour) – those options are just for link (<a> tags) colours; energetic colour is colour of a link whilst on present page
- Font dimension – font measurement of menu pieces
- Google font family – font family of menu pieces
- Display submenu arrows? – checkbox; show arrow pointing down for menu pieces which have submenus
- Menu margin left (and right) – margin left and proper of the entire menu (not menu items!)
- Hyperlink background colour (and hover and lively heritage colors) – just for hyperlinks
- Hyperlink border radius – only for links, so that they may also be “rounded”
- Menu merchandise heritage colors (and hover, lively history colours) – for listing pieces (<li> tags!)
- Menu pieces padding (most sensible/backside) – list tag paddings, so you can align with brand space well
- Menu pieces padding (left/proper)
- Menu items margin (most sensible/bottom)
- Menu items margin (left/proper)
- Menu hyperlinks padding (best/bottom) – for links (<a> tags)
- Menu links padding (left/proper) – same
- Menu item border top (and bottom, left, proper) colour – border colours for listing items
- Menu item border top (and bottom, left, proper) width – border width
- Menu merchandise top-left (and top-proper, backside-left, bottom-right) radius – every of those choices have risk to exclude all different items except for first or final thing, so the whole menu seems to be “rounded” (take a glance at the gif instance below!)
To setup primary menu, first you wish to have to set any menu you've gotten stored earlier than to be placed to “HC Primary Menu” region. Take a look on the following example:
Here’s how you'll adjust link colors for instance:
Major Submenus
Submenus appear on hover or click major menu pieces. There are up to four ranges of submenus to make a choice how deep submenus will cross. Many more options are here, so permit’s list them under:
- Submenus intensity – like mentioned prior to now, you'll choose how many levels of submenus you’ve were given
- Show submenu on mouse hover? – whether or not to click or hover main menu items or submenu pieces so as to show submenus; responsive header will always react on tap (click on)
- History colour – historical past color of all submenus
- Min. width – minimal width that your submenus take; via default it’s set to car
- Font dimension – font size of all submenu pieces
- Border colour – border color of all 4 facets of one submenu column: most sensible, bottom, left, proper
- Border most sensible (and bottom, left, right) width – four separate choices for borders’ width
- Menu items border top (and bottom) colour – border colour of submenu hyperlinks (except for first one, or closing one if it’s bottom color)
- Menu pieces border best (and bottom) width – border width of submenu hyperlinks (apart from first one, or closing one if it’s bottom width)
- Shadow – shadow set using CSS property box-shadow; it’s set in textual content field using complete definition, e.g. 2px 2px 2px 2px rgba(EIGHTY FIVE, 85, 85, 0.8) and whilst you make adjustments to any of the values you'll see them are living as you sort
Breadcrumbs
Breadcrumbs are great for making improvements to your web site’s visibility on Search Engines and SEARCH ENGINE OPTIMISATION. Header Customizer’s breadcrumbs put in force data-vocabulary.org definition.
- Font size – font dimension of breadcrumbs only
- Google font family – font family for breadcrumbs simplest
- Display home page hyperlink? – whether breadcrumbs display link to home page; via default it does
- Separator text – separator persona(s) which sit in between page hyperlinks
- Separator color – color of separator textual content
- Separator margins (left/right) – separator margins
Note: Breadcrumbs are placed in Top or Backside header, but first you want to turn on any of them and position Breadcrumbs as left or right aspect menu, like so:
Web Page Identify
Web Page identify could be very appropriate to be put on bottom a part of the header. It displays page title of the present web page. you'll be able to modify the following:
- Color – colour of web page identify
- Display on home page? – whether or not to turn title for home page
- Margin best/bottom
- Font dimension – font dimension of page name handiest
- Font family – font family of web page title best
Notice: To have page identify you must select it as left or proper facet menu in Best or Bottom headers.
Seek Field
Seek box have to be critical a part of your header if you would love to have it there in place of, for instance, on sidebar. you'll be able to modification many settings right here:
- Colour – text color handiest; colour of typed text (not placeholder)
- Width – elementary width of the field
- Font dimension – font size of seek textual content
- Font circle of relatives – font family of seek text
- History color – historical past colour of the box
- Placeholder – placeholder of enter box
- Border colour – border colour of the box
- Border width – border width of the field
- Padding best/bottom (and left/right) – paddings of enter field
- Margin most sensible (and bottom, left, proper – margins of the field
- Border radius best-left (and most sensible-proper, backside-left, backside-proper) – border radius of the hunt box
Be Aware: To have search box you must make a selection it as left or right aspect menu in Top or Bottom headers.
Responsive Header
Responsive header appears whilst your screen size (which you'll additionally set) is sufficiently small in your header so it transforms making it appealing for your phone or tablet. you'll set following choices:
- Responsive Width – width which defines breaking point between personal computer and responsive header; whilst you load your website online on screen sizes below this aspect your header will glance “minified”
- Hamburger Colour – “hamburger” icon seems as opposed to your major menu, which you'll be able to click to show the menu on small screens however this time the menu pieces are ordered under each other
Sticky Header
And Finally, the sticky header. As such a lot folks are already accustomed to this time period, it signifies that your header “sticks” on most sensible of your site even when you start scrolling down the content material. Sticky header very much improves bounce rate of your visitors. you'll be able to flip it off and on via merely check/uncheck the checkbox. For now you are introduced with following settings:
- Is sticky header enabled? – as discussed above, you can simply enable/disable sticky header with this checkbox
- Offset – in pixels, this is the gap how long you scroll until the header sticks to the top; it may possibly also be set to 0 so your header turns into sticky right away
- Padding top/bottom for prime Header – paddings just for Best Header; that is very useful so you'll be able to for instance make header smaller in peak while it turns into sticky (with great transition effect)
- Padding top/backside for Heart Header – related as element above however for Center Header
- Padding best/bottom for Backside Header – similar as aspect above but for Backside Header
- Display Most Sensible Header? – you can hide (or now not) Most Sensible Header totally whilst the header becomes sticky
- Display Middle Header? – related as aspect above however for Heart Header
- Display Backside Header? – same as aspect above but for Bottom Header
Social Menu Icons
On any of your menus you'll be able to upload social media icon. what number of icons are there you'll be able to see on this page. First you want to permit CSS categories to your menu items. in the event you don’t have it enabled listed here are the steps:
- In admin area visit Appearance -> Menus. There take a look at CSS Classes beneath “Screen Options”:
- Then upload magnificence for any of your menu pieces like proven here:
Again, what categories you'll be able to upload here is displayed in this page.
- This additionally can be performed in Customizer on exactly the same region as you edit your Header Customizer, handiest in “Menus” section:
there may be no distinction how will you upload those categories, what’s vital is that you simply permit CSS Categories field first beneath Screen Choices.
here is the way it all looks like in motion:
Uninstalling
you'll find uninstall (delete) choice after you deactivate the plugin from the Plugins page. Keep in mind that while you delete Header Customizer you're going to additionally delete all of its colour, menu and every other settings. when you best deactivate the plugin, its settings will remain and will no longer need to be entered once more if plugin is re-activated.
Strengthen
For improve requests please use my reinforce page. should you just like the plugin, please take the time to charge it. It manner so much to me.
Changelog
- 1.3.2 Upload plain text choice, like telephone number and such
- 1.3.1 Introduced social menu icons (take a glance on learn how to upload them); small fixes for submenus
- 1.2.0 Extra choices for search field, like search icon, amplify on click on, and the like.
Plugin created via Marko Jakic
Images by way of Dan Cozmuta
FULL DOWNLOAD
No comments:
Post a Comment