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

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

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

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

پس اگه دنبال یه آموزش عملی و واقعی هستی که بتونی بعدش خودت سایت شرکتت، مشتریت یا هر پروژه‌ای رو بدون نیاز به برنامه‌نویس طراحی کنی، این مقاله دقیقاً برای توئه.

آماده‌سازی سایت برای شروع طراحی با المنتور و قالب اهورا

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

نصب وردپرس و قالب اهورا

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

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

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

نصب و فعال‌سازی افزونه المنتور

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

نسخه رایگان المنتور برای شروع کار کاملاً کافیه، مخصوصاً وقتی با قالبی مثل اهورا کار می‌کنی که خودش کلی ابزار و استایل از پیش آماده داره. با همین نسخه رایگان می‌تونی سکشن بسازی، المان‌ها رو بکشونی (Drag & Drop) و ظاهر سایتت رو دقیقاً همون‌طوری که می‌خوای طراحی کنی.

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

ساخت برگه خانه (صفحه اصلی سایت)

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

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

تنظیم برگه خانه به عنوان صفحه اصلی

الان ما یه برگه خالی داریم که قراره بشه صفحه‌ی اصلی سایت. برای اینکه وردپرس بدونه باید همون صفحه رو به‌عنوان صفحه اصلی نشون بده، باید یه تنظیم کوچیک انجام بدیم. کافیه بری به مسیر تنظیمات > خواندن و از قسمت «صفحه نخست شما نمایش داده شود»، گزینه یک برگه‌ی ایستا (انتخاب کنید) رو فعال کنی. بعد توی فهرست پایین‌تر، برگه «خانه» رو به عنوان صفحه نخست انتخاب کن و تغییرات رو ذخیره کن.

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

ورود به ویرایش با المنتور

حالا بخش جذاب ماجرا شروع میشه. برگه «خانه» رو باز کن و روی دکمه‌ی ویرایش با المنتور کلیک کن. چند ثانیه بعد، وارد محیط طراحی المنتور می‌شی؛ جایی که می‌تونی هر چی تو ذهنت داری، به‌صورت بصری روی صفحه پیاده کنی.

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

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

تنظیمات اولیه المنتور برای شروع طراحی سایت شرکتی

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

ورود به تنظیمات سایت در المنتور

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

حالا برگرد به محیط المنتور و وارد یه برگه شو (مثلاً همون برگه خانه). از پایین صفحه روی آیکون منوی سه‌خطی بالا سمت چپ کلیک کن و بعد گزینه‌ی تنظیمات سایت (Site Settings) رو انتخاب کن. اینجا جاییه که قراره رنگ‌ها، فونت‌ها، فاصله‌ها و کلی تنظیم جزئی دیگه رو انجام بدیم.

تنظیم رنگ‌های اصلی سایت

اول از همه، باید رنگ‌های اصلی برند یا شرکت رو تعریف کنیم. در المنتور بخشی وجود داره به نام Global Colors یا همون رنگ‌های سراسری. اینجا معمولاً چهار رنگ اصلی وجود داره:

• Primary (رنگ اصلی)
• Secondary (رنگ دوم یا مکمل)
• Text (رنگ متن)
• Accent (رنگ تأکیدی مثل دکمه‌ها یا لینک‌ها)

برای یه سایت شرکتی بهتره رنگ‌ها خیلی جیغ نباشن. مثلاً اگه شرکتت رنگ سازمانی آبی داره، می‌تونی رنگ اصلی رو آبی ملایم، رنگ مکمل رو خاکستری تیره، و رنگ تأکیدی رو یه تناژ آبی پررنگ‌تر بذاری.

فقط یادت باشه که این رنگ‌ها بعداً روی تمام متن‌ها، تیترها و دکمه‌ها اثر می‌ذارن. یعنی اگه بعداً بخوای همه‌ی رنگ دکمه‌ها رو عوض کنی، فقط با تغییر رنگ Global، کل سایت آپدیت میشه. این دقیقاً یکی از اون ویژگی‌های باهوشانه المنتوره که باعث میشه طراحی تمیز و حرفه‌ای بمونه.

تنظیم فونت‌ها و تایپوگرافی سایت

حالا وقت فونت‌هاست. از بخش Global Fonts وارد شو. المنتور اینجا هم چهار گروه فونت داره: Headings (تیترها)، Text (متن‌ها)، Accent (برای دکمه‌ها و لینک‌ها) و Additional.

برای سایت‌های فارسی معمولاً فونت‌هایی مثل ایران‌یکان، شبنم، انجمن یا پینار انتخاب‌های خیلی خوبی هستن. فونتی رو انتخاب کن که خوندنش راحت باشه و توی اندازه‌های مختلف، ظاهر مرتبی داشته باشه. یه نکته طلایی: برای تیترها از وزن بولد یا نیمه‌بولد استفاده کن تا قوی‌تر دیده بشن، ولی برای متن‌های معمولی وزن نرمال بهتره. ارتفاع خط (Line Height) رو هم روی ۱.۸ یا ۲ تنظیم کن تا متن‌ها نفس بکشن و خوانایی بالا بره.

تنظیم فاصله‌ها، عرض محتوا و ساختار صفحه

