برای طراحی وبسایت ما الگو های جهانی، معروف و زیادی داریم که انتخاب بین آن ها میتواند بسیار سخت باشد. برای هر برند و هویت برند کدام مناسب است؟ برای پاسخ به این پرسش باید انواع hero در طراحی سایت را بشناسید و بتوانید بین آن ها انتخاب کنید

hero وب سایت چیست؟

در طراحی وب، Hero به اون بخش بالای صفحه گفته می‌شه که معمولاً اولین چیزی هست که کاربر می‌بینه وقتی وارد سایت می‌شه. معمولاً شامل یک تصویر بزرگ یا ویدیو، یک تیتر جذاب و گاهی یک دکمه دعوت به اقدام (CTA) هست.

هدف هرو اینه که توجه کاربر رو فوراً جلب کنه و پیام اصلی سایت یا محصول رو منتقل کنه. می‌تونه ثابت باشه (مثل تصویر ثابت)، یا ویدیو و غیره باشه، بسته به طراحی سایت و تجربه کاربری که می‌خواهید بسازید است.

Hero با تصویر ثابت

Hero با تصویر ثابت یکی از بخش‌های مهم طراحی صفحات وب است که معمولاً در بالای صفحه اصلی قرار می‌گیرد و اولین چیزی است که کاربران می‌بینند. این بخش با یک تصویر پس‌زمینه ثابت، جلوه‌ای جذاب و حرفه‌ای به سایت می‌دهد و توجه بازدیدکننده را بلافاصله جلب می‌کند.

تصویر ثابت در هرو باعث می‌شود محتوای روی آن، مانند تیتر یا دکمه‌های دعوت به اقدام، همیشه در مرکز توجه باقی بماند و حس ثبات و تمرکز را به کاربران منتقل کند. این تکنیک به ویژه برای معرفی محصول، برند یا پیام اصلی سایت بسیار موثر است.

از لحاظ تجربه کاربری، Hero با تصویر ثابت ساده و خلوت طراحی می‌شود تا اطلاعات مهم بدون حواس‌پرتی ارائه شود. این بخش معمولاً با فونت‌های بزرگ، رنگ‌های کنتراست‌دار و دکمه‌های واضح همراه است تا کاربر را به تعامل دعوت کند.

در نهایت، هرو با تصویر ثابت ترکیبی از زیبایی بصری و عملکرد کاربردی است که به سایت شخصیت و هویت می‌بخشد و اولین تعامل کاربر با برند را به تجربه‌ای به‌یادماندنی تبدیل می‌کند.
سایت های زیادی از این نوع استفاده میکنند که سایت ایرنیک (مرکز ثبت دامنه های .ir) از این نوع استفاده میکنند.

Hero با ویدیو

Hero با ویدیو یکی از روش‌های مدرن طراحی صفحات وب است که در بالای صفحه قرار می‌گیرد و به جای تصویر ثابت، یک ویدیو کوتاه و جذاب به‌عنوان پس‌زمینه دارد. این ویدیو معمولاً حرکتی نرم و تکرار شونده دارد و باعث جلب توجه فوری کاربران می‌شود.

ویدیو در هرو امکان ارائه داستان برند، نمایش محصول یا معرفی خدمات را به شکل پویا و تعاملی فراهم می‌کند. کاربران با دیدن ویدیو سریع‌تر با پیام اصلی سایت ارتباط برقرار می‌کنند و تجربه بصری جذابی دریافت می‌کنند.

طراحی هرو ویدیویی باید بهینه و سبک باشد تا سرعت بارگذاری سایت را کاهش ندهد. اغلب ویدیوها بدون صدا و با حلقه تکرار پخش می‌شوند تا هم جذابیت بصری داشته باشند و هم مزاحم تجربه کاربری نباشند.

