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:


<style type="text/css">

body{
background-image: url('INSERT IMAGE URL HERE');
background-repeat: repeat-x;
background-position: center top;
}

#header2 {
height: 200px;
width: 980px;
}

</style>

<div id="header2"><a href="URL HERE" target="_blank">
<img src="INSERT IMAGE URL HERE"></a>
</div>

We are going to concentrate on three things:

• the BODY of the page where we will add a repeating background
• creating a HEADER where a custom graphic will live
• placement of the header graphic

SIDENOTE: Once downloaded upload the images in the IMAGES folder to your event page using the IMAGE UPLOAD tool shown here:

Once you have uploaded your images, select it then copy and paste the URL of the image you want to place. Typically your links will look like this: http://evbdn.eventbrite.com/s3-s3/eventlogos/5064690/bluefade.png

In the BODY selector add the URL of your bluefade.png image to the BACKGROUND-IMAGE value:

body{
background-image: url(“http://evbdn.eventbrite.com/s3-s3/eventlogos/5064690/bluefade.png“);
background-repeat: repeat;
background-position: center top;
}

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=”http://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>

The final result should look like this: http://betterthanazul.eventbrite.com/

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.

Here is an example of a page we made for Country Throwdown:

Their website: http://www.countrythrowdown.com/
Their event page: http://countrythrowdown.eventbrite.com/

Enjoy creating your own custom pages!