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!
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!
Thanks Mirko, happy to hear this inspired you!
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.
Thanks Richard!
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.
Thanks Nalin
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.
Thanks Eugenio, yes that little hashtag trick is a good one 😉
Looks simple and easy to design the pages.. Very nice video and narration!
Thanks Richard
Awesome, keep it up! I haven’t even watched the video yet=)
hahahaha we’ll keep it up, but at a pace that you have time to watch them, Angelito 😉
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…
Great tutorial and the most intrsting news for me is this event, hope some thrivethemes Team member will comme also to the Island where i live since 2,5 years.
Hi Marcel,
Great to hear 🙂
Thank you – I learned a ton, very nice. I understand much better how to use the program.
Than my mission is accomplished Dale. Thank you.
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
Hi Eddie,
I’m happy to hear that.
You can find all the landing page from scratch videos right here 🙂
It seems like your link don’t work (the href tag has an “s” on the end “hrefs”)
Here is the link again:
https://thrivethemes.com/tag/landing-page-from-scratch
Thanks for making these tutorials, they are very helpful!
Thanks Kim, corrected that typo!
Quick question do you guys host the websites?
Hi Dean,
No we do not host websites. Our plugins are for self hosted WordPress websites.
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.
I’m happy to hear that Joseph!
Love the #join shortcut! Thanks for making these Hanne!
You’re welcome Pauline!
Hi, very nice tutorial explanation.
Congratulations, this is a great tool
thanks
Happy you like it Octavio
Hi Hanne-
Great job as always. Very efficient and effective.
Cheers,
Norm
Thanks Norm
Very inspiring the way you created this landing page for that live event in Bali. Great tutorial. thanks
Thanks Johan 🙂 Glad you found it valuable information.
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!
Thanks Ryan 🙂
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…
Good luck! Hope she’ll like it too.
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
Thanks for the suggestion, Luis