چطور یک هیرو سکشن جذاب و حرفه‌ای در المنتور بسازیم؟

شاید فکر کنی ساختن یک هیروسکشن حرفه‌ای و خیره‌کننده، نیازمند ساعت‌ها کدنویسی و دست‌وپنجه نرم کردن با پیچیدگی‌های فنی، درست مثل یک برنامه‌نویس کارکشته است! 🤯 اما اینطور نیست! المنتور تمام ابزارهای لازم را در اختیارت قرار داده؛ تنها چیزی که نیاز داری، کمی خلاقیت و صرف زمان است. بدون نیاز به نصب حتی یک افزونه‌ی اضافی و بدون نوشتن حتی یک خط کد، می‌توانی هیروسکشنی چنان جذاب و گیرا خلق کنی که بازدیدکنندگان در آن غرق بشن و تجربه‌ای به‌یادماندنی از سایت تو داشته باشن! 😉

برای ساختن یک هیروسکشن حرفه‌ای و میخکوب‌کننده، درست مثل همین تصویری که می‌بینی، آماده‌ای؟ 🔥 پس بزن بریم سراغ ادامه مطلب تا ببینی چطور میشه!

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

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

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

تو این آموزش، قدم به قدم 👣 همراهت هستیم تا بدون نیاز به حتی یک خط کدنویسی، فقط با استفاده از قدرت و امکانات خود المنتور 🛠️، یه شاهکار واقعی خلق کنی. آماده‌ای که یه هیروسکشن بسازیم که همه رو انگشت به دهان کنه؟ 🚀

×

آکاردئون خفن به سبک دیوار بساز!

مطالعه

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

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

◀️ برای شروع، ابتدا یک برگه جدید در المنتور ایجاد کن. اگر هم قصد داری هیروسکشن رو به صفحه اصلی یا صفحه‌ای که از قبل ساختی اضافه کنی، کافیه در اون برگه روی دکمه «ویرایش با المنتور» کلیک کنی تا وارد محیط ویرایشگر المنتور بشی 🙂

◀️ وسط برگه‌ روی علامت ➕ بزن تا یه کانتینر فلکس‌ باکس با عرض جعبه ای به صفحه‌ات اضافه بشه.

×

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

مطالعه

◀️ بسیار خب! تو این مرحله، یه کانتینر دیگه داخل اون کانتینر اصلیت اضافه کن.

• خب، برای اینکه از همین اول کارمون تر و تمیز باشه و بعداً بین کانتینرها گیج نشیم، بیا همین الان اسم این کانتینر جدید رو به can2 و اسم کانتینر اولی همون اصلی رو به can1 تغییر بده. برای اینکار از نوار ابزار بالای صفحه روی آیکون «ساختار» (همون Navigator 🧭) کلیک کن. یه پنل باز میشه که لیست تمام المان‌های صفحه‌ات رو نشون میده. حالا، تو این لیست، کانتینرهایی که اضافه کردی رو میتونی ببینی.

توجه! روی اسم کانتینر دابل کلیک کنی سلکت میشه و میتونی نامشو تغییر بدی!

◀️ حالا نوبت اینه که داخل کانتینر can2، یک المان «تصویر» (Image Widget) بکِشی و بندازی اونجا. ببین، تو می‌تونی هر عکسی که عشقت کشید رو انتخاب کنی، دستت کاملاً بازه! 👍 اما: از اونجایی که من تمام تنظیمات و ریزه‌کاری‌هایی که در ادامه قراره با هم انجام بدیم رو دقیقاً بر اساس تصویری که این پایین برات گذاشتم تنظیم کردم، خیلی بهتره که برای شروع و اینکه مراحل آموزشی رو راحت‌تر و بدون دردسر یاد بگیری، تو هم فعلاً از همین تصویر استفاده کنی. خیالت راحت باشه! وقتی کامل به این بخش مسلط شدی و فوت و فن کار دستت اومد، می‌تونی با خیال راحت هر تصویر دیگه‌ای که دوست داری جایگزین و تنظیماتش رو اوکی کنی😉

