Creating the page
First, open up your Webflow editor. You should see a screen that looks something like this.
We're going to add a new page called Events. There's three steps to this:
- Click on the page tab in the top left hand corner. This will open up the pages side bar.
- Click add page (the small icon).
- Enter the page name and click 'Create'.
You'll now be taken to the new page. This will be completely blank. Navigate back to the home page for the next step.
Adding a link to the page to the Nav Bar
The easiest way I found to do this was to duplicate one of the existing links.
This will then create a new link which we can edit to point to our new page. Simply double click on the new link to change the text to Events.
The next thing to do is to change the settings of the link so that it points to our new Events page.
Populating the new page
Navigate back to your new events page (use the pages navigation which opens when you click the page tab). Unfortunately it looks pretty empty at the moment :(.
At this point it's probably best to bring your header components from your other pages.
This is a little tricky to explain, but I found the easiest way is to go to one of your other pages, select the header and copy it. On a mac, the copy shortcut is cmd + c. On a windows machine this would be ctrl + c.
Now go back to your Events page and paste it (cmd + v or ctrl + v). This short video shows me doing this:
Adding Event Calendar App to the new page
Click the 'Add Elements' button and scroll down until you find the Embed Component.
Drag this onto the page where you want the Event Calendar to be. A modal will appear where you can paste in your Event Calendar App Embed code.
Paste in your Embed Code and click 'Save & Close'.
You will now have a grey box on your page that looks like this.
As an extra, I added the 'container' class to my embed element. This will vary by Webflow site, but with my 'business starter' template this brings the embed in line with the rest of my content which is really nice. I also added some bottom margin to space the elements.
The final published result looked like this:
That's it! Event Calendar App will now appear on your Webflow site. Note, it will only appear on the published site and not in the editor.