Custom blocks allow you to use custom HTML and CSS code to control how your campaign pages look and function. These blocks are a good option for nonprofits who want to create anything from custom footers to additional content blocks outside of what Classy templates provide.
In this article, we will explain how to create a custom block using the following steps:
Note: Creating custom blocks is an advanced customization feature that requires coding knowledge. In that sense, the information provided here assumes readers have some level of experience with coding. Please note that the Classy Care Team does not provide code development services. Don’t have coding knowledge? No worries, you can do a lot of the same work with custom text blocks.
Create a Custom Code Block
1. Open the campaign you want to edit and select the Pages Tab
2. Click on the page you want to add a custom block to
Note: We chose the Landing Page for the images in this guide, but you can create a custom block on any Classy page within a campaign. However, we recommend keeping custom blocks off of Donation Pages where streamlining is key.
3. Select the Design Editor and click the Add Content to Page dropdown
4. Drag and drop the Custom block to the desired place in the left-hand menu
Pro Tip: Before going any further, we recommend you unpublish your campaign if it is public. To do so, click the Unpublish button at the top right of your editor. This ensures that you can work on your code and check it for quality before it is visible to the public. When you are finished editing, hit the green Publish button.
Add Your Code
1. Write your HTML code in the Markup text block
2. Click the CSS tab and write your CSS in the text block
3. Click Save & Update Page at the top of your editor to save your work
Note: Our team has strived to offer as much creative control as possible, but we implemented a few security measures to ensure no custom content will harm the platform. As a result, there are a few limitations—Classy does not support external style sheets, external fonts outside of Google Fonts, or scripts. In any case, keep an eye on your preview to the right to ensure your changes appear.
Optional Design Tools
Each custom block editor comes with tools for adding background colors and images to your custom block. You can always add these in with code, but using the tools can help you save time.
To have complete control over your images, we recommend using code. That said, our tools are designed to be mobile responsive and will make images look good on most devices.
1. Click the Background Color Circle at the bottom of your editor to add a background color
- You can use our palette or add a Hex Code Value
2. Or click Upload Background Image to add a background image
- If you use a background image, the background color will not display
3. Click the Background Position dropdown and select the style you prefer
- Steps 3 and 4 are not available unless you add a background image
- We recommend trying out each style to see which pairs best with your custom content
4. Move the Image Opacity Slider to change the opacity of your background image
- At 0 percent opacity your image will be transparent and your background color will display
- Move the slider just a bit to the left to make your image appear tinted by the background color
5. Click Save & Update Page at the top of your editor to save your work