سلام

🎯 من مهدیارم – طراح رابط کاربری، متخصص طراحی سایت با وردپرس و عاشق سئو!

با ابزارهایی مثل Elementor، Figma و HTML/CSS به کسب‌وکارها کمک می‌کنم تا سایت‌هایی زیبا، سریع و سئو‌شده داشته باشن.

تخصص من ترکیب خلاقیت با تحلیل‌های فنیه: یعنی هم طراحی می‌کنم، هم به دیده‌شدن کمک می‌کنم.

📌 خدمات من:
- طراحی سایت وردپرسی حرفه‌ای
- طراحی UI/UX صفحات وب و اپلیکیشن
- بهینه‌سازی سئو و افزایش سرعت سایت

✨ اگر به دنبال همکاری هستی یا دوست داری بیشتر بدونی، خوشحال می‌شم صحبت کنیم!

.

👥داستان صحبت من با مهــــدیار ساعت ۱۸ عصر دیروز
🚨کسب و کار های بزرگ و معروف چرا از این کار استفاده می کنند؟
🔸چرا باید این کار رو انجام بدیم؟
🔹 چرا خیلی از مشتریان گول می خورند؟
🔶فرق پشتیبان سایت و طراح سایت با دیزاینر ui چیه؟
من تضمین ۲ برابری می کنم 👌🏻
.

✨ طراحی و پیاده‌سازی وب‌سایت «زیستبان پایدار فیروزه‌ای»

🔹 پروژه: طراحی وب‌سایت شرکتی برای سازمان محیط زیست اصفهان
🔹 مراحل کار:

طراحی اختصاصی رابط کاربری (UI) و تجربه کاربری (UX) در Figma

پیاده‌سازی کامل در WordPress با استفاده از Elementor

رعایت اصول سرعت، بهینه‌سازی و ریسپانسیو برای نمایش عالی در موبایل و دسکتاپ

🌿 این پروژه با هدف ایجاد یک وب‌سایت حرفه‌ای، سبز و کاربرپسند طراحی شد تا فعالیت‌های سازمان محیط زیست به شکلی شفاف و اثرگذار معرفی شود.

✅ نتیجه: یک سایت شرکتی مدرن، استاندارد و سازگار با نیازهای سازمانی.

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

طراحی بنر استوری

E-commerce Web Design
Ui Design
©️2025 Mahdev Web Design Service | All Rights Reserved

Work Work Work💻

Bymer business✌️

آموزش: محدود کردن متن به ۲ خط با CSS 💥

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

این کد css رو به متنی که میخای بده ✅

{ 
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

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

انیمیشن هاور اسکرول، مناسب برای پرزنت نمونه کار و ریسپانسیو روی موبایل و دسکتاپ👇👨‍💻
نکته: کد باید روی کانتینر اعمال شود.

selector{
    background-position: top;
    background-size: cover;
    transition: background-position 8s ease-in-out;
}

selector:hover {
    background-position: bottom;
}
selector:not(:hover) {
    transition: background-position 1s ease-in-out;
}

وقتی مسیرها به‌هم می‌رسن، تجربه شکل می‌گیره.
این لاین‌ها منطق UX هستن، نه فقط اتصال بین صفحات. 🧠✨

#work

🛍 مشکل رایج در طراحی فروشگاه با المنتور!

حتماً برات پیش اومده که تصاویر محصولاتت توی گرید، اندازه‌های مختلف دارن 😐
یکی کشیده، یکی کوچیک، یکی بزرگ… و کل ظاهر سایتو خراب می‌کنه!

✅ راه حل ساده با CSS:

کافیه این کد رو به کلاس تصویر کارت محصولت بدی 👇

    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;

💡 این کد چیکار می‌کنه؟

* همه تصاویر رو هم‌اندازه می‌کنه
* جلوی کشیده شدن عکس رو می‌گیره
* ظاهر گریدت رو کاملاً حرفه‌ای می‌کنه