How Do I Create a Custom Block For My Campaign Pages?

Last Updated: Oct 04, 2018 09:27AM PDT

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. Open Your Campaign

Navigate to your account's Campaigns tab and click on the campaign you want to open. This will bring you to the Overview tab for that particular campaign.

2. Select the Pages Tab and a Page to Work On

Once in the Pages tab, select the page of your campaign you wish to add a Custom Block to. A Custom Block can only be added to one page of your campaign at a time.

3. Select the Design Tab

Next, click the Design tab. It is located on the right side of the screen next to the Setup Tab.  

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

HTML

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.
D. External Scripts are not supported on Classy pages, so any code between script tags, or any references to external JavaScript code will be stripped from your Markup upon saving your work.

CSS

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!
B. Any CSS value containing "expression", "javascript", "behavior", "binding", or "link" will be stripped from your styles for security purposes. Additionally, any @font-face or @import directives will be stripped if detected in your styles.
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.