Hello! In this lesson, we’re going to learn about Campaign Site sections which are the core building blocks for your pages.
Inside Funraise's site editor, you'll see a live, editable preview of your site. In the editor top bar, we can access pages of the site in the page selector and configure universal settings like our site’s theme, Giving Form, and overall settings.
Sections are full-width containers that host content blocks on your page. Your pages can contain many sections.
When you hover over a section, you’ll see a blue border around the entire section, letting you know which items will be impacted when you edit the section’s settings.
Inside the section are content blocks. You can click directly into a content block to edit its contents.
There are many types of sections. For example, there are sections that include a large banner and progress bar. Sections that host a recent donor feed and sections that highlight content and call-to-action buttons in various layouts.
You can add or remove sections on your page. To add a new section to your page, hover right above where you’d like to add a new section and click the plus sign.
This is your section library. It’s a collection of helpful prebuilt content layouts to help you easily build engaging fundraising pages.
For text sections, you can choose from various content layouts and column options. As you become more familiar with Funraise’s sections, you’ll realize that these text sections are really just unique configurations of the same text section—these options provide prebuilt layouts to jumpstart your designs.
Image sections provide helpful layouts for sections that feature large or small images or even split layouts for images and text.
Video sections provide helpful layouts for videos.
Fundraising sections will be available on pages that have a goal, like your Campaign Site's homepage, fundraiser pages, or team pages. For example, on the homepage, we can add a top banner section that includes a progress bar.
We can even add an isolated progress bar and a section that includes a feed of recent donations.
And finally, developers can add an HTML container on the page body to completely customize a section's contents. It’s good for developers to know that scripts placed into the HTML section of a page body will not execute. To execute a function, you’ll need to add scripts to your site’s Header Code Injection, which is accessible from settings.
To get started, we encourage you to play around in the editor and add a new section. Then, you can keep on going adding sections until you’ve got the hang of it. But first, let’s dig into this section.
Your section's overall settings will appear at the top-right of the section. Delete a section by clicking the trash can icon or control the section's theme settings by clicking on the palette icon.
Here you can toggle through your site’s design themes, which are customized in your site’s universal theme settings in the top bar. But wait! It's not just sections that can access universal theme settings—section content blocks can also access these themes.
And finally, in the overall section controls, we can manage the format and background for this section.
Let’s learn about the section background first. The easiest option is to apply no background, which just means that the section will take the background color from the theme.
Or we can apply an image to the background. When using a background image, you can also align the image in the container.
It’s important to note here that background images are exactly that—they are meant to be in the background as a design element, behind your content.
Background images are not content and should not contain text that is meant to be read by the viewer. This is particularly important for your site’s accessibility, but also important because background images are resized based on a viewer's screen size.
It’s common for large parts of a background image to be cut off depending on the viewer’s screen size. This is because the background image will always be resized to fill the entire height and width of the section, which are based on the viewer's device.
If you are adding a poster-type image that contains important text, you’ll want to add a new section with a single-column image so that the section will display that image as content and not background, meaning the image will appear in full on any screen size.
Remember, when you display important text within an image and nowhere else, it reduces the accessibility of your site for users with screen readers.
Alright, and finally in background options, we can set a video for our section background. This option is a bit more advanced—adding videos to the background of websites is very possible, but takes a lot of consideration for both the movement on screen and the size of the file being loaded.
First the basics… You’ll need to provide a direct link to the video file. At the time of this recording, YouTube and Vimeo links cannot be used for a video background.
A direct link to the video file is something your developer can assist with. Or—quick tip—if you’re using a website builder like WordPress or Squarespace, you can upload files and access a direct link from there.
Background videos are best when they are a very short (about 10 seconds) looping video with very subtle movement on the screen. It’s also important to compress your video, as loading a large video file can significantly impact your page’s performance. It’s best to work with a web developer to provide a video file using best practices.
And as a final note on videos… video backgrounds will not display on a mobile device; instead, your section will fallback to a static image if it’s provided, so even if you’re using a video background, you’ll also want to upload a static image for your background as the mobile fallback, and then be sure to flip back into video mode.
When you set the width and height of your sections, you can select small, medium, or large, or set a custom width—And the same options for your height! In most cases, you’ll probably want to use a medium-height setting.
Next up is section grids. Grids bring a level of sophistication and improved user experience to your layouts.
When your section has one column, it has one content block. We can add up to 4 columns and 12 items, or 12 content blocks in each section.
Now, it's time to customize these content blocks. One excellent use case for a grid section is a call-to-action area with specific donation amounts.
Customize the header and text for each column, then add a donation button to make this column actionable. When adding a donation button to your sections, you can also set the default amount that your donation form will open with.
Quick tip: instead of repeating that design process over for each column, you can remove these columns and then add them again. This is a quick way to duplicate a column's layout to other columns; when you add a column, it will copy the design of its previous neighbor.
And as easy as that, you've built a custom donation section that you can continue to configure as your campaign strategy calls for.
Ok… one more cool thing while we’re here!
Each section content block can use a specific theme variation. This is an additional way to highlight your content. To have a content block use a theme, you’ll first need to raise the surface, this means placing the content inside a card, which is a common modern design element.
In most cases, raising surfaces will not be necessary as good design uses the least amount of stuff to communicate the most amount of stuff. But in this case, the raised surface highlights one of these impact amounts specifically, provides nice added structure, and adds an option to feature one of these impact amounts.
For example, we can now select a different theme for this card, visually highlighting a preferred giving option for our site viewers.
Alrighty - Now you’re an expert on Campaign Site sections; have fun! 👋
