هیروسکشن بارش کد: طراحی شده با المنتور

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

حالا یه لحظه تصور کن یه همچین چیزیو تو صفحه اول سایتت داشته باشی! 😏 به جای اینکه کاربر با دیدن سایتت سریع دکمه ضربدر رو بزنه و جیم بشه، همون اول کار میخکوب میشه، کنجکاو میشه و دلش می‌خواد بیشتر تو سایتت سرک بکشه. آره رفیق، اگه بتونی همون اول نگاهشو بدزدی، دیگه شک نکن که موندگاره! دقیقاً همین‌جاست که یه «هیروسکشن» قهرمانانه وارد میدون می‌شه و جادو می‌کنه!

و اینجاست که اهمیتِ داشتن یه هیروسکشن حرفه‌ای و گیرا، معلوم میشه.

امروز تو این مقاله قراره با هم یه هیروسکشن خفن طراحی کنیم، درست مثل فیلم ماتریکس 💻✨
با المنتور – همون صفحه‌ساز محبوب وردپرس – این کار از چیزی که فکر می‌کنی خیلی راحت‌تره.
حتی اگه تازه‌کاری، با این آموزش می‌تونی یه هیروسکشن حرفه‌ای بسازی که همه رو انگشت به دهن کنه. پس تا پایان این آموزش از رایا وردپرس چشم از صفحه برندار و با من همراه باش 🙂

هیروسکشن چیه اصلاً؟ 🤔

اون بخش بزرگ و معمولاً تمام‌ عرض بالای صفحه که وقتی سایت باز می‌شه و تو نگاه اول بدون اسکرول صفحه میبینیش رو بهش میگن هیروسکشن یا همون Hero Section✨

×

آموزش ساخت فیلد جستجوی پاپ‌ آپ در المنتور

مطالعه

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

برای مثال، در تصویر پایین هیرو سکشن سایت رایا وردپرس رو می‌بینی، همون چیزی که وقتی صفحه اصلی رو باز می‌کنی، باهاش روبرو می‌شی 😊

اگه بخوام خیلی خودمونی و با یه مثال بهت بگم هیرو سکشن چیه و خلاصه چرا خیلی خیلی مهمه، بهتره اینطوری بهت بگم: فکر کن ویترین یه مغازه‌ست، از اون باکلاس‌ها و چشم‌گیراش! 😎

تو ویترین چی می‌چینن؟ بهترین، شیک‌ترین، و وسوسه‌انگیزترین چیزهایی که دارن رو، درسته؟ هدفش چیه؟ اینکه هر رهگذری رو میخکوب کنه، به دلش بندازه که یه سرکی بکشه تو مغازه و بین قفسه‌ها گشتی بزنه، شاید هم یه چیزی خرید!

×

ایجاد انیمیشن موج آب (Wave) روی متن با المنتور

مطالعه

خب، تو دنیای دیجیتال و طراحی سایت، هیروسکشن دقیقاً همین وظیفه رو به دوش می‌کشه:

• باید پیام اصلی برند، سایت یا محصولت رو تو یه چشم به‌هم‌زدن و خیلی شیک به کاربر منتقل کنه. انگار داره میگه: “هی رفیق! اینجا دقیقاً همون چیزی رو پیدا می‌کنی که دنبالشی!
• باید مثل یه آهنربا توجه رو بکشه سمت خودش و همون اول کار، دل کاربر رو قرص کنه که جای درستی اومده و اینجا خبری از سردرگمی نیست.
• باید یه جوری کاربر رو قلقلک بده و کنجکاو کنه که دلش بخواد ته و توی ماجرا رو تو سایتت دربیاره و بیشتر بگرده.

💡 یه هیروسکشن حرفه‌ای و خوش‌ساخت کاری می‌کنه که کاربر تو همون چند ثانیه اول با خودش بگه: “آهان! خودشه! می‌مونم ببینم چه خبره.” اما اگه زور نداشته باشه و شل و ول باشه، کاربر خیلی شیک و مجلسی دکمه ضربدر ❌ رو می‌زنه و تمام! دیگه هم پشت سرشو نگاه نمی‌کنه.

