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

وندا نوژن .

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

راه اول

ساده‌ترین و بی‌دردسرترین راه نصب افزونه Make Column Clickable است که این مشکل شما را در المنتور حل می‌کند. با نصب و فعال‌سازی این افزونه، یک گزینه لینک سفارشی (Custom Link) به ستون شما اضافه می‌شود.

راه دوم

اگر نخواهید از افزونه استفاده کنید، راه دیگری هم وجود دارد. فرض کنیم ستونی مشابه تبلیغ زیر طراحی کرده‌اید:

ابتدا از قسمت تنظیمات پیشرفته، یک آی‌دی یا شناسه css برای ستون موردنظر تعریف کنید (در این مثال شناسه Clickable).

حالا نوبت به این می‌رسد که یک بخش جدید ایجاد و از بین ابزارهای المنتور، ابزار HTML را به آن اضافه کنید.

الان در قسمت کد HTML، اسکریپت زیر را اضافه کنید (منتها به جای Clickable همان شناسه‌ای را قرار دهید که در مرحله قبل تعیین کرده بودید و به جای example.com هم لینک مورد نظر خود را).

document.getElementById(&quotclickable&quot).addEventListener(&quotclick&quot, function() {  .href = &quothttps://example.com&quot
}); 

الان اگر تغییرات را ذخیره یا پیش‌نمایش تغییرات صفحه خود را چک کنید، خواهید دید که محتوای ستون شما قابل کلیک شده است. تنها نکته مهم اینکه اسکریپت بالا را حتما باید پایین‌تر از ستونی که می‌خواهید قابل کلیک شود قرار دهید و این ترتیب اهمیت دارد. در غیر این صورت اسکریپت عمل نخواهد کرد (دلیل فنی‌اش فعلا بماند).

راه سوم

برای این روش، ابتدا باید به کدهای HTML ستونی که درست کرده‌اید دسترسی داشته باشید.

حالا کافی است که کدها را بین تگ‌های div زیر قرار دهید، سپس یک ستون جدید به جای قبلی بسازید و با ابزار HTML این کدهای جدید را در آن قرار دهید (فراموش نکنید که به جای Your URL آدرس صفحه موردنظر خود را قرار دهید):

<div =&quotlocation.href='YOUR-URL-HERE';&quot style=&quotcursor: pointer;&quot>
 <!-- کدهای ستون شما -->
 </div>

برای مثال اگر کدهای ستون «تخفیف» شما به این شکل باشد:

<h1> تخفیف تابستانی</h1>
<img src=&quotexample.com/discount.png&quot width=&quot100&quot height=&quot100&quot />
<h3>فقط تا آخر شهریور</h3>
<h4>این فرصت را از دست ندهید!</h4>

الان باید به این حالت تغییر کند:

<div =&quotlocation.href='YOUR-URL-HERE';&quot style=&quotcursor: pointer;&quot>
<h1> تخفیف تابستانی</h1> 
<img src=&quotexample.com/discount.png&quot width=&quot100&quot height=&quot100&quot />
 <h3>فقط تا آخر شهریور</h3>
 <h4>این فرصت را از دست ندهید!</h4>
</div>

اگر امتحان کنید، می‌بینید که ستون جدید شما قابل کلیک شده است!