توی بخش Layout از تنظیمات سایت، می‌تونی عرض پیش‌فرض محتوا (Content Width) رو مشخص کنی. برای بیشتر سایت‌های شرکتی، عدد ۱۲۰۰ پیکسل گزینه‌ی استانداردیه. Spacing یا فاصله بین سکشن‌ها هم خیلی مهمه. اگه سکشن‌ها به هم بچسبن، ظاهر سایت فشرده و غیرحرفه‌ای میشه. معمولاً فاصله عمودی بین سکشن‌ها رو بین ۸۰ تا ۱۲۰ پیکسل تنظیم کن تا صفحه نفس بکشه و طراحی تمیز بمونه.

تو همین بخش می‌تونی تنظیمات مربوط به Breakpoints رو هم ببینی، یعنی اندازه‌ی تبلت و موبایل که بعداً برای واکنش‌گرایی خیلی به دردت می‌خوره. فعلاً همون مقادیر پیش‌فرض المنتور (۷۶۸px برای تبلت و ۴۸۰px برای موبایل) کاملاً کافیه.

ذخیره تنظیمات و بررسی اولیه طراحی

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

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

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

شروع طراحی هدر در قالب اهورا

قالب اهورا یه ویژگی فوق‌العاده داره به اسم سازنده هدر و فوتر (Header & Footer Builder). یعنی می‌تونی بدون نیاز به کدنویسی، هدر اختصاصی خودت رو طراحی کنی. برای شروع، از منوی پیشخوان برو به مسیر:
اهورا > سازنده > افزودن هدر جدید یه نام برای هدرت انتخاب کن، مثلاً «هدر اصلی سایت شرکتی». بعد روی دکمه‌ی ویرایش با المنتور کلیک کن تا وارد محیط طراحی بشی.

توی محیط المنتور یه سکشن خالی داری که می‌تونی هر المانی خواستی داخلش بندازی. ما قراره یه هدر سه‌ستونه بسازیم: ستون سمت چپ برای لوگو، ستون وسط برای منو، و ستون سمت راست برای دکمه تماس یا ثبت‌نام.

افزودن لوگو در هدر

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

بعد از انتخاب، اندازه‌ی تصویر رو روی «سفارشی (Custom)» بذار تا بتونی دقیق‌تر کنترلش کنی. در نهایت، هم‌ترازی (Alignment) رو روی چپ‌چین بذار و مطمئن شو که تصویر عموداً وسط ستون قرار گرفته. با همین حرکت ساده، ستون اول هدرمون آماده‌ست.

طراحی منوی اصلی سایت

حالا نوبت ستون وسطه؛ جایی که قراره منوی اصلی سایت باشه. ویجت Nav Menu (منوی ناوبری) رو از ستون سمت چپ المنتور بگیر و بنداز تو ستون وسط. اگه هنوز منویی در وردپرس نساختی، اول از منوی نمایش > فهرست‌ها یه فهرست جدید درست کن و لینک‌ صفحات اصلی مثل «خانه»، «درباره ما»، «خدمات»، «وبلاگ» و «تماس با ما» رو اضافه کن.

بعد از ساخت منو، برگرد به المنتور و توی تنظیمات ویجت Nav Menu، اون فهرست رو انتخاب کن. چیدمان منو رو روی افقی (Horizontal) بذار تا آیتم‌ها کنار هم نمایش داده بشن. برای ظاهر منو، رنگ متن رو با رنگ متن سایت هماهنگ کن و برای حالت Hover (زمانی که موس روی منو میره) یه رنگ تأکیدی مثل آبی یا نارنجی انتخاب کن تا جذاب‌تر بشه. اگر آیتم‌ها خیلی به هم نزدیک بودن، از بخش Gap Between فاصله بین لینک‌ها رو زیاد کن تا ظاهر منو مرتب‌تر بشه.

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

ستون سمت راست هدر معمولاً جای دکمه‌های مهمه؛ مثل تماس، ثبت‌نام، یا ورود به حساب کاربری. برای این بخش از ویجت Button (دکمه) استفاده کن. متنش رو مثلاً بذار «تماس با ما» یا «شروع کنید».

در تنظیمات دکمه، رنگ پس‌زمینه رو همون رنگ اصلی برند بذار (مثلاً آبی یا نارنجی) و رنگ متن رو سفید کن تا دکمه جلوه داشته باشه. می‌تونی از گوشه‌های گرد (Border Radius) استفاده کنی تا ظاهر مدرن‌تری بگیره.
در نهایت، لینک دکمه رو به صفحه تماس یا فرم مشاوره متصل کن.

اگر می‌خوای هدرت مینیمال‌تر باشه، می‌تونی به‌جای دکمه، یه آیکون تماس (مثل گوشی تلفن) بذاری و لینک تماس تلفنی (tel:) بهش بدی تا وقتی کاربر روی اون زد، مستقیماً با شماره تماس بگیره.

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

وقتی هر سه ستون رو ساختی، باید مطمئن شی که ترازبندی بینشون درسته. سکشن اصلی رو انتخاب کن و Vertical Align رو روی Middle (وسط‌چین عمودی) بذار تا المان‌ها هم‌سطح بشن. عرض ستون‌ها رو هم به ترتیب ۲۰٪ برای لوگو، ۶۰٪ برای منو و ۲۰٪ برای دکمه تنظیم کن تا تعادل خوبی برقرار بشه.

