Donna Genie walks through building an events gallery in Airtable and embedding it on your website. Uses free tools, covers event details setup and automations, takes about 10 minutes start to finish.
Chapters
Foreign. Let's build a little something. Today I'm going to show you how to build an events page for your website or for your marketing. That will give you a lot of customization and be really easy to update without a lot of technical skill involved. All of these are going to be using free tools. All right, when we're finished, just so you know, I'll let you copy my whole database and you can build right off of what I've already created. So to be super easy if you want. If you don't want to have to create your own. So let's take a look. First off, we've all seen Pinterest and Pinterest is always really beautiful visualization of things because it's all based on pictures. We're going to build this events gallery similar to look like Pinterest. And we're going to start off using a tool called airtable. I've talked a little bit Airtable before. I'm a huge Air table fan and I do a lot of building of really technical things and automations and things like that. But you don't have to have any real big technical knowledge to use this. And it's free to get started. So let's take a look. If you've ever used a spreadsheet, you're gonna love this. It's pretty easy and it's gonna look very familiar. I'll let you copy my whole database when we're done. So don't worry about the whole setup initially. You'll get a feel for it rather quickly. I've got some columns set up across the top. You can customize these and change them however you like. But I've got the event name as our primary column. I've got a description. You think of this as if you want to put in details about the event, how much it costs, what time it is or where it'll be or what they should bring. You could do that here. You don't have to use that field, but it's an option for you. The status. I've already set up the status as a planned, meaning it's in the future. Then I've set up an automation to change it to complete so that it rolls off of your calendar and doesn't stay on your website. You won't need to update it. Every time an event gets completed, it will automatically hide itself off the website. And lastly, an estimated date. So if you don't know when you're going to hold this, but you want to put the place marker and build it all in and then set the date later. You, you can mark it as an estimated date. You can choose to show that on the website or not show it. If you like the event link, this will be a link to where they should sign up or if it's being held by a third party. You could put any kind of a URL, any kind of web link here that can be used for the event. Then of course the date. You're picking this off of the calendar, so super easy. You can, you can't mess that up. If it's a multiple day event, you could have this be a start and an end date. I'm just going to leave that field empty here for this. Use notes. I've just included this simply as if you want to put some internal notes you may want to track after an event is complete and say we don't want to do this one anymore or this was a great one, we need to schedule this in March next year or whatever. Internal notes you want to have. Event photos. You can add photos. This is simply a drag and drop field. Also on each one of these records, these are called records and this whole thing is called a table. Table one you can add in the event photo. If we want to hit the space bar. It'll show me all these fields just in a different format, a scrolling format and it'll show me what dates I changed. You can put in a contact email if you want. Again, an optional field, the sign up. This is going to be a button that can be used. So if I put in. Let me just put in my own website here. The button will highlight and be available once there's a link in that field. All right, so what are we going to do with all this? Let's take a look. Let's add one more event here. We're going to add in an ice cream social. That sounds like fun. And let's make that be in June and we're doing the calendar for next year here. So I'm going to make that be on the 17th of June and I already have a photo ready. So let me drag that and drop that right in there. Whoops, sorry, I missed it. Try again. There we go. All right, my ice cream photo is successfully loaded. Okay. And that is all for that event. Alright. So I've simply added that in. Now in Airtable you have different ways to view your data. This is all going to use the same viewing, but I can set up. This is called a grid view. We can also have calendars, galleries. There's a whole bunch of different things we can do at the bottom here. But I'm going to first show you a separate view. And this is one. I only want this to show what's upcoming here. If I have completed events like let's make that completed for a moment. I don't want that to appear on the website. So that will go away. So Valentine's Day is no longer listed. Okay, let's go back. Let's put it back. It hasn't happened yet. Right. But you can set up filters and I've set it on the filter. It has to say planned. So if it has completed or an estimated date, it is not going to appear on the website yet. Now I've taken this view of my data and I am going to look at it on the calendar. So if we look at it on the calendar here, we're in February, we see Valentine's night, Kids Paint night, glass fusing. Let's say we want to move the glass fusing. That date just isn't going to work. Let's move it to the 16th. I can drag and drop. And now the date has been updated. Now you can use this calendar and put it on a website or a page or share it with your staff as well. We're going to do the sharing on the gallery first, but you'll see the same way the calendar can be shared. All right, so the gallery, look how beautiful it is with all the pictures that we have of our great looking events. Now what do we do with this? How do we let people see it? We're going to go to the share view option and this is going to give me some more options. Do I want the viewers to copy this data? No, I want this to be pretty sturdy data. I don't want anybody who's looking at it to be able to change anything or copy it. I'm going to hit the preview button here next to this little link. This is the link that I would give to anybody I want to share this calendar with or this gallery with. And this will be a public link. So if I want to include this in a newsletter, I can do that. And also if I wanted to change the name here where it says gallery, I can change the view name right here to be my studio events. Okay. If I change that, that's going to change this name right here too. All right, so the gallery is the focus on what we're going to do. Now if we want to take this one step further and add it to our website, that's easy to do as well. Let's Go back to that share button. And we also have another option that is embed this view on your site. So if you click that, you will see the HTML code comes up. And this is all you need to do is copy this and paste it into your website. It's going to give you a desktop preview of what this data looks like. Also mobile. It's mobile friendly. So this shows up great on their cell phone as well. Now I'm going to turn off these view controls right here. I don't want my viewers to be able to do too much to this data. I just want it to show up and be pretty. They don't need to adjust it. All right, so let's take now my embed information and I'm going to copy that. And I've already started depending on how you do your website. You can do this anyway. But I'm going to go over to the text portion where the HTML code is. My website is in WordPress. But no matter how you do your website, just paste that in. That's all you need. And I'm going to hit preview and it's going to give me a preview of my new web page that shows this calendar of events. Look how pretty. All right, now you don't really want people to have to click to make this a bigger view so they can see everything. So I'll show you a little way to do that. Super easy. Go back to that code and you notice where it has height equals. Let's make this big. Let's make it 3,000. This is how long it's going to be on the page. I can preview that. Ah, look, it got longer. It shows everything. How beautiful. All right, also notice that once that event link is added, now I can click and my guests, if they click that, it should take them to the page to register. Remember, I just used the front page of our website as an example. All right, so a do it yourselfer events page you can set up super easy. You can also set up separate views. Like let's say that you only wanted to create a view for a school for all events that were appropriate for kids. So you don't want to include some of the adult events. You could set up a way to separate those out. You could set up another field and let's show you a single status. I'll say the type of event I could add in adults, kids, family. All right, so here I can create this and say, oh, this one's an adult, this one is adults, this one's definitely kids. Teacher appreciation is a family. Okay, I just did it on those couple. I can make a whole separate view. I'll duplicate that view and let's make this one Adults only events. Okay, so when I created that, I'll now change the filter and say when the type of event is adults. Now we only see that. I could do the same with the gallery. I could create a gallery that just shows the adult events. So the sky is the limit. Here, take this and run with it. And I will include the link below that. You can copy this whole base to get yourself started so you don't have to start from scratch. But I want you to send me the link to what you create. And also, if you have any suggestions of other projects you'd like to see us build, let me know. I'm on a build trend here. Thank you and have a great day. Please follow us on Facebook and Instagram. Please make sure to check out our blog and our website link below. Subscribe to our YouTube channel and hit the bell to be notified when we post. You can email me at donna at pyopaccounting. Com.
