Divi ile Minimal Web Siteleri Oluşturmak için 8 Teknik

Minimal web siteleri son birkaç yılda gerçekten popüler hale geldi. Gezinirken ziyaretçilerinize taze ve temiz bir his vermeye odaklanmanıza izin verirler. Minimal web tasarım stili, İskandinav iç tasarım stilinden etkilenir. İnternette kesinlikle İskandinav oturma odalarının resimlerini görmüşsünüzdür. Mobilyaları azaltarak ve çoğunlukla beyaz veya gri renkler kullanarak odaya ışık ve dinginlik girmek serbesttir. Minimal web sitelerinin de yaptığı tam olarak budur. Ziyaretçilerinize dingin bir his vermeye odaklanırlar, böylece getirdiğiniz içeriğe bunalmadan odaklanabilirler.

Bu, 4 farklı web sitesi stilini ve bunlara Divi kullanarak nasıl ulaşılacağını ele alacağımız gönderi dizisindeki ikinci gönderi:

1. Temiz ve Soyut
2. En az
3. Düz
4. Cesur ve Renkli

Hadi hadi bakalım!

1. Daha Az Daha Fazlasıdır

Minimal bir web sitesi oluştururken aklınızda bulundurmanız gereken ilk şey, web sitenizde kullandığınız tasarım öğelerini azaltmaya çalışmaktır. Daha fazlasını kullanmak yerine, kullandığınız birkaç öğeden en iyisini elde etmeye çalışın.

Tasarım öğelerinizi tamamlayıcı olacak şekilde ince ayar yaparak tasarımınızdan ne kadar çok şey çıkarabileceğinize şaşıracaksınız. Web sitenizde daha az öğe kullanmak, bir genel bakış tutmanıza ve mesajınızı daha tutarlı ve net bir şekilde iletmenize de olanak tanır.

2. Kenar Boşluğu ve Dolgu En İyi Arkadaşlarınızdır

Minimal web siteleri genellikle çok fazla boşluk içerir. Sayfalarınızdaki ve gönderilerinizdeki boşluk, ziyaretçilerin web sitenizi ziyaretleri boyunca nefes almalarını sağlar. Bir dinginlik duygusu verirler ve paylaşmak istediğiniz içeriğe odaklanmanızı sağlarlar.

Web sitenize boşluk eklemenin en iyi yolu, ekstra dolgu ve/veya kenar boşluğu ile birlikte beyaz ve/veya açık gri arka plan renkleri kullanmaktır. Bundan ne sonuç çıkacağını görmek için farklı değerlerle oynamaktan korkmayın.

3. Tek Vurgulu Renk Kullanın

Web sitenizi olabildiğince minimal tutmak istiyorsanız, çok fazla farklı renk kullanmaktan da kaçınmalısınız. Çok fazla beyaz ve gri kullanarak mümkün olduğunca nötr olun. Yazılı içeriğiniz için daha koyu renkler kullanın. Ve tasarımınızı biraz daha keskin hale getirmek için bir vurgu rengi seçin. Bu renk genellikle logonuzda kullandığınız renkle aynı olacaktır.

4. Ya Görüntüler ya da Çizimler – İkisi Değil

Genel olarak, web sitenizi oluştururken gerçek hayattan görüntüler veya illüstrasyonlar arasında seçim yapmanız önerilir. Her ikisini aynı anda kullanmak, web sitenizi gerçekten karmaşık hale getirebilir ve kesinlikle kaçınmak istediğiniz bir şey olan farklı web sitesi stillerini karıştırabilir.

Yine de bir istisna var. Örneğin, Blurb Modüllerinizdeki simge illüstrasyonlarıyla birlikte görüntüleri kullanmaktan çekinmeyin. Minimum düzeydeyse ve sayfanızdaki içeriği destekliyorsa, gitmeye hazırsınız.

5. CTA'lar için Düğme Modülleri Yerine Metin Modüllerini Kullanmayı Düşünün

Düğme Modülü yerine Metin Modülü kullanmayı hiç denediniz mi? Kesinlikle yapmalısın. Düğme Modülleri size Visual Builder'da alışkın olduğunuz çoğu seçeneği sunsa da, düğmenizin her tarafına kenarlık ekleme eğilimi vardır. Bir Metin Modülü ile bundan kaçınabilirsiniz. Aşağıdaki yazdırma ekranında görebileceğiniz gibi kopyanızı tıklanabilir hale getirebilir ve bir alt kenarlık ekleyebilirsiniz.

