Divi ile bir sonraki projeniz için nasıl canlı bir CTA parçası yapılır?
Web siteleri, şirketler veya bireyler arasında katılım sağlamak için mevcuttur ve web sitelerine gelen ziyaretçiler daha kolay ve etkili bir şekilde gerçekleşir. Web sitelerinin ziyaretçilerin hangi eylemleri almasını istediklerini göstermesinin en etkili yolu, harekete geçme davet (CTA) olarak adlandırılan şeydir. CTA’yı iyi bir tasarımla birleştirdiğinizde, ziyaretçilerinizden daha iyi bir yanıt alabilirsiniz. Bu Divi öğreticisinde, Divi ve Photoshop kullanarak yaşayan CTA bölümünü nasıl yapacağınızı göstereceğiz. Kullanılan görüntüleri ve renkleri değiştirerek bu tasarımı herhangi bir web sitesinde kullanabilirsiniz.
Sonuçlar Eğiticiye girmeden önce, sonucuna bakalım. Masaüstünde
Son Kutu Gölgesi, görüntünüze pürüzsüz bir kutu gölgesi eklemek için Box Shadow Alt Kategorisindeki ilk seçeneği seçin.
Metin Modülünü Ekleyin Geçerli metin ayarları için davet modülünü harekete geçirmek için kullanıp kullanmadığınızı veya düğme modülüyle birleştirilen iki metin modülünü seçebilirsiniz. Örneğimizi yapmak için son seçeneği seçeceğiz. İlk metin modülünü satırınızın ikinci sütununa ekleyin ve metin alt kategorisindeki metnin rengi olarak ‘karanlık’ seçin.
Başlık Metin Ayarları Ardından, başlık metninin alt kategorisini açın ve aşağıdaki değişiklikleri uygulayın: Yazı Tip Başlığı: Poppins Font Ağırlığı Başlığı: Normal Başlık Metin Boyutu: 56px
Hat yüksekliği: 1.3em
Son mesafe, metin modülünüze metnin kare görüntü modülünde doğrudan görünmesini sağlayan bazı özel marjlar eklemelisiniz:
Top:% 30
Aşağıda:% 2 Sol:% -37
Gövde metin modülü ekleyin Metin ayarları, eklediğiniz metin modülünün hemen altındadır, devam edin ve diğer metin modüllerini ekleyin. CTA bölümünüzün açıklamasını paylaşmak için bunu kullanın. Tasarım sekmesine geçin ve aşağıdaki değişiklikleri metnin alt kategorisine uygulayın: Metin Rengi: Karanlık
Metin Yazı Tipi: Poppins
Metin yazı tipi ağırlığı: normal
Hat yüksekliği metni: 2em
Bir sonraki yapıştırıcı, boyut alt kategorisini açın ve genişlik için ’83’ kullanın.
Son mesafe, vücut metin modülünüzün sol kenarına ‘-37’ ekleyin. Bu şekilde, metin modülü dikdörtgen görüntü modülündeki önceki metin modülünün hemen altında görünecektir.
Son fakat en az değil, düğme hafifletme düğmesi modülünü ekleyin, satırınızın ikinci sütununa bir düğme modülü eklemeniz gerekir. Bu düğme modülü, Tasarım sekmesindeki Sol düğmesinin düzleştirilmesini gerektirir.
Düğmeyi ayarlayın Ardından, düğme alt kategorisini açın ve düğmenizde aşağıdaki değişiklikleri uygulayın: Düğmeler için özel bir stil kullanın: evet Metin Boyutu Düğmesi: 14px Metin Renk Düğmesi: #fffffff Arka Plan Renk Düğmesi: #000000
Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 3
Mektup Mesafe Düğmesi: 1 piksel
Yazı tipi düğmesi: Poppins
Mektup Ağırlığı: Yarı Kalınlık
Yazı tipi stili: büyük harf
Son mesafe, metin modülünüze uyacak şekilde aşağıdaki alanı düğmenize uygulayın:
Sol kenar boşluğu:% -37
Üst dolgu: 12 piksel
Sağ dolgu: 24 piksel Dolgu Alt: 12 piksel
Sol dolgu: 24 piksel
Çizgi Klon Değiştir Modülü Sınır Sınır Arka Plan Akımı, sadece yaptığınız klonlama hattı, sınır görüntü modülünün arka plan rengini ‘#00DBD7’ veya diğer renklere değiştirin.
Görüntü Modülünü Değiştir aynı şekilde, iki farklı CTA oluşturmak için ikinci görüntü modülündeki görüntüyü de değiştirebilirsiniz. Tablet ve cep telefonu sürümünü yeniden yapın Bir masaüstü sürümü yaptıktan sonra geçerli sütun yapısının yeni bir satırını ekleyin, Tabletler ve cep telefonları için versiyon. Yapmanız gereken ilk şey, sizin tarafınıza bir satır bir sütun eklemektir.
Sütun 1 Arka Plan Görüntüsü Ardından, satır ayarlarını açın ve bu öğreticinin Photoshop bölümünde tabletler ve cep telefonları için oluşturduğunuz kare görüntü dosyasını sütunun arka plan görüntüsü olarak seçin. Görüntü ile birlikte aşağıdaki ayarları kullanın:
Sütun Arka Plan Görüntü Boyutu: Kapak Sütun Arka Planının Konumu Görüntü: Orta Sütun Arka Plan Görüntülerinin Tekrarlanması: Tekrar yok Sütun Arka Plan Karışımı Görüntü: Normal Sütun Rengi Sütun 1 Arka plan rengini ilk sütuna da ekleyin. Bu durumda ‘#F9D400’ kullanıyoruz.
Bir sonraki yapıştırıcı, satırınızdaki tasarım sekmesindeki boyut alt kategorisini açın, ‘Özel Talang’ı kullan’ seçeneğini etkinleştirin ve ‘1’ oluğunu kullanın.
Bu çizgi ile yapacağınız bir sonraki satır arasındaki mesafeyi korumak için mesafe, uzay alt kategorisindeki alt kenarına ’70px’ ekleyin.
Son görünürlük, bu satırı masaüstünde devre dışı bırakın.
Hattınıza eklemeniz gereken ilk modül görüntüsünün yükleme görüntü modülünü ekleyin. Yapıştırıcılar Görüntülemek istediğiniz görüntüyü seçtikten sonra, tasarım sekmesine devam edin, boyut alt kategorisini açın ve aşağıdaki ayarları kullanın: Genişlik:% 71 Modül hizalaması: merkez Mesafemiz bu görüntü modülünün kare arka plan görüntüsü ile örtüşmesini istiyor. Bunun için, görüntü modülü için aşağıdaki özel marjı kullanacağız: Yukarıda: -50px Aşağıda: 10 piksel Son kutu gölgesi, bu görüntü modülüne de birkaç kutu gölgesi uygulayacağız. Varsayılan değerde herhangi bir değişiklik yapmadan satırdaki ilk seçeneği kullanacağız.
Klon Metin Modülü ve Masaüstü Sürüm Modülü Metin Boyutu ve Metin Yönlendirmesini Değiştir Metin Modülü Klonlama Başlığı Klonlama Modülü Metin Modülü ve Masaüstü Secte Modülü ve oluşturulduğunuz resmin modülünün hemen altına yerleştirin. Tablet ve cep telefonu ekran boyutlarına uyacak bazı ek ayarlar yapmanız gerekir. İlk metin modülünün başlığının metin alt kategorisinde yapmanız gereken ilk değişiklik aşağıdaki gibidir:
Hizalama Metin Başlığı: Orta Başlık Metin Boyutu: 36px
Başlık Metin Modülü Alanını Sil Metin modülünün başlığını düzenlerken, boşluk alt kategorisini açın ve tüm özel marjları silin.
Bir sonraki gövde metin modülünün yönünü değiştirin, gövde metin modülünü açın ve metin yönünü metin alt kategorisinde ‘merkeze’ değiştirin. Gövde Metin Modülü Alt Kategori Alt Kategori Modülü Boyutunun Boyutunu Değiştir Bu metin ayrıca birkaç değişiklik gerektirir: Genişlik:% 62
Modül hizalaması: merkez
Son İçeriğin spasi modülü metin modülünü değiştirin, gerekli alan alt kategorisindeki tek değer, alt kenar için ’50px’tir. Modül Modülü Modül Modülü Değiştir düğmesi, değiştirmemiz gereken son modüldür. Yapmanız gereken ilk şey, düğme hizalamasını bir ‘merkeze’ değiştirmektir. Modül düğmesinin aralığını değiştirin, sonra ‘150px’in altındaki kenar boşluğunun özel kenar boşlukları için kullandığınız tek değer olduğundan emin olun. Görüntü Modülünü Değiştirme Tabletlere ve cep telefonlarına özgü iki davetiye yapmak için görüntü modülünüzdeki görüntüyü değiştirin.
Tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım.Masaüstünde
Tablette Telefonda Bu öğreticinin son zihni, varsayılan Divi ve Photoshop seçeneklerini birleştirerek CTA’nın canlı bir bölümünü nasıl oluşturacağını gösterir.Herhangi bir web sitesi için bu öğreticide yeniden oluşturulan CTA bölümünü kullanabilirsiniz.Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
