چگونه می توان نشانگر خود را هنگام استفاده از Divi روی عنصری به یک دکمه تبدیل کرد

هنگام نمایش موارد فرود در صفحه خود، مهم است که مطمئن شوید مردم می دانند که می توانند یک مورد را انتخاب کنند و روی آن کلیک کنند. یکی از واضح ترین راه ها برای انجام این کار، گنجاندن یک دکمه است، اما اگر به دنبال یک راه تعاملی اضافی برای تشویق کلیک ها در صفحه خود هستید، از این آموزش قدردانی خواهید کرد. امروز قصد داریم به شما نشان دهیم که چگونه نشانگر خود را هنگامی که ماوس را روی یک عنصر قابل کلیک خاص مانند یک تصویر قرار می دهید به یک دکمه تبدیل کنید. این به شما انگیزه بیشتری می دهد آخرین بازدید و منجر به یک تعامل صفحه خوب می شود. همچنین می توانید فایل JSON را به صورت رایگان دانلود کنید!

برویم.

بررسی

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

دفتر

موبایل

طرح را به صورت رایگان بارگیری کنید

برای دسترسی به طرح‌بندی رایگان، ابتدا باید آن را با استفاده از دکمه زیر دانلود کنید. برای دسترسی به دانلود، باید با استفاده از فهرست پستی روزانه Divi مشترک شوید فرم زیر به‌عنوان یک مشترک جدید، هر دوشنبه بیشتر Divi Good و یک بسته Divi Layout رایگان دریافت خواهید کرد! اگر قبلاً در لیست هستید، فقط آدرس ایمیل خود را در زیر وارد کنید و روی دانلود کلیک کنید. شما "دوباره مشترک" نخواهید شد یا ایمیل های اضافی دریافت نمی کنید.

1. یک ساختار عنصر ایجاد کنید

یک بخش جدید اضافه کنید

رنگ پس زمینه

ما این آموزش را با ساخت ساختار عناصر در یک صفحه Divi شروع می کنیم. بخش جدیدی اضافه کنید و از رنگ زمینه سفید برای آن استفاده کنید.

• رنگ زمینه: #ffffff

فاصله

به برگه بخش Design بروید و تنظیمات فاصله را به صورت زیر تغییر دهید:

• بالشتک بالایی: 80px
• بالشتک پایین: 0px

یک خط جدید اضافه کنید

ساختار ستون

با استفاده از ساختار ستون زیر ، اضافه کردن یک ردیف جدید:

اندازه

بدون افزودن ماژول ، تنظیمات ردیف را باز کرده و حداکثر عرض را در تنظیمات اندازه تغییر دهید.

فاصله

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

• بالشتک بالایی: 0px
• بالشتک پایین: 0px

یک ماژول تصویر به ستون 1 اضافه کنید

بارگیری تصویر

بیایید ماژول ها را شروع کنیم ، با یک ماژول تصویر در ستون 1. تصویری را که می خواهید انتخاب کنید بارگذاری کنید.

اضافه کردن یک لینک

سپس پیوندی به ماژول تصویر اضافه کنید.

مقیاس Flyover

سپس به تب Design بروید و تنظیمات مقیاس شناور ماژول را تغییر دهید.

کلاس CSS

با استفاده از کلاس CSS زیر در برگه پیشرفته ، تنظیمات ماژول را کامل کنید:

ماژول متن # 1 را به ستون 1 اضافه کنید

محتوای H3 را اضافه کنید

بیایید به ماژول بعدی برویم، که یک ماژول متنی است محتویات H3 به انتخاب شما

تنظیمات متن H3

به برگه طراحی ماژول بروید و متناسب با آن تنظیمات متن H3 را تغییر دهید:

• عنوان 3 پلیس: بازیگر
• عنوان متن 3 رنگ متن: # 000000
• عنوان 3 اندازه متن:
  • دسک تاپ: 35 پیکسل
  • قرص: 28 پیکسل
  • تلفن: 22px
• عنوان 3 ارتفاع خط: 1,4em

فاصله

سپس یک حاشیه پایین اضافه کنید.

ماژول متن # 2 را به ستون 1 اضافه کنید

اضافه کردن محتوا

سپس یک ماژول متنی دیگر را درست زیر قبلی با علامت اضافه کنید محتویات شرح انتخاب شما

تنظیمات متن

تنظیمات متن ماژول را به شرح زیر تغییر دهید:

• قلم متن: بازیگر
• رنگ متن: # 75baff
• اندازه متن:
  • دسک تاپ: 22 پیکسل
  • قرص: 18 پیکسل
  • تلفن: 15px
• فاصله نامه متن: 0.5 پیکسل
• ارتفاع خط نامه: دوم

ماژول دکمه را به ستون 1 اضافه کنید

یک کپی اضافه کنید

آخرین و آخرین ماژول مورد نیاز در این ستون ، ماژول دکمه ای است. یک کپی به انتخاب خود اضافه کنید.

تنظیمات دکمه

به برگه طراحی ماژول بروید و تنظیمات دکمه را متناسب با آن تغییر دهید:

• از دکمه های سفارشی برای دکمه استفاده کنید: بله
• رنگ متن دکمه: # 000000
• عرض حاشیه دکمه: 0px
• شعاع مرز دکمه: 1px

• قلم دکمه: بازیگر
• نمایش نماد دکمه: بله
• نماد دکمه مکان: چپ
• فقط نماد موجود روی دکمه را نشان دهید: خیر

