Minimal Portföy Ana Sayfasını Genişletmek için Filtreleri, Kahraman Bölümlerini ve CTA'ları Kullanma

Divi ile Basit ve Etkili Portföy Web Sitesi Nasıl Oluşturulur ? Bu seride, sıfırdan kendi portföy web sitenizi oluşturmak için yapmanız gereken her şeyi ele alacağız. Ayrıca sitenizin yeni müşteriler çekmede etkili olduğundan emin olmak için A/B test sistemi Divi Lead'lerimizi nasıl kullanacağımızı da gözden geçireceğiz.

---

Bugünün gönderisinde, dünün blog gönderisinde oluşturduğumuz minimal portföy ana sayfasına bazı alternatif stilleri nasıl ekleyeceğinizi göstereceğim. Amacım, Divi'nin A/B test sistemi Divi Lead'leri kullanarak daha sonra test edebileceğimiz birkaç basit ekleme ve alternatif sunmak.

Hadi dalalım!

Bugünün Başlangıç ​​Noktası: Minimal Bir Portföy Ana Sayfası

Dünkü gönderide, yukarıdaki minimal portföy ana sayfasını nasıl oluşturacağınızı gösterdim. Bunu, aşağıdaki günümüzün tasarım varyasyonları için atlama noktamız olarak kullanıyoruz. Devam etmek istiyorsanız ve bu serideki ilk öğreticiyi henüz yapmadıysanız, bu bağlantıyı takip edin ve bir deneyin, böylece buraya geri dönebilir ve bu eğlenceli eklemeleri deneyebilirsiniz.

Minimal Portföy Ana Sayfasını Genişletmek için Filtreleri, Kahraman Bölümlerini ve CTA'ları Kullanma

Youtube Kanalımıza Abone Olun

Portföy Ana Sayfası Varyant #1: Minimal Bir Harekete Geçirici Mesaj Ekleme

Minimal estetiğimize uygun olarak, alt bilginin üstüne siyah beyaz bir harekete geçirici mesaj eklemenin hoş bir dokunuş olabileceğini düşündüm. Ya da en azından, test edilecek ve iletişim sayfasından iletişime geçen kişi sayısını artırıp artırmadığını görmek için bir şey.

Bunu oluşturmak için yapmanız gerekenler:

Tek satır ve iki sütun (2/3 ve 1/3) içeren standart bir bölüm oluşturun. Soldaki 2/3 sütununda, biri diğerinin üzerinde olmak üzere iki metin modülü oluşturun.

En üstteki metin modülüne “Benimle çalışmak ister misin?” sözlerini yerleştirdim. Ve ikinci metin modülüne bir satır örnek metin koydum.

Sağdaki 1/3 sütununda tek bir düğme modülü. Yazdığım düğme metni için “Hadi Konuşalım!” Ama sana uygun olanı yazabilirsin.

Artık tüm içeriğimiz yerinde olduğuna göre, onu tasarımımıza uyacak şekilde şekillendirelim.

Bölüm Ayarları

Harekete geçirici mesaj bölümü için bölüm ayarlarını açın. css sekmesine gidin ve aşağıdakini Ana Öğe altına yapıştırın:

border-top: solid 2px #626262;
border-bottom: solid 2px #626262;

Bu, yukarıdaki resimdeki gibi bir üst ve alt kenarlıkla sonuçlanacaktır.

Metin Modülü Ayarları

Ayarlanması gereken tek metin modülü “Benimle çalışmak ister misin?” başlığıdır.

Modül ayarlarını açın ve tasarım sekmesi altında aşağıdakileri yapın:

• Metin Yazı Tipi: Açık Sans; Tüm Büyük Harfler (TT); Kalın (B)
• Metin Yazı Tipi Boyutu: 16
• Özel Kenar Boşluğu: 0px Alt
• Özel Dolgu: 10px Alt

Değişikliklerinizi kaydedin. Şimdi yukarıdaki resim gibi görünmelidir.

Düğme Modül Ayarları

Düğme modülü ayarlarını açın ve ilgili her sekme altında aşağıdakileri yapın.

Genel Ayarlar:

• Düğme URL'nizi hakkında/iletişim sayfanıza ayarlayın.

