Your Weebly site header area provides the first impression of a site to users. Hence it needs to be designed properly to attract and retain the users on your site. In order to cover various needs Weebly offers different elements on header area with customizing options. Weebly completely redesigned the header area with Weebly 4 introduced on October 2016. Let us check out how to customize Weebly header on both non-responsive and latest responsive themes.
How to Customize Page Header in Weebly – Non-responsive Themes?
Header area of the Weebly site consists of the following elements:
- Website Logo
- Phone Number
- Social Elements
- Search Box (available only for Weebly Pro users)
- Navigation Menu for horizontal layouts
- Header Image
Below picture explains each elements in a Weebly site header.
Weebly – Header Customization Options
Customizing Weebly Site Logo
Your site logo shall be an image or a simple text and you have an option to toggle between image and text at any point of time.
Weebly Logo Image
Weebly Logo Text
Logo can be uploaded and modified with Weebly’s image editor called as imageperfect. You can add caption, crop, rotate and other image processing options to your logo as shown in the below picture.
Weebly Logo Image Editor
Navigation Menu
Navigation menu is part of Weebly header for the horizontal layout themes. The grouping of pages in the navigation menu is controlled by settings tab and theme selection. A simple navigation menu will look like below:
Weebly Navigation Menu
Header Image Customization
Header image is controlled by the type of page layout selected. Header image is independent of the pages and you can any time change any of your page layout as well as your header image without affecting other pages in your site. The header image can be edited using Weebly image editor and Weebly Pro users in addition have an option to set a custom slideshow for a landing page.
Customize Weebly Header Image
Social Elements, Phone Number and Search Box
Design tab in the Weebly editor offers three header options in addition to various other customizing options as shown in the picture beside.
- Search Box for Pro users
- Social Icons
- Phone number
You can enable or disable each option independently in your site header. Phone number field can also be used to enter any other text like “Follow Us”.
Weebly Design Tab Options
Each social element can be customized with your URL links and can be added or deleted from the list. The elements can also be sorted by just moving up or down. Social icons are also available as a separate element in addition to the site header option.
Weebly - Social Icons, Phone number and Search Box
Customize Weebly Header on Latest Responsive Themes
The new Weebly responsive themes give lot of room to add different types of header layouts. You can simply choose from one the existing layout to make your site beautiful.
Weebly Header Layout in Responsive Themes
- It is possible to drag and drop elements on header area to add multiple buttons, social icons, newsletter or any other element you want.
- Drag and resize the head image size dynamically.
- Premium users above Pro plan can add cool video backgrounds to the header area.
- Edit the background image or change the complete layout easily.
- Add parallax scrolling effect for header image background.
In addition, you can customize logo, navigation and search boxes similar to non-responsive header area.
15 Comments
Leave your reply.