در نهایت، هرو با ویدیو ترکیبی از قدرت روایت، جذابیت بصری و تعامل کاربر است و به سایت شخصیت مدرن و حرفه‌ای می‌بخشد، به‌گونه‌ای که اولین برخورد بازدیدکننده با برند به یادماندنی و موثر باشد.
سایت های کمتری از این مورد استفاده میکنند و آپارات یکی از آن هاست.

Hero با اسلایدر / Carousel

Hero با اسلایدر یکی از روش‌های منعطف و تعاملی در طراحی صفحات وب است که به جای یک تصویر ثابت یا ویدیو، چندین تصویر یا محتوا را به شکل اسلایدهای پشت سر هم نمایش می‌دهد. این روش امکان ارائه چند پیام، محصول یا ویژگی مختلف را در یک بخش به‌صورت جذاب فراهم می‌کند.

اسلایدرها معمولاً با کنترل‌های ناوبری مانند فلش‌ها یا نقاط پایین اسلایدها همراه هستند تا کاربران بتوانند بین محتوا حرکت کنند و تجربه‌ای تعاملی داشته باشند. این قابلیت باعث می‌شود کاربران با بخش‌های مختلف سایت یا محصولات بیشتر آشنا شوند.

طراحی هرو با Carousel باید بهینه و سریع باشد تا بارگذاری صفحات را کند نکند و تجربه کاربری روانی ارائه دهد. معمولاً اسلایدها با انیمیشن نرم و زمان‌بندی مناسب حرکت می‌کنند تا هم جذاب باشند و هم حواس کاربر را پرت نکنند.

در نهایت، هرو با اسلایدر ترکیبی از جذابیت بصری، تعامل کاربر و نمایش چندگانه محتوا است که به سایت انعطاف و پویا بودن می‌بخشد و امکان معرفی چندین پیام یا محصول را در همان بخش اول صفحه فراهم می‌کند.
سایت های معمولا فروشگاهی با اشراک ویدیو از این مورد استفاده میکنند و دیجی کالا و فیلیمو 2 عدد از آن ها هستند.

Hero مینیمال / متن‌محور

Hero مینیمال / متن‌محور یک سبک ساده و مدرن در طراحی وب است که تمرکز اصلی آن روی محتوا و پیام متنی است و از تصاویر یا ویدیوهای سنگین استفاده نمی‌کند. این نوع Hero با فضای خالی و طراحی خلوت، پیام اصلی سایت را به‌طور مستقیم و واضح به کاربر منتقل می‌کند.

در این سبک، تیترهای بزرگ و کوتاه، متن توضیحی مختصر و دکمه‌های دعوت به اقدام (CTA) اهمیت زیادی دارند. طراحی مینیمال باعث می‌شود کاربر سریعاً هدف سایت را درک کند و تمرکز خود را روی محتوا نگه دارد.

هرو متن‌محور معمولاً با رنگ‌بندی ساده و کنتراست بالا طراحی می‌شود تا خوانایی متن بالا برود و تجربه کاربری بهینه شود. این سبک برای برندهایی که می‌خواهند پیام خود را بدون حواس‌پرتی منتقل کنند، بسیار مناسب است.

در نهایت، هرو مینیمال ترکیبی از سادگی، وضوح و حرفه‌ای بودن است که اولین برخورد کاربر با سایت را متمرکز، آرام و تاثیرگذار می‌کند و حس اعتماد و مدرن بودن را به برند القا می‌کند.
سایت های شرکتی و دانلودی میتوانند از این مورد استفاده کنند و میتوان به عنوان مثال از علی بابا و سافت 98 نام برد.

Hero تقسیم صفحه / Split Screen

Hero تقسیم صفحه (Split Screen) یکی از سبک‌های خلاقانه طراحی وب است که صفحه Hero را به دو یا چند بخش مجزا تقسیم می‌کند و به هر بخش محتوا، تصویر یا ویدیو متفاوتی اختصاص می‌دهد. این روش امکان نمایش هم‌زمان چند پیام یا ویژگی سایت را به شکل جذاب فراهم می‌کند.

