به جلسه سی و دوم بخش آموزش طراحی سایت با المنتور از دوره رایگان وردپرس خوش آمدید. قبل از اینکه قابلیت تو در تو به تنظیمات المنتور اضافه شود، باید در تبها و آکاردئونها، دستکم در مواقعی که قصد داشتید داخل آیتمهای تب و آکاردئون را ستون بندی کنید، نیاز داشتید قالبهایی را در المنتور بسازید. این کار زمان بسیاری میبرد و طراحی این المانها و خصوصاً آموزش آنها به نماینده کارفرما را سختتر میکرد. حالا با استفاده از عناصر تو در تو، بدون ساختن قالبهای مجزا، میتوانید طراحی بهینه برای تب، آکاردئون و حتی مگامنوهای چند سطی داشته باشید.
در این مقاله از آژانس نوآوری رسام قصد داریم عناصر تو در تو در المنتور را آموزش دهیم. پس از شما دعوت میکنیم تا پایان مقاله ما را همراهی کنید.
فعالسازی عناصر تو در تو در المنتور
در پیشخوان وردپرس و در منوی المنتور، به قسمت تنظیمات رفته و سپس به تب “ویژگیها” بروید. دقت کنید که در این قسمت باید ویژگی “عناصر تو در تو” فعال باشد. این را نیز در نظر بگیرید که قابلیتهای جدید المنتور وقتی از حالا بتا خارج بشود و اصطلاحاً به نسخه آلفا یا نهایی برسند، اغلب گزینه پیش فرض آن نیز فعال خواهد بود. وقتی شما عناصر تو در تو را فعال کنید، داخل برگهساز المنتور، گزینههای تب و آکاردئون با تنظیمات متفاوتی دیده خواهند شد و از این به بعد آسانتر میتوانید از آنها استفاده کنید.
فرض کنید که میخواهید در بخشی از سایت خود، یک زبانه یا تب بگذارید که داخل آن چند کتاب را معرفی کنید. مثلاً اگر روی تب دوم کلیک شد، کتاب “عادتهای اتمی” فعال شود و داخل محتوای تب آن، عنوان، متن و دکمه در سمت راست و تصویر در سمت چپ قرار بگیرد. (حتی میتواند ویدئو معرفی باشد). اگر این روند را میخواستید قبل از عناصر تو در تو در المنتور طراحی کنید باید برای هر تب یک قالب در بخش قالبهای المنتور میساختید که این کار طراحی سایت را سختتر میکرد.
ویجت جدید و جذاب کروسل
فعال کردن گزینه تو در تو، یک ویجت جذاب دیگر را هم به شما هدیه میدهد. این ویجت کاروسل المنتور نام دارد. دقت کنید که آن را با لوپ کاروسل اشتباه نگیرید. زیرا لوپ کروسل زمانی استفاده میشد که شما از محتوای ساختار یافته خود مانند برگه، نوشته، دسته، محصول، برچسب و… بتوانید یک کروسل ایجاد کنید. یعنی نمیتوانستید با محتوای کاستوم خود کروسل بسازید. اما با ویجت جدید کروسل، میتوانید از هر چیزی که دلتان خواست، کروسل بسازید.
به تصویر بالا دقت کنید. روی هر قسمت میتوانید کلیک کرده و ستونبندی المنتوری اضافه کنید (منظورمان همان کانتینر و گرید است). همچنین از بخش تنظیمات ویجت، میتوانید تعیین کنید که تعداد اسلایدها در گوشی، تبلت و دسکتاپ چقدر باشد و با هر بار کلیک کردن روی بالت، چند اسلاید حرکت کند. این ویجت جذاب و خوشایند باعث میشود راحتتر طرحهای رابط کاربری را اجرا کنید.
عناصر تو در تو در المنتور را بیاموزید تا سبک و سریع طراحی کنید
عناصر تو در تو یعنی تب، آکاردئون و ویجت کروسل، کمک میکند که کمتر پکیج المنتوری نصب کنید و سبکتر و سریعتر طراحی کنید. دقت کنید که هرچه سایت وردپرسی شما سبکتر باشد، تجربه کاربری بهتری را به مخاطبان خود منتقل میکنید. حتماً این جلسه از آموزش رایگان وردپرس به زبان فارسی را نیز به خوبی تمرین کنید و تجربیات و سوالات خود را با متخصصین آژانس نوآوری رسام در میان بگذارید.
10 پاسخ
درود بر شما
مثلاً فرض کنید در فیگما یک دیزاین خیلی خاص خلاقانه طراحی کردیم قطعا با المنتور معمولی نمیشه ساخت آیا باید افزونه ای نصب شود در المنتور یا با قابلیت های خود المنتور میشه اون دیزاین رو 100 درصد پیاده سازی کرد و اینکه مثلاً چجوری میشه از فیگما کد گرفت در اون دیزاین خاصی که طراحی کردم مثلاً یک کد css یا هر کد دیگه ای از هر جایی داشته باشیم چجوری میشه در المنتور اعمال کرد رو هر کدوم از عناصر دکمه ها آکاردئون هدر و… کلا در کدوم بخش اون کدی که داریم رو اعمال کنیم و اینکه و فیگما چجوری کد بگیرم.
درود بر شما. وقت شما بخیر
در المنتور امکانات خوبی میشه برای موشن دادن درست کرد. ما دو جلسه برای ویجتهای مقدماتی و پیشرفته داریم که آنجا در بخش پیشرفته این موضوعات رو هم توضیح دادیم. البته نهایت نداره میشه بازم ازش آموزش دید. با اونا کارهای جالب و خاصی میشه انجام داد. حتی یک سری ویدئو هست در یوتیوب و… که اصلا با اونا پروژه زده. چون پروژه ما شرکتی بود زیاد به اون عناصر نیاز نداشت اما آموزشش رو در دوره گذاشتیم. البته اگر طرح خیلی خاص باشه ممکنه نیاز به نصب افزونه یا کد زدن هم داشته باشه که باید آن طرح رو بررسی کرد از این نظر. توی فیگما به ما کد هم میده. میتوانیم در بخش کاستوم کد هر ویجت المنتوری از آن کدها هم استفاده کنیم. منتهی برخی قابلیتهای فیگما در نسخه پولی آن هست. مثل dev mode. باید البته فیگما رو هم مسلط باشیم. افزونه المنتوری Essential Addons یک قابلیت Figma to Elementor هم داره. جدیدا اومده و اصلا طراحی فیگما رو میاره توی المنتور. توی نسخه پولی آن اضافه شده. دو تا افزونه داره. هم رایگانش باید نصب باشه و هم نسخه پولی آن.
موفق باشید.
سلام وقت بخیر برای اینکه پرسش و پاسخ های متداول هر محصول یا پست در آکاردیون نمایش داده بشه باید از کدوم قسمت فیلد پویا استفاده کرد؟
درود بر شما. وقت شما بخیر
خود آن سوالات متداول را با چه چیزی ایجاد کردیم. مثلا اگر در گوتنبرگ با استفاده از افزونه ایجاد شده، ممکن است با المنتور هماهنگی داشته باشد و خودش فیلدی برای نمایش داینامیک داشته باشد. اگر هم نداشته باشد میتوان از افزونههایی مانند Dynamic Content و جت و… استفاده کرد.
موفق باشید.
عرض سلام و ادب.مثل همیشه عالی و بی نظیر بود.ممنون از شما
درود بر شما. وقت شما بخیر
سپاس از همراهی شما فاطمه جان. امید که نتایج عالی بگیرید.
موفق باشید.
سلام استاد وقتتون بخیر
در رابطه با گذاشتن نمونه محصولات یه شرکت صرفا جهت معرفیشون
مثلا ۵ تا دسته توی هردسته ۱۵ – ۲۰ تا محصول میشه از تب یا آکاردئون هم استفاده کرد؟
درود بر شما. وقت شما بخیر
بله درست میفرمائید و میشه نمونهکار و گالری و دستهبندی و… را به صورت تب و آکاردئون نشان داد و اتفاقا این بخش از المنتور باعث شده که کمتر به پکیجهای مجزا و پلاگینها مجزا برای این کار، احتیاج پیدا کنیم.
موفق باشید.
سلام و وقت بخیر
به نظر شما اینکه برای دسته بندی کردن محصول به “مردانه و زنانه” از این ویجت استفاده کنم مناسبه؟
یا اینکه مشکلی به وجود میاد؟
درود بر شما، وقت بخیر
دستهبندی مطالب عمیقا وابسته به استراتژی محتوایی و معماری اطلاعات سایت هست. گاهی مبتنی بر جنسیت هست. مثل فروشگاه لباس (دیجی استایل) و گاهی هم مبتنی بر نوع کالا هست (مانند دیجی کالا).
موفق باشید.