How to create static pages (e.g. About, FAQ, Home) with Relume.io, Tangram, and Webflow

‍

Summary:

This video explains how to link static pages (like home, FAQ, about) from Webflow to your Tangram application and set them up in the navbar.

1. Creating Pages in Tangram:
   • Go to the Pages tab in your admin account and create a new page (e.g., "Homepage").
   • Leave the description blank to keep the table clean.
2. Creating Pages in Webflow:
   • Create a corresponding page in Webflow (e.g., homepage).
   • You can use templates from reloom.io for design inspiration and quickly paste them into Webflow.
   • Customize the navbar and footer as needed.
   • Once satisfied, publish the page and grab the published Webflow URL.
3. Linking Webflow Page to Tangram:
   • In Tangram's admin, go to the corresponding page and paste the Webflow URL into the Template URL field.
   • Ensure there is no backslash at the end of the URL and hit save.
   • The page will be accessible at your Tangram subdomain (e.g., yourapp.tangram.co/home).
4. Adding the Link to the Navbar:
   • In Webflow, go to the navigation folder and link the logo or other elements to the full URL (e.g., yourapp.tangram.co/home).
   • Do the same for other pages like FAQ by repeating the process of creating the page in Webflow, pasting the URL in Tangram, and linking it in Webflow's navbar.

By following these steps, you'll successfully connect static pages to your app and make them accessible through your navigation.
‍
Video Transcription:

" In this video, we'll be covering how to connect static pages like home pages, FAQs, about pages within your application from Webflow, and how to link them up in your nav bar.  The first thing you're going to want to do in this case, we'll start with the home pages. That's probably the first static page that you want to create.

Is you'd want to go to the pages tab in your admin account and create. The new page.  Giving it a name, something like homepage, pretty self-explanatory. I don't usually put a description. I'll just put a space bar in there to keep the table clean. And by table, I mean the pages table, if you add a description, it'll show up under the page title.

And for the homepage, there's you'll need to create a corresponding front end version of that in web flow.  We just created the homepage in Tangram. We now need to create the homepage in Webflow.  By default, there should be a homepage in your project. And if you. Don't want to start from scratch for the design, a great resource would be real loom.

io. They have a lot of homepage templates as well as components for Webflow. You can just copy and paste straight to your clipboard and paste it into Webflow like so. If I paste it in there like this, we have a beautiful wireframe template for our homepage. It's mobile friendly. Reloom is great for stuff like this to create a starting point.

You would just probably want to replace the navbar and footer with ones you already have in your project, which I will do later on. But for the purpose of this, let's just quickly publish this homepage design, pretend we're done with it and happy with it in Webflow. We'll grab that published Webflow URL for the homepage, and then we'll paste it.

Into that corresponding back end page in Tangram.  I'll click the little arrow to get the live version of that Webflow page. Usually ends in webflow. io, or if it's your custom domain attached to it, it'll be your custom domain. And let's connect that to the corresponding back end page we defined in Tangram.

Paste it into the template URL field. You don't want to backslash at the end of it, make sure that's not there. Hit save and success. We created a new page, but how do we link it in the nav bar or on the logo? Well, because we created the homepage in Tangram and it now has a friendly route, which is your sub domain or Tangram domain in slash this friendly route slash home.

If we take away everything in our current URL and type in slash home, it'll take us to that homepage. Please keep in mind that if you. don't have your navbars hooked up properly. It might look a little funny at first. By properly, it means in your navbar, you need to have the attribute tgAttributeNavbar.

, like, if we wanted this navbar, it would have to have the attribute tgAttributeNavbar here, but for now, to avoid that double navbar issue, I will just delete it and hit publish again. And so, we can copy that tangram. co or your subdomain. URL slash home and paste that into the nav bars in our web float project.

If we went to the navigation folder for each of the nav bars, we can make the logo now link to, if we select the link element, that home page. And you want to use the full URL. You don't want to select the page under this pages tab. That will break with Tangram. You want the full URL your subdomain or your Tangram subdomain slash whatever the friendly URL is like slash home and you'll do the same thing for about pages, FAQ pages.

Let's just go through it one more time to clarify how it's done. And I'll quickly delete what we have in the homepage for now to keep this template clean. But let's say we want to create an FAQ page. I'll create a new page in Webflow, name it something clear, like FAQ, click create, copy that template in Reloom.

Maybe we can find a FAQ template. Let's search for FAQ.

Okay, that one looks nice. I'll copy that. Paste it into the FAQ. Publish that page that we just created in a couple of seconds with the help of reloom. io.

Find the published Webflow version of that page, copy the link, and now in Tangram we need to make sure that One second. We need to make sure that we have a corresponding back end page for this page. The FAQ.  I'll create a new page on the connected pages page of the admin account in Tangram. I'll just put a space in the description, create page, and paste in that Webflow URL we just copied in the HTML template URL field.

And once again, the friendly route automatically generated based on the page label name, it'll be your subdomain slash FAQ. Once we hit save, we can now remove everything at the end of that subdomain, put in our friendly route FAQ, and we can link to that page anywhere throughout the app now.  We could put that link in the nav, simply by going to the navigation folder, going to the logged out nav, for instance, copy and pasting one of these, renaming it, FAQ,

and then directing it to that serviceclone. tangrim. co slash FAQ link in Webflow like this. And that would be it!"

‍