I don’t know how it is for other designers, but when I start a new project, there’s always this moment where I just sit there and stare. Nothing. No idea. Empty.
People often think that “creativity” is some kind of magic that suddenly comes out of nowhere, like a lightning strike from the sky. But I can tell you that’s not how it works — at least not for me. I’ve learned how to “hack” my creativity. It’s no longer random but more like a process. And one part of that process led me to create what we now call the “Hero Section.”
The Birth Of The Hero Section
If I’m being honest, I don’t even know exactly how I came up with the name “Hero.” It felt more like an epiphany than a conscious decision. At the time, I was working on the Brooklyn theme, and Bootstrap was gaining popularity. I wasn’t a huge fan of Bootstrap, not because it’s bad, but because I found it more complicated to work with than writing my own CSS. Ninety-five percent of the CSS and HTML in Brooklyn is custom-written, devoid of any framework.
But there was one part of Bootstrap that stuck with me: the Jumbotron class. The name felt a bit odd, but I understood its purpose — to create something big and attention-grabbing. That stuck in my mind, and like lightning, the word “Hero” came to me.
Why Hero? A hero is a figure that demands attention. It’s bold, strong, and memorable, which is everything I wanted Brooklyn’s intro section to be. At first, I envisioned a “Hero Button.” Still, I realized the concept could be much broader: it could encompass the entire intro section, setting the tone for the website and drawing the visitor’s focus to the most important message.
The term “Banner” was another option, but it felt generic and uninspired. A Hero, on the other hand, is a force to reckon with. So, I committed to the idea.
From Banner To Hero Section
Back in 2013, most websites called their intro sections a “Banner” or “Header.” At best, you’d see a single image with a title, maybe a subtitle, and a button. Sliders were also popular, cycling through multiple banners with different content. But I wanted Brooklyn’s intro to be more than just a banner — it had to make a lasting impression.
So, I redefined it:
- HTML Structure
I named the section<section class="hero">. This wasn’t just a banner or a slider; it was a Hero Section. - CSS Customization
Everything within the section followed the Hero concept:.hero-slogan,.hero-title,.hero-description,.hero-btn. I coded it all from scratch, making sure it had a cohesive and distinct identity. - Marketing Language
I didn’t stop at the code. I used the word “Hero” everywhere, including Brooklyn’s documentation, the theme description, the landing page, and the featured images.
At the time, Brooklyn was attracting tens of thousands of visitors per day on ThemeForest, which is the storefront I use to make the theme available for sale. It quickly became a top seller, selling like hotcakes. Naturally, people started asking, “What’s a Hero Section?” It was a new term, and I loved explaining the concept.
The Hero Section had become sort of like a hook that made Brooklyn more alluring, and we sold a lot of copies of the theme because of it.
What I Didn’t Know About The Hero’s Future
At the time, I intentionally used the term “Hero” in Brooklyn’s code and marketing because I wanted it to stand out. I made sure it was everywhere: in the <section> tags, in class names like .hero-title and .hero-description, and on Brooklyn’s landing page and product description.
But honestly, I didn’t realize just how big the term would become. I wasn’t thinking about carving it into stone or reserving it as something unique to Brooklyn. That kind of forward-thinking wasn’t on my radar back then. All I wanted was to grab attention and make Brooklyn stand out.
Over time, we kept adding new variations to the Hero Section. For example, we introduced the Hero Video, allowing users to add video backgrounds to their Heroes — something that felt bold and innovative at the time. We also added the Hero Slider, a simple image slider within the Hero Section, giving users more flexibility to create dynamic intros.
Brooklyn even had a small Hero Builder integrated directly into the theme — something I believe is still unique to this day.
Looking back, it’s clear I missed an opportunity to cement the Hero Section as a signature feature of Brooklyn. Once I saw other authors adopting the term, I stopped emphasizing Brooklyn’s role in popularizing it. I thought the concept spoke for itself.
How The Hero Went Mainstream
One of the most fascinating things about the Hero Section is how quickly the term caught on. Brooklyn’s popularity gave the Hero Section massive exposure. Designers and developers started noticing it, and soon, other theme authors began adopting the term in their products.
Brooklyn wasn’t just another theme. It was one of the top sellers on ThemeForest, the world’s largest marketplace for digital goods, with millions of users. And I didn’t just use the term “Hero” once or twice — I used it everywhere: descriptions, featured images, and documentation. I made sure people saw it. Before long, I noticed that more and more themes used the term to describe large intro sections in their work.
Today, the Hero Section is everywhere. It’s a standard in web design recognized by designers and developers worldwide. While I can’t say I invented the concept, I’m proud to have played a key role in bringing it into the mainstream.
Lessons From Building A Hero
Creating the Hero Section taught me a lot about design, creativity, and marketing. Here are the key takeaways:
- Start Simple: The Hero Section started as a simple idea — a way to focus attention. You don’t need a complex plan to create something impactful.
- Commit to Your Ideas: Once I decided on the term Hero, I committed to it in the code, the design, and the marketing. Consistency made it stick.
- Bold Names Matter: Naming the section “Hero” instead of “Banner” gave it a personality and purpose. Names can define how users perceive a design.
- Constantly Evolve: Adding features like the Hero Video and Hero Slider kept the concept fresh and adaptable to user needs.
- Don’t Ignore Your Role: If you introduce something new, own it. I should have continued promoting Brooklyn as a Hero pioneer to solidify its legacy.
Inspiration Isn’t Magic; It’s Hard Work
Inspiration often comes from unexpected places. For me, it came from questioning a Bootstrap class name and reimagining it into something new. The Hero Section wasn’t just a product of creative brilliance — it was the result of persistence, experimentation, and a bit of luck.
What’s the one element you’ve created that you’re most proud of? I’d love to hear your stories in the comments below!
Source: Read MoreÂ
