قسمت اول طراحی سایت اپل با المنتور

در جلسه دوم دوره رایگان آموزش المنتور هدر سایت اپل را طراحی کردیم. در این جلسه قصد داریم طراحی لندینگ پیج آیفون ۱۶ پرو را طراحی کنیم. با ما همراه باشید. برای مشاهده دوره به صورت رایگان برروی دکمه‌ی زیر کلیک کنید.

طراحی سایت اپل

دانلود ویدیوهای سایت اپل

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

روش دوم استفاده از اکستنشن‌های کروم است. برای این‌کار در تنظیمات مرورگر خود برروی تب Extensions هاور کنید. سپس گزینه‌ی Visit Chrome Web Store را انتخاب کنید.

در نوار جستجوی بالا Video Downloader را جستجو کنید. چند اکستنشن برای شما در لیست جستجو ظاهر می‌شود. تست کنید و هرکدام بهتر بود را استفاده کنید. اگر اکستنشن خوبی پیدا نکردید، می‌توانید Internet Download Manager را نصب کنید و به راحتی ویدیوهای تمام وبسایت‌ها را دانلود کنید.

با کلیک برروی آیکن IDM در پایین صفحه لیست ویدیوهای قابل دانلود را مشاهده می‌کنید. هرکدام را که انتخاب کنید، می‌توانید آن را دانلود کنید.

طراحی بخش اول سایت اپل

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

بعد از ساخت این بخش یک کانتینر به داخل آن اضافه کنید.

افزودن عنوان

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

رنگ و اندازه متن را از تب استایل ویرایش کنید تا به ظاهر دلخواه شما نزدیک‌تر شود.

افزودن متن سایه‌دار در زیر عنوان

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

حال باید از تب استایل چیدمان پس زمینه را تغییر دهید که به نوع دلخواه شما برسد.

استایل‌های کانتینر را ویرایش کردید اما هنوز جایگاهی که در سایت اپل می‌بینید را در سایت خود ندارید. نگران نباشید از تب پیشرفته با قراردادن فاصله‌های داخلی از بالا و پایین می‌توانید پس زمینه را در جایگاه موردنظر خود قرار دهید.

افزودن ویدیو

اکنون زمان قرار دادن ویدیو در سایت رسیده است. ویدیو را می‌توانید به صورت پس زمینه بخش قرار دهید. اما وقتی می‌خواهید ویدیو را برای پس زمینه قرار دهید، از شما لینک ویدیو را می‌خواهد.

برای پیدا کردن این لینک وارد بخش رسانه شوید و ویدیو را در کتابخانه بارگذاری کنید.

سپس لینک ویدیو را برداشته و در قسمت پیوند پس زمینه قرار دهید.

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

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

بعد از ویدیو نوبت به افزودن دکمه می‌رسد. برای افزودن دکمه نیاز به یک کانتینر جدید دارید. یک کانتینر جدید به زیر کانتینری که عنوان در آن بود اضافه کنید و فاصله‌ی خارجی آن را از بالا به گونه‌ای تنظیم کنید که دقیقا زیر ویدیو قرار بگیرد.

طراحی دکمه

سپس یک دکمه در کانتینر قرار دهید. رنگ دکمه را که در جلسه اول دوره رایگان المنتور یاد گرفتید چگونه به رنگ‌های عمومی سایت اضافه کنید، به عنوان رنگ پس زمینه‌ی دکمه قرار دهید. هنوان دکمه را تغییر داده و تلاش کنید تا جایی که می‌توانید ظاهر دکمه را به سایت اپل شبیه کنید.

افزودن متن زیر دکمه

زیر دکمه یک ویرایشگر متن نیاز دارید که متن را در آن بنویسید. وسط چین کنید، سایز فونت را تنظیم کنید و رنگ متن را با کلیک راست برروی متن و inspect، مانند تصویر زیر پیدا کنید.

کد رنگی که کپی کردید را در قسمت رنگ متن پیست کنید. اگر تنظیمات دیگری نیاز است، انجام دهید. و تمام. 😎

نتیجه‌ی طراحی این جلسه را می‌توانید در تصویر زیر مشاهده کنید.

امیدواریم از مطالب گفته شده در این جلسه لذت برده باشید. جلسه‌ی بعد دوره رایگان آموزش المنتور را از دست ندهید.

رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...