طراحی لندینگ پیج رزومه با المنتور(قسمت اول)

طراحی لندینگ پیج رزومه با المنتور(قسمت اول)

بروزرسانی شده در15 مهر 1404

آنچه در این مقاله می خوانید...

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

آماده‌سازی صفحه و ساختار کلی

اول کار، باید صفحه رو برای طراحی آماده کنیم:

  1. تنظیمات صفحه:
    • باید بریم تو تنظیمات صفحه و طرح‌بندی رو بذاریم روی canvas.
    • این کار باعث می‌شه صفحه کاملاً سفید بشه و هدر و فوتر سایت حذف بشن.
  2. مشکی کردن پس‌زمینه:
    • دوباره تو تنظیمات صفحه، قسمت استایل، رنگ پس‌زمینه رو مشکی می‌کنیم.
  3. ایجاد کانتینر اصلی:
    • یه کانتینر کلی به صفحه اضافه می‌کنیم.
    • برای ساختن ساختار دو ستونه‌ی لندینگ، دو تا کانتینر داخلی (یکی برای چپ و یکی برای راست) توی کانتینر اصلی اضافه می‌کنیم.
  4. چیدمان افقی:
    • چون کانتینرهای داخلی الان به صورت عمودی زیر هم قرار گرفتن، باید بریم سراغ کانتینر اصلی و تو تب طرح‌بندی، جهت رو روی ردیف یا افقی بذاریم تا بیان کنار هم.
  5. تقسیم‌بندی کانتینر راست:
    • تو کانتینر سمت راست، قراره دو تا بخش داشته باشیم (بالا و پایین). پس دو تا کانتینر دیگه رو داخل این کانتینر راست اضافه می‌کنیم.

نکته کلیدی: ساختار نهایی ما این شکلیه: کانتینر اصلی که شامل کانتینر چپ (برای عکس) و کانتینر راست (شامل دو کانتینر داخلی عمودی) هست.

تا این جا کاری ساختار دیزاین خودمون رو پیاده سازی کردیم،ادامه آموزش رو می تونید در ویدیو بالا مشاهده کنید.امیدوارم که از این آموزش استفاده کافی رو برده باشید.

جلسه بعدی

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *