آموزش ساخت جدول در المنتور [طراحی تصویری و حرفه ای]

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

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

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

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

این موضوع مخصوصاً در صفحاتی اهمیت دارد که چند گزینه در کنار یکدیگر ارائه می شوند؛ برای مثال:

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

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

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

پیش از شروع، چند مورد را بررسی کنید:

۱. وردپرس روی سایت شما نصب و فعال باشد.
۲. المنتور نصب و فعال شده باشد.
۳. اگر قرار است از ویجت Price Table استفاده کنید، نسخه مناسب المنتور پرو را در اختیار داشته باشید.
۴. ساختار اطلاعات جدول از قبل مشخص شده باشد.
۵. عنوان، قیمت، ویژگی ها و متن دکمه ها آماده باشند.

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

آموزش ساخت جدول قیمت گذاری با المنتور

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

فرآیند کار را می توان در چند مرحله انجام داد.

نصب و فعال سازی المنتور

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

ایجاد صفحه جدید یا ویرایش صفحه موجود

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

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

معرفی سرویس
↓
مزایای اصلی
↓
مقایسه پلن ها
↓
توضیحات تکمیلی
↓
سؤالات متداول
↓
تماس یا ثبت سفارش

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

افزودن ویجت جدول قیمت

• در پنل ویجت های المنتور عبارت «جدول قیمت» یا «Pricing Table» را جست وجو کنید.
• پس از پیدا شدن ویجت، آن را با روش کشیدن و رها کردن در محل موردنظر قرار دهید.
• در این قسمت، قبل از تغییر ظاهر، بهتر است ابتدا محتوا را تکمیل کنید. بسیاری از کاربران ابتدا سراغ رنگ، سایه و گوشه های جدول می روند، در حالی که مهم ترین بخش، کیفیت اطلاعات داخل جدول است.

تنظیم محتوای جدول قیمت

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

عنوان و توضیحات پلن: عنوان باید کوتاه و قابل فهم باشد.

تنظیم قیمت: در بخش قیمت می توانید مبلغ موردنظر را وارد کنید و واحد پول را مشخص کنید.

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

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

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

روبان یا Ribbon: روبان برای برجسته کردن یک گزینه خاص استفاده می شود. اما بهتر است برای هر ستون از روبان استفاده نکنید. اگر همه گزینه ها «پیشنهادی» یا «محبوب» باشند، برجسته سازی دیگر معنای خود را از دست می دهد. روبان باید در خدمت معماری تصمیم گیری صفحه باشد، نه صرفاً یک عنصر تزئینی.

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

چگونه جدول قیمت را از نظر بصری حرفه ای تر کنیم؟

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

اصل مهم، ایجاد سلسله مراتب بصری است.

کاربر باید در نگاه اول بتواند تشخیص دهد:

۱. نام گزینه چیست؟
۲. قیمت چقدر است؟
۳. مهم ترین تفاوت چیست؟
۴. چه امکاناتی ارائه می شود؟
۵. برای ادامه چه کاری باید انجام دهد؟

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

استفاده از CSS سفارشی؛ چه زمانی لازم است؟

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

مثلاً زمانی که بخواهید:

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

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

جمع بندی

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

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

سوالات متداول

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

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

آیا جدول قیمت برای مقایسه خدمات هم مناسب است؟

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

آیا می توان چند جدول قیمت را در یک صفحه قرار داد؟

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

آیا امکان تغییر ظاهر جدول قیمت وجود دارد؟

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

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

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

آیا می توان برای یک پلن روبان «پرفروش» یا «پیشنهادی» گذاشت؟

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

آیا جدول قیمت روی سئو تأثیر مستقیم دارد؟

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

بهترین تعداد ویژگی برای هر پلن چقدر است؟

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