Divi ile Bir Sonraki Projeniz İçin Canlı Bir CTA Bölümü Nasıl Oluşturulur

Web siteleri, şirketler veya bireyler ile web sitesi ziyaretçilerinin daha kolay ve etkili bir şekilde etkileşime geçmesini sağlamak için vardır. Bir web sitesinin, ziyaretçilerin hangi eylemi gerçekleştirmesini istediklerini belirtmesinin en etkili yolu, Harekete Geçirici Mesaj (CTA) olarak adlandırılan şeydir. CTA'ları güzel bir tasarımla birleştirdiğinizde ziyaretçilerinizden daha da iyi yanıt alabilirsiniz.

Bu Divi eğitiminde, Divi ve Photoshop kullanarak canlı bir CTA bölümünün nasıl oluşturulacağını göstereceğiz. Bu tasarımı, kullanılan görselleri ve renkleri değiştirerek herhangi bir web sitesinde kullanabilirsiniz.

Sonuç

Öğreticiye dalmadan önce, nihai sonuca hızlıca bir göz atalım.

Masaüstünde

Tablette

Telefonda

Divi ile Bir Sonraki Projeniz İçin Canlı Bir CTA Bölümü Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Photoshop ile Kenarlık Görüntüleri Oluşturun

Yeni Photoshop Dosyası Oluştur

Bu öğreticinin ilk bölümünde, Divi öğreticisi boyunca kullanacağımız iki resim oluşturacağız. Yeni bir Photoshop dosyası oluşturarak başlayın ve genişlik ve yükseklik için 800 kullanın. Ardından, Arka Plan İçeriği için 'Şeffaf'ı seçin ve oluştur düğmesine tıklayın.

Katmana Arka Plan Rengi Ekle

Ardından, boya kovası aracını kullanarak '#F3F2F2' üzerinde bulunduğunuz katmana arka plan rengi verin. Divi'deki bölümünüz için başka bir arka plan rengi kullanmayı planlıyorsanız, bunun yerine o rengi kullanın.

Katman maskesi Ekle

Az önce renk verdiğiniz katmana bir katman maskesi ekleyerek devam edin.

Konturlu Dikdörtgen Şekil Oluşturma

Ardından, shift tuşunu basılı tutarken Dikdörtgen Aracını kullanarak bir kare şekli ekleyin. Bu dikdörtgenin dolguya ve '30 piksel' siyah bir çizgiye ihtiyacı olmayacak.

Katmanı Rasterleştir

Az önce eklediğiniz dikdörtgenin şeffaf hale gelmesi gerekecek. Bu şekilde görüntüyü Divi Builder'a ekledikten sonra şeffaf kısımda hangi rengin görüneceğini seçebilirsiniz. Bu işlemi başlatmak için dikdörtgeni içeren katmanı rasterleştirin.

Rasterleştirilmiş Katmanı Seçin + Maske'ye tıklayın

Ardından, kontrol/komut + tuşlarına basın ve rasterleştirilmiş katmana tıklayın ve arka plan katmanının katman maskesini seçin.

Şekilde Siyah Fırça Aracını Kullanın

Katman maskesini seçerken, oluşturduğunuz dikdörtgen şeklin üzerinden geçmek için siyah bir fırça kullanın. Bu, şekli katman maskesinden kaldıracaktır.

Rasterleştirilmiş Katmanı Gizle

Dikdörtgenin üzerinden siyah bir fırça ile geçtiğinize göre, katman maskenizin o kısmı şeffaf hale gelecektir. Ancak elbette sonucu görmek için rasterleştirilmiş katmanı gizlemeniz gerekecek.

Maske Seç ve Sağ Kenarlık Parçasını Kaldır

Atmanız gereken bir sonraki adım, dikdörtgeninizin sağ tarafındaki saydamlığın bir kısmını kaldırmaktır. Bunu yapmak için katman maskesini seçin, kaldırmak istediğiniz kısımdaki seçim aracını kullanın ve klavyenizdeki sil tuşuna basın.

Web için Masaüstü Görüntüsünü Kaydet

Masaüstü sürümünüz artık tamamlandı. Yapmanız gereken tek şey Dosya > Dışa Aktar > Web için Kaydet'e gidip dışa aktardığınız dosyanın PNG olduğundan emin olarak kaydetmek .

Kaydedilen Görüntüyü Photoshop'a Sürükleyin

Kendimize biraz zaman kazandıracağız ve yeni kaydettiğimiz görüntüde bazı değişiklikler yapacağız, böylece onu tablet ve telefon için de kullanacağız. Photoshop'a kaydettiğiniz görüntüyü sürükleyerek başlayın.

Resmi Döndür

Ardından, Düzen > Dönüştür > Saat Yönünde 90° Döndür'e giderek görüntüyü döndürün.

Kırpmayı Artır

Resminizin kırpmasını da biraz artırın. Bu, web siteniz için bir kez kullandığınızda görüntünün ekran boyutuna göre kesilmediğinden emin olmanıza yardımcı olur.

Web için Tablet ve Telefon Resmini Kaydet

Ve bu yeni resmi de PNG olarak kaydedin.

Masaüstü Sürümünü Yeniden Oluştur

Yeni Bölüm Oluştur

Arka plan rengi

Artık Divi tasarımının çalışması için ihtiyacımız olan iki görüntüye sahip olduğumuza göre, CTA bölümünü oluşturmaya başlayabiliriz. Bunu yapmak için, arka plan rengi olarak '#f3f2f2' kullanarak yeni veya mevcut bir sayfada yeni bir standart bölüm oluşturun.

Yeni Satır Ekle

Sütun Yapısı

Yeni oluşturduğunuz bölüme iki sütunlu bir satır ekleyerek devam edin.

hizalama

Bu satır için Tasarım sekmesinin Hizalama alt kategorisinde sağa hizalamayı kullanacağız.

görünürlük

Son olarak, telefon ve tablet için satırı devre dışı bırakmamız gerekecek. Bu öğreticinin ilerleyen bölümlerinde, bunun yerine tabletlerin ve telefonların ekran boyutuna uyacak yeni bir sürüm oluşturacağız.

Kenarlık Resmi Modülü Ekle

Fotoğraf yükleniyor

Satır ayarlarınızla işiniz bittiğinde, satırınızın ilk sütununa bir Görüntü Modülü ekleyin. Bu gönderinin Photoshop bölümünde oluşturduğunuz masaüstü görüntü dosyasını yükleyin.

Arka plan rengi

Görüntü dosyasındaki saydamlık nedeniyle, Photoshop'ta değişiklik yapmak zorunda kalmadan artık dikdörtgeniniz için bir renk seçebilirsiniz. Aynı görüntüyü yeniden kullanabilir ve ona farklı bir arka plan rengi atayabilirsiniz. Bu durumda, '#f9d400' kullanıyoruz.

Resim Modülü Ekle

Fotoğraf yükleniyor

Dikdörtgeni içeren Görüntü Modülünün hemen altına başka bir Görüntü Modülü ekleyin. Tasarımın çalışması için bir dikdörtgen resim yükleyin.

aralık

Bu Görüntü Modülünün bir öncekiyle örtüşmesini sağlamak için Aralık alt kategorisi için aşağıdaki ayarları kullanın:

• Üst: -%90
• Sağ: %40
• Sol: -%40

Kutu Gölge

Son olarak, resminize ince bir kutu gölgesi eklemek için Kutu Gölgesi alt kategorisindeki ilk seçeneği seçin.

Başlık Metin Modülü Ekle

Metin Ayarları

Şimdi, bir Düğme Modülü ile birlikte bir Harekete Geçirici Mesaj Modülü mü yoksa iki Metin Modülü mü kullanacağınızı seçebilirsiniz. Örneğimizi oluşturmak için son seçeneği seçeceğiz. Satırınızın ikinci sütununa ilk Metin Modülünü ekleyin ve Metin alt kategorisinde Metin Rengi olarak 'Koyu'yu seçin.

Başlık Metni Ayarları

Ardından, Başlık Metni alt kategorisini açın ve ona aşağıdaki değişiklikleri uygulayın:

• Başlık Yazı Tipi: Poppins
• Başlık Yazı Tipi Ağırlığı: Normal
• Başlık Metni Boyutu: 56px
• Başlık Çizgisi Yüksekliği: 1.3em

aralık

Son olarak, Metin Modülünüze metnin tam kare Görüntü Modülü içinde görünmesini sağlayacak bazı özel kenar boşlukları eklemeniz gerekecek:

• Üst: %30
• Alt: %2
• Sol: -37

Gövde Metni Modülü Ekle

Metin Ayarları

Eklediğiniz Metin Modülünün hemen altında, devam edin ve başka bir Metin Modülü ekleyin. CTA bölümünüzün açıklamasını paylaşmak için bunu kullanın. Tasarım sekmesine gidin ve aşağıdaki değişiklikleri Metin alt kategorisine uygulayın:

• Metin Rengi: Koyu
• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Normal
• Metin Boyutu: 13px
• Metin Satır Yüksekliği: 2em

boyutlandırma

Ardından, Boyutlandırma alt kategorisini açın ve Genişlik için '%83'ü kullanın.

aralık

Son olarak, gövde Metin Modülünüzün sol kenarına da '-37' ekleyin. Bu şekilde Metin Modülü, dikdörtgen Görüntü Modülü içinde önceki Metin Modülünün hemen altında görünecektir.

Düğme Modülü Ekle

Düğme Hizalama

Son olarak, sıranızın ikinci sütununa bir Düğme Modülü eklemeniz gerekecek. Bu Düğme Modülü, Tasarım sekmesinde bir sol Düğme Hizalaması gerektirir.

Düğme Ayarları

Ardından, Düğme alt kategorisini açın ve aşağıdaki değişiklikleri düğmenize uygulayın:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 14px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: #000000
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 3
• Düğme Harf Aralığı: 1px
• Düğme Yazı Tipi: Poppins
• Yazı Ağırlığı: Yarı Kalın
• Yazı Tipi Stili: Büyük Harf

aralık

Son olarak, Metin Modüllerinize uyması için düğmenize aşağıdaki boşluğu uygulayın:

• Sol Kenar Boşluğu: -37
• Üst Dolgu: 12px
• Sağ Dolgu: 24px
• Alt Dolgu: 12px
• Sol Dolgu: 24px

Klon Satırı

Arka Plan Rengi Kenarlık Görüntüsü Modülünü Değiştir

Şimdi, az önce oluşturduğunuz satırı klonlayın ve kenarlık Görüntü Modülünün arka plan rengini '#00dbd7' veya başka bir renge değiştirin.

Görüntü Modülünü Değiştir

Benzer şekilde, farklı iki CTA oluşturmak için ikinci Görüntü Modülündeki görüntüyü de değiştirebilirsiniz.

Tablet ve Telefon Sürümünü Yeniden Oluştur

Yeni Satır Ekle

Sütun Yapısı

Artık masaüstü sürümünü oluşturduğumuza göre tablet ve telefon sürümüne geçelim. Yapmanız gereken ilk şey, bölümünüze tek sütunlu bir satır eklemek.

Sütun 1 Arka Plan Resmi

Ardından, satır ayarlarını açın ve bu öğreticinin Photoshop bölümünde tablet ve telefon 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üyle birlikte aşağıdaki ayarları kullanın:

• Sütun Arka Plan Resmi Boyutu: Kapak
• Sütun Arka Plan Resmi Konumu: Merkez
• Sütun Arka Plan Resmi Tekrarı: Tekrar Yok
• Sütun Arka Plan Resmi Karışımı: Normal

Sütun 1 Arka Plan Rengi

İlk sütuna da bir arka plan rengi ekleyin. Bu durumda, '#f9d400' kullanıyoruz.

boyutlandırma

Ardından, satırınızın Tasarım sekmesinde Boyutlandırma alt kategorisini açın, 'Özel Cilt Payı Genişliğini Kullan' seçeneğini etkinleştirin ve Cilt Payı Genişliğini '1' kullanın.

aralık

Bu satır ile oluşturacağınız bir sonraki satır arasında biraz boşluk bırakmak için, Boşluk alt kategorisinde alt kenar boşluğuna '70px' ekleyin.

görünürlük

Son olarak, bu satırı masaüstünde devre dışı bırakın.

Resim Modülü Ekle

Fotoğraf yükleniyor

Satırınıza eklemeniz gereken ilk modül Görüntü Modülüdür.

boyutlandırma

Çıkmasını istediğiniz görseli seçtikten sonra Tasarım sekmesine geçin, Boyutlandırma alt kategorisini açın ve bunun için aşağıdaki ayarları kullanın:

• Genişlik: %71
• Modül Hizalaması: Merkez

aralık

Bu Görüntü Modülünün kare arka plan görüntüsüyle örtüşmesini istiyoruz. Bunun için, Görüntü Modülü için aşağıdaki özel kenar boşluğunu kullanacağız:

• Üst: -50 piksel
• Alt: 10 piksel

Kutu Gölge

Son olarak, bu Görüntü Modülüne de biraz Kutu Gölge uygulayacağız. Varsayılan değerlerde herhangi bir değişiklik yapmadan satırdaki ilk seçeneği kullanacağız.

Klon Metin Modülleri ve Masaüstü Sürümünün Düğme Modülü

Başlık Metni Modülünün Metin Boyutunu ve Metin Yönünü Değiştirme

Masaüstü bölümünün Metin Modüllerini ve Düğme Modülünü klonlayın ve az önce oluşturduğunuz Görüntü Modülünün hemen altına yerleştirin. Yine de, tablet ve telefon ekran boyutuna uyması için bazı ek ayarlar yapmanız gerekecek. İlk Metin Modülünün Başlık Metni Alt Kategorisinde yapmanız gereken ilk değişiklikler şunlardır:

• Başlık Metni Hizalama: Orta
• Başlık Metni Boyutu: 36px

Başlık Metni Modülünün Boşluğunu Kaldır

Metin Modülü başlığını düzenlerken, Aralık alt kategorisini açın ve mevcut tüm özel kenar boşluklarını kaldırın.

Gövde Metni Modülünün Metin Yönünü Değiştir

Ardından, gövde Metin Modülünü açın ve Metin alt kategorisindeki Metin Yönlendirmesini 'Merkez' olarak değiştirin.

Gövde Metni Modülünün Boyutlandırmasını Değiştirin

Bu Metin Modülünün Boyutlandırma alt kategorisinin de bazı değişikliklere ihtiyacı olacaktır:

• Genişlik: %62
• Modül Hizalaması: Merkez

Gövde Metni Modülünün Aralığını Değiştirin

Son olarak, Boşluk alt kategorisinde gerekli olan tek değer, alt kenar boşluğu için '50 piksel'dir.

Düğme Modülünün Hizalamasını Değiştir

Düğme Modülü, değiştirmemiz gereken son modüldür. Yapmanız gereken ilk şey, Düğme Hizalamasını 'Merkez' olarak değiştirmek.

Düğme Modülünün Aralığını Değiştirin

Ardından, Düğme Modülünüzün özel kenar boşluğu için kullandığınız tek değerin '150 piksel' alt kenar boşluğu olduğundan emin olun.

Klon Satırı

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

Artık ilk satırı yerleştirdiğinize göre, onu klonlayabilir ve sütun 1 arka plan rengini '#00dbd7' veya tercih ettiğiniz herhangi bir renge değiştirebilirsiniz.

Görüntü Modülünü Değiştir

Tablet ve telefon için iki benzersiz harekete geçirici mesaj oluşturmak için Görüntü Modülünüzdeki görüntüyü satırınızda da değiştirin.

Sonuç

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

Masaüstünde

Tablette

Telefonda

Son düşünceler

Bu öğretici, Divi'nin yerleşik seçeneklerini ve Photoshop'u birleştirerek canlı bir CTA bölümünün nasıl oluşturulacağını gösterir. Herhangi bir web sitesi için bu eğitimde yeniden oluşturulan CTA bölümünü kullanabilirsiniz. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!