۱۰ تکنیک نوین طراحی سایت در سال ۱۴۰۵؛ همراه با کدهای آماده

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

اگر از وردپرس و المنتور استفاده می‌کنید، برای پیاده‌سازی بسیاری از این تکنیک‌ها نیازی به برنامه‌نویسی پیچیده ندارید. کافی است کد مناسب را در محل درست قرار دهید و نتیجه را بررسی کنید.

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

فهرست مطالب

۱. طراحی دکمه گرادیانی و تعاملی

۲. ساخت کارت شیشه‌ای با Glassmorphism

۳. بزرگ‌نمایی تصاویر با CSS

۴. ساخت خط متحرک زیر عنوان‌ها

۵. طراحی شبکه واکنش‌گرا با CSS Grid

۶. مدیریت رنگ‌ها با متغیرهای CSS

۷. ایجاد سایه‌های مدرن برای کارت‌ها

۸. ساخت انیمیشن ورود عناصر

۹. اضافه کردن حالت تاریک به سایت

۱۰. استفاده از هوش مصنوعی برای تولید کد

۱. طراحی دکمه گرادیانی و تعاملی با CSS

دکمه‌های ثبت سفارش، دریافت مشاوره و مشاهده خدمات از مهم‌ترین اجزای یک وب‌سایت هستند. با استفاده از رنگ‌های گرادیانی، گوشه‌های گرد و انیمیشن‌های ظریف می‌توان ظاهر این دکمه‌ها را حرفه‌ای‌تر کرد.

کد آماده دکمه گرادیانی

اگر از المنتور پرو استفاده می‌کنید، ابزارک دکمه را انتخاب کنید و کد زیر را در بخش «پیشرفته ← CSS سفارشی» قرار دهید.

کد CSS — آماده کپی

selector .elementor-button {
    background: linear-gradient(135deg, #2563eb, #7c3aed);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 16px 30px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

selector .elementor-button:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.35);
}

نتیجه اجرای کد:

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

• گوشه‌های دکمه گرد می‌شوند.

• با حرکت ماوس، دکمه کمی به سمت بالا حرکت می‌کند.

• سایه دکمه هنگام تعامل پررنگ‌تر می‌شود.

نکته: کلمه selector مخصوص CSS سفارشی المنتور است. اگر از المنتور رایگان استفاده می‌کنید، باید یک کلاس CSS به دکمه اختصاص دهید و کد را در CSS اضافی وردپرس قرار دهید.

۲. ساخت کارت شیشه‌ای با تکنیک Glassmorphism

Glassmorphism یکی از سبک‌های طراحی رابط کاربری است که در آن از پس‌زمینه نیمه‌شفاف، محوشدگی و حاشیه روشن استفاده می‌شود. این تکنیک برای کارت خدمات، بخش معرفی امکانات و پنل‌های اطلاعاتی مناسب است.

کد آماده افکت شیشه‌ای

یک کانتینر در المنتور بسازید و کد زیر را در CSS سفارشی همان کانتینر قرار دهید.

کد CSS — آماده کپی

selector {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 28px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

این کد یک کارت نیمه‌شفاف با گوشه‌های گرد و پس‌زمینه محوشده ایجاد می‌کند.

نکته: برای دیده‌شدن بهتر این افکت، کارت را روی پس‌زمینه رنگی یا تصویری قرار دهید. روی زمینه کاملاً سفید، شفافیت و محوشدگی ممکن است کمتر مشخص باشند.

۳. بزرگ‌نمایی تصاویر هنگام حرکت ماوس

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

کد آماده بزرگ‌نمایی تصویر

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

کد CSS — آماده کپی

selector {
    overflow: hidden;
    border-radius: 16px;
}

selector img {
    display: block;
    width: 100%;
    transition: transform 0.4s ease;
}

selector:hover img {
    transform: scale(1.06);
}

با حرکت ماوس روی تصویر، اندازه آن به‌آرامی افزایش پیدا می‌کند. مقدار 1.06 یعنی تصویر تا ۶ درصد بزرگ‌تر می‌شود.

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

۴. ساخت خط متحرک زیر عنوان‌ها

با یک خط رنگی متحرک می‌توانید ظاهر عنوان‌ها و لینک‌های منتخب سایت را جذاب‌تر کنید. این تکنیک بدون JavaScript و تنها با CSS قابل اجراست.

مرحله اول: اختصاص کلاس به عنوان

ابزارک عنوان را در المنتور انتخاب کنید و در بخش «پیشرفته ← کلاس‌های CSS» این عبارت را وارد کنید:

modern-underline

نقطه ابتدای نام کلاس را وارد نکنید.

مرحله دوم: افزودن CSS

کد زیر را در مسیر «نمایش ← سفارشی‌سازی ← CSS اضافی» وردپرس قرار دهید.

کد CSS — آماده کپی

.modern-underline {
    position: relative;
    display: inline-block;
}

.modern-underline::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -6px;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    transition: width 0.3s ease;
}

