Divi ile Çarpıcı Bir Tasarım Oluşturmak için Harf Aralığı Nasıl Etkili Kullanılır

Hiç aynı anda yazı tipi aileleri ve harf aralığı ile deneme yapmayı denediniz mi? Göz alıcı sonuçlar getirebileceğini söylememe izin verin. Tasarımınıza soyut bir his verir ve 2018 tasarım trendleriyle de uyumludur.

Metninize sadece fazladan harf aralığı eklemekle kalmaz, karakterlerinizi birbirine yaklaştırmak için negatif harf aralığı da kullanabilirsiniz. Roney Gibson'ın tasarımlarından birinden ilham alan bu eğitimde, tüm ekran boyutlarında güzel sonuçlar elde etmek için harf aralığını nasıl yaratıcı ve etkili bir şekilde kullanacağınızı göstereceğiz. Bunun için yalnızca Divi'nin yerleşik seçeneklerini kullanıyoruz.

Ön izleme

Öğreticiye dalmadan önce, bu eğitimden farklı ekran boyutlarında neler bekleyebileceğinize hızlıca bir göz atalım.

Renk Paleti #1

• Renk #1: #f44f34
• Renk #2: #c81a33
• Renk #3: #e03933
• Renk #4: #f29d96
• Renk #5: #44cae1

Renk Paleti #2

• Renk #1: #dddddd
• Renk #2: #b2b2b2
• Renk #3: #cccccc
• Renk #4: #5b5b5b
• Renk #5: #ff0022

Divi ile Çarpıcı Bir Tasarım Oluşturmak için Harf Aralığı Nasıl Etkili Kullanılır

Youtube Kanalımıza Abone Olun

Yaklaşmak

• Bu tasarıma uygulayabileceğiniz iki renk paleti bulunmaktadır.
• Bir renk paleti seçin ve numaralandırmayı olduğu gibi bırakın
• Eğitim boyunca, seçtiğiniz renk paletinden almanız gereken belirli bir renk numarasına değineceğiz.
• Daha sonra, yine de bir bölümü klonlayabilir ve bunun yerine diğer renk paletini uygulayabilirsiniz.
• Genel görünümü ve hissi oluşturmak için hem fazladan hem de negatif harf aralığı kullanıyoruz
• Harf aralığı değeri, yazı tipinizin boyutuna bağlıdır
• Bu, her yazı tipi boyutu (masaüstü, tablet, telefon) için harf aralığını değiştirmemiz gerektiği anlamına gelir.

Yeni Bir Standart Bölüm Ekle

Degrade Arka Plan

Yeni bir sayfa oluşturun veya mevcut bir sayfayı açın ve Visual Builder'a geçin. Ardından yeni bir bölüm ekleyin, ayarları açın ve ona aşağıdaki degrade arka plan rengini uygulayın:

• Birinci Degrade Renk: Renk #1
• İkinci Degrade Renk: Renk #2
• Gradyan Türü: Doğrusal
• Gradyan Yönü: 160deg
• Bitiş Konumu: %53

aralık

Ardından Tasarım sekmesine gidin, Aralık alt kategorisini açın ve aşağıdaki özel dolguyu ekleyerek bölümünüzün üstünde ve altında biraz boşluk oluşturun:

• Üst Dolgu: 60px
• Alt Dolgu: 180px

İlk Satırı Ekle

Sütun Yapısı

Bölüm ayarlarıyla işiniz bittiğinde, aşağıdaki sütun yapısını kullanarak ilk satırınızı ekleyebilirsiniz:

aralık

Herhangi bir modül eklemeden önce, satır ayarlarını açın ve alt dolguya '150px' ekleyin.

Ad Metin Modülü Ekle

Metin Ayarları

Artık bu satıra istenilen modülleri eklemeye başlayabiliriz. Yapacağımız ilk şey, ilk ad için bir Metin Modülü eklemek. Metin boyutu ve harf aralığı her ekran boyutu için farklı olacaktır. Metnin boyutunu korurken karakterleri birbirine yaklaştırmak için negatif harf aralığı kullanıyoruz:

• Metin Yazı Tipi Ağırlığı: Ultra Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Boyutu: 300px (Masaüstü), 210px (Tablet), 125px (Telefon)
• Metin Rengi: Renk #3
• Metin Harf Aralığı: -20px (Masaüstü), -15px (Tablet), -8px (Telefon)
• Metin Satır Yüksekliği: 1em
• Metin Gölgesi Dikey Uzunluğu: 0.03em
• Metin Gölge Bulanıklığı Gücü: 0.02em
• Metin Gölge Rengi: rgba(0,0,0,0.47)
• Metin Yönü: Merkez

