روش افزودن hover.css به ماژول Blurb در قالب Divi

در این آموزش میخواهم روش استفاده از افکت hover.css  در قالب Divi را به شما آموزش دهم . hHover.css را میتوان برای تعداد زیادی از عناصر وبسایت به کار برد . دو روش اصلی برای افزودن hover.css به وبسایت وجود دارد . روش اول افزودن کدهای سی اس اس مورد نیاز به ماژول مریوطه به صورت دستی است و در روش دوم میتوان از وبسایت هایی مانند github.com فایل های hover.css را دانلود نمود که البته این فایل ها معمولاً پولی هستند و خرید آنها برای ما ایرانیها مقدور نیست .پس به صورت زیر عمل کنید:

یک Section جدید اضافه کنید و سپس در آن یک سطر با سه ستون قرار دهید . به آدرس زیر بروید و عرض سطر را در حالت Fullwidth قرار دهید.

Row Setting-Design-Sizing:make this Row Fullwidth

مطابق با تصویر زیر میزان Column Pdding را ویرایش کنید:

افزودن Box Shadow و Border Radius به ستون

به آدرس مقابل بروید و کدهای زیر را کپی کنید :

Row Setting→Advanced→Column 1 main element

-webkit-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
-moz-box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
box-shadow: 0 19px 38px rgba(0,0,0,0.15), 0 15px 12px rgba(0,0,0,0.10);
border-radius: 6px;

افزودن ماژول تصویر

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

افزودن ماژول بلارب

ماژول بلارب را انتخاب و اضافه کنید .عنوان و متن مورد نظر را تایپ و یک آیکن مناسب برای آن در نظر بگیرید .

تنظیمات سفارشی آیکن

تنظیمات زیر را مطابق با تصویر اعمال کنید :

Icon Color: #FFFFFF
Circle Icon: YES
Circle Color: #004370
Image/Icon Placement: Top
Use Icon Font Size: YES
Icon Font Size: 45px (desktop), 40px (tablet), 37 (phone)

 

تنظیمات سفارشی هیدر

مطابق با تصویر زیر تنظیمات را اعمال کنید.

Header Font Size: 16 (desktop & tablet), 14 (phone)
Header Text Color: #۰۰۴۳۷۰
Header Line Height: 2.2em

اضافه کردن حاشیه سفارشی

Top: 25%
Right: 5%
Left: 5%
Bottom: 5%

افزودن حاشیه پایین به عنوان Blurb

به آدرس مقابل بروید و تنظیمات زیر را اعمال نمایید:

Blurb Setting→Blurb tilte :margin-bottom:3px

افزودن افکت Hover.Css به ماژولها

حال نوبت به آن رسیده که hover.css را بر روی ماژول هایی که در مراحل قبل ساختیم ، اعمال نماییم.

افزودن Css Class به ماژول Image

به آدرس Image setting→advanced→Css Class بروید و عبارت ‘hvr-ripple-out’ را در این جا تایپ کنید.

افزودن Css Class به ماژول Blurb

به آدرس Blurb setting→advanced→Css Class بروید و عبارت ‘hvr-shrink’ را در این جا تایپ کنید.

افزودن کدهای سی اس اس به تنظیمات صفحه اصلی

به صفحه ای که در حال ساخت این ماژول ها هستید بروید و از بالای سفحه “Enable Visual Builder”  را فعال کنید .در این صورت در پایین صفحه یک دایره بنفش ظاهر میشود که با کلیک روی آن آیکن های تصویر زیر را مشاهده خواهید نمود.

به قسمت تنظیمات که با فلش قرمز رنگ نشان داده شده بروید و کدهای Css زیر را در قسمت Custom Css کپی پیست کنید.

.hvr-shrink {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
}
.hvr-shrink:hover, .hvr-shrink:focus, .hvr-shrink:active {
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
 
@-webkit-keyframes hvr-ripple-out {
۱۰۰% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
@keyframes hvr-ripple-out {
۱۰۰% {
top: -12px;
right: -12px;
bottom: -12px;
left: -12px;
opacity: 0;
}
}
.hvr-ripple-out {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
}
.hvr-ripple-out:before {
content: ”;
position: absolute;
border: #004370 solid 6px;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.hvr-ripple-out:hover:before, .hvr-ripple-out:focus:before, .hvr-ripple-out:active:before {
-webkit-animation-name: hvr-ripple-out;
animation-name: hvr-ripple-out;
}

استفاده ار افکت Hover.css برای عناصر داخل ماژول Blurb

اگر به عکس توجه کنید ، زمانی که موس را بر روی عنوان نوشته ببرید یک خط آبی رنگ در زیر آن ظاهر میشود .با توجه به اینکه ماژول بلارب دارای عناصر متعددی است نمیتوانیم به سادگی از کلاس hover.css موجود در تنظیمات برای این افکت نیز استفاده کنیم . در اینجا باید یک شناسه Css به این ماژول اختصاص دهیم و کلاس Css به عنوان بلارب اختصاص داده شود .

به صورت زیر عمل میکنیم:

افزودن Css ID به ماژول Blurb

مطابق با تصویر زیر مقدار “Center” را در تب Css ID  تایپ کنید.

سپس کدهای Css زیر را مطابق با مرحله قبل در تنظیمات صفحه اصلی در قسمت Custom css کپی کنید .

#center.et_pb_blurb_0.et_pb_blurb h4 {
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
position: relative;
overflow: hidden;
}
#center.et_pb_blurb_0.et_pb_blurb h4:before {
content: “”;
position: absolute;
z-index: -1;
left: 50%;
right: 50%;
bottom: 0;
background: #004370;
height: 4px;
-webkit-transition-property: left, right;
transition-property: left, right;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
left: 0;
right: 0;
}

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

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

#center.et_pb_blurb h4 {
 -webkit-transform: perspective(1px) translateZ(0);
 transform: perspective(1px) translateZ(0);
 box-shadow: 0 0 1px transparent;
 position: relative;
 overflow: hidden;
}
#center.et_pb_blurb h4:before {
 content: “”;
 position: absolute;
 z-index: -1;
 left: 50%;
 right: 50%;
 bottom: 0;
 background: #004370;
 height: 4px;
 -webkit-transition-property: left, right;
 transition-property: left, right;
 -webkit-transition-duration: 0.3s;
 transition-duration: 0.3s;
 -webkit-transition-timing-function: ease-out;
 transition-timing-function: ease-out;
}
#center.et_pb_blurb h4:hover:before, #center.et_pb_blurb_0.et_pb_blurb h4:focus:before, #center.et_pb_blurb_0.et_pb_blurb h4:active:before {
 left: 0;
 right: 0;
}

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

امیدوارم این آموزش برای شما مفید باشد .

در صورتی که میخواهید روش  ایجاد تصاویر متحرک چرخشی در قالب دی وی را نیز بیاموزید ، این مقاله را بخوانید .