Custom blocks in legacy campaigns
Before you start
This article covers custom blocks in legacy campaigns. For an easier and more versatile campaign builder, check out our article on the Studio campaign designer.
You can add both custom text blocks and custom code blocks to your GoFundMe Pro campaigns. Custom text blocks do not require any coding knowledge so they are great for an easy way to customize your campaign’s pages.
Creating custom code blocks is an advanced feature that requires knowledge of HTML and CSS. Any custom code you enter will only apply to the custom code block.
Important: Custom code blocks only accept HTML and CSS. Javascript and other programming languages are not accepted. Also, please note that the GoFundMe Pro Care Team does not provide code development services.
What can I do with custom code?
The creative control you gain with custom code depends on your level of expertise. However, common uses include building custom headers, donation buttons, and footers.
For example, The Hope Exchange leveraged custom code to create their own spin on impact tiles. Their calculator changes to correlate different gift sizes with impact.
Note: The code you add to a custom block will only apply to the block it was added to—it is not possible to target elements that are within other content blocks.
Add a custom block
- Open the campaign you want to edit
- Select the Pages tab
- Select the page you want to add a custom block to
- Select the Design tab
Note: You can add a custom code block on any GoFundMe Pro page within a campaign. Custom text blocks can also be added to most campaign pages except Team and Individual fundraiser pages.
- Under Content Blocks, select Add content to page
- Drag and drop the Custom or Text content block to the location you want in your menu
Custom text blocks
Custom text blocks require zero coding knowledge which makes them a great match for organizations who want more creative control. After you’ve added a custom text block, select it your menu to start editing it.
Headline
To change the headline of your custom text block, simply make edits in the text block. You can also change the color using the color circle or click on the headline in the preview to access more editing tools. Mark the hide headline checkbox to hide your headline.
Content
The content block is the most versatile tool in your custom text block editor. You can add text, images, videos, and even links. Use the tool bar at the bottom of the content block to do so.
Highlight the text in the preview to access additional editing tools. You can change the color of the text, the alignment, and even the font.
Tip: One of the most common content ideas is creating a custom button. We recommend using Da Button Factory for help creating your button. Simply make your edits, download your button image, and upload it to your GoFundMe Pro text block. Select the image in the editor to add a link.
Background
Use the background color circle to change the background color of your custom text block. Or, select Upload Background Image to upload a background image. If you upload an image, you can then edit the position and opacity.
We recommend trying the Cover & Fixed position. This ensures the image will stretch to accommodate the height and width of your custom block and lock in place for a sleek 3-dimensional look.
As for opacity, the higher you go, the less transparent your image. Try decreasing your opacity percentage to add a tint to your content block. The color of the tint will match the color you chose with the background color circle.
Save your work
Select Save & Update Page at the top of your editor and voila. Your custom text block has been created.
Custom code blocks
Custom code blocks are used for adding HTML and CSS that you can use on any campaign type and page. In order to keep GoFundMe Pro secure, we do not support any other types of code such as Javascript.
- Select the Custom content block to open the code editor
- Under Markup enter your HTML code
- Under CSS enter your CSS code
- Select Save & Update Page
Optional background tools
Every custom content block comes with tools for changing the background color or adding a background image. You can use code to add your background color and image, but we've included these tools to help you save time.
Custom footer
One of the most popular uses of custom code blocks in GoFundMe Pro is creating custom footers. While the default footers are designed to provide key information with aesthetic appeal, custom footers open potential for custom branding and link sharing.
Note: Creating a custom footer on one page will not apply it to your other pages.—you'll need to create your custom footer for each page in your campaign. We recommend starting with the first page in the list to help you keep track of your progress.
Hide the default footer
- Navigate to your campaign’s design tab
- Under content blocks, toggle off Footer
This will remove your footer from your campaign’s pages. You can always go back and toggle it back on.
Create Your custom footer
- Under content block, select Add content to page
- Drag and drop the Custom content block above the Footer content block
- Select the Custom content block
- Under Markup enter the HTML for your custom footer
- Under CSS enter the CSS for your custom footer
- Select Save & Update Page
- Repeat the process for the other pages in your campaign
Frequently asked questions
What are some coding resources?
While the GoFundMe Pro Team does not provide code development services, we do recommend a few resources that can help you take advantage of custom code:
What are some common uses for custom text blocks?
Most of the time people use custom text blocks to add more content or text to their page. However, you can also use custom text blocks to add:
- Infographics
- A place to post updates on your page
- Videos
What are the restrictions for custom code blocks?
HTML
- Style tags are not supported in the HTML editor. Please use the built-in CSS editor for all styles
- Script tags or any references to external JavaScript are not supported
- iFrames are not supported
- Insecure URLs are not supported—all URLs must begin with https://
CSS
- GoFundMe Pro does not support External Style Sheets. The GoFundMe Pro editor only accepts styles from the built-in CSS editor to maintain a secure platform
- Google Fonts are the only supported external fonts
- Insecure URLs are not supported—all URLs must begin with https://
What is HTTPS and why should I use it?
HTTPS stands for Hypertext Transfer Protocol Secure. It allows information to flow securely between a server and browser.
The problem with regular HTTP is that it does not secure your information and leaves it open to the risk of being stolen. For this reason, HTTP links can lead to warning messages within your browser.