ایجاد تیتر متحرک در وردپرس [آموزش گام به گام]

تیتر یکی از اولین عناصر هر صفحه است که توجه کاربر را به خود جلب می کند. یک عنوان ثابت می تواند پیام اصلی صفحه را منتقل کند، اما در بعضی بخش ها، استفاده هوشمندانه از حرکت و تغییر متن می تواند توجه مخاطب را بیشتر کرده و اهمیت یک عبارت، ویژگی یا پیشنهاد را بهتر نشان دهد. اگر می خواهید در وردپرس یک عنوان پویا، متحرک و حرفه ای ایجاد کنید، ویجت Animated Headline در المنتور پرو یکی از ساده ترین راهکارهاست. با این ابزار می توانید بخشی از تیتر را به صورت چرخشی نمایش دهید، کلمات مختلف را جایگزین یکدیگر کنید یا قسمتی از عنوان را با افکت های بصری برجسته کنید؛ بدون اینکه برای ایجاد حالت های پایه به کدنویسی نیاز داشته باشید.

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

تیتر متحرک در وردپرس چیست و چه کاربردی دارد؟

تیتر متحرک یا Animated Headline نوعی عنوان است که یک بخش از متن آن با افکت بصری تغییر می کند یا به شکل متفاوتی نمایش داده می شود. برای مثال، فرض کنید عنوان یک صفحه این باشد:

«با طراحی حرفه ای، کسب وکار خود را ______ کنید»

می توانید عبارت متحرک را به صورت «متفاوت»، «سریع تر»، «حرفه ای تر» یا «هوشمندانه تر» نمایش دهید تا یک جمله ثابت، چند پیام مرتبط را در اختیار کاربر قرار دهد. این قابلیت در صفحه های مختلف کاربرد دارد؛ از جمله:

• تیتر اصلی صفحه اصلی سایت
• معرفی یک محصول یا خدمت
• نمایش ویژگی های کلیدی یک سرویس
• صفحات فرود و کمپین ها
• نمایش چند مزیت در یک عنوان
• برجسته کردن یک کلمه مهم در تیتر
• ساخت هدرهای خلاقانه
• معرفی پیشنهادهای ویژه
• ایجاد تیترهای متفاوت برای بخش های مهم صفحه

با این حال، Animated Headline قرار نیست هر عنوانی را متحرک کند. اگر حرکت هیچ ارزش اطلاعاتی یا بصری مشخصی ایجاد نمی کند، استفاده از آن ممکن است فقط باعث شلوغ تر شدن صفحه شود.

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

برای ساخت تیتر متحرک به چه چیزی نیاز داریم؟

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

آموزش ساخت تیتر متحرک در وردپرس با المنتور

فرایند ساخت تیتر متحرک پیچیده نیست، اما برای رسیدن به نتیجه حرفه ای بهتر است تنظیمات را مرحله به مرحله انجام دهید.

گام اول: ورود به صفحه موردنظر

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

گام دوم: پیدا کردن ویجت Animated Headline

در پنل ابزارک های المنتور، عبارت زیر را جستجو کنید: Animated Headline و پس از مشاهده ویجت «تیتر متحرک»، آن را با روش کشیدن و رها کردن روی محل موردنظر در صفحه قرار دهید. در این مرحله معمولاً یک تیتر نمونه در صفحه نمایش داده می شود و می توانید تنظیمات آن را از پنل تنظیمات المنتور تغییر دهید.

گام سوم: انتخاب نوع تیتر متحرک

پس از قرار دادن ویجت، وارد تنظیمات محتوایی آن شوید. در بخش Headline می توانید نوع عملکرد تیتر را انتخاب کنید. دو حالت مهم در این بخش عبارت اند از:

Rotating

در این حالت، بخشی از متن به شکل چرخشی یا متناوب تغییر می کند. این گزینه برای زمانی مناسب است که بخواهید چند کلمه یا عبارت مرتبط را در یک موقعیت از تیتر نمایش دهید. برای مثال:

«وب سایت خود را حرفه ای تر طراحی کنید»

«وب سایت خود را سریع تر طراحی کنید»

«وب سایت خود را خلاقانه تر طراحی کنید»

در این مثال، بخش ثابت جمله حفظ می شود و فقط قسمت متحرک تغییر می کند.

Highlighted

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

گام چهارم: تنظیم Before Text، Rotating Text و After Text

یکی از مهم ترین قسمت های تنظیم Animated Headline، تعیین ساختار جمله است. در بخش Before Text متنی را قرار دهید که باید قبل از بخش متحرک نمایش داده شود. در بخش Rotating Text کلمات یا عبارت هایی را وارد کنید که قرار است به صورت متحرک نمایش داده شوند. در بخش After Text نیز متنی را بنویسید که باید بعد از قسمت متحرک قرار بگیرد. برای مثال می توانید ساختاری مانند زیر داشته باشید:

«با المنتور، سایت خود را [حرفه ای تر / سریع تر / جذاب تر] طراحی کنید.»

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

چگونه متن متحرک را حرفه ای انتخاب کنیم؟

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

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

این نکته مخصوصاً در طراحی نسخه موبایل اهمیت بیشتری پیدا می کند.

گام پنجم: انتخاب نوع Animation

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

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

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

گام ششم: تنظیم Duration و Infinite Loop

دو تنظیم مهم برای کنترل رفتار انیمیشن، Duration و Infinite Loop هستند. Duration مدت یا سرعت اجرای حرکت را کنترل می کند. سرعت بیش از حد بالا ممکن است باعث شود کاربر فرصت خواندن متن را نداشته باشد. از طرف دیگر، حرکت بسیار کند می تواند ریتم صفحه را مختل کند. بنابراین بهتر است سرعت را بر اساس طول عبارت و اهمیت پیام تنظیم کنید. اگر عبارت متحرک کوتاه است، سرعت بیشتری قابل استفاده است؛ اما اگر کاربر برای درک آن به زمان بیشتری نیاز دارد، باید فرصت کافی برای خواندن در نظر گرفته شود. Infinite Loop نیز برای تکرار مداوم انیمیشن استفاده می شود.

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

گام هفتم: شخصی سازی ظاهر تیتر

پس از تنظیم محتوا و حرکت، وارد تب «استایل» شوید. در این قسمت می توانید ظاهر تیتر را متناسب با طراحی سایت تنظیم کنید. مواردی مانند:

• رنگ متن ثابت
• رنگ متن متحرک
• فونت
• اندازه نوشته
• ضخامت فونت
• فاصله ها
• تراز متن
• ظاهر بخش برجسته شده

می توانند روی نتیجه نهایی تأثیر زیادی داشته باشند. اگر از فونت سفارشی در سایت استفاده می کنید، هماهنگ کردن فونت تیتر با سایر بخش های صفحه اهمیت زیادی دارد. برای آشنایی بیشتر با این موضوع می توانید راهنمای افزودن فونت به المنتور را ببینید. نکته مهم این است که قسمت متحرک نباید از نظر ظاهری آن قدر متفاوت باشد که انسجام تیتر از بین برود. هدف از تغییر رنگ یا وزن فونت، هدایت توجه است، نه ایجاد یک عنصر کاملاً جدا از عنوان.

گام هشتم: انتخاب تراز و تگ HTML مناسب

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

• راست چین
• وسط چین
• چپ چین

باشد.

در سایت های فارسی معمولاً تراز راست چین انتخاب طبیعی تری است، اما در بعضی طراحی های مدرن یا بخش های خاص صفحه، وسط چین نیز می تواند مناسب باشد. همچنین انتخاب تگ HTML عنوان را جدی بگیرید. تیتر اصلی صفحه معمولاً باید ساختار هدینگ منطقی داشته باشد و نباید صرفاً به دلیل بزرگ بودن فونت، از تگ H1 در چندین بخش استفاده شود. ساختار هدینگ باید با معماری محتوای صفحه هماهنگ باشد:

H1 → عنوان اصلی صفحه

H2 → بخش های اصلی

H3 → زیربخش های مرتبط

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

مقایسه تیتر ثابت و تیتر متحرک

قرار نیست هر صفحه ای از تیتر متحرک استفاده کند. انتخاب بین عنوان ثابت و متحرک باید بر اساس هدف بخش انجام شود.

تیتر ثابت

• خوانایی بسیار ساده
• رفتار قابل پیش بینی
• مناسب برای بیشتر عنوان های محتوایی
• نیاز کمتر به تنظیمات
• مناسب زمانی که پیام باید یک باره و مستقیم منتقل شود

تیتر متحرک

• جلب توجه بیشتر
• امکان نمایش چند عبارت مرتبط
• مناسب برای هدر و بخش های معرفی
• نیازمند تنظیم سرعت و نمایش صحیح
• در صورت استفاده بیش از حد، احتمال حواس پرتی بیشتر است

اگر هدف فقط انتقال یک پیام مشخص است، تیتر ثابت معمولاً ساختار ساده تری دارد. اگر یک جایگاه از تیتر باید چند عبارت مرتبط را نمایش دهد یا بخشی از عنوان نیاز به تأکید بصری دارد، Animated Headline می تواند انتخاب مناسبی باشد.

آیا استفاده از تیتر متحرک روی سئو تأثیر دارد؟

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