• رزولوشن تصویر رو full تنظیم کن که هم کیفیتش عالی باشه و هم اندازه‌اش مناسب باشه.

• برای اینکه گوشه‌های تصویرت نرم و گردتر بشن، به تب «استایل» (Style) در تنظیمات ویجت تصویر برو. اونجا، گزینه‌ی «انحنای حاشیه» (Border Radius) رو پیدا کن و مقدارش رو برای همه‌ی گوشه‌ها روی ۵۰ پیکسل تنظیم کن

◀️ یه کانتینر جدید داخل کانتینر can2 اضافه کن (اسمش رو همونطور که بالا گفتم از منوی ساختار به innercan تغییر نام بده). عرضش رو روی ۲۵٪ (درصد) تنظیم کن، ارتفاعش رو هم بذار ۷۴ پیکسل، و خیلی مهمه که ترازبندیش رو هم روی حالت «وسط‌چین» قرار بدی تا دقیقاً در مرکز قرار بگیره. برای هر تنظیمات دیگه‌ای که ممکنه لازم باشه، کافیه یه نگاه دقیق به تصویر پایین بندازی و همون‌ها رو برای این کانتینر اعمال کنی. ✨

×

با یک کلیک، برگرد بالا | ساخت دکمه بازگشت به بالا در المنتور

مطالعه

• به تب استایل این کانتینر (innercan ) برو و بکگراندش رو سفید کن سپس به تب پیشرفته برو و موقعیت یا جایگاه کانتینر رو مطلق (Absolute) قرار بده درست مثل تصاویر زیر

بریم سراغ گوشه‌های سمت راست این المان‌مون. اگه بهش نگاه کنی، می‌بینی الان تیز هست 🌵 در صورتی که تو طرح اصلی سکشن‌مون، این گوشه‌ها خیلی نرم و ملوس بودن! 😊 می‌خوایم اینم همونجوری خوشگلش کنیم.
تصاویر پایین رو ببین تا قشنگ دستت بیاد چی میگم:

◀️ برای اینکه اون گوشه‌های تیز رو نرم و منحنی کنیم، از «المان فاصله‌گذار» (Spacer) استفاده می کنیم. بیا با هم انجامش بدیم: اول، از طریق «منوی ساختار» (Navigator)، کانتینر can2 رو انتخاب کن. بعد، خیلی ساده، دو تا «المان فاصله‌گذار» تازه نفس، درست زیر همین کانتینر can2 قرار بده. همه چیز باید دقیقاً مطابق تصویری باشه که پایین می‌بینی تا نتیجه عالی بشه! 👍

• حالا وقتشه برای هر دوتا ویجت فاصله گذارمون، از قسمت تنظیمات خود ویجت، اون مقدار «فضای خالی» یا «فاصله» (Space) که ایجاد می‌کنن رو روی ۶۰ پیکسل بذاریم.

• هنوز کارمون با این دو تا ویجت تموم نشده‌ها! 😜 برای هر کدومشون، دوباره بپر تو تب «پیشرفته»، بعدش «عرض» (Width) رو پیدا کن، حالتش رو بذار روی «سفارشی» (Custom) و عدد ۶۰ پیکسل رو براش ست کن و جایگاه جفتشون رو مطلق در نظر بگیر.

• برای اون ویجت فاصله‌گذار اولی که داریم، «آفست عمودی» (یا همون جابجایی عمودی Y) رو ۷۴ پیکسل، آفست افقی رو هم 10 پیکسل و «Z-Index» رو هم روی ۱ ست کن.

• خب، حالا نوبت اون یکی فاصله‌گذاره، یعنی دومیش! برای این یکی هم تقریباً همون داستانه: مقدار «آفست افقی» (Horizontal Offset یا همون جابجایی چپ و راست ↔️) رو براش ۳۱7 و آفست عمودی رو 10 پیکسل تنظیم کن. «Z-Index» (زد ایندکس) این یکی هم، درست مثل قبلی، باید ۱ باشه. حله؟ 😉

