بنر واکنشی یا Interactive Banner یکی دیگر از امکانات افزونه وردپرسی پلاگین codelights-shortcodes-and-widgets می‌باشد شما با استفاده از این قابلیت می‌توانید بنر واکنشی را بسازید و حالت زیبایی را برای متن و عکس به صورت واکنشی خلق کنید.

بنر واکنشی

بنر واکنشی یا Interactive Banner یکی دیگر از امکانات افزونه وردپرسی پلاگین codelights-shortcodes-and-widgets می‌باشد شما با استفاده از این قابلیت می‌توانید عکس‌هایی را به صورت واکنشی با متن ادغام کرده و حالت زیبایی را مطابق عکس‌های زیر که نمونه‌ای از توانایی‌های این افزونه می‌باشد را مشاهده کنید در ادامه آموزش با ما باشید تا به بررسی و آموزش بنر واکنشی در هر قسمت بپردازیم تا بیشتر به توانایی‌های این پلاگین پی ببریم.

سربرگ جنرال

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

سایز عکس

قسمت بعدی که خیلی هم مهم می‌باشد اندازه عکس هست که معمولاً بر اساس سایر پیش فرض قالب شما بین ۳ تا ۵ گزینه را در اختیار شما قرار می‌دهد و میتوانید عکس‌های بهینه‌تری را برای کار خود انتخاب کنید که من معمولاً برای کارهای خودم گزینه فول را انتخاب می‌کنم چون گاهی در تغییر سایز عکس کیفیت مدنظر نشان داده نمی‌شود ولی بازم انتخاب با شماست.

تایتل یا عنوان Title

شاید شما قصد داشته باشید به این عکس که در بنر واکنشی نشان داده‌اید موضوعی را مطرح کنید که مربوط به این عکس می‌باشد در قسمت تایتل می‌توانید عنوان مدنظر خودتان را وارد کنید.

توضیحات یا Description

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

لینک Link

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

نوع نمایش یا Animation Type

شما می‌توانید افکت‌های مختلفی را که حدوداً ۸ نوع نمایش مختلف است را در قسمت Animation Type انتخاب کنید تا بر اساس سلیقه شما تغییر کند این قسمت مستقیم بر روی نوع نمایش تأثیر می‌گذارد و خیلی بر روی زیبایی کار شما تأثیر می‌گذارد پس حتماً سعی کنید گزینه مناسبی را انتخاب کنید که تأثیر مثبتی بر روی کاربران سایت شما داشته باشد.

نمایش برگشتی افکت یا Animation Easing

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

سربرگ استایل

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

بک‌گراند کالر یا Background Color: شما از این قسمت می‌توانید رنگ پس زمینه مورد نظر خود را از طریق جعبه رنگی که به صورت راهنما نمایش داده می‌شود انتخاب کنید تا به عنوان رنگ بک‌گراند نمایش داده شود.

رنگ متن یا Text Color: انتخاب رنگ متن بسیار مهم می‌باشد زیرا رابطه مستقیمی با ذهن خواننده و خواندن متن دارد اگر شما از رنگ‌های فلت و ترکیب درست آنها با هم بتوانید رنگی را به عنوان رنگ پس زمینه و رنگی را به عنوان رنگ متن انتخابی داشته باشید قطعاً تأثیر زیادی را بر روی خواننده گذاشته و شانس کامل خواندن متن را بیشتر می‌کند.

تنظیمات دیگر این افزونه

Aspect Ratio نسبت ابعاد به همدیگر: این گزینه تا حدودی مربوط به دوستان گرافیست کار یا عکاس می‌باشد اما در این قسمت کمی توضیح می‌دهم که برای سایر کارها یا حتی عکس گرفتن با گوشی خود بتوانید استفاده کنید، به طور کلی عکس‌ها یا پورت‌ریت هستن (Portrite) و یا لنداسکیپ (Landscape) که به معنی عکسی که عمودی گرفته می‌شود و یا عکسی که به صورت افقی گرفته میبشود، است. شما در این قسمت نوع نمایش و نسبت نمایش را مشخص می‌کنید که قصد دارید عکس مورد نظر خود را به چه صورت نمایش دهید.

نوع قرارگیری یا Text Alignment: شما می‌توانید متن خود را به ۳ صورت راست، چپ، و وسط قرار دهید که از این قسمت می‌توانید گزینه موردنظر خود را انتخاب کنید.

اندازه یا Width: اندازه عرض عکس موردنظر خود را در این قسمت می‌توانید وارد کنید که به‌صورت پیش‌فرض بر روی ۱۰۰% قرار دارد که بهتر است روی همین گزینه باشد مگر اینکه برنامه خاصی برای آن داشته باشید.

فاصله داخلی یا Padding: پدینگ یا اندازه داخلی هم نسبت متن شما به‌ اندازه عکس تنظیم می‌کند.

استایل دهی Extra CSS class: اگر توانایی کدنویسی دارید می‌تواند کلاس کدهای نوشته‌شده خود را در این قسمت وارد نمایید تا بر روی عکس موردنظر اعمال گردد

 

 سربرگ تایپوگرافی Typography

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

Title Tag Name

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

Description Size اندازه توضیحات

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

اندازه توضیحات در موبایل Description Size for Mobiles

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