Divi ile Düz Web Tasarımı Oluşturmak için 6 Divi Tekniği

Düz web tasarımı, temel değerleri nedeniyle popülerdir. Kullanılabilirliğe odaklanır ve önce kullanıcı deneyimine öncelik verir. Bu, kaygan ve modern bir tasarımla birlikte iyi bir düz web sitesi yapar. Düz bir web sitesindeki her tasarım öğesi, bir sayfaya eklenmeden önce iyi düşünülmelidir. Aynı zamanda basit ama güzel ve aynı zamanda ilgi çekici olmaya odaklanmalıdır. Unutmayın, ziyaretçilerinizin dikkatini çekmeli ve şirketinizin neyle ilgili olduğunu öğrenmek konusunda onları meraklandırmalıdır.

Bu gönderide, Divi ile düz web tasarımı oluşturmanın bazı tekniklerini paylaşacağız. Bu, 4 farklı web sitesi stilini ve bunları Divi kullanarak nasıl başaracağımızı ele aldığımız gönderi dizisindeki üçüncü gönderi:

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

Hadi hadi bakalım!

1. Kahraman Bölümünü Temiz ve Anlaşılır Tutun

Bu yazının girişinde belirtildiği gibi, kullanılabilirlik düz web tasarım stilinin çok önemli bir yönüdür. Ziyaretçileri fazla zorlamadan konuya girmenizi ve ilgili bilgileri ziyaretçilerle paylaşmanızı sağlar. Aynı zamanda, şirketinizin markasına uygun muhteşem bir düzenden yararlanırsınız.

Flat web tasarımları oluşturmanın birçok yolu var ama hemen hemen her yerde fark ettiğim şey kahraman bölümünün sadeliği. Ve basit tasarım kesinlikle sıkıcı anlamına gelmez. Bu, çalıların etrafında dolaşmanıza gerek olmadığı anlamına gelir. Ziyaretçileri etkilemek için oluşturduğunuz tasarımı abartmak zorunda kalmadan konuya girebilirsiniz.

2. Kutu Yapılarını Vurgulayın

Düz web tasarım stilleri hakkında tipik olan başka bir şey de kutu yapılarının kullanılmasıdır. Divi'de yolunuzu biliyorsanız, kutu yapılarını temel olarak oluşturucunun her yerinde bulabileceğinizi bilirsiniz. Web sitenize belirli bir yapı kazandırır ve önceden bir çerçeve oluşturmanıza izin verir.

Düz tasarımlarda genellikle kutu yapıları vurgulanır. Bu, insanların kolayca gezinmelerini ve aradıklarını kısa sürede bulmalarını sağlar.

3. 3 Parlak Renk Seçin

Şimdiye kadar kutu yapıları ve basit bir kahraman bölümü kullanmaktan bahsetmiştik. Teoride, kulağa sıkıcı geliyor, değil mi? Bu kullanılabilirlik faktörünü web sitenizde dengelemek için parlak bir renk paleti kullanarak onu hayata geçirebilirsiniz. Web sitenizi kişiselleştirecek ve şirketinizin değerlerine uygun hale getirecek iki veya üç parlak renk tercih edebilirsiniz.

4. Çok İnce Gradyan Renk Kombinasyonları Kullanın

Döngüyü kırmanıza yardımcı olabilecek başka bir şey de çok ince degrade renk kombinasyonları kullanmaktır. Her iki degrade rengi için aynı rengi ancak farklı bir gölge kullanın. Biri daha parlak olmalı, diğeri ise daha derin bir his veriyor. İnsanlara hemen bir gradyan gibi gelmeyecekler, ancak web sitenize biraz daha derinlik ve ayrıntı kazandırmaya yardımcı olacaklar.

5. Bir Standardı Tek Bir Zarif Yazı Tipi Ailesiyle Birleştirin

Genellikle, birçok web sitesi başlıklar için daha zarif bir yazı tipi ailesi ve gövde metni için standart bir yazı tipi ailesi kullanır. Neden işleri değiştirmiyorsun? Bu kesinlikle bir değişiklik yapacaktır. Ayrıca, insanlar genellikle açıklamaları atlama ve yalnızca başlıkları okuma eğilimindedir. Durum buysa, başlıklarınızın olabildiğince kolay okunur olmasını istersiniz, değil mi? Yazı tipi ailelerinin harika bir kombinasyonu, başlıklar için Arial ve gövde metni için Georgia kullanıyor. Georgia hala çok okunabilir, biraz daha meraklı ve web sitenize gereken kontrastı sağlıyor.

