ویجت ویدئو (Video) در المنتور

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

چرا باید از ویدئو در سایت استفاده کنیم؟

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

آشنایی با المان ویدئو در المنتور

وقتی وارد صفحه ساز المنتور میشوید کافی است المان ویدئو را از نوار کناری بگیرید و داخل بخش دلخواه قرار دهید. به محض این کار یک ویدئوی پیش فرض نمایش داده میشود و شما میتوانید تنظیمات آن را تغییر دهید.

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

بخش محتوای ویجت ویدئو در المنتور

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

پیشنهاد مطالعه: المان دکمه در المنتور — توضیح کامل، کاربردی و آموزشی

تنظیمات نمایش ویدئو در المان Video المنتور

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

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

همچنین میتوانید گزینه نمایش کنترل ها را فعال یا غیرفعال کنید. وقتی کنترل ها فعال باشند کاربر میتواند ویدئو را متوقف کند، صدا را کم یا زیاد کند و به بخشهای مختلف برود. اگر کنترل ها غیرفعال شوند ویدئو فقط به شکلی که شما تنظیم کرده اید پخش میشود.

تنظیم تصویر بندانگشتی و پوشش المان ویدئو در المنتور

یکی از امکانات مهم المان ویدئو در المنتور تنظیم تصویر بندانگشتی است. قبل از اینکه کاربر روی دکمه پخش کلیک کند یک تصویر روی ویدئو نمایش داده می شود. شما می توانید تصویر دلخواه خودتان را انتخاب کنید تا ظاهر حرفه ای تری داشته باشد. این موضوع به ویژه برای سایتهای فروشگاهی و آموزشی اهمیت زیادی دارد چون تصویر مناسب می تواند کاربر را به تماشای ویدئو ترغیب کند.

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

پیشنهاد مطالعه: آموزش فعال سازی افزونه درگاه پرداخت ارز دیجیتال در وردپرس

بخش استایل در ویجت ویدئو المنتور

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

 توضیح نسبت ابعادی در ویجت Video المنتور

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

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

آموزش فیلترهای CSS درالمان ویدئو المنتور

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

بخش پیشرفته ویجت ویدئو (Video) در المنتور

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

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

گزینه طرح‌ بندی ویجت ویدئو در المنتور

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

آموزش موشن افکت ویجت Video در المنتور

گزینه موشن افکت به شما این قابلیت را می‌ دهد که انیمیشن‌ها و جلوه‌ های حرکتی جذاب به عناصر صفحه خود اضافه کنید تا وب‌ سایت شما پویاتر و جذاب‌ تر شود . این تنظیمات شامل دو دسته اصلی هستند: انیمیشن‌ های ورودی مانند Fade In، Slide In یا Zoom In که هنگام بارگذاری یا اسکرول کاربر به سمت عنصر فعال می‌ شوند؛ و افکت‌های اسکرول که با حرکت دادن صفحه، باعث ایجاد جلوه‌ هایی مانند حرکت پارالاکس عمودی یا افقی، شفافیت تدریجی یا مقیاس‌ پذیری می‌ شوند استفاده از موشن افکت‌ ها می‌ تواند توجه کاربر را به بخش‌های خاصی جلب کند، اما استفاده بیش از حد از آنها ممکن است باعث حواس‌ پرتی یا کاهش عملکرد وب‌ سایت شود.

بخش تبدیل در المان ویدئو  المنتور

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

تنظیم پس زمینه ویجت ویدئو وردپرس

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

بخش حاشیه در المان Video المنتور

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

 گزینه ماسک در ویجت ویدئو 

در بخش استایل ویجت ویدئوی المنتور، گزینه ماسک (Mask) یک قابلیت خلاقانه است که به شما اجازه می‌ دهد شکل ظاهری کادر ویدئو را از حالت مستطیل پیش‌ فرض خارج کنید. با استفاده از ماسک، می‌ توانید ویدئو را در اشکال مختلف هندسی مانند دایره، چند ضلعی، یا حتی اشکال سفارشی نمایش دهید. این ویژگی به طراحان سایت امکان می‌ دهد تا جلوه‌های بصری منحصر به فردی ایجاد کنند و ویدئو را به جای یک کادر ساده، درون یک شکل خاص به نمایش بگذارند، که این کار باعث جذابیت بیشتر و شکستن یکنواختی در طراحی صفحه می‌ شود.

آموزش واکنش‌ گرا در ویجت ویدئو المنتور

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

بخش ویژگی‌ها در المان Video المنتور

در بخش ویژگی‌ها (Attributes) ویجت ویدئوی المنتور که در قسمت پیشرفته قرار دارد، می‌ توانید کدهای HTML سفارشی را به عنصر ویدئو اضافه کنید. این بخش برای کاربران حرفه‌ ای‌تر طراحی شده است که می‌ خواهند از ویژگی‌ های داده‌ ای (Data Attributes) خاص برای اهداف برنامه‌ نویسی یا رد یابی استفاده کنند. به عنوان مثال، می‌ توانید یک ویژگی دلخواه اضافه کنید تا ویدئو را با استفاده از جاوا اسکریپت دستکاری کنید یا اطلاعات خاصی را برای ابزارهای تحلیلی فراهم نمایید. این قابلیت امکان سفارشی‌ سازی عمیق‌ تر رفتار ویدئو را فراتر از تنظیمات بصری و عملکردی پیش‌فرض المنتور فراهم می‌ کند.

بخش CSS سفارشی ویجت ویدئو (Video) در المنتور

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

تاثیر ویجت ویدئو بر سئو سایت

استفاده از ویدئو در سایت علاوه بر افزایش جذابیت، تاثیر زیادی روی سئو سایت دارد. گوگل به سایتهایی که محتوای چندرسانه ای دارند توجه بیشتری نشان میدهد. ویدئو باعث میشود کاربران مدت زمان بیشتری در صفحه بمانند و همین عامل یکی از سیگنالهای مثبت برای رتبه بندی است.

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

تمرین عملی با المان ویدئو المنتور

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

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

پیشنهاد مطالعه: آموزش کامل بخش تصویر در المنتور

نکات حرفه ای برای استفاده از ویدئو در المنتور

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

کلام آخر...

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