Search our Help Center

Custom header or footer image

Updated: Nov 25, 2013


  • Liven up your event page
  • Mimic your website or branding with images or graphics
Note

Note: Here is what you will need before you get started:

- to have signed up for a free Eventbrite account or logged in to your existing Eventbrite account and created an event

- image-editing software (e.g., Adobe Photoshop, Adobe Illustrator, Snag-It or Skitch)

- an image-hosting site / account (we recommend TinyPic)

1

Create and correctly size your image

In the image editor of your choice, create an image that is 960 pixels wide, which is the width of your event page. (The height of the image can vary.) Here is an example (note that we've shrunk the example to fit this space):

2

Upload your image to an image-hosting site

There are many image-hosting solutions to choose from. For this tutorial, we’ll use TinyPic. Once you’ve uploaded your image, you’ll see a number of sharing options. Highlight the URL provided for the direct link and copy the URL to your clipboard.

3

Insert your image into the custom header or footer on your event page

Back in Eventbrite, go to the Design page for your event, if you’re not already there.

(To get there, click My Events at the top of the screen, then click Edit, under Quick Links, to the right of the title of your event. Next click Design in the upper left.)

On the Design page, click the Custom Header / Footer link.

Once the Add HTML window opens, enter the line of code shown in the image below, pasting the URL for your image in place of the URL between the quotation marks, as shown below. Remember to put quotations before and after your pasted URL.

Note: You can edit the custom footer by clicking the Custom Footer link in the Add HTML window.

Click Save to close the Add HTML window when you’ve finished. Then click Save in the upper right of the Design page. Well done!

4

Adjust the color scheme of your event page, if needed

To customize the color scheme of your event page—e.g., to match the custom header and/or footer you just inserted—use the options under Or design your own.

To alter the color of a given element—such as the background or links—click on the colored square next the name of that element. In the pop-up window, move the vertical-sliding bar and/or color-selector circle within the color field until you find the exact hue for you. (Or you can enter the hexadecimal value for a color in the alphanumeric field.) The preview of your event page will update automatically.

Click Save once you’ve made your color selection for an element. And then make sure to click Save in the upper right of the Design page once you’re done!

 

Tip: To help you mirror your website's color scheme on your event page, check out ColorZilla, a handy Firefox add-on, which allows you to get the exact hexadecimal value for any color on any webpage.

5

Click here to take a look at a sample event page that has an image in the custom header!

To learn about more advanced customization options that require knowledge of both HTML and CSS, check out this blog post by Anthony, one of our designers here at Eventbrite. Also, check out W3 Schools, a great resource for HTML instruction, as well as examples of CSS that you can modify and use on your event page!

 

Create an Event Go to My Account

Can't find what you're looking for?

Our Support team is here to help! Contact us.