Giving Page Design Overview

The Giving Page builder allows you to setup the look and feel for your Giving Page, what information you want to collect, and the communications you want to send out to your donors. For questions on how to create/setup your Giving Page visit this article here.

 

Layout & Design

Setup the page styling for your Giving Page like the background and foreground color and the button styling.  You can also save and load page styles as templates that can be used on additional pages later.

 

Templates

You can upload a previous layout template into the page designer by selecting Load next to the template name.  You can edit an existing template by selecting Edit next to the desired template.  Select Delete to remove a previously saved template.

 

To save the current page settings as a template so you can use it later, Click Save Existing Design As A Template.

 

Page Background

Page Background enables you to change the background (outer border) settings.

  • Background Image:  You can use an image for the outer border.  Click + Add New to upload a new image, click Select Existing icon to choose an image file from your existing library, or click the Remove icon to remove a currently selected image.  If an image is uploaded, you can control the image repetition horizontally (Repeat Across), vertically (Repeat Down), or you can tile the image (Repeat Both).
  • Background Color:  Set the background color for the outer border.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.

Click [Apply] to save your changes.

 

Page Foreground

Page Foreground enables you to edit the inner background and font attributes.

  • Foreground Color:  Set the foreground color for the Giving Page.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.
  • Foreground Opacity:  Set the opacity for the entire foreground so the background can show through.  This setting affects all the foreground elements including the Header, Footer, Text, Data Fields, etc.
  • Rounded Corners:  Set the degree of roundness to the section corners.
  • Border Size:  Set the thickness of the section border.
  • Border Color:   Set the color for the section border.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.
  • Shadow Distance:  Set the section shadow distance in pixels (shadow falls to the right).
  • Shadow Color:  Set the color for the shadow.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.
  • Font Type:  Select a font from the drop-down menu.
  • Font Size:  Adjust the size of the font.
  • Font Weight:  Sets normal or Bold text.
  • Font Style:  Sets normal or Italic text.
  • Font Color:  Set the color for the font.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.
  • Headline Opacity:  Set the opacity for the section headlines.

Click [Apply] to save your changes.

 

Buttons

Set the look and feel for the buttons on your Giving Page.

All Buttons

  • Background Color:  Set the color for the buttons on the page.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.
  • Rounded Corners:  Set the degree of roundness to the button corners.
  • Border Size:  Set the thickness of the button border.
  • Border Color:   Set the color for the button border.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.
  • Font Type:  Select a button font from the drop-down menu.
  • Font Weight:  Set normal or Bold text.
  • Font Style:  Set normal or Italic text.
  • Font Color:  Set the color for the button font.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.

Submit and Reset Buttons

  • Size:  Set the size for the buttons.
  • Font Size:  Adjust the size of the button font.

Click [Apply] to save your changes.

 

Page Content

You can select the elements to include on your Giving Page and edit the specific settings for that element.  To include the element, simply check the Include box.  Select Edit next to an element in the list or in the page preview to edit that section.  You can change the order of the sections.  To do this, click and hold the Edit button next to the section you want to move in the page preview, then drag and drop the section in the desired location.  A few sections are fixed on the page and cannot be moved, for instance the Payment Information will always be at the bottom of the page, followed by the Footer.

 

Header

You can include a header to your Giving Page.

  • Background Image:  You can use an image for the header.  Click + Add New to upload a new image, click the Select Existing icon to choose an image file from your existing library, or click the Remove icon to remove a currently selected image.  The ideal banner width is 900 pixels, but Qsuite will resize to fit the width, unless you check the box to maintain the original dimensions.  If an image is uploaded, you can control the image repetition horizontally (Repeat Across), vertically (Repeat Down), or you can tile the image (Repeat Both).
  • Height:  Set the height (in pixels) of the header to accommodate your image header or add additional space for text if needed.
  • Foreground Color:  Set the color for the header.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.
  • Text:  Set a title or other text that will appear in the header.
  • Font Type:  Select a font for the header text.
  • Font Size:  Set the font size for the header text.
  • Font Weight:  Set normal or Bold text.
  • Font Style:  Set normal or Italic text.
  • Font Color:  Set the color for the font.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.
  • Alignment:  Set the header text alignment to Left, Center, or Right.
  • Vertical Alignment:  Set the header text vertical alignment to Top, Middle, or Bottom.

Click [Apply] to save your changes.

 

Footer