حالا روی آیکون View Responsive Mode پایین صفحه کلیک کن و حالت موبایل و تبلت رو بررسی کن. در حالت موبایل، معمولاً بهتره منو به صورت همبرگری (Hamburger Menu) نمایش داده بشه. المنتور خودش این قابلیت رو داره. فقط یادت نره اندازه‌ی لوگو و دکمه رو در موبایل کمی کوچک‌تر کنی تا فضا گرفته نشه.

تنظیم پس‌زمینه، سایه و افکت هدر

برای اینکه هدر از بخش‌های پایین‌تر صفحه جدا دیده بشه، می‌تونی براش یه پس‌زمینه‌ی روشن یا نیمه‌شفاف بذاری.
رنگ سفید با شفافیت ۹۰٪ معمولاً انتخاب خوبیه. اگه بخوای مدرن‌تر به‌نظر برسه، یه سایه ظریف (Box Shadow) زیرش بذار تا جدا شدنش از صفحه مشخص‌تر بشه.

در بعضی سایت‌های شرکتی، هدر موقع اسکرول ثابت می‌مونه (Sticky Header). برای این کار، سکشن هدر رو انتخاب کن، از تب Advanced به بخش Motion Effects برو و گزینه‌ی Sticky > Top رو فعال کن. حالا اگه صفحه رو اسکرول کنی، می‌بینی که هدر همیشه بالای صفحه باقی می‌مونه.

ذخیره و فعال‌سازی هدر در قالب اهورا

وقتی طراحی تموم شد، روی دکمه‌ی بروزرسانی (Update) کلیک کن تا هدر ذخیره بشه. برگرد به تنظیمات قالب‌ساز اهورا و تعیین کن که این هدر روی تمام صفحات سایت نمایش داده بشه. اگه مثلاً بخوای برای صفحات خاصی هدر متفاوتی داشته باشی، می‌تونی از همینجا شرط نمایش (Display Condition) براش تنظیم کنی.

الان اگه سایت رو باز کنی، یه هدر شیک، تمیز و واکنش‌گرا داری که کاملاً با قالب اهورا و رنگ‌های برندت هماهنگه.

طراحی صفحه اصلی سایت شرکتی با المنتور

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

شروع طراحی صفحه با سکشن معرفی (Hero Section)

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

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

بعد از اون، یه دکمه (Button) اضافه کن و متنش رو بذار «شروع همکاری» یا «تماس با ما». دکمه‌ رو با رنگ اصلی برند طراحی کن تا تو چشم باشه. در ستون سمت راست، می‌تونی از یه تصویر حرفه‌ای یا موشن گرافیک استفاده کنی. مثلاً تصویری از همکاری تیمی، مشاوره مالی، یا تکنولوژی، بسته به نوع شرکتت.

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

طراحی بخش خدمات شرکت

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

حالا سه تا یا چهار تا ستون بساز و داخل هرکدوم یه ویجت Icon Box بنداز. برای هر ستون یه آیکون متناسب انتخاب کن، مثلاً:

• مشاوره تخصصی
• طراحی وب‌سایت
• بازاریابی دیجیتال
• پشتیبانی ۲۴ ساعته

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

طراحی بخش ویژگی‌ها یا مزیت‌های شرکت

الان که خدمات معرفی شدن، باید دلایل انتخاب شرکتت رو هم نشون بدی. یه سکشن بساز با پس‌زمینه‌ی متفاوت — مثلاً یه رنگ خاکستری خیلی روشن یا گرادینت خیلی ظریف. تیترش رو بذار: «چرا ما را انتخاب کنید؟»

زیر تیتر، چهار ویژگی مهم رو با آیکون و متن توضیحی نشون بده.
مثلاً:

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

نکته مهم اینه که توضیحات این بخش خیلی کوتاه باشن ولی حس اعتماد بده. هدفش تبلیغ نیست، بلکه تقویت برند و اعتبار شرکته. برای جذاب‌تر شدن، از ویجت Divider (خط جداکننده) یا Counter (شمارنده‌ی آماری) هم می‌تونی استفاده کنی تا آمارهای واقعی شرکتت رو نشون بدی، مثل: «۵۰۰+ پروژه موفق»، «۱۰ سال سابقه»، «۹۸٪ رضایت مشتری».

طراحی بخش معرفی شرکت (درباره ما)

بخش «درباره ما» بخشیه که حس انسانی برند رو منتقل می‌کنه. توی این قسمت باید به کاربر نشون بدی که پشت این برند، یه تیم واقعی وجود داره.

یه سکشن جدید با دو ستون بساز. در ستون سمت چپ یه تصویر از تیم، دفتر کار یا مدیرعامل بذار. در ستون سمت راست، تیترش رو بذار: «درباره شرکت ما بیشتر بدانید» و زیرش یه متن صادقانه و کوتاه بنویس. مثلاً: «ما یک تیم خلاق و باانگیزه‌ایم که از سال ۱۳۹۵ تا امروز، به صدها کسب‌وکار کمک کردیم تا وارد دنیای دیجیتال بشن و رشد کنن.»

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

طراحی بخش رضایت مشتریان و نمونه‌کارها

