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

azul200x140

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: https://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(“https://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=”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>

The final result should look like this: https://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: https://www.countrythrowdown.com/
Their event page: https://countrythrowdown.eventbrite.com/

Enjoy creating your own custom pages!

About author View all posts

Anthony

Anthony is a Senior Graphic Designer at Eventbrite and member of the uber talented Eventbrite Design team. When he is not designing he can be found creating art in his studio or DJing at local SF bars.

14 CommentsLeave a comment

  • I can get text and images displayed in the header, but CSS within the tag has no effect – if I paste in the code and add the URLs as indicated above, then click APPLY, I get a single missing icon and nothing else.

    Have tried lots of variations of CSS but cannot get any of them to produce any output

  • Hello Colin,

    After further review, it looks like all of the quotation marks were mixed between curly quotes and straight quotes. Also the open-close quotation direction was reversed. Change all quotes to non curly quotation marks and you will be set.

  • Anthony

    Yes – this worked. It was the quotes all along… and now it works perfectly!

    Many thanks for your help on this one

  • Hey Keshelle. Feel free to call our support number and they can help walk you through steps (800-350-8850), but don’t be intimidated by the HTML :) Mostly just a matter of copying and pasting!

  • Hello Keshelle,
    To add to Theo’s comment, no, we don’t offer this as a service, but we are building new templates and tools to make pages more customizable for non technical folks.

  • Hello LaTamera, your page looks good! My only suggestion would be to make the rest of the page (step 7, background color) black to match the background of the repeating graphic you have across the top.

  • I was wondering if there was a way to not use URLs for the images in the headers or footers. I don’t have a website and don’t want to use google images because of copyrights and such…or how can I get graphics with a URL? Is there any way to do this?

  • I’m missing something. Help please! I can create a great background, but when I add an image to the header I can’t maintain transparency, so I’ve got a big ugly white block around the banner I’m trying to insert. I’m sure there’s a simple step I’m missing. Can someone tell me what it is?