این سبک طراحی به کاربران اجازه می‌دهد تا سریع‌تر بین گزینه‌ها یا بخش‌های مختلف سایت تصمیم بگیرند و تجربه بصری متنوع و تعاملی داشته باشند. معمولاً یکی از بخش‌ها شامل تصویر یا ویدیو و بخش دیگر شامل متن و دکمه‌های دعوت به اقدام است.

Hero تقسیم صفحه باید متوازن طراحی شود تا هر بخش به خوبی دیده شود و تمرکز کاربر از بین نرود. طراحی واکنش‌گرا در این سبک اهمیت زیادی دارد تا روی موبایل و تبلت هم تجربه مناسبی ارائه شود.

در نهایت، Split Screen ترکیبی از جذابیت بصری، وضوح محتوا و تعامل کاربر است که به سایت شخصیت مدرن و حرفه‌ای می‌دهد و امکان ارائه چند پیام یا محصول در همان بخش اول صفحه را فراهم می‌کند.
جالب است بدانید ما در سایت فای هم از این نوع استفاده میکنیم.

جدول مقایسه‌ی انواع Hero

یک جمع‌بندی فشرده، جدول‌بندی‌شده و همراه با قطعه‌کدهای آماده که می‌تونی مستقیماً در سایت یا ارائه‌ات استفاده کنی. هر ردیف شامل: بهترین کاربرد، مزایا، معایب، نکات فنی/دسترسی و یک «دستورالعمل سریع» (کد کوتاه) هست.

نکات کلی برای تمام انواع

• همیشه به بهینه‌سازی تصاویر/ویدیوها فکر کن (فشرده‌سازی، فرمت مناسب، lazy-loading وقتی ممکنه).
• اطمینان از دسترسی: متن‌ها قابل خواندن و قابل دسترسی با صفحه‌خوان باشند؛ دکمه‌ها فوکوس پذیری داشته باشند.
• روی موبایل رفتار متفاوتی مدنظر باشه (مثلاً ویدیو جایگزین تصویر ثابت یا poster).

قطعه‌کدهای آماده — قابل کپی و استفاده

ما همیشه به شما پیشنهاد میدهیم از المنتور و وردپرس برای طراحی سایت استفاده کنید، ولی در صورت نیاز میتوانید از این موارد استفاده کنید
هر قطعه یک بلوک HTML/CSS (و در صورت نیاز JS خیلی ساده) است. این‌ها حداقلی، واکنش‌گرا و قابل شخصی‌سازی هستند.

1) هرو با تصویر ثابت — HTML

<section class="hero-static">
  <div class="hero-content">
    <h1>تیتر اصلی شما</h1>
    <p>توضیح کوتاه و جذاب درباره محصول یا برند.</p>
    <a class="btn" href="#">شروع</a>
  </div>
</section>

<style>
.hero-static{
  min-height:60vh;
  display:flex;align-items:center;justify-content:center;
  background-image:url('hero.jpg');
  background-size:cover;background-position:center;
  background-attachment:fixed;
  color:white;text-align:center;padding:2rem;
}
.hero-static::after{
  content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.35),rgba(0,0,0,0.5));
}
.hero-content{position:relative;z-index:1;max-width:900px}
.btn{display:inline-block;padding:0.75rem 1.2rem;border-radius:8px;background:#fff;color:#111;text-decoration:none}
@media (max-width:768px){.hero-static{background-attachment:scroll;min-height:50vh}}
</style>

2) هرو با ویدیو — HTML

<section class="hero-video">
  <video class="bg-video" autoplay muted loop playsinline poster="poster.jpg">
    <source src="hero.webm" type="video/webm">
    <source src="hero.mp4" type="video/mp4">
  </video>
  <div class="hero-content">
    <h1>تیتر پویا</h1>
    <p>پیام کوتاه و دعوت به اقدام</p>
    <a class="btn" href="#">بیشتر</a>
  </div>
