ساخت منوی عمودی حرفه ای در قالب فلت سام Flatsome + فیلم آموزشی

create vertical menu flatsome

فهرست مطالب

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

[toc]

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

منوی عمودی فلت سام
آموزش طراحی و طاخت منوی عمودی در قالب flatsome

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

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

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

اول از همه باید در کنار قالب فروشگاهی فلت سام یک افزونه ای نصب کنیم که نام اینافزونه OT Flatsome Vertical Menu هستش که ابزاری جدید رو به فلت سام اضافه میکنه. برای نصب افزونه به این صورت عمل کنید :

  1. به پیشخوان وردپرس برید.
  2. به منوی افزونه ها » افزودن برید
  3. در کادر جستجوی سمت چپ عبارت Flatsome Vertical Menu وارد کنید.
  4. بر روی دکمه هم اکنون نصب کن کلیک کنید.
مطلب پیشنهادی :
ساخت پنجره تبلیغاتی (پاپ آپ) در وردپرس با افزونه WP Popup Banners
نصب افزونه وردپرس
ساخت منوی عمودی در فلت سام

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

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

بعد از نصب و فعال سازی افزونه نوبت میرسه به تنظیمات که وقتی شما افزونه رو فعال کردید به منوی تنظیمات » OT FS Vertical Menu برید و روی این گزینه گلیک کنید.

تنظیمت
تنظیمات افزونه flatsome-vertical-menu
  • Menu Title : در این قسمت میتوانید یک عنوان برای منوی عمودی انتخاب کنید.
  • Event show : حالت نمایش منو رو میتوانید تنظیمات کنید که دارای گزینه هست :
    • Click To Show : وقتی کلیک شد منو باز بشه.
    • Hover To Show : وقتی موس رفت روی منو، منو باز بشه.
  • Show Overlay Background : اگر تیک این گزینه رو قرار بدید بک گراند منو به صورت زمینه و روکش دارد نمایش داده میشه.
  • Auto Show Sub in Homepage : اگر تیک این گزینه رو قرار بدید پایین صفحه اصلی نمایش دده میشه.
  • Submenu Always At The Top : این 2 حالت برا نمایش داره که در زیر دموی این 2 تا حالت رو قرار دادم.

وقتی شما تیک گزینه Submenu Always At The Top رو قرار میدید : 

زیر منو
نمایش زیر منوی اول

وقتی شما تیک گزینه Submenu Always At The Top رو بر میدارید : 

زیر منوی 2
نمایش زیر منوی دوم

مرحله سوم : ایجاد فهرست مورد نظر

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

  1. به داشبورد وردپرس برید.
  2. روی منوی نمایش » فهرست ها کلیک کنید.
  3. در صفحه باز شده در سمت راست روی گزینه لینک دار ” یک فهرست جدید ایجاد نمایید” کلیک کنید.
  4. در بخش نام فهرست یک نام برای فهرست انتخاب کنید.
  5. در آخر هم روی دکمه ایجاد فهرست کلیک کنید.
مطلب پیشنهادی :
استفاده از 12 روش موثر و عملی برای افزایش سرعت وردپرس (در سال 2019)
ایجاد فهرست
ساخت منوی عمودی در flatsome

مرحله چهارم : ساخت منوها

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

نکته : فقط دقت کنید بعد از اینکه المانهای منو رو درست کردید همانند تصویر زیر تیک گزینه Vertical Menu رو قرار بدید و روی ذخیره فهرست کلیک کنید.

منوی عمودی
منوی عمودی در وردپرس

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

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

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

    1. به پیشخوان وردپرس برید
    2. در سمت راست از منو ها وارد منوی نمایش » سفارشی سازی بشید.
    3. در صفحه باز شده در سمت راست وارد منوی سربرگ یا Header بشید.
  1. در هدر ساز ابزارکی به نام Vertical Menu به بخش ابزارها اضافه شده که با کادر قرمز رنگ مشخص است.
  2. ابزار Vertical Menu رو به بخش مورد نظرتون بکشید و رها کنید.
المان منوی عمودی
منوی عمودی فروشگاهی در فلت سام

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

فیلم آموزشی

۴ دیدگاه دربارهٔ «ساخت منوی عمودی حرفه ای در قالب فلت سام Flatsome + فیلم آموزشی;

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

    پاسخ

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