آیلین وب

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

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

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

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

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

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

How to Create Icon Only Buttons5 - ساخت لوگوی تغییر شکل در هنگام هاور موس در المنتور
لوگو در المنتور

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

Overlap Images in Elementor4 - ساخت لوگوی تغییر شکل در هنگام هاور موس در المنتور
ایجاد ستون در المنتور

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

Logo Swap Tutorial1 - ساخت لوگوی تغییر شکل در هنگام هاور موس در المنتور
ابزارک تصویر

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

Logo Swap Tutorial6 - ساخت لوگوی تغییر شکل در هنگام هاور موس در المنتور
لوگوی استفاده شده2
Logo Swap Tutorial2 - ساخت لوگوی تغییر شکل در هنگام هاور موس در المنتور
لوگوی استفاده شده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 باید قرار داده شود.

نتیجه گیری

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

موفق باشید.

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

پیشنهاد میکنیم این مقالات را هم بخوانید
قالب clinico | قالب وردپرس پزشکی و سلامت کلینیکو

قالب clinico | قالب وردپرس

امروز هم قصد معرفی یکی دیگر از قالب های دنیای وردپرس را

قالب jobera | پوسته کاریابی و استخدامی وردپرس جوبرا (رایگان)

قالب jobera | پوسته کاریابی

قالب jobera در دسته قالب های کاریابی و معرفی کار قرار دارد،

قالب GridLove – قالب خبری و مجله گریدلاو (رایگان)

قالب GridLove – قالب خبری

چرا قالب وردپرس گریدلاو GridLove ؟ قالب GridLove دارای امکانات بسیار زیادی می

افزونه Metform Pro | تنها

فرم ساز حرفه ای برای المنتور پرو افزونه Metform Pro افزونه Metform

مطالب داغ
اسکرول به بالا
طراحی انواع سایت
طراحی انواع سایت با قیمت بسیار ارزان!