You can include a footer on your Giving Page.

  • Background Image:  You can use an image for the footer.  Click + Add New to upload a new image, click Select Existing icon to choose an image file from your existing library, or click the Remove icon to remove a currently selected image.  If an image is uploaded, you can control the image repetition horizontally (Repeat Across), vertically (Repeat Down), or you can tile the image (Repeat Both).
  • Height:  Set the height (in pixels) of the footer.
  • Foreground Color:  Set the color for the footer.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.
  • Text:  Set a title or other text that will appear in the footer.
  • Font Type:  Select a font for the footer text.
  • Font Size:  Set the font size for the footer text.
  • Font Weight:  Set normal or Bold text.
  • Font Style:  Set normal or Italic text.
  • Font Color:  Set the color for the font.  You can enter a Hex Color Code (if known) or select a color and shade using the color picker located to the right of the hex code field.
  • Alignment:  Set the footer text alignment to Left, Center, or Right.
  • Vertical Alignment:  Set the footer text vertical alignment to Top, Middle, or Bottom.
  • Include Powered by Q and Security Metrics logos checkbox:  You can include “Powered by Q” and the “Security Metrics Credit Card SAFE” logos in the footer.

Click [Apply] to save your changes.

 

Name and Address

  • Section Title:  Set the title of the name and address section (i.e. Billing Address, Personal Information, etc.)
  • Display:  Select the display layout as well as the optional fields you want to include on the page.  To include an optional field click and drag the arrow icon into the “On Page” column in the order you want the field to appear.  You can edit the display name for a field by typing your custom label in the text box.
  • Required Fields:  You can make optional fields required by checking the box next to included fields.

Click [Apply] to save your changes.

 

Categories

Set up the categories you want to make available on the Giving Page.

  • Section Title:  Set the title of the category section (i.e. Categories & Funds, Areas of Giving, etc.) and optional Donor Instructions for your donors.  Instructional text appears below the section title, but before the category list.
  • Selection:  Check the categories from the active category list to include on your Giving Page.  If you need to make a category active or inactive or create a new category, you can perform those functions in the Admin menu at the top of the screen.
  • Order:  You can order the categories in how they will appear on the Giving Page.  Note- some layouts order subcategories in alphabetical order only.
  • Style:  Set the display format for your category list and view examples of each.  You can choose a single list, drop down selection, set amounts, or display a single category.  An example of each style is displayed when you select them.  If the ordering of categories has no effect on a particular style, it will advise you when selected.

Click [Apply] to save your changes.

 

Recurring Donations – Frequency and Duration

  • Section Title:  Set the title for the frequency and duration section.
  • Dates:  Use the checkboxes to allow transactions to be scheduled to run on a future date when submitted, and/or remove the duration options from recurring.  If the second option is checked, then recurring transactions will run indefinitely until cancelled.
  • Display:  Use the check box to allow recurring transactions on the Giving Page.  If checked, then select your display, frequency, and duration options.

Click [Apply] to save your changes.

 

Honorarium

Add an honorarium/memorial giving section to allow donors to give in honor or memory of someone.

  • Section Title:  Set the title of the honorarium section.
  • Setup:  Set the drop down list title and the individual drop-down selections using the (+) and (-) buttons and text fields on the right.  There is an optional checkbox that you can include on your Giving Page that flags you to notify the recipient of the honorarium that a donation has been given in their honor.
  • Fields:  Check the fields for the information you want collected for the honorarium.  You can edit the field labels by typing in the field text box.

Click [Apply] to save your changes.

 

Payment

Select the payment options available for your Giving Page.

  • Section Title:  Set the title for the payment section (ie. Payment Information).
  • Payment Methods:  Select the payment options you want available on your Giving Page and customize the labels of the payment fields as needed.  Note- if no payment option is selected, Debit/Credit Card information will be collected on the Giving Page as a default.

Click [Apply] to save your changes.

 

Login Portal

You can display the Profile account login/creation portal where donors can see their stored accounts and giving history.

 

Comments

Include an additional comments section.  Note- the maximum number of characters that can be stored in comments is 500.

  • Section Title:  Set the title for the comments section.

Click [Apply] to save your changes.

 

Custom Fields

Add any custom fields you want to display on your page.

  • Section Title:  Set the title for the custom field section.
  • Select A Control Type:  Select the type of control you want for your custom field (ie. Text field, or a List), depending on what you want to use the custom field for.  Text fields can collect up to 50 characters on the Giving Page.  Lists can be either Radio Buttons or Drop Down.  Use the Add/Remove to create your list selections, and selections can up to 100 characters in length.  You can make a custom field required using the checkbox.  Click -> Add to List to add your custom field to the page.
  • Control List:  You can change the display order for your custom fields by click and dragging the field in the list.

Click [Apply] to save your changes.

 

Communication

You can customize the communications that originate from this Giving Page by clicking Edit.

  • New Transaction:  The email receipt that is sent to the donor.
  • Giving/Payment Page Confirmation:  The on-screen confirmation message that a donor sees on a successful transaction submission.
  • Return URL:  The web address for the “Return to Our Website” link at the end of a transaction.

Other terms: giving page? settings? recurring? communications? recurring settings on giving page? set the background on my giving page? set the font on my giving page? change the communications on my giving page? add change the honorarium on giving page? honorarium? upload a header? upload a header to my giving page? add a picture to my giving page? add a logo to my page? add picture? upload an image? 

    Did this article answer your question?

    How can we improve this article?

    Your Name (optional)

    Your Email (optional)

    ]