By establishing your Design Settings in RaiseDonors, you will be able to standardize the branding across all your Pages and Forms. Let’s review how the Design Settings work!
Global Design Settings
To access your Design Settings in RaiseDonors, navigate to Settings > System Settings > Design.
The first portion of the screen will allow you to define your Font and Radius settings. The border radius dictates how rounded the borders are for the various field boxes in your Form or Page. Select the “Font Family” dropdown menu to choose your default Font.
The next portion of the screen will allow you to define your various Brand Colors. You can use hex codes by entering the code into the box or use the visual selector by selecting the color box and using the pop out selector.
Overriding Design Settings on Pages & Forms
Within each separate Page or Form, you can override the global design settings to further tailor a donor’s experience based on the Form or Page itself.
To locate a Page or Form to customize, click Fundraise from the lefthand menu and the select the one you want to customize.
Depending on the component type, various Settings and Design aspects can be modified on the right hand side of the screen. For example, a Header will allow Design customization of the Background Color, Link Color, and CSS Class. While its Settings allow for customization of a Logo, Custom links and the addition of a link to the Donor Portal.
Additionally, Form components provide much more extensive customization of Design and Settings given their complexity. To easily locate the Form's settings, hover your cursor over the Form component and then look for the Form Settings button at the top. Selecting this will open up its Design settings to the right side of the page. You will also see additional Settings options for controlling the column layout as well.
Options available to you in the Design settings include adjusting the Form's background color and image (with the ability to use a different image on mobile devices), section padding, content width and a CSS Class option.
Lastly, each Section (where components like Forms are placed) can be customized as well. Hover your cursor in the blank space above a component, and you will see the Section outlined in green. Click that Section and its Settings and Design options will appear in the menu on the right just like the others.
Additonal Page and Form Settings, Design, and Preview.
Within each Page or Form builder, you will notice three icons beneath Save in the top right-hand corner. Settings, Design, and Preview.
Selecting the gear icon opens three additional options. Settings, Trust & FAQ Center, and Test Mode. On the first tab, Settings shows required fields like Page name and slug. Reporting & Tracking: where the designated Default Project, Segment, and Gateway for the Page or Form. Confirmation Details: where you can choose your Recurring and Acknowledgment email templates, and the option to send test confirmation emails. Lastly, Custom Code Snippets: areas to add custom CSS and Javascript code blocks to customize your page.
The second option, Trust & FAQ Center allows you to instill trust in your donors by answering common security, tax, and alternative giving questions right from your donation Page or Form without taking them out of the donation flow.
All new pages and forms will have this option turned on by default, with some basic copy included to get you started. For example "Is my donation secure?" followed by a text answer or "Other ways to give" followed by a custom URL.
The third option under Settings, Test Mode puts your form or page in a testing environment that simulates creating real objects without the risk of affecting real transactions or moving actual money. This can be used to test your form, integrations, and/or custom code without making actual charges or payments. To view the data that is sent through a Test Mode form, you must turn on View Test Data in your account settings. Learn more about Test Mode and testing payment methods.
Note: Turning this on will lock your page or form into Test Mode until toggled off. All data that comes through the form (even real transactions from your published page) will be considered test data.
The painting icon is for managing the page design. The Style section defaults to your organization's Design Settings. Changes made here will only impact the selected Page or Form, and will not update global settings. Custom Code Snippets are also accessible here.
Lastly, the eyeball icon will open a preview of your donation page or form in a new tab in your browser.
Comments
0 comments
Article is closed for comments.