دسته بندی آموزش ها

سر فصل ها

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

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

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

پخش ویدیو

تایم لاین ویدئو آموزشی

مقدمه آموزش

00 00

نصب قالب hello

09 02

تنظیمات عرض قالب

35 02

ساخت هدر

17 03

ساخت فوتر

17 03

قالب های مورد نیاز

59 08

قالب Single و Archive

56 09

طراحی آرشیو مطالب

04 11

طراحی صفحات Single

27 14

طراحی صفحه محصول

50 20

ساخت آرشیو محصولات

20 25

قالب وب سایت چیست؟

قالب یا پوسته یا  Theme به طور کلی همان ارکان ظاهری وب سایت است و چهارچوب ساختار گرافیکی بخش های مختلف وب سایت محسوب میگردد که تمامی محتوا های وب سایت مانندتصاویر،متون و … را در بر میگیرد.در واقع قالب یک وب سایت بستر اصلی ارائه مطالب وب سایت است و شرایط تنظیم نمایش محتوا ها را برای طراحان و کاربران مهیا میسازد و تجربه نشان داده است که هر چقدر یک قالب سفارشی و بر اساس نوع فعالیت و نیاز های شغلی و فکری یک مجوعه ساخته شده باشد یعنی هر چقدر اختصاصی تر باشد بازخورد  بهتری در بخش رابط کاربری برای جلب رضایت بیشتر کاربران را همراه داشته است. معمولا قالب ها با کد های html و css نوشته میشوند و برای طراحی قالب وردپرسی علاوه بر دانش برنامه نویسی و مهارت های گرافیکی باید به توابع تطبیقی وردپرسی و php نیز آشنایی داشت
ساخت قالب وردپرسی با المنتور پرو در ایران المنتور

کاربرد قالب های آماده؟

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

نقش صفحه ساز ها در توسعه قالب ها

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

المنتور یک افزونه صفحه ساز هست یا قالب ساز ؟

المنتور در عین اینکه یک صفحه ساز محسوب میگردد اما المنتور پرو با قابلیت Elementor theme builder یک قالب ساز حرفه ای نیز به شمار می آید برای همین اصرار مجموعه ایران المنتور در این است که حتما از قالب Hello elementor استفاده کنید و با استفاده از المنتور پرو  قالب خود را خلق و با قابلیت صفحه سازی المنتور پرو صفحات وب سایت خود را سفارشی سازی کنید.
المنتور یک قالب ساز است . می توانید قالب خود را طراحی کنید

تفاوت قالب Hello elementor با سایر قالب های وردپرسی چیست ؟

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

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

مرحله اول

نصب و فعال سازی قالب hello elementor

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

2. از منو پیشخوان وردپرس > نمایش > پوسته ها > وارد افزودن پوسته تازه شوید

3. در قسمت جستجو در پوسته ها کلمه hello را جستجو کنید تا قالب برای شما نمایش داده شود.

4. قالب hello elementor را نصب و فعال کنید.

مرحله دوم

تعیین عرض صفحات

1. از منو پیشخوان وردپرس > المنتور > تنظیمات > وارد تب استایل شوید.

2. در بخش عرض محتوا، عرض مورد نظر خود را بر اساس پیکسل وارد و تنظیمات را ذخیره کنید (پیشفرض: 1440px)

مرحله سوم

طراحی هدر و فوتر قالب

1. هدر

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

1. از منو پیشخوان وردپرس > قالب ها > افزون قالب را انتخاب و نوع قالب را بر روی هدر قرار دهید.

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

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

4. توجه کنید که برای ساخت هدر حتما باید تگ html سکشن(بخش) بر روی header قرار داشته باشد. به این صورت که سکشن هدرتونو انتخاب و در تب طراحی > بخش طرح بندی > تگ HTML را بر روی header قرار دهید.

5. تظیمات و طراحی خودتونو انتشار و در پنجره display دکمه ADD CONDITION  را انتخاب و  هدرتونو روی Entire Site (تمامی صفحات وب سایت) ذخیره و بروزرسانی کنید.

2. فوتر

طراحی و انتشار فوتر همانند هدر می باشد. فقط توجه کنید که تگ html سکشن را بر روی footer قرار دهید

نکته

هنگامی که ما از قسمت قالب های المنتور > افزون قالب را انتخاب میکنیم در قسمت نوع قالب انواعی از قالب ها نظیر popup, section ,header, footer, document , single , archive و … را مشاهده خواهید کرد و هر کدام ویژگی های منحصر به فرد خود را دارد. اما توجه کنید که برای ساخت قالب فقط باید از قالب های header , footer , single  و  archive استفاده کرد و در صورتی که از فروشگاه ساز ووکامرس نیز استفاده میکنید قالب single products و product archive نیز اضافه خواهد شد. 

