آیلین وب

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

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

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 باید قرار داده شود.

نتیجه گیری

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

موفق باشید.

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

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

پیشنهاد میکنیم این مقالات را هم بخوانید
آموزش انتخاب بهترین کلمات کلیدی (Keywords) برای محتوا + فیلم آموزشی

آموزش انتخاب بهترین کلمات کلیدی

آموزش انتخاب بهترین کلمات کلیدی برای سایت و محتوا، موضوع این جلسه

هاست ویندوز و هاست لینوکس : کدوم رو انتخاب کنم؟

هاست ویندوز و هاست لینوکس

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

آموزش ساخت مگامنو در المنتور (رایگان) + 📽فیلم آموزشی

آموزش ساخت مگامنو در المنتور

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

کپی کردن صفحات المنتور به صورت کامل از یک سایت به سایت دیگر + (فیلم آموزشی)

کپی کردن صفحات المنتور به

شاید برای خیلی از شماها پیش اومده که توی طراحی صفحات با

مطالب داغ
اسکرول به بالا