Tasarım Ayarları:

• “Düğme için Özel Stiller Kullan” için anahtarı çevirin.
• Düğme Metin Boyutu: 16
• Düğme Metin Rengi: #666666
• Düğme Kenar Rengi: #666666
• Düğme Sınır Yarıçapı: 0
• Düğme Yazı Tipi: Açık Sans; Kalın (B)
• Düğme Simgesi: Kamera
• Düğme Simge Rengi: #666666
• Düğme Vurgulu Metin Rengi: #666666
• Düğme Vurgulu Arka Plan Rengi: rgba(255,255,255,0)
• Düğme Vurgulu Kenarlık Rengi: #666666
• Düğme Vurgulu Kenarlık Yarıçapı: 0

Özel CSS:

Aşağıdakini Ana Öğe altına yapıştırın.

margin-top: 10%;

Değişiklikleri Kaydet. Düğmeniz şimdi yukarıdaki resimdeki gibi görünmelidir.

Nihai Sonuç: Minimal Bir Harekete Geçirici Mesaj

Artık tüm değişiklikleriniz yapıldığına göre, yeni harekete geçirici mesaj yukarıdaki resimdeki gibi görünmelidir. Aşağıdaki bölümlerde, birkaç tam sayfa tasarım daha oluşturmak için bu ilk varyantı geliştirmeye devam edeceğiz.

Portföy Ana Sayfası Varyant #2: Portföye Filtre Ekleme

İkinci varyantımız için, kategoriye göre göz atmayı kolaylaştırmak için standart portföy modülümüzü filtrelenebilir portföy modülüyle değiştireceğiz. Ancak şimdiye kadarki tüm sıkı çalışmalarımızı silmek veya ortadan kaldırmak istemiyoruz. Dolayısıyla buradaki ilk adım, standart portföy modülünü devre dışı bırakmak olacak.

Bunu yapmak için görsel oluşturucuyu etkinleştirin ve sol üst köşedeki mavi bölüm kontrollerine sağ tıklayın. “Devre dışı bırak”a tıklayın ve tüm cihazları seçin. Bölümün biraz şeffaf/donuklaştığını fark edeceksiniz. Bu, devre dışı bırakıldığını ve görsel oluşturucudan çıktığınızda görünümden kaybolacağını gösterir.

Şimdi bölümün en altına gidin ve başka bir bölüm eklemek için mavi düğmeyi kullanın. Tek sütun düzenini seçin ve Filtrelenebilir Portföy Modülünü ekleyin.

Filtrelenebilir Portföy Modülü Ayarları

Filtrelenebilir portföy modülünün her sekmesi için aşağıdaki ayarları yapılandırın.

Genel Ayarlar:

• Düzen: Izgara
• Mesaj Sayısı: 16
• Kategorileri Göster: Hayır

Tasarım Ayarları:

• Hover Simgesi: Kamera
• Yakınlaştırma Simgesi Rengi: #ffffff
• Vurgulu Yer Paylaşımı Rengi: rgba(0,0,0,0.76)
• Başlık Metin Rengi: #666666
• Filtre Yazı Tipi: Açık Sans; Kalın (B)
• Metin Rengini Filtrele: #666666

Satır Ayarları

Şimdi filtrelenebilir portföyü tam genişlikte yapmak için satır ayarlarını yapmamız gerekiyor. Bunu yapmak için satır ayarlarını açın ve aşağıdaki ayarları yapılandırın.

Genel Ayarlar:

• Bu Satırı Tam Genişlikte Yap: Evet
• Özel Oluk Genişliğini Kullan: Evet
• Oluk Genişliği: 2

Değişiklikleri Kaydet.

Nihai Sonuç: Filtrelenebilir Bir Portföy

Görsel oluşturucuyu kaydedip çıktıktan sonra, yeni filtrelenebilir portföyünüz yukarıdaki resimdeki gibi görünmelidir. Bu güncellenmiş tasarım, genel tasarıma biraz boş alan ekler ve çalışmanızı kategoriye göre taramayı çok daha kolay hale getirir.

Portföy Ana Sayfası Varyant #3: Kahraman Bölümü Ekleme

