Donately Components Library
Welcome to the Donately Components Library, a set of templates, blocks, and fundraising pages for your Donately account.
How to use the Donately Elements Library
A quick guide to using the Donately Elements and how to get started.
Welcome to the Donately Components Library on Webflow, a system of blocks and templates built with Relume® and Finsweet® components and connected to the Donately Fundraising Platform. With it, you can spin up your own fundraising campaign and form pages in minutes or spend time customizing them from the ground up.
Requirements
In order to use this library, you will need the following tools and accounts:
- Webflow account (including FREE accounts)
- Donately account (included with Starter and Team pricing tiers)
Instructions
To get your campaign pages live and pulling dynamic content, you'll need to follow a few simple steps:
- Create a Campaign on Donately: To track live fundraising progress, you'll need a Donately Campaign. Head to the Donately dashboard and select Campaigns > New > General Campaign to get started. Enter your campaign details, images, and content you want and hit 'Publish campaign'
- Choose a campaign template: This cloneable system comes with 6 different templates, all of which can be customized however you would like. Find the template that is closest to what you want, or use the components on this page to copy and paste to create your own campaign from scratch.
- Copy Your Donately Account ID: Grab your Donately Account Unique ID from the Integrations tab and paste it in the custom header code area found in the project settings in Webflow.
- Copy Your Campaign ID: Copy your Campaign ID from the detail page in Donately and replace the Campaign ID in the page settings of the template you are using.
- Update your styles: Head to the Admin/styleguide page on Webflow and make any global edits you'd like. This will update colors, fonts, and other components on the entire ecosystem, so be sure to be careful and utilize the classes already created in order to keep the code clean and organized.
- Customize to your liking
That's it! If you need help, feel free to email our support team. We'd love to help ensure you get Donately up and running on Webflow® successfully.
Frequently Asked Questions
No. This library was built by Donately to provide flexible, easy campaign page customization. You do need a Donately subscription that allows for 'form embeds' but that is it. Once you have that, the rest of the Webflow library is included free of charge.
No. Donately's content syncs up to Webflow using Custom Attributes in Webflow. If you'd prefer to swap an image, remove the content, or hard code specific content coming from Donately, simply delete the 'data-dntly' attribute on that object and it will then be editable within Webflow.
Forms
Start small and utilize this library to launch your very own donation page.
Templates
Here are six templates we've created with the component library. Feel free to customize one of these or create your own by copying and pasting components on this page.
Navbar
Sed magna nisi, blandit vitae, ullamcorper in, facilisis ac, nisi. Quisque vitae quam.
Header Styles
Sed magna nisi, blandit vitae, ullamcorper in, facilisis ac, nisi. Quisque vitae quam.
Loading...
Loading...
Body Grid Styles
Sed magna nisi, blandit vitae, ullamcorper in, facilisis ac, nisi. Quisque vitae quam.
About this project
What’s a Rich Text element?
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
Static and dynamic content editing
A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!
How to customize formatting for each rich text
Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.
About this project
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris dapibus fermentum metus. Suspendisse velit mi, sollicitudin quis, rutrum quis, tristique vel, ipsum. Nunc consequat ultrices metus. Vivamus at magna. Fusce lorem dui, auctor non, elementum vitae, mattis sit amet, dui. Fusce nec risus at est porttitor suscipit. Nullam eu libero. Quisque turpis odio, euismod at, bibendum eget, tempor et, turpis. Pellentesque orci dolor, elementum sed, adipiscing a, viverra sed, eros. Aenean euismod. Donec ante urna, hendrerit sed, pulvinar in, pulvinar vitae, metus. Etiam tortor lectus, ornare et, blandit non, ultrices quis, purus.
Mauris a dolor. Maecenas ut pede. Cras faucibus venenatis massa. Morbi euismod nisi et risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed iaculis porta velit. Phasellus elit. Phasellus libero purus, tincidunt vitae, lobortis id, faucibus iaculis, quam. Morbi pellentesque sapien eu lectus. Aliquam faucibus ipsum eu felis. Ut odio dolor, rhoncus nec, rutrum vel, tempus vel, augue. Pellentesque porta quam sed elit placerat rutrum. Etiam ligula lorem, ullamcorper ut, posuere dapibus, vehicula at, nibh. In sed velit. Nullam porttitor bibendum nunc. Donec eget orci id diam pellentesque pretium.
Subtitle
Mauris a dolor. Maecenas ut pede. Cras faucibus venenatis massa. Morbi euismod nisi et risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed iaculis porta velit. Phasellus elit. Phasellus libero purus, tincidunt vitae, lobortis id, faucibus iaculis, quam. Morbi pellentesque sapien eu lectus. Aliquam faucibus ipsum eu felis. Ut odio dolor, rhoncus nec, rutrum vel, tempus vel, augue. Pellentesque porta quam sed elit placerat rutrum. Etiam ligula lorem, ullamcorper ut, posuere dapibus, vehicula at, nibh. In sed velit. Nullam porttitor bibendum nunc. Donec eget orci id diam pellentesque pretium
Mauris a dolor. Maecenas ut pede. Cras faucibus venenatis massa. Morbi euismod nisi et risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed iaculis porta velit. Phasellus elit. Phasellus libero purus, tincidunt vitae, lobortis id, faucibus iaculis, quam. Morbi pellentesque sapien eu lectus. Aliquam faucibus ipsum eu felis. Ut odio dolor, rhoncus nec, rutrum vel, tempus vel, augue. Pellentesque porta quam sed elit placerat rutrum. Etiam ligula lorem, ullamcorper ut, posuere dapibus, vehicula at, nibh. In sed velit. Nullam porttitor bibendum nunc. Donec eget orci id diam pellentesque pretium.
Recent Donations
$0
0 hours ago
Widgets & Blocks
Sed magna nisi, blandit vitae, ullamcorper in, facilisis ac, nisi. Quisque vitae quam.
Top Fundraisers
$0 Raised
Recent Donations
$0
0 hours ago
Top Donations
$0
0 hours ago
Recent Donations
$0
0 hours ago
Top Donations
$0
0 hours ago
Recent Donations
$0
0 hours ago
Backlog
Version 1.02
- Donor images hidden in card and list view by default
Version 1.01
- Fixed progress bar width pulling dynamically from Donately
- Fixed styling on some header components
