Custom Header in Landing Page

How to change default event header information section in the landing page

EventNook makes it easy to customize the event header information displayed on your event's landing page. If you'd like to replace the default layout for the event title, event date/time format, or even the "Add to Calendar" feature with your own custom design or information, follow these steps:

---

Step 1: Hide Default Event Header Elements

You can selectively hide elements from the default event header to declutter your landing page or prepare it for a custom design. Here's how:

1. Navigate to Settings > Site Content > Landing Page Setting.

2. Use the toggle options to hide or show specific elements in the default event header. The available options are:

   • Show Event Info

   • Show Event Location

   • Show Event Date

   • Show Event Title

   • Show Map

For example, if you want to remove the event date or map from the header, simply turn off those options.

---

Step 2: Add Your Custom Event Information

Once you've hidden the unnecessary default elements, you can add your custom event header content:

1. Go to Settings > Event Information > Event Description (HTML).

2. Enter your desired custom content using HTML. This could include:

   • A custom-styled event title

   • Event date/time formatted the way you prefer

   • Countdown Timer, Custom "Add to Calendar" buttons or links or more

💡 Tip: If you're comfortable with HTML, you can create a unique and visually appealing header by incorporating images, icons, or even embedded elements like countdown timers.

---

Example Use Case: Customized Header for a Product Launch Event

Let’s say you’re hosting a product launch and want a custom header that highlights the launch date prominently and includes a countdown timer:

1. Hide Default Header Elements: Disable “Show Event Info,” “Show Event Location,” and “Show Map.”

2. Add Custom Content: In Event Description (HTML), add the following:

   <h1 style="font-size: 2em; color: #ff6600;">Introducing Our New Product!</h1>
   <p style="font-size: 1.2em;">Launch Date: <strong>March 15, 2025</strong></p>
   <p><iframe src="https://countdown.example.com" style="border: none;" width="300" height="50"></iframe></p>

   This creates a bold header with your custom details.

---

Best Practices

• Preview Changes: Always preview the landing page after making edits to ensure everything appears as expected.

• Keep It Concise: Avoid overcrowding the header with too much information. Focus on the key details you want attendees to see immediately.

• Mobile Responsiveness: Ensure your custom content displays well on both desktop and mobile devices.

By following these steps, you can create a landing page header that perfectly aligns with your event's branding and messaging!