A

Advanced Classy Layouts (Part 2): Event Hero Section With Custom Button

*This post is part of a series. Please check out Advanced Classy Layout Templates to get the full context for this post.

**This post and the available download requires a working knowledge of HTML/CSS. Need to brush up on your skills? Check out w3schools.com to learn the basics for HTML/CSS.


The purpose of the Event Hero Section With Custom Buttons code block is to replace the default Classy hero in an Event campaign that forces you to include a “purchase tickets” button and a “donate” button.

For my organization, we don’t do a lot of fundraising events, but we do a lot of cultivation events. So a donation link on the hero of an event page can be really out of place. The in-Classy way to hide the donate button is simply to make the button background and text transparent. But then the hero content has to be left aligned, or else the button that’s visible is off-center. And the donate button is still clickable, even though it’s invisible. 

So I created this template to allow us to do a hero section with a button only to access tickets. 


Please note that this template should not be used to replace the hero section of a Peer-to-Peer campaign or a Crowdfunding campaign. Replacing the hero in a Peer-to-Peer campaign will break the ability for the user to join a team or start their own fundraiser, and there’s very limited added benefit to replacing the hero of a crowdfunding campaign or peer-to-peer campaign with a custom hero block like this.


CUSTOM BLOCK HERO HTML CODE 

Because this layout doesn’t need to have more than one column, we don’t start our code with a <div> that has the “grid-container” class, like in some of the other templates. Everything in the hero block just needs to be centered and have enough padding away from the edges of the browser to look good. 

<div class="bg-img text-white text-center">
	<img alt="" class="hero-title" src="https://via.placeholder.com/750x250.png?text=Placeholder+image+for+a+graphic+heading." style="width: 700px; max-width: 100%; font-size: 16px;">
	<h3 class="font-30 pt-3">This is a heading.</h3>
	<p>This is a paragraph. A photo background can be added to this section within the Classy custom content block.</p>
	<div class="grid-container text-center">
		<div class="grid-item pt-2">
			<a class="btn btn-primary" href="#" rel="nofollow" style="padding-top: 15px; padding-bottom: 15px;">Customizable Button</a>
		</div>
	</div>
</div>

You’ll notice this template includes:

  • Line 2: The ability to place a graphic heading (or replace it with a text heading <h1> or <h2>)
  • Line 3: A sub-heading (optional)
  • Line 4: Paragraph text (optional)*
  • Line 7: A button inside a single column grid layout (lines 5 and 6). 

The paragraph text can also be moved underneath the button, and you can adjust the font-size. But make sure you adjust the margin below the button, by editing the “.btn” class, to ensure that the spacing looks good.

The “.grid-container” settings in the other templates listed in this series can also be used within the custom hero block, if necessary.

CUSTOM BLOCK HERO CSS CODE 

In the CSS for this template, you’ll see I’ve broken up the styles into sections for:

  • Button design (lines 1-6)
  • Text formatting (lines 8-17)
  • Layout styles for the hero image section (lines 20-24)
  • Responsive grid layout styles (lines 25-52)
  • Vertical Padding default classes (lines 57-63)