6. Yüksekliklerle Oynayın

İpuçlarından sonuncusu, sayfalarınızdaki tasarım öğelerinin yüksekliğiyle oynamaktır. Bunun web sitenizin genel görünümüne ve hissine ne kadar katkıda bulunabileceğine şaşıracaksınız. Düz tasarımlar için önerilen kutu yapısını hala koruyorsunuz ama aynı zamanda ziyaretçilerinize etkileşim de veriyorsunuz.

Ön izleme

Gönderinin önceki bölümünde birkaç teknik gördük, şimdi ipuçlarını uygulamaya koyma zamanı. Aşağıdaki çarpıcı sonucu adım adım oluşturacağız:

Oluşturmaya Başlayalım: Standart Bölüm #1 Ekle

Bölüm Ayarları

Degrade Arka Plan

Yeni bir sayfa oluşturarak ve o sayfaya bir bölüm ekleyerek başlayın. Henüz satır eklemeden bölüm ayarlarını açın. Aşağıdaki ayarlarla ince bir gradyan arka planı kullanıyoruz:

• Renk 1: #5214ff
• Renk 2: #420fc1
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 146deg
• Başlangıç ​​Konumu: %30

aralık

Bölümümüze bazı üst ve alt dolgular da ekliyoruz:

• Üst Dolgu: 55px
• Alt Dolgu: 130px

1. Satır Ekle

Satır Ayarları

Sütun Yapısı

İlk satırınızı ekleyerek devam edin. Bu bölüm toplamda üç farklı satırdan oluşacaktır. İlk satır için aşağıdaki sütun yapısını kullanıyoruz:

boyutlandırma

Hemen satır ayarlarını açın ve Boyutlandırma ayarlarında 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

Başlık Metni Modülü Ekle

H1 Metin Ayarları

Bu satıra yalnızca bir H1 Metin Modülü eklememiz gerekecek. İçeriğinizi ekledikten (ve H1 olduğundan emin olduktan sonra) H1 metin ayarlarınızı açın ve aşağıdaki değişiklikleri uygulayın:

• Başlık Yazı Tipi: Arial
• Başlık Metni Hizalama: Sol
• Başlık Metni Rengi: #FFFFFF
• Başlık Metni Boyutu: 86px (Masaüstü), 65px (Tablet), 45px (Telefon)
• Yön Çizgisi Yüksekliği: 1.2em

2. Satır Ekle

Satır Ayarları

Sütun Yapısı

Bir sonraki satıra geçelim. Yine, yalnızca bir sütunlu bir satır kullanıyoruz.

boyutlandırma

Herhangi bir modül eklemeden önce, satır ayarlarınızı açın ve aşağıdaki Boyutlandırma ayarlarını uygulayın:

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

Bir Bölücü Modülü Ekle

Renk

Sütununuza bir Bölücü Modül ekleyerek devam edin. Ayırıcı renk olarak '#edf000' kullanıyoruz.

boyutlandırma

Bundan sonra Bölücü Modülümüzün Boyutlandırma ayarlarını yapacağız:

• Bölücü Ağırlığı: 10px
• Genişlik: %64
• Modül Hizalaması: Sağ

3. Satır Ekle

Satır Ayarları

Sütun Yapısı

Son olarak, iki sütunlu bir satır ekleyin.

boyutlandırma

Satır ayarlarını açın ve Boyutlandırma ayarlarında 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

aralık

Üst ve alt dolguya '0px' ekleyerek satır özel dolgusunu kaldırın.

Sütun 2'ye Açıklama Metni Modülü Ekleme

Metin Ayarları

Aşağıdaki metin ayarlarını kullanarak ikinci sütuna bir açıklama Metin Modülü ekleyerek devam edin:

• Metin Yazı Tipi: Gürcistan
• Metin Rengi: #FFFFFF
• Metin Boyutu: 27px (Masaüstü), 22px (Tablet), 18px (Telefon)
• Metin Satır Yüksekliği: 1.9em
• Metin Hizalama: Sağ

Sütun 2'ye Düğme Modülü Ekleme

Düğme Hizalama

Metin Modülünüzün Hizalama ayarlarında da satırınızı sağa hizalayın.

Düğme Ayarları

Kahraman bölümümüze eklememiz gereken bir sonraki ve son modül bir Düğme Modülü. Kopyayı ekledikten sonra, ona aşağıdaki düğme ayarlarını uygulayın:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 27px
• Düğme Metin Rengi: #303030
• Düğme Arka Plan Rengi: #edf000
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px
• Düğme Yazı Tipi: Gürcistan

Standart Bölüm #2 Ekle

Bölüm Ayarları

aralık

İkinci bölümümüze geçebiliriz! Bölüm ayarlarını açın ve aşağıdaki dolguyu kullanın:

• Üst Dolgu: 155px
• Alt Dolgu: 200px

1. Satır Ekle

Satır Ayarları

Sütun Yapısı

Ekleyeceğimiz ilk satır kırmızı dairemizi içerecektir. Satırınız için aşağıdaki sütun yapısını seçin:

Sütun 1 Gradyan Arka Planı

Bir Görüntü Modülü yüklemek yerine, sütun 1 radyal gradyan arka planını kullanacağız. Renk paletimizde kırmızı rengi, tamamen şeffaf bir renkle birlikte kullanıyoruz.

• Renk 1: #ff3233
• Renk 2: rgba(255,255,255,0)
• Sütun 1 Gradyan Türü: Radyal
• Sütun 1 Başlangıç ​​Konumu: %45
• Sütun 1 Bitiş Konumu: %45

boyutlandırma

Boyutlandırma ayarlarınızı değiştirerek devam edin:

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

Bir Bölücü Modülü Ekle

Bölücüyü Gizle

Sütun arka planımızın göründüğünden emin olmak için ilk sütuna bir Bölücü Modül ekleyeceğiz. Ancak, bölücünün görünmesini istemiyoruz. Bu yüzden 'Show Divider' seçeneğini devre dışı bırakacağız.

aralık

Sütun gradyan arka planının görünmesini sağlamak için, Bölücü Modülüne aşağıdaki kenar boşluğunu ekleyeceğiz:

• Üst: 150 piksel (Masaüstü), 200 piksel (Tablet ve Telefon)
• Alt: 150 piksel (Masaüstü), 200 piksel (Tablet ve Telefon)

Satır Ayarlarına Dön

Boşluk Ekle

Bu kırmızı daireyi sayfamızdaki her iki bölümle örtüştüreceğiz. Bunu yapmak için, satır ayarlarını yeniden açıp bir miktar negatif kenar boşluğu ekleyeceğiz:

• Üst Kenar Boşluğu: -350px (Masaüstü), -400px (Tablet ve Telefon)
• Sol Kenar Boşluğu: -250px (Masaüstü ve Telefon), -400px (Tablet)

2. Satır Ekle

Satır Ayarları

Sütun Yapısı

İkinci sıramıza geçelim. Bu satır, bir Metin Modülü başlığı ve ayırıcı içerecektir. Aşağıdaki sütun yapısını seçin:

aralık

Üst dolgu için '0px' kullanarak bu satırın oluşturduğu alanı azaltın.

Başlık Metni Modülü Ekle

H2 Metin Ayarları

Artık modüllerimizi ekleyebiliriz. Aşağıdaki metin ayarlarıyla yeni bir H2 Metin Modülü ekleyerek başlayın:

• Başlık 2 Yazı Tipi: Arial
• Başlık 2 Metin Hizalama: Orta
• Başlık Metni Rengi: #303030
• Başlık 2 Metin Boyutu: 50px (Masaüstü), 45px (Tablet), 32px (Telefon)
• Başlık 2 Çizgi Yüksekliği: 1.3em

Bir Bölücü Modülü Ekle

Renk

Metin Modülünün hemen altına bir Bölücü Modül ekleyin. Bu sefer bölücünün görünmesini istiyoruz. '#5214ff' renk kodunu verin.

boyutlandırma

Daha sonra Bölücü Modülünüzün Boyutlandırma ayarlarını değiştirin:

• Bölücü Ağırlığı: 10px
• Genişlik: %30
• Modül Hizalaması: Merkez

3. Satır Ekle

Satır Ayarları

Sütun Yapısı

Dört sütun kullanarak son satırımızı oluşturmanın zamanı geldi.

Bölüm Gradyan Arka Planını Kopyala

