خانهآموزش المنتورطراحی باکس دسته‌ بندی خدمات در المنتور با هاور افکت جالب
https://rayawp.ir/?p=19324

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

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

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

مراحل طراحی باکس دسته‌ بندی خدمات در المنتور

1. ایجاد یک برگه جدید با المنتور 📝

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

2. اضافه کردن ویجت Icon Box 🖼️ به برگه

حالا تو پنل سمت راست، ویجت “Icon Box” رو سرچ کن و اون رو به صفحه بکش و رها کن. این ویجت بهت این امکان رو میده که برای هر باکس یه آیکون، عنوان و توضیحات کوتاه اضافه کنی. مثلاً آیکون‌ها می‌تونن نماد هر سرویس باشن. 💼🔧

🚨 توجه! 🚨 تو این آموزش می‌خوام خدمات سایت رو در سه دسته‌بندی سه‌ستونه نمایش بدم. نیازی نیست سه تا ویجت آیکون باکس اضافه کنم. برای سرعت بیشتر در کار، بهتره فقط یک ویجت آیکون باکس رو طراحی کنم، بعد اون رو تکثیر کنم و فقط متن‌ها و آیکون‌ها رو تغییر بدم. 😎📦

✨ فیلم و سریال های جدید رو از اینجا دانلود کن✨ کلیک کن AD

3. تنظیمات ویجت Icon Box ⚙️

حالا که ویجت رو اضافه کردی، وقتشه اطلاعات مربوط به هر دسته‌بندی رو وارد کنی:

  • آیکون: برای هر دسته‌بندی یک آیکون انتخاب کن که به‌خوبی نمایانگر اون خدمات باشه. مثلاً برای “طراحی وب” از آیکون کامپیوتر استفاده کن. 💻
  • عنوان: عنوان دسته‌بندی رو وارد کن. مثلاً “طراحی وب”، “مشاوره کسب‌وکار” و … 📋
  • توضیحات: توضیحات مختصر درباره هر خدمت رو بنویس تا کاربران بیشتر با خدمات آشنا بشن. ✍️
  • استایل: از طریق تب استایل می‌تونی رنگ فونت و آیکون‌ها رو به سلیقه خودت تنظیم کنی🔥

حالا که این کارا رو انجام دادی، برو به تب پیشرفته و به باکس یه پدینگ داخلی ۱۵ پیکسلی از همه جهات بده. اینطوری باکس‌ت بیشتر فضا پیدا می‌کنه و ظاهرش تمیزتر میشه! ✨

4. افزودن هاور افکت با کد CSS 🖱️✨

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

کد زیر رو در بخش “تب پیشرفته” و “کد CSS سفارشی” ویجت آیکون باکس قرار بده. بعد از طریق همین تب پیشرفته، در بخش “کلاس‌های CSS”، کلاس RayaWP-line رو به ویجت آیکون باکس اختصاص بده:

/* code By RayaWp.ir */
.RayaWP-line{
  position: relative;
}

.RayaWP-line::after {
  content: '';
  position: absolute;
  top: calc(100% + 1px);
  background: #A865F8;
  height: 12px;
  width: calc(50% - 16px);  
  border-radius: 0 0 16px 16px;
  left: 12px; 
  transition: width 0.3s ease, transform 0.3s ease; 
}

.RayaWP-line:hover::after {
  width: calc(100% - 25px);  
  transform: translateX(0);  
}

همون‌طور که بالاتر گفتم، طراحی باکس دسته‌بندی تموم شد. حالا وقتشه که به بخش داخلی سه ستونه به صفحه با عرض مساوی به صفحه اضافه کنی. بعد، ویجت آیکون باکس اصلی رو کپی و داخل این ستون‌ها پیست کنی. 🧑‍💻🔄 حالا می‌تونی متن و آیکون ویجت‌ها رو به دلخواه خودت تغییر بدی و سفارشی کنی! ✨

برای اینکه کار تمیزتر و حرفه‌ای‌تر به نظر بیاد، بهتره یه حاشیه یکپارچه با رنگ بنفش (A865F8#) به باکس‌ها بدی. 😎 اینطوری باکس‌ها گوشه‌های گرد و نرم‌تری پیدا می‌کنن. برای اینکار روی هر آیکون باکس کلیک کن تا پنل ویرایش باز بشه. حالا به تب پیشرفته برو و از قسمت حاشیه، یه حاشیه یکپارچه با ضخامت 2 پیکسل تنظیم کن. سپس انحنای حاشیه رو به 10 پیکسل تغییر بده تا گوشه‌ها نرم و گرد بشن. اینطوری ظاهر باکس‌ها خیلی شیک و حرفه‌ای‌تر میشه! ✨

حالا نوبت به آخرین مرحله می‌رسه. برای بخش داخلی سه‌ ستونه‌ای که باکس‌های دسته‌بندی داخلش قرار دارن، یه رنگ پس‌زمینه انتخاب کن. پیشنهاد می‌کنم رنگ بنفش با کد هگزادسیمال مناسب مثل #EDD7FFرو انتخاب کنی تا به بقیه عناصر طراحی سایت هماهنگ باشه. 🎨✨

برای تغییر رنگ پس زمینه روی ویرایش بخش داخلی بزن و به تب استایل برو نوع پس زمینه رو کلاسیک و رنگش رو EDD7FF# انتخاب کن .

وقتی رنگ رو تغییر دادی، برای بهتر شدن کار، خوبه که یه انحنای حاشیه هم به پس‌زمینه بدیم. برای این کار، تو همون تب استایل به پایین اسکرول کن و انحنای حاشیه رو روی 10 پیکسل تنظیم کن تا ظاهری نرم و شیک پیدا کنه! ✨

حالا به تب پیشرفته برو و مثل عکس زیر، به سکشن پدینگ داخلی اضافه کن. این کار باعث میشه فاصله‌ها منظم‌تر و بهتر بشن و ظاهر کلی بخش جذاب‌تر بشه! 📐✨

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

کار تمومه حالا با این آموزش ساده و کاربردی، می‌تونی یک باکس دسته‌بندی خدمات با افکت‌هاور جذاب بسازی که هم برای سایت‌های شرکتی و هم فروشگاهی عالی باشه. این طراحی باعث میشه سایتت شیک و جذاب به نظر بیاد و تجربه کاربری هم بهتر بشه. 💻🎯

فایل نهایی و JSON رو می‌تونید از قسمت زیر دانلود کنید👇🎉این فایل رو میتونید به راحتی توی المنتور درون ریزی کنید 🙂

دانلود فقط برای اعضا ( کلیک کنید)

برای دانلود وارد حساب کاربری خود شوید یا ثبت نام کنید. کمتر از یک دقیقه زمان میبره 🙂

5/5 - (1 امتیاز)

اگه از مطالب سایت خوشت اومده و کارت رو راه انداخته، می‌تونی با یه حمایت کوچیک کمک کنی بهتر و قوی‌ترش کنیم! هر مبلغی که کمک کنی، مستقیم میره برای توسعه سایت و تولید محتوا و آموزش های جذاب‌ تر. 🌟

ارسال نظر ( 0 نظر تایید شده )

نظرات پس از رویت و تایید مدیران نمایش داده می‌شود

📖 آنچه خواهید خواند

Toggle
    🔥
    43 نفر در حال مطالعه این مقاله
    Picture of SaeID
    SaeID

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

    مقالات بیشتر
    بستن