وبلاگ

elementor tutorial 1
آموزش کامل و رایگان افزونه المنتور | Elementor

آموزش کامل افزونه المنتور Elementor

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

عناوین محتوا

جلسه 1

بهترین افزونه صفحه ساز وردپرس

جلسه 2

آموزش نصب افزونه المنتور

جلسه 3

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

جلسه 4

پیکربندی فونت فارسی، رنگ برای کل محتوای سایت

جلسه 5

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

جلسه 6

ساخت صفحه با المنتور (تنظیمات کامل)

جلسه 7

آموزش کار با ویجت های پرو و رایگان

جلسه 8

ساخت هدر و فوتر سفارشی

جلسه 9

ساخت صفحه تکی نوشته و برگه

جلسه 10

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

جلسه 11

ساخت صفحه ورود و ثبت نام سفارشی

جلسه 12

آموزش کامل واکنش گرایی در المنتور

جلسه 13

ساخت صفحه نتایج جستجو سفارشی

جلسه 14

ساخت صفحه 404 سفارشی

جلسه 15

آموزش نصب و ویرایش تمپلیت آماده المنتور + 2000 تمپلیت آماده رایگان!

جلسه 16

ساخت لندینگ پیج حرفه ای با المنتور

جلسه 1 :

بهترین افزونه صفحه ساز وردپرس​

elementor tutorial 2

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

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

اما از چه افزونه صفحه سازی استفاده کنیم؟

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

در افزونه صفحه ساز به دنبال چه چیزی بگردید؟

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

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

بهترین صفحه ساز وردپرس در جهان

قفل شدن ویژگی مهم استایل ویجت - تمپلیت رابط کاربری امتیاز کلی (25) افزونه
5 5 5 5 5 25 المنتور
5 4 5 4 5 23 اکسیژن
3 5 5 5 5 23 بیور بیلدر
5 5 4 5 3 22 ویژوال کامپوزر

 

1 – افزونه المنتور (Elementor)

المنتور (Elementor) اولین صفحه ساز پیشرفته رایگان و منبع باز برای وردپرس است. با سازنده کشیدن و رها کردن آن ، می توانید عناصر را به راحتی بکشید و رها کنید ، آنها را ویرایش کنید و همه موارد و تغییرات را در همان لحظه به صورت زنده و واقعی مشاهده کنید.

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

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

 

ویژگی ها

  • سازگاری کامل با همه قالب های وردپرسی
  • دارای نسخه رایگان و پرو
  • فارسی سازی کامل
  • دارای بی نهایت ویجت آماده
  • دارای تمپلیت های حرفه ای و متنوع
  • سرعت بسیار بالا
  • سازگاری 100% با موبایل و تبلت

 

2 – صفحه ساز اکسیژن (Oxygen Builder)

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

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

 

ویژگی ها

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

3 – افزونه Beaver Builder

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

می توانید با کشیدن و رها کردن ، صفحات زیبا را به راحتی بسازید. Beaver Builder همچنین با بیشتر قالب های وردپرس کار می کند و به شما امکان کنترل کامل محتوای خود را می دهد. حتی اگر استفاده از افزونه را متوقف کنید ، محتوای شما به ویرایشگر وردپرس منتقل می شود!

ویژگی ها

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

4 – افزونه ویژوال کامپوزر (Visual Composer)

ویژوال کامپوزر (Visual Composer) یک صفحه ساز کامل برای وردپرس است و ابزاری عالی برای مبتدیان و توسعه دهندگان است که به دنبال راهی آسان برای شخصی سازی ظاهر سایت خود هستند.

این افزونه ویرایشگرهای زنده Frontend و Backend را فراهم می کند. راه حل Frontend هنگام تنظیم وب سایت خود نتایج واقعی را به شما نشان می دهد ، در حالی که ویرایشگر backend بیشتر یک رابط مبتنی بر شبکه با ماژول هایی برای کشیدن و رها کردن است.

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