Kahraman bölümü için kullandığımız gradyan arka planının aynısını kullanacağız. Bu nedenle, kendimize biraz zaman kazandırmak için bu ayarları kopyalayacağız.

Sütun 1 ve 3'te Gradyan Arka Planı Yapıştır

Ve bunları birinci ve üçüncü sütunlara yapıştırın.

boyutlandırma

Sonraki Boyutlandırma ayarlarına gidin ve sıranızın ekranın tüm genişliğini kaplamasını sağlayın.

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

aralık

Aralık ayarlarını da değiştireceğiz:

• Üst Kenar Boşluğu: 100 piksel
• Üst ve Alt Dolgu: 0px

Bir Bulanıklık Modülü Ekle

Simge Seç

Artık satır ayarlarını tamamladığımıza göre modüllerimizi eklemeye başlayabiliriz! Her sütun için bir tane olmak üzere dört Blurb Modülüne ihtiyacımız olacak. Bunları ayrı ayrı oluşturmak yerine, bir tane oluşturup daha sonra çoğaltacağız. Tanıtıcı içeriğinizi ekledikten sonra devam edin ve istediğiniz bir simgeyi seçin.

Simge Ayarları

Ardından simge ayarlarınızı açın ve '#edf000' simge rengini kullanın.

Metin Ayarları

Aşağıdaki metin ayarlarını kullanarak devam edin:

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

Başlık Metni Ayarları

Daha sonra başlık metni ayarlarını açın ve bazı değişiklikler yapın:

• Başlık Yazı Tipi: Arial
• Başlık Metin Boyutu: 31px
• Başlık Satırı Yüksekliği: 2.6em

Gövde Metni Ayarları

Aynı şekilde, gövde metnini oluşturduğumuz düzene uygun hale getireceğiz:

• Gövde Yazı Tipi: Gürcistan
• Gövde Metni Boyutu: 18px
• Gövde Çizgisi Yüksekliği: 2.2em

aralık

Ve son olarak, Blurb Modülünüze nefes alması için biraz boşluk bırakmak için aşağıdaki özel dolguyu ekleyin:

• Üst ve Alt Dolgu: 50px
• Sol ve Sağ Dolgu: 20px

Blurb Modülünü Klonla ve Değiştir

Blurb Modülünü Klonla ve 2. Sütundaki Yeri

Yeni oluşturduğunuz Blurb Modülünü klonlayın ve kopyayı ikinci sütuna yerleştirin.

Simgeyi Değiştir

Değiştirmeniz gereken ilk şey simgedir.

Simge Rengini Değiştir

Simge rengini de '#ff3233' olarak değiştirin.

Metin Rengini Değiştir

Beyaz bir arka plan rengiyle uğraştığımız için, metin ayarlarından metin rengini 'Koyu' olarak değiştirmeniz gerekecek.

aralık

Her şeyi biraz daha ortaya çıkarmak için Blurb Modules'ün yüksekliğiyle oynuyoruz. Bunu yapmak için boşluk ayarlarını açın ve aşağıdaki üst kenar boşluğu değerlerini kullanın:

• Üst Kenar Boşluğu: 100px (Masaüstü), 0px (Tablet ve Telefon)

Kutu Gölge

Üstüne üstlük, çok ince bir gölge de ekleyeceğiz:

• Kutu Gölge Bulanıklığı Gücü: 80px
• Kutu Gölge Yayılma Gücü: -10px
• Gölge Rengi: rgba(0,0,0,0.11)

Her İki Blurb Modülünü Klonla ve Kalan Sütunlardaki Yeri

Klon Modülleri

Artık kalan sütunlar için yeniden kullanacağımız iki Blurb Modülümüz var. Her birini bir kez klonlayın.

Sütun 3 ve 4'e yerleştirin

Yinelenen Blurb Modüllerini ilgili sütunlarına yerleştirin ve işiniz bitti!

Ön izleme

Artık tüm adımlardan geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir kez bakalım.

Son düşünceler

Bu gönderide, Divi ile düz web tasarımı oluşturmaya yönelik bazı ipuçlarını ve teknikleri paylaştık. Düz web tasarımı günümüzde çok popüler çünkü ziyaretçilerin sayfalar arasında kolayca gezinmesine ve bilgileri daha hızlı işlemesine olanak tanıyor. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!