6. Bölücüler Boşluğu Dengelemeye Yardımcı Olabilir

Web sitenize modern bir dokunuş katmak istiyorsanız, kesinlikle web sitenizde birden fazla ayırıcı kullanmayı denemeli ve bunları düzeninizin geri kalanıyla eşleşecek şekilde biçimlendirmelisiniz.

Farklı tasarım öğelerini birbirine bağlama ve tutarlı bir sonuç yaratma eğilimindedirler.

7. Basit ve İnce Şekiller Kullanın

Bu benim favorilerimden biri. Bazen, degrade arka planlar gibi en çok alıştığımız özellikleri ihmal etme eğilimindeyiz. Elbette, bir arka plan görüntüsü kullanmanın çekiciliği vardır, ancak hiç ince bir şekilde radyal degrade arka planı kullanmayı denediniz mi? Ziyaretçilerinizin başlıklarınıza odaklanmasını sağlar ve eylemi tetiklemenize yardımcı olur.

8. İnce Animasyonlar Kullanın (Gerekirse)

Son olarak, minimal bir web sitesi genellikle ince animasyonlar kullanıldığında daha da iyi hale gelir. Ve süptil dediğimizde, gerçekten süptil demek istiyoruz. Animasyon Yoğunluğunu büyük ölçüde azaltarak bir efektin ne kadar pürüzsüz görünebileceğine şaşıracaksınız. Animasyon ince olduğu sürece, onu herhangi bir öğeye ekleyebilirsiniz ve web sitenizin okunabilirliğini ve kullanıcı deneyimini etkilemez.

Ön izleme

Artık tüm teknikleri gözden geçirdiğimize göre, onları uygulamaya koymaya başlayalım. Aşağıdaki örneği adım adım yeniden oluşturacağız:

Oluşturmaya Başlayalım: Yeni Bir Standart Bölüm Ekle

Bölüm Ayarları

aralık

Yukarıdaki örneği oluşturmak için toplamda iki bölüme ihtiyacımız olacak. İlkini yeni veya mevcut bir sayfaya ekleyerek ve aşağıdaki Boşluğu ekleyerek başlayalım:

• Üst ve Alt Dolgu: 50px

Yeni Satır Ekle

Sütun Yapısı

Bir sütun içeren yeni bir satır ekleyerek devam edin.

Sütun Gradyan Arka Planı

Bu satırın ayarlarını açın ve aşağıdaki sütun gradyan arka planını buna ekleyin:

• Renk #1: #ffffff
• Renk #2: #efefe
• Sütun Gradyan Türü: Radyal
• Sütun Radyal Yönü: Merkez
• Sütun Başlangıç ​​Konumu: %40
• Sütun Bitiş Konumu: %40

boyutlandırma

Ardından, Boyutlandırma ayarlarında aşağıdaki değişiklikleri yaparak satırın genişliğini artırın:

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

aralık

Son olarak, satırınıza aşağıdaki Boşluğu da ekleyin:

• Üst ve Alt Dolgu: 0px
• Sütun Üst ve Alt Dolgusu: 250px
• Sütun Sol Dolgusu: 150px (Masaüstü), 20px (Tablet), 0px (Telefon)

İlk Metin Modülü

Metin Ayarları

Satır ayarlarınızı değiştirdikten sonra, ihtiyacınız olan modülleri eklemeye başlayabilirsiniz. Aşağıdaki metin ayarlarını kullanarak kısa bir Metin Modülü açıklamasıyla başlayacağız:

• Metin Yazı Tipi Ağırlığı: Yarı Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Harf Aralığı: 8px

Animasyon

Bu Metin Modülünden başlayarak, bu düzene çok ince animasyonlar da ekliyoruz. Animasyon ayarlarını açın ve aşağıdaki animasyonu ekleyin:

• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• 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 bir H1 Metin Modülü ekleyin:

• Başlık Yazı Tipi: Gürcistan
• Başlık Metni Rengi: #666666
• Başlık Metni Boyutu: 78px (Masaüstü), 50px (Tablet), 40px (Telefon)
• Başlık Harf Aralığı: 3px

aralık

