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:
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
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
and the
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!
4 Responses
People Talking About This Article
This is SO SO SO AWESOME! Thank you!
Sami
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
Colin
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
Anthony
Yes – this worked. It was the quotes all along… and now it works perfectly!
Many thanks for your help on this one
Colin