کاربران معمولاً به تجربه‌ی دیگران اعتماد می‌کنن. بنابراین داشتن بخش «نظرات مشتریان» یا «نمونه‌کارها» خیلی مهمه. برای این قسمت از ویجت Testimonials استفاده کن. سه تا نظر واقعی (یا تستی) از مشتری‌ها بذار، همراه با اسم و شغلشون. اگر پروژه‌های تصویری داری، ویجت Image Carousel برای نمایش نمونه‌کارها عالیه.

یادت باشه عکس‌ها باید با کیفیت باشن و استایل ثابت داشته باشن. مثلاً همه افقی باشن یا همه مربعی.
با این کار بخش نمونه‌کارها مرتب و حرفه‌ای دیده میشه.

طراحی بخش دعوت به اقدام (Call to Action)

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

طراحی بخش ویژگی‌ها و مزیت‌های شرکت

تو هر سایت شرکتی، یه بخشی باید وجود داشته باشه که به بازدیدکننده نشون بده چرا باید به این شرکت اعتماد کنه. اون بخش دقیقاً همینجاست: بخشی برای نمایش ویژگی‌ها و مزیت‌های رقابتی. اینجا باید قشنگ، ساده و تأثیرگذار بنویسی که چه چیزی شرکت تو رو از بقیه جدا می‌کنه. اما نه با جمله‌های تکراری مثل «ما بهترینیم!» یا «به ما اعتماد کنید!»، اینا دیگه جواب نمی‌ده. باید با طراحی و محتوا، حس اعتماد رو بسازی، نه با شعار.

انتخاب هدف بخش ویژگی‌ها (قراره چی رو ثابت کنیم؟)

قبل از اینکه حتی یه سکشن توی المنتور بسازی، باید بدونی هدف این بخش چیه. آیا قراره قدرت شرکتت رو نشون بدی؟
یا قراره حس رضایت مشتری رو منتقل کنی؟ یا اینکه مزیت رقابتی خاصی داری که بقیه ندارن؟

مثلاً:

• اگه شرکتت خدمات طراحی ارائه میده، مزیت می‌تونه «طراحی سفارشی برای هر مشتری» باشه.
• اگه شرکت پشتیبانی نرم‌افزاری داری، مزیتت «پاسخگویی سریع و ۲۴ ساعته» می‌تونه باشه.

هر چی که هست، باید با زبان ساده و واقعی نوشته بشه. این بخش باید به کاربر بگه: «ما واقعاً توی این زمینه تخصص داریم، تجربه داریم و می‌تونیم بهت کمک کنیم.»

طراحی ساختار ظاهری بخش ویژگی‌ها با المنتور

حالا می‌ریم سراغ طراحی خود بخش. توی المنتور یه سکشن جدید بساز و یه تیتر مرکزی براش بنویس.
مثلاً: «چرا مشتریان ما را انتخاب می‌کنند؟» یا یه تیتر جذاب‌تر مثل: «چند دلیل ساده برای اینکه ما متفاوتیم».

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

بعد، سکشن رو به چهار ستون تقسیم کن. داخل هر ستون از ویجت Icon Box یا Image Box استفاده کن تا هر ویژگی رو با یه آیکون یا تصویر کوچیک نشون بدی. برای هر ویژگی یه تیتر، یه توضیح کوتاه و یه آیکون مناسب انتخاب کن.

مثلاً:

• «تمرکز بر نتیجه» — ما فقط پروژه تحویل نمی‌دیم، نتیجه می‌سازیم.
• «تحویل سریع پروژه‌ها» — چون می‌دونیم زمان برای تو طلاست.
• «پشتیبانی حرفه‌ای و واقعی» — بدون تیکت و فرم، مستقیم با کارشناس حرف بزن.
• «تجربه و تخصص تیمی» — سال‌ها تجربه در طراحی سایت‌های موفق.

فاصله‌ی بین ستون‌ها رو کمی زیاد کن تا هر ویژگی نفس بکشه و شلوغ دیده نشه. فونت تیترها رو بولد کن و رنگ آیکون‌ها رو با رنگ برندت تنظیم کن تا هماهنگ باشه.

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

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

برای هر باکس ویژگی، وارد تنظیماتش شو و در بخش Motion Effects گزینه‌ی Fade In Up یا Zoom In رو فعال کن.
با این کار، وقتی کاربر به این بخش می‌رسه، باکس‌ها به‌صورت نرم ظاهر می‌شن و حس زنده بودن به صفحه می‌دن.
فقط دقت کن انیمیشن زیاد استفاده نکنی، چون اگر همه‌چیز بجنبه، تمرکز از بین میره. یه حرکت ملایم کافیه تا حس حرفه‌ای بودن منتقل بشه.

اضافه کردن آمار واقعی برای افزایش اعتماد

یکی از ترفندهای هوشمندانه تو این بخش، استفاده از آمار واقعیه. آمار باعث میشه کاربر حس کنه شرکتت واقعی و فعالِ نه فقط یه اسم روی وب. از ویجت Counter در المنتور استفاده کن و مثلاً این موارد رو نشون بده:

• ۵۰۰+ پروژه موفق
• ۸ سال تجربه
• ۱۰۰٪ رضایت مشتری
• ۲۴/۷ پشتیبانی واقعی

