Pages Configurations and Settings Part I: Configure Look and Feel (Version 2+)

Pages Configurations and Settings Part I: Configure Look and Feel (Version 2+)

1. This tutorial will cover how to configure the look and feel of Pages.
2. Pages is one way that you can integrate your website and our CRM in order to allow online registration for events, online donations, online pledges, online membership purchases and renewals, and/or e-Store purchases (our WordPress Plug-Ins are the other way and the Donation Widget is a third option for online integration for donations).
3. Pages are stand along web pages that sit on our server and which you link to from your website (for example, you  might configure a donation page through Pages and then add a "Donate Now" link on your website that directs the user to your CRM donation Page. There is no additional fee for using Pages - it is included in all CRM subscription plans.
4. All configurations of Pages are done from inside your CRM.
5. The first step in using Pages is to configure the overall look and feel. If you wish to use Pages for online donations and/or pledges, you will then also configure one or more donation and/or pledge pages. The Membership Pages and Event Pages have no configurations - you simply turn them on or off. All settings/configurations for events and membership are pulled from your Pages overall "look and feel" configurations and the event/membership level configurations inside your CRM.
6. To configure the look and feel of Pages, start by clicking on Website Integrations on the CRM Main Menu and then clicking Pages on the Website Integrations sub-menu.
   
7. This will take you to the Pages index page. Here you can configure the overall look and feel of your pages (no matter what type of Page it is [event, membership, etc.], it will pull from a common set of configurations (color scheme, background image, etc.), get the URL of the front facing/public pages your constituents will access, turn on and off the various types of pages (donation, membership, etc.).
8. To configure the look and feel of your pages, click the Configure Look and Feel box.
   • Please Note: if you wish to see what your Pages will look like to the public/the live, front-facing pages, highlight the URL at the top of the screen, *open a PRIVATE browser window*, and paste this into your browser address bar. If you navigate to the front facing Pages URL *in the same browser session/window where you are logged into our CRM, you will be taken into Pages in Admin mode/into the "configure look and feel" screen. You MUST either first log out of our CRM or open Pages in a private browser window to see what it will look like to the public
9. Clicking on Configure Look and Feel will take you to the Configure Look and Feel page. In the center of the page you will see a preview of what your front facing pages will look like. From here, you can configure the menu items as well as your pages' background image and color scheme.

   

10. Begin by deciding if you would like a background image for your pages. If so, click on Background Image and Logo on the right hand side.

    

11. By default, YOUR organization's logo will be added to your Pages and will show in the upper left corner of each page (in the image below, you see our company logo because this is our demo site. YOUR logo will show here on your pages). The logo image is pulled from the logo you have uploaded in your Organization Information section of the My Account area (click on your log in name in the upper right and select My Account to access the account information area). If you wish to hide/remove the logo, click on the "Hide Logo" check box.

    

    

12. To add/remove a background image, hover over the "Header" image in the right hand side. A trashcan icon and a pencil icon will appear. Click on the trashcan to remove an existing background image. Click on the pencil icon to upload a new background image (a pop up will open allowing you to browse images on your computer and upload a new image). The background will be changed immediately to the new image uploaded. Please Note: background images should be sized to at least 1200 px x 800 px. It's important to understand that images will scale dynamically to the size of the screen that it is being viewed on. As such, the image may sometimes be cut off (as the alternative would be to scale images in such a way that they might end up with white space on one side or the other when the image isn't the same dimensions as the screen). We strongly recommend using an image where any text and the major design element is centered in the image.
    

    

13. Next, if desired, change the secondary/accent color used throughout your pages by clicking on Body on the right hand panel.

    

14. "Shade 1" is used for accent colors such as check marks and the currency designation on the right side of the screen. "Shade 2" is used for buttons and text that changes (sub-total amounts, "fill in own amount fields," etc.). Please Note: you cannot change the font, font size, or font color used in Pages, nor can you change the background color behind the text.

    

    

    

    

15. When you have completed editing the content, click on the Save Changes button in the lower right, or if you need to start over, click the Restore button.

    

16. Changing the menu items displayed can be done by clicking on the Add/Edit Menu(Gear) button on the right of the menu area.

    

17. The resulting Configure Menu screen will allow you to modify the menu in various ways.

    

18. To change the order of an item, click on menu item and drag and release it in the new location you wish it to appear.
19. If you wish to edit a page listed in the menu, click on the Edit (pencil) button for the entry you desire to edit. If you wish to Delete a page, click the Delete (trashcan) icon.

    

20. Items with a + (plus sign) to the left of them are a parent menu with sub-menu items. Clicking the plus-sign will expand the menu item to show the sub-menu items. For example, here our Donate Now menu has two sub-menu items. In the third screen shot, we are in the front facing/public side and hovering over the words Donate Now in the menu to see the sub-menu items.

    

    

    

21. To add a new menu, either click the "Add Menu" button in the lower right OR click the + to the RIGHT of any item to add a sub-menu item to any menu item.

    

    OR

    

22. In the resulting pop up, start by giving your menu a Menu Name (this WILL be visible to users/will be the name of the item that appears in the menu).

    

23. The Page Title is the text that will appear at the top of the page. This field MUST be filled out for your menu item/page to appear online.
    

    

24. The Menu Item Type field will allow you to change the type of page the menu item will link to. If you choose Events, Membership, Member Directory, e-Store, Pledges, or Donations, the system will automatically create the page - there are no configurations or settings. For example, if you select type as Events, then the system will automatically link that menu to your Pages events index page on the front end. If you choose Donations, the system will link the menu item to your DEFAULT donation page (all other published donation pages will automatically be added as sub-menus under the donations parent menu item.

    

25. If the Menu Item Type for the page is set to Text Page, you can configure a static text page for your website visitors to view. You can also firewall this page in a "Members' Only" area accessible only to those who have an active/current membership. Please Note: You will configure the text/content for this page AFTER you finish configuring the menu. See step #32 below for details.
26. The External URL field, for use with the External URL Menu Item Type option, allows you to link this menu item with a specific external webpage. Just add the URL of the page you want users to be navigated to when they click the menu item.

    

27. Click the "Default Landing Page" check box to make any page the default page that users will land on when they first come to your Pages area and the page they will be redirected to various types of actions such as logging out of their account/public profile. You can select ONE page to be the default landing page.

    

28. When done makes changes, click on the Save button.

    

29. When you have finished configuring the menu, you may simply click the Close button in the top right corner, and return to the preview mode of Pages.

    

30. To preview any page, click on the item in the menu and that page will open/preview in the main panel of the "configure look and feel" page.
31. To edit the content of a Text Page that you created during menu configuration, click on the item in the menu.

    

32. This will take you to the page you have selected in edit mode, where you can edit the text of the page by moussing over the text area and clicking on Edit (pencil).

    

    

33. The resulting Edit Content popup screen will allow you to enter your content, and format it as desired.

    

34. The editor will also allow you to insert images, hyperlinks and a number of other useful functions.
35. When editing is complete click on Save.

    

36. When you have finished all of your configurations, click the Save Changes button in the lower right hand corner of the screen. You can also undo all changes you have made and reset to the default settings by clicking the Restore button instead.

    

37. To leave the "configure look and feel" area and return to the Pages index screen, click the "back" arrow IN CRM (not your browser's back button) in the upper left hand corner of the screen.

    

38. After configuring your Pages, you will need to activate your Payment Gateway/Stripe account in order to process credit cards. It is required to configure the payment gateway even if all of your online transactions are free (free events, free memberships, etc.). Learn more about configuring the payment gateway in this tutorial.