How to Build a Conversion Focused WordPress Homepage for an Event

Author
Hanne   45

Updated on September 10, 2020

In today's landing page from scratch video, we're building the homepage for an upcoming live event in Bali.

The event is called the Digital Marketer Skill Share. At the time of our video recording, the business is in the phase of collecting leads: people can sign up to join the waiting list for the event. This is a very smart way to be able to start marketing the event, get sponsors and gauge interest before actually selling the tickets.

Even if you're not currently organizing an event, this landing page from scratch video is for you if:

  • You would like to know how to build visually interesting layouts such as a grid layout and a 2-column layout, while making clever use of white space.
  • You want to discover how to make your most important information stand out immediately.
  • You want to become quicker at using Thrive Architect WordPress page builder (formerly Thrive Content Builder) to create any page or layout on your site.

More...

Update

Thrive Content Builder and Thrive Landing pages have been replaced by Thrive Architect, which now has 268 pre-designed page templates and you can preview them all in our landing pages gallery.

Make Your Most Important Information Stand Out

The main purpose of this homepage is to inform people about the details of the event and get people to sign up to the email wait list.

That's why above the fold we have:

  • A "Join Wait List" button in the header (4.19 min) that's linked to a call to action further down the page (27.27 min)
  • A white contrasting content box with divider elements to show off the "When" and "Where" of the event (8.16 min)
  • A horizontal lead generation element with custom filler text (13 min)

Custom Fonts

For this homepage we are using the fonts Montserrat and Lora, both are Google Fonts. From within the Thrive Dashboard, you can easily add custom fonts to your site.

Answer the "What's In It For Me?" Question

An event homepage is basically a sales page, you try to convince people that the event is worth the time and money.

That's why the "What's In It For Me" section is so important.

By using a two column layout with a title and a custom illustration on the left and a right aligned text element on the other side, we direct the eye to the most important persuasion element of the page. (28.41 min)

The use of white space is important here, to make the information enjoyable to read.

The Next Phase: Selling Tickets

Soon, the tickets will be available for sale and at that time the lead generation elements will be switched over to call to action buttons. These buttons will then link to the pricing table on the page.

Now It's Your Turn!

I hope you liked this new landing page from scratch video and that you found some new tips and tricks to implement on your site.

And if you have any comments or questions, please leave them below!

by Hanne  April 28, 2017

45

Enjoyed this article ?

You might also like:

Leave a Comment

  • Yet another entertaining and inspiring tutorial. Makes me want to start working on some landing-pages again as soon as possible. Thanks for the great work!

  • Hanne,

    This is one of your best. I watch all of your videos and always learn something interesting, either for content presentation or for basic page/post building.

  • Awesome content as always. What would be really cool is if you guys could export the page you created and make it available for us more technically challenged folks 🙂

    • Hi Antonio,
      We try to do that as much as possible like for this homepage but this time, we’re using elements that are not free of copyright and we can not give those away 🙂

  • Thank you Hanne – that was so helpful to see you work and hear you think. I definitely learnt some useful tips from you, which I will use.

  • That was a very educational post and video tutorial!
    I will recreate step by step my own version of the page just to master my website building skill.
    The “link to page section” tip was specially valuable for me.
    Thanks.

  • Is there a way to get this as a template? I’ve been playing around this afternoon and it would be a whole lot easier and less frustrating if I could simply plug and play (after editing of course!)

    • Hi Carol,

      I hear you, but this one is a bit tricky because we do not have the appropriate copyright to the different elements…

  • Hi Hanne,

    Thanks for share the tips and tricks..
    I currently using the TCB over more than 1 year, I am surprising the video you shared is very useful for me which I never use of that before.

    If possible, share more this kind of tips and tricks video so that I can utilize all the function in the TCB.

    Thanks again for sharing

  • Hanne, just wondering – where do you obtain the thin divider lines you used for separating the ‘Date’, ‘Location’, ‘City’ elements. Love all your tutorials. Thanks 🙂

    • Hi Geoff,
      We made those in PhotoShop but you can do the same in any program that can save images such as PowerPoint, PickMonkey,… Draw a rectangle of 1px wide and the height and color you’d like. and save it without any background or space around it.

  • Thanks so much Hanne! This is very timely for me since I’m putting together an online conference in July perfguild.com and this is going to help me create an awesome landing page for the event.

  • Fantastic tutorial again Hanne. It’s so refreshing to see a step-by-step walkthrough. Even after so many years dabbling with websites, whenever you come to a new toolset (been with Thrive under a year) and you don’t work with it every day, resources like these are invaluable.

    You guys really do over deliver and it’s very much appreciated!

  • Hi Hanne,

    great tutorial as always. I’ve built quite a few pages using tcb and recently I’ve started to look into how to make a HTML5 video background. At first, I thought it was impossible, but as I looked more into it I’m pretty close.

    I’ve found some resources (I’ll post the links below – not mine) that give you the finished CSS and HTML code which I embedded and although I know some HTML and CSS I can’t get it to stay in place like a full height image would. I’m just that one step away.

    I think it would be amazing value to your audience and proof to tcb as a product if you guys looked into this and made a tutorial about this.

    I know that I would be immensely grateful.

    Please, let me know!!

    Thanks!

    [Links (these are not my links and this is not spam) : http://codepen.io/mattgrosswork/pen/jrdwK https://codepen.io/dudleystorey/pen/knqyK https://slicejack.com/fullscreen-html5-video-background-css/ ]

  • Thanks Hanne. A friend has an event soon and I am going to surprise her with a similar landing page you built. At the same time, I am going to convince her to change her old website….I will see…

  • Hello Hanne,

    Thank you for another great post and tutorial on LPFS. I want to let you know that I would really, really like and appreciate if you could do a new LPFS video tutorial on how to replicate the “look” and “feel” of the landing page and general website environment of John Lee Duma’s http://www.eofire.com

    I think it would provide great value to all of us, so please consider it.

    Thank you so much in advance for your time, help and attention.

    Best Regards,

    Luis

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >