ساخت لوگوی تغییر شکل در هنگام هاور موس در المنتور

logo anim elementor min

فهرست مطالب

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

شروع آموزش ساخت لوگوی متحرک در المنتور

لوگوی تغییر شکل
لوگوی تغییر شکل

ابزارهای مورد نیاز :

  1. افزونه المنتور رایگان
  2. المنتور پرو رایگان (دلخواه)

مرحله 1 : در اولین قدم و مرحله باید یک سکشن یا بخش در المنتور ایجاد بکنیم، برای این کار در صفحه ای که با المنتور ویرایش کردید، روی آیکون + در صفحه کلیک کنید تا یک سکشن ایجاد شود.

لوگو در المنتور
لوگو در المنتور

مرحله 2 : بعد از این که سکشن رو ایجاد کردید باید، یک ردیف 2 ستونه ایجاد بکنید. میتوانید هانند تصویر زیر عمل کنید.

ایجاد ستون در المنتور
ایجاد ستون در المنتور

مرحله 3 : ابزارک “تصویر” رو در ستون های ایجاد شده درگ کنید.

ابزارک تصویر
ابزارک تصویر

ما در این آموزش ترفند هایی رو استفاده کردیم ، ما به دو تصویر نیاز داریم. تصاویر زیر همان چیزی است که من در این آموزش استفاده کردم.

لوگوی استفاده شده2
لوگوی استفاده شده2
لوگوی استفاده شده1
لوگوی استفاده شده1

مرحله 4 : در این بخش باید کدهایی css آماده رو با صفحه اضافه کنید. برای این کار روی تصویر کلیک کنید و در تب پیشرفته، روی css سفارشی کلیک کنید و کد های زیر رو در این بخش قرار دهید.

selector img:hover{
    content: url('https://wpbuilt.co/wp-content/uploads/2020/04/invision-logo-hover-new.png');
  opacity: .50;
  transition-duration: 3s;
 }

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

دقت کنید ..

در بالا ما 2 تصویر لوگو رو قرار دادیم و تصویر شماره 1 لوگو اصلی هست و تصویر شماره 2 لوگویی هست که در زمان هاور موس نمایش داده میشود و در کد بالا هم باید در خط 2 در بخش url، آدرس و مسیر تصویر 2 باید قرار داده شود.

نتیجه گیری

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

موفق باشید.

۳ دیدگاه دربارهٔ «ساخت لوگوی تغییر شکل در هنگام هاور موس در المنتور;

دیدگاهتان را بنویسید