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

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

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

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

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

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

کل این پروسه حتی بدون یک خط کدنویسی انجام می‌شود.

پیش‌نیازها

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

شروع به کار طراحی سایت شرکتی

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

ایجاد برگه صفحه اصلی

برای انجام این کار باید وارد قسمت تازه و برگه شوید. برگه را انتخاب کنید و سپس روی برگه جدید، نام را روی خانه یا Home بسته به نیاز خودتان قرار دهید.

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

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

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

حالا می‌توانید وارد بخش ویرایش با المنتور در صفحه اصلی شوید.

ویرایش صفحه خانه با المنتور

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

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

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

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

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

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

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

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

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

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

طراحی هدر سایت شرکتی

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

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

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

البته پیش از انجام هر کاری و تغییر هدر، وارد بخش تنظیمات شوید.

طرح‌بندی را روی تمام عرض المنتور قرار دهید. حالا باید انتخاب کنید که هدر المنتور وب‌سایت شما چند ستون باشد.

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

می‌توانید به بخش میانی منو و سپس به بخش سمت چپ (البته مطابق سلیقه خود) یک دکمه اضافه کنید. تمامی این ابزارها در المنتور قابل جست‌وجو هستند.

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

می‌توانید متن هرکدام از منوها و یا دکمه‌ها را با کلیک روی آن‌ها و بر اساس جعبه متنی که دیده می‌شود ویرایش کنید.

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

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

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

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

نمایش هدر در قالب اصلی

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

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

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

طراحی صفحه اصلی سایت شرکتی

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

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

در ستون سمت راست هم می‌توانید یک سربرگ اضافه کنید. البته حالا بهتر است که سربرگ قبلی را حذف کنید.

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

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

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

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

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

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

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

با یک کلیک روی هر باکس می‌توانید تغییرات لازم را در منوی سمت راست المنتور روی آن اعمال کنید.

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

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

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

ایجاد ردیف برای قالب سایت شرکتی

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

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

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

حال می‌توانید ستون اضافه را حذف کنید.

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

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

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

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

اسکرول به پایین در منوی قالب

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

شناسه CSS را روی #start قرار دهید. حالا لازم است که دکمه مربوطه را پیوند دهید به #start

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

ساخت ستون جدید

مجدداً در بخش انتهایی قالب سایت خود یک منوی دو ستون ایجاد کنید و ستون بالا را کپی و تکثیر نمایید.

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

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

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

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

اضافه‌کردن SVG به قالب اهورا

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

به جهت انجام این کار یک المان HTML به قالب و بخش ستون خود اضافه کنید. این کار با جستجوی html و کشیدن و رهاکردن آن به ستون مربوطه مطابق تصویر زیر قابل انجام است.

حالا کد تصویر SVG خود را پیست کنید. این کدها در اینترنت و وب‌سایت‌های مختلف موجود است. مطابق تصویر زیر حتی می‌توانید کد تصویر زیر را تغییر دهید.

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

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

ایجاد ساختار و کادربندی

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

ساخت فوتر سایت شرکتی با المنتور

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

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

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

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

عنوان را قرار دهید و سپس فوتر 2 را مشخص کنید. فوتر 2 نام مشخصه فهرست ماست.

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

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

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

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

نتیجه‌گیری نهایی

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

رضا راد

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