ویژگی ها

  • تقریبا با همه قالب های وردپرس سازگار است
  • دارای ابزار های طراحی متنوع
  • فارسی سازی شده
WP PAGE BUILDER COMPARE
جلسه 2 :

آموزش نصب افزونه المنتور​

elementor tutorial 4

آموزش نصب افزونه المنتور و المنتور پرو

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

آموزش نصب المنتور

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

 

مرحله 1 (نصب نسخه رایگان)

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

افزودن افزونه

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

باکس جستجو

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

نصب المنتور

 

مرحله 2 (نصب نسخه پرو Pro)

باز هم عین مرحله قبلی بر روی منوی افزونه ها > افزودن کلیک کنید.
سپس در صفحه باز شده، بر روی دکمه بارگذاری افزونه کلیک کنید. 
 
بارگذاری افزونه
 
سپس دکمه ای با عنوان “Choose File” برای شما فعال می شود و شما باید بر روی این دکمه کلیک کنید و فایل زیپ المنتور پرو (elementor-pro.zip) را انتخاب کنید.
انتخاب فایل
سپس بر روی دکمه نصب کلیک کنید تا افزونه نصب شود.
 
تا اینجای کار ما افزونه های مورد نیاز المنتور را نصب کردیم و الان باید در بخش افزونه های نصب شده در وردپرس، 2 افزونه المنتور رایگان و پرو نصب و فعال باشد. چون برای هر کاری در المنتور ابتدا باید این افزونه را در وردپرس خود نصب کنیم.
جلسه 3 :

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

elementor tutorial 5

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

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

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

من می خواهم محتوای “خانه” را طراحی کنم، بنابراین ، باید به مسیر زیر بروم : 

پیشخوان وردپرس > برگه ها > افزودن جدید

با این کار ما یک برگه جدید در وردپرس ایجاد می کنیم.

افزودن برگه جدید

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

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

وقتی وارد صفحه ویرایش صفحه شدیم ، متوجه خواهید شد که ویرایشگر گوتنبرگ (Gutenberg) در حال حاضر فعال است.

محیط المنتور

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

در سمت راست صفحه ، ویجت های المنتور را داریم که به ما در ساختن محتوای صفحه کمک می کند.

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

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

نکته مهم !

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

جلسه 4 :

پیکربندی فونت فارسی، رنگ برای کل محتوای سایت​

elementor tutorial 6

انجام تنظیمات کلی، فونت، رنگ برای سایت

برای حفظ و انتقال برند و اعتبار سایت ، دو چیز باید در سراسر سایت سازگار باشد.

  • فونت ها، اندازه ها
  • رنگ ها

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

 

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

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

نکته مهم!

هیچ گونه محدیتی برای افزودن فونت ندارید و بینهایت فونت می توانید اضافه کنید.

ابتدا به پیشخوان وردپرس وارد شوید و به مسیر زیر بروید : 

پیشخوان وردپرس > المنتور > فونت های سفارشی

این مورد در نسخه رایگان وجود ندارد!

فونت سفارشی المنتور

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

اضافه کردن فونت

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

ابتدا در زیر فونت های وزیر را دانلود کنید : 

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

لیست فونت ها

حالا ما باید 3 وزن فونت فارسی را به المنتور اضافه کنیم.

  • ذخیم
  • نازک
  • معمولی

حالا در بخش عنوان یا خانواده فونت، یک نام برای فونت خود انتخاب کنید (به طور مثال ما عنوان “فونت وزیر” را انتخاب کردیم).

عنوان فونت

سپس بر روی دکمه “افزودن فونت متغییر” کلیک کنید. 

اضافه کردن خانواده فونت

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

حالا باید 3 فرمت متنوع را برای هر استایل انتخاب کنیم : 

  • Woff2
  • Woff
  • Ttf
  • Eot

بعد از انتخاب فونت ها باید شکلی همانند تصویر زیر داشته باشید.

همه فونت های المنتور

