ایجاد باکس‌ حرفه ای در المنتور بدون کدنویسی

سلام رفیق! 👋 خوبی؟ تاحالا شده توی سایتت بخوای یه سری اطلاعات مثل خدمات، ویژگی‌ها یا نظرات مشتریان رو خیلی شیک و جذاب نمایش بدی، ولی باکس‌های معمولی المنتور چنگی به دل نزنن؟ 😕 دنبال یه راهی هستی که باکس حرفه ای و چشم‌نواز بسازی، اونم بدون اینکه درگیر کدنویسی بشی؟ 🤔

خب، جای درستی اومدی! 😉 تو این مقاله قراره یاد بگیری چطوری با استفاده از ویجت جعبه آیکون (Icon Box) المنتور و کمی کد CSS، باکس‌هایی بسازی که کاربر رو مجذوب خودش کنه 🪄

مراحل ایجاد باکس‌ حرفه‌ای در المنتور 🚀

خب، دیگه وقتشه دست به کار شی و بریم سر اصل ماجرا! 🌟

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

قدم اول: آماده کردن المنتور

1. ورود به صفحه: برو به صفحه‌ای که می‌خوای باکس رو توش بسازی و روی دکمه “ویرایش با المنتور” کلیک کن.
2. اضافه کردن بخش: یه بخش جدید به صفحه‌ات اضافه کن. می‌تونی یه ستون بذاری یا چند ستون، هر جور که میخای طراحی کنی 🙂
3. انتخاب ویجت: از پنل ویجت‌ها، جعبه آیکون (Icon Box) رو پیدا کن و بکشش تو بخش مورد نظرت.

حالا که ویجت رو اضافه کردی، وقتشه بریم سراغ تنظیماتش و کم کم حرفه‌ایش کنیم! 😎

× 📣 اینجا محل دیده شدن تبلیغ شماست کلیک کن AD

قدم دوم: تنظیمات اولیه ویجت جعبه آیکون

تو این مرحله، باید یه سری تنظیمات اولیه رو انجام بدی تا بعداً بتونی استایل دلخواهت رو بهش بدی.

1. انتخاب آیکون: برو به تب محتوا و یه آیکون باحال انتخاب کن. می‌تونی از آیکون‌های خود المنتور استفاده کنی یا اگه SVG داری، اونو آپلود کن.
2. عنوان و متن: یه عنوان و توضیحات بنویس. مثلاً عنوان بذار “رایا وردپرس” و توضیحاتش رو “ترفندهای خاص طراحی وب رو اینجا دنبال کن” بذار.
3. لینک (اختیاری): اگه می‌خوای باکس کلیک‌شدنی باشه، یه لینک بهش اضافه کن.

محتوای باکس رو که تنظیم کردی، بریم سراغ بخش جذاب‌تر: استایل‌دهی! 😊

قدم سوم: اضافه کردن کلاس CSS

برای اینکه بتونیم استایل‌های سفارشی رو به باکسمون بدیم، باید یه کلاس CSS بهش اضافه کنی. این کلاس رو بعداً تو کدهای CSS استفاده می‌کنیم.

1. رفتن به تب پیشرفته: تو پنل ویرایش ویجت جعبه آیکون، برو به تب پیشرفته.
2. اضافه کردن کلاس: تو قسمت کلاس‌های CSS، اسم کلاس رو بذار rayaboxit. این اسم رو خودم انتخاب کردم، ولی تو می‌تونی هر چی دوست داری بذاری، فقط یادت باشه تو CSS هم همونو استفاده کنی.

حالا که کلاس رو اضافه کردی، وقتشه کدهای CSS رو بذاریم و باکس رو خفن کنیم! 😉

قدم چهارم: اضافه کردن کدهای CSS

برای اینکه باکسمون استایل و انیمیشن‌های جذاب داشته باشه، کدهای CSS زیر رو باید به سایتت اضافه کنی. این کدها رو می‌تونی تو قسمت CSS سفارشی المنتور یا تو فایل style.css قالبت بذاری.

کلام آخر 😉

دیدی چقدر راحت بود؟ 😊 فقط با چند کلیک توی المنتور و کپی کردن یه قطعه کد CSS، تونستی یه باکس حرفه ای و فوق‌العاده جذاب بسازی که هم ظاهر سایتت رو دگرگون می‌کنه و هم کاربر رو به وجد میاره. ✨ دیگه لازم نیست به باکس‌های ساده و تکراری اکتفا کنی!

امیدوارم این آموزش برات مفید باشه. حتماً امتحانش کن و اگه سوالی داشتی یا خواستی نتیجه کارت رو نشون بدی، توی کامنت‌ها برام بنویس. خوشحال میشم کمکت کنم! 👇