تخفیف 50 درصد برای همه محصولات!

کد تخفیف: BFriday

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

طراحی قالب با المنتور

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

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

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

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

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

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

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

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

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

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

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

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

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

1 المنتور

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

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

2 المنتور

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

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

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

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

الگوی آژانس دیجیتال در المنتور

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

home page با المنتور

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

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ساخت منو با المنتور

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

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

حالا هم save & close

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

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

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

درج فوتر با المنتور

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

single post در المنتور

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

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

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

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

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

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

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

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

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

راحیل دست پیمان

راحیل دست پیمان

پر امید و پر انگیزه ادامه بده. موفق میشی. من بهت قول میدم!

برا دوستاتون بفرستین:

آخرین مطالبمون:

یه پیام برام بفرست

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

2 پاسخ

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

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

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

For security, use of Google's reCAPTCHA service is required which is subject to the Google Privacy Policy and Terms of Use.

من موافق این قوانین هستم .

پنجاه درصد تخفیف بلک فرایدی!! از فرصت استفاده کن

کد تخفیف: BFriday