Aşağıdaki Aralık ayarlarını kullanarak bu modülün etrafında boşluk oluşturacağız:

• Üst ve Alt Kenar Boşluğu: 100 piksel
• Sol Kenar Boşluğu: 100 piksel (Masaüstü ve Tablet), 20 piksel (Telefon)
• Sol Dolgu: 40px

Sınır

Ayrıca bir sol kenarlığa ihtiyacımız olacak, bu yüzden devam edin ve aşağıdaki ayarlarla bir sol kenarlık ekleyin:

• Sol Kenar Genişliği: 6px
• Sol Kenar Rengi: #d67787

Düğme Metin Modülü

Link ekle

Bir Düğme Modülü kullanmak yerine, bağlantı ekleyeceğimiz bir Metin Modülü kullanıyoruz. CTA'nızı ve bağlantınızı İçerik kutusuna ekleyin.

Bağlantı Metni Ayarları

Ardından, Metin Modülünüze aşağıdaki Bağlantı metni ayarlarını uygulayın:

• Bağlantı Yazı Tipi Ağırlığı: Yarı Kalın
• Bağlantı Yazı Tipi Stili: İtalik ve Büyük Harf
• Bağlantı Metni Hizalama: Sol
• Bağlantı Metni Rengi: #666666
• Bağlantı Harfi Aralığı: 8px

boyutlandırma

Alt kenarlık kullanacağımız için daha sonra bu Metin Modülünün Genişliğini de azaltacağız:

• Genişlik: %46
• Modül Hizalama: Sol

aralık

Alt sınırın metnimize çok yakın olmadığından emin olmak için '10px' alt dolgusu da ekleyeceğiz.

• Alt Dolgu: 10px

Sınır

Şimdi aşağıdaki ayarları kullanarak bir alt kenarlık eklemeye devam edebiliriz:

• Alt Kenar Genişliği: 1px
• Alt Kenar Rengi: #666666

Animasyon

Ayrıca ince bir animasyon ekliyoruz:

• Animasyon Stili: Slayt
• Animasyon Yönü: Sağ
• Animasyon Gecikmesi: 100ms
• Animasyon Yoğunluğu: %5

Bölücü Modülü Ekle

görünürlük

Bu satırda ihtiyacımız olan son modül bir Bölücü Modül. 'Bölücüyü Göster' seçeneğini etkin bıraktığınızdan emin olun.

Renk

Bu ayırıcı için, Metin Modülü başlığının sol kenarlığı için kullandığımız rengin aynısını kullanıyoruz: '#d67787'.

boyutlandırma

Daha sonra Boyutlandırma ayarlarını açın ve Bölücü Ağırlığını '2px' olarak değiştirin.

aralık

Aşağıdaki Aralık ayarlarını kullanarak Bölücü Modülü sağa iteceğiz:

• Sol Kenar Boşluğu: 200 piksel
• Sağ Kenar Boşluğu: -100px

Animasyon

Son olarak, aşağıdaki Animasyonu ekleyeceğiz:

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Gecikmesi: 150ms
• Animasyon Yoğunluğu: %5

İkinci Bir Standart Bölüm Ekle

Bölüm Ayarları

aralık

İlk bölümü bitirdik, şimdi devam edip bir öncekinin hemen altına yeni bir bölüm ekleyebiliriz. Bölüm ayarlarını açın ve buna aşağıdaki kenar boşluğunu ekleyin:

• Üst ve Alt Kenar Boşluğu: 80px

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısına sahip bir satır ekleyerek devam edin:

boyutlandırma

Ardından, satır ayarlarını açın ve aşağıdaki ayarları kullanarak satırınızın genişliğini artırın:

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

aralık

Sütun 2 dolgusu da eklememiz gerekecek:

• Sütun 2 Sol Dolgu: 100px (Masaüstü), 0px (Tablet ve Telefon)

Sütun 1'e Görüntü Modülü Ekle

Fotoğraf yükleniyor

Artık iki sütunumuza modül eklemeye başlayabiliriz. İlk sütununuza bir Resim Modülü ekleyerek başlayın ve istediğiniz bir resmi yükleyin.

aralık

Negatif bir sağ kenar boşluğu ekleyerek Görüntü Modülünün genişliğini artıracağız:

• Sağ Kenar Boşluğu: -100px

Kutu Gölge

