Weebly does not offer the feature to display phone number, social icons and search box in the website’s header area. Most of the Weebly themes do not support this option either.
Displaying social icons is definitely a good idea for better user experience. The thing is it’s only can be added within Weebly interface when you have a paid subscription. Here, we’re going to explain how to add it anyway even for free users.
Though search box is only applicable for pro users. When you choose any of the new themes and navigate to “Theme” section in the top of your Weebly Site Editor you will not see an option to enable or disable these elements in the header.
Though there are some other alternatives such as adding custom elements like Google custom search box etc, it’s actually quite easy and fast to display default Weebly header elements by modifying source HTML/CSS.
Add Phone Text, Social Icons & Search Box in Weebly Header
Enabling the Options under Theme Tab
1 – Under “Theme” section, hit the “Edit HTML/CSS” option and choose the preferred page layout you want to add header elements to. For instance, we are modifying the “no-header.html” page.
2 – Identify the code for displaying logo, it will look something like this:
3 – Add the following code above the logo code:
4- Save the changes and check under “Theme” section where you can see the search box, social icons and phone number fields are enabled. Make sure to disable search box option if you are not a Weebly pro user.
Modifying CSS
By adding the above code in source HTML, it’s sufficient to enable default header elements in Weebly. To customize what you just enabled, you then should add the following code for phone number field and search box in your “main-style.css”.
Header Elements Style
Header Phone Number Style
Header Search Box Style
Adding Social Links and Phone Text
- Hover over the mouse on social icons to see the drop-down and enter your social URLs in the text boxes.
- Phone number field is available left side of the social icons. Click there and add a phone number or text like “Like Us”.
Publish your website and you’re all set. :)
Suggested Reads:
If you liked this tutorial on adding phone text, social icons & search box in Weebly header, then you may consider subscribing to our WeeblyTutorials YouTube Channel for Weebly video tutorials. You can also find us on Twitter and Facebook.
How can I adjust the social media and text area to the right side of the header, stuck on the left with the logo?