آموزش ایجاد Elementor Parallax Effect در وردپرس

سلام. این آموزش نحوه ایجاد افکت Parallax پلاگین Elementor در وردپرس رو نشون میده.

به طور پیش فرض گزینه ای به عنوان parallax background در پلاگین المنتور وجود نداره، اما با انجام موارد گفته شده در این آموزش، میتونین همون افکت رو ایجاد کنین.

به تب Pages > Add new در سمت چپ داشبورد برین، یا یکی از صفحات موجود رو برای ویرایش باز کنین. مطمئن شین که حتما گزینه Full width page layout رو انتخاب کردین.

روی دکمه Edit with Elementor کلیک کنین تا به ویرایش با المنتور ادامه بدین.

روی دکمه Add a new section کلیک کنین تا یک بخش جدید ایجاد کنین و طرح بندی one column section رو انتخاب کنین.

روی نماد Edit Section کلیک کنین و به تب Style settings برین.

نوع پس زمینه Classic رو انتخاب کنین و تصویری رو برای استفاده از اون به عنوان پس زمینه بخش آپلود کنین، گزینه Fixed رو در لیست کشویی پیوست و Cover رو در Size list انتخاب کنین.

ماژول های محتوایی رو که می خواهین در بخش قرار بدین تا محتوا نمایش داده بشه. اگر می خواهین ارتفاع بخش رو افزایش بدین – میتونین به راحتی لایه های بالا و پایین ماژول رو در بلاک Advanced > Padding ماژولتون اضافه کنین. بعداز اتمام کار روی دکمه Save کلیک کنین.

در مرحله بعد باید یک قطعه کد اضافه کنین. میتونین از پلاگین Code snippets برای این بخش استفاده کنین. به Plugins/ Add new برین و پلاگین Code Snippets رو جستجو کنین. پلاگین رو نصب و فعال کنین.

پست پیشنهادی : Gravatar چیست و چرا باید از اون استفاده کنیم؟

به Snippets > Add new برین و کد زیر رو در code area قرار بدین:

function jquery_parallax() {
         
?>
<script language="JavaScript" type="text/javascript">
 
 
;(function($) {
 
'use strict'
 
var testMobile;
var isMobile = {
Android: function() {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
 
var parallax = function() {
testMobile = isMobile.any();
if (testMobile == null) {
$(".parallax").parallax("50%", 0.3);
}
};
 
// Dom Ready
$(function() {
parallax();
});
})(jQuery);
 
/*
jQuery Parallax 1.1.3
Author: Ian Lunn
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/
 
Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/
!function(n){var t=n(window),e=t.height();t.resize(function(){e=t.height()}),n.fn.parallax=function(o,r,i){function u(){var i=t.scrollTop();l.each(function(t,u){var l=n(u),f=l.offset().top,s=a(l);i>f+s||f>i+e||l.css("backgroundPosition",o+" "+Math.round((l.data("firstTop")-i)*r)+"px")})}var a,l=n(this);l.each(function(t,e){$element=n(e),$element.data("firstTop",$element.offset().top)}),a=i?function(n){return n.outerHeight(!0)}:function(n){return n.height()},(arguments.length<1||null===o)&&(o="50%"),(arguments.length<2||null===r)&&(r=.1),(arguments.length<3||null===i)&&(i=!0),t.bind("scroll",u).resize(u),u()}}(jQuery);
 
</script>
<?php
 
}
 
if (!(is_admin())) {
wp_enqueue_script('jquery');
add_action('wp_head', 'jquery_parallax');
}

function jquery_parallax() {

;(function($) {

'use strict'

var testMobile;

var isMobile = {

Android: function() {

return navigator.userAgent.match(/Android/i);

BlackBerry: function() {

return navigator.userAgent.match(/BlackBerry/i);

iOS: function() {

return navigator.userAgent.match(/iPhone|iPad|iPod/i);

Opera: function() {

return navigator.userAgent.match(/Opera Mini/i);

Windows: function() {

return navigator.userAgent.match(/IEMobile/i);

any: function() {

return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());

}

};

var parallax = function() {

testMobile = isMobile.any();

if (testMobile == null) {

$(".parallax").parallax("50%", 0.3);

}

};

// Dom Ready

$(function() {

parallax();

});

})(jQuery);

jQuery Parallax 1.1.3

Author: Ian Lunn

Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

Dual licensed under the MIT and GPL licenses:

http://www.opensource.org/licenses/mit-license.php

http://www.gnu.org/licenses/gpl.html

</script>

<?php

}

if (!(is_admin())) {

wp_enqueue_script('jquery');

add_action('wp_head', 'jquery_parallax');

}

پست پیشنهادی : چارچوب فعالیت و نظارت بر وب سایت های متمرکز کننده پرداخت کسب وکارهای اینترنتی

روی دکمه Save Changes and Activate کلیک کنین.

حالا باید تنظیمات بخشی رو که از طریق المنتور اضافه کردین باز کنین، تب Advanced رو باز کنین و کلاس parallax رو در قسمت CSS Classes وارد کنین.

تغییرات رو ذخیره کنین. حالا میتونین به صفحه ای که ایجاد کردین برین و افکت parallax رو ببینین.

آموزش ایجاد Elementor Parallax Effect در وردپرس

شبنم داوودی زاده 525