🎯 پس خلاصه‌اش میشه این: هیروسکشنِ جون‌دار و جذاب = موندگاری بیشتر کاربر در سایت + شانس بیشتر برای اینکه مشتری بشه

آره خلاصه، اگه می‌خوای سایتت دل کاربرا رو ببره و حرفه‌ای به نظر بیاد، هوای این بخش مهم رو حسابی داشته باش و دست‌کم نگیرش که بدجور پشیمون میشی! 😉

×

انیمیشن هایلایت متن هنگام اسکرول با المنتور

مطالعه

📽️آموزش طراحی هیروسکشن بارش کد در المنتور

خب دیگه، حرف و مقدمه بسه دیگه😁 وقتشه آستین‌ها رو بالا بزنیم و بریم سراغ قسمت هیجان‌انگیز داستان، یعنی خلق اون هیروسکشنِ خفن و چشم‌نواز!
اولین قدم و مهم‌ترین چیز اینه که مطمئن بشی «المنتور» و صد البته نسخه پرو (Pro) اون، روی سایتت نصب و آماده به کاره. اگه از قبل اینا رو ردیف کردی که دمت گرم و کارت جلوتره! اگه اینکارو انجام ندادی میتونی از قسمت افزونه های سایت رایا وردپرس اقدام به دانلود آخرین نسخه پرو المنتور کنی 🙂
اگه همه‌چی مهیاست، پس دیگه معطل چی هستی؟ قدم به قدم با من همراه شو تا با هم یه شاهکار بسازیم که همه انگشت به دهن بمونن! 🙂

قدم اول: ساخت سکشن اصلی

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

• عرض این سکشن یا کانتینر رو روی 1200 پیکسل تنظیم کن

قدم دوم: افزودن المان های دلخواه به سکشن اصلی

حالا که سکشن اصلی رو ساختی، وقتشه که ویجت‌های دلخواهت رو بهش اضافه کنی. می‌تونی از ویجت‌های مختلف مثل آیکن 🖼️، سربرگ 📝، ویرایشگر متن ✍️ و دکمه 🖱️ استفاده کنی. (دقیقا ویجت‌هایی که من برای آموزش استفاده کردم، البته محدودیتی وجود نداره و هر ویجت دیگه هم خواستی می‌تونی اضافه کنی!) این ویجت‌ها رو از پنل سمت راست ویرایشگر المنتور، قسمت ابزارک‌ها سرچ کن و یکی یکی داخل سکشن زیر هم قرارشون بده.

ساختار و ترتیب اضافه کردن ویجت ها به این صورته طبق تصویر زیر:

×

ترفند جذاب المنتور: تغییر رنگ هدر سایت هنگام اسکرول

مطالعه

تو این مرحله کاری که باید انجام بدی تغییر متن‌های سربرگ، توضیحات، دکمه و استایل‌دهی به ویجت‌هاست که کاملاً سلیقه‌ای و شخصیه. چون اینکار اصلاً سخت نیست و برای صرفه جویی در زمان، من اینو به خودت می‌سپارم! 😎 با رفتن به تب استایل هر ویجت، می‌تونی تنظیماتش رو مثل اندازه، رنگ و… تغییر بدی. فقط یه نکته مهم، وقتی استایل تمام ویجت‌ها رو تنظیم کردی، برو به تب پیشرفته هر ویجت و عرضش رو “در متن” قرار بده.

برای نمونه میتونی تصویر بالا رو ببینی که از طرق تب پیشرفته من عرض ویجت دکمه رو روی حالت در متن قرار دادم 🙂

قدم سوم: اختصاص کلاس سفارشی به سکشن یا همون کانتینر اصلیمون

برای این کار، روی کانتینر یا سکشن اصلی کلیک کن، به تب پیشرفته برو و در بخش کلاس‌های CSS، کلاس raya-zero رو وارد کن. این کلاس به سکشن اصلی‌ات اختصاص داده میشه و در ادامه در کد اسکریپتی که اضافه میکنیم به درد میخوره 🙂

قدم چهارم: اضافه کردن استایل‌ های اختصاصی با CSS

تا اینجای کار، ساختار کلی هیروسکشنت رو ایجاد کردی. حالا وقتشه با کمی کد CSS، ظاهر کلی سکشن رو شیک‌تر و هماهنگ‌تر کنی