برای اینکه عددها بیشتر دیده بشن، رنگ متن‌ها رو متفاوت انتخاب کن و فونت اعداد رو بزرگ‌تر بگیر. حتی می‌تونی با یه خط افقی ظریف (Divider) بین هر عدد، بخش‌بندی ایجاد کنی تا چشم کاربر راحت‌تر بچرخه.

طراحی نسخه موبایل بخش ویژگی‌ها

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

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

طراحی بخش نمونه‌کارها و پروژه‌های انجام‌شده

واقعیت اینه که هیچ‌چیزی به‌اندازه‌ی دیدن نمونه‌کار واقعی نمی‌تونه اعتماد یه مشتری رو جلب کنه. ممکنه ساعت‌ها درباره کیفیت کار، تجربه تیم یا تخصص فنی توضیح بدی، ولی تا وقتی کاربر یه پروژه‌ی واقعی نبینه، هنوز قانع نشده.
برای همین بخش «نمونه‌کارها» باید جزو ثابت هر سایت شرکتی باشه.

این بخش فقط یه گالری عکس ساده نیست؛ در واقع یه ابزار قدرتمند برای فروش غیرمستقیم خدماته. وقتی کاربر نمونه پروژه‌های واقعی رو می‌بینه، ناخودآگاه ذهنش شروع می‌کنه به مقایسه: «اگه این شرکت تونسته برای بقیه همچین پروژه‌ای انجام بده، احتمالاً برای من هم می‌تونه.» دقیقاً همین‌جا نقطه‌ایه که اعتماد شکل می‌گیره.

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

قبل از شروع طراحی، باید بدونی چرا داری این بخش رو می‌سازی. هدف فقط نمایش چند تا عکس از پروژه‌ها نیست.
در واقع قراره با این بخش داستان شرکتت رو تعریف کنی؛ یعنی با هر نمونه‌کار به کاربر نشون بدی که چه مشکلی وجود داشته، چه چالشی رو پشت سر گذاشتی و به چه نتیجه‌ای رسیدی.

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

طراحی ظاهری بخش نمونه‌کارها با المنتور

برای شروع، در المنتور یه سکشن جدید بساز و یه تیتر چشم‌گیر براش بنویس. مثلاً: «نمونه‌کارهای انجام‌شده توسط تیم ما» یا یه جمله جذاب‌تر مثل: «یه نگاه کوتاه به بخشی از پروژه‌های موفق ما».

زیر تیتر، یه توضیح کوتاه بنویس تا کاربر بفهمه پروژه‌ها در چه زمینه‌هایی انجام شدن. مثلاً: «ما در حوزه طراحی وب‌سایت، برندینگ و بازاریابی آنلاین برای کسب‌وکارهای مختلف فعالیت داریم. در ادامه بخشی از پروژه‌های اجراشده توسط تیم ما رو می‌تونید ببینید.»

برای چیدمان، معمولاً دو روش اصلی وجود داره: اگر تعداد پروژه‌ها زیاده و بیشتر تصویری هستن، از چیدمان شبکه‌ای (Grid) استفاده کن. اما اگه می‌خوای هر پروژه تمرکز بیشتری بگیره، چیدمان اسلایدری (Carousel) انتخاب بهتریه.

در المنتور می‌تونی از ویجت Portfolio یا Image Gallery برای حالت شبکه‌ای استفاده کنی. اگه پروژه‌ها توضیحات و داستان خاصی دارن، ویجت Slides یا Carousel گزینه‌ی مناسب‌تریه چون اجازه می‌ده برای هر پروژه متن جداگانه بنویسی.

جزئیات مهم در طراحی هر آیتم نمونه‌کار

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

سوم، لینک مشاهده پروژه. اگر پروژه آنلاین هست یا نمونه‌ای ازش وجود داره، حتماً یه دکمه با عنوان «مشاهده پروژه» بذار تا کاربر بتونه خودش نتیجه رو ببینه. اگه پروژه‌ها زیادن، بهتره اون‌ها رو دسته‌بندی کنی. مثلاً دسته‌هایی مثل «طراحی سایت»، «برندینگ»، «دیجیتال مارکتینگ» یا «مشاوره فروش آنلاین». این فیلترها باعث می‌شن کاربر سریع‌تر پروژه‌های مرتبط با نیاز خودش رو پیدا کنه و سایتت منظم‌تر دیده بشه.

جلوه‌های تصویری و افکت‌های هاور

یکی از اشتباه‌های رایج در طراحی نمونه‌کارها اینه که همه‌چیز ثابت و بی‌حرکت نمایش داده میشه. در حالی که المنتور ابزارهای زیادی برای اضافه کردن حرکت و تعامل داره. با افکت‌های Hover می‌تونی کاری کنی که وقتی موس روی عکس پروژه می‌ره، یه لایه نیمه‌شفاف ظاهر بشه و عنوان یا توضیح پروژه روی اون دیده بشه. مثلاً یه پس‌زمینه مشکی با متن سفید که ظاهر مدرن و حرفه‌ای‌تری داره. این افکت‌ها باعث می‌شن کاربر حس کنه با یه سایت زنده و پویا در ارتباطه.

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

نوشتن توضیحات مؤثر برای هر پروژه