سپس باید وزن دیگر را اضافه کنید.

باز هم بر روی دکمه “افزودن فونت متغییر” کلیک کنید. حالا باید وزن ذخیم را انتخاب کنیم و سپس برای وزن نازک باید وزن 300 را انتخاب کنید.

در آخر بعد از اضافه کردن فونت ها باید صفحه شما همانند تصویر زیر باشد : 

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

تنظیمات کلی

المنتور به ما اجازه می دهد تا با چیزی به نام “تنظیمات کلی” به این هدف برسیم و یک تنظیمات کلی و اصولی را برای کل سایت انجام دهیم.

و اگر می خواهید این تنظیمات را برای یک صفحه خاص نادیده بگیرید ، هنوز هم می توانید این کار را انجام دهید

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

 

1. نحوه پیکربندی فونت ها در المنتور

اولین کاری که می خواهیم انجام دهیم ، تنظیم فونت های صفحه است. می خواهیم تا فونت های کل سایت به فونت وزیر (فونتی که اضافه کردیم) تغییر پیدا کند.

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

دکمه تنظیمات سایت

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

تنظیمات سایت

بعد، در بخش “سیستم طراحی” ، روی “فونت های عمومی” کلیک کنید.

فونت های عمومی

سپس ، در بخش «فونت های عمومی» ، با «وزیر» یا هر فونت دیگری که دوست دارید پیش بروید:

  • اولیه
  • رنگ دوم
  • متن
  • شدت

ویرایش فونت ها

سپس بر روی دکمه “به روز رسانی” در پایین صفحه کلیک کنید.

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

برگشت به مرحله قبلی

حالا بر روی گزینه “تایپوگرافی” کلیک کنید.

تایپوگرافی

در این بخش هم باید فونت های خود را برای کل سایت اعمال کنید. سپس بر روی دکمه “به روز رسانی” کلیک کنید تا همه تنظیمات ذخیره شود.

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

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

رنگ های عمومی

حالا رنگ های خود را انتخاب کنید. و در آخر بر روی دکمه “به روز رسانی” کلیک کنید.

بسیار بسیار مهم!!!

این بخش تنظیمات متنوعی دارد که درویدئو به این بخش ها پرداخته ایم و حتما ویدئوی آموزشی را مشاهده کنید.

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

جلسه 5 :

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

elementor tutorial 7

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

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

محیط المنتور

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

جلسه 6 :

ساخت صفحه با المنتور (تنظیمات کامل)​

elementor tutorial 8

آموزش ساخت و طراحی صفحه در المنتور

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

مرحله 1 : ساخت برگه جدید

برای ایجاد برگ جدید در وردپرس به مسیر زیر بروید : 

پیشخوان وردپرس > برگه ها > افزودن جدید

افزودن برگه جدید

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

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

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

 

مرحله 2 : تنظیمات مهم صفحه

در سمت راست در جعبه ابزار المنتور بر روی دکمه چرخ دنده کلیک کنید.

دکمه تنظیمات صفحه

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

تنظیمات صفحه

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

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

مثال :

اگر میخواهید یک لندینگ پیج طراحی کنید باید از تنظیم Canvas المنتور استفاده کنید، چون ما به هیچ هدر و فوتری نیاز نداریم.

بعد از این تنظیمات نوبت می رسد به اینکه صفحه خود را با ویجت ها طراحی کنیم. 

جلسه 7 :

آموزش کار با ویجت های پرو و رایگان​

elementor tutorial 9 1

کار با ویجت ها (المان های) افزونه المنتور

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

در بخش تئوری، همه ویجت ها را در زیر توضیح می دهیم و در بخش ویدئوی آموزشی به کار با همه ویجت ها می پردازیم.

basic elements

  • بخش داخلی : ساخت ردیف های چند ستونه
  • سربرگ : ساخت عناوین متنی
  • تصویر : قرار دادن تصویر
  • ویرایشگر متن : قرار دادن ویرایشگر متن وردپرس
  • ویدئو : قرار دادن ویدئو در صفحه
  • دکمه : قرار دادن دکمه
  • جداکننده : خط جدا کننده
  • فاصله گذار : قرار دادن فاصله در بین ویجت ها
  • نقشه گوگل : قرار دادن نقشه گوگل
  • آیکون : قرار دادن آیکون دلخواه
pro elements
pro elements

 

  • پست ها : قرار دادن باکس نوشته ها و مقالات
  • نمونه کار : بخش نمونه کارها
  • گالری : ساخت گالری تصویر در المنتور
  • فرم : ساخت فرم در المنتور
  • ورود : فرم ورود پیشفرض وردپرس
  • اسلاید : ساخت اسلایدر
  • فهرست ناوبری : ساخت فهرست یا منو
  • عنوان انیمیشنی : ساخت عنوان متحرک
  • لیست قیمت : ساخت لیست قیمت
  • جدول قیمت : قرار دادن جدول قیمت
  • چرخش جعبه : ساخت جعبه متحرک چرخشی
  • فراخوانی برای اقدام : ساخت عنصر قابل کلیک
  • کنترل کاروسل : ساخت کاروسل تصویر و متن
  • کاروسل گواهینامه : یاخت کاروسل چرخشی دیدگاه
  • بررسی : ساخت بخش بررسی یا نظرات به صورت اسلایدر
  • فهرست مطالب : ساخت فهرست مطالب محتوا
  • شمارش معکوس : ساخت شمارش معکوس
  • دکمه های اشتراک گذاری : قرار دادن دکمه های اشتراک گذاری در صفحات
  • نقل قول : قرار دادن نقل قول
  • دکمه فیس بوک : قرار دادن دکمه لایک فیس بوک
  • نظرات فیس بوک : قرار دادن نظرات و کامنت های فیس بوک
  • فیس بوک Embed : قرار دادن کدها و اسکریپت های فیس بوک
  • برگه فیس بوک : نمایش برگه های فیس بوک در صفحه
  • قالب : قرار دادن قالب های ساخته شده با المنتور
  • Lottie : قرار دادن فایل های متحرک Lottie
  • کد های لایت : قرار دادن کد درون صفحه
global elements
global elements
  • کادر تصویر : قرار دادن جعبه تصویر با متن
  • آیکون جعبه : قرار دادن جعبه آیکون با متن
  • ستاره امتیاز دهی : قرار دادن ستاره امتیاز در صفحه
  • کاروسل تصویر : ساخت کاروسل تصویر به صورت چرخشی
  • گالری پایه : ساخت گالری پیشفرض
  • لیست آیکون : نمایش لیست با آیکون
  • شمارنده : نمایش شمارنده عدد
  • نوار پیشرفت : قرار دادن نوار های پیشرفت
  • دیدگاه مشتری : نمایش دیدگاه مشتری به سبک های متنوع
  • زبانه ها : ساخت تب یا زبانه های متنوع
  • آکاردئون : ساخت لیست باز شو
  • تغییر وضعیت : ساخت بخش تغییر وضعیت یا همان آکاردئون
  • آیکون شبکه های اجتماعی : نمایش آیکون شبکه های اجتماعی
  • هشدار : نمایش پیام هشدار سفارشی
  • ساوند کلاود : نمایش صدا های ساوند کلاود در صفحه
  • کد کوتاه : قرار دادن کد کوتاه (Shortcode) در صفحه
  • HTML : قرار دادن کد HTML سفارشی
  • سایدبار : نمایش سایدبار پیشرفض وردپرس
  • بیشتر بخوانید : نمایش بخش بیشتر بخوانید پیشفرض وردپرس

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

در زیر می توانید به بینهایت ویجت برای طراحی سایت دسترسی داشته باشید : 

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

دقت کنید!

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

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

منظور از هدر و فوتر چیست؟

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

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

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

نکته!

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

 

چطور هدر سفارشی در المنتور بسازیم؟

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

 

ساخت سربرگ یا هدر

ابتدا در پیشخوان وردپرس به مسیر زیر بیایید : 

پیشخوان > قالب ها > پوسته ساز

منوی پوسته ساز

در صفحه باز شده بر روی تب یا زبانه “سربرگ” کلیک کنید.

تب سربرگ

سپس بر روی دکمه سبز رنگ “افزودن سربرگ جدید” کلیک کنید.

افزودن سربرگ جدید

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

ایجاد قالب

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

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

ویحت های هدر

  • لوگو سایت : ویجت نمایش لوگوی سایت در هدر
  • عنوان سایت : نمایش عنوان اصلی سایت
  • عنوان صفحه : نمایش عنوان صفحه مورد نظر
  • فهرست ناوبری : نمایش منوی کشویی
  • فرم جستجو : نمایش فرم جستجو در هدر
  • نقشه سایت : نمایش نقشه سایت

این ویجت های داینامیک هستند و باید در هدر سایت قرار بگیرند.

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

هدر ایجاد شده

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

انتشار هدر

در صفحه باز شده بر روی دکمه “اضافه کردن شرط” کلیک کنید.

اضافه کردن شرط

سپس همانند تصویر زیر گزینه ها را انتخاب کنید و بر روی دکمه “ذخیره و بستن” کلیک کنید تا هدر شما ذخیره شود.

ذخیره و انتشار هدر

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

 

چطور فوتر سفارشی در المنتور بسازیم؟

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

 

ساخت فوتر یا پابرگ

ابتدا در پیشخوان وردپرس به مسیر زیر بیایید : 

پیشخوان > قالب ها > پوسته ساز

منوی پوسته ساز

در صفحه باز شده بر روی تب یا زبانه “پاورقی” کلیک کنید.تب فوتر

سپس بر روی دکمه “افزودن پاورقی جدید” کلیک کنید.

افزودن فوتر جدید

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

ایجاد فوتر جدید

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

در این بخش ویجت هایی نمایش داده می شود که به شرح زیر هستند : (دقیقا ویجت هایی هستند که در بخش هدر هم نمایش داده می شوند و یک طرح ثابتی در المنتور دارند.)

ویحت های هدر

  • لوگو سایت : ویجت نمایش لوگوی سایت در هدر
  • عنوان سایت : نمایش عنوان اصلی سایت
  • عنوان صفحه : نمایش عنوان صفحه مورد نظر
  • فهرست ناوبری : نمایش منوی کشویی
  • فرم جستجو : نمایش فرم جستجو در هدر
  • نقشه سایت : نمایش نقشه سایت

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

فوتر نهایی

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

انتشار هدر

در صفحه باز شده بر روی دکمه “اضافه کردن شرط” کلیک کنید.

اضافه کردن شرط

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

ذخیره و انتشار هدر

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

جلسه 9 :

ساخت صفحه تکی نوشته و برگه

elementor tutorial 11

منظور از صفحه تکی نوشته و برگه چیست؟

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

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

به این صفحات، صفحه تکی گفته می شود.

مثال

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

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

 

ساخت صفحه تکی نوشته در المنتور

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

در پیشخوان وردپرس مسیر زیر را دنبال کنید : 

پیشخوان وردپرس > قالب ها > پوسته ساز

منوی پوسته ساز

در صفحه باز شده بر روی تب “نوشته تکی” کلیک کنید.

تب نوشته تکی

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

دکمه افزودن نوشته تکی

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

نوشته تکی جدید

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

ویجت های نوشته تکی

با این ویجت ها شما میتوانید صفحه تکی را طراحی کنید : 

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

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

نوشته تکی آخر

بعد از طراحی صفحه بر روی دکمه انتشار کلیک کنید.

انتشار هدر

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

اضافه کردن شرط

سپس در آخر بر روی ذخیره و بستن کلیک کنید.

نوشته تکی شرایط

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

 

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

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

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

جلسه 10 :

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

elementor tutorial 12

منظور از صفحه وبلاگ و آرشیو چیست؟

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

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

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

 

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

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

پیشخوان وردپرس > تنظیمات > خواندن

تنظیمات خواندن

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

سپس گزینه “برگهٔ نوشته‌ها:” را بر روی “گزینش” قرار دهید و در آخر بر روی دکمه ذخیره تغییرات کلیک کنید.

تنظیمات برگه ها

سپس به مسیر زیر بروید (باید یک برگه اختصاصی برای وبلاگ ایجاد کنیم) : 

پیشخوان وردپرس > برگه ها > افزودن

افزودن برگه جدید

سپس یک عنوان برای صفحه انتخاب کنید.

  • توصیه می کنیم عنوان “بلاگ” یا “وبلاگ” را برای این صفحه انتخاب کنید.
  • توصیه می شود پیوند یکتای این صفحه عبارت “blog” باشد. (برای مثال : site.com/blog).

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

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

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

در این جا یک طرح پیشرفض طراحی کردیم که در زیر می توانید مشاهده کنید : 

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

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

یعنی برای دسترسی به این صفحه باید از لینک site.com/blog/ استفاده کنید.

 

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

حالا میخواهیم تا صفحه آرشیو نوشته ها را ایجاد و طراحی کنیم.

مسیر زیر را دنبال کنید : 

پیشخوان وردپرس > قالب ها > پوسته ساز

منوی پوسته ساز

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

زبانه آرشیو

در صفحه ای که باز می شود، بر روی دکمه “افزودن آرشیو جدید” کلیک کنید.

آرشیو جدید

فیلدهای این صفحه را همانند تصویر زیر پر کنید و در آخر بر روی دکمه “ایجاد قالب” کلیک کنید.

ایجاد قالب آرشیو

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

ویجت های آرشیو

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

آرشیو طراحی شده

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

انتشار هدر

در صفحه باز شده بر روی دکمه اضافه کردن شرط کلیک کنید.

شرط نمایش آرشیو

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

جلسه 11 :

ساخت صفحه ورود و ثبت نام سفارشی

elementor tutorial 13

چرا ثبت نام و ورود در سایت مهم است؟

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

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

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

 

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

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

ابتدا به مسیر زیر بروید : 

پیشخوان وردپرس > افزونه ها > افزودن

منوی افزودن افزونه

در صفحه باز شده در سمت چپ در کادر جستجو عبارت “theme my login” را وارد کنید.

جستجوی افزونه

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

نصب افزونه

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

به مسیر زیر بروید : 

پیشخوان وردپرس > پوسته وردپرس من > عمومی

پوسته وردپرس من

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

تنظیمات پوسته وردپرس من

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

تنظیمات تمام شد.

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

پیشخوان وردپرس > برگه ها > افزودن جدید

افزودن برگه جدید

سپس در عنوان عبارت “ورود” را وارد کنید. (توصیه می کنیم در پیوند یکتا هم عبارت “login” را وارد کنید.) سپس در آخر بر روی دکمه ویرایش با المنتور کلیک کنید.

اضافه کردن صفحه ورود

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

حالا از بین ویجت های المنتور، ویجت “کد کوتاه” را به صفحه بکشید و رها کنید.

ویجت کد کوتاه

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

				
					[theme-my-login action="login"]
				
			

باید بعد از کپی کد، قسمتی همانند تصویر زیر داشته باشید : 

کدکوتاه ورود

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

صفحه ورود

سپس برای استایل دهی به این فیلد ها، باید به تنظیمات کلی که در جلسه 6 توضیح داده شد برگردید و این تنظیمات را انجام دهید.

بعد از طراحی و استایل دهی توسط ما، باید شکلی همانند تصویر زیر داشته باشید : 

صفحه لاگین طراحی شده

 

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

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

