Divi ile minimal web sitesi yapmak için 8 teknik
Minimum web sitesi son birkaç yıldır çok popüler olacak şekilde gelişti. Gezinirken ziyaretçilerinize taze ve temiz hissetmeleri için odaklanmanıza izin verir. Minimum web tasarım stili İskandinav iç tasarım stilinden etkilenir. İnternet boyunca İskandinav aile odasının bir resmini görmüş olmalısınız. Mobilyaları azaltarak ve beyaz veya grilerin çoğunu kullanarak, hafif ve sakinlik odaya girmek için ücretsizdir. Web sitesi tam olarak budur. Ziyaretçilerinize, bunalmadan taşıdığınız içeriğe odaklanabilmeleri için sakin bir his vermeye odaklanıyorlar.
Bu, 4 farklı web sitesini ele alacağımız ve Divi’yi kullanarak nasıl başaracağımız olan gönderi dizisinde ikinci gönderi:
Temiz ve Soyut
Asgari
Düz
Kalın ve renkli
Haydi Yapalım şunu! 1. Giderek, minimum bir web sitesi oluştururken hatırlamanız gereken ilk şey, web sitenizde kullandığınız tasarım öğelerini azaltmaya çalışmaktır. Daha fazlasını kullanmak yerine, kullandığınız bazı öğelerin en iyisini almaya çalışın. Tasarım öğelerinizi bir tamamlayıcı olacak şekilde mükemmelleştirerek tasarımınızdan ne kadar alabileceğinize şaşıracaksınız. Web sitenizde daha az öğe kullanmak, bir genel bakış kaydetmenizi ve mesajınızı daha tutarlı ve net bir şekilde iletmenizi sağlar.
2. Marj ve dolgu en iyi arkadaşlarınızdır Minimum web sitesi genellikle çok fazla boş alana sahiptir. Sayfalarınızda ve yayınlarınızdaki boşluk, web sitenizdeki ziyaretlerinde ziyaretçilerin nefes almalarına izin verir. Sakin bir his veriyorlar ve paylaşmak istediğiniz içeriğe odaklanmanıza izin veriyorlar. Web sitenize beyaz alan eklemenin en iyi yolu, dolgu ve/veya ekstra marjla birlikte beyaz arka plan rengi ve/veya açık gri kullanmaktır. Ondan hangi sonuçların göründüğünü görmek için farklı değerlerle oynamaktan korkmayın. Bir aksan rengi kullanın Web sitenizi mümkün olduğunca minimum tutmak istiyorsanız, çok fazla farklı renk kullanmaktan da kaçınmalısınız. Birçok beyaz ve gri renk kullanarak da nenetral olun. Yazılı içeriğiniz için daha koyu bir renk kullanın. Ve tasarımınızı biraz daha sinirli hale getirmek için bir vurgu rengi seçin. Bu renk genellikle logonuzda kullandıklarınızla aynı olacaktır.
5. CTA için düğme modülü yerine metin modülünü kullanmayı düşünün, düğme modülü yerine metin modülünü kullanmayı denediniz mi? Olmalısın. Düğme modülü, görsel oluşturucuda normalde kullandığınız seçeneklerin çoğunu sunsa da, düğmenizin tüm taraflarına sınır ekleme eğilimi vardır. Metin modülü ile bundan kaçınabilirsiniz. Sadece kopyanızın tıklanabilir ve aşağıdaki basılı ekranda görebileceğiniz gibi alt limiti ekleyebilirsiniz. Bölücü, web sitenize modern bir dokunuş eklemek istiyorsanız alanın dengelenmesine yardımcı olabilir, kesinlikle web sitenizde bazı bölücüleri kullanmaya ve diğer düzeninize uyacak şekilde düzenlemeye çalışmalısınız. Birbirinden farklı tasarım öğelerini birleştirme ve tutarlı sonuçlar yaratma eğilimindedirler. 7. Bu basit ve pürüzsüz şekli kullanmak benim favorilerimden biri. Bazen, gradyan arka planı gibi en sık kullandığımız özellikleri görmezden gelme eğilimindeyiz. Tabii ki, bir arka plan görüntüsünün kendi cazibesi var, ancak radyal gradyan arka planını ince bir şekilde kullanmaya çalıştınız mı? Bu, ziyaretçilerinizin ana gölgelikinize odaklanmasını ve eylemleri tetiklemenize yardımcı olmasını sağlar. 8. Pürüzsüz animasyon kullanın (gerekirse) Son olarak, en az değil, ince animasyon kullanırken genellikle minimum web sitesi daha iyidir. Ve pürüzsüz dediğimizde, ne demek istediğimiz çok ince. Bir etkinin sadece animasyon yoğunluğunu büyük ölçüde azaltarak ne kadar pürüzsüz görülebileceğine şaşıracaksınız. Animasyon pürüzsüz olduğu sürece, bunu herhangi bir öğeye ekleyebilirsiniz ve web sitesi kullanıcısının okunabilirliğini ve deneyimini etkilemez. Tüm teknikleri öğrendikten sonra inceleyin, pratik yapmaya başlayalım. Aşağıdaki örneği adım adım yeniden yapacağız: Yapmaya başlayalım: Yukarıdaki örneği yapmak için mesafeyi ayarlamanın yeni bir standart kısmını ekleyin, toplam iki parçaya ihtiyacımız var. Birinciyi yeni bir sayfaya ekleyerek veya zaten var olan ve aşağıdaki boşlukları ekleyerek başlayalım: Üst ve Alt Dolgu: 50 piksel Sütun yapısının yeni bir satırı ekleyin. Bir sütun içeren yeni bir satır ekleyerek devam edin. Arka Plan Sütun gradyanı bu satır ayarlarını açar ve aşağıdaki sütun gradyanının arka planını ekler:
Renk #1: #ffffff Renk #2: #efef Sütun gradyan tipi: radyal
Radyal Sütun Yönü: Merkez
Başlangıç Pozisyon Sütunu:% 40
Sütun Final Konumu:% 40
Yapıştırıcı Ardından, boyut ayarlarında aşağıdaki değişiklikleri yaparak genişlik satırı ekleyin:
Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet Talang genişliği: 2
Son mesafe, hattınıza aşağıdaki alanı da ekleyin:
Üst ve Alt Dolgu: 0px
Üst ve Alt Dolgu Sütunu: 250 piksel Sol dolgu sütunu: 150px (masaüstü), 20px (tablet), 0px (telefon)
Metin Ayarlarının İlk Metin Modülü Satır ayarlarınızı değiştirdikten sonra, ihtiyacınız olan modülü eklemeye başlayabilirsiniz. Aşağıdaki metin ayarlarını kullanarak metin modülüyle kısa bir açıklama ile başlayacağız: metin yazı tipi ağırlığı: Yarı kalın
Metin yazı tipi stili: büyük harf
Metin mektubu alanı: 8px Animasyonumuz ayrıca bu metin modülünden başlayarak bu düzene çok güzel bir animasyon ekler. Animasyon ayarlarını açın ve aşağıdaki animasyonu ekleyin:
Animasyon Stili: Slayt
Animasyonlu yön: doğru
Animasyon yoğunluğu:% 5 İkinci Metin Modülü H1 Metin Ayarları Önceki metin modülünün hemen altında, devam edin ve aşağıdaki H2 metin ayarlarını içeren H1 metin modülünü ekleyin:
Yazı tipi başlığı: Georgia
Başlık Metin Rengi: #666666
Başlık Metin Boyutu: 78px (masaüstü), 50px (tablet), 40 piksel (telefon) Uzay Mektubu Başlığı: 3px
Mesafemiz aşağıdaki alan ayarlarını kullanarak bu modülün etrafındaki boşluğu yapacaktır:
Üst ve Alt Marj: 100 piksel
Sol kenar boşluğu: 100 piksel (masaüstü ve tablet), 20px (telefon)
Sol dolgu: 40 piksel Sınırımız da sol limiti gerektirir, bu nedenle devam edin ve aşağıdaki ayarlarla sol limiti ekleyin:
Sol sınır genişliği: 6px
Sol sınır rengi: #d67787
Metin Modülü Düğmesi Bağlantı ekle Düğme modülünü kullanmak yerine bağlantıyı ekleyeceğimiz metin modülünü kullanıyoruz. CTA ve bağlantınızı içerik kutusuna ekleyin. Son Bağlantı Ayarları Ardından, metin modülünüze aşağıdaki bağlantı ayarlarını uygulayın:
Bağlantı Mektubu Ağırlığı: Yarı Kalın
Yazı Tip Stili Bağlantı: Lops & Sermaye Harfleri Bağlantı metninin tesviye: sol Bağlantı Metni Rengi: #666666
Bağlantı mesafesi: 8 piksel
Yapıştırıcı Alt sınırı kullanacağız, daha sonra bu metin modülünün genişliğini de azaltacağız:
Genişlik:% 46
Modül hizalaması: sol
Mesafe ve alt sınırın metnimize çok yakın olmamasını sağlamak için ’10px’ alt dolgusunu da ekleyeceğiz. Dolgu Alt: 10 piksel
Sınırlama Şimdi aşağıdaki ayarları kullanarak alt limiti ekleyerek devam edebiliriz:
Alt sınır genişliği: 1 piksel Alt sınır rengi: #666666
Animasyonumuz da güzel animasyon ekliyor:
Animasyon Stili: SlaytAnimasyonlu yön: doğru
Animasyon gecikmesi: 100ms Animasyon yoğunluğu:% 5
Görünürlük Bölücü Modülünü Ekleyin Bu satırda ihtiyacımız olan son modül bölücü modülüdür. ‘Ekran göster’ seçeneğinin etkinleştirilmesine izin verdiğinizden emin olun.
Rengimiz, metin modülünün başlığının sol sınırı için yaptığımızla aynı rengi kullanır: ‘#d67787’.
Yapıştırıcı Bir sonraki boyutlandırma ayarlarını açın ve bölücü ağırlığı ‘2px’ olarak değiştirin.
Mesafemiz, aşağıdaki alan ayarlarını kullanarak bölücü modülünü sağa doğru itecektir: Sol kenar boşluğu: 200px Sağ kenar boşluğu: -100 piksel Son fakat en az değil animasyon, aşağıdaki animasyonu ekleyeceğiz: Animasyon Stili: Slayt
Animasyonlu Yön: Sol
Animasyon gecikmesi: 150ms Animasyon yoğunluğu:% 5
Mesafe bölümümüzün ayarlarının ikinci standart kısmını ekleyin Birincisi ile tamamlanmıştır, böylece şimdi devam edebilir ve bir öncekinin hemen altına yeni bir parça ekleyebiliriz. Bölüm ayarlarını açın ve aşağıdaki marjı ekleyin:
Üst ve Alt Marj: 80 piksel
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısına sahip satır ekleyerek devam edin:
Yapıştırıcı Ardından, satır ayarlarını açın ve aşağıdaki ayarları kullanarak satır genişliğinizi artırın: Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet Talang genişliği: 2 mesafe Ayrıca, bazı dolgu sütunu eklememiz gerekiyor: Sol dolgu 2 sütun: 100px (masaüstü), 0px (tablet ve cep telefonu)
Resim Modülünü Sütun 1’e Ekleyin Görüntümüzü Yükle Artık iki sütunumuza modül eklemeye başlayabilir. İlk sütununuza bir görüntü modülü ekleyerek ve resmi yükleyerek başlayın.
Negatif bir sağ marj ekleyerek mesafemiz görüntü modülünün genişliğini artıracaktır:
Sağ kenar boşluğu: -100 piksel Kutumuzun gölgesi, sayfada ek tasarım öğeleri oluşturmak için aşağıdaki kutu gölgesini de kullanacaktır:
Yatay konum gölge kutusu: 100px Dikey Konum Gölge Kutusu: 100px Kutunun gölgesinin dağılımının gücü: -14px
Gölge Renk: #effefeff Metin Modülü KLON düğmesi ve Görüntü Modülü Arama ve Klonlama Metin Modülü Kouse Kouse Anahtarları Metin Modülü düğmesinden başlayarak ilk bölümden üç metin modülü yeniden kullanır. Lütfen ve klonladı.
Görüntünün altına yerleştirin, ardından ilk sütundaki görüntü modülünün altına yerleştirin.
İlk bölümdeki ilk metin modülünün klonlanması ve sütun 2 Arama ve Klonlama Metin Modülüne yerleştirme İhtiyacımız olan bir sonraki metin modülü bizim tarafımızdan ilk. Lütfen ve bunu da klonladı.
Sütun 2’ye yerleştirin Birinci sütuna yerleştirmek yerine ikinci sütuna yerleştirin.
Metin Modülü Klon Başlık ve Yer 2 Sütun Arama ve Klonlama Son Metin Modülünü, metin modülünün başlığını da yeniden kullanacağız. Klonladıktan sonra Sütun 2’ye yerleştirin, yeni satırınızın ikinci sütununa yerleştirin. İçeriği H2 olarak değiştirin İçerik kutunuzdaki içeriği H2 olarak değiştirin. H2 Metin Ayarları Ardından, H2 metin ayarlarınıza aşağıdaki ayarları ekleyin: Başlık 2 Yazı Tipi: Georgiajiaj Başlık 2 Renk Metin: #666666 Başlık 2 Metin Boyutu: 58px Başlık alanı 2 harf: 3px Metin Modülü Ekle Metin Ayarları Metin Modülünün başlığı altında, aşağıdaki metin ayarlarıyla metin modülünün bir açıklamasını ekleyeceğiz: Metin yazı tipi ağırlığı: ışık
Metin mektubu alanı: 1 piksel
Yapıştırıcı lütfen ve bu metin modülünün boyutunu değiştirin:
Genişlik:% 70
Modül hizalaması: doğru Bölücü modülünü ekleyin #1 görünürlüğü İhtiyacımız olan bir sonraki modül bölücü modülüdür. Seçeneğin bölücünün etkinleştirildiğini gösterdiğinden emin olun.
Renk bölücü renginizi ‘#666666’ olarak değiştirir.
Mesafe Sonraki birkaç boşluğu ekleyin: Üst kenar boşluğu: 100 piksel
Sol kenar boşluğu: 400 piksel (masaüstü), 300 piksel (tablet), 200px (telefon)
Sağ kenar boşluğu: -100 piksel Animasyon ve elbette, iyi animasyon kullanacağız: Animasyon Stili: Slayt Animasyonlu Yön: Sol
Animasyon yoğunluğu:% 5
Bölme modülü #2 görünürlüğünü sonlandırın, ancak en az değil, başka bir bölücü modülü ekleyeceğiz. Bir kez daha, bölücü şov seçeneğinin etkinleştirildiğinden emin olun.
Renk bölücü renginizi ‘#d67787’ olarak değiştirir. Ağırlık bölücü için yapışkan kullanın ‘2px’.
Mesafe ve aşağıdaki alan ayarlarını ekleyin:
Sol kenar boşluğu: 200px (masaüstü ve tablet), 150 piksel (telefon)
Sağ kenar boşluğu: -100 piksel Animasyon tamamlamak için, bölücünüze güzel animasyonlar ekleyin: Animasyon Stili: Slayt Animasyonlu Yön: Sol Animasyon gecikmesi: 100ms
Animasyon yoğunluğu:% 5
Önizleme Şimdi tüm adımlardan geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım.
