I know what you’re thinking. If you want to DESIGN a page layout, why do you need to worry about coding something? Aren’t coding and design two separate things? The short answer is, no, not really. At least, not anymore.
These days, coding HTML, CSS, and even sometimes JavaScript are often considered a branch of web design, not web development. The reason for this is that HTML, or Hypertext Markup Language, serves as the foundation for the design and layout of a page. HTML is generally what determines the placement of content on a page. In another article, I share how wireframing a page or site is like building scaffolding for the structure of the page. If that’s the case, HTML is like framing out a house. It’s the bones of the page, in a way. It helps determine where the content sits on the page and allows you to apply styles to the content through the use of a CSS “class” or “id” on an HTML element.
That’s where CSS comes in. CSS, or Cascading Style Sheets, are what help determine the color of elements, the spacing around them, if there are any background images in a section of a page, and more. So if the HTML is the frame of the house, the CSS is the materials used to build the walls, determine the paint colors, and where the furniture should be arranged.
It’s a loose metaphor, but hopefully you get the idea.
SO WHY DO I NEED TO CODE SOMETHING TO CHANGE A DESIGN?
Classy has a really powerful WYSIWYG (pronounced “Wizy-Wig”). A WYSIWYG is the user interface that allows you to build content without writing code. Instead of writing code, you interact with a screen that is similar to familiar tools you might see in word formatting programs, like a simple button for making text bold or italics, or for inserting an image. These tools make it easy to start building pages, but they have their limits.
If all you need is simple blocks of text and images, with no columns or rows that are mobile friendly, the Classy WYSIWYG will work just fine. But if you want to put images and text side-by-side or make a multi-column layout that’s mobile friendly, you need to use a custom block with mobile responsive CSS. In fact, you’ll probably want to do a mix of both custom blocks with HTML/CSS and simple text blocks. Only use the custom HTML/CSS blocks where you need the added design functionality.
At my organization, we’ve used custom layout blocks to show featured speakers at an upcoming event, or highlight fun and exciting things to look forward to at an event. We even used these layout templates to make a multi-column layout of reasons to start a Peer-to-Peer campaign. Here’s some examples:
WHAT DO I NEED BEFORE I CAN USE CUSTOM BLOCKS?
Before you get started with custom blocks like these templates, be sure you have the following:
- A location online where you can upload images and pull a URL for referencing that image on the Classy page: Custom Code Blocks do not allow for a simple image uploader, so you have to host the image on a different location. I recommend hosting images on your website for easy access. Dropbox and other file sharing services may not work due to how their platforms are set up.
- A working knowledge of HTML/CSS: There’s no getting around the fact that these are advanced layouts. As such, you can’t really do much with them if you don’t understand the basics of HTML and CSS. So if it’s been a while, or you’ve never read HTML/CSS before, check out https://www.w3schools.com/ to learn the basics for HTML/CSS.
- Code editing software: While you can use a plain text editor like Notepad to open and edit the HTML/CSS templates, I recommend a code-editing software like Visual Studio Code (free), or one of a dozen other software tools for editing code. These editors offer color-coded views of HTML/CSS that make it much easier to read, and some even can catch errors in your code for you.
WHERE CAN I USE CUSTOM BLOCKS?
Custom blocks are really effective on Event, Peer-to-Peer, and Crowdfunding campaign landing pages in Classy. They allow you to make custom backgrounds with text off to one side instead of centered, multi-column layouts for images and text, and more—all mobile friendly.
But there are some page types where you can’t use custom blocks in certain areas. The Donation and Thank You pages of any campaign type for example cannot have custom HTML/CSS blocks within the donation form text before or immediately after a donation form fields. Custom blocks on those pages will appear below the header, or above the default footer, separate from the block that features the form or Thank You message.
Fundraiser and Team pages also cannot accommodate custom blocks within the body of the page. Custom blocks on those pages would appear above the hero image or below the comments section.
But on the campaign landing pages, you can use this to your advantage and add things like:
- A custom header/footer
- A custom pre-footer with financial accountability links
- A custom block below the header for special messaging
And on the donation and thank you pages, the custom footer block can be used to make a financial accountability block featuring trusted organizations like ECFA or Charity Navigator. Just note that anything within the custom block like this will need to be updated page-by-page. So I wouldn’t place anything in the custom block of a pre-footer section like this if you have to globally update it very often. Otherwise you have to back and modify several old campaigns anytime something changes.
We’ve used these custom block templates to:
- Replace the hero section on an event with no fundraising
- Create custom blocks with portraits and descriptions of featured speakers
- Create multi-column layouts with icons or images and text
- Create a step-by-step process with graphics
- Create a background image block with a graphic headline below the hero section
- And more.
In all these examples, you could use a normal text block, but you’d be forced to insert images with a full line break instead of a row/column layout available with a mobile-responsive grid. Not sure what a mobile-responsive grid is? Check out my blog post, Laying It All Out where I share more on wireframing and planning your content before you jump into the code.
CODE TEMPLATES FOR CLASSY CAMPAIGNS
To help with creating various content layouts on Classy campaigns, I created six basic layout templates that can all be used multiple times on the same campaign. These templates include:
- Hero section with custom button(s) to replace the default Classy hero
- Two-or-more column layout with “fraction-based” grid (unequal column widths) and normal width
- Two-or-more column layout with an automatic width grid (equal width columns) and wider page width
In the downloadable versions of each layout, you’ll find in-code notes explaining more about how to customize the code block for your brand. Those notes do not have to be removed before publishing your campaign. They will not show publicly for the donor/user, so you can keep them in the code for future reference.
In the CSS, you’ll find basic classes for button styles, text formatting, headings, the whole hero block, and the mobile-friendly grid styles. There are also a few pre-determined breakpoints set up that you can adjust if your design needs to update at a different screen size. When copying these styles to Classy, don’t include the <style> tags within the template.
Let’s take a look at some of the basic elements of each template and how you can mix and match them to make your own layouts.
Pick the Template You Want to Learn More About:
- Event Hero Section With Custom Button(s)
- Auto-width Column Grid Layouts (Two, Three or More Columns)
- Fraction-Based Layouts (Two, Three or More Columns)