You are here: Configuration Tasks > Page Designer > Design the appearance and format of web pages

Design the appearance and format of web pages

  1. From Web, click Page designer under Configuration. The page designer appears.

  2. On the Select Layout tab, select a layout for your web pages. The layout appears under Preview. The layout determines where items appear on your web pages. You cannot design a custom layout; you must select from the default options.

  3. Click Next. The Color & Styles tab appears. The Basic colors and styles section allows you to make basic tweaks to fonts and colors, while the Advanced colors and styles section allows you to edit the style sheet directly.

  4. Under Background Colors, select background colors for sections of your web pages. When you click a checkbox, a color palette appears.

  5. Under Page Typography, select the font for all text on your web pages, and select the size and color for body text.

  6. Under Form Title, select the font size and color for section headers.

  7. Under Form Labels, select the font size and color for field labels.

  8. To use Cascading Style Sheets (CSS) to edit the web page’s appearance, select Advanced colors and styles and click Edit stylesheet. The Stylesheet text editor appears.

    On this screen, you can edit properties through CSS. For example, you can edit the web page’s fonts, colors, backgrounds, and other properties. You can also insert HTML tags and apply styles to them.

  9. To load the CSS selectors that allow you to edit the appearance of forms, click Insert CSS selectors. The CSS Selectors screen appears. You can access this screen multiple times to add multiple selectors.

  10. In the Insert selectors for field, select the CSS selector to load in the Stylesheet text editor. To include the default styles along with class names, select Include defaults.

  11. Click Insert. You return to the Stylesheet text editor, and the selectors appear in a new section within the editor. Edit the styles as necessary.

  12. To save your edits and return to the page designer, click Save. Or to save your edits and keep the Stylesheet text editor open, click Apply.

    Warning: When you save or apply changes in the Stylesheet text editor, the changes go into effect immediately. Website users who access forms can view your changes. We recommend that you check your web forms when you save or apply changes to confirm that the changes have the desired effect.

  13. To erase all changes to the style sheet and restore the design settings in the Basic color and styles section, click Reset.

  14. Click Next. The Configure Content tab appears. On this tab, you can edit the header, footer and columns for the web pages where your forms appear.

    Tip: If you expect website users to print web pages, you should keep this in mind when you style headers, footers, and columns. For example, if you include a menu with many links and website users print the confirmation page, the printed ouptut may be spread over multiple pages. On the Colors & Styles tab, you can select Advance colors and styles to address this scenario with a CSS media query in the style sheet.

  15. Click a header, footer, or side column. An HTML editor appears.

    Note: You cannot edit content in the center of the page with the page designer because this section displays your web forms and payment forms. If you click this section, the screen that appears does not include an HTML editor. To edit this content, you edit the payment settings and web forms. For more information, see Create Shopping Cart, Donation Forms , Program Forms, or Membership Forms.

  16. In the HTML editor, edit the content for your web pages. You can format the appearance and layout to make the pages that you create in Web look similar to the rest of your website. For example, you can include the same images and text in the header that you include in the header of your organization’s website.

    Note: If you include links to web pages that do not secure content with Secure Sockets Layer (SSL), a warning appears when website users click the links.

    For information about the buttons and menus on the HTML editor toolbar, see the general features section of the help file.

    Warning: If you use the Edit HTML source button to edit the HTML source code for your web forms, do not include a reference to load jQuery. Web forms already include a recent version of jQuery, so any additional reference is unnecessary and could conflict with the basic features of web forms.

    Tip: If you use the Insert image button to upload images to match your website, remember that the program does not reflect any changes on your website. To update images on the web pages you create in Web, open the page designer and upload updated versions of the images.

  17. After you review the format and appearance of your web pages, click Submit. You return to Web.

    Note: Design settings are active as soon as you select them in the page designer, but to apply them to the secure payment page, you must click Submit. To help you comply with PCI DSS, the program analyzes the design settings for compliance purposes and removes content that is not PCI DSS compliant. To apply your design settings to the secure payment page, click Submit.