آموزش المان Hover Box در ویژوال کامپوزر

المان Hover Box در ویژوال کامپوزر یکی از جالب ترین المان ها در افزونه وردپرسی Visual Composer می باشد. المان هوور باکس می تواند ظاهر بسیار زیبایی به صفحه مورد نظر شما اعمال نماید. در ادامه به صورت کامل این المان را توضیح می دهیم. با یکی دیگر از آموزش های از سری آموزش ویژوال کامپوزر همراه باشید.

المان Hover Box در ویژوال کامپوزر

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

اضافه نمودن المان Hover Box در ویژوال کامپوزر

برای افزودن المان Hover Box کافی است در جعبه المان های ویژوال کامپوزر المان Hover Box را انتخاب نمایید.

تنظیمات المان Hover Box در ویژوال کامپوزر

در تب عمومی تنظیمات المان Hover Box گزینه های زیر را مشاهده می نمایید.

• تصویر
• عنوان اصلی یا Primary title
• جایگاه عنوان اصلی یا Primary title alignment
• شکل
• عرض
• ترازبندی
• معکوس کردن حالت هوور یا Reverse blocks
• CSS متحرک
• آی دی و کلاس اضافی

• تصویر

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

• عنوان اصلی یا Primary title

متنی که قرار است در حالت اصلی Hover Box قرار بگیرد را در این قسمت بنویسید. این متن عنوان Hover Box می باشد. بهتر است متنی نوشته شود که بیشتر بیننده را به خود جذب نماید.

• جایگاه عنوان اصلی یا Primary title alignment

مکان قرار گیری عنوان اصلی Hover Box را تعیین می کند. Center – Right – Left – justify

• شکل

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

• عرض

عرض المان Hover Box را به صورت % تعیین کنید. عرض به عنصر والد خود بستگی دارد.

• ترازبندی

ترازبندی بلاک مورد نظر را تعیین می نماید. البته ممکن است تاثیر چندانی نداشته باشد. چون تنظیمات قالب ارجعیت دارد.

• معکوس کردن حالت هوور یا Reverse blocks

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

• CSS متحرک

یکی از انیمیشن های جذاب CSS را می توانید برای المان یا باکس خود اعمال کنید.

• آی دی و کلاس اضافی

اگر می خواهید یک استایل مخصوص به المان Hover Box اعمال کنید می توانید از این قسمت استفاده کنید.

تنظیمات تب بلاک متن المان Hover Box در ویژوال کامپوزر

تب بلاک متن شامل تنظیمات حالت Hover(هوور) المان می باشد. وقتی موس بر روی المان حرکت کند این متن که اینجا وارد می شود نشان داده خواهد شد. که شامل تنظیمات:

• عنوان هوور یا Hover Title
• محل قرار گیری عنوان هوور یا Hover title alignment
• متن هوور
• رنگ پس زمینه یا Background Color
• اضافه کردن دکمه

• عنوان هوور یا Hover Title

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

• محل قرار گیری عنوان هوور یا Hover title alignment

محل قرار گیری عنوان هوور را مشخص کنید. یکی از حالت های center – left – right – justify

• متن هوور

متنی که قرار است در حالت هوور المان نشان داده شود و در زیر عنوان نوشته شود را در این قسمت وارد کنید. همچنین می توانید عکس نیز در این حالت قرار دهید.

• رنگ پس زمینه یا Background Color

رنگ پس زمینه المان در حالت Hoveer را مشخص کنید. دوستان رنگ می تواند در زیبایی المان تاثیر زیادی داشته باشد. در انتخاب رنگ دقت کنید.

• اضافه کردن دکمه

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

چک باکس استفاده از فونت سفارشی

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

تب تنظیمات طراحی

در این تب می توانید سایر خصوصیات Border یا Margin و بک گراند را تنظیم نمایید. در جلسات قب راجب این تب صحبت شده است و نیازی نیست مجددا دوباره کاری شود.

در زیر یک نمونه آماده شده از المان Hover Box در ویژوال کامپوزر را مشاهده می نمایید.