Divi'de Etkili Bir CTA ile Misafir Konuşmacı Bölümü Nasıl Tasarlanır

İster bir podcast'iniz olsun, ister bir WordCamp'e (veya herhangi bir konuşmacı etkinliğine) ev sahipliği yapıyor olun, web siteniz için bir misafir konuşmacı bölümüne sahip olmak her zaman iyi bir fikirdir. Referanslar gibi, konuk konuşmacıları sergilemek de hedef kitleniz nezdinde değeri artırmanın ve güvenilirlik oluşturmanın etkili bir yoludur. Konuk konuşmacı bölümü, bir sonraki etkinliğiniz veya bölümünüz için bazı yeni adayları çekmek için de önemli bir noktadır. Bu eğitici, yalnızca konuşmacıları zarif bir şekilde sergilemekle kalmayıp, aynı zamanda yeni konuşmacıları etkili bir harekete geçirici mesajla başvurmaya teşvik eden bir konuk konuşmacı bölümünün nasıl tasarlanacağını gösterir.

Ancak konuya girmeden önce, son tasarıma bir göz atalım.

Gizlice Bakış

Ve işte size göstereceğim bir bonus vurgulu efekti.

Başlayalım!

Youtube Kanalımıza Abone Olun

Temel Yapı ve İçeriğin Oluşturulması

Henüz yapmadıysanız, yeni bir sayfa oluşturun ve ön uçta oluşturmak için Divi Builder'ı dağıtın.

The, bir sütun satırı ile yeni bir bölüm ekleyin.

Aşağıdaki İçeriğe sahip satıra bir metin modülü ekleyin:

<h2>Guest Speaker</h2>

Ardından, doğrudan metin modülünün altına bir ayırıcı modül ekleyin .

Şimdi konuk konuşmacılarımızı tutmak için dört sütunlu bir yapıya sahip yeni bir satır ekleyeceğiz.

Satırın ilk sütununa bir kişi modülü ekleyin.

Kişi modülü içeriğini aşağıdaki gibi güncelleyin:

