Using the Studio designer
Before you start
Check out our design checklist to help you launch a polished campaign that enhances the donor experience.
Campaign Studio’s designer provides flexibility so you can build your campaign’s layout, design the look and feel of your pages, and add text, buttons, images, and more using the versatile drag-and-drop feature.
Add, remove, or move blocks
Add sections and elements to your canvas by dragging and dropping them from the editor to your canvas. To move or remove blocks, hover over the element or section and select the appropriate icon.
Note: Switch to mobile view to rearrange or hide sections without impacting your desktop view. This helps create the best mobile experience for your donors.
Add blocks
Add layouts, elements, and widgets to your canvas by dragging and dropping the block from the editor to the canvas.
Remove blocks
Remove sections, elements, or widgets by selecting the block you want to remove and selecting the trash can icon.
Tip: Confirm you’re removing the right element or section by viewing the tab that appears when hovering over the block.
Move blocks
Move a section, element, or widget to another part of the canvas by hovering over the block, selecting the drag icon (six dots at the top), and dragging it to its new location.
Layouts
Layouts are either blank or pre-built sections you can drag-and-drop onto the canvas. Once on the canvas, you can add elements or widgets to the sections.
All layouts span across the full width and are placed furthest back on the page. You can have up to three sections within a layout. This provides flexibility for how to arrange the elements and widgets.
Note: Studio campaigns are responsive to the user’s browser so elements will stack vertically on mobile devices. This lets users easily navigate your page no matter the width of their browser.
Edit layouts and sections
To select a layout, hover over the left-hand edge of the canvas. To select a specific section within a layout, select any empty space within that block.
When you select a layout or section in the canvas, you’ll have several options to edit it.
Background image
Upload a background image to appear behind your content. For best results, start with an image between 1500px and 2500px in width.
Images must be JPG, PNG, GIF, or WebP and smaller than 2MB but we recommend using images less than 500KB to boost page load speed.
For more information, check out our guide on images.
Layout height (only for Layouts)
You can adjust the height of your layout by choosing between XS, S, M, and L. However, the height will also adjust to fit the content within the layout’s sections.
Alignment (only for Sections)
You can adjust the vertical alignment of content within a section by choosing between Top, Middle, and Bottom.
Background color
You can add a background color for a section or layout by selecting the color circle and choosing a color. Then. adjust the Opacity to fit your needs.
To darken a background image:
- Select black as the background color
- Adjust the Background image’s Opacity
Border
You have several options to add a border to sections or layouts. Choose where you’d like the border to appear and adjust its color and width.
Blank layouts
Blank layouts consist of 1-section or 2-section layouts. These layouts do not include any elements or widgets.
1-section
Use a 1-section layout to stack elements or widgets on top of each other.
2-section
Use a 2-section layout to set elements and widgets side-by-side.
3-section
Use a 3-section layout to add even more elements and widgets within a single horizontal section. Remember these sections will still stack vertically on mobile devices.
Prebuilt layouts
Prebuilt layouts include certain elements and widgets by default. Once added, you can adjust these layouts to fit your needs.
Hero overlay
The hero overlay is a 2-section layout with separate background images and a left-aligned title and paragraph element.
Donation layout
The donation layout is a 2-section layout with a donation form, share button, and FAQ widget. It also includes a header and paragraph element.
Impact tiles
The impact tiles layout is a 3-section layout with three impact tiles placed side-by-side. You can use impact tiles to package certain donation amounts and frequencies that will go to support a specific cause within your organization.
Leaderboard
Add a leaderboard to the landing page of a GoFundMe Pro peer-to-peer campaign to drive competition and engagement with your supporters. Once you add a leaderboard, you can customize the background color and the main button's border radius.
Activity feed
An activity feed can be added to a landing page or thank you page. Once added, select the activity feed to customize the style of the Show more and Comment buttons.
The feed will animate recent names and trigger real-time notifications (honoring anonymous donations) to encourage sharing and inspire engagement after a donation is made. To control these options, select the activity feed and choose which actions to allow, such as likes, comments, or donation nudges.
Note: Turning off comments won't stop donors from leaving a note at checkout, as long as that option is on in your campaign settings.
Footer
The footer layout can only be added to the bottom of the page. It includes information about your organization, including the name, address, contact information, and social links.
Use the editor to style the background color and opacity of the section. Also, select the Configure tab to edit the logo and social links that appear.
Elements
Elements are the page's content, including text, buttons, and images. Add elements to sections of your page by dragging and dropping them onto the canvas.
The full list of elements includes:
Tip: Select the mobile settings button when editing a title or heading to apply a different text size or alignment for the best mobile experience.
Title
Title elements are a large header that can improve accessibility and SEO. You can add only one title element per page and we recommend placing it near the top.
Heading
Heading elements are also headers that appear smaller than the title element. Use these to introduce additional paragraph content on the page.
Paragraph
Paragraph elements consist of the main text on your page. We recommend placing paragraph elements below a title or heading element.
Button
Button elements can link supporters to another campaign or an external page. Once added, you can adjust the button’s label, alignment, color, and border.
The width of the button is determined by it’s content.
Start fundraiser button
Fundraiser buttons are added to GoFundMe Pro peer-to-peer campaigns, sending your fundraisers to GoFundMe to create their page.
The fundraiser button will always be left-aligned.
Image
Image elements are placeholders you can use to upload images to show on your campaign’s page. Note that these are separate from background images for sections.
Images can be JPG, PNG, GIFs, and WebP and must be smaller than 2 MB. We recommend using images less than 500 KB to boost page load speeds.
For more information, check out our guide on images.
Video
Video elements are placeholders you can use to add videos from YouTube or Vimeo. Uploaded videos or videos on other platforms are not supported.
When you link to a video, the description will automatically update with the video's title. Ensure to include a video description to improve your page's accessibility.
You can also mute your video automatically or enter a specific start time. Just adjust the toggle and field, respectively, in the element's editor.
Custom code
Custom code elements let you add HTML and CSS to your campaign’s pages (Javascript is not supported). Also, please note that our Care team does not provide code development services.
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.
Stretch to fit
Images, videos, and custom code elements have an option to Stretch to fit section. When turned on, the block will take up the full width of its section and, if possible, the full height as well.
Select image and custom code elements in the canvas to find Stretch to fit section in the editor.
Custom footer
One of the most popular uses of custom code is creating custom footers. While the default footers are designed to provide key information with aesthetic appeal, custom footers open the 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.
First, remove the default footer by selecting the block on the canvas and selecting the trash can icon. Then, create your custom footer:
- Under Widgets, drag and drop the Custom code block to the bottom of the page
- Select the text in the block to pull up the HTML and CSS sections
- Enter the HTML for your custom footer
- Enter the CSS for your custom footer
- Save the page
- Repeat the process for the other pages in your campaign
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
- We do not support External Style Sheets. The 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://
Widgets
Widgets are advanced elements with specific use cases and features built-in. You can add widgets just like other blocks by dragging and dropping them onto the canvas.
The full list of widgets includes:
Donation form
Supporters use the donation form to contribute to your campaign. Once added to the canvas, you can customize the heading, the tax-deductible message, the donation frequencies, and the donation amounts. Or, turn on Intelligent Ask Amounts to optimize your donation frequencies and amounts based on your campaign goals.
You can also show recent donations directly on the form to inspire others to give. To turn this on, select the form, then check Show ticker under the Donation ticker settings.
Progress metrics
Use progress metrics to show your success to date and help encourage potential supporters to join your cause. After adding to the canvas, you can customize colors and display the goal amount and number of supporters.
Impact tile
Use impact tiles to show supporters how specific donation amounts can make a difference. Once added to the canvas, you can adjust the impact tile's image, text, program designations, and donation options.
Countdown timer
Add a countdown timer to the top of your donation page to promote a sense of urgency and improve conversion around any time-bound moment, not just major fundraising events. Select from a list of preset events or set a custom start and end time.
After adding the timer to the canvas, you can customize the heading text and colors.
When the timer ends, it will disappear from the donation page, and it won't deactivate your campaign.
Note: The timer automatically adjusts to each donor's local time zone.
Share button
The share button lets supporters share your campaign via social media, email, or text. When someone selects your Share widget, a pop-up appears to share your campaign via the methods you allow.
Once added to the canvas, you can customize the heading and subheading that appears in the pop-up, the options that appear, and the style of the button.
To edit the default messages used for sharing, visit your campaign’s settings.
FAQ
The FAQ widget lets you add frequently asked questions to your campaign’s pages to reassure supporters. Once added to the canvas, you can add, reorder, and delete questions to give your supporters the best information.
We recommend editing the FAQ with your tax deductibility information. It's important to donors that this information is accurate.
Add hyperlinks
You can add hyperlinks to an FAQ by using HTML in the answer box. You will place an <a> tag around the text you want to hyperlink, along with the hex code for the color of the hyperlink.
For example, if you want to link to the GoFundMe website with green text, the HTML code will look like this:
<a rel="nofollow" target="_blank" href="https://www.gofundme.com/" style="color:#148044"><b>GoFundMe website</a>Check out free resources like W3 Schools to find the hex code you want.