Divi’de etkili bir CTA ile bir konuk konuşmacı bölümü nasıl tasarlanır
İster bir podcastiniz olsun veya bir WordCamp (veya herhangi bir hoparlör etkinliği) tutun, web siteniz için bir konuk hoparlör bölümüne sahip olmak her zaman iyidir. Teslimler gibi, konuk konuşmacıları sergilemek, değerleri teşvik etmenin ve kitlenizle güvenilirlik oluşturmanın etkili bir yoludur. Konuk konuşmacı bölümü aynı zamanda bir sonraki etkinliğiniz veya bölümünüz için bazı yeni adaylar çizmek için önemli bir yerdir. Bu öğretici, hoparlörleri sadece zarif bir şekilde görüntülemekle kalmayıp aynı zamanda yeni konuşmacıların etkili bir eylem davetine başvurmaya teşvik eden bir konuk konuşmacı bölümünün nasıl tasarlanacağını gösterir.
Ama girmeden önce, son tasarıma bir bakış. Gizlice göz atma
Konuk hoparlör
Ardından, bölücü modülünü doğrudan metin modülünün altına ekleyin. Şimdi konuk konuşmacılarımızı karşılamak için dört sütun yapısına sahip yeni bir satır ekleyeceğiz. İlk satır sütununa bir kişinin modülünü ekleyin. İçerik modülü kişiyi aşağıdaki gibi güncelleyin: Ad: [boş] URL Facebook Profili: [Şimdilik “#” URL Twitter Profili: [Şimdilik “#” Ekle LinkedIn Profil URL: [Şimdilik “#” ekle ” Açıklama, aşağıdakileri ekleyin:James Smith
Not: İK etiketi, 90 piksel genişliğe sahip ve solda şamandıra ile yapılacak birkaç çizgiye sahip bir bölme çizgisi üretir. Soyadın etrafına sarılmış güçlü etiketler onu benzersiz bir tasarım öğesi için cesur hale getirdi. Şimdi içeriğiniz olduktan sonra, insanların modüllerinin ayarlarını kaydedin. Az önce yaptığınız kişilerin modülünü kopyalayın ve dört sütunun her birinde aynı modüle sahip olacak şekilde kalan sütunların her birine yapıştırın. Kopyalamak ve yapıştırmak için doğru -Click Menü seçeneğini veya CMD+C CMD+V (MAC) veya CTRL+C CTRL+V (WIN) kullanabilirsiniz. Sütun 4’teki kişilerin modül ayarlarını açın ve içeriği yalnızca aşağıdakileri içerecek şekilde güncelleyin: “Bu siz olabilirsiniz!” Açıklama: “Etkinliğimizde konuşmaya başvurmak için aşağıdaki düğmeyi kullanın.” Ayarlarınızı kaydedin. Ardından, Sütun 4’teki kullanıcıların modülünün altına doğrudan bir düğme modülü ekleyin ve “Şimdi Uygula” için düğme metni içeriğini güncelleyin. Ve ayarlarınızı kaydedin.
Sütun 1-3’teki ilk üç kişi modülüne dönün ve konuk hoparlörün her portresine resim ekleyin. Boyutun aynı boyut ve aynı genişlik ile aynı olduğundan emin olun ve sütunun genişliğini tüm tarayıcı boyutlarındaki (ideal olarak 600 piksel 600 piksel) hesaplayacak kadar büyük olduğundan emin olun. Bu, mevcut konuk konuşma düzeninizin görünümüdür. Konuk hoparlörün düzeninin düzenlenmesi Bölümün aşağıdaki bölümleri açmasını düzenler: Arka plan görüntü: [Ajansımızın düzeninden birini kullanıyorum] Gradyanın sol rengi arka plan: #293039 Sağ renk arka plan gradyanı: rgba (41,48,57,0.89) Üst bölücü stili: bkz. Rengi Üst: #293039 Üst bölücü yüksekliği: 30vw
Satırın genişliğini değiştirin çünkü iki satırımızın aynı genişliğe sahip olmasını istediğimiz için, her iki satırı seçmek için bir çoklu seçici kullanın ve öğe ayarlarını açmak için ayarlar simgelerinden birini tıklayın. Ardından aşağıdakileri güncelleyin: Özel genişlik:% 80% 80
Şimdi iki satırınız aynı özel genişliğe sahip olacak. Başlığı Düzenleme “Konuk Hoparlör” bölümünüzün başlığını içeren metin modülünün ayarlarını açın ve aşağıdakileri güncelleyin:
Başlık 2 Yazı Tipi: Montserrat Başlık 2 Yazı Tipi Ağırlık: Kalın Başlık 2 Yazı Tipi Stil: TT Başlık 2 Metin Seviyesi: Sağ Başlık 2 Renk Metin: #74BF46 Başlık 2 Metin Boyutu: 70px (masaüstü), 50px (akıllı telefon) Ayarları Kaydet. Şimdi aşağıdaki bölücü ayarlarını açın ve güncelleme: Renk: #ffffff Yüksek: 0px genişlik: 90px modül hizalama: sağİnsanların modüllerini düzenlemek, tüm kişi modülümüz için aynı başlangıç stilini vermek istediğimiz için, her birini seçmek için çoklu seçici kullanın ve ardından öğenin sermaye ayarlarını uygulamak için modüllerden birinin ayar simgesini tıklayın. Aşağıdaki öğe ayarlarını güncelleyin: Renk Icon: #74BF46 YAZI TITI: Montserrat Heavy Yazı Tipi Başlık: Açık Renkli Yazı Tipi Başlık: #ffffff Metin Boyutu Başlık: 20PX gövde yazı tipi: Montserrat renk metin gövde metni: #fffff aralıkları İçindekiler: 2px yükseklik gövde çizgileri: 1.8EM CTA People Modülünü Düzenleme Bu kişinin modülünü, konuşmanın katılımına başvurmaları için yeni konuk konuşmacıları çeken harekete geçme daveti olarak kullanıyoruz. Böylece, aktif varsayılan görüntüleri boş yerleri göstermenin yaratıcı bir yolu olarak bırakabiliriz. Ancak tasarımı tamamlamak için eklememiz gereken bazı stil ayarları var. Sütun 4’teki kişilerin modül ayarlarını açın ve aşağıdakileri güncelleyin.
Sınır Genişliği Görüntü: 18px Renk Görüntü Sınır: #D2D2D2 Opazity Görüntü:% 50 Ağır Yazı Tipi Başlık: Kalın Başlık Yüksek Sıra: 1.5 Yapılacak EKAGES düğmelerimizi düzenler. Aşağıdaki düğme modülü ayarlarını açın ve Güncelleme: Metin Renk Düğmesi: #293039 Arka Plan Renk Düğmesi: #74BF46 Sınır Yarıçapı: 50PX Yazı Tipi Yazı Tipi Düğmesi: Montserrat Ağırlık Mektubu: Kalınlık Şimdi Sonuç Sonuç’a bakalım. Bonus İpuçları: Efektler Zoom Image
Divi’de bulunan tüm varsayılan havada seçenekleri unutmayın. Aslında, bu vuruşun blogumuz üzerindeki etkileri hakkında bazı ilham verici öğreticiler görebilirsiniz. Ancak bu tasarım için, kutunun biraz dışında düşüneceğim ve size yayınlandığında insanların görüntülerinin biraz büyütülmesine (veya discala) neden olacak bazı CSS parçaları vereceğim. Kişinizin modülünü ayırt etmek için düzgün bir havada durma efekti arıyorsanız, işte nasıl yapılacağı. Sütun 1, 2 ve 3’teki kişilerin modüllerini seçmek için Multi -Secect kullanın. Eleman ayarlarını açın. Devam sekmesinin altında, ana öğenin altındaki aşağıdaki CSS’yi girin: taşma: gizli; Bu kod, genişletilmiş görüntünün modül kabının dışına uzanmasını önleyecektir. Ardından, üye görüntü altına aşağıdaki CSS ekleyin: Geçiş: Tüm 0.3s; Bu, görüntünün boyutu renksizleştiğinde düzgün bir geçiş ekler. Hover’a CSS eklemek için Hover simgesini tıklayın ve Hover sekmesini seçin ve aşağıdaki CSS’yi girin:
Dönüşüm: Ölçek (1.1) Translatey (%-4.5);
Bu, görüntüleri biraz daha büyük bir boyuta kadar izler (veya genişletir) ve biraz yükseltir.
Şimdi görüntünün gelincik üzerinde ince bir zoom etkisi olacaktır.
