Divi ile Web Tasarımınızda Sembolleri Yaratıcı Bir Şekilde Nasıl Kullanabilirsiniz?

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Divi ile web tasarımınızda sembolleri nasıl yaratıcı bir şekilde kullanacağınızı göstereceğiz. Bu eğitim için Life Coach Layout Pack'i kullanacağız, ancak bu yazıda size gösterdiğim şey herhangi bir Divi Layout'a uygulanabilir. Sürekli olarak web sitenizi kişiselleştirmenize olanak tanıyan yeni ve yaratıcı yollar arıyoruz ve bu eğitim sizi bir adım daha yaklaştırıyor.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarında yeniden oluşturacağımız üç farklı örneğe bir göz atalım.

Yaklaşmak

Var olan sadece klavyenizdeki karakterler değildir. Aslına bakılırsa, dışarıda olan ancak klavyenize dahil olmayan bir sürü var. Bu karakterlerin çoğu, alfabedeki harflerin ötesine geçer. Örneğin, görsel olarak çekici semboller içerirler. Alfabenin harfleri gibi bu sembolleri de web sitenizdeki Metin Modüllerinde kullanabilirsiniz. Tüm karakterleri bilgisayarınızın Karakter Haritasına (PC) veya Karakter Paletine (Mac) giderek bulabilirsiniz. Veya bunları aşağıdaki web sitesinde de bulabilirsiniz.

Bu semboller, diğer karakterlerle aynı şekilde davranır; bu, yazı tipi boyutunu, harf aralığını, rengini vb. ayarlayabileceğiniz anlamına gelir. Bu, Divi's Visual Builder ile bunları farklı ekran boyutlarında ayarlamanızı son derece kolaylaştırır.

Örnek 1 Oluştur

Yeni Satır Ekle

Satır Konumu

İlk örnekle başlayalım! Visual Builder ile Divi's Life Coach Layout Pack'i kullanarak oluşturduğunuz web sitesinin açılış sayfasını açın ve aşağıdaki noktaya yeni bir satır ekleyin:

Sütun Yapısı

Bu satır için yalnızca bir sütuna ihtiyacımız olacak.

boyutlandırma

Bu satırın ayarlarını açın. Bu ayarlarda yapmanız gereken tek şey, genişliği artırmak için satırınızın Boyutlandırmasını değiştirmek:

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

Metin Modülü Ekle

Semboller

Ardından, aşağıdaki sembollere sahip bir Metin Modülü ekleyin:

░░░░░░░░░░░░░░░░░░░░
░░
░░
░░
░░
░░
░░
░░
░░

Metin Ayarları

Şimdi bu sembollerin metin ayarlarıyla oynayabiliriz. Örnekle aynı sonucu elde etmek için aşağıdaki ayarları kullanın:

• Metin Boyutu: 100px
• Metin Yönü: Sol

aralık

Son olarak, alt kenar boşluğuna '-200px' ekleyerek Metin Modülünü de aşağı iteceğiz.

2. Örnek Oluştur

Yeni Satır #1 Ekle

Satır Konumu

İkinci örnek iki satıra ihtiyaç duyar. İlk satırı ilk örnekte olduğu gibi aynı noktaya yerleştireceğiz:

Sütun Yapısı

Bu satır için de yalnızca bir sütuna ihtiyacımız olacak.

boyutlandırma

Sonraki satırınıza 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

aralık

Ve bu satırın üst ve alt dolgusu için '40px' kullanın.

Metin Modülü Ekle

Semboller

Aşağıdaki sembollerle satırınıza bir Metin Modülü ekleyerek devam edin:

😀😀😀😀😀

Metin Ayarları

Sonraki metin ayarlarını açın ve aşağıdaki değişiklikleri uygulayın:

• Metin Rengi: #44627c
• Metin Boyutu: 85px
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Sol

Yeni Satır #2 Ekle

Satır Konumu