• کارمون با این فاصله گذارها یه کوچولوش مونده تا همه چیش عالی بشه! تو همون تب «پیشرفته» هر دو ویجت، «رنگ پس‌زمینه» شون رو یه رنگی انتخاب کن که حسابی به رنگ حاشیه یا لبه‌های تصویر اصلی‌مون نزدیک باشه و باهاش ست بشه. اگه دنبال کد رنگ دقیق اون قسمت از تصویرت هستی، می‌تونی خیلی راحت با افزونه کروم Colorzilla کدش رو دربیاری. مثلاً، چون عکس من تم آبی داشت، منم کد رنگ #6793FE رو برای پس‌زمینه این فاصله‌گذارها استفاده کردم که خوشگل کنار هم بشینن و فاصله گذارها به نوعی درون اون بخش پنهان بشن.

• خب رفقا، دیگه داریم می‌رسیم به مرحله نهایی کار با این فاصله‌گذارها. برای هر دو تا ویجت فاصله‌گذار، یه سر به تب «پیشرفته» (Advanced) بزن. اول برای اون فاصله‌گذار اولی، تو بخش «حاشیه» (Border)، «انحنای حاشیه» (Border Radius) همه‌ی گوشه‌ها رو روی ۵۰ پیکسل تنظیم کن. بعد برای فاصله‌گذار دومی، باز تو همون قسمت «حاشیه»، انحنای گوشه‌هاش رو اینجوری ست کن: بالا و چپ ۲۵، راست ۲۰، و پایین هم صفر پیکسل (یادت نره اون آیکون زنجیر یا لینک کوچولو رو غیرفعال کنی تا بتونی برای هر گوشه عدد جدا بدی!). در آخر هم، هنوز تو تب «پیشرفته» هر دو تا ویجت، برو سراغ تنظیمات «سایه کادر» (Box Shadow)؛ رنگ سایه رو هم‌رنگ پس‌زمینه اصلی صفحه‌ ات انتخابش کن (مثلاً من که پس‌زمینه‌ام سفیده، اینم سفید گذاشتم ⬜)، و جابجایی افقی و عمودی سایه رو هم به ترتیب ۳۰ و منفی ۳۰ پیکسل قرار بده. با این کار، دیگه رسماً پرونده این فاصله‌گذارها بسته می‌شه و کارمون باهاشون تمومه!

◀️ خب رفقا، حالا که گوشه‌های بالای هیروسکشن‌مون رو میزون کردیم و همه چی اوکی شده، وقتشه یه عنوان باحال (مثلاً «رایا وردپرس») تو اون گوشه بالایی که با کانتینر innercan آماده‌اش کردیم، نشون بدیم. چطوری؟ خیلی راحت! اول از طریق «منوی ساختار» (Navigator) المنتور، کانتینر innercan رو انتخاب کن، بعدش هم یه «ویجت سربرگ» (Heading Widget) بردار و خیلی شیک بندازش تو دلِ همین کانتینر. به همین سادگی! 😉

• خب رفیق، می‌رسیم به قسمت خوشگل‌سازی عنوان! 🎨 انتخاب استایل، اندازه فونت، رنگ اولیه‌اش و بقیه اینجور جزئیات ظاهری رو کامل می‌سپارم به ذوق و سلیقه خودت؛ چون کار خیلی پیچیده‌ای نیست😉اگه دلت می‌خواد یه کار خیلی خفن‌تر و خاص‌تر انجام بدی و کاری کنی که رنگ این عنوانت مثل هیروسکشن من، ثابت نمونه و هر چند ثانیه یه رنگ جدید و جذاب به خودش بگیره و چشمک بزنه ✨، یه ترفند کوچولو ولی خیلی باحال برات دارم! برای پیاده‌سازی این ایده جادویی، برو به تب «پیشرفته» (Advanced) همین ویجت عنوانی که اضافه کردی. اونجا، تو قسمت کلاس‌های CSS، این کلاس رو براش وارد کن: RayaWp-textX . بعدش، یه کوچولو اسکرول کن بیا پایین‌تر، تا برسی به بخش «CSS سفارشی» (Custom CSS). اونجا، کدهایی که این پایین برات آماده کردم رو کپی کن و در این بخش قرار بده (پیست کن):