Tıpkı son varyantımızda yaptığımız gibi, bu, tüm varyantları bir arada içeren son bir tam sayfa düzeni oluşturmak için diğerlerinden oluşacaktır. Bu yeni tam sayfa düzenine son dokunuşu yapmak için bir kahraman bölümü eklememiz gerekiyor. İşte ne yapıyorsun.

Başlamak için iki sütunlu yeni bir bölüm ekleyin ve bunu sayfanızın en üstüne sürükleyin.

Bölüm Ayarları

1920 piksel genişliğinde ve 875 piksel yüksekliğinde bir arka plan resmi yükleyin ve yeşil kaydet düğmesini tıklayın.

Bölücü Modül Ayarları

Sol sütuna bir ayırıcı modül yerleştirin ve yüksekliği 400 olarak ayarlayın. Yeşil kaydet düğmesine tıklayın.

Metin Modülü Ayarları

Sağdaki sütuna bir metin modülü ekleyin ve aşağıdakileri yapın.

Genel Ayarlar:

• Metin Rengi: Açık
• Metin Yönü: Merkez
• İçerik: “Merhaba, ben Kim. Özel bir şey yakalayalım.” (Ya da siteniz için ne anlam ifade ediyorsa)

Tasarım Ayarları:

• Metin Yazı Tipi: Roboto; Tümü Büyük Harfler (TT)
• Metin Yazı Tipi Boyutu: 34
• Metin Satır Yüksekliği: 1.8em
• Özel Dolgu: %15 Üst

Özel CSS:

Özel css sekmesinde, Ana Öğe altına aşağıdaki kod satırını yapıştırın.

font-weight: 400;

Düğme Modül Ayarları

Yeni oluşturduğunuz metin modülünün altına bir düğme modülü yerleştirin ve aşağıdaki ayarlara göre yapılandırın.

Genel Ayarlar:

• Düğme URL'si: Hakkında/iletişim sayfanıza ayarlayın.
• Düğme Metni: “Bana Daha Fazla Anlat!” (Ya da siteniz için ne anlam ifade ediyorsa.)
• Düğme Hizalama: Merkez

Tasarım Ayarları:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 22
• Düğme Metin Rengi: rgba(0,0,0,0.7)
• Düğme Arka Plan Rengi: rgba(255,255,255,0.75)
• Düğme Kenar Rengi: rgba(255,255,255,0.24)
• Düğme Sınır Yarıçapı: 0
• Düğme Yazı Tipi: Roboto; Kalın (B)
• Düğme Simgesi: Kamera
• Düğme Simge Rengi: #ffffff
• Düğme Vurgulu Metin Rengi: rgba(255,255,255,0.85)
• Düğme Vurgulu Arka Plan Rengi: rgba(0,0,0,0)
• Düğme Vurgulu Kenarlık Rengi: rgba(255,255,255,0.85)
• Düğme Vurgulu Kenarlık Yarıçapı: 0

Özel CSS:

Özel css sekmesinde, Ana Öğe altına aşağıdaki kod satırını yapıştırın.

margin-top: 10px;

Değişiklikleri Kaydet.

Nihai Sonuç: Kişiselleştirilmiş Bir Kahraman Bölümü

Tüm değişiklikleri kaydettikten ve görsel oluşturucudan çıktıktan sonra yeni kahraman bölümünüz bu şekilde görünecektir. Ve tüm sayfa şimdi bu varyant bölümünün en üstündeki resim gibi görünecek: bir kahraman resmiyle başlayarak, ardından filtrelenebilir bir portföy ve son olarak minimum bir harekete geçirici mesaj.

Serinin ilerleyen bölümlerinde, sizin ve ziyaretçileriniz için neyin en iyi olduğu konusunda kesin bir sonuca varabilmeniz için bu tasarım öğelerini nasıl test edeceğinizi göstereceğim.

Yarın: Divi Builder ile Güzel Proje Sayfaları Nasıl Oluşturulur

Yarının gönderisinde, portföy proje sayfalarınıza uygulayabileceğiniz tasarım ipuçlarını ve ilkelerini paylaşacağım ve aynı zamanda yolda size yardımcı olacak birkaç ücretsiz düzen vereceğim! kaçırmayın!

Büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!