×

ایجاد افکت‌ جالب روی متن در المنتور (با کد css)

مطالعه

برای این مرحله، برو روی همون کانتینر اصلی کلیک کن، وارد تب پیشرفته (Advanced) شو و تو بخش CSS سفارشی (Custom CSS)، کدهای زیر رو بذار:

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

قدم پنجم: افزودن اسکریپت بارش کد برای پس زمینه

حالا وقتشه که اسکریپت جادویی بارش کد رو به پس‌زمینه‌ی سکشنت اضافه کنی! 💻
برای این کار، یه ویجت HTML زیر آخرین ویجتی که داخل کانتینرت قرار دادی (یعنی همون دکمه)، اضافه کن و کد زیر رو داخلش قرار بده.

این اسکریپت کاری می‌کنه که پس‌زمینه‌ی کانتینری که بهش کلاس raya-zero دادی، تبدیل بشه به یه افکت جذاب از بارش کدهای 0 و 1 سبزرنگ – یه حس ماتریکسی خفن! 😍

×

ساخت جدول محتوای مدرن در وردپرس بدون افزونه

مطالعه

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

🎉 و تموم شد! تبریک می‌گم 🎉
حالا دیگه یه هیرو سکشن خفن، متحرک و جذاب داری که حسابی چشم‌گیر شده 😎
هم طراحی حرفه‌ای داره، هم افکت انیمیشنی باحال!
اگه خواستی جلوه‌های بیشتری بهش اضافه کنی یا یه استایل خاص مدنظرت بود، میتونی خودت طبق سلیقه ات کاستوم کنیش😉💡

📝 یه نکته مهم قبل از خداحافظی!

فقط قبل از اینکه خداحافظی کنیم، اینو یادت نره بگم 😄
من زیر همین پاراگراف برات فایل خروجی نهایی کار رو گذاشتم. می‌تونی خیلی راحت از طریق بخش درون‌ریز المنتور (Elementor Import)، اون رو ایمپورت کنی و نتیجه نهایی رو ببینی 👇

×

آموزش ساخت فیلد جستجوی دراپ داون در المنتور

مطالعه

✔️ نکته مهم: من توی فایل خروجی، ریسپانسیو بودن هیرو سکشن رو هم در نظر گرفتم. یعنی توی حالت موبایل و تبلت، اندازه فونت‌ها، فاصله‌ها و پدینگ‌ها رو واکنش‌گرا تنظیم کردم تا همه‌چی تو همه دستگاه‌ها درست و مرتب نمایش داده بشه 📱💻

حالا با خیال راحت می‌تونی ازش استفاده کنی یا هر جور خواستی شخصی‌سازیش کنی 🙌

🔒

محتوای VIP+

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

ویژه شوید 🙂

  _____                __          __    
 |  __ \               \ \        / /    
 | |__) |__ _ _   _  __ \ \  /\  / / __  
 |  _  // _` | | | |/ _` \ \/  \/ / '_ \ 
 | | \ \ (_| | |_| | (_| |\  /\  /| |_) |
 |_|  \_\__,_|\__, |\__,_| \/  \/ | .__/ 
               __/ |              | |    
              |___/               |_|    

جمع بندی

😎 دیدی چقدر راحت؟! خیلی راحت و بی‌دردسر تونستی یه هیرو سکشن خوشگل و متحرک بسازی!
حالا نوبت توئه که بری تستش کنی و دست‌به‌کار شی 🎯

×

🚀حل فوری مشکل لود نشدن المنتور زیر یک دقیقه ( دلایل مشکل)

مطالعه

اگه ساختی، حتماً برام تو کامنت‌ها بنویس که نتیجه چی شد و چه تغییرایی دادی 😉
اگه از این آموزش خوشت اومده و دوست داری کلی ترفند دیگه از المنتور یاد بگیری، حتماً به بقیه آموزش های سایت هم یه سر بزن

برات کلی موفقیت و خلاقیت آرزو دارم 💙 فعلنننننن

×

چطور یک اسلایدر بی‌نهایت با اسکرول خودکار در المنتور بسازیم؟

مطالعه