loading...
Cover image for Creating a Hero Banner Campaign

Creating a Hero Banner Campaign

leewynne profile image Lee Wynne ・3 min read

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>

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

Posted on by:

leewynne profile

Lee Wynne

@leewynne

Early Forem adopter through thisMMAlife.com

Discussion

markdown guide
 
 

But thanks for sharing that!

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