Simetrik sembollerle referansların sonunda aynı şeyi yapacağız. Referanslarınızın hemen altına yeni bir satır ekleyin.

Sütun Yapısı

Sonraki satırınıza bir sütun ekleyin.

Satır Stilini Kopyala ve Yapıştır

Kendimize biraz zaman kazandırmak için, oluşturduğumuz önceki satırın stilini kopyalayıp yeni satırımıza yapıştıracağız.

Metin Modülü Ekle

Semboller

Bu satırdaki Metin Modülü, daha önce kullandığımız sembollere simetrik olan aşağıdaki sembollere ihtiyaç duyar:

╚►

Metin Ayarları

Bu modülün Metin Ayarlarını açarak devam edin ve aşağıdaki değişiklikleri uygulayın:

• Metin Rengi: #ffb356
• Metin Boyutu: 85px
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Sağ

boyutlandırma

Son olarak, mobilde eşit derecede iyi görünmesi için bu Metin Modülünün Boyutlandırmasını da değiştireceğiz:

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

Ekstra: Sembollere Metin Gölgesi Ekleyin

Metin Gölge Metin Modülü #1

Bu örneği bir adım daha ileri götürmek ister misiniz? Bir metin gölgesi de ekleyin. İlk sembol Metin Modülünüzü açın ve aşağıdaki metin gölgesini uygulayın:

• Metin Gölgesi Yatay Uzunluğu: 1.3em
• Metin Gölgesi Dikey Uzunluğu: 0.4em
• Metin Gölge Rengi: #ffb356

Metin Gölge Metin Modülü #2

Ardından, ikinci Metin Modülünüzü açın ve aşağıdaki metin gölgesini de uygulayın:

• Metin Gölgesi Yatay Uzunluğu: -1.6em
• Metin Gölgesi Dikey Uzunluğu: -0.3em
• Metin Gölge Rengi: #44627c

Örnek 3'ü Oluşturun

Yeni Satır Ekle

Satır Konumu

Bu öğreticinin son örneği için, açılış sayfanızda aşağıdaki noktaya satırınızı ekleyin:

Sütun Yapısı

Yine, sadece bir sütun kullanıyoruz.

boyutlandırma

Ve aşağıdaki Boyutlandırma ayarlarını kullanarak satırımızın genişliğini artıracağız:

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

Metin Modülü #1 Ekle

Semboller

Örneğimizi oluşturmak için iki Metin Modülüne ihtiyacımız olacak. Aşağıdaki sembolleri kullanarak ilk Metin Modülünüzü ekleyin:

❖❖

Metin Ayarları

Bu ilk Metin Modülü için aşağıdaki ayarları kullanın:

• Metin Rengi: #44627c
• Metin Boyutu: 200px
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

Metin Modülü #2 Ekle

Semboller

İkinci Metin Modülü yalnızca bir sembole ihtiyaç duyar:

❖

Metin Ayarları

Bu Metin Modülüne aşağıdaki metin ayarlarını uygulayın:

• Metin Rengi: #ffb356
• Metin Boyutu: 200px
• Metin Satır Yüksekliği: 1em
• Metin Yönü: Merkez

aralık

Son olarak, üst kenar boşluğuna '-100px' ekleyin ve işiniz bitti!

Ön izleme

Şimdi tüm adımları ve tüm örnekleri inceledik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Bu Divi tasarım eğitiminde, Divi ile web tasarımınızda sembolleri nasıl kullanacağınızı gösterdik. Bu yöntemi Divi's Life Coach Layout Pack'e uyguladık. Web sitenize yaratıcı bir şekilde semboller eklemek, web sitenizi kişiselleştirmenize ve hayata geçirmenize yardımcı olabilir. Size bunu nasıl yapacağınıza dair üç güzel yol gösterdik ama sınır gökyüzü, o yüzden devam edin ve diğer sembollerle de deneyin. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!