جستجو برای:
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
 
کنترل وب
دسترسی سریع
  • طراحی سایت
  • المنتور
  • وردپرس
  • ووکامرس
0

ورود و ثبت نام

  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

بلاگ

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

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

https://ctrlweb.ir/wp-content/uploads/2022/06/لینک-دادن-به-ستون-و-سکشن-در-المنتور.mp4

لینک دادن به ستون و سکشن در المنتور،گاهی اوقات نیاز داریم که توی طراحی صفحات وبسایتمون به ستون ها وسکشن های المنتور لینک بدیم. مثلا ممکنه که بخوایم یک باکس(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>

برای امتیاز به این نوشته کلیک کنید!
[کل: 5 میانگین: 4.2]
اشتراک گذاری:
در تلگرام
کانال ما را دنبال کنید!
در اینستاگرام
ما را دنبال کنید!
مطالب زیر را حتما بخوانید
  • لیست قیمت در المنتور - کنترل وب
    لیست قیمت در المنتور

    12 بازدید

  • z ایندکس در المنتور | کنترل وب
    z ایندکس در المنتور

    14 بازدید

  • تغییر عرض سکشن در المنتور-کنترل وب
    تغییر عرض سکشن در المنتور

    22 بازدید

  • ساخت خط عمودی در المنتور-کنترل وب
    ساخت خط عمودی در المنتور

    32 بازدید

  • ماسک در المنتور-کنترل وب
    ماسک (Mask) در المنتور

    34 بازدید

  • نصب وردپرس روی لوکال هاست (زمپ) - کنترل وب
    نصب وردپرس روی لوکال هاست (زمپ)

    48 بازدید

1 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

  • محمد گفت:
    1401/07/28 در 8:04 ق.ظ

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

    پاسخ

دیدگاهتان را بنویسید لغو پاسخ

جستجو برای:
دسته‌ها
  • آموزش المنتور
  • آموزش وردپرس
  • مقالات
  • ویدئو
نوشته‌های تازه
  • لیست قیمت در المنتور
  • z ایندکس در المنتور
  • تغییر عرض سکشن در المنتور
  • ساخت خط عمودی در المنتور
  • ماسک (Mask) در المنتور
لوگو کنترل وب

کنترل وب

مرجع آموزش هنر طراحی سایت

کنترل وب

مرجع آموزش هنر طراحی سایت

ما از سال 1398 در زمینه برنامه نویسی و طراحی سایت شروع به کار کردیم و امروز هدف ما این است تا مخاطبین ما بتوانند از زمان تصمیم به شروع یک کسب و کار اینترنتی تا رسیدن به فروش هر آن چیزی را که در این مسیر لذت بخش نیاز دارند به کمک ما در اختیار داشته باشند.

Telegram Instagram

دسترسی سریع

  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css
  • آموزش وردپرس
  • آموزش المنتور
  • آموزش ووکامرس
  • آموزش سئو
  • تریک css

لینک های پر بازدید

  • ترفند المنتور
  • آموزش رایگان المنتور
  • دوره جامع وردپرس
  • آموزش html-css
  • مینی دوره آموزش وردپرس

جدید ترین آموزشها

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

z ایندکس در المنتور

تغییر عرض سکشن در المنتور

ساخت خط عمودی در المنتور

ماسک (Mask) در المنتور

Telegram Instagram

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

لوگو کنترل وب
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ
  • کنترل وب
    • مدرسین
    • درباره ما
    • ارتباط با ما
    • قوانین و مقررات
    • ثبت انتقادات و پیشنهادات
  • خانه
  • دوره های آموزشی
    • دوره های جامع
      • آموزش المنتور
      • آموزش ووکامرس
      • آموزش طراحی سایت
      • آموزش فیگما
      • آموزش سئو
    • دوره های فشرده
      • آموزش html
      • آموزش css
      • آموزش تولیدمحتوا
    • دوره های رایگان
      • آموزش وردپرس
  • آموزشهای رایگان
  • کنترل بلاگ

ورود

رمز عبور را فراموش کرده اید؟

هنوز عضو نشده اید؟ عضویت در سایت