Online Payments: Utilizing the Design Tab

The Design tab is a powerful tool. From this one area, you can dictate the entire look and feel of your page or pages.  In this article, we will take a look at the various features of editing the Design of your page, as well as some common settings that many organizations find useful. As always, the Design tab is only accessible while in Edit mode and is found under the Page Settings.

Note: This is an Advanced Editing option. If using Greater Giving Online, be aware of Advanced Edits on the Project Website.

Accessing Design:

  1. While viewing the page you wish to change the Design on, click Edit Page in the top right corner.
  2. Hover over Page Settings in the Online Payments Toolbar, and select Design.

Page Layout:

This area allows for you to determine what sort of page layout you want. Hover over each option to get a short description of each option.

Page Container:

This area allows for you to determine how the “well” of the pane appears. Your options are:

  • Titled – Each module has the title in its header.
  • Clear – Each module has a clear well.
  • Bootstrap – Each module is inset within another border.

Page Style Designer:

This area is the largest area of Design. Here, there are some default CSS color schemes that you can choose from to apply to your page. There is also a Reset All Settings option, to remove any of the default options. The largest portion however, is Change Fonts and Colors. This area allows you to customize nearly every aspect of your webpage, and is most commonly used to edit or update colors. See our Frequently Asked Questions for more specifics on certain common edits.

  1. Click the Change Fonts and Colors drop down menu, and select Edit Page Style.
    • Note: you may notice the options for Global Style and CSS Editing. Greater Giving does NOT support CSS, and is offered only as an option for advanced users.
    • Greater Giving also does not typically recommend Global Style, as changes made to Global Style affect all current and future pages, and do not allow for Page edits to occur. Certain exceptions may apply, such as organization color schemes, adjusting default link size, or special footers.
  2. Click the new drop down menu titled <Setting>.
  3. Choose which option you would like to change. The menu is broken down as “Topic – Particular”, such as “Colors – MainText”, or “Backgrounds – PageBackgroundImage”.
    • Common options to change include any of the Colors – Options, Fonts – LinkSize, Fonts – NavLinkSize, and Backgrounds – PageBackgroundImage. Please see our Design Categories for more information on each category.
  4. Once you have made a selection, click the new third drop down menu titled <Option>.
    • Option changes based on what topic has been selected. Colors will feature a color palette, Fonts will feature a list of acceptable fonts, Spacing will feature a pixel spacer, and certain Backgrounds will feature an image uploader.
  5. You can click the Save key to the right to save that current setting, and change another. Alternatively, click Update in the bottom left to exit the Designer and save your setting.

Friendly URL:

A friendly URL is a shortened link that is easy to distribute to your supporters and staff members.  Rather than use the long, often difficult to remember and type URL, Greater Giving recommends setting up a Friendly URL to allow easy access to your page. In the Design tab, click Friendly URLS. You are given a few options.

  • Home Page Not Logged In – This page becomes the default page when someone is NOT logged into Online Payments.
  • Home Page Logged In – This page becomes the default page AFTER someone logs into Online Payments.
  • Friendly URL – This is the area where you customize your Friendly URL. Note: The portion outside of the text box cannot be changed at this time. There is also a check box for if the URL is already in use, to switch it to this page.

Other Settings:

The Other Settings of the Design tab include a Start and End Date for this page. If you want a page active for only a certain window of time, you use these areas to determine the length of that window. Once the End Date has been reached, you will have to log in to Online Payments to view the page.

Was this article helpful?
0 out of 0 found this helpful