این نوشته قسمت 5 از مجموع 8 در سری آموزش کامل ویژوال کامپوزر می باشد

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

 

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

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

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

 

اضافه کردن المان Hover Box

 

  1. در صفحه ی مربوط به المان ها، المان Hover Box را انتخاب کنید.

انتخاب المان hover box

 

  1. با افزودن المان Hover box به صفحه، پنل تنظیمات مربوط به المان باز می شود.

 

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

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

Primary title (عنوان اصلی): مکان متنی است که در حالت اصلی Hover box نمایش داده می شود. به عبارت دیگر متنی که می نویسید، عنوان Hover box خواهد بود. متنی را برای این قسمت انتخاب کنید که باعث جذب بیننده شود.

Primary title aligment (جایگاه عنوان اصلی): حالت قرار گیری عنوان اصلی Hover box را مشخص می کند که می تواند یکی از حالت های Center – Right – Left – justify باشد.

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

عرض: امکان تعیین عرض المان Hover box را به صورت % فراهم می کند.

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

Reverse blocks (معکوس کردن حالت هاور): این قسمت امکان عوض کردن جای بلاک اصلی با حالت هاور را فراهم می کند.

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

آی دی المان و کلاس اضافه: با استفاده از این قسمت می توانید استایلی مخصوص به المان خود بدهید.

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

 

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

متنی که در این قسمت وارد می شود زمانی نمایش داده می شود که اشاره گر ماوس روی المان برود. این تب شامل تمامی تنظیمات حالت Hover است.

 

Hover title (عنوان هاور): محل نوشتن عنوان متن در حالت هاور است. البته طول متن نباید خیلی زیاد باشد.

Hover title alignment (محل قرار گیری عنوان هاور): حالت قرار گیری عنوان متن هاور را مشخص می کند که می تواند یکی از حالت های center – left – right – justify باشد.

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

Background color (رنگ پس زمینه): مشخص کننده رنگ پس زمینه المان در حالت هاور است. رنگ ها نقش بسیاری در زیبایی المان ها دارند پس در انتخاب آن ها دقت کنید.

اضافه کردن دکمه: این قسمت به شما امکان ایجاد یک دکمه در حالت Hover را می دهد. شما می توانید به دکمه ها لینک دهید و یا به آدرس هایی دلخواه آن ها را لینک دهید.

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

 

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

این تب امکان تنظیم دیگر خصوصیات مانند Border یا Margin و پس زمینه را به طراح می دهد.

افزونه صفحه ساز ویژوال کامپوزر WPBakery Page Builder – قسمت چهارم – ایجاد صفحهافزونه صفحه ساز ویژوال کامپوزر WPBakery Page Builder – قسمت ششم – المان سوالات متداول
پیشنهاد می کنیم برای دریافت آخرین مطالب کانال تلگرام کانی تمزرا دنبال کنید .