اشتباه رایج خیلی از طراح‌ها اینه که فقط عکس پروژه‌ها رو می‌ذارن و عنوان می‌نویسن «پروژه شماره ۱». در حالی که توضیحات کوتاه ولی هدفمند تأثیر خیلی بیشتری داره.

توضیحات هر پروژه باید خلاصه، دقیق و قابل‌درک باشه. از اصطلاحات فنی سنگین استفاده نکن تا کاربر عادی هم بفهمه دقیقاً چی انجام دادی. مثلاً بنویس: «با طراحی این وب‌سایت، نرخ فروش برند آلفا تا ۳۵٪ افزایش پیدا کرد.» وقتی کاربر این جمله رو می‌خونه، ناخودآگاه فکر می‌کنه: «پس احتمالاً اگه منم با این شرکت کار کنم، نتیجه مشابهی می‌گیرم.»

نمایش نمونه‌کارها در نسخه موبایل

در نسخه موبایل باید دقت کنی که طراحی سبک و واکنش‌گرا باشه. چیدمان‌های سه‌ستونه یا گالری‌های سنگین ممکنه صفحه رو شلوغ کنن و باعث خستگی کاربر بشن. تعداد ستون‌ها رو در حالت موبایل به یک یا دو تا کاهش بده تا نمایش تمیزتر بشه. سایز فونت تیترها و توضیحات رو کمی کوچک‌تر کن تا متن‌ها در یه خط جا بشن. Lightbox رو هم فعال کن تا کاربر بتونه با لمس تصویر، نسخه بزرگ‌تر رو ببینه و نیازی به زوم کردن نداشته باشه.

افزودن بخش رضایت مشتری بعد از نمونه‌کارها

یکی از ترفندهای حرفه‌ای برای افزایش اعتماد، اضافه کردن بخش رضایت مشتری بلافاصله بعد از نمایش پروژه‌هاست.
کاربر وقتی یه پروژه رو می‌بینه، ناخودآگاه این سؤال براش پیش میاد که: «آیا مشتری از نتیجه راضی بود؟» برای این کار می‌تونی از ویجت Testimonial Carousel استفاده کنی. هر نظر شامل اسم مشتری، لوگوی شرکتش (در صورت اجازه) و یه جمله کوتاه از رضایتش باشه.
مثلاً:
«از همکاری با تیم شما واقعاً راضی بودیم. سایت دقیقاً همون چیزی شد که انتظار داشتیم.» — شرکت آلفا
این چند جمله کوتاه می‌تونه تأثیر روانی عمیقی روی ذهن کاربر بذاره و اعتمادش رو به برندت چند برابر کنه.

نکات سئو در طراحی بخش نمونه‌کارها

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

اگه برای هر پروژه صفحه جدا داری، عنوان سئو و توضیح متای مناسب بنویس تا در نتایج گوگل دیده بشه. حتی آدرس لینک‌ها رو هم کوتاه و انگلیسی تنظیم کن، مثل: /projects/website-design-alpha. این جزئیات ساده باعث میشه بخش نمونه‌کارها علاوه بر زیبایی، از نظر فنی و سئو هم ارزشمند باشه.

طراحی فرم تماس و بخش ارتباط با ما در سایت شرکتی

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

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

شروع طراحی و ساختار کلی بخش تماس

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

ساختار پیشنهادی برای این بخش معمولاً دو ستونه‌ست. در ستون سمت چپ فرم تماس قرار می‌گیره و در ستون سمت راست، اطلاعات تماس و نقشه موقعیت شرکت. این چیدمان باعث میشه کاربر هم فرم رو ببینه و هم اطلاعات تماس در دسترسش باشه.

طراحی فرم تماس حرفه‌ای با المنتور

برای طراحی فرم تماس، از ویجت Form المنتور پرو استفاده کن چون ظاهر تمیز، امکانات بالا و تنظیمات راحتی داره. فرم تماس باید فقط شامل اطلاعات ضروری باشه؛ نام، ایمیل، شماره تماس و پیام کاربر. فیلدهای اضافی مثل “موضوع” یا “شرکت” فقط باعث می‌شن کاربر بی‌حوصله بشه و فرم رو نصفه رها کنه.

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

طراحی بخش اطلاعات تماس و موقعیت شرکت

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

اگر شرکتت دفتر فیزیکی داره، حتماً یه نقشه گوگل به انتهای این ستون اضافه کن تا کاربر بتونه مکان شرکت رو به‌صورت دقیق پیدا کنه. این کار نه‌تنها باعث اعتماد بیشتر میشه، بلکه از نظر سئو محلی هم به سایت کمک می‌کنه.

طراحی نسخه موبایل بخش تماس

در نسخه موبایل، باید ترتیب ستون‌ها تغییر کنه تا فرم تماس بالاتر از اطلاعات تماس قرار بگیره. معمولاً کاربران موبایل اول سراغ فرم میرن، بعد دنبال شماره یا نقشه می‌گردن.

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

دکمه‌های تماس سریع و تعامل بیشتر با کاربر

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

این قابلیت مخصوصاً برای نسخه موبایل عالیه، چون کاربر با یه لمس می‌تونه تماس بگیره. رنگ دکمه‌ها رو طوری انتخاب کن که با رنگ برند هماهنگ باشن اما همچنان جلب توجه کنن.

