Divi ile portföy web siteniz için ilginç bir sayfa nasıl oluşturulur
Mini dizilerimizde 5’in 4’ünü 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ünün gönderisinde, minimum portföy web sitemizi basit bir sayfa/iletişim (umarım) ile tamamlayacağız. Güvende olmak için iki farklı versiyon yapacağız ve yarın görevde test edeceğiz.
Ama kendimizi geçmememiz iyi olur. Bu tasarımda çatlayalım! Bugünün son ürünü: Benim için iki sayfalık tasarım varyantları/iletişime geçin, bir sayfanın karmaşık olması, oluşturulması zor veya etkili olmak için çarpıcı olması gerekmez. Aslında, birçok durumda, bu şeylerin size zarar vermesi muhtemeldir. Bu yüzden sayfa hakkında/bizimle iletişime geçerek tasarımı çok basit ve minimum estetiğimizle uyumlu tutmak istiyorum. Sipariş soruları için sanatçıların ve iletişim formlarının bir açıklamasına sahibiz. Ve hepsi bu. İki varyant arasındaki tek fark iki elementin yerleştirilmesidir. İlk varyantta, iletişim formunu doldurmak ve göndermek için aşağı kaydırmanız gerekir. İkinci sayfada, her şey “en üst paro” ve sayfayı açtıktan hemen sonra erişilebilir. Sayfa Tasarım Varyantı/İletişim 1 Hakkında Varyant Hakkında/Varyant Tasarım Page 2 ile iletişime geçin
Aşağıdaki bölümde, her birini nasıl yaptığım konusunda size rehberlik edeceğim (ve aralarındaki ince farkı). Portföy web siteniz için ilginç bir sayfa oluşturulur YouTube kanalı Divi ile ilgili/İletişim Sayfası Tasarım 1 ile ilgili sayfanın ilk tasarım varyantını oluşturmak için/iletişime geçin/iletişime geçin, ilk öğreticimizde onun için oluşturduğunuz sayfaya gidin. Yaptığımız küresel bir altbilginiz varsa, bu gibi görünecektir. Görsel üreticiyi etkinleştirin ve bir satır ve bir sütunla yeni bir standart parça ekleyin. Mavi bölüm ayarlarınızı açın ve arka plan görüntüsünü seçin. Benimki 1920 pikseldir. Kaydettikten sonra, Gri düğmesini tıklayın Modülü satırınızın ortasına ekleyin. Metin modülünü ekleyin, metnin rengini parlak olarak ayarlayın ve içerik alanına adınızı girin. Ardından altına bölücü modülünü ekleyin. Rengi beyaza, görünürlüğü “bölücü göster” olarak ayarlayın ve yükseklik 2 olur. Şimdi başka bir satır ekleyin, ancak bu sefer iki sütunla. Metin modülünü ekleyin ve metnin ilk bitini oraya yerleştirin. Son metin modülünü sağdaki ikinci sütuna ekleyin ve orada sizinle ilgili metni doldurun. Şimdi bir sütunla yeni bir satır ekleyin ve kontak formu modülünü ekleyin. Şimdi tüm tasarım öğeleriniz sayfada. Geri dönme ve çeşitli şeyler düzenlemeye başlama zamanı. 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 ayarları yapın. Genel Ayarlar: Metin Rengi: Işık
Metin Oryantasyonu: Sol
Tasarım Ayarları:
Metin yazı tipi: Roboto Light; Tüm Sermaye Harfleri (TT).
Metin Yazı Tipi Boyutu: Özel 34CSS:
Aşağıdaki CSS hattını geçen ana elemanın altında. yazı tipi-ağırlık: 400;
Tasarruf et ve dışarı çık. Orta satırda “Metniniz Hakkında” içeren kalan satır ayarları, satır ayarlarını açın ve üst özel dolgu değerini 20 piksel olarak ayarlayın. Diğer tüm özel dolgu değerlerini 0px olarak ayarlayın. Kaydet ve kapat.
Alt satır için satır ayarında, tüm özel dolgu değerlerini 0px olarak ayarlayın. Kaydet ve kapat. İletişim Formu Modül Ayarları
Genel sekmenin altına iki yeni öğe ekleyin; Her iki giriş alanı. İlk etiket “Proje” ve ikinci “bütçe” dir. Zorunlu bir alan yapmayı veya tercihlerinize bağlı olarak olmayabilir, ancak bu tasarıma uymak için, tam genişlik için “hayır” olarak bir anahtar ayarlamanız gerekir.
Ayrıca genel sekmede, Captcha seçeneğini “hayır” olarak değiştirin. Ve tercihlerinize göre kalan sütunun içeriği. Başlık için “Sipariş Soruları” ifadesini seviyorum, ancak ne istersen seçebilirsiniz.
Metin yazı tipi boyutu: 34
Metin Boyutu Düğmesi: 16
Sınır sınır yarıçapı: 1px
Yazı tipi düğmesi: açık sans; Kalın (b).
Kest simgesi: kamera
Son olarak, Özel CSS sekmesinde, “İletişim Başlığı” kutusundaki aşağıdaki CSS’yi yapıştırın: Yazı Tipi: 400! Önemli;
Dolgu Alt: 30px;
Marj-Alt: 60px;
Sınır dipsi: katı 1px #ffffff;
Her şeyi kaydedin ve görsel yapımcıdan çıkar. Nihai sonucunuz böyle görünecek.
Nihai Sonuç: Sayfa Tasarım Varyantı/İletişim 1 Hakkında Varyant
Hakkında/Tasarım İletişim Sayfa 2 Tüm tasarım öğelerimiz yapıldığından, yalnızca bu tasarım varyantı için çeşitli şeyleri yeniden düzenleyeceğiz. İlk adım, görsel düzenleyiciyi etkinleştirmek ve yeni yaptığımız ilk tasarımı çoğaltmaktır. Çoğaltma altında görünecektir. Bundan sonra, bölümün ayarlarını sağlayarak ve tüm cihazlarda devre dışı bırakarak ilk tasarımımızı devre dışı bırakın. Kontak formu modülünü sağ sütuna sürükleyin. Ardından, ad metin modülünü, beyaz bölücüyü ve sol yan metin modülünü sol sıra sol sütuna sürükleyin.
Ardından, üst iki sırayı silin ve Kontak Formu modülü ayarlarını açın. CSS sekmesinde, bu ayarlanmış kodu “İletişim Başlığı” kutusuna yapıştırın. Yazı tipi-ağırlık: 400! Önemli; Dolgu Alt: 23px; Marj-Alt: 40px; Sınır dipsi: katı 1px #ffffff;
Modül ayarlarından kaydedin ve çıkın. Son adım, bir sütunla yeni bir alt sıra eklemektir. 350 piksel yüksekliğe sahip görünmez bir bölücü modülü ekleyin. Her şeyi kaydedin ve görsel yapımcıdan çıkar. Nihai sonucunuz aşağıdaki resme benzeyecektir.
Nihai sonucunuz: Sayfa Tasarım Varyantı/İletişim 2
