The HTML Component - Neve Header / Footer Builder
📝Note: This component is part of the Neve Header / Footer Builder.
The HTML component is a very important tool of the Header / Footer Builder, having a lot of utilities due to the Dynamic Tags.
🧰Using the Component
- 1
- Start by adding the component into the rows, by clicking on the ➕ button and selecting the component.
- 2
- Open the component's settings to customize it, by clicking on the ⚙️icon.
📝 Note: This component is available in three instances for the header and three instances for the footer.
🔮Customizing the Component
There are three panels with customizing options for this component, which allow you to create the desired header / footer:
| General |
Layout |
Style |
⚙️General Panel
When you click on the ⚙️ icon, the General tab will appear on the left side. From there you can add any widget from the library, by clicking on the ➕ button.
The component allows you to add custom HTML to the Header.
Dynamic Tags are another way of adding content to the HTML component. Dynamic Tags draw content from the website, or from the current page/post, changing dynamically according to the Page or Post it’s on. To get access to the Dynamic Tags click on the three dots shaped like a triangle.
📐Layout Panel
In the Layout tab, you also have access to advanced positioning options like:
- Alignment - left / center / right, inside the header builder available space for the Menu Icon component.
- Padding - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions ( Desktop | Tablet | Mobile ).
- Margin - available in PX, EM, and %, with a link button that helps with establishing the same dimension for all the directions ( Desktop | Tablet | Mobile ).
🖌 Style Panel
In this area, you will find options for customization for the HTML area.
- setting colors for Text - with the option to choose one of the global colors ( theme's default colors ), by clicking on the 🌐 button. The typography subpanel found in the Style tab offers the following options:
- Transform - None / Capitalise / Lowercase / Uppercase
- Weight - None / 100 to 900
- Font Size, Line Height (in PX / EM), Letter Spacing ( in PX) - along with a reset button ( Desktop | Tablet | Mobile ).
📝 Note: The Text Color option does not apply to links in the HTML component. To change the color of the links go to Appearance > Customize > Colors & Backgrounds > Links.
🗂Useful Resources
Want to add social icons in the header? Check out how you can do it using the HTML component.