/* Web-Button Styles */
.btn {margin:1em 0 60px 0;text-decoration:none;text-transform: uppercase;}
 a.btn {color:#fff;}
 a.btn:hover {color:#fff;}
 .btn-primary {background:#62b1bd;border:0px solid #fff;border-radius:0;font-size:1.25em;padding:0.5em 2em;}
 .btn-primary:hover {background:#202945;border:0px solid #fff;border-radius:0;font-size:1.25em;padding:0.5em 2em;}

/* Text-and-Layout Formatting Options */
 h1,h2,h3,h4,h5,h6,p {font-family:Arial, Helvetica, sans-serif;}
 .text-center {text-align: center;}
 .text-white {color:#fff;}
 .underline {text-decoration:underline;}
 .text-center img{margin-left:auto;margin-right:auto;display: flex;align-content: center;}
 .font-20 {font-size:20px;}
 .font-30 {font-size:30px;}
 h1 {font-size: 3em;line-height: 1.5em;font-weight: bold;color: #fff;}
 h2 {font-size: 1.75em;line-height: 1.5em;color: #fff;}

/* ----- Layout Styles ----- */
/* Page Hero */
 .bg-img {padding: 45% 5% 2% 5%;background-size:cover;background-position: center top;}
 @media only screen and (min-width: 600px) {
 .bg-img {padding: 10% 5% 2% 5%;background-size:cover;background-position: center top;}
  }

/* Rows/Columns */
 .grid-container {align-items: start;}
/* For mobile phones: */
 .grid-container {display: grid;grid-template-columns: auto;padding: 2% 5% 0 5%;}
 .grid-item {padding: 0 5%;}
 .grid-item img {margin-left:auto;margin-right:auto;width:100%;}
/* For tablets: */
 @media only screen and (min-width: 600px) {
 .grid-container {display: grid;grid-template-columns: auto;padding: 0 5%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
/* For desktop: */
 @media only screen and (min-width: 768px) {
 .grid-container {display: grid;grid-template-columns: auto;padding: 0% 10%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
 @media only screen and (min-width: 1024px) {
 .grid-container {display: grid;grid-template-columns: auto;padding: 0% 0%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
 @media only screen and (min-width: 1400px) {
 .grid-container {display: grid;grid-template-columns: auto;padding: 0% 0%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
 @media only screen and (min-width: 1680px) {
 .grid-container {display: grid;grid-template-columns: auto;padding: 0% 0%;}
 .grid-item {padding: 0 5%;text-align: center;}
 }
/* General */
 .clearfix {clear:both;}

/* Padding options (increments of 10px, from 10px to 60px). Class names match Bootstrap classes. */
/* Padding Top */
 .pt-1 {padding-top:10px;}.pt-2 {padding-top:20px;}.pt-3 {padding-top:30px;}.pt-4 {padding-top:40px;}.pt-5 {padding-top:50px;}.pt-6 {padding-top:60px;}
/*Padding Bottom */
 .pb-1 {padding-bottom:10px;}.pb-2 {padding-bottom:20px;}.pb-3 {padding-bottom:30px;}.pb-4 {padding-bottom:40px;}.pb-5 {padding-bottom:50px;}.pb-6 {padding-bottom:60px;}
/* Padding Y axis */
.py-1 {padding-top:10px;padding-bottom:10px;}.py-2 {padding-top:20px;padding-bottom:20px;}.py-3 { padding-top:30px; padding-bottom:30px;}.py-4 { padding-top:40px; padding-bottom:40px;}.py-5 {padding-top:50px; padding-bottom:50px;}.py-6 { padding-top:60px; padding-bottom:60px;}

The responsive grid layout classes are included in this template in case you need to make a two-column layout within the hero block for some reason. The default setup is to have the hero section be a single column.

And the padding options are a quick way you can add spacing around an element by adding a simple class to a tag. You’ll notice “pt, pb, and py” which mimic the Bootstrap class names for padding-top, padding-bottom, and padding on the vertical y axis (both top and bottom). These allow you to quickly add incremental spacing to elements within the layout, for refining the spacing around elements as needed.

DOWNLOAD THE TEMPLATE

Are you ready to get started? Subscribe today to get your free Classy custom code block templates. When you sign up to receive updates, I’ll also send you my Classy Background Image Safe Zone Templates as well.

USING THE TEMPLATE

Once you download the template, you’re ready to start planning your page. If the page will have complex content, or you’ve never built a custom code block before, I recommend starting with a wireframe to plan the content for your page. You can learn more about how to do that in my blog titled Laying It All Out.

Now that you have a plan for how you want to lay out the content on the page. Let’s dive into setting up the template:

  1. Open the HTML/CSS template in a code editing software like Visual Studio Code or a plain text editor like Notepad.
  2. Open a Classy Event, or Crowdfunding campaign and navigate to the page editor section of the campaign
  3. Select the landing page of your campaign (Don’t forget, there are limitations to where you can use custom code blocks on donation pages, thank you pages, and team or individual fundraising pages. Learn more here.)
  4. Select the Design tab on the right, and scroll down to click the “ADD CONTENT TO PAGE” dropdown on the left
  5. Select the “</> Custom” block type and drag it into place on the page layout list on the left
  6. Open the HTML/CSS template in your code editor and copy and paste the sections labeled <!– HTML CODE –> and <!– CSS STYLES –> into the HTML and CSS tabs of your new custom code block.
  7. Before you hide the default hero section, navigate to the public version of the page and grab the URL for the tickets page by clicking the appropriate button in the default hero. Copy that URL, and use it as the URL on your custom hero section button, to make sure users can navigate to the tickets page to register for your event.
  8. Scroll down to the “UPLOAD BACKGROUND IMAGE” button on the left in order to add an image to the background of your hero block. You’ll have to add any blur to the background image by editing it in a tool like Photoshop, but the Custom code blocks do allow you to change the opacity of the image (to darken or lighten it with a background color) and change the image position settings. For a parallax type of effect, select Cover & Fixed as the image position.  

You may notice that the page preview appears funny if the CSS styles have not been added. Sometimes the preview version of the page doesn’t look exactly like it will look on the live page anyway, so I recommend opening the page in a new tab and refreshing it to see any updates you save. 

Speaking of which, save the page now and open the landing page in a new tab to see if the template has been added properly. 

To modify the code, either edit the code in your code-editing software on your computer, copying and pasting the updates into Classy, or edit the code in Classy directly. I recommend making a copy of the original files each time to modify them for a new campaign, that way the original files always remain intact, and you can delete the copy and start over if you accidentally break something in the code.

Learn more about the CSS Grid System here: https://www.w3schools.com/css/css_grid.asp

  1. Robert Brooks says:

    Hi Robo,

    Any chance you know if Classy has the capability to handle a custom coded slideshow? Slideshows typically use some sort of scripting language and I think Classy doesn’t allow that correct? Is there a work around?

    Thanks, Rob

    1. Robert Bogan says:

      Hi Robert. I am SUPER late at responding to this. Sorry about that. The comment was flagged as spam, and I didn’t notice it.

      Classy doesn’t allow scripts in their custom blocks, so the only way you’d be able to pull off a slideshow is if you used Google Tag Manager to load your custom scripts onto the page first. Then you’d have to figure out how to code the custom block to utilize the script, without ever having any code in the custom block that is a JS trigger or anything like that.

      My experience with JS and JQuery is really limited, but I would guess it **might** work if you had a class or ID for the slideshow container, and then the script just ran immediately once the page content was loaded.

      Out of the box, I’d say there’s not a really simple solution, but I hesitate to say it can’t be done. The biggest question I have is always “Will Classy let me do this?” If it’s not on the payment page, your chances are higher.

      On the subject of slideshows though, I will say that a fair amount of data does point to them not working well for engagement (i.e. clicks on later slides). People generally don’t wait for them to change or navigate through them, so anything past slide 2-3 is usually ignored. With that in mind, just keep your number of slides to a minimum, and you should be okay, especially if you start with the understanding that any calls to action buried in the slideshow are less likely to be clicked automatically. Of course if the slideshow is just for imagery, then that’s not really a problem.

      Hope that helps! Let me know if you have any other questions.

Leave a Reply

Your email address will not be published. Required fields are marked *