Divi ile Portföy Web Siteniz İçin İlgi Çekici Bir Hakkında Sayfası Nasıl Oluşturulur

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ünkü gönderide, minimal portföy web sitemizi basit ve (umarız) etkili bir hakkında/iletişim sayfasıyla bitireceğiz. Güvende olmak için, biraz farklı iki sürüm oluşturacağız ve yarınki gönderide bunları birbirine karşı test edeceğiz.

Ama kendimizin önüne geçmesek iyi olur. Haydi bu tasarımın üstesinden gelelim!

Bugünün Nihai Ürünleri: İki Hakkında/İletişim Sayfası Tasarım Varyantı

Bana göre bir sayfanın etkili olması için karmaşık, oluşturulması zor veya gösterişli olması gerekmez. Aslında, çoğu durumda, bu şeyler muhtemelen aleyhinize çalışacaktır. Bu nedenle, ortak hakkında/iletişim sayfamız için tasarımı son derece basit ve minimal estetiğimizle uyumlu tutmak istedim.

Sanatçı hakkında bir tanıtım yazısı ve rezervasyon sorguları için bir iletişim formumuz var. Ve bu kadar. İki varyant arasındaki tek fark, bu iki öğenin yerleşimidir. İlk varyantta, iletişim formunu doldurmak ve göndermek için aşağı kaydırmanız gerekecek. İkincisinde her şey "ekranın üst kısmında" ve sayfaya tıkladığınız anda erişilebilir.

Aşağıdaki bölümlerde, her birini (ve aralarındaki ince farkları) nasıl oluşturduğum konusunda size yol göstereceğim.

Divi ile Portföy Web Siteniz İçin İlgi Çekici Bir Hakkında Sayfası Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Hakkında/İletişim Sayfası Tasarımı 1

Hakkında/iletişim sayfamızın ilk tasarım varyantını oluşturmak için, ilk öğreticimizde bunun için oluşturduğunuz sayfaya gidin. Halihazırda oluşturduğumuz global altbilgiye sahipseniz, bu şekilde görünecektir.

Görsel oluşturucuyu etkinleştirin ve bir satır ve bir sütun içeren yeni bir standart bölüm ekleyin.

Mavi bölüm ayarlarınızı açın ve bir arka plan resmi seçin. Benimki 1920 piksel genişliğinde ve 1300 piksel yüksekliğinde.

Bunu kaydettikten sonra, sıranızın ortasındaki gri modül ekle düğmesini tıklayın. Bir metin modülü ekleyin, metin rengini açık olarak ayarlayın ve içerik alanına adınızı yazın. Ardından altına bir ayırıcı modül ekleyin. Rengi beyaza, görünürlüğü "bölücüyü göster"e ve yüksekliği 2'ye ayarlayın.

Şimdi başka bir satır ekleyin, ancak bu sefer iki sütunlu. Bir metin modülü ekleyin ve hakkında metninizin ilk kısmını buraya koyun. Sağdaki ikinci sütuna son bir metin modülü ekleyin ve yaklaşık metninizi orada tamamlayın.

Şimdi tek sütunlu yeni bir satır ekleyin ve ona iletişim formu modülünü ekleyin. Artık tüm tasarım öğeleriniz sayfada. Geri dönüp bir şeyleri şekillendirmeye başlamanın zamanı geldi.

Ad Metin Modülü Ayarları

Adınızın bulunduğu metin modülü için tasarım ayarlarını açın ve aşağıdaki ayarlamaları yapın.

Genel Ayarlar:

• Metin Rengi: Açık
• Metin Yönü: Sol

Tasarım Ayarları:

• Metin Yazı Tipi: Roboto Light; Tüm Büyük Harfler (TT).
• Metin Yazı Tipi Boyutu: 34

Özel CSS:

Ana öğenin altında, aşağıdaki css satırını geçin.

font-weight: 400;

Kaydet ve çık.

Kalan Satır Ayarları

"Metnin hakkında" bilginizi içeren orta satırda, satır ayarlarını açın ve en üstteki özel dolgu değerini 20px olarak ayarlayın. Diğer tüm özel dolgu değerlerini 0px olarak ayarlayın. Kaydet ve kapat.

