At Classy, we believe in empowering our clients to make the most of our platform. In that ethos, campaigns include custom HTML/CSS content blocks. Custom Blocks give your organization full creative control over how your campaign landing page looks and functions. This article will demonstrate how to add a Custom Block to your campaign.
Important Note: Custom Blocks are created solely through the use of HTML & CSS code. This means that if you are starting from scratch, some level of coding knowledge will be required in order to create a completely custom block for your page. Please note that writing the code for a Custom Block is solely your responsibility. Classy's Support Team does not provide any additional code development services or offer any assistance in creating Custom Blocks.
1. Navigate to the Classy Manager
If you’re in the classic dashboard view, click on the avatar in the top right-hand of the screen and select “Try the new Classy Manager.”
2. Navigate to your Campaign Manager
From the Classy Manager, click on the Campaigns tab and open the campaign you wish to work on.
3. Select a page to work on and open the Design tab
A Custom Block can only be added to one page of your campaign at a time. To get started, click on the Pages tab in your campaign manager and then select the page of your campaign you wish to add a Custom Block to. Then click on the Design Tab to access the Campaign Designer.
4. Add a Custom Block
Below the left-hand side list of Content Blocks, click the open the Add Content To Page drop-down menu. Drag and drop the Custom block to the desired place within the list of Content Blocks above to add it to the page.
To get started on writing your Markup, click on Custom in your list of Content Blocks to enter the code editor.
5. Write HTML & CSS Code
Content can only be added to a Custom Block through the HTML area of the code editor. Any HTML that is added to the CSS area will not materialize into content on the page. As usual, any code you write will reflect and update in real time in the page preview to the right of the code editor as well.
Important Note: Classy has implemented some security measures into our Custom Blocks to ensure no custom content will be harmful to our platform. See below for some restrictions to keep in mind when writing your Markup.
A. All images should be sourced from secure URLs which begin with https://, not http.
B. iFrames are not supported and will be stripped from the Markup upon saving your work. This includes attempts to embed videos from third-party sites. If you wish to embed a video, please insert a Text Block into your campaign and embed a YouTube or Vimeo video within that block.
C. Any code nested between style tags included in your HTML Markup will be stripped from the code upon saving your work. Please make sure all styles are included in the CSS of your Custom Block code.
Once your HTML is complete, it can then be styled with CSS in the CSS area of the code editor.
Important Note: Classy has implemented some security measures into our Custom Blocks to ensure no custom content will be harmful to our platform. See below for some restrictions to keep in mind as you write the styles for your HTML elements.
A. The only external fonts that Classy supports are Google Fonts. To add one of these fonts to your styles, simply add the font name to your font-family property as if the font is already declared in your stylesheet. Classy will automatically source that font from Google Fonts for you!
C. All styles are restricted specifically to the block which they are written for. In other words, there is no way to target content that belongs to any other Content Block.
D. All URLs included with your CSS that do not begin with secure URLs will be stripped from your styles. All image URLs must be sourced from a URL beginning with https://.
6. Background Options
To make things a little simpler for you as you create your Custom Block, we have incorporated some additional ways to add a Background Color or Background Image to your block without having to write the code for it yourself.
A. To add a Background Color, simply select the color you wish to use from the color picker or enter in a specific Hex Code value.
B. To add a Background Image, open the Advanced Options drop-down menu, and then click Upload Background Image. You also have the ability to set the Background Position and Background Image Opacity.
Pro Tip: To make a background image less distracting, choose a background color that matches your campaigns color scheme, and then adjust the Background Image Opacity to make the image more transparent. This will give the image a cool tinted, muted effect that will allow your foreground content to really stand out.
7. Save and Update the page
Once your Custom Block is looking the way you want, hit Save & Update Page!
While we are happy to review the code you are writing within a Custom Block, we do not provide support in building code. If you have any questions please contact Classy Support.