بعد از اینکه ویجت “کد کوتاه” را به صفحه اضافه کردید، کد های زیر را به این ویجت اضافه کنید : 

				
					[theme-my-login action="register"]
				
			

کد کوتاه ثبت نام

بعد از استایل دهی، باید صفحه ای همانند تصویر زیر داشته باشید : 

صفحه ثبت نام نهایی

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

  • پیشخوان
  • فراموشی رمز
  • ریست پسورد
  • بیرون رفتن

استفاده کنید.

				
					داشبورد کاربری
[theme-my-login action="dashboard"]
				
			
				
					بیرون رفتن
[theme-my-login action="logout"]
				
			
				
					فراموشی رمز
[theme-my-login action="lostpassword"]
				
			
				
					ریست پسورد
[theme-my-login action="resetpass"]
				
			

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

جلسه 12 :

آموزش کامل واکنش گرایی در المنتور

elementor tutorial 14

منظور از واکنشگرایی یا ریسپانسیوی چیست؟

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

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

آموزش واکنش گرایی در المنتور

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

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

وقتی ویرایشگر المنتور باز می شود، در پایین ویجت ها بر روی آیکون “مانیتور” کلیک کنید.

آیکون موبایل

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

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

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

نکته بسیار مهم!

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

جلسه 13 :

ساخت صفحه نتایج جستجوی سفارشی در المنتور

elementor tutorial 15

نتایج جستجو کدام صفحه هست؟

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

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

 

ساخت صفحه نمایش نتایج جستجو در المنتور

ابتدا باید قالب مخصوص را ایجاد کنیم، برای این منظور به مسیر زیر بیایید : 

پیشخوان وردپرس > قالب ها > پوسته ساز

منوی پوسته ساز

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

زبانه نتایج جستجو

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

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

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

ایجاد قالب نتایج جستجو در المنتور

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

ویجت های نتایج جستجو

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

نکته مهم!

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

جلسه 14 :

ساخت صفحه 404 سفارشی در المنتور

elementor tutorial 17

منظور از صفحه 404 چیست؟

صفحه 404 صفحه ای هست که در همه سایت ها موجود است و از صفحاتی هست که حتما باید در سایت باشد. وقتی کاربری دنبال محتوا و یا صفحه ای در سایت باشید و با دلایلی این صفحه یا محتوا حذف شده باشد، کاربر با صفحه ای مواجه می شود که عنوان این صفحه اصولا “متاسفیم، صفحه مورد نظر پیدا نشد” و یا “404 Not Found” و یا با عناوین دیگر برای کاربر نشان داده می شود.

یک صفحه 404 بهینه چطور باید باشد؟

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

  1. از تصاویر خلاقانه و زیبا استفاده کنید
  2. از عنوان خوب و جذاب استفاده کنید
  3. کاربر را به صفحات دیگر هدایت کنید
  4. نگذارید کاربر در این صفحه از سایت خارج شود
  5. از مطالب محبوب سایت استفاده کنید
  6. از پیشنهاد های ویژه استفاده کنید
  7. یک فرم جستجو قرار دهید

با رعایت نکات بالا می توانید یک صفحه 404 سفارشی و بهینه برای سایت ایجاد کنید.

 

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

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

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

پیشخوان وردپرس > قالب ها > پوسته ساز

منوی پوسته ساز

بعدا در صفحه باز شده بر روی زبانه “خطای 404” کلیک کنید.

زبانه 404

حالا در صفحه باز شده بر روی دکمه “افزودن خطای 404 جدید” همانند تصویر زیر کلیک کنید.

افزودن 404

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

ایجاد قالب صفحه 404

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

404 نهایی

محدودیتی در طراحی و استفاده از ویجت ها ندارید. در ویدئوی آموزشی به مباحث حرفه ای تر پرداخته ایم و حتما باید مشاهده کنید.

جلسه 15 :

آموزش نصب و ویرایش تمپلیت آماده المنتور + (دانلود تمپلیت رایگان)

