Header Customizer Lite
Customize your header using WordPress Customizer API! Now you can live preview your changes while editing header options.
The facts
- Active installs
- 100+
- Price
- Free
- Last updated
- 25 Mar 2016
- Added
- Mar 2016
- Requires WP
- 4.2.2
- Tested up to
- WP 4.4.34
- Downloads
- 14,837
Our analysis
AI-assistedHeader Customizer Lite is a WordPress plugin that allows you to modify your website's header with live previews. You can adjust various settings such as header width, background colours, and logo positioning while viewing changes in real-time.
This plugin is designed for users looking to enhance the appearance of their website's header without extensive coding knowledge. It is suitable for those who want to create a more user-friendly website and improve its overall look, especially on narrow screens.
Best for: This plugin suits website owners wanting to customise their header easily without coding.
What it does well
- ✓Live preview of header changes
- ✓Customisable header settings
- ✓Easy integration with WordPress Customizer API
Where it falls short
- •Limited features compared to the PRO version
- •No recent updates since March 2016
- •Not tested with versions beyond WordPress 4.4.34
Verdict
Header Customizer Lite provides a straightforward way to modify your website's header, but its lack of recent updates and limited features may be a concern for some users.
From the developer
Marko Jakic's own description of Header Customizer Lite, lightly tidied.
Header Customizer Lite is a WordPress plugin which enables you to modify your
header by live previewing it at the same time. Only after you are happy
with your settings, you can save and publish it safely. This
Documentation is intended to help you configure and get the most of your Header.
With this plugin you replace your header entirely with your own customizable header.
It’s purpose is to make your website more useful, user friendly and to
improve the general look and feel, even on narrow screens.
You can modify your header visually using WordPress Customizer
API,
which enables you to make changes to the header while looking at your
website at the same time.
Simply insert following code right below <body> tag:
<?php echo apply_filters('hc_print_header', ''); ?>
And that’s it. All you need to do is to activate your plugin and go to Appearance -> Customize -> Header Customizer Lite section, to start modifying your header.
You’ll be able to see changes while modifying your header through Header Customizer Lite!
If you want sticky header, more menus, breadcrumbs, search box, or simply much more settings, while live previewing them all, you may consider non-lite or PRO version WordPress Header Customizer.
General Settings
This panel contains following settings:
- Header width – width of the header content
- Stretch header width? – should header wrapper stretch the whole width of a browser?
- Header left position – if your header is sticky, you should use this option if you don’t want header to be horizontally on the center
- Margin top
- Margin bottom
- Margin left
- Margin right
- Google Font – choose font for the header; there are more specific options for fonts (e.g. only for logo area) but this is for the whole header at once
- Custom CSS – you can type any CSS here; make sure to start your CSS definitions with “.hc-wrap {” so you don’t mess with other website’s CSS definitions
Header
Middle Header is section of Header Customizer which contains logo area
(logo & description) and main menu (with submenus). You can customize
following:
- Header type – how are your logo and menus placed; by default logo goes on the left side, while main menu goes to the right side of the header; you can set them both centrally aligned, or move menu to the left next to the logo
- Background color – background color of middle header, solid color with transparency set optionally through color picker
- Background image – background image of middle header (overrides background color)
- Background image repeat – background image of middle header (overrides background color)
- Background image attachment – the background-attachment property sets whether a background image is fixed or scrolls with the rest of the page; it’s great to set parallax effect for example if set to “fixed”
- Background image position – the background-position property sets the starting position of a background image
- Background image size – the background-size property specifies the size of the background images
- Padding (top/bottom) – padding of middle header so you can fit vertically your menu or logo nicely
- Padding (left/right) – padding of middle header so you can set the distance of inner content from left or right side of the screen
- Border top (and bottom, left, right) color – not visible until border width is set to at least 1 (one) pixel (px)
- Border top (and bottom, left, right) width – width of the border
- Top left (and bottom left, top right, bottom right) radius – border radius of the middle header
Logo Area
Logo area is part of your header which contains logo (as text or image
link) and site description. Following are the settings you can modify: