Divi Sayfanıza Tarz ve Ters İmleç Nasıl Eklenir

Web sitenizdeki ziyaretçilerle etkileşim kurmanın en hızlı yollarından biri imleçleridir. Genelde her şey burada başlar. Masaüstünde kullanıcı etkileşimi neredeyse tamamen ziyaretçilerin sayfalarınızda gezinmek için imleçlerini kullanma biçimine bağlıdır. Ayrıca, ister fareyle üzerine gelme efekti isterse tıklama olsun, olayları tetiklemelerine izin veren tek şeydir. Bu nedenle, imleci belirli bir hedef göz önünde bulundurarak özelleştiren bir sürü web sitesiyle karşılaşacaksınız. Örneğin, bir harekete geçirici mesajı vurgulamak istiyorsanız imlecinizi şekillendirmek yararlıdır. Bugün size bunu Divi'de nasıl yapacağınızı göstereceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Düzeni ÜCRETSİZ İndirin

Ellerinizi ücretsiz düzene koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

1. Yeni Sayfa Oluştur/Mevcut Birini Aç

Yeni Sayfa Oluştur veya Mevcut Birini Aç

Yeni bir sayfa oluşturarak veya mevcut bir sayfayı açarak başlayın.

Seçtiğiniz Düzeni Yükleyin

Bu eğitimin özüne odaklanmak için Bisiklet Tamir Düzeni Paketini kullanacağız, ancak istediğiniz başka bir düzeni kullanmaktan çekinmeyin.

Sayfanın Altına Yeni Bölüm Ekle

Düzeniniz yüklendikten sonra sayfanızın en altına gidin ve yeni bir bölüm ekleyin. İmlecimizi oluşturmak için bu bölümü kullanacağız.

aralık

Özel bir imleç oluşturmak için eğitimin ilerleyen kısımlarında bir Metin Modülü ekleyeceğiz. Bu modül bölümün içine yerleştirilecek, ancak asıl bölüm konteynerinin tasarımımızda görünmesini istemiyoruz. Bölümün görünmesini önlemek için, boşluk ayarlarındaki varsayılan üst ve alt dolguyu kaldıracağız.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme bir satır ekleyerek devam edin:

boyutlandırma

Henüz modül eklemeden, satır ayarlarını açın ve boyutlandırma ayarlarındaki tüm özel oluk genişliğini kaldırın.

• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1

aralık

Tüm varsayılan üst ve alt dolguyu da kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Metin Modülü Ekle (İmleç)

İçerik Kutusunu Boş Bırak

Daha sonra imleç olarak kullanacağımız bir Metin Modülü ekleme zamanı! İçerik kutusunu boş bırakın.

boyutlandırma

Tasarım sekmesine geçin ve farklı ekran boyutlarında özel bir genişlik ve yükseklik kullanarak modülü şekillendirin:

• Genişlik:
  • Masaüstü: 100 piksel
  • Tablet: 60 piksel
  • Telefon: 40 piksel
• Boy uzunluğu:
  • Masaüstü: 100 piksel
  • Tablet: 60 piksel
  • Telefon: 40 piksel

Sınır

İmleci bir daireye dönüştürmek için, bu yazının önizlemesinde fark edebileceğiniz gibi, yuvarlatılmış köşeler ve bir kenarlık kullanacağız.

• Tüm Kornerler: %100
• Kenar Genişliği: 3px
• Kenar Rengi: #ffffff

Karışım Modu

Bu gönderinin ön izlemesinde, özellikle bir Düğme Modülünün üzerine gelindiğinde, imleç üzerinde tersine çevrilmiş bir etki fark edebilirsiniz. Bu efekti elde etmek için Metin Modülümüz için bir karışım modu kullanacağız.

• Karışım Modu: Fark

Ana Eleman CSS

Aşağıdaki CSS kod satırlarını modülün ana öğesine ekleyerek, modülü ileride imleç olarak kullanmak için hazırlamaya yardımcı olacağız:

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