🔒

محتوای VIP+

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

×

ایجاد انیمیشن چیدمان کارت‌ ها روی هم هنگام اسکرول

مطالعه

ویژه شوید 🙂

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

به به! به همین قشنگی و سادگی، گوشه سمت راست هیروسکشن‌مون همون چیزی شد که می‌خواستیم 😁

⬅️ خب، نوبتی هم باشه، حالا دیگه نوبتِ سمت چپِ هیروسکشن‌مونه! برای شروع کارِ این سمت، یه کانتینر جدید به اسم canleft بساز و دقیقاً زیر همون کانتینر innercan که داشتیم، اضافه‌اش کن.

• برای این کانتینر canleft، این تنظیمات رو اعمال کن: «عرض» رو بذار «تمام عرض» (۱۰۰٪)، و یه «حداکثر عرض» (Max Width) ۹۵ پیکسلی هم بهش بده تا خیلی کشیده نشه. «کمترین ارتفاع» (Min Height) رو ۳۸۷ پیکسل ست کن، و محتویات داخلش رو هم به صورت «وسط چین» تراز کن.

• برای canleft این کارا رو بکن: اول تو تب «استایل»، رنگ پس‌زمینه‌شو سفید کن. ⚪ بعدش هم تو تب «پیشرفته»، «موقعیت» رو «مطلق» کن، و بعدش «آفست افقی» رو ۱۲۰۰ و «آفست عمودی» رو ۲۹۱ پیکسل تنظیم کن. تموم شد و رفت!

• خب، برای اینکه گوشه‌های چپ هیروسکشن هم مثل سمت راست، نرم و دلبر بشن، دوباره باید دست به دامن همون «فاصله‌گذار»های دوست‌داشتنی‌مون بشیم! 😁 پس، بدون معطلی، دو تا «ویجت فاصله‌گذار» دیگه بردار و بندازشون تو دلِ کانتینر canleft. بعدش هم تنظیماتی که پایین تر میگم رو براشون اعمال کن.

