آموزش قالب‌های Framer؛ ساخت پورتفولیو از شخصی‌سازی تا انتشار
راهنمای انتخاب و شخصی‌سازی قالب Framer برای پورتفولیو؛ آماده‌سازی نمونه‌کار، کنترل فارسی و موبایل، تنظیم اطلاعات صفحه و شناخت محدودیت خروجی HTML.
قالب آماده می‌تواند شروع ساخت پورتفولیو را ساده کند، اما جایگزین معرفی دقیق مهارت و پروژه واقعی شما نیست. یک سایت با ظاهر زیبا که هنوز نام صاحب قالب، نمونه‌کارهای دیگران و لینک‌های آزمایشی را دارد، برای معرفی حرفه‌ای آماده نیست. در این آموزش Framer از انتخاب قالب تا بررسی نسخه منتشرشده پیش می‌رویم و مشخص می‌کنیم چه بخش‌هایی باید عوض شوند و چه چیزهایی را باید آزمایش کنید.
سناریو، ساخت یک پورتفولیوی کوچک برای هنرجوی طراحی وب است: معرفی کوتاه، چند پروژه تمرینی با توضیح صادقانه و یک راه تماس روشن. این سناریو و معیارهای کنترل، پیشنهاد آموزشی هستند؛ در این مقاله ادعا نمی‌کنیم سایت مشخصی را داخل حساب Framer ساخته یا عملکرد آن را اندازه‌گیری کرده‌ایم.
قالب Framer چیست و چه تفاوتی با یک پوسته دارد؟
طبق آموزش رسمی بازکردن قالب، قالب Framer یک کپی کامل از پروژه است، نه بسته‌ای که مانند پوسته به سایت موجود اعمال شود. پس بعد از انتخاب، با پروژه‌ای کار می‌کنید که متن، تصویر، چیدمان و اجزای آن قابل ویرایش است. اگر از قبل سایتی دارید، تصور نکنید انتخاب یک قالب جدید خودکار تمام محتوای قبلی را با همان آدرس‌ها حفظ می‌کند.
این تفاوت در تحویل پروژه مهم است. پیش از انتخاب قالب، تعیین کنید آیا سایت جدید می‌سازید یا نسخه موجود را بازطراحی می‌کنید. برای بازطراحی، فهرست صفحات و آدرس‌ها را نگه دارید و درباره انتقال هر بخش تصمیم بگیرید. در تمرین این مقاله، پروژه از ابتدا ساخته می‌شود و سایت فعالی جایگزین نمی‌شود.
پیش از انتخاب، محدودیت میزبانی را بشناسید
اگر انتظار دارید در پایان یک پوشه HTML دریافت کنید و آن را روی هر سروری قرار دهید، این نکته تعیین‌کننده است: مستند رسمی Framer می‌گوید خروجی مستقل HTML یا بسته استاتیک برای میزبانی شخصی ارائه نمی‌شود. این سرویس مسیر طراحی و انتشار را در زیرساخت خودش مدیریت می‌کند.
بنابراین قبل از صرف زمان، با مالک پروژه درباره محل میزبانی و روش تحویل توافق کنید. برای پروژه‌ای که کنترل کامل کد و سرور شرط اصلی است، ابتدا مسیر ساخت سایت با HTML و CSS را بررسی کنید. در مقابل، اگر هدف این تمرین آشنایی با طراحی بصری و انتشار در همین پلتفرم است، می‌توانید با دامنه پیش‌فرض شروع کنید و تصمیم‌های خرید را به زمانی موکول کنید که نیاز واقعی روشن شده باشد.
چگونه یک قالب مناسب پورتفولیو انتخاب کنیم؟
از روی تصویر اول تصمیم نگیرید. در پیش‌نمایش قالب، یک بازدیدکننده فرضی باشید: آیا در چند نگاه می‌فهمید صاحب سایت چه کاری انجام می‌دهد؟ آیا نمونه‌کار مشخص است؟ آیا راه تماس را بدون حدس‌زدن پیدا می‌کنید؟ افکت‌های زیاد، جای ساختار روشن را نمی‌گیرند.
| معیار | چه چیزی را بررسی کنیم؟ | نشانه نیاز به اصلاح |
|---|---|---|
| ساختار | معرفی، پروژه‌ها و تماس | صفحه‌های زیاد و بی‌استفاده |
| متن | جا برای توضیح نقش و فرایند | فقط تصویر و عنوان نمایشی |
| موبایل | منو، عرض محتوا و دکمه‌ها | خروج افقی یا متن بسیار کوچک |
| رسانه | تصاویر قابل جایگزینی با کار خودتان | وابستگی طراحی به عکس‌های نامرتبط |
| تحویل | محدودیت قالب و میزبانی | انتظار خروجی یا امکانات تأییدنشده |
برای اولین تمرین، قالبی انتخاب کنید که کمترین تغییر ساختاری را لازم دارد. اگر سه پروژه دارید، قالبی که بر نمایش ده‌ها محصول یا جدول قیمت پیچیده بنا شده احتمالاً کار اضافی ایجاد می‌کند. انتخاب ساده‌تر به شما فرصت می‌دهد محتوا و رفتار سایت را دقیق‌تر بازبینی کنید.
قالب رایگان و پولی را چگونه وارد پروژه کنیم؟
در راهنمای رسمی قالب‌ها، مسیر قالب رایگان با انتخاب Use for Free در Marketplace توضیح داده شده است؛ یک نسخه به حساب شما اضافه می‌شود. برای قالب پولی، خرید و دریافت لینک کپی پروژه از مسیر سازنده انجام می‌شود و پشتیبانی و بازپرداخت نیز باید با سازنده بررسی شود. برای تمرین فعلی، خرید ضروری نیست.
مجوز استفاده از تصاویر و دارایی‌های همراه قالب را جداگانه بخوانید. وجود عکس یا لوگو در پیش‌نمایش را مجوز استفاده از آن برای مشتری خودتان فرض نکنید. همچنین هزینه قالب، پلن سایت و دامنه سه موضوع متفاوت‌اند؛ پیش از هر پرداخت، امکانات جاری و شرایط همان محصول را بررسی کنید.
مرحله اول: محتوای خودتان را پیش از ویرایش آماده کنید
یک پوشه محلی از تصاویر مجاز و یک سند کوتاه از متن‌های نهایی بسازید. در این سند، معرفی، عنوان پروژه‌ها، نقش شما، مسئله حل‌شده و راه تماس را مشخص کنید. اگر پروژه تمرینی است، همین را شفاف بنویسید؛ استفاده از نام مشتری ساختگی یا نسبت‌دادن نتیجه واقعی به تمرین، اعتبار پورتفولیو را کم می‌کند.
نمونه متن معرفی بدون اغراق
من در حال یادگیری طراحی و پیاده‌سازی رابط وب هستم. در این صفحه، پروژه‌های تمرینی خود را همراه با مسئله، تصمیم‌های طراحی و محدودیت‌های هر پروژه معرفی می‌کنم. برای گفت‌وگو درباره همکاری متناسب با سطح تجربه‌ام، از راه تماس درج‌شده استفاده کنید.
این متن را با وضعیت واقعی خودتان جایگزین کنید. عبارت‌هایی مانند «بهترین طراح» یا «افزایش قطعی فروش» چیزی به ارزیابی مهارت اضافه نمی‌کنند. بهتر است روشن کنید چه کاری انجام داده‌اید و چه بخشی خارج از دامنه کار شما بوده است.
کارت پروژه چه اطلاعاتی داشته باشد؟
- عنوان: نامی مشخص که موضوع پروژه را نشان دهد.
- نوع: تمرینی، شخصی یا سفارش واقعی با اجازه نمایش.
- مسئله: یک جمله درباره نیازی که هدف گرفته‌اید.
- نقش: طراحی، پیاده‌سازی یا بخش مشخصی از همکاری تیمی.
- شاهد: تصویر مجاز، نسخه نمایشی یا توضیح تصمیم مهم.
- محدودیت: ویژگی‌هایی که هنوز پیاده‌سازی یا آزمایش نشده‌اند.
برای مثال، «صفحه معرفی یک کتابخانه فرضی» را می‌توانید تمرینی برای چیدمان و خوانایی معرفی کنید؛ لازم نیست آن را سامانه مدیریت کتابخانه بنامید اگر ثبت‌نام، جست‌وجوی واقعی یا پایگاه داده ندارد. تفاوت نمونه بصری با محصول عملیاتی را در توضیح پروژه حفظ کنید.
مرحله دوم: قالب را شخصی‌سازی کنید، نه فقط رنگ آن را
- نسخه کپی‌شده قالب را باز کنید و نام پروژه را معنادار بگذارید.
- فهرست صفحات و منو را مرور کنید و بخش‌های لازم برای سناریوی خود را مشخص کنید.
- نام، معرفی و متن دکمه اصلی را با محتوای تأییدشده عوض کنید.
- تصاویر و نمونه‌کارهای پیش‌فرض را با دارایی‌های مجاز خودتان جایگزین کنید.
- لینک هر دکمه، کارت و آیکن تماس را کنترل کنید.
- صفحات یا بخش‌های بی‌استفاده را پس از بررسی وابستگی منو و لینک‌ها کنار بگذارید.
قبل از حذف یک جزء تکرارشونده، ببینید کجا استفاده می‌شود. تغییر در یک بخش مشترک ممکن است روی چند صفحه اثر بگذارد. اگر تفاوت یک نمونه محلی با جزء مشترک را نمی‌شناسید، ابتدا روی نسخه تمرینی تغییر کوچکی بدهید و تمام صفحات مرتبط را بازبینی کنید.
برای متن فارسی، فقط راست‌چین‌کردن کافی نیست. ترتیب واژه لاتین در جمله، پرانتزها، شماره‌ها و چینش کارت‌ها را بخوانید. عنوان بلند را در اندازه تلفن بررسی کنید و برای جا دادن متن، فونت را بی‌دلیل کوچک نکنید. اگر قالب برای محتوای کوتاه ساخته شده، پاراگراف طولانی را به بخش توضیح پروژه منتقل کنید.
مرحله سوم: پیش‌نمایش و آزمون موبایل
طبق راهنمای پیش‌نمایش Framer، دکمه Play محیط Preview را باز می‌کند و می‌توانید اندازه نمایش را تغییر دهید تا رفتار چیدمان و نقاط شکست را ببینید. این مرحله باید با تعامل واقعی همراه باشد، نه فقط نگاه‌کردن به تصویر ثابت.
یک مسیر آزمون مشخص انتخاب کنید: صفحه اصلی را باز کنید، وارد نمونه‌کار شوید، به صفحه قبلی برگردید و راه تماس را پیدا کنید. همین مسیر را در عرض باریک و عریض انجام دهید. اگر در اندازه‌ای میان دو حالت، متن یا تصویر بیرون می‌زند، فقط دو نمای ازپیش‌تعریف‌شده را درست نکنید؛ اندازه‌های میانی هم بخشی از تجربه کاربرند.
- منو در تلفن باز و بسته می‌شود و گزینه‌ها قابل انتخاب‌اند.
- هیچ تصویر یا کارت باعث پیمایش افقی ناخواسته نمی‌شود.
- دکمه‌ها برچسب روشن دارند؛ «مشاهده پروژه» از «اینجا» دقیق‌تر است.
- متن روی تصویر از پس‌زمینه قابل تشخیص است.
- با کلید Tab می‌توان به لینک‌ها رسید و محل تمرکز دیده می‌شود.
- حرکت و انیمیشن مانع خواندن یا استفاده از بخش‌های اصلی نیست.
محدودیت مهم این است که کد سفارشی اضافه‌شده از Settings در Preview دیده نمی‌شود و باید در سایت منتشرشده بررسی شود. این تفاوت در مستند رسمی پیش‌نمایش آمده است. بنابراین اگر قالب به اسکریپت یا ابزار بیرونی وابسته است، موفقیت پیش‌نمایش به‌تنهایی برای تأیید رفتار نهایی کافی نیست.
مرحله چهارم: نام سایت و اطلاعات صفحه را عوض کنید
باقی‌ماندن عنوان قالب در تب مرورگر یا توضیح صفحه، یکی از نشانه‌های تحویل ناقص است. در Site Settings می‌توانید عنوان و توضیح عمومی سایت را تنظیم کنید؛ Page Settings امکان عنوان و توضیح اختصاصی هر صفحه را می‌دهد. بعد از ذخیره، تغییرات را دوباره منتشر کنید. مسیر دقیق در راهنمای متادیتای Framer توضیح داده شده است.
برای صفحه اصلی یک عنوان توصیفی مانند «نام شما | پورتفولیوی طراحی وب» انتخاب کنید. برای صفحه پروژه، نام پروژه و نقش واقعی را بیاورید. در توضیح صفحه، فهرست طولانی کلمات تکراری ننویسید؛ یک یا دو جمله روشن درباره محتوای همان صفحه کافی است. تنظیم عنوان و توضیح، تضمین رتبه یا نمایش متن دلخواه در نتایج جست‌وجو نیست.
تصویر اشتراک‌گذاری را هم با هویت خودتان هماهنگ کنید و از تصویر دارای نام قالب یا پروژه شخص دیگر استفاده نکنید. نسخه اجتماعی تصویر ممکن است قاب متفاوتی داشته باشد؛ عناصر مهم را نزدیک لبه نگذارید و نتیجه را در پیش‌نمایش لینک بازبینی کنید.
مرحله پنجم: انتشار و کنترل آدرس واقعی
برای انتشار پروژه از Publish استفاده می‌شود و آدرس نهایی از پنل انتشار در دسترس است. برای اعمال تغییرات بعدی، Update را بررسی کنید. این مسیر در راهنمای رسمی انتشار و دامنه آمده است. برای تمرین، از آدرس پیش‌فرض شروع کنید؛ اتصال دامنه مشتری را تنها پس از تأیید مالک و بررسی وضعیت فعلی دامنه انجام دهید.
بعد از انتشار، لینک را خارج از محیط ویرایش باز کنید. عنوان صفحه، تصاویر، مقصد دکمه‌ها و نمایش تلفن را دوباره ببینید. اگر فرم تماس دارید، با داده آزمایشی غیرحساس مسیر ارسال و دریافت را بررسی کنید؛ نمایش پیام موفقیت به‌تنهایی ثابت نمی‌کند پیام به مقصد رسیده است. اگر هنوز مقصد فرم مشخص نیست، آن را به‌عنوان راه تماس آماده معرفی نکنید.
چه زمانی نباید منتشر کنیم؟
وقتی پروژه‌های پیش‌فرض به نام شما نمایش داده می‌شوند، لینک تماس به سازنده قالب می‌رود یا متن فارسی در موبایل خوانا نیست، انتشار را عقب بیندازید. همچنین اگر مالکیت تصاویر یا اجازه نمایش پروژه مشتری روشن نیست، ابتدا آن ابهام را حل کنید. حذف موقت یک بخش نامطمئن، بهتر از معرفی آن به‌عنوان کار تأییدشده است.
چک‌لیست تحویل پورتفولیو
| بخش | معیار پذیرش |
|---|---|
| هویت | نام، معرفی و تصویر متعلق به صاحب سایت است. |
| نمونه‌کار | نوع پروژه و نقش فرد روشن است. |
| تعامل | منو، کارت‌ها و راه تماس مقصد درست دارند. |
| موبایل | متن خوانا و محتوا داخل عرض صفحه است. |
| متادیتا | عنوان و توضیح پیش‌فرض قالب جایگزین شده‌اند. |
| تحویل | آدرس زنده و محدودیت میزبانی برای مالک روشن است. |
اگر هدف شما بررسی مسیر دیگری برای طراحی سایت بدون شروع از کد است، آموزش Wix AI را جداگانه مطالعه کنید. موضوع این مقاله کپی و شخصی‌سازی قالب Framer است؛ گزینه‌های هر ابزار را با نام و مستند خودش دنبال کنید.
پرسش‌های متداول
آیا قالب Framer را می‌توان روی سایت قبلی اعمال کرد؟
قالب آماده، کپی یک پروژه کامل است و مانند پوسته روی پروژه دیگر نصب نمی‌شود. محتوای لازم را باید آگاهانه به پروژه انتخابی منتقل کنید.
آیا برای تمرین حتماً باید قالب پولی بخریم؟
خیر؛ می‌توانید با یک قالب رایگان مناسب شروع کنید. رایگان‌بودن قالب را با رایگان‌بودن همه امکانات میزبانی یا دامنه اختصاصی یکسان ندانید.
آیا می‌توان سایت Framer را به‌صورت HTML دانلود کرد؟
طبق مستند رسمی، خروجی مستقل HTML برای میزبانی سایت در سرور شخصی ارائه نمی‌شود. اگر این نیاز قطعی شماست، پیش از انتخاب ابزار مسیر دیگری بررسی کنید.
آیا درست‌بودن Preview برای انتشار کافی است؟
خیر. پس از انتشار نیز لینک‌ها، موبایل و رفتار واقعی را بررسی کنید؛ کد سفارشی اضافه‌شده از Settings در Preview نمایش داده نمی‌شود.
جمع‌بندی
یک قالب خوب فقط نقطه شروع است. ارزش پورتفولیو از توضیح روشن پروژه‌ها، نمایش صادقانه مهارت و تجربه قابل‌استفاده روی موبایل می‌آید. پیش از کار، محدودیت خروجی و میزبانی Framer را بپذیرید؛ بعد، محتوا را جایگزین کنید، پیش‌نمایش را آزمایش کنید و نسخه منتشرشده را جداگانه بررسی کنید. این فرایند کمک می‌کند خروجی صرفاً یک کپی زیبا از قالب نباشد.
امروز یک قالب رایگان را با محتوای یک پروژه تمرینی شخصی‌سازی کن و پیش از انتشار، مسیر صفحه اصلی تا نمونه‌کار و راه تماس را روی موبایل بررسی کن.