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.
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.
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.
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.
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:
Header Image Customization
The type of page layout you select will decide whether a page has a header image or not. 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.
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”.
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.
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.
- 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 Professional 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. Responsive themes also offer Section element which helps to add layouts and customize as you need in the content area.
I’m using the modus operandi theme and can’t enable the search bar in my header. Anyone know how?
Seems Weebly is removing the search box from the header from most of the themes. You can only use element in that case or modify the source code. Check out may be this option works https://www.webnots.com/enable-phone-text-social-icons-and-search-box-in-weebly-header/
I deleted 2 pages from my site. They don’t show up in the editor but no matter how many times I publish the site, they’re still there? How do I delete them permanently if I can no longer see them in the editor? I’ve tried moving other pages around them which pushes them around but they won’t go away. Any ideas?????
We have embedded code on our home page that allows users to add their name directly to our MailChimp mailing list. It would be great if we could place that code in our header so that it would appear at the top of every page. Is there a way to do that?
You can add the code under “Design > Edit HTML / CSS > Header Type > Choose your page layout”. If you want the code to appear on all pages probably you need to paste the code in all type of page layouts.
Thanks. We are a nonprofit using Weebly through FatCow and they charge a monthly premium to access that feature. I was hoping there was a way to do it where we wouldn’t have to pay every month for that one change.
In that case try to add under “Pages > Select the Page > Advanced Settings > Header Code”. This should work at page level and you need to do this on each page.
I unintentionally deleted the text from the ‘Phone number’ field and now I do not see a way to re-enter the text I want. What am I missing? Thanks.
Did you get this figured out?
My phone text field just disappeared and choosing other designs/templates has not brought it back.
Did you check this article on enabling phone text back?
If still not working then try to change the theme or create a dummy site and try with the code. When we checked it works fine with “Add text” filed appears when the phone number option is enabled.
Yes. The option is enabled and toggle available. When phone is toggled to on, there is no ‘add text’ field.
The social icons are working fine.
Your site has been very helpful, but I do have a question for you. My theme does not have the social, phone, or search options on the Design Options tab. Is there a way to add these elements to the header? Thanks!
All Weebly themes should have these features, tell us your URL we can check the theme (though search box is only for pro users). Otherwise you can add Google search box code, social widget code and phone text in the page’s source HTML directly. You may need to adjust these elements to fit in your header.
Thanks for the response. The URL is krlgroupfl.com
Check out this article on how to enable Weebly header elements back. Hope this is is useful.