We created this template to make it easier for everyone to be able to stand up site to help raise awarenesses about social issues.
I was reading a story on Lebron James, when I came across his new site for morethanavote.org. It was a beautiful site, but when it launched, there wasn't much there when it came to how I, a visitor, could take action. They've added more functionality since launch, but I thought about the wide range of issues we face today and wondered how we could make it easy to help people raise their voice.
The answer was V1 of this template. With this project, you'll be able to quickly change the way this site looks to match your brand and issue, but you'll get a core functionality that will make it easy for your audience to contact their elected officials.
To get started, clone this project by clicking on the button below:
Once you clone this project, before you publish make sure to set this page to draft. You can do that by clicking on the pages menu, clicking on the cog wheel or settings for this page, then in the top right hand corner of the pages menu where you can save your settings, choose save as draft.
You can learn more about how to save pages as draft at Webflow University.
Once you're finished with these instructions or if you don't need them, you can also delete this page.
To update the data, you can delete the House and Senate members and the use our Parabola flows. You'll need to sign up for a key (it's free) from the Pro Publica API, then use that and your Webflow account to reconnect these Parabola flows.
You'll just need to create a new flow in Parabloa (one each for the house and Senate) and paste these values in your blank flow.
For the Senate:
For the House:
The style guide lives on the style page and is where you can start with customizing the look and feel of this site.
If you select the body tag (select the body, select a class, choose "Body All Pages"), this is where the font settings are set. We're using Poppins from Google Fonts, but you can use whatever you like. Our body font is set to 16px and we're using unitless line height.
The headings are set using the "All Headings" tags for each (H1 - H6). You can change their style there.
At the top, you can see color blocks. These and all elements are tied to global swatches in the color panels. Editing the colors in the swatches will change these color blocks as well as the colors of all the other elements (buttons, links, etc.).
There are a few different options for buttons you can use.
There are two symbols being used in this project. The first is the Nav which is, obviously the Navigation Menu and the second is the footer.
There is something special in the Nav Menu. This site was built with accessibility in mind so there is a skip to content link in the symbol.
The footer is unremarkable and there isn't anything there that you'll need to be specifically aware of.
The home and about pages don't have any special functionality to be aware of. There is placeholder content you can replace, remove, or add to any way you like!
The contact page has quite a bit of functionality to it, but you shouldn't need to know how to code for it to work for you. But, I do want to explain what's happening.
When a user clicks on a "I live here" button, we set an item in local storage. We copy the HTML and the content of the entire location they clicked on and set that as the local storage value.
When they click that button, they're also redirected to their home states page. But, when they come back to the contact page we run a script.
We also provide a button that allows a user to clear a location after that has been set. This simply removes the item from local storage.
We're also using listjs on the contact page to let users filter by state.
When a user visits a state page, they can see all of the elected officials for that state. Then they can click to tweet any individual. On the collection page at the very bottom there is a script that runs all of this functionality.
The good news it, this is using the CMS! To change this, go to the Issue's collection and then select the issue that's there and edit it.
Or, you can create a new issue. The tweet function will use the newest issue. You can change the share url and the copy for the tweet with having to mess with any custom code.