المان‌های المنتور و کاربردهای آن‌ها

مقالات آموزشی
wp ali
۰
(۰)

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

۱. المان‌های پایه (Basic Elements)

المان‌های پایه (Basic Elements)

۱.۱ عنوان (Heading)

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

  • کاربرد: بیشتر در سربرگ‌ها، بخش‌های معرفی و سرفصل‌های صفحات استفاده می‌شود.
عنوان (Heading)

۱.۲ ویرایشگر متن (Text Editor)

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

  • کاربرد: در صفحات وبلاگ، توضیحات محصولات، درباره ما و هر بخشی که نیاز به متن طولانی دارد استفاده می‌شود.
ویرایشگر متن (Text Editor)

۱.۳ تصویر (Image)

برای افزودن تصاویر به صفحه استفاده می‌شود. امکان تنظیم اندازه، لینک‌دهی و افکت‌های حرکتی دارد. همچنین می‌توان از قابلیت lazy load برای بهینه‌سازی سرعت بارگذاری سایت استفاده کرد.

  • کاربرد: در صفحات لندینگ، بخش نمونه‌کارها، گالری تصاویر و صفحات محصول استفاده می‌شود.
تصویر (Image)

۱.۴ ویدیو (Video)

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

  • کاربرد: در صفحات آموزشی، معرفی محصولات و صفحات فرود برای افزایش تعامل کاربران استفاده می‌شود.
ویدیو (Video)

۱.۵ دکمه (Button)

ایجاد دکمه‌های قابل کلیک برای هدایت کاربران به بخش‌های دیگر سایت. امکان تغییر رنگ، متن، آیکون و لینک‌دهی دارد. قابلیت‌های اضافی مانند افکت‌های هاور و تنظیمات پیشرفته برای UX بهتر نیز موجود است.

  • کاربرد: در صفحات ثبت‌نام، خرید، تماس با ما و دانلود محتوا استفاده می‌شود.
دکمه (Button)

۱.۶ جداکننده (Divider)

برای ایجاد خطوط افقی و فاصله بین بخش‌های مختلف استفاده می‌شود. می‌توان ضخامت، رنگ و نوع خط را تغییر داد.

  • کاربرد: در طراحی صفحات برای تفکیک بخش‌ها و ایجاد فضای بصری مناسب کاربرد دارد.
جداکننده (Divider)

۱.۷ اسپیسِر (Spacer)

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

  • کاربرد: در تمام صفحات برای ایجاد فاصله مناسب بین المان‌ها استفاده می‌شود.
اسپیسِر (Spacer)

۲. المان‌های حرفه‌ای (Pro Elements)

المان‌های حرفه‌ای (Pro Elements)

۲.۱ فرم (Form)

یکی از مهم‌ترین المان‌های نسخه پرو که امکان ایجاد فرم‌های تماس، ثبت‌نام و اشتراک ایمیلی را فراهم می‌کند. قابلیت اتصال به سرویس‌های ایمیل مارکتینگ مانند Mailchimp و ActiveCampaign را دارد.

  • کاربرد: در صفحات تماس با ما، صفحات عضویت و فرم‌های نظرسنجی استفاده می‌شود.
فرم (Form)

۲.۲ اسلایدر (Slides)

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

  • کاربرد: در صفحه اصلی سایت، معرفی محصولات و نمایش نظرات مشتریان استفاده می‌شود.
اسلایدر (Slides)

۲.۳ جدول قیمت‌گذاری (Price Table)

برای نمایش پلن‌های قیمت‌گذاری در صفحات فروشگاهی کاربرد دارد. می‌توان ویژگی‌ها و دکمه‌های خرید را به‌راحتی اضافه کرد.

  • کاربرد: در صفحات تعرفه‌ها و سرویس‌های اشتراکی استفاده می‌شود.
جدول قیمت‌گذاری (Price Table)

۲.۴ شمارش معکوس (Countdown)

برای ایجاد تایمر شمارش معکوس در جشنواره‌های تخفیف و رویدادهای ویژه استفاده می‌شود. امکان تنظیم زمان، تغییر استایل و ایجاد افکت‌های ویژه در آن وجود دارد.

  • کاربرد: در صفحات تخفیف ویژه، لانچ محصولات و کمپین‌های تبلیغاتی استفاده می‌شود.
شمارش معکوس (Countdown)

۲.۵ گالری تصاویر (Gallery)

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

  • کاربرد: در صفحات نمونه‌کار، نمایش پروژه‌ها و بخش‌های بصری سایت استفاده می‌شود.
گالری تصاویر (Gallery)

۲.۶ لیست آیکون‌ها (Icon List)

لیستی از موارد مهم را همراه با آیکون‌های سفارشی نمایش می‌دهد. می‌توان رنگ، اندازه و چینش آیکون‌ها را سفارشی‌سازی کرد.

  • کاربرد: در صفحات ویژگی‌های محصول، راهنمای استفاده و مزایای خدمات استفاده می‌شود.
لیست آیکون‌ها (Icon List)

۳. المان‌های ووکامرس (WooCommerce Elements)

المان‌های ووکامرس (WooCommerce Elements)

۳.۱ محصولات (Products)

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

  • کاربرد: در صفحات فروشگاه، پیشنهادهای ویژه و صفحات تخفیف‌ها استفاده می‌شود.
محصولات (Products)

۳.۲ سبد خرید (Cart)

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

  • کاربرد: در صفحات خرید و ناوبری سریع برای کاربران استفاده می‌شود.
سبد خرید (Cart)

۳.۳ تسویه‌حساب (Checkout)

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

  • کاربرد: در صفحات پرداخت و نهایی کردن سفارش‌ها استفاده می‌شود.
تسویه‌حساب (Checkout)

۳.۴ دسته‌بندی محصولات (Product Categories)

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

  • کاربرد: در صفحات اصلی فروشگاه و صفحات فیلتر محصولات استفاده می‌شود.
محصولات Product Categories

۴. المان‌های پویا (Dynamic Elements)

المان‌های پویا (Dynamic Elements)

۴.۱ پست‌های اخیر (Posts)

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

  • کاربرد: در بلاگ‌ها، صفحات خبری و صفحات آموزشی استفاده می‌شود.
پست‌های اخیر (Posts)

۴.۲ نظرات کاربران (Testimonials)

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

  • کاربرد: در صفحات فروشگاهی و معرفی خدمات استفاده می‌شود.
نظرات کاربران (Testimonials)

۴.۳ شمارشگر (Counter)

عدد شمارشی برای نمایش میزان رضایت مشتریان، تعداد پروژه‌ها یا هر آمار دیگری استفاده می‌شود. قابلیت تغییر انیمیشن و واحد شمارش را دارد.

  • کاربرد: در صفحات معرفی برند و صفحات فرود برای نمایش آمارهای مهم استفاده می‌شود.
شمارنده (Counter)

۵.المان های سایت

.المان های سایت

۵.۱ لوگوی سایت

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

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

۵.۲ فهرست وردپرس

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

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

۵.۳ عنوان سایت

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

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

نتیجه گیری

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

نویسنده این مطلب:

دیدگاه های شما:

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

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

5 × 2 =