ساخت قالب با المنتور | آموزش طراحی قالب ریسپانسیو وردپرس

طراحان افزونه المنتور هر ماه یک کیت الگوی آماده رو ارائه میدن. این قالب های المنتور آماده معمولا حول محور یک شغل یا دسته بندی خاصی هستن. مثلا این ماه کیت الگوی آژانس دیجیتال طراحی شد و در کتابخانه الگوهای المنتور پرو قرار گرفت.در این مطلب یک وبسایت کامل با استفاده از Elementor Theme Builder طراحی میکنیم. آموزش طراحی قالب وردپرس بدون کدنویسی با افزونه المنتور رو در این مقاله میخونید. دیگه نیاز به خرید قالب وردپرس ندارین.

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

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

• صفحات استاتیک اصلی مثل هوم پیج، درباره ما و …
• سرصفحه
• پا صفحه
• صفحات 404
• آرشیو بلاگ
• الگوی پستهای تکی
• پنجره های پاپ آپ

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

دانلود رایگان آموزش طراحی سایت با وردپرس

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

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

در این مطلب بعنوان مثال از کیت الگوی آماده آژانس دیجیتال استفاده کردیم.

وبسایت وردپرسی شما دارای تعدادی صفحه اصلی هست. از جمله:

• صفحه اصلی یا نخست
• صفحه درباره ما
• صفحه خدمات
• صفحه مشتری
• صفحه اخبار
• صفحه تماس با ما

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

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

قالب هلو المنتور رو نصب و اکتیو کنین

چون قصد داریم از elementor theme builder و کیت الگوی اماده المنتور استفاده کنیم، پس نیازی نیست کلی وقت بذاریم و دنبال قالبهای پولی وردپرس برای سایتمون بگردیم. قصد ما اینه که یه قالب سبک، بهینه و در عین حال انعطاف پذیر برای سایتمون داشته باشیم. در پیشخوان وردپرس به قسمت نمایش——-> پوسته ها———–> افزودن پوسته تازه برید و قالب hello elementor رو سرچ، نصب و اکتیو کنین. قالب وردپرس رایگان هلو برای طراحی سایت با المنتور بسیار مناسبه.

صفحات استاتیک وبسایتتون رو تنظیم کنین

گام بعدی چیه؟ میریم به برگه ها ———> اضافه کردن برگه جدید و شروع به ساخت صفحات اصلی سایتمون میکنیم.

اول یه برگه با نام home میسازیم و ادیت با المنتور میزنیم. تا ویرایشگر المنتور لود بشه.بعد از باز شدن المنتور به تنظیمات صفحه برین و layout صفحه رو روی elementor full width یا تمام عرض بذارین.

گام بعدی رفتن به الگوهای المنتور و باز کردن الگوی Digital Agency هست.

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

حالا از جستجوگر المنتور استفاده کنین و صفحات جدید رو وارد کنین. ( ctrl + e )

lمثل گام قبلی صفحه رو تمام عرض کنین و از الگوهای کتابخونه، برگه درباره ما about تم آژانس دیجیتال رو انتخاب کنین.

دوباره همین مراحل رو تکرار کنین و صفحات زیر رو ایجاد کنین

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

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

در پایان این قسمت باید به تنظیمات وردپرذس برین و صفحات استاتیکتون رو معرفی کنین.

• برید به قسمت تنظیمات ——> خواندن 
• گزینه صفحه اصلی شما نمایش داده شود  ———-> یک برگه یکتا
• برگه صفحه اصلی یا hime page رو انتخاب کنین

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

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

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

• سرصفحه
• پاصفحه
• پستهای تکی
• پستهای آرشیو یا بلاگ
• صفحات 404

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

برای ساختن قالب این قسمتها باید به قسمت قالبها در پیشخوان ——> theme builder —–> افزودن جدید بریم. برای ساخت قالبها نیاز به خرید المنتور پرو دارین.

حالا وقتشه قسمتهای مختلف سایتمون رو طراحی کنیم.

نحوه ساخت هدر با المنتور

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

برید به تب هدر در theme builder و گزینه اضافه کردن جدید رو کلیک کنین. در پنجره بعدی یه نام وارد کنین و ایجاد قالب رو کایک کنین.

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

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

برای ساخت منوی سایت:

• در داشبورد وردپرس برین به نمایش —> منو
• به منو یه نام بدین
• ایجاد منو رو کلیک کنین

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

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

حالا هم save & close

پاصفحه یا footer سایت با المنتور

نوبت میرسه به ساخت فوتر سایت.

• برگردین به theme builder در داشبورد وردپرس
• تب footer رو انتخاب کنین
• فوتر جدید رو کلیک کنین
• یه نام وارد کنین و ایجاد قالب رو کلیک کنین

حالا یه لیستی از فوترهای آماده میبینین اما باید فوتر کیت آماده آژانس دیجیتال رو پیدا کنین. سرچ کنین و درج کنین. به محض درج فوتر یه پیش نمایش زنده از فوتر سایتتون میبینین. همچنین هدر رو هم میتونین همزمان ببینین. چه میکنه المنتور.

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

برگه اخبار در افزونه المنتور

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

اگه کاربری بر روی یک پست در برگه اخبار کلیک کرد باید اون نوشته جداگانه نشون داده بشه. مسلمه که برای این نوشته های تکی که بهشون single post میگیم باید استایل مشخصی رو تعیین کنیم. مواردی که سینگل پستها رو از هم متفاوت میکنه:

• عنوان پست
• نام نویسنده
• تصویر پست یا نوشته

برای شروع مراحل زیر رو دنبال کنین:

• رابط کاربری theme builder رو باز کنین
• تب آرشیو رو کلیک کنین
• آرشیو جدید رو کلیک کنین
• یه نام وارد کرده و ایجاد قالب رو کلیک کنین

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

برگه اخبار در افزونه المنتور

خب حالا باید صفحه آرشیو رو منتشر کنین. بعد هم برین چند تا نوشته درست کنین و همه نوشته ها رو برای یه دسته مشخص مثلا با نام “فراتر از اخبار” علامت بزنین. بصورت خودکار این پستها وارد صفحه آرشیو میشن.

طراحی برگه تکی اخبار در افزونه المنتور

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

برای حل این مسئله باید به ساخت قالب سینگل single بپردازیم.

• رابط کاربری theme builder رو باز کنین
• تب single رو کلیک کنین
• single جدید رو کلیک کنین
• از منوی کشویی دوم نوشته رو انتخاب کنین
• یه نام وارد کنین و ایجاد قالب

مثل هدر و فوتر یه لیست از سینگل پستها میبینین اما الگوی آژانس دیجیتال رو سرچ کنین و درج کنین.

میتونین از ویجتهای دینامیک المنتور هم استفاده کنین.

مثلا اگه شما میخواین ویجت post info رو تغییر بدین میتونین متا دیتاهای زیر رو هم تغییر بدین:

• نویسنده پست
• تاریخ انتشار پست
• دیدگاههای پست
• غیره

حالا روی انتشار کلیک کنین و از پنجره ظاهر شده دسته فراتر از اخبار رو انتخاب کنین و save & close

حالا همه پست بلاگهاتون یه استایل هماهنگ داره.

یه کار دیگه هم انجام بدین اونم اینه که به قسمت نمایش —-> منو برین. دسته فراتز از اخبار رو به منو اضافه کنین.

صفحه 404 در صفحه ساز المنتور

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

• رابط کاربری theme builder رو باز کنین
• تب single رو کلیک کنین
• single جدید رو کلیک کنین
• از منوی کشویی دوم 404 رو انتخاب کنین
• یه نام وارد کنین و ایجاد قالب

الگوی 404 کیت آماده آزانس دیجیتال رو انتخاب کنین و درج کرده و منتشر کنین. بعد انتشار مژده میدم بهتون که طراحی سایتتون رو تموم کردین. تامام.

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

به همین راحتی شما تونستین کل وبسایت وردپرسیتون رو با قالب های آماده المنتور بسازین و یه طراحی قالب وردپرس رایگان رو داشه باشین. المنتور هر ماه یه کیت آماده جذاب طراحی میکنه و در دسترس شما قرار میده. در حال حاضر کیتهای زیر رو داریم:

• Digital agency آژانس دیجیتال
• Gym & Fitness باشگاهی
• Portfolio نمونه کار
• Law firm وکالت
• The Magazine Template Kit مجله ای

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