طراحی ظاهری و پس‌زمینه بخش تماس

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

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

افزودن فراخوان نهایی برای ارتباط

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

نکات فنی و سئو در طراحی بخش تماس

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

توضیح متا رو طوری بنویس که کاربر ترغیب بشه وارد سایت بشه، مثلاً: «با شرکت [نام برند] تماس بگیرید. از طریق فرم تماس، واتساپ یا شماره تلفن، کارشناسان ما آماده پاسخگویی به شما هستند.» در نهایت، حتماً کپچای امنیتی اضافه کن تا از ارسال اسپم جلوگیری بشه.

طراحی فوتر سایت شرکتی

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

فوتر در واقع نقطه‌ی جمع‌بندی سایته؛ جاییه که کاربر باید حس کنه مسیرش تموم شده و حالا می‌تونه تصمیم بگیره — تماس بگیره، عضو خبرنامه بشه یا شبکه‌های اجتماعی رو دنبال کنه.
پس اگه فوترت درست طراحی نشه، در واقع داری یکی از مؤثرترین فرصت‌های تعامل با کاربر رو از دست می‌دی.

ساخت فوتر با المنتور و قالب‌ساز اهورا

برای شروع، از قالب‌ساز (Theme Builder) المنتور استفاده کن. توی داشبورد وردپرس به مسیر قالب‌ها > Theme Builder > فوتر (Footer) برو و یه قالب جدید بساز. در قالب اهورا هم این قابلیت وجود داره و خیلی راحت می‌تونی فوتر اختصاصی خودت رو طراحی و تنظیم کنی تا در تمام صفحات نمایش داده بشه.

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

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

افزودن لوگو و توضیح کوتاه در فوتر

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

زیر لوگو یه توضیح کوتاه بنویس. متن باید ساده، خلاصه و صمیمی باشه، نه تبلیغاتی. مثلاً بنویس: «ما در شرکت آلفا از سال ۱۳۹۵ در زمینه طراحی وب‌سایت و دیجیتال مارکتینگ فعالیت داریم و هدفمون کمک به رشد آنلاین کسب‌وکارهاست.»

این توضیح کوتاه به کاربر نشون میده شرکتت واقعیه، سابقه داره و هدفش مشخصه. حتی می‌تونی در همین بخش یه لینک کوچیک به صفحه “درباره ما” هم بذاری تا کاربر در صورت علاقه، اطلاعات بیشتری بخونه.

طراحی منوهای فوتر

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

صفحات مهمی مثل “تماس با ما”، “سیاست حریم خصوصی”، “سؤالات متداول”، “درباره شرکت” یا “فرصت‌های شغلی” رو حتماً در فوتر بذار. این صفحات معمولاً در قسمت پایین سایت انتظار میرن و نبودشون حس ناقص بودن سایت رو می‌سازه.

در المنتور می‌تونی از ویجت Navigation Menu استفاده کنی و منوی مخصوص فوتر رو انتخاب کنی. حتی می‌تونی برای جذاب‌تر شدن، کنار هر آیتم یه آیکون کوچیک بذاری تا فوترت مدرن‌تر بشه.

افزودن شبکه‌های اجتماعی به فوتر

هیچ فوتر حرفه‌ای بدون لینک شبکه‌های اجتماعی کامل نیست. اینجا جاییه که می‌تونی با کاربر در خارج از سایت هم در ارتباط باشی و برندت رو در ذهنش ماندگار کنی. در المنتور از ویجت Social Icons استفاده کن و لینک صفحات رسمی شرکت در پلتفرم‌هایی مثل اینستاگرام، لینکدین، تلگرام، یوتیوب یا واتساپ رو اضافه کن.

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

تنظیم رنگ پس‌زمینه تیره و تایپوگرافی سبک‌تر

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

از فونت‌های نازک‌تر یا سایز کوچک‌تر برای فوتر استفاده کن تا در نگاه اول سنگین و شلوغ به نظر نرسه. همچنین فاصله بین خطوط (Line Height) رو کمی بیشتر بگیر تا متن‌ها راحت‌تر خونده بشن. در قالب اهورا می‌تونی این تنظیمات رو از قسمت تایپوگرافی به‌صورت دقیق انجام بدی.

نکات طراحی فوتر برای نسخه موبایل

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

اول از همه، ستون‌ها رو برای موبایل به‌صورت عمودی دربیار. در المنتور از قسمت Responsive Mode این کار رو به‌راحتی انجام می‌دی. به جای چهار ستون کنار هم، اون‌ها رو زیر هم قرار بده تا هر بخش کامل و واضح دیده بشه. اندازه فونت‌ها رو کمی بزرگ‌تر کن تا روی موبایل خوانا باشن و فاصله بین آیتم‌های منو رو زیاد کن تا لمس‌کردن راحت‌تر بشه. اگر آیکون شبکه‌های اجتماعی داری، مطمئن شو فاصله بینشون کافی باشه تا اشتباهی لمس نشن.

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

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

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