</section>

<style>
.hero-video{position:relative;min-height:60vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-content{position:relative;z-index:1;color:#fff;text-align:center;padding:2rem}
@media (prefers-reduced-motion:reduce){.bg-video{display:none;background:url('poster.jpg') center/cover no-repeat}}
</style>

3) هرو اسلایدر ساده — HTML + JS

<section class="hero-slider">
  <div class="slides">
    <div class="slide active" style="background-image:url('s1.jpg')"> <div class="caption"> <h2>محصول A</h2></div></div>
    <div class="slide" style="background-image:url('s2.jpg')"> <div class="caption"> <h2>ویژگی B</h2></div></div>
    <div class="slide" style="background-image:url('s3.jpg')"> <div class="caption"> <h2>خدمات C</h2></div></div>
  </div>
  <div class="dots"></div>
</section>

<style>
.hero-slider{position:relative;min-height:60vh;overflow:hidden}
.slides{display:flex;transition:transform .6s ease}
.slide{min-width:100%;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center}
.caption{background:rgba(0,0,0,0.35);padding:1rem;border-radius:8px;color:#fff}
.dots{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);display:flex;gap:.5rem}
.dots button{width:10px;height:10px;border-radius:50%;border:none}
</style>

<script>
(function(){
  const slides = document.querySelectorAll('.slide');
  const dotsContainer = document.querySelector('.dots');
  let idx=0;
  slides.forEach((s,i)=>{
    const b=document.createElement('button');
    b.addEventListener('click',()=>goTo(i));
    dotsContainer.appendChild(b);
  });
  function goTo(i){
    idx=i;document.querySelector('.slides').style.transform=`translateX(-${100*idx}%)`;
  }
  setInterval(()=>{idx=(idx+1)%slides.length;goTo(idx)},5000);
})();
</script>

4) هرو مینیمال / متن‌محور — HTML

<section class="hero-minimal">
  <div class="container">
    <h1>پیامی شفاف و کوتاه</h1>
    <p>یک جمله توضیحی که منظور و ارزش پیشنهادی را می‌رساند.</p>
    <div class="actions"><a class="btn" href="#">شروع</a></div>
  </div>
</section>

<style>
.hero-minimal{padding:6rem 1rem;text-align:center;background-color:#f7f7f8}
.container{max-width:860px;margin:0 auto}
h1{font-size:2.25rem;margin-bottom:.5rem}
@media(max-width:600px){h1{font-size:1.6rem}}
</style>

5) هرو تقسیم صفحه / Split Screen — HTML

<section class="hero-split">
  <div class="left">
    <h2>محصول</h2>
    <p>توضیح مختصر</p>
    <a class="btn" href="#">خرید</a>
  </div>
  <div class="right" style="background-image:url('product.jpg')"></div>
</section>

<style>
.hero-split{display:flex;min-height:60vh}
.left, .right{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}
.right{background-size:cover;background-position:center}
@media(max-width:900px){.hero-split{flex-direction:column}.right{min-height:40vh}}
</style>

جمع بندی

انتخاب سبک Hero، اولین فرصت شما برای جذب توجه کاربر و انتقال پیام برند است. چه تصویر ثابت باشد، چه ویدیو، اسلایدر، متن‌محور یا تقسیم صفحه، مهم‌ترین نکته تعادل بین زیبایی بصری و تجربه کاربری است. طراحی هوشمندانه و بهینه، نه تنها سایت را جذاب و مدرن نشان می‌دهد، بلکه تعامل و اعتماد کاربر را هم افزایش می‌دهد. در نهایت، Hero شما باید داستان برندتان را به ساده‌ترین و تاثیرگذارترین شکل ممکن روایت کند و اولین برخورد کاربر را به تجربه‌ای به‌یادماندنی تبدیل کند.

شاد باشید