لینک دادن به ستون و سکشن در المنتور
لینک دادن به ستون و سکشن در المنتور،گاهی اوقات نیاز داریم که توی طراحی صفحات وبسایتمون به ستون ها وسکشن های المنتور لینک بدیم. مثلا ممکنه که بخوایم یک باکس(box) رو درون یک ستون توی المنتور طراحی کنیم و وقتی که کاربر روی هر قسمت از اون باکس کلیک کرد، به لینک خاصی بره. اما وقتی که توی تنظیمات مربوط به سکشن ها یا ستون ها بگردیم، قابلیت لینک دادن به ستون و سکشن در المنتور رو پیدا نمی کنیم. به صورت پیشفرض، قابلیت لینک دادن به ستون و سکشن در المنتور وجود نداره . اما می تونیم که با ترفند هایی به ستون ها و سکشن هایی که نیاز داریم لینک بدیم. توی این آموزش از سایت کنترل وب، قصد داریم که بدون هیچ افزونه ای و فقط به کمک چند خط کد جاوااسکریپت سبک و سی اس اس خیلی ساده، قابلیت لینک دادن به ستون و سکشن در المنتور رو برای صفحات سایتمون در المنتور ایجاد کنیم.
برای لینک دادن به ستون و سکشن در المنتور،اولین قدم اینه که محلی رو درون صفحه ایجاد کنیم تا بتونیم کد های جاوااسکریپتمون رو قرار بدیم. برای اینکار، باید درون صفحه ای که قصد داریم تا در اون قابلیت لینک دار شدن ستون و سکشن رو به وجود بیاریم، این محل رو با استفاده از المان HTML به وجود بیاریم. برای اینکار از نوار جست و جوی المان های اسم المان یعنی HTML رو سرچ می کنیم و المان HTML رو توی جایگاه دلخواهی از صفحمون میندازیم.
بعد از اینکه این المان رو به صفحه خودمون اضافه کردیم، کد هایی که در ادامه براتون قرار می دیم رو، باید توی قسمت کد های HTML این المان قرار بذیم. برای اینکار بر روی المان کلیک راست می کنیم و ویرایش HTML رو میزنیم.
حالا این امکان برامون وجود داره که بتونیم قابلیت لینک دادن به سکشن ها و ستون های المنتور رو ایجاد کنیم. پس توی قدم بعدی باید با روشی به سکشن یا ستونی که میخوایم، لینک موردنظر رو بدیم. برای اینکه به سکشن مورد نظرمون لینک بدیم، بعد از اینکه سکشن رو درست کردیم، بر روی سکشن کلیک راست گرده و به قسمت ویرایش بخش (سکشن) می رویم.
توی قسمت ویرایش سکشن ،به قسمت پیشرفته سکشن می ریم. در این قسمت، قسمتی به نام attributes وجود داره. توی این قسمت می تونین attribute های مربوط به این قسمت رو مشخص کنیم تا کدی که توی صفحه قرار دادیم به درستی عمل کنه. برا اینکار توی این قسمت link رو می نویسیم.
بعد از اینکه لینک رو نوشتیم با یک علامت | در جلوی اون، آدرسی که می خواهیم سکشن موردنظرمون به اون آدرس لینک بشه رو می دیم.توجه کنیم که آدرس رو به صورت کامل بنویسیم.
هورااا! سکشن موردنظر به آدرسی که میخواستیم لینک شده و حالا دیگه صفحه سایتمون قابلیت لینک دادن به ستون و سکشن در المنتور رو داره. برای اینکه بتونیم این لینک شدن رو مشاهد کنیم، باید توی آدرس صفحمون نتیجه رو مشاهده کنیم و توی صفحه طراحی المنتور این قابلیت قابل مشاهده نیستش.
برای اینکار روی بروزرسانی بزنین و به آدرس صفحتون برید تا بتونین نتیجه رو ببینین. اگر مراحل طراحیتون هنوز باقی مونده، میتونین با کلیک کردن بر روی پیش نمایش تغییرات، پیش نمایشی از تغییرات اعمالی رو صفحتون ببنین. توی این صفحه تغییری که اعمال کردید فعال شده و سکشنی که ساختین لینک دار شده.
با این روشی که گفتیم تونستیم که بخش( سکشن) که میخوایم رو لینک دار کنیم. برای اینکه ستون هامون رو لینک دار کنیم دقیقا از مراحل گفته شده استفاده می کنیم.
نکته اخری که توی آموزش لینک دادن به ستون و سکشن در المنتور باقی می مونه اینه که: ممکنه که بخوایم به جای اینکه لینکی که به سکشن دادیم درون همون صفحه باز بشه، درون تب جدیدی آدرس صفحه لینک داده شده رو باز کنیم. این کدی که براتون توی ادامه قرار می دیم، امکان اینکه آدرس جدید رو توی تب جدید باز کنیم رو داره. برای اینکه از این قابلیت استفاده کنیم، کافیه که توی قسمت attributes مثل تصویر زیر، عبارت newtab رو بنویسیم.
کد:
<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>
1 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
آقا دمت گرم خیلی خیلی خیلی خیلی بدردم خورد مرسی پسر
اینکه به جای تک کوتیشن و دابل کوتیشن ها علامت گیومه قرار داده شده که باعث میشه کدمون کار نکنه
اگر دوستان استفاده کردند به جای ’ از ‘ و به جای ” از ” استفاده کنند کد کار میکنه