İsim: [boş] Facebook Profil URL'si: [şimdilik “#” ekleyin] Twitter Profil URL'si: [şimdilik “#” ekleyin] LinkedIn Profil URL'si: [şimdilik “#” ekleyin]

Açıklama için aşağıdakileri ekleyin:

<h4>James <strong>Smith</strong></h4>
<hr style="width: 90px; float: left;">

Not: hr etiketi, 90 piksel genişliğinde ve sola kayan bazı satır içi stilleri olan bir ayırıcı çizgi oluşturur. Soyadın etrafına sarılmış güçlü etiket, benzersiz bir tasarım öğesi için onu cesur kılar.

Artık içeriğe sahip olduğunuza göre, kişi modülü ayarlarını kaydedin.

Yeni oluşturduğunuz kişi modülünü kopyalayın ve kalan sütunların her birine yapıştırın, böylece dört sütunun her birinde aynı kişi modülüne sahip olursunuz. Kopyalamak ve yapıştırmak için sağ tıklama menüsü seçeneklerini veya cmd+c cmd+v (mac) veya ctrl+c ctrl+v (kazan) kısayol tuşlarını kullanabilirsiniz.

4. sütundaki kişi modülünün ayarını açın ve içeriği, yalnızca aşağıdakileri içerecek şekilde güncelleyin:

İsim: “Bu Sen Olabilirsin!”
Açıklama: "Etkinliğimizde konuşmak üzere başvurmak için aşağıdaki düğmeyi kullanın."

Ayarlarınızı kaydedin.

Ardından, doğrudan sütun 4'teki kişi modülünün altına bir düğme modülü ekleyin ve düğme metni içeriğini "Şimdi Uygula" olarak güncelleyin. Ve ayarlarınızı kaydedin.

1-3 sütunlarındaki ilk üç kişilik modüllere geri dönün ve konuk konuşmacı portrelerinin her biri için görüntüleri ekleyin. Eşit yükseklik ve genişlik boyutlarıyla aynı boyutta olduklarından ve tüm tarayıcı boyutlarında (ideal olarak 600 piksele 600 piksel) sütun genişliklerini hesaba katacak kadar büyük olduklarından emin olun.

Konuk Konuşma düzeniniz bu noktada böyle görünmelidir.

Konuk Konuşmacı Düzenini Şekillendirme

Bölümü Şekillendirme

Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Arka Plan Resmi: [Ajans Düzenimizden birini kullanıyorum]

Arka Plan Gradyanı Sol Renk: #293039
Arka Plan Gradyanı Sağ Renk: rgba(41,48,57,0.89)
Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: #293039
Üst Bölücü Yüksekliği: 30vw

Satır Genişliklerini Değiştirme

Her iki satırımızın da aynı genişliğe sahip olmasını istediğimizden, her iki satırı seçmek için çoklu seçimi kullanın ve öğe ayarlarını açmak için ayar simgelerinden birine tıklayın.

Ardından aşağıdakileri güncelleyin:

Özel Genişlik: %80

Artık her iki satırınız da aynı özel genişliğe sahip olacak.

Başlığa Şekil Verme

“Misafir Konuşmacılar” bölüm başlığınızı 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ığı: Kalın
Başlık 2 Yazı Tipi Stili: TT
başlık 2 Metin Hizalama: sağ
Başlık 2 Metin Rengi: #74bf46
Başlık 2 Metin Boyutu: 70px (masaüstü), 50px (akıllı telefon)

Ayarları kaydet.

Şimdi Bölücü ayarlarını açın ve aşağıdakileri güncelleyin:

Renk: #ffffff
Yükseklik: 0 piksel
Genişlik: 90 piksel
Modül Hizalama: sağ

Kişi Modüllerini Şekillendirme

Tüm kişi modüllerimize aynı başlangıç ​​stilini vermek istediğimizden, her birini seçmek için çoklu seçimi kullanın ve ardından öğe ayarları modunu dağıtmak için modüllerden birinin ayarlar simgesine tıklayın.

Aşağıdaki öğe Ayarlarını güncelleyin:

Simge Rengi: #74bf46
Başlık Yazı Tipi: Montserrat
Başlık Yazı Tipi Ağırlığı: Hafif
Başlık Metin Rengi: #ffffff
Başlık Metin Boyutu: 20px
Gövde Yazı Tipi: Montserrat
Gövde Metni Rengi: #ffffff
Gövde Harf Aralığı: 2px
Gövde Çizgisi Yüksekliği: 1.8em

CTA Kişi Modülünü Şekillendirme

Bu kişi modülünü, bir konuşma katılımı için başvurmak üzere yeni konuk konuşmacıları çeken bir harekete geçirici mesaj olarak kullanıyoruz. Böylece, boş bir noktayı göstermenin yaratıcı bir yolu olarak varsayılan görüntüyü (siluet) aktif bırakabiliriz. Ancak tasarımı tamamlamak için eklememiz gereken birkaç stil ayarı var. 4. sütundaki kişi modülünün ayarlarını açın ve aşağıdakileri güncelleyin.

Resim Kenarlık Genişliği: 18px
Görüntü Kenarlığı Rengi: #d2d2d2
Görüntü Opaklığı: %50

Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Satırı Yüksekliği: 1.5em

Şimdi tek yapmamız gereken düğmemize stil vermek. Düğme modülü ayarlarını açın ve aşağıdakileri güncelleyin:

Düğme Metin Rengi: #293039
Düğme Arka Plan Rengi: #74bf46
Düğme Sınır Yarıçapı: 50px
Düğme Yazı Tipi: Montserrat
Yazı Ağırlığı: Kalın

Şimdi nihai sonuca bir göz atalım.

Bonus İpucu: Görüntü Yakınlaştırma Vurgulu Etkisi

Divi'de bulunan tüm yerleşik fareyle üzerine gelme seçeneklerini unutmayın. Aslında, bu vurgulu efektlerle ilgili ilham verici bazı eğiticileri blogumuzda görüntüleyebilirsiniz. Ancak bu tasarım için, kutunun dışında biraz düşüneceğimi düşündüm ve size, kişi resminizin fareyle üzerine gelindiğinde hafifçe yakınlaşmasına (veya ölçeklenmesine) neden olacak birkaç CSS parçacığı vereceğim.

Kişi modüllerinizi birbirinden ayırmak için ince bir vurgulu efekti arıyorsanız, bunu nasıl yapacağınız aşağıda açıklanmıştır.

Sütun 1, 2 ve 3'teki kişi modüllerini seçmek için çoklu seçimi kullanın. Öğe ayarlarını açın. Gelişmiş sekmesinin altında, Ana Öğenin altına aşağıdaki CSS'yi girin:

overflow: hidden;

Bu kod, genişleyen görüntünün modül kapsayıcısının dışına çıkmasını önleyecektir.

Ardından Üye Resmi altına aşağıdaki CSS'yi ekleyin:

transition: all 0.3s; 

Bu, görüntü boyut olarak ölçeklendiğinde yumuşak bir geçiş sağlar.

Vurgulu üzerine css eklemek için, vurgulu simgesine tıklayın ve vurgulu sekmesini seçin ve aşağıdaki CSS'yi girin:

transform: scale(1.1) translateY(-4.5%);

Bu, görüntüyü biraz daha büyük bir boyuta ölçeklendirir (veya genişletir) ve biraz yukarı taşır.

Artık görüntülerin üzerine gelindiğinde ince bir yakınlaştırma etkisi olacak.

Son düşünceler

Umarım bu öğreticiyi beğenmişsinizdir veya en azından birkaç faydalı tasarım ipucu bırakmışsınızdır. Bu konuk konuşmacı bölümü düzeni çeşitli şekillerde kullanılabilir. Bir başka mükemmel uygulama, bir çalışan sayfasının aynı anda mevcut çalışanları listelemesi ve başkalarını bir pozisyona başvurmaya teşvik etmesi olacaktır. Bazı fikirlerinizi bizimle paylaşmaktan çekinmeyin.

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!