ایکون
قالب اکسترا
120 وبسایت آماده شرکتی و فروشگاهی
فقط با 1,378,000 تومان
مشاهده و خرید
مجموعه مقالات وردپرس

آموزش ساخت اسلایدر با المنتور+ ویدیو

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

14
06 آذر 1400
آخرین بروزرسانی: 15 فروردین 1403

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

ساخت اسلایدر با المنتور پرو

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

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

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

تنظیمات اسلایدر

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

محتوا

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

1- بخش اسلایدها

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

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

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

✔️ پس زمینه

  1. رنگ پس زمینه: در این بخش می‌توانید برای پس زمینه اسلاید خود یک رنگ انتخاب کنید.
  2. تصویر: برای اضافه کردن تصویر به اسلاید از این بخش اقدام کنید.
  3. سایز: برای دادن سایز به اسلاید به کار می‌رود که بهتر است مقدار cover را انتخاب کنید تا کل تصویر در اسلاید جا شود.
  4. لایه پس زمینه: تصویر را به عنوان پس زمینه قرار می‌دهد و به آن رنگ هم می‌دهد. با حالت ترکیبی، ترکیبی از پس زمینه و حالت عادی ایجاد می‌کند. معمولا این بخش تصویر را مات می‌کند تا نوشته بیشتر مشخص باشد.

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

✔️ محتوا

  1. عنوان و توضیح اسلاید: نام و متن هر اسلاید را از این بخش می‌توانید تغییر دهید.
  2. تغییر متن دکمه: متن دکمه اسلاید را از این بخش تغییر دهید.
  3. پیوند: اگر نیاز است که دکمه را به صفحه ای لینک بدهید از این بخش می‌توانید انجام دهید. در تنظیمات این بخش می‌توان باز کردن در پنجره جدید و افزودن نوفالو (برای موارد سئو) را فعال کنید.ویرایش محتوای اسلایدها در ساخت اسلایدر با المنتور پرو

✔️ سبک یا style

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

 

استایل در ساخت اسلایدر با المنتور پرو

✔️ ارتفاع اسلایدر

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

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

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

آموزش ساخت اسلایدر با المنتور

2- بخش تنظیمات اسلایدر 

  1.  پیمایش: نحوه پیمایش اسلایدها را مشخص می‌کند میتوانند فلش در ابتدا و انتهای هر اسلاید باشد یا نقطه در پایین اسلاید. یا حتی هر دو باشد.
  2.  پخش خودکار: تنظیم می‌کنید اسلایدرها به صورت خودکار پخش شوند.
  3.  توقف هنگام قرار گرفتن موس: در هنگام قرار گرفتن موس روی اسلایدها اسللایدها عوض نشوند.
  4.  مکث هنگام یکبار کلیک: با کلیک کردن روی اسلاید روی همان اسلاید بماند و تغییر نکند.
  5. .سرعت پخش خودکار: تعویض اسلایدها چقدر طول بکشد را زا این بخش تنظیم می‌کنید.
  6. پخش بی نهایت: اسلایدها به صورت حلقه و لوپ تعویض شوند و بی نهابت بار نمایش داده شوند. در غیر این صورت امکان تعویض نیست و چراغ پیمایش ها خاموش می‌شود.
  7. نوع انتقال: انتقال به اسلاید دیگرچگونه انجام شود مثلا به صورت عادی یا محو شدن باشد.
  8. سرعت انتقال: انتقال با چه سرعتی بر اساس میلی ثانیه انجام شود.
  9. انیمیشن محتوا: به محتوا برای ورود انیمیشن می‌دهد.

بخش تنظیمات اسلایدر

استایل اسلاید

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

  1. اسلایدها: عرض محتوا، پدینگ، موقعیت متن و غیره را از این بخش می‌توانید عوض کنید.
  2. عنوان: در این قسمت فاصله عنوان از نوشته، رنگ عنوان و تایپوگرافی آن نسبت به متن را می‌توانید تعیین کنید.
  3. توضیح: این بخش برای تغییر توضیحات داخل اسلاید است. فاصله آن از المان های دیگر مانند دکمه، رنگ متن و تایپوگرافی آن.
  4. دکمه: اندازه دکمه، شکل آن، رنگ، کادر دور دکمه، رنگ متن و بک گراند دکمه را تنظیم کنید.
  5. پیمایش: شکل پیمایش اسلایدها را از این قسمت تغییر دهید یا غیر فعال کنید. موقعیت، اندازه، رنگ نشانه گر و برای پیمایشگر نقطه، رنگ، اندازه و موقعیت نقطه را مشخص می‌کنید.

استایل اسلاید در ساخت اسلایدر با المنتور پرو

 

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

تایپوگرافی اسلایدر

تنظیمات پیشرفته

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

  1. پیشرفته: اولین تنظیمات این بخش است که می‌توان به اسلایدر پدینگ داد و فاصله آن را از المان ها و ستون های دیگر مشخص کرد.
  2.  افکت های حرکتی: در این بخش افکت های مانند افکت های پیمایش، ماوس، و انیمیشن هنگام گذر اسلایدها قابل انجام است.
  3.  ماسک: ماسک کردن بخشی از اسلاید که اندازه و شکل آن را می‌توانید تغییر دهید. تصویر زیر یک نمونه ماسک کردن است.
  4. تثبیت موقعیت: عرض تصاویر در اسلایدر و جایگاه اسلایدر را در صفحه مشخص می‌کند. مانند پیش فرض، ثابت و Absolute که بهتر است روی همان پیش فرض که خودتان تعیین کرده اید باشد.
  5. واکنش گرا: تنظیمات واکنش گرایی در دسکتاپ، تبلت و موبایل را می‌توانیم انجام دهیم برای مثال مشخص کنیم که در موبایل این اسلایدر نمایش داده نشود.
  6. ویژگی ها: ویژگی های سفارشی را برای المان ها مشخص می‌کنید.
  7. css سفارشی: کدهای css دلخواه خود را در این بخش وارد کنید.

