Guide on Inserting Dual Text Lines in WordPress Header
Want to add a unique, two-line header to your WordPress site? Here's a straightforward guide to help you achieve that goal.
Best practices for designing two-line headers include keeping it simple, choosing the right fonts, and ensuring mobile responsiveness. To create a visually appealing and customised header, consider using a page builder plugin like Elementor, Beaver Builder, or Divi. These tools allow you to design complex headers with multiple lines of text, images, buttons, and other elements, all without writing any code.
For those who want more control over the design or if their theme doesn't support multiple lines in the header, using custom CSS is an option. Here's how to do it:
- Add the two lines of text in your header HTML
First, ensure your header's HTML structure contains the two lines. For example:
```html
```
Or alternatively:
```html
First line of text
Second line of text
```
- Add custom CSS to style the two lines
Go to Appearance » Customize » Additional CSS in WordPress admin, then add CSS like:
```css .custom-header-text span { display: block; line-height: 1.4em; }
/ OR if you use paragraphs / .custom-header-text p { margin: 0; padding: 0; line-height: 1.4em; } ```
- Adjust spacing or styling as needed
To create more space between lines, you can add or to the first line element. For example:
If you cannot edit the header template directly, you can add the two lines by injecting HTML into the header via a plugin (like Header, Footer and Post Injections), or your theme’s built-in header text option.
Important: CSS alone cannot add new lines of text; it only styles existing content. To have two lines, you must have two blocks of text or a line break () in the header markup first. CSS can then manage line breaks, spacing, and display styles.
In summary, add the two lines of text in the header’s HTML or via a plugin, then use CSS like the above to ensure they appear as two distinct lines in your WordPress header.
For those who prefer a more user-friendly approach, using WordPress Customizer, it is possible to add two lines of text in the header without any coding knowledge.
- To design a visually appealing two-line header using technology, consider using a page builder plugin that offers code-free customization, such as Elementor, Beaver Builder, or Divi.
- For those who want more control over the design or if their theme doesn't support multiple lines in the header, they can use custom CSS to style the two lines, but ensure the header's HTML structure contains the two lines first.
