آیا می خواهید تصویری را که روی یک متن حرکت می کند تغییر دهید صفحه ساز Elementor ? در این آموزش جدید، نحوه انجام آن را به شما نشان خواهیم داد.

اگر نمی دانید امروز در مورد چه چیزی می خواهیم صحبت کنیم، از شما دعوت می کنیم ویدیوی زیر را تماشا کنید:

با استفاده از صفحه ساز Elementor، یک تصویر را با ماوس روی یک متن تغییر دهید

سپس برگردیم به اینکه چرا ما اینجا هستیم.

همچنین راهنمای ما را در این زمینه کشف کنید:  نحوه ایجاد یک کارت افکت از یک نمونه کار با المنتور

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

بیایید یک بخش با 2 ستون ایجاد کنیم، سپس در پانل کناری، بیایید آن را تعریف کنیم ارتفاع سور حداقل ارتفاع، و سپس حداقل ارتفاع بیایید کلیک کنیم VH و نوار لغزنده را روی 100.

با استفاده از صفحه ساز Elementor، یک تصویر را با ماوس روی یک متن تغییر دهید

در برگه سبک بیایید آن را انتخاب کنیم نوع پس زمینه en cliquant sur کلاسیک، سپس آن را اصلاح کنید رنگ سور# F9F9F9

با استفاده از صفحه ساز Elementor، یک تصویر را با ماوس روی یک متن تغییر دهید

در برگه پیشرفته، همه را اصلاح کنید حاشیه های داخلی سور 25

اکنون عرض ستون را به تغییر می دهیم ٪۱۰۰ برای ستون سمت چپ و ٪۱۰۰ برای ستون سمت راست

با استفاده از صفحه ساز Elementor، یک تصویر را با ماوس روی یک متن تغییر دهید

در ستون سمت چپ، a را رها می کنیم ویجت ویرایشگر متن، سپس یک متن را در آن قرار دهید و آن را تغییر دهید اندازه عنوان متن در عنوان 3.

در برگه پیشرفته، به عنوان وارد کنید حاشیه های داخلی 10-25-10-30 به ترتیب برای حاشیه های داخلی بالا، راست، پایین و چپ

در بخش زمینه زبانه پیشرفته، کلیک کنید بررسی اجمالی، سپس را انتخاب کنید نوع پس زمینه سور کلاسیک، بیایید آن را وارد کنیم رنگ #DFF5FF et مدت زمان انتقال سور 0.5.

اگر ماوس را روی متن نگه داریم، این فرصت را خواهیم داشت که یک رنگ پس‌زمینه فوق‌العاده را در شناور کشف کنیم.

حالا بریم سراغ بخش مرزهایو روی آن کلیک کنید بررسی اجمالی، سپس انتخاب کنید ادامه برای نوع حاشیه et بیایید پیوند بین مرز را غیرفعال کنیم وارد شدن 4 برای حاشیه سمت چپ. بیایید رنگ را انتخاب کنیم #002FA7 و یک مدت انتقال به آن اضافه کنید 0.5

اگر یک بار دیگر ماوس را روی جعبه متن خود نگه داریم، انیمیشن برجسته تری را با حاشیه در سمت چپ می بینیم.

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

اگر یک بار دیگر ماوس را روی متن نگه داریم، انتقال بسیار نرمی را مشاهده خواهیم کرد.

دفعات بازدید: نحوه نمایش متن بالای تصویر با المنتور

بیایید این متن را دو بار کپی کنیم و متن های هر کدام را تغییر دهیم محتویات مثل این.

در ستون سمت راست، a را بکشید ویجت تصویر، و یک تصویر از کتابخانه ما درج کنید.

قرار است با رفتن به یک فضای اطراف این تصویر ایجاد کنیم تب پیشرفته از ستون و 10 – 10 – 10 – 50 را برای تمام حاشیه های داخلی بالا، راست، پایین و چپ وارد کنید.

بیایید تصویر و در تب را انتخاب کنیم پیشرفته از دومی، بیایید به بخش برویم جلوه های حرکتی سپس انیمیشن ورودی، انتخاب کنید محو شدن در

بیایید وارد بخش شویم پیشرفته از تب Advanced و چند نام کلاس را در قسمت CSS Classes اضافه کنید. پس بیایید بگیریم all-img img-1

بیایید تصویر خود را 2 بار کپی کنیم.

بیایید تصویر دوم را انتخاب کنیم و img-1 را به img-2 تغییر دهیم، سپس تصویر را به یک تصویر جدید تغییر دهیم.

همچنین ببینید: نحوه ایجاد گالری تصاویر با Elementor

برای تصویر سوم، اجازه دهید img-1 را به img-3 تغییر دهید، سپس تصویر را به یک تصویر جدید تغییر دهید.

با استفاده از صفحه ساز Elementor، یک تصویر را با ماوس روی یک متن تغییر دهید

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

selector .all-img{
    display: none;
}
selector .img-1{
    display: block;
}

(اگر این بخش را ندارید پس نسخه Pro را ندارید، اگر می خواهید ادامه دهید باید نسخه خود را ارتقا دهید).

با استفاده از صفحه ساز Elementor، یک تصویر را با ماوس روی یک متن تغییر دهید

بیایید اولین ویرایشگر متن خود را انتخاب کنیم و به تب Advanced برویم بخش صفاتبه در زمینه خواص، قطعه کد زیر را کپی و جایگذاری کنید:

data-showme|img-1

این کار را برای ویرایشگرهای متن دیگر انجام دهید در حالی که img-1 را به img-2 یا img-3 تغییر می دهید

اکنون می خواهیم یک ویجت HTML را به صفحه خود اضافه کنیم. اسکریپت زیر را کپی و پیست کنید:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').hover( function(){
        event.preventDefault();
        var showme = $(this).attr('data-showme')
        
        $('.all-img').hide()
        $('.' + showme).show()
        
    })
})
</script>
با استفاده از صفحه ساز Elementor، یک تصویر را با ماوس روی یک متن تغییر دهید

اکنون صفحه خود را ذخیره یا به روز کنید و سپس پیش نمایش آن را مشاهده کنید.

با استفاده از صفحه ساز Elementor، یک تصویر را با ماوس روی یک متن تغییر دهید

در اینجا می روید، این کار را به راحتی انجام داده اید.

اکنون Elementor Pro را دریافت کنید!

نتیجه

ایناهاش ! این برای این مقاله است که به شما نشان می دهد چگونه یک تصویر را در حالت شناور روی یک متن تغییر دهید. اگر در مورد نحوه رسیدن به آنجا نگرانی دارید، به ما اطلاع دهید نظر.

با این حال ، شما همچنین می توانید مشورت کنید منابع مااگر برای اجرای پروژه های ایجاد سایت های اینترنتی به عناصر بیشتری احتیاج دارید ، با مشورت راهنمای ما در مورد ایجاد وبلاگ وردپرس یا یکی در Divi: بهترین تم وردپرس در همه زمان ها.

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...