لینک دادن به ستون و سکشن در المنتور

لینک دادن به ستون و سکشن در المنتور،گاهی اوقات نیاز داریم که توی طراحی صفحات وبسایتمون به ستون ها وسکشن های المنتور لینک بدیم. مثلا ممکنه که بخوایم یک باکس(box) رو درون یک ستون توی المنتور طراحی کنیم و وقتی که کاربر روی هر قسمت از اون باکس کلیک کرد، به لینک خاصی بره. اما وقتی که توی تنظیمات مربوط به سکشن ها یا ستون ها بگردیم، قابلیت لینک دادن به ستون و سکشن در المنتور رو پیدا نمی کنیم. به صورت پیشفرض، قابلیت لینک دادن به ستون و سکشن در المنتور وجود نداره . اما می تونیم که با ترفند هایی به ستون ها و سکشن هایی که نیاز داریم لینک بدیم. توی این آموزش از سایت کنترل وب، قصد داریم که بدون هیچ افزونه ای و فقط به کمک چند خط کد جاوااسکریپت سبک و سی اس اس خیلی ساده، قابلیت لینک دادن به ستون و سکشن در المنتور رو برای صفحات سایتمون در المنتور ایجاد کنیم.

 

لینک-دادن-به-ستون-و-سکشن-در-المنتور

 

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

 

Screenshot 37

 

بعد از اینکه این المان رو به صفحه خودمون اضافه کردیم، کد هایی که در ادامه براتون قرار می دیم رو، باید توی قسمت کد های HTML این المان قرار بذیم. برای اینکار  بر روی المان کلیک راست می کنیم و  ویرایش HTML  رو میزنیم.

 

Screenshot 38

 

حالا این امکان برامون وجود داره که بتونیم قابلیت لینک دادن به سکشن ها و ستون های المنتور رو ایجاد کنیم. پس توی قدم بعدی باید با روشی به سکشن یا ستونی که میخوایم، لینک موردنظر رو بدیم. برای اینکه به سکشن مورد نظرمون لینک بدیم، بعد از اینکه سکشن رو درست کردیم، بر روی سکشن کلیک راست گرده و به قسمت ویرایش بخش (سکشن) می رویم.

 

Screenshot 39

 

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

 

Screenshot 41

 

بعد از اینکه لینک رو نوشتیم با یک علامت | در جلوی اون، آدرسی که می خواهیم سکشن موردنظرمون به اون آدرس لینک بشه رو می دیم.توجه کنیم که آدرس رو به صورت کامل بنویسیم.

 

Screenshot 42

 

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

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

 

Screenshot 43

 

با این روشی که گفتیم تونستیم که بخش( سکشن) که میخوایم رو لینک دار کنیم. برای اینکه ستون هامون رو لینک دار کنیم دقیقا از مراحل گفته شده استفاده می کنیم.

نکته اخری که توی آموزش لینک دادن به ستون و سکشن در المنتور باقی می مونه اینه که: ممکنه که بخوایم به جای اینکه لینکی که به سکشن دادیم درون همون صفحه باز بشه، درون تب جدیدی آدرس صفحه لینک داده شده رو باز کنیم. این کدی که براتون توی ادامه قرار می دیم، امکان اینکه آدرس جدید رو توی تب جدید باز کنیم رو داره. برای اینکه از این قابلیت استفاده کنیم، کافیه که توی قسمت attributes  مثل تصویر زیر، عبارت newtab رو بنویسیم.

 

Screenshot 45

کد:

<script src=”https://code.jquery.com/jquery-3.6.0.min.js”></script>
<script>

var $ = jQuery

$(document).ready(function(){

$(‘.elementor-section[link], .elementor-column[link] > .elementor-widget-wrap’).on(‘click’, function(){

var $this = $(this).hasClass(‘elementor-widget-wrap’) ? $(this).parent() : $(this),
link = $this.attr(‘link’),
newtab = $this.attr(‘newtab’),
openIn = typeof newtab !== ‘undefined’ && newtab !== false ? ‘_blank’ : ‘_self’

window.open(link, openIn)
})
})

</script>
<style>
.elementor-section[link], .elementor-column[link] > .elementor-widget-wrap {
cursor: pointer;
}
</style>

برای امتیاز به این نوشته کلیک کنید!
[کل: 8 میانگین: 4.4]

4 پاسخ

  1. آقا دمت گرم خیلی خیلی خیلی خیلی بدردم خورد مرسی پسر
    اینکه به جای تک کوتیشن و دابل کوتیشن ها علامت گیومه قرار داده شده که باعث میشه کدمون کار نکنه
    اگر دوستان استفاده کردند به جای ’ از ‘ و به جای ” از ” استفاده کنند کد کار میکنه

  2. در المنتور پرو این امکام در قسمت پیشرفته در نظر گرفته شده است.

    1. سلام دوست عزیز،
      بله در نسخه های اخیر این قابلیت به المنتورپرو اضافه شده.

  3. با سلام،
    من می‌خوام به ستون یا سکشنم داینامیک لینک بدم از این روشی که فرمودین فقط استاتیک لینک میشه داد.

دیدگاهتان را بنویسید

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

مقالات مرتبط