Divi ile muhteşem tasarım yapmak için harf aralığını kullanmanın etkili yolları
Font ailelerini ve mektupları aynı anda denemeyi denediniz mi? Size ilginç sonuçlar getirebileceğini söyleyeyim. Bu, tasarımınıza soyut bir his verir ve ayrıca 2018’de tasarım trendiyle eşleşir. Metninize sadece ekstra harfler ekleyemezsiniz, karakterlerinizi birbirine yaklaştırmak için olumsuz harfler de kullanabilirsiniz. Roney Gibson tasarımlarından birinden esinlenen bu öğreticide, tüm ekran boyutlarında güzel sonuçlar elde etmek için harfleri yaratıcı ve etkili bir şekilde nasıl kullanacağınızı göstereceğiz. Bunun için yalnızca varsayılan Divi seçeneğini kullanırız.
Önizleme Öğreticiyi girmeden önce, bu öğreticiden farklı ekran boyutlarında neler bekleyebileceğinize bakalım.
Renk #2: #C81A33
Renk #3: #E03933
Renk #4: #F29D96
Renk #5: #44CAE1
Renk paleti #2 Renk #1: #ddddd
Renk #2: #B2B2B2
Renk #3: #CCCCCCC
Renk #4: #5B5B5B
Renk #5: #FF0022
YouTube Kanalları Yaklaşımımıza abone olunan Divi ile muhteşem tasarım oluşturmak için harf aralığını kullanmanın etkili yolları
Bu tasarıma uygulayabileceğiniz iki renk palet var
Bir renk paleti seçin ve numaralandırmayı böyle koruyun
Öğretici boyunca, seçtiğiniz renk paletinden almanız gereken belirli bir renk numarasına atıfta bulunacağız.
Bundan sonra, parçayı klonlayabilir ve bunun yerine başka bir renk paleti uygulayabilirsiniz
Genel görünüm ve nüansları yaratmak için ekstra ve negatif boşluklar kullanıyoruz
Değer aralığı değeri, yazı tipinizin boyutuna bağlıdır
Bu, her yazı tipi boyutu (masaüstü, tablet, cep telefonu) için harf alanını değiştirmemiz gerektiği anlamına gelir, yeni bir sayfa için gradyan arka planının yeni standart kısmını ekleyin veya zaten var olan ve görsel oluşturucuya geçin. Bir sonraki yeni bölümü ekleyin, ayarları açın ve gradyanın aşağıdaki arka plan rengini uygulayın:
Birinci Degrade Renk: Renk #1
İkinci gradyan rengi: Renk #2
Gradyan Türü: Doğrusal
Gradien yönü: 160deg
Son pozisyon:% 53
Mesafe O zaman, tasarım sekmesine devam edin, aralık alt kategorisini açın ve aşağıdaki özel dolguyu ekleyerek parçanızın üstünde ve altında birkaç boşluk oluşturun: Üst dolgu: 60 piksel
Dolgu Alt: 180 piksel
Sütun yapısının ilk satırını ekleyin Ayarlarla bitirdikten sonra, ilk satırınızı aşağıdaki sütun yapısını kullanarak ekleyebilirsiniz: Herhangi bir modül eklemeden önce mesafe, satır ayarlarını açın ve alt dolguya ‘150px’ ekleyin. Metin Modülünü Ekle Metin Ayarlarının İlk Adı için, şimdi bu satıra istenen modülü eklemeye başlayabiliriz. Yapacağımız ilk şey, ilk ada bir metin modülü eklemektir. Metnin ve harflerin boyutu her ekran boyutu için farklı olacaktır. Metnin boyutunu korurken karakterleri birbirine yaklaştırmak için negatif harfler kullanıyoruz: Metin yazı tipi ağırlığı: çok kalın
Metin yazı tipi stili: büyük harf
Metin Boyutu: 300 piksel (masaüstü), 210px (tablet), 125px (cep telefonu)
Metin Renk: Renk #3
Metin mektubu alanı: -20px (masaüstü), -15px (tablet), -8px (telefon)
Hat yüksekliği metni: 1em
Dikey uzunluk Gölge Metin: 0.03EM
Pleaing Mukavemeti Metin Gölgesi: 0.02EM
Metin Gölgesi Renk: RGBA (0.0,0,0.47)
Metin Oryantasyonu: Orta
Metin adı metin modülünü önceki metin modülünün hemen altındaki metin ayarlarına ekleyin, soyadı içeren başka bir modül ekleyin. Bunun için aşağıdaki metin ayarlarını uygulayın: metin yazı tipi: Allura Metin boyutu: 88px (masaüstü), 78px (tablet), 39px (telefon)
Metin Rengi: RGBA (255,255,255.0.86)
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Bu metin modülünü bir öncekiyle örtüşmek için mesafe, üst marjı aşağıdakilere de ekleyin:
Üst kenar: -200 piksel (masaüstü), -150px (tablet), -100px (telefon) Metin Modülünü Ekleyin Başlık Çalışma Metin Ayarları Bu satırdaki son metin modülü, konumunuzu (veya paylaşmak istediğiniz her şeyi) paylaşmak için kullanılır. Bu metin modülü için kontrast yapmak için ekstra harf boşlukları kullanıyoruz.
Metin yazı tipi stili: büyük harf Metin boyutu: 17px (masaüstü), 16px (tablet), 14px (cep telefonu)
Metin Renk: Renk #4
Mektup alanı: 22px (masaüstü), 14px (tablet), 8px (telefon)
Yüksek çizgi metin: 1.5em
Metin Oryantasyonu: Orta
Mesafemiz, bu metin modülü ile bir öncek arasında yeterli bir alan oluşturmak için bu metin modülünün kenarına ‘100px’ ekleyecektir.
İlk satırla bitirdikten sonra sütun yapısının ikinci satırını şimdi ekleyin, bir sonraki satıra geçebiliriz. Aşağıdaki sütun yapısına ihtiyacımız var: Herhangi bir modül eklemeden önce arka plan rengi, satır ayarlarını açın ve satırın arka plan rengi olarak ‘#ffffff’ kullanın. Sütun 1’imizin arka plan rengi, ‘#F7F7F7’ renk kodu kullanılarak ilk sütuna biraz gri bir arka plan rengi uygulayacaktır. Yapıştırıcımız, sütunun aynı yüksekliğe sahip olmasını ister, bu nedenle boyutlandırma alt kategorisindeki ‘Sütun Yükseklikleri’ seçeneğini etkinleştireceğiz. Jatur ve sütunun üstündeki ve altındaki tüm alanı kaldırmak için ‘0px’ ekleyeceğiz. ve çizgilerimizin alt dolgusu. Son kutu gölgesi, daha koyu bir gölge renkle birlikte yeterli bulanıklık mukavemetine sahip bir kutu gölgesi uygulayacağız: Bulanık Güç Gölgesi Kutusu: 80px
Gölge Rengi: RGBA (0.0,0,0,49)
İlk metin modülünü geçerli metin ayarlarının Sütun 1’e ekleyin, modülü ilk sütuna eklemeye başlayalım. Aşağıdaki metin ayarlarını kullanacağımız ‘Beni Tanıma’ metin modülü ile başlayacağız:Metin yazı tipi: Allura
Metin yazı tipi ağırlığı: kalınlık Metin Boyutu: 29 piksel
Metin Renk: Renk #5
Metin modülünü dikey olarak masaüstüne odaklamak için mesafe, bazı üst kenar boşlukları eklememiz gerekir. Sol tarafta da bazı odalar yapacağız:
Üst kenar: 250 piksel (masaüstü), 50px (tablet ve cep telefonu)
Sol kenar boşluğu:% 17 (masaüstü),% 10 (tablet ve cep telefonu) İkinci metin modülünü Sütun 1 metin ayarlarına önceki metin modülünün hemen altına ekleyin, 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ınlık Metin yazı tipi stili: büyük harf
Metin boyutu: 71px (masaüstü), 50px (tablet), 45px (telefon)
Metin Renk: Renk #2
Harfler Aralığı: -5px (Ekran boyutları arasındaki metin boyutundaki farklılıklar göz ardı edilebilir, bu yüzden bu değeri tüm ekran boyutlarında kullanıyoruz)
Hat yüksekliği metni: 1em
Bir sonraki aralık alt kategorisi aralığı ve aşağıdaki özel marjları uygulayın:
Alt kenar boşluğu: 50 piksel (tablet ve cep telefonu)
Sol kenar boşluğu:% 17 (masaüstü),% 10 (Tablet ve Cep Telefonu) Sütun 2’ye bir görüntü modülü ekleyin Görüntü yüklemeye ihtiyaç duyulan tüm modülleri ilk sütuna ekledik, böylece şimdi ikinciye devam edebiliriz. Ekleyeceğimiz ilk şey görüntü modülü. Tesviye görüntüleri Bir sonraki tasarım sekmesini açın ve sol görüntü hizalamasını hizalama alt kategorisinde etkinleştirin. Ayrıca, ‘her zaman hücresel görüntülere odaklanın’ seçeneğinin devre dışı bırakıldığından emin olun.
Mesafemiz, bu görüntünün üst kenar boşluğunu kullanarak satırın üstü ile örtüşmesini sağlayacaktır:
Üst kenar: -50px (yalnızca masaüstü) Sol kenar boşluğu:% 5 (tablet) Sınırımız ayrıca aşağıdaki ayarları kullanarak bu resme sınır ekleyecektir: Sınır Genişliği: 35px
Sınır rengi: #ffffff
Sınır Gücü: Katı Son kutu gölgesinde, biraz derinlik kazanmak için kutunun bir gölgesi ekleyeceğiz:
Dikey Konum Gölge Kutusu: 24 piksel
Bulanık Güç Gölgesi Kutusu: 41px
Gölge Rengi: RGBA (0.0,0,0,3) Metin modülünü eklediğiniz resim modülünün hemen altındaki sütun 2 metin ayarlarına ekleyin, açıklamanız için metin modülünü ekleyin. İçeriğinizi ekledikten sonra aşağıdaki metin ayarlarını uygulayın:
Metin Boyutu: 15 piksel
Metin rengi: #828282
Yüksek çizgi metin: 1.4em Metin Oryantasyonu: haklı çıkar
Yapıştırıcımız ayrıca boyutun alt kategorisini açarak ve ‘%70’ genişliğe ayarlayarak bu metin modülünün genişliğini değiştirecektir.
Son mesafe, bazı üst ve sol marjlar da ekleyeceğiz:
Üst kenar: 50px (yalnızca masaüstü)
Sol kenar boşluğu:% 10 (tablet ve cep telefonu) Düğme Modülünü Sütun 2’ye Ekleyin Eklememiz gereken son modül düğmesi hizalaması düğme modülüdür. CTA ekledikten sonra, tasarım sekmesinde hizalama alt kategorisini açın ve sol düğme hizalamasını etkinleştirin. Düğme ayarlarımız aşağıdaki ayarları kullanarak düğmenin görüntülenmesini değiştirin: Düğmeler için özel bir stil kullanın: evet
Metin Boyutu Düğmesi: 13px
Metin Renk Düğmesi: #fffffff Arka Plan Renk Düğmesi: Renk #5 Düğmenin sınır genişliği: 0px
Mektup Mesafe Düğmesi: 6px
Yazı tipi stili düğmesi: büyük harf
Son fakat en az değil, düğmeler için daha fazla arka plan alanı yapmak için aşağıdaki özel dolguyu uygulayacağız:
Üst dolgu: 10 piksel
Sağ dolgu: 40 piksel
Dolgu Alt: 10 piksel
Sol dolgu: 40 piksel Ekstra Tercih Adımları Her zaman bu öğretici tasarımını bir adım önde hale getirebilir ve benzersiz hale getirebilirsiniz. Yapabileceğiniz şeylerden biri, örneğin canlı bir üst bölücü eklemektir:
Bu üst bölücüyü eklemek için üst bölücüyü bölüme ekleyin, bölümünüzdeki tasarım sekmesini açın, bölme alt kategorisini açın ve aşağıdaki ayarları uygulayın:
Bölme Stili: Listede bulun
Renk Renk: Renk #5
Böcek Yüksekliği: 500 piksel (masaüstü), 300 piksel (tablet), 250 piksel (cep telefonu) Önizleme Şimdi tüm adımlardan geçtik ve hatta ekleyebileceğiniz ekstra tercih adımlarını paylaştık, sonuçlara farklı ekran boyutlarında bakalım.