.modern-underline:hover::after {
    width: 100%;
}

با حرکت ماوس روی عنوان، خط از سمت راست به چپ گسترش پیدا می‌کند. اگر می‌خواهید خط همیشه نمایش داده شود، مقدار width در حالت اولیه را به 100% تغییر دهید و قانون مربوط به :hover را حذف کنید.

۵. طراحی شبکه واکنش‌گرا با CSS Grid

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

کد آماده چیدمان کارت‌ها

ابتدا کلاس modern-grid را به کانتینر والد کارت‌ها اختصاص دهید. سپس کد زیر را در CSS اضافی وردپرس قرار دهید.

کد CSS — آماده کپی

.modern-grid {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 240px), 1fr)
    );
    gap: 24px;
    align-items: stretch;
}

.modern-grid > * {
    min-width: 0;
}

این کد کارت‌ها را براساس فضای موجود مرتب می‌کند. اگر عرض صفحه کم شود، تعداد ستون‌ها کاهش پیدا می‌کند و کارت‌ها در ردیف‌های جدید قرار می‌گیرند.

کاربردهای این تکنیک:

• نمایش خدمات یک شرکت

• ساخت شبکه نمونه‌کارها

• نمایش محصولات فروشگاهی

• طراحی بخش ویژگی‌های یک محصول

توجه کنید که تنظیمات عرض و ساختار داخلی کانتینرهای المنتور نیز روی نتیجه نهایی تأثیر دارند.

۶. مدیریت رنگ‌های سایت با متغیرهای CSS

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

کد آماده متغیرهای CSS

کد زیر را در CSS اضافی وردپرس قرار دهید.

کد CSS — آماده کپی

:root {
    --brand-primary: #2563eb;
    --brand-secondary: #7c3aed;
    --brand-text: #172033;
    --brand-radius: 14px;
    --brand-shadow: 0 8px 24px rgba(0, 0, 0, 0.10);
}

.modern-card {
    color: var(--brand-text);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow);
}

.modern-button {
    background: var(--brand-primary);
    color: #ffffff;
    border-radius: var(--brand-radius);
}

برای استفاده از این استایل‌ها، کلاس modern-card را به کارت و کلاس modern-button را به عنصر موردنظر اختصاص دهید.

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

۷. ایجاد سایه‌های مدرن برای کارت‌ها

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

کد آماده سایه چندلایه

کلاس modern-shadow را به کانتینر موردنظر اختصاص دهید و کد زیر را در CSS اضافی وردپرس قرار دهید.

کد CSS — آماده کپی

.modern-shadow {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 18px;
    box-shadow:
        0 2px 5px rgba(15, 23, 42, 0.03),
        0 12px 30px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.modern-shadow:hover {
    transform: translateY(-3px);
    box-shadow:
        0 4px 8px rgba(15, 23, 42, 0.04),
        0 18px 40px rgba(15, 23, 42, 0.12);
}

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

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

۸. ساخت انیمیشن ورود عناصر به صفحه

انیمیشن ورود عناصر می‌تواند هنگام بارگذاری صفحه، محتوا را به‌آرامی نمایش دهد. برای مثال، یک کارت از فاصله‌ای کوتاه در پایین به موقعیت اصلی خود حرکت می‌کند و هم‌زمان ظاهر می‌شود.

کد آماده انیمیشن

کلاس fade-up را به عنصر موردنظر اختصاص دهید و کد زیر را در CSS اضافی وردپرس قرار دهید.

کد CSS — آماده کپی

.fade-up {
    animation: fadeUp 0.7s ease both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fade-up {
        animation: none;
    }
}

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

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

۹. اضافه کردن حالت تاریک و روشن به سایت

حالت تاریک یا Dark Mode به بازدیدکننده اجازه می‌دهد بین ظاهر روشن و تیره سایت جابه‌جا شود. این قابلیت می‌تواند برای ابزارهای آنلاین، داشبوردها و بعضی وب‌سایت‌های محتوایی مفید باشد.

در این نمونه، با کلیک روی یک دکمه، کلاس dark-mode به بدنه سایت اضافه یا از آن حذف می‌شود.

مرحله اول: افزودن CSS

کد زیر را در CSS اضافی وردپرس قرار دهید.

کد CSS — آماده کپی

body {
    background-color: #ffffff;
    color: #172033;
    transition: background-color 0.25s ease, color 0.25s ease;
}

body.dark-mode {
    background-color: #0f172a;
    color: #f1f5f9;
}

body.dark-mode a {
    color: #93c5fd;
}

مرحله دوم: ساخت دکمه تغییر حالت

در المنتور یک ابزارک HTML اضافه کنید و کد زیر را در آن قرار دهید.

کد HTML و JavaScript — آماده کپی

<button type="button" id="theme-toggle">
    تغییر حالت روشن و تاریک
</button>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const button = document.getElementById("theme-toggle");

    if (!button) return;

    button.addEventListener("click", function () {
        document.body.classList.toggle("dark-mode");
    });
});
</script>

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

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

