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

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

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

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

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

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

بیایید ویجت Image را به ستون سمت چپ بکشیم و تصویری را از کتابخانه خود درج کنیم.

در ستون سمت راست، a را وارد می کنیم ویجت عنوان با عنوان انتخاب بهترین ها. در برگه سبک بیایید کلیک کنیم فن چاپ و اصلاح کنید ارتفاع خط در 1.

همچنین مشاهده کنید: چگونه یک تصویر را تغییر دهیمبا Elementor روی متن حرکت کنید

بیایید در زیر ویجت عنوان، a ویجت ویرایشگر متن.

در بالای ویجت عنوان، بیایید یک ویجت جداکننده را در برگه آن قرار دهیم محتویات، بگیریم 270 برای عرض بیایید روی Text for Add element کلیک کرده و سپس Enter کنید گرایش به عنوان متن در برگه سبک، گریس را اصلاح کنید و فاصله سور 2.

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

در قسمت Text بر روی آن کلیک کنید فن چاپبیایید فونت را تغییر دهیم اندازه سور 18از گریس سور 600.

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

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

بیایید به برگه برویم سبک از دکمه و در شعاع مرزی، کلیک کنید % و تصرف کنید 50 برای همه شعاع های محدود و در حاشیه های داخلی، بگیریم 20.

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

سپس بر روی Tab کلیک کنید پیشرفته دکمه ما، سپس روشن است تثبیت موقعیت و عرض بیایید انتخاب کنیم درون خطی (خودکار). در بخش پیشرفته ازبرگه پیشرفته، بگیریم 10 برای حاشیه سمت راست.

بیایید این دکمه را 4 بار کپی کنیم و رنگ این دکمه ها را تغییر دهیم.

سپس، بیایید ویجت Image خود را 4 بار کپی کنیم، سپس تصاویر آنها را تغییر دهیم.

در L 'تب پیشرفته، بگیریم همه تصاویر در مزرعه کلاس های CSS از هر یک از تصاویر ما

سپس در میدان شناسه CSS عکس قرمز را برای تصویر با هایلایت قرمز، تصویر سبز را برای تصویر با هایلایت سبز، و تصویر قهوه ای را برای تصویر با هایلایت قهوه ای و غیره وارد کنید.

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

.all-images{
    display: none;
}
#red-image{
    display: block;
}

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

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
    $('[data-showme]').on('click', function(){
        var showme = $(this).attr('data-showme')
        
        $('.all-images').hide()
        $('#' + showme).show()
    })
})
</script>

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

data-showme|IMAGE-ID-NAME

بیایید قسمت IMAGE-ID-NAME را با شناسه دکمه های شما تغییر دهیم، این شناسه های تصویر قرمز، تصویر سبز و تصویر آبی و غیره هستند.

بنابراین برای هر دکمه، اجازه دهید کد IMAGE-ID-NAME را به رنگ دکمه مناسب تغییر دهیم

کار خود را به‌روزرسانی کنید و در حالت دسک‌تاپ، تبلت و گوشی هوشمند، هنگام تست دکمه‌های خود، پیش‌نمایش آن را مشاهده کنید.

در حالت تلفن هوشمند، به عنوان مثال، می توانید دکمه ها را در مرکز تراز کنید، حاشیه ها را کاهش دهید و موارد دیگر.

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

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

نتیجه

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

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

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

...