• خب، برای تنظیم نهایی اون دو تا فاصله‌گذار چپی، سریع بریم سر اصل مطلب: اول برای هر دوتاشون، تو تب «پیشرفته»، «عرض» (Width) رو پیدا کن، حالتش رو بذار روی «سفارشی» (Custom) و عدد ۶۰ پیکسل رو براش ست کن و جایگاه جفتشون رو مطلق در نظر بگیر. بعد بخش «حاشیه»، «انحنای گوشه‌»ها رو (بعد از اینکه اون زنجیر اتصال مقادیر رو باز کردی) همه‌ رو صفر و فقط گوشه چپ رو ۳۵ پیکسل بذار. بعدش، تو تب «استایل»، رنگ پس‌زمینه هر دو تا رو یه رنگی شبیه لبه‌های عکس اصلیت انتخاب کن (یادت باشه با Colorzilla یا هر ابزار رنگ‌ دیگه‌ای می‌تونی کد دقیق رنگ رو از روی عکست دربیاری؛ مثلاً من خودم #5A84FD استفاده کردم چون به تصویرم می‌خورد). حالا دوباره برگرد به تب «پیشرفته» برای هر دو ویجت؛ اینجا تنظیمات «سایه کادر» رو انجام میدیم: رنگ سایه رو هم‌رنگ پس‌زمینه اصلی صفحه‌ات بذار (مال من سفیده ⬜، پس سایه‌ام هم سفیده) و بعد جابجایی افقی و عمودی سایه رو هم به ترتیب منفی ۸ و ۱۰ پیکسل ست کن. و اما برای مرحله آخر که خیلی هم مهمه، هنوز تو تب «پیشرفته» برای هر دو فاصله‌گذار هستیم: اول «موقعیت» (Position) هر دو تا ویجت رو روی حالت «مطلق» (Absolute) قرار بده و بعدش، برای تنظیم دقیق جایگاهشون، آفست‌هاشون رو اینجوری وارد کن: برای ویجت فاصله‌گذار اولی (همونی که بالاتر قرار می‌گیره)، «آفست افقی» (X) رو ۸ پیکسل و «آفست عمودی» (Y) رو منفی 58 پیکسل (-58px) تنظیم کن؛ و برای ویجت فاصله‌گذار دومی (همونی که پایین‌تره)، «آفست افقی» (X) رو منفی ۶۰ پیکسل (-60px) و «آفست عمودی» (Y) رو ۳۱۸ پیکسل بذار. و تمام!

• حالا که اون فضای سفید و خوش‌فرم سمت چپ هیروسکشن‌مون (همون که یه حالت دنج و تو رفته داره) آماده‌ست، وقتشه که یه متن دلخواه، مثلاً یه عنوان جذاب مثل URL سایتمون رو به نمایش بزاریم. پس، خیلی راحت، «ویجت سربرگ» (Heading) رو از پنل ابزارک های المنتور پیدا کن و داخل کانتینر canleft، دقیقاً زیر اون دومین ویجت فاصله‌گذاری که چند لحظه پیش اضافه کردی، قرارش بده.

• برای این ویجت عنوانی که تازه اضافه کردی، خوشگل‌سازی ظاهریش مثل متن، فونت، و استایل‌های دیگه با خودت؛ چون هم کار آسونیه و هم کاملاً سلیقه‌ای، فقط حواست باشه با کلیت طرحت هماهنگ باشه و خوب از آب دربیاد. 😉 اما برای اینکه دقیقاً سر جاش قرار بگیره، لطفاً برو به تب «پیشرفته» (Advanced) خودِ ویجت. اونجا، اول «موقعیت» (Position) رو روی «مطلق» (Absolute) تنظیم کن. بعدش هم، «آفست افقی» (X Offset) رو منفی ۱۵ پیکسل (-15px) و «آفست عمودی» (Y Offset) رو ۶۰ پیکسل (60px) قرار بده. اینطوری عنوانمون دقیق میاد همونجایی که می‌خوایم (یعنی فضای سفید تورفته)

◀️عالیه، تا اینجا که کارمون خوب پیش رفته! 👍 حالا برای اینکه قسمت پایینیِ هیروسکشن رو بسازیم، باید چند تا المان دیگه زیر اون ویجت عنوانی که بالاتر اضافه کردیم، ردیف کنیم. به این ترتیب عمل کن: اول یه دونه «ویجت ویرایشگر متن» (Text Editor) و بلافاصله به دو تا «ویجت فاصله‌گذار» (Spacer) رو دقیقاً زیر اون عنوان و داخل کانتینر canleft قرار بده.

• خب، برای اون اولین ویجت یعنی «ویرایشگر متن»، متن داخلش رو با یه چیز باحال و دوستانه عوض کن (مثلاً «👋 سلام به رایا وردپرس خیلی خوش اومدین… قراره در کنار هم کلی چیز جالب و خفن در زمینه طراحی و توسعه وب یاد بگیریم 🙂») و بعدش از تب «استایل»، هر جور که خودت عشق می‌کنی و به طرحت میاد، خوشگلش کن (یعنی فونت، رنگ، اندازه‌ و این چیزا دیگه با سلیقه خودت!). بعد که ظاهرش رو اوکی کردی، به تب استایل برو و حاشیه رو 12 پیکسل برای همه گوشه ها در نظر بگیر. سپس بپر تو تب «پیشرفته»؛ اونجا اول «فاصله داخلی» (Padding) رو از همه طرف ۱۰ پیکسل ست کن. بلافاصله بعدش هم، هنوز تو همون تب «پیشرفته»، برو سراغ تنظیمات «موقعیت» (Position): حالتش رو بذار روی «مطلق» (Absolute)، بعد «آفست افقی» (یا همون جابجایی X) رو -894 پیکسل، «آفست عمودی» (یا جابجایی Y) رو 290 پیکسل، و در آخر هم «Z-Index» (زد ایندکس) رو عدد ۱5 تنظیم کن. اینطوری این متن دقیق میشینه سر جاش و تو موقعیتی که مدنظرمونه نمایش داده میشه ✨

• احتمالاً متوجه شدی که گوشه‌های قسمت پایینی هیروسکشن هنوز با طرح اصلی‌مون، کاملاً یکی نیست. برای اینکه این قسمت هم دقیقاً شبیه به طرح اصلیمون دربیاد، از همون دو تا «ویجت فاصله‌گذار» که قبلاً با هم اضافه کردیم، استفاده می‌کنیم. پس حالا، برای اینکه این دو تا ویجت فاصله‌گذار کار خودشون رو به درستی انجام بدن و اون انحنای لازم رو به گوشه‌ها بدن، لطفاً تنظیمات زیر رو برای هر دوتاشون مو به مو اعمال کن:

• خب رفیق، برای تنظیم نهایی و دقیق اون دو تا ویجت فاصله‌گذارمون، این کارا رو سریع و پشت سر هم برای هر دوتاشون انجام بده: اول از تب «محتوا»، «اندازه فاصله» رو 6۰ پیکسل بذار. بعد بپر تو تب «پیشرفته»؛ اینجا برای هر دو ویجت، اول «عرض» رو «سفارشی» (Custom) و ۶۰ پیکسل تنظیم کن، بعد تو بخش «حاشیه» (Border)، «انحنای همه‌ی گوشه‌ها» رو هم ۵۰ پیکسل ست کن، و فراموش نکنی که تو همون تب «پیشرفته»، از قسمت «پس‌زمینه» (Background)، رنگشون رو هم سفیدِ سفید ⚪ انتخاب کنی. هنوز کارمون با تب «پیشرفته» برای هر دو تموم نشده! حالا سراغ «سایه جعبه» (Box Shadow) در بخش حاشیه برو؛ رنگ سایه رو هم‌رنگ پس‌زمینه اصلی صفحه‌ ات (مثلاً سفید ⬜) و جابجایی افقی و عمودی سایه رو هم به ترتیب ۳۰ و منفی ۳۰ پیکسل ست کن. «موقعیت» (Position) هر دو رو هم «مطلق» (Absolute) و «Z-Index» هر دو رو روی 0 قرار بده. حالا فقط می‌مونه آفست‌های اختصاصی‌شون که اونم تو همون تب «پیشرفته» است: برای ویجت فاصله‌گذار اولی (همون بالاییه)، «آفست افقی» (X) رو -330 پیکسل و «آفست عمودی» (Y) رو 330 پیکسل؛ و برای ویجت فاصله‌گذار دومی (همون پایینیه)، «آفست افقی» (X) رو -908 پیکسل و «آفست عمودی» (Y) رو 328 پیکسل تنظیم کن. و تمام! اینم از این دو تا ویجتمون که دقیق سرجاشون قرار گرفتن تا اون حاشیه های جذاب بخش پایینی هیروسکشنمون رو شکل بدن! 😉

توجه! برای اینکه ویجت ویرایشگر متنمون به صورت صحیح و تمام عرص نشون داده بشه کدهای CSS زیر رو در بخش CSS سفارشی ویجت پیست کن:

🔒

محتوای VIP+

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

×

با این افکت خفن، عناوین سایت خود را جذاب کنید

مطالعه

ویژه شوید 🙂

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

◀️ ایول! پایینِ هیروسکشن‌مون هم ردیف شد و دیگه چیزی تا آخرش نمونده! … البته جز یه چیز خیلی مهم و حیاتی: یه دکمه‌ی «کال تو اکشن» توپ و باحال! 🚀 برای اینکه این دکمه‌ رو هم به جمعمون اضافه کنیم، یه «ویجت دکمه» (Button) بردار و خیلی شیک بندازش تو دلِ کانتینر can2، دقیقاً زیر اون آخرین فاصله‌گذاری که اونجا داریم (یعنی پایینِ پایینِ can2). بعدش هم این تنظیماتی که الان برات میگم رو روش ست کن تا دیگه کار بی نقص باشه 🙂

• بعد از اینکه ویجت دکمه رو اضافه کردی، برای جایگذاری دقیقش و اینکه روی تصویر قرار بگیره، این کارها رو تو تب «پیشرفته» (Advanced) انجام بده: «موقعیت» (Position) رو بذار «مطلق» (Absolute)، بعد «آفست افقی» (X) رو ۱۰۰۰ پیکسل، «آفست عمودی» (Y) رو ۷۰ پیکسل، و «Z-Index» رو هم ۲۵ تنظیم کن.
• خب، حالا که جاش درسته، دیگه ظاهرش با خودت! متن دکمه، آیکونش (اگه می‌خوای)، رنگ، فونت و کل استایلش رو برو از تب «محتوا» و «استایل» هر جور که عشقت می‌کشه و به طرحت میاد، ردیف کن. اینجاش دیگه سلیقه‌ایه و دست خودت رو می‌بوسه که یه چیز شیک دربیاری! 👍

و این هم از پایان کار و نتیجه تلاش‌هامون! ببینید چه هیروسکشن جذاب و خفنی رو با هم قدم به قدم ساختیم! 🥳 واقعاً که بعد از این همه مراحل، دیدن نتیجه نهایی لذت‌بخشه، نه؟ ✨

فقط یه نکته خیلی مهم تا یادم نرفته بهتون بگم رفقا: من این طراحی هیروسکشن رو با تمرکز روی نمایش دسکتاپ انجام دادم. از اونجایی که نمی‌خواستم این مقاله و آموزش از این طولانی‌تر و خدای نکرده خسته‌کننده بشه، مسئولیت شیرینِ ریسپانسیو کردنش برای تبلت و موبایل رو با افتخار می‌سپارم به خود شما هنرمندا و طراحان خلاق! 😉 مطمئنم که به بهترین شکل از پسش برمیاید، چون کار خیلی پیچیده‌ای هم نیست. فقط کافیه از نوار ابزار بالای المنتور، حالت پیش‌نمایش رو روی تبلت یا موبایل قرار بدید و بعدش با اون اعداد مربوط به آفست‌های افقی و عمودی فاصله‌گذارها و هر المان دیگه‌ای که موقعیتش رو «مطلق» (Absolute) تنظیم کردیم، یه کم بازی کنید و بالا پایینشون کنید تا بهترین جایگاه و ظاهر رو تو هر دستگاه پیدا کنن. این بهترین فرصته که خلاقیت خودتون رو هم حسابی چاشنی کار کنید و یه چیز منحصر به فرد بسازید! 📏📱

×

آکاردئون خفن به سبک دیوار بساز!

مطالعه

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

ویدیوی این آموزش رو داخل یوتیوب قرار گرفت میتونید از طریق لینک زیر اقدام به مشاهده ویدیو کنید. ضمنا حمایت یادتون نره 🙂

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

خیلی خیلی دوست دارم نتیجه کارهای قشنگ شما و هیروسکشن‌هایی که طراحی می‌کنید رو ببینم! اگه هر سوالی، نظری، یا حتی یه پیشنهاد کوچولو داشتید، یا اگه دوست داشتید نتیجه کارتون رو با ما به اشتراک بذارید، حتماً و حتماً تو قسمت کامنت‌ها این پایین برام بنویسین. با جون و دل همه‌شون رو می‌خونم و جواب میدم. منتظر پیام‌های پرانرژی و خلاقیت‌های بی‌نظیرتون هستم! 😊👇

مراقب خودتون باشید، پرانرژی بمونید و تا آموزش‌های جذاب و کاربردی بعدی، فعلاً خداحافظ همگی! 👋 بدرود!

×

آموزش ساخت تولتیپ در وردپرس بدون پلاگین

مطالعه

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

×

ساخت دکمه شناور تماس با المنتور و بدون افزونه

مطالعه