۱۰. استفاده از هوش مصنوعی برای تولید کدهای طراحی سایت

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

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

نمونه پرامپت برای تولید کد CSS

متن زیر را در ابزار هوش مصنوعی موردنظر وارد کنید.

پرامپت — آماده کپی

یک کارت معرفی خدمات مدرن برای سایت وردپرسی با المنتور طراحی کن.

شرایط:
- کد CSS کامل و آماده کپی باشد.
- در موبایل و دسکتاپ به‌درستی نمایش داده شود.
- گوشه‌های گرد و سایه ملایم داشته باشد.
- هنگام حرکت ماوس، افکت حرکتی ظریف اجرا شود.
- از کلاس اختصاصی استفاده کن تا استایل سایر عناصر سایت تغییر نکند.
- از کدهای غیرضروری و کتابخانه‌های اضافی استفاده نکن.
- کد را همراه با توضیح محل قرار دادن آن در وردپرس و المنتور ارائه بده.
- اگر کد به JavaScript نیاز دارد، آن را جداگانه بنویس.

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

هوش مصنوعی زمانی بیشترین کاربرد را دارد که خروجی آن را بررسی کنید و متناسب با نیاز واقعی پروژه تغییر دهید.

کدام تکنیک‌ها برای سایت وردپرسی مناسب‌تر هستند؟

نکات مهم قبل از استفاده از کدها

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

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

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

۴. از انیمیشن‌های غیرضروری پرهیز کنید. افکت‌های زیاد، اسکریپت‌های غیرضروری و تصاویر سنگین ممکن است عملکرد سایت را تحت تأثیر قرار دهند.

۵. کدهای تکراری را مدیریت کنید. بهتر است هر استایل عمومی را یک بار تعریف کنید تا تغییر و نگهداری آن ساده‌تر باشد.

۶. پس از ذخیره کد، کش را بررسی کنید. اگر تغییرات نمایش داده نشدند، کش سایت و مرورگر را پاک کنید و در صورت نیاز فایل‌های CSS تولیدشده توسط المنتور را دوباره ایجاد کنید.

آیا تکنیک‌های جدید طراحی سایت باعث بهبود سئو می‌شوند؟

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

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

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

پرسش‌های متداول

آیا برای استفاده از کدهای این مقاله باید برنامه‌نویس باشیم؟

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

آیا این کدها در همه قالب‌های وردپرس کار می‌کنند؟

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

آیا این کدها باعث کند شدن سایت می‌شوند؟

کدهای ساده CSS معمولاً سربار کمی دارند، اما عملکرد نهایی به تعداد افکت‌ها و نحوه پیاده‌سازی بستگی دارد. بهتر است از انیمیشن‌های سنگین و اسکریپت‌های غیرضروری پرهیز کنید و نتیجه را با ابزارهای سنجش عملکرد بررسی کنید.

آیا می‌توان این کدها را در المنتور رایگان استفاده کرد؟

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

برای شروع کدام تکنیک بهتر است؟

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

جمع‌بندی

برای طراحی یک وب‌سایت مدرن، همیشه به افزونه‌های متعدد یا کدنویسی پیچیده نیاز ندارید. تکنیک‌هایی مانند گرادیان، افکت‌های حرکتی، CSS Grid، متغیرهای CSS و استفاده هدفمند از هوش مصنوعی می‌توانند امکانات بیشتری در اختیار شما قرار دهند.

مهم این است که هر تکنیک را متناسب با هدف صفحه به کار ببرید و پس از اجرا، ظاهر، سرعت و تجربه کاربری را بررسی کنید.

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