ایجاد عنوان با دو رنگ مختلف: از تیترهای تکراری و بی‌روح سایتت خسته شدی؟ 🥱 همون تیترهای مشکی و خاکستری همیشگی که در شلوغی صفحه گم میشن!

همه ما میدونیم که در دنیای وب، فقط چند ثانیه فرصت داریم تا توجه کاربر رو جلب کنیم. و قلاب اصلی برای این کار چیه؟ دقیقاً، همین عنوان‌ و تیترها!

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

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

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

چرا از دو رنگ در عنوان استفاده کنیم؟ 🤩

شاید بپرسی این همه تاکید برای دو رنگ کردن یک تیتر برای چیه؟ خب، قضیه فقط زیبایی نیست. این کار یک تکنیک روانشناسی هم هست:

• جلب توجه فوری: چشم کاربر ناخودآگاه به سمت کلمه‌ای که رنگ متفاوتی داره کشیده می‌شه. این یعنی می‌تونی مهم‌ترین بخش پیامت رو در یک صدم ثانیه به مخاطب منتقل کنی.
• تاکید روی کلمات کلیدی: می‌خوای روی یک مزیت خاص مثل “رایگان” یا “تخفیف ویژه” تاکید کنی؟ رنگش رو عوض کن تا از چشم هیچ‌کس پنهون نمونه!
• تقویت هویت برند: می‌تونی از رنگ سازمانی برندت برای بخشی از عنوان استفاده کنی و یکپارچگی بصری سایتت رو بالاتر ببری.
• شکستن یکنواختی: متن‌های طولانی و یکدست خسته‌کننده‌ان. یک عنوان رنگی مثل یک نسیم خنک وسط یک روز گرمه و به کاربر انرژی می‌ده که به خوندن ادامه بده.

آموزش گام به گام ایجاد عنوان با دو رنگ مختلف در المنتور

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

گام ۱: وارد ویرایشگر المنتور شو 🖥️

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

گام ۲: ویجت هدینگ رو به صفحه اضافه یا ویرایش کن 📝

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

گام ۳: متن عنوانت رو وارد کن ✍️

توی تب “محتوا” (Content)، یه فیلد به اسم “عنوان” (Title) می‌بینی. اینجا هر متنی که می‌خوای به عنوانت بدی رو بنویس. مثلاً فرض کن می‌خوای بنویسی “رایــــا وردپــــرس”.

گام ۴: از تگ <span> برای تغییر رنگ استفاده کن 🎨

اینجاست که جادو اتفاق می‌افته! برای اینکه بخشی از عنوانت رو به یه رنگ دیگه دربیاری، اون بخش رو توی تگ <span> بذار و با استایل CSS رنگش رو عوض کن. مثلاً اگه بخوای “رایــــا” رو نارنجی کنی، اینطوری بنویس:

<span style="color:orange;">رایــــا</span> وردپــــرس

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

• یه توضیح کوچیک: تگ <span> بهت اجازه می‌ده استایل خاصی (مثل رنگ) رو فقط به یه بخش از متن بدی. توی این مثال، “رایــــا” نارنجی می‌شه و “وردپــــرس” همون رنگ پیش‌فرض می‌مونه.
• یه نکته باحال: می‌تونی به جای “orange” از کدهای هگز (مثل #FFA500) یا RGB (مثل rgb(255,165,0)) هم استفاده کنی.

گام ۵: ذخیره کن و نتیجه رو ببین 👀

بعد از اینکه متن رو با تگ <span> وارد کردی، روی “به‌روزرسانی” کلیک کن تا تغییراتت ذخیره بشه. حالا برو صفحه‌ات رو پیش‌نمایش کن و ببین چه عنوان دو رنگ قشنگی ساختی! 😎

نکات تکمیلی💡

حالا که این ترفند رو یاد گرفتی، بذار چند تا ایده دیگه بهت بدم که عنوان‌هات رو از اینم جذاب‌تر کنی:

• هر رنگی که می‌خوای انتخاب کن: فقط به نارنجی محدود نیستی! می‌تونی هر رنگی که دوست داری رو با اسم رنگ یا کدش توی <span> بذاری.
• فونت و اندازه رو عوض کن: می‌خوای عنوانت بیشتر به چشم بیاد؟ استایل‌های دیگه مثل بولد یا اندازه بزرگ‌تر رو امتحان کن. مثلاً:

<span style="color:orange; font-weight:bold; font-size:70px;">رایــــا</span> وردپــــرس

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

اینجوری “رایــــا” هم نارنجی می‌شه، هم بولد و هم بزرگ‌تر!

• عنوان با چند رنگ مختلف: اگه بخوای چند بخش از عنوانت رنگ‌های مختلف داشته باشن، از چند تا <span> استفاده کن:

<span style="color:green;">سایت</span> <span style="color:gray;">رایا</span> <span style="color:red;">وردپرس</span>

.______          ___    ____    ____  ___    ____    __    ____ .______  
|   _  \        /   \   \   \  /   / /   \   \   \  /  \  /   / |   _  \ 
|  |_)  |      /  ^  \   \   \/   / /  ^  \   \   \/    \/   /  |  |_)  |
|      /      /  /_\  \   \_    _/ /  /_\  \   \            /   |   ___/ 
|  |\  \----./  _____  \    |  |  /  _____  \   \    /\    /    |  |     
| _| `._____/__/     \__\   |__| /__/     \__\   \__/  \__/     | _|     

حرف آخر

دیدی چقدر راحت بود؟ تو همین چند دقیقه یک تکنیک یاد گرفتی که اکثر طراحان سایت حرفه‌ای ازش استفاده می‌کنن تا جلوه بصری سایت رو چند پله ارتقا بدن.

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

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

مطالعه

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

مطالعه

ایجاد افکت ریپل روی دکمه های سایت در المنتور

مطالعه