پایگاه دانش:

مقالات پیشنهادی:

نحوه ایجاد redirect از صفحه اصلی به هر URL دیگری با استفاده از PHP redirect در وردپرس

این آموزش به شما نشون میده که چطور با استفاده از PHP redirect، یک redirect از صفحه اصلی وردپرس به

رفع مشکل عدم وجود بلاک های پیکربندی پست/صفحه وردپرس

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

آموزش بومی سازی Contact form 7 در وردپرس

این آموزش نحوه ایجاد فرم تماس با زبان مدنظرتون رو با استفاده از پلاگین Contact form 7 به شما نشون

آموزش اضافه کردن تگ ها به انواع پست های سفارشی در وردپرس

این آموزش به شما نشون میده که چطور تگ ها رو به انواع پست سفارشی (مثلا Our team) در وردپرس

برگ نخست » وردپرس » آموزش ایجاد Elementor Parallax Effect در وردپرس

آموزش ایجاد 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 رو جستجو کنین. پلاگین رو نصب و فعال کنین.

به 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 رو ببینین.

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

سایر مقالات نویسنده

سبد خرید

دسته بندی محصولات

پایگاه دانش:

مقالات پیشنهادی:

نحوه ایجاد redirect از صفحه اصلی به هر URL دیگری با استفاده از PHP redirect در وردپرس

رفع مشکل عدم وجود بلاک های پیکربندی پست/صفحه وردپرس

آموزش بومی سازی Contact form 7 در وردپرس

آموزش اضافه کردن تگ ها به انواع پست های سفارشی در وردپرس

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

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

پست های مشابه:

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

هفت راهکار برای کاهش صدای برخورد پیک با سیم گیتار

لیست 8 تا از بهترین نرم افزار ساخت تیزر ویدیویی در اندروید

نظر خود را وارد کنید لغو پاسخ

013-91011024

درباره ما

ارتباط با ما:

خدمات ما

لینک های مفید