واکنش‌گرایی یعنی سایتت خودش رو با اندازه‌ی نمایشگر کاربر تطبیق بده؛ بدون اینکه المان‌ها به‌هم بریزن یا دکمه‌ها غیرقابل لمس بشن. در سایت شرکتی، واکنش‌گرایی فقط یه ویژگی فنی نیست، بلکه نشونه‌ی حرفه‌ای بودن برندته. وقتی کاربر روی موبایل وارد سایت میشه و همه‌چیز منظم، واضح و زیبا دیده میشه، هم اعتمادش بیشتر میشه و هم احتمال تماس یا سفارش بالاتر میره.

تنظیم نمایش سایت در تبلت و موبایل با المنتور

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

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

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

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

بررسی چینش هدر، دکمه‌ها و تصاویر در نمایشگرهای کوچک

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

دکمه‌ها هم باید کاملاً قابل لمس باشن. اندازه‌ی استاندارد برای لمس راحت روی موبایل حداقل ۴۰ تا ۵۰ پیکسله.
رنگ دکمه‌ها رو هم طوری انتخاب کن که در صفحه‌های کوچیک به‌خوبی دیده بشن و تضاد رنگی کافی داشته باشن.

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

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

رفع ایرادات چیدمان در حالت واکنش‌گرا

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

یکی از رایج‌ترین ایرادات، فاصله‌ی زیاد یا کم بین المان‌هاست. مثلاً ممکنه دو بخش روی‌هم بیفتن یا بینشون فضای خالی زیادی باشه. در المنتور با تنظیم دقیق Padding و Margin برای هر دستگاه می‌تونی این مشکل رو برطرف کنی.
یه ترفند ساده اینه که برای بعضی از بخش‌ها در موبایل گزینه‌ی “Hide on Mobile” رو فعال کنی تا کاربر فقط اطلاعات مهم‌تر رو ببینه.

مثلاً اگر در نسخه دسکتاپ سه ستون داری که هرکدوم توضیحات مفصلی دارن، در موبایل می‌تونی فقط تیتر و خلاصه هر ستون رو نگه داری و متن کامل رو حذف یا پنهان کنی. این کار باعث میشه صفحه سریع‌تر لود بشه و کاربر خسته نشه.

همچنین سرعت لود در موبایل خیلی مهمه. تصاویری که در دسکتاپ بدون مشکل نمایش داده می‌شن، ممکنه در موبایل باعث کندی سایت بشن. بنابراین حتماً از ابزارهای فشرده‌سازی تصویر و Lazy Load استفاده کن تا سرعت صفحه حفظ بشه.

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

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

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

نکات نهایی

بعد از اینکه طراحی تمام بخش‌ها مثل هدر، نمونه‌کارها، تماس با ما و فوتر تموم شد، باید برگه‌ات رو ذخیره و منتشر کنی. در المنتور این کار خیلی ساده‌ست. وقتی طراحی تموم شد، از پایین صفحه روی دکمه سبزرنگ Update یا Publish کلیک کن. قبل از انتشار نهایی، حتماً یه بار برگه رو در حالت پیش‌نمایش (Preview) ببین تا مطمئن شی همه‌چیز درست سر جاشه، فاصله‌ها، فونت‌ها، تصاویر و نسخه موبایل.

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

نحوه افزودن صفحه به منوی اصلی سایت

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

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

در نهایت تغییرات رو ذخیره کن و سایت رو در مرورگر باز کن تا مطمئن شی منوی جدید به‌درستی کار می‌کنه. اگه از قالب اهورا استفاده می‌کنی، منو به‌صورت خودکار با طراحی سایت هماهنگ میشه و نیاز به تنظیم دستی رنگ‌ها یا فونت‌ها نداره.

نکات نهایی درباره زیبایی‌شناسی، فاصله‌ها و انتخاب رنگ

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

اول از همه درباره فاصله‌ها (Spacing) دقت کن. فاصله‌ی زیاد بین سکشن‌ها باعث میشه صفحه خسته‌کننده به نظر بیاد، و فاصله‌ی کم هم حس شلوغی ایجاد می‌کنه. قانون کلی اینه که بین هر سکشن حداقل ۶۰ تا ۸۰ پیکسل فاصله بذاری تا بخش‌ها نفس بکشن.

در مورد رنگ‌ها، بهتره از پالت برند استفاده کنی و حداکثر سه رنگ اصلی در کل سایت داشته باشی: یکی برای پس‌زمینه، یکی برای متن، و یکی برای دکمه‌ها یا المان‌های تأکیدی. تضاد رنگی خیلی مهمه؛ متن‌ها باید روی پس‌زمینه واضح و خوانا باشن. رنگ‌های خیلی جیغ یا ترکیب‌های نامتعادل (مثل قرمز و سبز روشن) معمولاً برای سایت‌های شرکتی مناسب نیستن.

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

یادآوری درباره تمرین و اجرای پروژه‌های مشابه

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

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

می‌تونی از پروژه‌های واقعی الهام بگیری؛ مثلاً سایت شرکت‌های بزرگ رو ببینی، تحلیل کنی و سعی کنی طراحی مشابهی بسازی. با گذشت زمان متوجه می‌شی که دیگه طراحی یه صفحه جدید برات سخت نیست و خلاقیتت خودش شروع به جریان پیدا کردن می‌کنه.

دعوت به مشاهده دموهای قالب اهورا

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

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

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

جمع‌بندی

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

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

رضا راد

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