elementor tutorial 18

منظور از تمپلیت های آماده چیست؟

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

اصولا تمپلیت ها در یک فایلی ذخیره می شوند که فرمت این فایل “.json” هست که همه بخش ها به صورت کد در این فایل ذخیره می شوند و باید این فایل را ذخیره کنید و یا در سایت های دیگر درون ریزی کنید.

 

دانلود تمپلیت های آماده المنتور (رایگان!)

در زیر بیش از 2000 تمپلیت آماه برای دانولد قرار داده ایم که در فایل های json ذخیره و دسته بندی شده است، می توانید به راحتی از این تمپلیت ها در هر سایتی بدون مشکل استفاده کنید. البته در زیر می خواهیم تا نحوه ایمپورت و ویرایش تمپلیت های المنتور را آموزش دهیم.

همه تمپلیت ها دارای پیشنمایش هستند و می توانید در زیر همه این پیشنمایش ها دسترسی داشته باشید : 

بر روی لینک ها کلیک کنید : 

نکته مهم!

دقت داشته باشید که همه فایل ها به درستی نام گذاری شده اند و هر نامی که در پیشنمایش موجود هست در پوشه های مورد نظر کوجود هستند.

 

آموزش ایمپورت (درون ریزی) تمپلیت های آماده

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

بعد از اینکه تمپلیت خود را انتخاب کردید، به مسیر زیر بیایید : 

پیشخوان وردپرس > قالب ها > قالب های ذخیره شده

منوی تپلیت های آماده

در صفحه باز شده بر روی دکمه درون ریزی قالب ها کلیک کنید.

دکمه درون ریزی نمونه آماده

در صفحه بعدی بر روی دکمه “Choose file” کلیک کنید و تمپلیت مورد نظر با فرمت json را انتخاب کنید و سپس بر روی دکمه “هم اکنون درون ریزی کن” کلیک کنید.

انتخاب فایل تمپلیت

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

لیست تمپلیت ها

تا الان اما تمپلیت خود را در المنتور درون ریزی کردین و در مرحله بعدی باید این دمو را ویرایش کنیم.

آموزش ویرایش تمپلیت های آماده

وقتی موس را بر روی نام تمپلیت در لیست ببرید، دکمه ای ظاهر می شود با عنوان “ویرایش با المنتور” و شما باید همانند تصویر زیر بر روی این دکمه کلیک کنید.

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

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

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

جلسه 16 :

ساخت لندینگ پیج حرفه ای با المنتور

elementor tutorial 19

منظور لندینگ پیج چیست؟

صفحات لندینگ، Landing Pages، صفحات فرود نام هایی هست می توان در سطح وب جستجو کرد و با ساختار این صفحات آشنا شد. یک استراتژی هست که همیشه بوده و هست و کلا در بسیار از مواقع ساختار این صفحات با دیگر صفحات سایت متفاوت است و در این صفحات وب مستران کاربران را به سوی اهداف خود می کشانند، این اهداف می تواند فروش محصول، دریافت اطلاعات، مشاوره و… باشد.

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

 

اصول طراحی لندینگ پیج

برای طراحی باید حتما موارد بالا را رعایت کنید.

نکته!

در بخش تئوری به طراحی لندینگ پیج نمی پردازیم! و در ویدئوی آموزشی می توانید آموزش طراحی لندینگ پیج اصولی و بهینه را مشاهده کنید.

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

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

6 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

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

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

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

    • سلام
      کل ویدئو ها به دلایل مشکلات زیاد آپارات، در یوتیوب آپلود شدن و باید از نرم افزار رفع تحریم استفاده کنید تا بتونید ویدئو ها رو مشاهده کنید. و یا میتونید با کانال یوتیوب مراجعه کنید.

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

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

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

4.8/5 - (10 امتیاز)

در خدمت شما هستیم!

در صورت نیاز به مشاوره می توانید فرم را تکمیل نمایید و یا با ما در ارتباط باشید.