TABLE OF CONTENTS. Campaign Pages. Design Best Practices. Templates and Inspiration

Transcription

1

2 TABLE OF CONTENTS Campaign Pages PAGE 3 Learn how to set your campaign s general information and set up the Landing Page, Donation Page, and Thank You Page. Design Best Practices PAGE 7 In this section, you ll get expert design tips to make your campaign stand out and shine. Classy s built-in tools prove you don t have to be a professional designer to create a stunning campaign page. Templates and Inspiration PAGE 10 We ve included images and color palettes picked by Classy s designers plus other nonprofits campaigns to inspire your own. Jump to this section to download the images. 2

3 Campaign Pages PROCESS First, set up your content and campaign s baseline style. After that, you ll fine tune everything in the Design tab. then Campaign Setup Landing Page Donation Page Thank You Page Design Tab CAMPAIGN SETUP The first step is to set some basic information about your overall campaign. Your campaign s name, fundraising goal, and start date are key pieces. Campaign Name Make your campaign name specific and relevant to your team. This name is only for your internal use and won t be publicly displayed. Fundraising Goal How much money do you want to raise? If you re stuck, check out this blog post that explains how to plan, budget, and launch your annual fundraising strategy. PRO TIP Not sure about something? Don t worry. You can easily change this information at any point before or during your campaign. 3

4 LANDING PAGE Add the basic language and framework for your campaign s Landing Page. Remember, this is the first page your supporters see! Consider the overarching campaign story you want to convey. For more guidance, read this blog post on the simple blueprint for creating successful crowdfunding campaigns. Header Logo 300 px by 50 px is the recommended size. Headline Give your campaign a concise, but catchy, headline. Hero Image 1400 px by 910 px is the recommended size. Jump to page 7 for more details on hero and background images. Featured Media You can add one YouTube or Vimeo-hosted video, and up to four featured images. By un-selecting this box you ll remove the featured media and increase the size of your progress bar. Primary Color This color affects your buttons and progress bar. Impact Add Impact Levels to demonstrate how donor dollars relate to your program outcomes and that encourage supporters to commit to specific giving levels. To learn more on impact levels, read this blog post. About the Campaign Why should donors invest in your cause? Explain your campaign s story. 4

5 DONATION PAGE After a donor clicks any of the Donate buttons on your campaign s Landing Page, they ll end on the Donation Page to enter their payment information. Background Image 1400 px by 720 px is the recommended size. Note that the checkout form runs through the very center of the page, so you may want to consider using an image where the main focus is to the left or right so it does not get covered by the donation checkout form. Jump to page 7 for more details on hero and background images. Headline and Donation Appeal Add a supporting appeal to your donors. They ve made it this far, thank them and invite them to follow through. Donation Settings Set four suggested donation amounts. To learn how to set the right donation amounts, check out this blog post. Classy Mode Enabling Classy Mode gives the donor the option to cover transaction fees. For more information on how fees are calculated or what is covered by Classy Mode, please refer to this support article. 5

6 THANK YOU PAGE Donors land on the Thank You Page immediately after they donate. Be sure to thank them and reinforce all the amazing work they enable! Background Image 1400 px by 720 px is the recommended size. You can maintain the imagery used in your Landing Page and Donation Page, or choose a custom image. What about a picture of your staff or constituents holding a thank you sign? Jump to page 7 for more details on hero and background images. Headline and Supporting Message Write a message to your donor that expresses gratitude and reinforces how their donation helps your cause. This text will also appear on the donor s receipt. SAVE DRAFT Click the Save Draft button. Don t worry, your campaign isn t live until you click the Publish button. In the next sections, we ll cover how to design your campaign in detail 6

7 Design Best Practices DESIGN TAB You ve plugged in your content and your campaign looks amazing. Now we ll really make it shine! Let s navigate to the Design tab. Click Edit from the top nav and select Landing Page from the dropdown. You will automatically be in the Setup view. Click the Design view on the right hand side to toggle to the Design Tab. Yay! You re in the Design tab. Now let s design the fun stuff! REARRANGING CONTENT Click and hold the content block names to drag them into the order you want. Note that the Header, Hero, and Footer blocks are fixed and cannot be moved. Click and hold the content block s name. Drag into place and release. 7

8 BACKGROUND AND HERO IMAGES You can place an image as the background of any of the content blocks. This is a great way to add your brand s personality to the page. The uploading and editing process is the same for all the content blocks. Image File 1400 px by 910 px is the recommended size. Your image should be a.jpg,.png, or.gif under 2 MB. If you need help cropping or editing your image, check out Pixlr, a free image editing site. Image Upload Click on the name of the content block you want to add your background image to and follow the steps below: Click the Upload Image button on the left side-bar. Drag and drop your image file into the modal or click the Browse button to find your file. Click the Insert button to insert your image into the content block s background. Image Position These settings determine how your image is viewed on different web browser sizes: Center on the content block. Tile throughout the content block. Stretch to match the width of the user s screen resolution. Cover & Fixed to stretch and adjust the image to the user s window and lock in place so it will not scroll with the page. This one is our favorite because it gives your campaign a cool 3D effect! 8

9 BACKGROUND & HERO IMAGES Opacity The Opacity setting affects the image s transparency and determines how much of the background color will bleed through. Reducing the opacity improves the legibility of your headline. Drag the Image Opacity and Blur slider to find the setting that works for your image. View your edits in real-time with the preview screen on the right. 100% 80% 60% 40% 20% 0% PRO TIP This is a great way to incorporate your brand s color scheme! Check out our example of this use case from The John Wayne Cancer Foundation in our Inspiration section on page 13. Blur Increasing the Blur setting decreases detail and clarity by softly smoothing the image. 0% 20% 40% 60% 80% 100% PRO TIP We recommend using this setting for abstract images (clouds, patterns, nature) or images without people. 9

10 Templates and Inspiration You ve crafted the perfect campaign to compel donors to give but now you re fresh out of ideas to tie the visuals together. No worries! Check out our favorite tricks, inspirational templates, and client examples. STOCK IMAGES Finding the right image to compliment your content is key, but high-quality images are hard to come by. We have partnered with PixaBay so you can search for stock images in Classy. Click the Upload Image button on the left side-bar. Click the Search Library text on the left-hand side. Filter or search, click on your selected image, and click Insert when done. For more free stock images, check out StockSnap and Pexels. COLORS Color Schemes Your color scheme should compliment your overall page. If you have an image you love, Pictaculous and Palette Generator will give you a color palette based off an uploaded image. COLOURlovers offers complimentary colors and inspirational color palettes. HEX Color Codes You will likely see a # followed by letters and numbers when looking through color palettes online. This is a HEX color code. It is a six-digit code that starts with a # that a computer uses to display a specific color. 10

11 CLASSY TEMPLATES Winter Feels classy_winter-feels_01.jpg classy_winter-feels_02.jpg Want to use these images? Click here to download them as a.zip file....not sure where they just went? Check your Downloads folder. #FFF6DC #E66253 #2D3E50 #1BBC9B 11

12 CLASSY TEMPLATES Berry Grateful classy_berry-grateful_featured.jpg classy_berry-grateful_02.jpg Want to use these images? Click here to download them as a.zip file....not sure where they just went? Check your Downloads folder. #DBC297 #7C9C71 # #B8853D 12

13 INSPIRATION Get inspired! See how other successful nonprofits have powered their Giving Tuesday campaigns on Classy. Community Food Bank of Southern Arizona John Wayne Cancer Foundation Camp Kesem Mercy For Animals 13