Minimum portföy ana sayfasını genişletmek için filtreler, kahramanlar ve CTA kullanma
Mini dizilerimizde 5’in 2’sini göndermeye hoş geldiniz Divi ile basit ve etkili bir portföy web sitesi oluşturma. Bu dizide, başlangıçtan itibaren kendi portföy web sitenizi oluşturmak için yapmanız gereken her şeyi tartışacağız. Ayrıca, sitenizin yeni müşteriler çekmede etkili olduğundan emin olmak için A/B test sistemimiz Divi uçlarımızı nasıl kullanacağımızı tartışacağız.
Bugünkü yazıda, dün blog yayınında oluşturduğumuz minimum portföy ana sayfasına nasıl alternatif stiller ekleyeceğinizi göstereceğim. Amacım, DIVI A/B test sistemini, Divi liderlerini kullanarak daha sonra test edebileceğimiz bazı ek ve basit alternatifler sağlamaktır.
Bölünelim! Bugünün Başlangıç Noktası: Minimum Portföy Ana Sayfası Minimal portföy ana sayfası
Dünün gönderisinde, yukarıda minimum portföy ana sayfası nasıl yapılacağını gösterdim. Bunu bugünün tasarım varyasyonları için başlangıç noktamız olarak kullanıyoruz. Bu serideki ilk öğreticiyi takip etmek ve yapmadıysanız, bu bağlantıyı takip edin ve buraya dönüp bu hoş ek deneyebilmeniz için deneyin. Portföyün sundurmasını genişletmek için filtreler, kahramanlar ve CTA kullanmak en azından YouTube kanallarımıza abone olun Portföy varyantları #1: Minimum oyunculuk davetiyesi ekleyin Altbilginin en azından fazla hareket etmek için davetiyeler eklemek
Minimum estetiğimize uygun olarak, altbilginin üstünde siyah beyaz hareket etmek için bir davet eklemenin iyi bir dokunuş olabileceğini düşünüyorum. Veya en azından test edilecek ve iletişim sayfaları aracılığıyla ilişkili olan kişi sayısını artırıp artırmadığını görecek bir şey. Bunu yapmak için yaptığınız şey budur: bir satır ve iki sütun (2/3 ve 1/3) ile standart bir parça oluşturun. Soldaki 2/3 sütunda, biri diğerinin üstünde olmak üzere iki metin modülü yapın. Yukarıdaki metin modülüne “Benimle çalışmak ister misin?” Ve ikinci metin modülünde bir dizi metin örneği koydum. Sütun 1/3 tek düğme modülünün sağ tarafına. Düğme metni için “Hadi konuşalım!” Ama sizin için uygun olduğunu düşündüğünüz her şeyi yazabilirsiniz. Şimdi tüm içeriğimiz hazır, tasarımımıza uyacak şekilde düzenleyelim. Bölüm Ayarları Harekete geçirme daveti için parçanın ayarlarını açın. CSS sekmesini açın ve aşağıdakileri ana elementin altına yapıştırın: sınır üstü: katı 2px #626262; Sınır altındaki: sağlam 2px #626262;
Bu, yukarıda gösterildiği gibi üst ve alt sınırlar üretecektir. Metin modüllerinin ayarları
Ayarlanması gereken tek metin modülü, “Benimle çalışmak ister misiniz?” 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 kapaklar (TT); Kalın (b)
Metin yazı tipi boyutu: 16
Özel marj: 0px aşağıda
Özel dolgu: 10 pikselin altında
Değişikliğinizi kaydedin. Şimdi yukarıdaki resim gibi görünmeli. Modül Ayarları Düğmesi
Modül Ayarları düğmesini açın ve her sekmede aşağıdakileri yapın. Genel Ayarlar: URL düğmenizi sayfaya ayarlayın/sizinle iletişime geçin. Tasarım Ayarları:
“Düğme için özel bir stil kullanın” olarak anahtarı çevirin.
Metin Boyutu Düğmesi: 16
Metin Renk Düğmesi: #666666
Düğme Sınır Rengi: #666666
Sınır sınır yarıçapı: 0
Yazı tipi düğmesi: açık sans; Kalın (b)
Kest simgesi: kamera
Renk simgesi düğmesi: #666666
Nokta Metni Renk Düğmesi: #666666
Arka Plan Renk Düğmesini Yönlendirin: RGBA (255,255,255.0)
Renk Sınır Noktası Düğme: #666666
Yarıçap sınırını yönlendirin: 0
Özel CSS:
Aşağıdakileri ana öğenin altına yapıştırın. Marj-Top:%10;
Değişikliği kaydet. Düğmeniz artık yukarıdaki resme benzeyecek. Nihai Sonuçlar: Harekete geçme minimum davet
Artık tüm değişiklikleriniz yapıldığına göre, yeni davet yukarıdaki resme benzeyecek. Aşağıdaki bölümde, diğer birkaç tam sayfa tasarımı oluşturmak için bu ilk varyant geliştirmeye devam edeceğiz. Portföy Ev Varyantı #2: Portföye filtre ekleyin
Bir filtre portföy modülü için standart bir portföy modülünü değiştirin İkinci varyantımız için, kategorilere dayalı aramayı kolaylaştırmak için standart portföy modülümüzü bir filtre portföy modülüyle değiştireceğiz. Ancak şimdiye kadar tüm sıkı çalışmalarımızı silmek veya ortadan kaldırmak istemiyoruz. Buradaki ilk adım, standart portföy modülünü devre dışı bırakmaktır. Bunu yapmak için, görsel üreticiyi etkinleştirin ve sol üst köşedeki mavi parçanın kontrolünü sağlayın. “Devre Dışı Bırak” ı tıklayın ve tüm cihazları seçin. Bölümün biraz şeffaf/donuk hale geldiğini göreceksiniz. Bu, devre dışı bırakıldığını ve görsel yapımcıdan çıktığınızda görünüşten kaybolacağını gösterir. Şimdi alttan aşağı kaydırın ve başka bir parça eklemek için mavi düğmeyi kullanın. Tek sütunun düzenini seçin ve filtrelenebilir portföy modülünü ekleyin. Filtreleme Portföy Modülü Ayarları
Her filtrelenmiş portföy modülü sekmesi için aşağıdaki ayarları yapılandırın. Genel Ayarlar: Düzen: Kutu Posta Numarası: 16
Kategorileri Göster: Hayır
Tasarım Ayarları:
Ikon House: Kamera
Zoom simgesi rengi: #ffffff
Kaplama Renk Noktası İmleç: RGBA (0.0,0,0.0.76)
Başlık Metin Rengi: #666666
Yazı tipi filtresi: SAN’ları açık; Kalın (b)
Renk filtresi metni: #666666
Satır Ayarları
Şimdi, tam genişliğinde filtrelenebilen bir portföy yapmak için satır ayarlarını ayarlamamız gerekiyor. Bunu yapmak için satır ayarlarını açın ve aşağıdaki ayarları yapılandırın. Genel Ayarlar:
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet Talang genişliği: 2
Değişikliği kaydet.
Nihai sonuç: filtrelenmiş portföy
Görsel üreticiyi depolayıp çıktıktan sonra, yeni filtrelenebilir portföyünüz yukarıdaki resme benzeyecektir. Bu güncellenmiş tasarım, tüm tasarım için biraz temiz bir beyaz alan reklamı yapar ve kategoriye dayalı iş aramalarınızı daha kolay hale getirir. Portföy Ev Varyant #3: Kahramanlar Ekle
Müşteri talebini artırmak için kahramanı eklemek
Tıpkı son varyantımızla yaptığımız gibi, bu, birinde tüm varyantları içeren tam bir sayfa düzeni yapmak için diğerinden inşa edilecektir. Bu yeni tam sayfanın düzenine son bir dokunuş vermek için bir kahraman eklememiz gerekiyor. Yaptığınız şey budur. Başlamak için, iki sütunlu yeni bir parça ekleyin ve sayfanızın üstüne sürükleyin. Bölüm Ayarları 1920 piksel genişliğe sahip bir arka plan resmi yükleyin ve 875px yüksekliğe sahip ve tasarruf düğmesini yeşil tıklayın. Bölme Modülü Ayarları Sol sütunda, bölücü modülünü girin ve yüksekliği 400 olarak ayarlayın. Yeşil Kaydet düğmesini tıklayın. Metin modüllerinin ayarları
Sağ sütunda metin modülünü girin ve aşağıdakileri yapın. Genel Ayarlar: Metin Rengi: Işık Metin Oryantasyonu: Orta İçindekiler: “Merhaba, ben Kim. Özel bir şey yakalayalım. ” (Veya siteniz için mantıklı olan herhangi bir şey) Tasarım Ayarları:
Metin yazı tipi: Roboto; Tüm Sermaye Harfleri (TT)
Metin yazı tipi boyutu: 34
Yüksek çizgi metin: 1.8em
Özel Dolgu:% 15 Top
Özel CSS: Özel CSS sekmesinde, ana öğenin altındaki aşağıdaki kod satırını yapıştırın. yazı tipi-ağırlık: 400;
Modül Ayarları Düğmesi
Yeni oluşturduğunuz metin modülünün altındaki düğme modülünü girin ve aşağıdaki ayarlara göre yapılandırın. Genel Ayarlar:
URL düğmesi: Sayfayı sizinle ilgili/sizinle iletişime geçin.
Metin düğmesi: “Bana daha fazlasını söyle!” (Veya siteniz için mantıklı olan herhangi bir şey.)
Düğmenin hizalanması: orta Tasarım Ayarları:
Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 22
Metin Renk Düğmesi: RGBA (0.0,0,0,7)
Arka Plan Renk Düğmesi: RGBA (255,255,255.0.75)
Sınır Renk Düğmesi: RGBA (255,255,255.0.24)
Sınır sınır yarıçapı: 0
Yazı tipi düğmesi: Roboto; Kalın (b)
Kest simgesi: kamera
Renk simgesi düğmesi: #ffffff
Nokta Metni Renk Düğmesi: RGBA (255,255,255.0.85)
Arka Plan Renk Düğmesini Yönlendirin: RGBA (0,0,0,0)
Renk Sınır Noktası Yönü Düğmesi: RGBA (255.255.255.0.85)
Yarıçap sınırını yönlendirin: 0
Özel CSS: Özel CSS sekmesinde, ana öğenin altındaki aşağıdaki kod satırını yapıştırın. Marj-Top: 10 piksel;
Değişikliği kaydet. Nihai sonuç: Kahramanın kişiselleştirilmiş kısmı
Tüm değişiklikleri koruduktan ve görsel üreticiden çıktıktan sonra, yeni kahramanınız böyle görünecektir. Ve şimdi tüm sayfalar bu varyant bölümünün üzerindeki resme benzeyecek: bir kahraman görüntüsü, daha sonra filtrelenebilen bir portföy ve son olarak minimumda hareket etme daveti. Bu serinin ilerleyen saatlerinde, siz ve ziyaretçileriniz için en iyi olan hakkında kesin bir sonuca varabilmeniz için bu tasarım öğesini nasıl test edeceğinizi göstereceğim. Yarın: Yarının Gönderi’nde Divi Builder ile güzel bir proje sayfası nasıl oluşturulur, portföy proje sayfanıza başvurmak için ipuçlarını ve tasarım ilkelerini paylaşacağım ve seyahatte size yardımcı olacak bazı ücretsiz düzenler sunacağım! Kaçırma! Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