Soyadı Metin Modülü Ekle

Metin Ayarları

Önceki Metin Modülünün hemen altına, soyadını içeren bir tane daha ekleyin. Aşağıdaki metin ayarlarını buna uygulayın:

• Metin Yazı Tipi: Allura
• Metin Boyutu: 88px (Masaüstü), 78px (Tablet), 39px (Telefon)
• Metin Rengi: rgba(255,255,255,0.86)
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Bu Metin Modülünün bir öncekiyle örtüşmesini sağlamak için, ona aşağıdaki üst kenar boşluğunu da ekleyin:

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

İş Unvanı Metin Modülü Ekle

Metin Ayarları

Bu satırdaki son Metin Modülü, iş unvanını (veya paylaşmak istediğiniz herhangi bir şeyi) paylaşmak için kullanılır. Bu Metin Modülü için kontrast oluşturmak için fazladan harf aralığı kullanıyoruz.

• Metin Yazı Tipi Stili: Büyük Harf
• Metin Boyutu: 17px (Masaüstü), 16px (Tablet), 14px (Telefon)
• Metin Rengi: Renk #4
• Harf Aralığı: 22px (Masaüstü), 14px (Tablet), 8px (Telefon)
• Metin Satırı Yüksekliği: 1.5em
• Metin Yönü: Merkez

aralık

Ayrıca, bu Metin Modülü ile öncekiler arasında yeterli boşluk yaratmak için bu Metin Modülünün üst kenarına '100px' ekleyeceğiz.

İkinci Satır Ekle

Sütun Yapısı

Şimdi ilk satırı bitirdiğimize göre bir sonrakine geçebiliriz. Aşağıdaki sütun yapısına ihtiyacımız olacak:

Arka plan rengi

Herhangi bir modül eklemeden önce, satır ayarlarını açın ve satır arka plan rengi olarak '#ffffff' kullanın.

Sütun 1 Arka Plan Rengi

Ayrıca '#f7f7f7' renk kodunu kullanarak ilk sütuna hafif gri bir arka plan rengi uygulayacağız.

boyutlandırma

Sütunların aynı yükseklikte olmasını istiyoruz, bu yüzden Boyutlandırma alt kategorisinde 'Sütun Yüksekliklerini Eşitle' seçeneğini etkinleştireceğiz.

aralık

Sütunların üstündeki ve altındaki tüm boşluğu kaldırmak için satırımızın üst ve alt dolgusuna '0px' ekleyeceğiz.

Kutu Gölge

Son olarak, daha koyu bir gölge rengiyle birlikte oldukça bulanıklık gücüne sahip bir Kutu Gölge uygulayacağız:

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.49)

Sütun 1'e İlk Metin Modülünü Ekleme

Metin Ayarları

Şimdi ilk sütuna modüller eklemeye başlayalım. Aşağıdaki metin ayarlarını kullanacağımız bir 'beni tanıyın' Metin Modülü ile başlayacağız:

• Metin Yazı Tipi: Allura
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Boyutu: 29px
• Metin Rengi: Renk #5

aralık

Metin Modülünü masaüstünde dikey olarak ortalamak için bir miktar üst kenar boşluğu eklememiz gerekecek. Ayrıca sol tarafta biraz boşluk yaratacağız:

• Üst Kenar Boşluğu: 250px (Masaüstü), 50px (Tablet ve Telefon)
• Sol Kenar Boşluğu: %17 (Masaüstü), %10 (Tablet ve Telefon)

Sütun 1'e İkinci Metin Modülü Ekle

Metin Ayarları

Önceki Metin Modülünün hemen altına başka bir Metin Modülü ekleyin. İçeriğinizi ekledikten sonra aşağıdaki metin ayarlarını uygulayın:

• Metin Yazı Tipi: Adamina
• Metin Yazı Tipi Ağırlığı: Kalın
• Metin Yazı Tipi Stili: Büyük Harf
• Metin Boyutu: 71px (Masaüstü), 50px (Tablet), 45px (Telefon)
• Metin Rengi: Renk #2
• Harf Aralığı: -5px (Ekran boyutları arasındaki metin boyutu farkı ihmal edilebilir, bu yüzden bu değeri tüm ekran boyutlarında kullanıyoruz)
• Metin Satır Yüksekliği: 1em

aralık

Ardından Aralık alt kategorisini açın ve ona aşağıdaki özel kenar boşluğunu uygulayın:

• Alt Kenar Boşluğu: 50px (Tablet ve Telefon)
• Sol Kenar Boşluğu: %17 (Masaüstü), %10 (Tablet ve Telefon)

