ساخت سوئیچ کننده محتوا در المنتور (💪بدون افزونه) + فیلم آموزشی

switcher elementor aylinweb

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

فیلم آموزشی

 

نحوه حل خطای “متاسفیم! ناحیه محتوایی در برگه شما یافت نشد.” یا “the_content” در المنتور + 📺 فیلم آموزشی

the content elementor aylinweb

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

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

create comments form elementor main

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

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

freeee

نسخه صوتی (پادکست) دانلود تمپلیت المنتور مقاله ای هست که ما برای این مقاله و نوشته انتخاب کردیم که شما میتونید به بیش از ۱۰۰۰ قالب آماده المنتور دسترسی داشته باشید که به راحتی میتوانید هر کدام از قالب های آماده المنتور رو به راحتی با چند کلیک ساده درون وردپرس نصب کنید و المانهای … ادامه

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

custom skin pro main

در تاریخ 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 حلقه نوشته های سایت” ر انتخاب کنید مانند تصویر زیر :

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

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

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

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

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

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

download file email main

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

app menu in elementor

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

آیا در این آموزش از افزودنی استفاده کردیم؟

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

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

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

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

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

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

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

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

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

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

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

حالا به تنظیمات آیکون برید و چیدمان را همانند تصویر زیر به حالت وسط چین تغییر بدید :

سپس به تب استایل ابزارک آیکون بیاید و رنگ اولیه رو روی کد رنگ #4A4A4A تنظیم کنید اندازه و آن را روی ۲۰ قرار بدید :

سپس به تنظیمات ابزارک سربرگ بیاید و توی تب استایل رنگ متن و روی کد رنگ #3E3E3E تنظیم کنید و تایپوگرافی اون رو سایزش روی ۱۴ قرار بدید و وزن فونت روی ۴۰۰ تنظیم بکنید.

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

حالا به تنظیمات ستون برید  و عرض ستون رو روی ۲۰ تنظیم بکنید.

خوب الان ما وقتی عرضش رو روی ۲۰ تنظیم کردیم، یعنی ما میتونیم پنج تا از این ستون‌ها ایجاد بکنیم اول از همه شما باید ستون خودتون رو هم آیکونش و هم متنش رو تغییر بدید من برای مثال یک آیکون خانه قرار میدم همانند تصویر زیر :

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

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

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

حالا به تنظیمات سکشن یا بخش موردنظر برید (بخشی که منوها درون اون هستن) و در بخش استایل نوع پس زمینه رو رنگش روی کد رنگ #F9F9F9 تنظیم بکنید.

سپس باز هم در بخش استایل بخش مورد نظر به بخش حاشیه بیاید و سایه کادر رو بزنید و کد رنگ آن را rgba(0, 0, 0, 0.12) قرار بدید همانند تصویر زیر

سپس روی پیشرفته بیایید و گزینه ایندکس Z روی ۱۰۰ قرار بدید.

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

selector {position: fixed;bottom:0;}

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

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

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

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

فیلم آموزشی

آموزش کامل واکنش گرایی (ریسپانسیو) در المنتور

responsive elementor

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

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

گوگل روی واکنش گرایی سایت چقدر حساس هست؟

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

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

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

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

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

فیلم آموزشی

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

webpage slider elementor 0

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