Sayfada fazladan bir tasarım öğesi oluşturmak için aşağıdaki kutu gölgesini de kullanacağız:

• Kutu Gölgesi Yatay Konumu: 100px
• Kutu Gölgesi Dikey Konumu: 100px
• Kutu Gölge Yayılma Gücü: -14px
• Gölge Rengi: #efefef

Klonlama Düğmesi Metin Modülü ve Görüntü Modülünün Altına Yerleştirin

Buton Metin Modülünü Bul ve Klonla

Metin Modülü düğmesinden başlayarak ilk bölümün üç Metin Modülünü de yeniden kullanacağız. Devam et ve klonla.

Resmin Altına Yerleştirin

Ardından, ilk sütundaki Görüntü Modülünün hemen altına yerleştirin.

Birinci Bölümdeki İlk Metin Modülünü Klonla ve Sütun 2'deki Yeri

Metin Modülünü Bul ve Klonla

İhtiyacımız olan bir sonraki Metin Modülü, bölümümüzdeki ilk Modül. Devam edin ve bunu da klonlayın.

Sütun 2'ye yerleştirin

İlk sütuna yerleştirmek yerine ikinci sütuna bırakın.

Klon Başlık Metin Modülü ve Sütun 2'deki Yeri

Metin Modülünü Bul ve Klonla

Son olarak, Metin Modülü başlığını da yeniden kullanacağız.

Sütun 2'ye yerleştirin

Klonladıktan sonra, 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: Gürcistan
• Başlık 2 Metin Rengi: #666666
• Başlık 2 Metin Boyutu: 58px
• Başlık 2 Harf Aralığı: 3px

Açıklama Metni Modülü Ekle

Metin Ayarları

Metin Modülü başlığının altına, aşağıdaki metin ayarlarıyla bir açıklama Metin Modülü ekleyeceğiz:

• Metin Yazı Tipi Ağırlığı: Hafif
• Metin Harf Aralığı: 1px

boyutlandırma

Devam edin ve bu Metin Modülünün Boyutlandırmasını değiştirin:

• Genişlik: %70
• Modül Hizalaması: Sağ

Bölücü Modül #1 Ekle

görünürlük

İhtiyacımız olan bir sonraki modül bir Bölücü Modül. Show Divider seçeneğinin etkinleştirildiğinden emin olun.

Renk

Ayırıcınızın rengini '#666666' olarak değiştirin.

aralık

Daha sonra biraz Boşluk ekleyin:

• Üst Kenar Boşluğu: 100 piksel
• Sol Kenar Boşluğu: 400 piksel (Masaüstü), 300 piksel (Tablet), 200 piksel (Telefon)
• Sağ Kenar Boşluğu: -100px

Animasyon

Ve elbette, ince bir animasyon da kullanacağız:

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Yoğunluğu: %5

Bölücü Modül #2 Ekle

görünürlük

Son fakat en az değil, başka bir Bölücü Modül ekleyeceğiz. Yine, Show Divider seçeneğinin etkinleştirildiğinden emin olun.

Renk

Ayırıcınızın rengini '#d67787' olarak değiştirin.

boyutlandırma

Bölücü Ağırlığı için '2px' kullanın.

aralık

Ve aşağıdaki Aralık ayarlarını ekleyin:

• Sol Kenar Boşluğu: 200 piksel (Masaüstü ve Tablet), 150 piksel (Telefon)
• Sağ Kenar Boşluğu: -100px

Animasyon

Bitirmek için ayırıcınıza ince bir animasyon ekleyin:

• Animasyon Stili: Slayt
• Animasyon Yönü: Sol
• Animasyon Gecikmesi: 100ms
• Animasyon Yoğunluğu: %5

Ön izleme

Artık tüm adımlardan geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Bu gönderide, size minimal web siteleri oluşturma konusunda bazı harika Divi teknikleri gösterdik. Bu, yaratıcılığınızı ve Divi'nin en iyi yerleşik seçeneklerinden bazılarını kullanarak güzel tasarım stillerini nasıl hayata geçireceğinize dair serinin ikinci gönderisidir. Sonraki gönderilerde, daha çarpıcı tasarım stillerine nasıl ulaşılacağına ilişkin teknikleri paylaşacağız. Herhangi bir sorunuz veya öneriniz varsa, aşağıya bir yorum bölümü bıraktığınızdan emin olun!