تنظیمات پیشرفته در اسلایدر

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

محصول پیشنهادی
بنر
افزونه المنتور، دانلود افزونه Elementor Pro
دسته بندی : افزونه صفحه ساز وردپرس
23681
فروش
88%
رضایت
مهسا کاظمی پور
مهسا کاظمی پور
مهسا هستم، عاشق زندگی، نوشتن، نقاشی و صد البته مهارت‌ها و تجربه های جدید :)
مقالات مرتبط
بنر
آموزش قالب وودمارت؛ آموزش صفر تا صد طراحی فروشگاه
قالب وودمارت یک راه حل قدرتمند برای طراحی یک فروشگاه اینترنتی است. این قالب با انعطاف پذیری بالا، مجموعه ویژگی‌های غنی و رابط کاربری بصری، به شما این امکان را می‌دهد تا فروشگاه رویایی خود را به راحتی راه اندازی کنید. در این مقاله، آموزش قالب وودمارت را شروع و شما را با جنبه های مختلف این قالب ...
بنر
آموزش گام به گام بسته نصب آسان در لوکال هاست
اگر در لوکال هاست وب سایت خود را راه اندازی کنید می توانید یکباره وب سایت خود را به هاست منتقل کنید. یعنی بدون آنکه نیاز به هاست و دامنه داشته باشید، سایت را بدون استرس و نگرانی راه اندازی می کنید  و پس از مطمئن شدن از همه تغییرات دلخواهتان، آن را به هاست اصلی انتقال می دهید. همچنین در مصرف ...
بنر
آموزش نصب و فعالسازی ioncube در زمپ
ionCube Loader ماژولی است که برای اجرای فایل های رمزگذاری شده روی سرور نصب می شود. نصب و فعالسازی ioncube به سادگی انجام می شود. در صورت فعال نبودن ionCube شما با خطا مواجه می شوید. اما راهکار ساده رفع این خطا نصب ionCube در کمتر از چند دقیقه است که در ادامه به توضیح آن به صورت ویدئویی می پردازیم.
بنر
آموزش نصب آسان قالب وردپرس در Cpanel
شاید شما هم این جمله را شنیده باشید. در کم تر از 10 دقیقه سایت وردپرس خود را نصب کنید. در نگاه اول به نظرتان این جمله فقط یک تبلیغ برای جذب مخاطب به نظر می‌رسد اما کاملا درست است. کافی است از بسته نصب آسان وردپرس استفاده کنید تا سایت شما در کم تر از 10 دقیقه، روی هاست نصب شود. با هم نصب قالب ...
14 دیدگاه
ahmadreza002
ahmadreza002
31 شهریور 1403 11:54

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

آیا مفید بود ؟
0
مهسا کاظمی پور
مهسا کاظمی پور
01 مهر 1403 16:07

سلام وقت بخیر
لطفا از طریق تنظیمات سکشنی که اضافه کردید هم چک کنید. در بخش پیشرفته margin و padding را تغییر دهید و بررسی کنید آیا مشکل برطرف می شود یا خیر.

آیا مفید بود ؟
realmilad10
realmilad10
19 مرداد 1403 00:38

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

آیا مفید بود ؟
0
مهسا کاظمی پور
مهسا کاظمی پور
21 مرداد 1403 08:49

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

آیا مفید بود ؟
farid1371
farid1371
09 آذر 1402 00:08

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

آیا مفید بود ؟
0
مهسا کاظمی پور
مهسا کاظمی پور
09 آذر 1402 10:11

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

آیا مفید بود ؟
hamidrz
hamidrz
28 شهریور 1402 19:48

سلام من عکسی که میزارم بدکیفیت میشه تمام عرض که باشه، چه سایزی باید عکس رو طراحی کنیم کلا؟

آیا مفید بود ؟
0
مهسا کاظمی پور
مهسا کاظمی پور
29 شهریور 1402 10:27

درود و عرض ادب
دوست گرامی لطفا این موارد را بررسی کنید:
1. حتما از تصاویر با کیفیت استفاده کنید.
2. معمولا بهتره عرض را 1920 بگیرید و ارتفاع دلخواه را بگیرید.
3. در اسلایدر انتخاب کنید تا سایز اصلی تصویر را نشون بدهد.

آیا مفید بود ؟
مجید رحیمی
مجید رحیمی
28 بهمن 1401 17:09

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

آیا مفید بود ؟
0
مهسا کاظمی پور
مهسا کاظمی پور
30 بهمن 1401 11:00

درود و عرض ادب
مجید عزیز المان اسلاید تنها در نسخه المنتور پرو موجود است و المنتور رایگان این قابلیت را ندارد. می توانید از لینک زیر این افزونه را تهیه کنید.
https://www.rtl-theme.com/elementor-pro/

آیا مفید بود ؟
ms.mobasheri
ms.mobasheri
03 دی 1401 20:28

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

آیا مفید بود ؟
0
مهسا کاظمی پور
مهسا کاظمی پور
04 دی 1401 09:18

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

آیا مفید بود ؟