Sütun 2'ye Görüntü Modülü Ekle

Fotoğraf yükleniyor

Gerekli tüm modülleri ilk sütuna ekledik, böylece şimdi ikincisine geçebiliriz. Orada ekleyeceğimiz ilk şey bir Görüntü Modülü.

Görüntü Hizalama

Sonraki Tasarım sekmesine gidin ve Hizalama alt kategorisinde Sol Görüntü Hizalamayı etkinleştirin. Ayrıca, 'Görüntüyü Mobilde Her Zaman Ortala' seçeneğinin devre dışı olduğundan emin olun.

aralık

Aşağıdaki üst kenar boşluğunu kullanarak bu resmi satırın üst kısmıyla örtüştüreceğiz:

• Üst Kenar Boşluğu: -50px (Yalnızca Masaüstü)
• Sol Kenar Boşluğu: %5 (Tablet)

Sınır

Ayrıca aşağıdaki ayarları kullanarak bu resme bir kenarlık ekleyeceğiz:

• Kenar Genişliği: 35px
• Kenar Rengi: #ffffff
• Kenar Stili: Katı

Kutu Gölge

Son olarak, biraz derinlik yaratmak için bir kutu gölgesi ekleyeceğiz:

• Kutu Gölge Dikey Konumu: 24px
• Kutu Gölge Bulanıklığı Gücü: 41px
• Gölge Rengi: rgba(0,0,0,0.3)

Sütun 2'ye Metin Modülü Ekle

Metin Ayarları

Eklediğiniz Görüntü Modülünün hemen altına açıklamanız için bir Metin Modülü ekleyin. İçeriğinizi ekledikten sonra, ona aşağıdaki metin ayarlarını uygulayın:

• Metin Boyutu: 15px
• Metin Rengi: #828282
• Metin Satırı Yüksekliği: 1.4em
• Metin Yönü: Yasla

boyutlandırma

Boyutlandırma alt kategorisini açıp Genişliğe '%70' atayarak bu Metin Modülünün genişliğini de değiştireceğiz.

aralık

Son olarak, biraz üst ve sol kenar boşluğu da ekleyeceğiz:

• Üst Kenar Boşluğu: 50px (Yalnızca Masaüstü)
• Sol Kenar Boşluğu: %10 (Tablet ve Telefon)

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

Düğme Hizalama

Eklememiz gereken son modül Düğme Modülü. CTA'nızı ekledikten sonra Tasarım sekmesindeki Hizalama alt kategorisini açın ve Sol Düğme Hizalamasını etkinleştirin.

Düğme Ayarları

Aşağıdaki ayarları kullanarak düğmenin görünümünü değiştiriyoruz:

• Düğme için Özel Stilleri Kullan: Evet
• Düğme Metin Boyutu: 13px
• Düğme Metin Rengi: #ffffff
• Düğme Arka Plan Rengi: Renk #5
• Düğme Kenar Genişliği: 0px
• Düğme Harf Aralığı: 6px
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Son olarak, düğme için biraz daha arka plan alanı oluşturmak için aşağıdaki özel dolguyu uygulayacağız:

• Üst Dolgu: 10px
• Sağ Dolgu: 40px
• Alt Dolgu: 10px
• Sol Dolgu: 40px

Tercihli Ekstra Adım

Bu öğretici tasarımları her zaman bir adım daha ileri götürebilir ve benzersiz hale getirebilirsiniz. Yapabileceğiniz şeylerden biri, örneğin canlı bir üst ayırıcı eklemektir:

Bölüme Üst Bölücü Ekle

Bu üst ayırıcıyı eklemek için bölümünüzün Tasarım sekmesine gidin, Bölücüler alt kategorisini açın ve ona aşağıdaki ayarları uygulayın:

• Bölücü Stili: Listede Bul
• Bölücü Renk: Renk #5
• Bölücü Yüksekliği: 500px (Masaüstü), 300px (Tablet), 250px (Telefon)

Ön izleme

Artık tüm adımların üzerinden geçtik ve hatta ekleyebileceğiniz bir tercihli ekstra adımı paylaştık, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Tasarımınızda harf aralığı ile denemeler yapmak harika sonuçlar getirebilir. Bunu göstermek için, hem fazladan hem de negatif harf aralığı kullanan çarpıcı bir tasarımın nasıl oluşturulacağını gösterdik. Ayrıca size bu tasarıma uygulandığında harika görünen iki renk paleti de sağladık. Gösterişli bir kırmızı ve daha hafif bir gri var. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!