Forem Creators and Builders 🌱

Cover image for Creating a Hero Banner Campaign
Lee
Lee

Posted on

Creating a Hero Banner Campaign

At the moment (and I am sure this will change in the future) there are a couple of steps you need to go through on your Forem to create a home page hero banner campaign.

To get started, first you need some example code, this snippet of HTML was taken from Dev's recent Codeland banner (keep this to one side for now, and obviously you'll need to update it to reflect your own campaign)

<!-- the div id 'hero-html-wrapper' is required for this to be properly included on the homepage! -->
<style>
   #active-broadcast {
    display: none;
  }
  .codeland-banner {
    background: linear-gradient(45deg, #FED602, #B6FDAA, #87CAD3, #FEA0D6);
    box-shadow: 0 0 0 1px var(--card-border);
    position: relative;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: var(--su-4);
  }

  @media screen and (min-width: 640px) {
    .codeland-banner {
      min-height: 320px;
      border-radius: var(--radius);
      grid-template-columns: 1fr 2fr;
    }
  }

  .codeland-banner__logo {
    display: flex;
    align-items: center;
  }

  .codeland-banner__logo img {
    max-width: 100%;
    transform: rotateZ(-3deg);
  }

  .codeland-banner__description {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .codeland-banner__close-btn {
    position: absolute;
    top: var(--su-3);
    right: var(--su-3);
    width: 40px;
    height: 40px;
  }
</style>


<div id="hero-html-wrapper" class="codeland-banner-container">
  <section class="crayons-layout">
    <div class="codeland-banner p-4 h-auto">

      <a href="" class="crayons-btn crayons-btn--icon-rounded crayons-btn--ghost codeland-banner__close-btn">
        <svg id="js-hero-banner__x" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" width="24" height="24" classname="crayons-icon">
          <path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95      4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path>
        </svg>
      </a>

      <div class="codeland-banner__logo">
        <img src="https://res.cloudinary.com/hkyugldxm/image/fetch/s--kw0KPT6y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_420/https://dev-to-uploads.s3.us-east-2.amazonaws.com/codeland/logo-distributed.png" alt="CodeLand Distributed Logo">
      </div>

      <div class="codeland-banner__description">
        <p class="ff-accent">
          July 23, 2020 - July 24, 2020
        </p>
        <h1 class="lh-tight fw-medium mb-3 fs-3xl s:fs-4xl ">
          CodeLand is the community-first conference designed to level you up.
        </h1>
        <a href="/codeland" class="crayons-btn w-100 s:w-max">Watch livestream</a>
      </div>

    </div>
  </section>
</div>

Enter fullscreen mode Exit fullscreen mode

To create a campaign you need to head over to https://{yourforem}/htmlvariants and hit 'new' then give the campaign a name such as 'my-launch-banner', then insert the code above, then at the bottom select published, after that, choose the 'campaign' option (3rd in the drop down) before eventually hitting the big 'create html variant' button.

You then need to authorise the campaign.

Head over to https://{yourforem}/html_variants?state=admin and authorise the campaign.

Last bit of work, including the campaign in your Forem site config. Head over to https://{yourforem}/admin/config then goto the campaign section and find 'Campaign hero HTML variant name' in there, insert the campaign name (my example was 'my-launch-banner'). Save the config.

Hopefully, your campaign banner should now appear! However, it will need to be updated to reflect your own styling and imagery.

Lee

Top comments (3)

Collapse
 
pp profile image
Paweł Ludwiczak

But thanks for sharing that!

We should probably come up with some generic template that could be easily used for these kind of things...

Collapse
 
arun profile image
Arun

This is great, Lee! ✅

Collapse
 
rayan profile image
Rayan Nait Mazi

Thanks a lot @lee, I had forgotten to also add it in the config section hehe !