• متن تیتر برای کاربر واضح باشد.
• ساختار هدینگ منطقی باشد.
• محتوای اصلی صفحه قابل فهم باقی بماند.
• افکت باعث پنهان شدن اطلاعات مهم نشود.
• متن متحرک صرفاً برای تکرار کلمات کلیدی استفاده نشود.
• صفحه از نظر عملکرد و سرعت بیش از حد سنگین نشود.

بنابراین بهتر است Animated Headline را یک ابزار طراحی و ارائه محتوا بدانید، نه یک تکنیک مستقل برای بهبود رتبه.

آیا تیتر متحرک باعث کاهش سرعت سایت می شود؟

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

چگونه تیتر متحرک را بدون کدنویسی شخصی سازی کنیم؟

برای استفاده معمول از Animated Headline، نیازی به نوشتن کد ندارید. تنظیمات موجود در ویجت امکان کنترل بسیاری از ویژگی های محتوا، انیمیشن و ظاهر را فراهم می کند. اما اگر طراحی شما نیازمند کنترل بیشتری باشد، می توانید از CSS سفارشی کمک بگیرید.

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

آیا می توان طراحی تیتر متحرک را کاملاً سفارشی کرد؟

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

• متن را تغییر دهید.
• نوع حرکت را انتخاب کنید.
• سرعت را تنظیم کنید.
• تکرار انیمیشن را کنترل کنید.
• رنگ ها را تغییر دهید.
• فونت را تنظیم کنید.
• اندازه و ضخامت متن را تغییر دهید.
• تراز را مشخص کنید.
• ساختار HTML عنوان را تنظیم کنید.

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

جمع بندی

ساخت تیتر متحرک در وردپرس با المنتور یکی از روش هایی است که می تواند یک عنوان ساده را از نظر بصری پویاتر کند. با استفاده از ویجت Animated Headline می توانید بخش هایی از عنوان را به صورت چرخشی نمایش دهید یا یک عبارت مشخص را با حالت Highlighted برجسته کنید. فرایند کار نیز نسبتاً ساده است: پس از دانلود رایگان المنتور پرو اورجینال صفحه را با المنتور باز کنید، ویجت Animated Headline را به صفحه اضافه کنید، نوع نمایش را انتخاب کنید، متن ثابت و متحرک را وارد کنید، انیمیشن و سرعت آن را تنظیم کنید و در نهایت از بخش Style ظاهر عنوان را شخصی سازی کنید.

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

سوالات متداول درباره ساخت تیتر متحرک در وردپرس

آیا برای ایجاد تیتر متحرک در وردپرس به کدنویسی نیاز داریم؟

خیر. برای استفاده معمول از Animated Headline می توانید تنظیمات خود ویجت را در المنتور به کار ببرید و متن، نوع حرکت، سرعت و ظاهر را بدون نوشتن کد تنظیم کنید. در صورت نیاز به طراحی های خاص تر، امکان استفاده از CSS سفارشی نیز وجود دارد.

آیا Animated Headline در نسخه رایگان المنتور وجود دارد؟

بر اساس ساختاری که در این آموزش بررسی شد، ویجت Animated Headline برای استفاده از این روش به المنتور پرو نیاز دارد. اگر بین دو نسخه مردد هستید، قبل از خرید می توانید راهنمای المنتور پرو یا رایگان؟ را بررسی کنید.

آیا می توان چند کلمه را در یک تیتر به صورت چرخشی نمایش داد؟

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

آیا تیتر متحرک برای موبایل هم قابل استفاده است؟

بله، اما طراحی آن باید در موبایل نیز بررسی شود. اندازه فونت، عرض متن، طول عبارت های متحرک و سرعت تغییر می توانند روی تجربه کاربر موبایل تأثیر بگذارند.

آیا استفاده زیاد از تیترهای متحرک توصیه می شود؟

بهتر است انیمیشن هدفمند باشد. استفاده بیش از حد از حرکت می تواند تمرکز کاربر را کاهش دهد و باعث شود صفحه شلوغ به نظر برسد. تیترهای متحرک را برای بخش هایی انتخاب کنید که واقعاً به تأکید بصری نیاز دارند.

تفاوت Rotating و Highlighted در چیست؟

Rotating برای تغییر یا نمایش متناوب چند عبارت در یک بخش از تیتر کاربرد دارد، در حالی که Highlighted بیشتر برای برجسته کردن بخشی از عنوان با یک افکت بصری استفاده می شود.

آیا می توان رنگ و فونت تیتر متحرک را تغییر داد؟

بله. از بخش Style می توانید ویژگی هایی مانند رنگ، فونت، اندازه و ضخامت متن را متناسب با طراحی سایت تنظیم کنید.

اگر انیمیشن تیتر با طراحی صفحه هماهنگ نباشد چه کار کنیم؟

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