As one of GivingFuel's signature features - our page builder gives you the opportunity to showcase your organization's unique identity through customized design and branding elements. This article will guide you through the process of personalizing your GivingFuel page by adjusting fonts, colors, and backgrounds, ensuring that your fundraising efforts not only resonate emotionally but also visually align with your brand.

Edit the Style of GivingFuel Fields

Getting Started

From the Pages screen, click the pencil icon on the page you want to edit
Click Design Settings in the top right corner to display the design options
Select Styles at the top of the field

Headings

This field can be used to customize the formatting of any headings on your donation page.

Select the Headings dropdown
Edit the headings as desired
- Font: Select the heading font
- Font Size: Select the font size for the headings
- Heading Color: Customize the heading color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like
- Bold/Italics: Select if you would like the headings to be bolded or italicized
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Paragraph Text

This field can be used to customize any paragraph text (non-heading text) on your donation page.

Select the Paragraph Text dropdown
Edit the paragraph text as desired
- Font: Select the paragraph text font
- Font Size: Select the font size for the paragraph text
- Heading Color: Customize the paragraph text color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like
- Bold/Italics: Select if you would like the paragraph text to be bolded or italicized
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Text Links

This field can be used to customize the color of any text links that are on your donation page.

Select the Text Links dropdown
Customize the text link color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Buttons

This field can be used to customize any buttons that are on your donation page.

Select the Buttons dropdown
Customize the button color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Fields

This field can be used to customize how the labels are centered, the style of any input boxes, and the width between fields on the page.

Select the Fields dropdown
Edit the fields as desired
- Label Position: Select how you would like to center any labels on your giving page
- Input Box Style: Select whether you would like any input boxes (fields where donors enter information) to have square or rounded edges
- Field Width: Select the width you would like to have between any fields on the page
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Custom CSS

This field can be used to add any custom CSS to the page.

Warning: Custom CSS can break a GivingFuel page if formatted incorrectly. We only recommend using custom CSS on a GivingFuel page if the user understands how CSS works.

Select the Custom CSS dropdown
Enter the CSS into the dropdown
Click Done
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Edit the Background

Getting Started

From the Pages screen, click the pencil icon on the page you want to edit
Click Design Settings in the top right corner to display the design options
Select Background at the top of the field

Foreground Color

This field is used to edit the foreground color on your giving page.

Select the Foreground Color dropdown
Customize the foreground color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like.
If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Background Color

This field is used to edit the background color on your giving page.

Select the Background Color dropdown
Customize the background color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like
If you use the color block square to adjust the color, make the color more or less opaque by adjusting the opacity slider next to the color slider
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Background Image

This field can be used to add a background image to your giving page.

Select the Background Image dropdown
Click Choose an Image
Select one of the background image options
- Upload Your Own: Select Choose File to upload a new image, or choose from one of the images that has already been uploaded
- Use One of Our Photos: Search by keyword to find a photo, and select the image
- Browse Patterns and Textures: Select Abstract Backgrounds or Polygon & Geometric Backgrounds, and select the desired background

Color Overlay: Add an overlay over the image with a color you select. If turned on, customize the overlay color by clicking the color block square and selecting the desired color, or manually adding a color hex you would like
Position: Select where you would like the crop to begin if your image crops out a portion of the photo
Repeat: Select if you would like your image to repeat
Scroll: Select how you would like to image to interact when donors scroll
Scale: Select how you would like the background image to scale on the page
Click Save Now in the upper-right corner of your page to save your changes. Click Publish to publish these changes to your live page

Customize the Confirmation Page

Create Your Peer to Peer Page

Add a Button that Directs to your Donation Page

Intro to Building Your First GivingFuel Page

Add Text Formatting Options to Your Giving Page