Alt sıranın satır ayarlarında, tüm özel dolgu değerlerini 0px olarak ayarlayın. Kaydet ve kapat.

İletişim Formu Modül Ayarları

Genel sekmesinin altına iki yeni öğe ekleyin; her iki giriş alanı. İlkini “Proje” ve ikincisini “Bütçe” olarak etiketleyin. Tercihinize bağlı olarak bunları zorunlu alanlar yapmayı veya yapmamayı seçebilirsiniz, ancak bu tasarıma uyması için Tam Genişlik Yap anahtarını “Hayır” olarak ayarlamanız gerekecektir.

Ayrıca genel sekmesinde Display Captcha seçeneğini “Hayır”a çevirin. Ve kalan alanları tercihinize göre doldurun. Başlık için “Rezervasyon Sorguları” ifadesini beğendim ama istediğinizi seçebilirsiniz.

Tasarım sekmesine geçerek aşağıdaki değişiklikleri yapın:

• Başlık Yazı Tipi: Roboto Light; Tüm Büyük Harfler (TT).
• Metin Yazı Tipi Boyutu: 34
• Düğme Metin Boyutu: 16
• Düğme Sınır Yarıçapı: 1 piksel
• Düğme Yazı Tipi: Açık Sans; Kalın (B).
• Düğme Simgesi: Kamera

Son olarak, özel css sekmesinde, aşağıdaki css'yi "İletişim Başlığı" kutusuna yapıştırın:

font-weight: 400 !important;
padding-bottom: 30px;
margin-bottom: 60px;
border-bottom: solid 1px #ffffff;

Her şeyi kaydedin ve görsel oluşturucudan çıkın. Nihai sonucunuz böyle görünecek.

Hakkında/İletişim Sayfası Tasarımı 2

Tüm tasarım öğelerimiz zaten oluşturulduğundan, bu tasarım varyantı için aşağı yukarı yeniden düzenleyeceğiz. İlk adım, görsel düzenleyiciyi etkinleştirmek ve yeni oluşturduğumuz ilk tasarımı çoğaltmaktır. Kopya, altında görünecektir. Bu gerçekleştiğinde, bölüm ayarlarına sağ tıklayarak ve tüm cihazlarda devre dışı bırakarak ilk tasarımımızı devre dışı bırakın.

Mevcut tasarımın en altına gidin ve iki sütunlu yeni bir satır oluşturun.

İletişim formu modülünü sağdaki sütuna sürükleyin. Ardından metin modülü adını, beyaz ayırıcıyı ve sol taraftaki metin modülünü yeni satırın sol sütununa sürükleyin.

Ardından, en üstteki iki satırı silin ve iletişim formu modülü ayarlarını açın. css sekmesinde bu ayarlanmış kodu “İletişim Başlığı” kutusuna yapıştırın.

font-weight: 400 !important;
padding-bottom: 23px;
margin-bottom: 40px;
border-bottom: solid 1px #ffffff;

Modül ayarlarını kaydedin ve çıkın. Son adım, tek bir sütunla yeni bir alt satır eklemektir. 350 piksel yüksekliğinde görünmez bir ayırıcı modül ekleyin. Her şeyi kaydedin ve görsel oluşturucudan çıkın. Nihai sonucunuz aşağıdaki resim gibi görünmelidir.

Yarın: Divi'nin A/B Test Sistemi Divi Müşteri Adayları ile Portföyünüzün Etkinliğini Test Etme

Yarınki gönderide, size neyin işe yarayıp neyin yaramadığını kesin olarak göstererek portföyünüzün performansını artıracak bir dizi A/B testinin nasıl gerçekleştirileceğini göstereceğim. Şimdiye kadar bu mini diziyi takip etmemiş olsanız bile, yarınki gönderi size şu anda üzerinde çalıştığınız site ne olursa olsun A/B testleri hakkında nasıl düşüneceğinizi ve ayarlayacağınızı gösterecek.

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!