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

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

وقتی شما برای اولین بار طراحی سایت با المنتور را شروع می کنید در حالت اولیه سایت خود را می توانید در سه حالت تبلت موبایل و دسکتاپ طراحی کنید و بنابر انتخاب شما، سایت یا صفحه در انواع دستگاه ها به صورت رسپانسیو نمایش داده می شود. اما یک مشکل این است که وقتی شما سایت را در حالت دسکتاپ طراحی می کنید این سایت و صفحه در دسکتاپی (سیستمی) که شما طراحی می کنید بر اساس این رزولوشن طراحی میشه و اگر شما در حالت مانیتور و رزولوشن ۱۹۲۰ در ۱۰۸۰ طراحی کنید، سایت شما در مانیتورهای ۱۳۶۶ در ۷۶۸ با کمی مشکل و فاصله ها نمایش داده می شود. پس حتما باید سایت در انواع مانیتور ها و موبایل ها به خوبی نمایش داده شود.

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

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

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

رایانه های رومیزی و لپ تاپ ها:

• مانیتورهای (4K) یا (4 کی) : 3840 × 2160
• مانیتورهای FullHD یا فول اچ دی : 1920 × 1080
• مانیتورهای پیش ساخته : 1366×768، 1440×900، 1680×1050
• مدل های قدیمی: 1280×720

تبلت ها و تلفن های هوشمند:

• آیپد پرو و تبلت های حرفه ای اندرویدی : حداکثر 1066 × 1366
• iPad و تبلت های قدیمی اندروید : 768×1024
• تلفن های برتر آیفون و اندروید : حداکثر 420×800
• گوشی های میان رده آیفون و اندروید: 360×640 تا 375×800
• تلفن های قدیمی آیفون و اندروید : به 320 × 500 رسیده است

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

مرحله اول : نصب افزونه های مورد نیاز

در اولین مرحله ما حتماً باید افزونه های مورد نیاز خود را نصب کنیم، همه این افزونه ها به صورت رایگان در سایت آیلین وب موجود هستند و می توانید به راحتی روی هر افزونه کلیک و دانلود کنید. (برای دانلود رایگان روی افزونه ها کلیک کنید).

• افزونه المنتور پرو
• افزونه Custom Mobile Breakpoints Pro for Elementor Pro

مرحله دوم : ایجاد رزولوشن و اندازه های دلخواه

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

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

اما شما باید اندازهای خود را وارد کنید، برای این منظور بر روی سطر جدید کلیک کنید.

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

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

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

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

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

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

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

چرا از 2 روش استفاده شده؟

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

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

مرحله اول : نصب افزونه های مورد نیاز

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

• افزونه المنتور پرو
• افزونه Master Addons for Elementor
• افزونه Custom Breakpoints for Elementor

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

مرحله دوم : ایجاد و وارد کردن اندازه ها و رزولوشن های دلخواه

بعد از اینکه افزونه ها را نصب کردید در پیشخوان وردپرس منوی ظاهر می شود که عنوان منو هست “Master Addons“، موس را بیاورید روی این منو و “Breakpoints” را انتخاب کنید.

در صفحه ای که برای شما ظاهر می شود بر روی دکمه “Add Brekpoint”  کلیک کنید و یک بخشی با 3 فیلد برای شما باز می شود در بخش اول همانند تصویر زیر یک نام برای صفحه نمایش خود انتخاب کنید و در بخش بعدی باید اندازه یا طول صفحه نمایش را وارد کنید و در آخر روی  “Save Brekpoints” کلیک کنید.

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

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

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

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

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

فیلم آموزشی

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

چرا منوی سایت باید واکنش گرا باشد؟

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

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

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

پیشنیاز های آموزش

1. افزونه المنتور رایگان
2. افزونه المنتور پرو

مرحله اول : ساخت بخش سربرگ سایت

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

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

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

مرحله دوم : نمایش حالت موبایل

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

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

سپس در بخش محتوای آیکون به بخش آیکون ها بیاید و آیکون 3 خط را انتخاب کنید که می توانید در بخش جستجوی آیکون ها، عبارت “Bar” را سرچ کنید و همانند تصویر زیر آیکون مورد نظر برای منو را انتخاب کنید.

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

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

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

مرحله سوم : ساخت منوی سفارشی

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

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

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

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

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

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

مرحله چهارم : طراحی المان های منو

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

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

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

مرحله پنجم : افزونه پنل منو به آیکون منو

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

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

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

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

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

فیلم آموزشی

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

سوئیچ کننده محتوا در المنتور چه کاری انجام میدهد؟

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

ساخت سوئیچ کننده محتوا در المنتور