همچنین از منو پیشخوان وردپرس > قالب ها > وارد Theme Builder شوید و مانند تصویر بالا می توانید مشاهده کنید که برای ساخت یک قالب سفارشی به چه نوع از قالب های المنتور نیازمندیم.

مرحله چهارم

تفاوت قالب Single و Archive

لینک سازی در وب سایت به دو صورت انجام میشود (تعاریف صرفا برای تشخیص و درک قالب single و archive به کاربران توسط مجموعه ایران المنتور تهیه و هیچگونه منبعی ندارد)

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

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

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

شروع کار با قالب Archive

1. از منو پیشخوان وردپرس > قالب ها > افزودن قالب را انتخاب و نوع قالب رو بر روی Archive قرار می دهیم.

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

3.تغییراتمون رو ذخیره در قسمت ADD CONDITION  قالب مون رو بر روی قسمت های مورد نظر اعمال و درج میکنیم. 

مرحله شیشم

شروع کار با قالب Single

1. از منو پیشخوان وردپرس > قالب ها > افزودن قالب را انتخاب و نوع قالب رو بر روی Singe قرار می دهیم.

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

 
3. تغییراتمون رو ذخیره در قسمت ADD CONDITION  قالب مون رو بر روی قسمت های مورد نظر اعمال و درج میکنیم.
ووکامرس
در صورتی که قصد استفاده از فروشگاه ساز ووکامرس را دارید ادامه این مقاله را دنبال کنید

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

مرحله هفتم

ساخت صفحه محصول

1. از منو پیشخوان وردپرس > قالب ها > افزودن قالب را انتخاب و نوع قالب را بر روی Single product قرار دهید. نامی برای قالب درج و قالب خود ایجاد کنید.

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

3. تنظیمات سفارشی خود را ذخیره و در قسمت display دکمه Add Condition را انتخاب صفحه محصول را به محصولاتی که مد نظر داریم را اضافه میکنیم.

مرحله هشتم

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

همانطور که گفتیم صفحاتی که به صورت غیر مستقیم ساخته می شوند جزء قالب های َArchive هستند و میدانیم که پس از نصب افزونه ووکامرس صفحه ای به اسم فروشگاه ساخته می شود. در ظاهر این صفحه جزء برگه های وردپرس محسوب می شود اما به دلیل اینکه این صفحه به وسیله ووکامرس ساخته می شود باید این صفحه را جزء صفحات آرشیو در نظر گرفت.

1. از منو پیشخوان وردپرس > قالب ها > افزودن قالب را انتخاب و نوع قالب را بر روی Product Archive قرار می دهیم. نامی برای قالب خود درج و آن را ایجاد می کنیم

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

3. قالبمون رو ذخیره و در قسمت Add Condition طراحیمون رو بر روی قسمت های مختلف نظیر صفحه فروشگاه و یا دسته بندی و برچسب های فروشگاهمون اعمال میکنیم

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

14
دیدگاه

avatar
10 دیدگاه نویسنده
iranelementordeviچریکeparsa.ir@gmail.comرضا کرمانشاهی اخرین دیدگاه های نویسنده
احمدرضا شاهوردی
مهمان
احمدرضا شاهوردی

مثل همیشه عالی و کامل ممنون از ایران المنتور بابت اموزش های خوبتون

ایرج ثروتی
مدیر کل

باعث افتخاره مجموعه ما هست که تونستیم رضایت شما رو جلب کنیم دوست عزیز

رویا جبرائیلی
مهمان
رویا جبرائیلی

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

mohsen
مهمان
mohsen

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

رضا کرمانشاهی
مهمان
رضا کرمانشاهی

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

ایرج ثروتی
مدیر کل

خواهش میکنیم باعث افتخاره.

eparsa.ir@gmail.com
کاربر ایران المنتور
eparsa.ir@gmail.com

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

چریک
مهمان
چریک

سلام من افزونه المنتور پرو رو همراه با افزونه های jet blocks – jet blog – jet elements – jet menu – jet tabs – JetEngine کامل نصب کردم ولی وقتی میخام قالب جدید ایجاد کنم قسمت اول که نوع قالب رو انتخاب میکنیم
فقط دو گزینه “صفحه” و بخش(سکشن) میاد برام. امکانش هست یه راهنمایی کنید ممنون میشم

devi
مهمان
devi

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

You can`t add more product in compare