Konum

Modül için de sabit bir konum kullanacağız.

• Pozisyon: Sabit
• Konum: Sol Üst
• Z İndeksi: 2

CSS Sınıfı

Ve gelişmiş sekmesinde özel bir CSS sınıfı atayarak modül ayarlarını tamamlayacağız.

• CSS Sınıfı: imleç

2. İşlevsellik Ekleyin

İmleç Metin Modülünün Altına Kod Modülü Ekle

Artık Metin Modülü imlecini yerleştirdiğimize göre, işlevselliğe odaklanma zamanı! Yeni bölümünüzün imleç Metin Modülünün hemen altına bir Kod Modülü ekleyin.

Stil ve Komut Dosyası Etiketleri Ekle

Biraz CSS ve JQuery Kodunu birleştireceğiz, bu yüzden devam edin ve Kod Modülünüze stil ve komut dosyası etiketleri ekleyin.

JQuery Kod Açma

Ardından, aşağıdaki JQuery kodu açılış satırlarını komut dosyası etiketleri arasına kopyalayıp yapıştırın:

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

İmleç Metin Modülünü Yeniden Konumlandır

Artık Kod Modülümüzün temeli oluşturulduğuna göre adım adım ilerleyeceğiz. Yapacağımız ilk şey oluşturmuş olduğumuz Metin Modülünü builder'ın iç içeriğinden sonra yerleştirmektir. Bu, imleci sayfa genelinde kullanmamıza izin verecektir.

$('.cursor').insertAfter('.et_builder_inner_content');

Sayfanın Varsayılan İmlecini Kaldır

Ardından, stil etiketleri arasına yerleştireceğimiz bazı özel CSS kodlarını kullanarak sayfanın varsayılan imlecini kaldıracağız.

body {
cursor: none;
}

İmleç Metin Modülünü İmleç Olarak Ayarla

Ardından, aşağıdaki JQuery kod satırlarını kullanarak imlecin ziyaretçi hareketlerini izlemesine izin vereceğiz:

$(window).mousemove(function(e){
var cursor = $('.cursor');
$('.cursor').css({
top: e.clientY - cursor.height() / 2,
left: e.clientX - cursor.width() / 2
});
});

Belirli Bir Modülün Üzerinde Gezinirken Efekti Değiştir

CSS Sınıfını Arttır Ekle

Bu gönderinin önizlemesinde fark edebileceğiniz gibi, bir Düğme Modülü üzerine gelindiğinde imleç stilleri değişir. Bunu başarmak için stil etiketlerimiz arasına yeni bir CSS Sınıfı ekleyeceğiz.

.increase-size {
transform: scale(5);
background-color: white;
}

Tüm Düğme Modülleri

Bazı JQuery kodlarını kullanarak bu CSS sınıfını değiştireceğiz. Aşağıdaki kod, Divi sayfanızdaki tüm Düğme Modüllerini tek tek hedefler.

$('.et_pb_button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

Belirli Bir Düğme Modülü

Efektin özellikle bir modüle uygulanmasını istiyorsanız, farklı bir yaklaşım gereklidir. İlk olarak, efekti uygulamak istediğiniz Düğme Modülünü açın ve özel bir CSS sınıfı ekleyin.

• CSS Sınıfı: imleç düğmesi

Ardından, önceki adımda kullandığınız koddaki CSS sınıfını değiştirin. Bu kadar!

$('.cursor-button').hover(function(){
$('.cursor').toggleClass('increase-size');
});

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi sayfanız için nasıl özel bir imleç oluşturacağınızı gösterdik. Ayrıca, birisi sayfanızda bir harekete geçirici mesaj üzerine geldiğinde fareyle üzerine gelme efektini tetiklemek için bu özel imleci nasıl kullanacağınızı da gösterdik. Özel bir imleç oluşturma yaklaşımına sahip olduğunuzda, herhangi bir tasarım veya efekt yaratabileceksiniz! JSON dosyasını da ücretsiz olarak indirebildiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.