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

create menu mobile in elementor

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

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

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

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

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

ساخت محتوای منوی کناری

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

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

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

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

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

منوی کناری
ساخت منوی کناری در المنتور

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

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

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

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

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

نوار کناری
ویجت نوار کناری در افزونه المنت پک

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

تنظیمات نوار کناری
آموزش بخش تنظیمات نوار کناری

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

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

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

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

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

واکنشگرایی
واکنش گرایی منوی ساخته شده

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

فیلم آموزشی

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

create result page in elementor

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

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

create night mode in elementor

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

ساخت اسکیمای سوالات متداول (FAQ) در المنتور + فیلم آموزشی اختصاصی

create faq schema in elementor aylinweb

با یک مقاله بسیار ارزشمند از مقالات آموزش المنتور در خدمات شما عزیزان هستم و میخوام که توی این قسمت با ساخت اسکیمای سوالات متداول در المنتور آشنا بشیم که منظور همون FAQ Schema هستش و برای آموزش کامل حتما در ادامه مقاله و ویدئوی آموزش با ما همراه باشید.

[toc]

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

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

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

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

آیا این کار توی سئو سایت تاثیر داره؟

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

خب توضیحات دیگه بسه بریم سراغ نحوه قرار دادن اسکیمای سوالات متداول در افزونه المنتور …

آموزش قرار دادن اسکیمای سوالات متداول در وردپرس

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

بعد از این که افزونه المنتور و افزونه FAQ Schema for Elementor رو نصب و فعل کردید به ادامه آموزش برید. برای نصب افزونه ه و فعل سازی اونها حتما از مقالات زیر استفاده کنید.

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

اسکیمای faq
اسکیمای سوالات متداول در المنتور و وردپرس

مراحل انجام کار :

1 – در بخش سرچ و جستجو در ابزارک های المنتور، همانند تصویر بالا شما باید عبارت “faq” رو جستجو کنید، وقتی این عبارت رو جستجو کنید همانند تصویر بالا ابزارک FAQ Schema رو مشاهده خواهید کرد.

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

[su_note note_color=”#ededea” text_color=”#000000″ radius=”10″]مهم نیست ابزارک رو کجا قرار بدید چون فقط در گوگل نمایش داده میشود و در صفحه در وب سایت نمایش داده نمی شود.[/su_note]

3 – در این جا باید تصویری همانند شماره 3 در صفحه مشاده بکنید.

نمایش سوالات متداول
نمایش سوالات متداول در سرچ گوگل

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

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

[su_note note_color=”#ededea” text_color=”#000000″ radius=”10″]فقط 5 عدد سوال باید اضافه کنید چون اگر بیشتر اضافه کنید دیده نمیشن.[/su_note]

3 – در این بخش که Question هستش باید شما سوال رو وارد کنید که در تصویر بالا به نمونه وارد شده.

4 – در این بخش هم که Answer نام داره باید جواب سوال بالا رو بنویسید همانند تصویر بالا.

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

در کجا بدونیم که اسکیمای سوالات متداول (FAQ) در المنتور به درستی اضافه شدن؟

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

تست اسکیما
تست آنلاین اسکیمای سایت با المنتور

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

  1. به آدرس https://search.google.com/test/rich-results مراجعه کنید.
  2. در بخش url آدرس صفحه ای که اسکیما رو قرار دادید، قرار بدید.
  3. روی دکمه Test URL کلیک کنید و منتظر باشید تا تست صفحه شما تمام شود.

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

تست اسکمای سوالات متداول در المنتور
تست اسکیمای سوالات متداول در المنتور

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

در بخش Detected Items باید سوالات متداول شما نمایش داده بشه که هم جواب سوال های و هم روی سوال ها باید نمایش داده بشه و با این کار ما تونستیم اسکیمای FAQ یا همون سولات متداول رو به وردپرس اضافه کنیم.

فیلم آموزشی

دوستان عزیز اگر سوالی داشتید میتوانید در دیدگاه های مطرح کنید …

افزونه سئوی المنتور: سازگارترین افزونه سئو برای المنتور Rank Math + آموزش کامل

best elementor seo plugin

سلام دوستان عزیز من، امروز میخوام تا یک افزونه سئو براتون معرفی کنم که روز به روز داره پیشرفت میکنه و یکی از سازگارترین افزونه سئوی المنتور هم محسوب میشه و شاید توسط سایت های ایرانی هنوز استفاده زیادی نداره و هنوز همه دارن از افزونه یوآست سئو فعلا استفاده میکنن. [su_note note_color=”#f20300″ text_color=”#ffffff” radius=”10″] … ادامه

آموزش طراحی فرم در المنتور و متصل کردن به میلر لایت | Mailerlite

maillerlite elementor

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

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

digikala product box aylinweb

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

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

dark mode color picker

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

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

create digikala menu in elementor aylinweb

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