تمام این مراحل را به صورت مرحله به مرحله پیش می رویم تا در آخر یک سوئیچ کننده محتوا ایجاد بکنیم. پس از مرحله ۱ شروع کنید.

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

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

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

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

مرحله دوم : قرار دادن ابزارک در صفحه

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

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

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

سپس در بخش CSS سفارشی کد هایی را که در زیر قرار دادیم رو کپی کنید و این بخش وارد کنید.

selector .elementor-tabs-wrapper {
display:flex;
justify-content: center;
}

selector .elementor-tab-desktop-title[role="tab"] {
border-width: 1px;

/* change border color below */
border-color: #77AA22;
padding: 10px 0px;
width:160px;
text-align: center;
/* change non-active background color below */
background-color: #FFFFFF;
}

/* change mobile width below */
@media (max-width: 767px) { selector .elementor-tab-desktop-title[role="tab"] {
width:130px;
}
}

/* first tab styling */
selector .elementor-tab-desktop-title[role="tab"]:nth-child(1) {
border-radius: 0px 20px 20px 0px;
margin-left: -7px;
}

/* second tab stayling */
selector .elementor-tab-desktop-title[role="tab"]:nth-child(2) {
border-radius: 20px 0px 0px 20px;
margin-right: -10px;
}

/* change active background color below */
selector .elementor-tab-desktop-title.elementor-active {
border-bottom-style: solid;
background-color: #77AA22;
border-radius: 20px!important;
z-index:2;
}

@media (max-width: 767px) { selector .elementor-tab-title {
border-bottom-style: solid;
}
}

selector .elementor-tab-mobile-title {
display:none;
}

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

فیلم آموزشی

در تاریخ 28 دی 1399 ویدئوی آموزشی تنظیم ارتفاع باکس ها در المنتور اضافه شد.

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

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

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

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

نصب افزونه های مورد نیاز

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

1. افزونه المنتور رایگان
2. افزونه المنتور پرو
3. افزونه Elementor Custom Skin

بعد از اینکه افزونه ها را نصب کردید به ادامه مراجعه کنید.

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

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

ایجاد حلقه  نوشته ها

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

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

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

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

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

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

ایجاد ساختار نوشته ها

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

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

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

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

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

سپس باز هم به بخش المان های المنتور بیایید و المان Post Info را بکشید و در زیر تیتر که قرار دادید رها کنید.

در این بخش یک دکمه از المانهای المنتور بکشید و در زیر Post Info قرار بدید و متن آن را به ادامه مقاله یا ادامه نوشته تغییر بدهید.

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

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

در آخر طراحی باکس ها، باید طرحی همانند طرح زیر را داشته باشید.

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

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

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

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

سپس به تنظیمات ابزارک Posts بیایید و در تب محتوا بخش Layout را باز کنید و پوسته را روی Custom قرار بدهید و در بخش Select a default template “حلقه نوشته های سایت” ر انتخاب کنید مانند تصویر زیر :

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

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

[su_note note_color=”#ebc9ff” text_color=”#000000″ radius=”4″] ✅ دقت داشته باشید که ما در مقاله در بخش متنی و تصویری، بر رو سایخت باکس نوشته ها تمرکز کردیم. چون برای ساخت باکس محصولات هم به همین روال باید پیش برید. در ویدئوی آموزش هر دو بخش رو آموزش دادیم. میتوند برای آموزش بهتر از فیلم آموزش که در انتخا همین مقاله هست استفاده کنید.[/su_note]

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

ویدئوی ویدئوی آموزشی تنظیم ارتفاع باکس ها در المنتور

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

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

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

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

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

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

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

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

مرحله اول : ساخت بخش جدید

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

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

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

مرحله دوم : ایجاد بخش فرم

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

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

در تب محتوادر تنظیمات ابزارک، تنظیمات آن را همانند تصویر زیر تنظیم کنید.

در تب استایل روی رنگ متن کلیک کنید و رنگ اون رو روی کد رنگ #333333 تنظیم کنید مانند تصویر زیر.

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

سپس به قسمت تنظیمات بخش محتوا بیاید و تنظیمات آن را همانند تصویر زیر انجام بدید.

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

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

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

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

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

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

مرحله سوم : ایجاد پاپ آپ

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

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

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

سپس روی آیکون چرخ دنده در پایین سمت راست کلیک کنید و در تنظیمات پنجره پاپ آپ، عرض رو روی 450px قرار بدید. میتوانید همانند تصویر زیر عمل کنید.

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

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

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

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

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

مرحله چهارم : اتصال پاپ آپ به فرم

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

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

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

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

ویدئوی آموزشی :