How To Design a Great Event Page (It's Better Than Using Azul!)

As we all know, Eventbrite makes it easy for you to set up an event page and manage your ticketing registration needs. (If you did not already know that, you better ask somebody or watch this video.) Event pages are the more than just a way to sell tickets. They are an extension of your brand. If someone visits your website and is used to its look and feel, why not make your event page have some or all of the same elements? Instead of just using our templates, you can use our custom header & footer option to make your event page look more like your own website.

Using this option requires some knowledge of HTML and CSS, but if you follow these instructions you can use this basic block of code to make all of your pages look great. In this post we will provide a basic structure that you can alter and add on to as you get more familiar with the code.

Let’s start by going to STEP 8 then ADDITIONAL OPTIONS. Click the SHOW CUSTOM HEADER & FOOTER option. Copy and paste the following into the header:

Take a moment to preview your page. Notice the bluefade.png image is repeating all over the page. In this instance we want that image to only repeat along the top of the page. Let’s change the BACKGROUND-REPEAT value to:
background-repeat: repeat-x;

Now take a look—that is more of what we wanted to accomplish.

Next we want to place a custom image above the ticket info. In your CSS you have a selector titled #header2 that is 980 pixels wide and 200 pixels tall or the same size as our header image. Insert the headerimage.png link into the <img src tag:
<div id=”header2″><a href=”URL HERE” target=”_blank”>
<img src=”https://evbdn.eventbrite.com/s3-s3/eventlogos/5064690/headerimage.png“></a>
</div>

SIDENOTE: You can also wrap a link around the image to link back to your website. If you don’t want to use it, delete the
<a href=”URL HERE” target=”_blank”> and the </a>

Boom! You now have a slick custom page that resembles your website (or you just have a slick page—period). Try creating your own graphics and adjusting values to the properties in the selectors to see what you come up with.