Divi ile Tasarımınıza Vurgulu Hareketli Köşe Düğmesi Okları Nasıl Eklenir

CTA'nızı tasarladığınız bir sayfada sunma şekliniz, ziyaretçilerinizin nasıl harekete geçtiği üzerinde büyük bir etkiye sahip olabilir. Ortada kopya bulunan düğme biçimini kullanarak en sık kullanılan yolu kullanabilirsiniz, ancak bununla da yaratıcı olabilirsiniz. Bugünün eğitiminde, Divi tasarımınıza bir harekete geçirici mesaj eklemenin yaratıcı bir yolunu göstereceğiz. Kesin olması için üzerine gelindiğinde animasyonlu köşe düğmesi oklarını ekleyeceğiz. Bir ok üzerine gelindiğinde, stilin yanında ok yönü de değişecektir. Bu tasarımın 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!

Yeniden Yaratmaya Başlayalım!

Yeni Özel Bölüm Ekle

Üzerinde çalıştığınız sayfaya yeni bir uzmanlık bölümü ekleyin. Bunun için aşağıdaki sütun yapısını seçin:

Degrade Arka Plan

Bölüm ayarlarını açın ve aşağıdaki gradyan arka planını uygulayın:

• Renk 1: #fff8f5
• Renk 2: #f9f3ef
• Gradyan Türü: Radyal
• Radyal Yön: Sol Alt
• Başlangıç ​​Konumu: %40
• Bitiş Konumu: %40

boyutlandırma

Bölümün tasarım sekmesine gidin ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

• Sütun Yüksekliklerini Eşitle: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 1
• İç Genişlik: 90%
• İç Maks Genişlik: 1580 piksel

aralık

Ardından, boşluk ayarlarına gidin ve sütun 1'e biraz sağ dolgu ekleyin.

• Sütun 1 Sağ Dolgu: %6

Metin Modülü #1'i Sütun 1'e ekleyin

H2 İçeriği Ekle

Sütun 1'deki Metin Modülü ile başlayarak modül ekleme zamanı. Seçtiğiniz bazı H2 içeriğini ekleyin.

H2 Metin Ayarları

Modülün H2 metin ayarlarını aşağıdaki gibi biçimlendirin:

• Başlık 2 Yazı Tipi: Kumbh Sans
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Rengi: #08665c
• Başlık 2 Metin Boyutu:
  • Masaüstü: 75 piksel
  • Tablet: 60 piksel
  • Telefon: 45 piksel

aralık

Sonra biraz üst ve alt kenar boşluğu ekleyin.

• Üst Kenar Boşluğu: 50px
• Alt Kenar Boşluğu: 50px

Metin Modülü #2'yi Sütun 1'e ekleyin

Açıklama İçeriği Ekle

Seçtiğiniz bazı açıklama içeriğiyle bir öncekinin altına başka bir Metin Modülü ekleyin.

Metin Ayarları

Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Kumbh Sans
• Metin Rengi: #08665c
• Metin Boyutu: 16px
• Metin Satır Yüksekliği: 1.8em

aralık

Daha küçük ekran boyutlarına da biraz alt kenar boşluğu ekleyin.

• Alt Kenar Boşluğu:
  • Masaüstü: /
  • Tablet ve Telefon: 50px

Satır 1'i Sütun 2'ye ekleyin

Sütun Yapısı

Bölümün ikinci sütununa. Orada, aşağıdaki sütun yapısını kullanarak bir ilk satır ekleyin

boyutlandırma

Henüz modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:

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

aralık

Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.

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

Sütun 1 Ayarları

Arka plan rengi

Ardından, sütun 1 ayarlarını açın ve seçtiğiniz bir arka plan rengini uygulayın.

• Arka Plan Rengi: #cccccc

aralık

Sütunun boşluk ayarlarına gidin ve aşağıdaki duyarlı değerleri kullanın:

• Üst Dolgu:
  • Masaüstü: 100 piksel
  • Tablet ve Telefon: 70px
• Sol Dolgu:
  • Masaüstü ve Tablet: %8
  • Telefon: %10
• Sağ Dolgu:
  • Masaüstü ve Tablet: %8
  • Telefon: %10

Sınır

Kenarlık ayarlarına da bazı yuvarlak köşeler ekleyin.

• Tüm Köşeler: 10px

görünürlük

Gelişmiş sekmesinde görünen taşmaları ayarlayarak sütun ayarlarını tamamlayın.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Metin Modülü #1'i Sütun 1'e ekleyin

İçerik Ekle

Sütun 1'deki ilk Metin Modülü ile başlayarak Modül ekleme zamanı. İstediğiniz içeriği ekleyin.

Metin Ayarları

Modülün metin ayarlarını değiştirin:

• Metin Yazı Tipi: Kumbh Sans
• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Rengi: #08665c
• Metin Boyutu: 30px
• Metin Satırı Yüksekliği: 1em

aralık

Bir miktar alt kenar boşluğu da uygulayın.

• Alt Kenar Boşluğu: 15px

Sütun 1'e Bölücü Modülü Ekle

görünürlük

Ardından, bir Bölücü Modül ekleyin. “Bölücüyü Göster” seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Modülün tasarım sekmesine gidin ve çizgi rengini değiştirin.

• Çizgi Rengi: #fff8f5

boyutlandırma

Boyutlandırma ayarlarını da değiştirin.

• Bölücü Ağırlığı: 2px
• Yükseklik: 2 piksel

aralık

Biraz alt kenar boşluğu da ekleyin.

• Alt Kenar Boşluğu: 50px

Metin Modülü #2'yi Sütun 1'e ekleyin

H3 İçeriği Ekle

Sütun 1'e başka bir Metin Modülü ekleyin. Seçtiğiniz bazı H3 içeriğini kullanın.

H3 Metin Ayarları

Modülün tasarım sekmesine gidin ve H3 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık 3 Yazı Tipi: Kumbh Sans
• Başlık 3 Yazı Tipi Ağırlığı: Kalın
• Başlık 3 Metin Rengi: #08665c
• Başlık 3 Metin Boyutu:
  • Masaüstü: 48 piksel
  • Tablet: 38 piksel
  • Telefon: 32 piksel

aralık

Biraz alt kenar boşluğu da kullanın.

• Alt Kenar Boşluğu: 15px

Sütun 1'e Metin Modülü #3'ü ekleyin

İçerik Ekle

Seçtiğiniz bazı açıklama içeriğiyle son Metin Modülünü sütun 1'e ekleyin.

Metin Ayarları

Metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Kumbh Sans
• Metin Rengi: #08665c
• Metin Boyutu: 16px
• Metin Satır Yüksekliği: 1.8em

aralık

Bazı alt kenar boşluklarını da ekleyin.

• Alt Kenar Boşluğu:
  • Masaüstü: 200 piksel
  • Tablet ve Telefon: 150 piksel

Sütun 1'e Blurb Modülü Ekle

İçerik Kutularını Boş Bırak

Bu sütunda ihtiyacımız olan son modül olan Blurb Modülüne geçiyoruz. İçerik kutularını boş bırakın.

Varsayılan Simge

Sonraki ok simgesini seçin.

Fareyle Üzerine Gelme Simgesi

Fareyle üzerine gelindiğinde simgeyi değiştirin.

Link ekle

Bu modül için de bir bağlantı kullanın.

Vurgulu Arka Plan Rengi

Ardından, bir vurgulu arka plan rengi ekleyin.

• Vurgulu Arka Plan Rengi: #08665c

Varsayılan Simge Ayarları

Tasarım sekmesine gidin ve simge ayarlarını aşağıdaki gibi değiştirin:

• Simge Rengi: #ffffff
• Resim/Simge Yerleşimi: Üst
• Görüntü/Simge Hizalama: Sağ
• Simge Yazı Tipi Boyutunu Kullan: Evet
• Simge Yazı Tipi Boyutu: 80px