فاصله

مقادیر فاصله سفارشی را نیز اضافه کنید.

• حاشیه پایین: 80px
• بالشتک پایین: 20px
• بالشتک راست: 30 پیکسل

جعبه سایه

و تنظیمات ماژول را با استفاده از تنظیمات سایه جعبه زیر انجام دهید:

• موقعیت افقی سایه جعبه: 0px
• موقعیت سایه جعبه عمودی: 2px
• سایه رنگ: # 000000

حذف ستون 2

پس از اتمام ستون اول و تمام ماژول های موجود در آن ، ستون خالی دوم را از ردیف حذف کنید.

ستون 1 کلون

و ستون اول را با یک بار شبیه سازی دوباره استفاده کنید.

کل ردیف را کلون کنید

یک بار کل کل ردیف را ادامه دهید.

همه مطالب تکراری ، تصاویر و پیوندها را ویرایش کنید

سپس مطمئن شوید که همه موارد را ویرایش کنید محتویات، تصاویر و پیوندها در هر یک از ستون های تکراری.

2. مکان نما اضافه کنید

یک خط جدید به بخش اضافه کنید

ساختار ستون

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

فاصله

تنظیمات ردیف را باز کنید و تمام موارد بالشتک پیش فرض بالا و پایین را بردارید.

• بالشتک بالایی: 0px
• بالشتک پایین: 0px

ماژول متن مکان نما را به ستون ردیف جدید اضافه کنید

اضافه کردن محتوا

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

رنگ پس زمینه

سپس یک رنگ زمینه اضافه کنید.

• رنگ زمینه: # 47669b

تنظیمات متن

به تب Design بروید و متن را متناسب با آن سبک دهید:

• قلم متن: بازیگر
• ضخامت قلم متن: درشت
• سبک فونت متن: حروف بزرگ
• رنگ متن: #ffffff
• فاصله نامه متن: 2 پیکسل
• ترتیب متن: مرکز

اندازه

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

• عرض: 150px
• ارتفاع: 150px

مرز

ما با تغییر تنظیمات حاشیه این ماژول را به یک دایره تبدیل می کنیم.

جعبه سایه

ما همچنین یک سایه جعبه ظریف اضافه خواهیم کرد.

• قدرت تاری سایه جعبه: 0px
• نیروی انتشار سایه جعبه: 20px
• رنگ سایه: rgba (7,213,255,0.14،XNUMX،XNUMX،XNUMX،XNUMX)

کلاس CSS

بعد ، ماژول خود را به کلاس CSS می دهیم.

عنصر اصلی CSS

ما همچنین خطوط کد CSS را به عنصر اصلی ماژول اضافه می کنیم.

transition: all .1s linear;
pointer-events: none;

display: flex;
justify-content: center;
align-items: center;

موقعیت

و ما پارامترهای ماژول را با تغییر موقعیت در برگه پیشرفته کامل می کنیم:

• موقعیت: ثابت
• مکان: بالا سمت چپ
• شاخص Z: 2

زیر ماژول متن یک ماژول کد اضافه کنید

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

سبک و برچسب اسکریپت اضافه کنید

برچسب های سبک و اسکریپت را به ماژول کد خود اضافه کنید.

کد CSS را اضافه کنید

خطوط زیر کد CSS را بین برچسب های سبک قرار دهید:

.hide-cursor {
cursor: none;
}

.cursor {
-webkit-transition: all 0.2s ease !important;
-moz-transition: all 0.2s ease !important;
-o-transition: all 0.2s ease !important;
transition: all 0.2s ease !important;

visibility: hidden;
opacity: 0;
}

.show-cursor {
visibility: visible !important;
opacity: 1;
}

کد JQuery اضافه کنید

و از خطوط زیر کد JQuery بین برچسب های اسکریپت استفاده کنید:

jQuery(document).ready(function($){

var cursor = $('.cursor');

$('.image-cursor').mousemove(function(e){

cursor.css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
cursor.addClass('show-cursor');
$('body').addClass('hide-cursor');

});

$('.image-cursor').mouseleave(function() {

cursor.removeClass('show-cursor');
$('body').removeClass('hide-cursor');

});

});

بررسی

اکنون که همه مراحل را طی کردیم ، بیایید نگاهی نهایی به ظاهر آن در اندازه های مختلف صفحه بیندازیم.

دفتر

موبایل

آخرین افکار

در این آموزش ، ما به شما نشان دادیم که چگونه می توانید تعامل بیشتری به عناصر قابل کلیک در صفحه خود اضافه کنید. به طور خاص ، ما به شما نشان داده ایم که وقتی شخصی روی مورد مورد نظر شما حرکت می کند ، چگونه می توانید دکمه مکان نما را فعال کنید. این تعامل بیشتری به طراحی صفحه شما می بخشد و می تواند به افزایش نرخ کلیک کمک کند! همچنین می توانید فایل JSON را به صورت رایگان بارگیری کنید. اگر س anyال یا پیشنهادی دارید ، در صورت تمایل در بخش نظرات زیر نظر دهید.

اگر می خواهید درباره Divi بیشتر بدانید و Divi Giveaways بیشتری دریافت کنید ، مطمئن شوید مشترک خبرنامه ما et کانال یوتیوب بنابراین شما همیشه یکی از اولین افرادی هستید که این محتوای رایگان را می شناسید و از آن لذت خواهید برد.