When your website is built or generated with AI using the 10Web Builder, it comes with a pre-installed Builder Theme. This theme includes a header placeholder with the 10Web logo, which appears when no custom header template is applied to the page.
If your site is generated using AI, a header template is created and applied automatically. However, if you are building your website from scratch or have deleted the AI-generated header, you'll see the placeholder header. This article will guide you on how to replace it with your custom header.
Creating a header
The first step is to create a new header template. Follow these steps:
- Navigate to your site’s WP Admin dashboard > Templates > 10Web templates > Header.
- Select Add New Template and choose Header.
- Name your template and click Create Template.
You now have a header template ready for your edits.
Building a header for your site
Next, you can start crafting your header. The design and layout depend on your vision and goals for your website’s visual appearance. Here are key widgets commonly used for building a page header:
- Container: The foundation of your header. Use a Boxed width for this tutorial, but you can change it to Full width if needed.
- Site Logo Widget: Dynamically displays your logo and allows you to adjust its size, position, and other design elements.
- Nav Menu Widget: Utilizes the menus you've already created on your WordPress website. Customize your menus and choose various layouts and styles to match your site’s design.
- Search Form Widget: Adds a search bar to your website, enhancing navigation and user experience.
- Social Icons Widget: Links your social media profiles to your website easily.
- Menu Cart Widget: Essential for eCommerce sites using WooCommerce, allowing visitors quick access to their cart.
You can use any widget that fits your header design. After designing your header for desktop, you may also want to adjust its appearance for tablet and mobile views. Refer to this article for more details on implementing responsive design with 10Web Builder.
Saving and applying the header with conditions
After finalizing your header, click Save & Publish. After saving your header, you can set conditions to determine where your header will be used—either across your entire site or on specific pages. This way, you can even have different headers on different pages, such as one header for the entire website and another specifically for the homepage.
To edit the conditions:
- Go to WP Admin dashboard > Templates and click the conditions button next to the template. Each condition allows you to include or exclude pages.
- For example, if you have a header template with the condition "Include: Entire site", you can add another condition "Exclude: Front page".
Note:
If you do not want any items on the header of your website, you can simply leave the template empty and apply the condition.
By following these steps, you can easily create and apply a custom header to your 10Web website, replacing the default placeholder. Customizing your header enhances your site's appearance and improves user experience. Don't hesitate to experiment with different widgets and designs to create a header that perfectly aligns with your website's vision. Happy building!