Fareyle Üzerine Gelme Simgesi Ayarları

Fareyle üzerine gelindiğinde simge yazı tipi boyutunu değiştirin.

• Vurgulu Simge Yazı Tipi Boyutu: 40px

boyutlandırma

Ardından, boyutlandırma ayarlarına biraz genişlik ekleyin.

• Genişlik: 80 piksel

Vurgu Aralığı

Fareyle üzerine gelindiğinde üst ve sağ dolguyu değiştirin.

• Hover Üst Dolgu: 25px
• Fareyle Sağ Doldurma: 10px

Sınır

Kenarlık ayarlarına bazı yuvarlatılmış köşeler de ekleyin.

• Tüm Köşeler: 5px

Hover Ölçeği

Ardından, fareyle üzerine gelindiğinde ölçek dönüştürme seçeneğini kullanın.

• Her İkisinin Üzerine Gelin: %130

Ana Öğe ve Bulanık Resim CSS'si

Ardından, gelişmiş sekmeye gidin ve ana öğe için aşağıdaki CSS kodu satırını kullanın:

cursor: pointer;

Blurb Image css kutusu için bu satırı kullanın:

margin-bottom: 0px;

Konum

Modül ayarlarını, konum ayarlarında yeniden konumlandırarak tamamlayın:

• Pozisyon: Mutlak
• Konum: Sağ Alt

Sütun 1'i Yeniden Kullan

Sütun 2'yi Kaldır

İlk sütunu tamamladığınızda, ikinci sütun için yeniden kullanabilirsiniz. Bunu yapmak için önce ikinci sütunu kaldırın.

Klon Sütun 1

Ardından, ilkini klonlayın.

Sütun 2 Arka Plan Rengini Değiştir

Elbette, arka plan renginden başlayarak yinelenen sütunda bazı değişiklikler yapmanız gerekecek.

• 2. Sütun Arka Plan Rengi: #f0c7b1

Sütun 2'ye Dönüştürme Çevir'i ekleyin

Daha küçük ekran boyutlarına da bir dönüştürme çevirisi değeri ekliyoruz.

• Doğru:
  • Masaüstü: /
  • Tablet ve Telefon: 50px

Yinelenen İçeriği Değiştir

Tüm yinelenen içeriği değiştirdiğinizden emin olun.

Blurb Modül Bağlantısını Değiştir

Blurb Module içindeki bağlantıyı değiştirerek yinelenen sütunu tamamlayın.

Satırı Yeniden Kullan

İlk satırı ve sütunlarını tamamladıktan sonra tüm satırı kopyalayabilirsiniz.

Sütun 2'yi Kaldır

Satır ayarları içindeki ikinci sütunu silin.

Sütun Arka Plan Rengini Değiştir

Ardından, kalan sütunun arka plan rengini değiştirin.

• Sütun Arka Plan Rengi: #dfe7f2

Satıra Üst Kenar Boşluğu Ekle

Genel satır ayarlarına geri dönün ve biraz duyarlı üst kenar boşluğu ekleyin.

• Üst boşluk:
  • Masaüstü: 50 piksel
  • Tablet ve Telefon: 100 piksel

Yinelenen İçeriği Değiştir

Ardından, sütundaki tüm yinelenen içeriği değiştirin.

Blurb Modül Bağlantısını Değiştir

Blurb Module içindeki bağlantıyı değiştirerek öğreticiyi tamamlayın. Bu kadar!

Ö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, CTA'larınızla nasıl yaratıcı olunacağını gösterdik. Daha spesifik olarak, vurgulu animasyonlu köşe düğmesi oklarının nasıl ekleneceğini gösterdik. Bu yaklaşım, birden fazla CTA'lı bir bölüm tasarlarken temiz bir görünüm ve hissi korumanıza yardımcı olur. Ayrıca ekstra bir etkileşim seviyesi ekler. JSON dosyasını ü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.