Create an Events Gallery for Your Campground

Donna Genie shows campground owners how to build an events page in Airtable without coding skills. Set up a table with event name, date, photo, and links, then use calendar and gallery views to display them on your website or as a standalone page.
Chapters
Who's ready to build something? I'm going to show you today how to build an events page for your website in a very easy way. Also, if you don't have the skill to add this to your website, you. You can build this and use it as a standalone item to create a webpage of all of the events that happen in your park. With no legwork of being a technical genius here, these are going to be easy to follow and all free tools that you can use and follow up. At the end of our demo, I'll give you a link to the same things I'm going to show you here today. You can actually use mine as a starter and copy it to edit and just update it specifically for your campground. So let's dig in. First, this is a quick demo of what we're going to produce. You see a really pretty little page here with a lot of events and pictures and the dates and links to book. Okay, now I've just added it to a page on our campground accounting site, but you can add it to your own webpage. You can also use this as a standalone. You don't need to do anything at all to your web page to be able to use it. We're going to use a tool called airtable. Now, Airtable can be very technical, but we're going to use it in a very simple sense today. If you've ever used a spreadsheet, you're going to see that you can use airtable too. It's very easy. You can sign up for a free account here and copy my page and this will walk you through the same things. You can edit this at your own leisure and make any changes you want, But I'm going to show you the basics. So first I've created a table within this gallery called Table one here. You could change the name of this to be anything you want, but we're just going to keep it really simple. I've added in a field for the event name. You can add in description where you can put in details if there's a cost, where it's located, how, how long something will take, what time to meet up. All those details can be added in. In this text field you can display that or you can have a link where they click into it and see it. Now I've got a status field. In the status field, I've got it preset. We can have a planned event, a complete. Or if we're not sure about the date yet and we have an estimate, we could list that as well. If there's an outside link. Let's say that the barbecue competition for example, there's a sign up link through the barbecue company that's doing the event for you. You can add that and that link can be displayed. Next up, super easy a date. When is the event going to happen? You'll notice that this is based on a little calendar here. I just hit the spacebar that made this expand and show you but you could just type in this field. So let's add in one more event as we go. We're going to do the fourth of July celebration and just like a spreadsheet I'm going to type on the last open line and I'm going to fill this in. So I'm going to make it be planned and of course that's going to be on the 4th of July. All right, we can add in any notes if we want. We can keep these as internal notes if we'd like to say we're not going to do this event next year, it didn't go well, or we are. You can put whatever notes you want to in there in the event photo. I want to grab a photo. I'm just using some stock images but it would be better if you use some images directly from previous events. If you have some, ask some of your guests if you could use a photo that they took. So I've added in a nice little photo here. So we will use that on our calendar as our featured picture. Okay. I'm not using the contact email but you could add that if you want. And also the sign up link. If you put in an event link here that will come up in the form of a button. So I'm going to put in just a link to my website here. You would put in a link specifically. You'll notice that that book now button will light up because there is a valid link there. So we'll use that as an example. But you could even use the link just to your reservation system and pre fill this field with the same link for all of these if you want to. All right, so we've created this little spreadsheet of the events that are happening in our park now if you've decided that this event ends and you want to do it next year. So let's see that we change this event to be last year's event. Okay, I have some automations set up in the background here that will make this event go to complete when the date is passed. So I don't want the completed the prior events to show up on our calendar so the completed ones won't show up. I have another view set up and another view is the same data underlying, just a different way to look at it. This shows me what's going to appear on the website. Now I'm not going to get into too many of the specifics, but you can see that not all the fields are showing up like the photo. I can make those show up here in the fields. I can turn these on and off whether or not I want to see them or they're applicable for me. Airtable lets you build in other views too. A calendar view or a gallery view. We're going to look at both of these. First off, we're going to look at the calendar view. Now all my events are set for next year, so let's scroll forward. Ah, we see the Easter egg hunt shows up on the calendar on its date. If we go over here, let's go to October because we got our Halloween weekend scheduled here. You can actually add things from the calendar if you want. So you can add an event right from the calendar too, whatever way you like to deal with it. And the gallery view. Now the gallery view is what we saw with the pictures and you can see this will create a gallery view. I can customize what fields appear on the view. So if you want to add in the description after you filled that in, just click that field on. If you want to make these multi days where you have a start date and an end date, like I've added that on the Halloween weekend. So you can see an example. You can do that. You can also put in contact email address if they're supposed to email somebody, whatever you like, you can turn these on or off. If you don't want to use the links at all, you don't have to. All right, I'm going to turn that booking link back on because I want to show you how that's going to work when this one signs up for the 4th of July. Alright, so now we have this beautiful gallery of events. Now how do we use it? Now that we can see it, how do we let others see it? All right, you'll see a view called a button up here called Share View. If you'll click that, we'll have some options here. Now we're going to make sure that all these options are turned off. We don't want the viewers of this calendar to be able to edit it or to look at all those hidden fields that we have. So we're going to leave those off. Let's hit the Preview button for this lovely link that shows up this link. If you give it to anybody, they will be able to see a link to the gallery. So let's look at what they see. There it is. So you could change the name of your gallery to say my name is the Fabulous Campground Events and that name will appear there and all of these events will show up no matter where they're at. If they are on a mobile, this will switch it down so they could see it easily from a mobile device too. So if you don't have a website or you don't want to mess with your website at all, you just want to send out in an email newsletter and show what all of your upcoming events are. You could add this link and pretty as day you have an event calendar. If you'd like to go one step further and embed this on your website or on a page, you can click this little link here for embed this view on your site and it is going to give you the code, the HTML code that you can use or give to your web designer to tell them to add it to the website. And these are examples of what that view will look like as a preview. Here's the mobile on the right. So on a cell phone still looks great. All right. And I'll turn off the view controls to allow people to not sort these on their side. Just make it easier. You'll notice they have options up here to customize some things or look at it. We want to make this a little dummy proof for everybody and just make it pretty. And that's what we're going to show them. So now this code would be copied. Now I've taken this code and I've set up a new web page on my website. I use WordPress, so you may use different things, but I want to show you what happens. So all I did was go to the place where I could add HTML code and that usually is a text link. I cut and pasted that code here and that is all I've done. And I hit preview and there we go. So it's updating. So you'll see that those customize there. There you go. All right. So that's my preview. Now I, I cheated. Let me cut that paste, cut and paste that code again to show you that it will not show you. There we go. Okay, I'm going to preview it and you'll see these little things go away. Right? Okay. So now you see it. Now you remember, should be a little bit longer, right? Super easy tweak here. Just change the height if you want to make the width smaller. That's right next there. But let me just make that 3033 instead and let's preview it again and it will be longer. Now we see all those events. How beautiful. All right. So super easy to do. This doesn't take a lot of technical skill to do. If you don't feel comfortable doing it, find somebody in their teens. They'll be happy to do this for you and they can get this set up. But I have confidence you can do it too. So give this a shot. If you copy our database and I'll send you the links down below here. Copy our database and do this. Send me a link to your events when you're complete. I'd love to see what you create. Please follow us on Facebook and Instagram. Please make sure to check out our blog and our website linked below. Subscribe to our YouTube channel and hit the bell to be notified when we post. You can email me@donnaampgroundaccounting.com.










