Divi ile web tasarımınızda sembolleri kullanmanın yaratıcı yolları
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, size web tasarımınızdaki sembolleri Divi ile kullanmanın yaratıcı yollarını göstereceğiz. Bu öğretici için bir Paket Of Life Coach düzeni kullanacağız, ancak bu yazıda size gösterdiğim şey herhangi bir Divi düzenine uygulanabilir. Web sitenizi kişiselleştirmenize izin veren yeni ve yaratıcı yollar aramaya devam ediyoruz ve bu öğretici sizi bir adım daha yaklaştırıyor.
Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, farklı ekran boyutlarında yeniden yapacağımız üç farklı örneğe bakalım.
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Bir sonraki sembol metin modülünü ekleyin, metin modülünü aşağıdaki sembolle ekleyin: ░░░░░░░░░░░░░░░░░░░░ ░░ ░░ ░░ ░░ ░░ ░░ ░░ ░░ Metin Ayarları Artık bu sembollerden metin ayarlarıyla oynayabiliriz. Örnekle aynı sonuçları elde etmek için aşağıdaki ayarları kullanın: Metin Boyutu: 100 piksel
Metin Oryantasyonu: Sol
Son mesafe, alt kenar boşluğuna ‘-200px’ ekleyerek metin modülüne de basacağız. Bir örnek oluşturun #2 Yeni bir satır #1 ekleyin Satırın ikinci örneği iki satır gerektirir. İlk satırı ilk örnekle aynı yere yerleştireceğiz: Sütun yapımızın bu satır için sadece bir sütuna da ihtiyacı vardır. Yapıştırıcılar aşağıdaki boyut ayarlarını bir sonraki satırınıza uygulayın: Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Bu satırın üst ve alt dolgusu için mesafe ve ’40 piksel’ kullanın. Sembol metin modülleri ekleyin Metin modülünü satırınıza aşağıdaki sembollerle 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
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Sol
Yeni bir satır ekleyin #2 Çizgi konumumuz, simetrik sembollerle referansın sonunda aynı şeyi yapacaktır. Hemen referansınızın altına yeni bir çizgi ekleyin.
Sütun Yapısı Bir sonraki satırınıza bir sütun ekleyin. Kopyala ve yapıştırma zamanından tasarruf etmek için yapıştırın, yaptığımız önceki satır stilini kopyalayacağız ve onları yeni çizgilerimize koyacağız. Metin Modülünü Ekleyin Metin modülünün sembolü Bu satırdaki, daha önce kullandığımız şeyle simetrik olan aşağıdaki sembolleri gerektirir: ╚═════ Bu modülün metin ayarlarını açarak metin ayarlarına devam edin ve aşağıdaki değişiklikleri uygulayın: Metin rengi: #ffb356 Metin Boyutu: 85px
Hat yüksekliği metni: 1em
Metin Oryantasyonu: Doğru
Son yapıştırıcı, hücresel kadar iyi görünmesi için bu metin modülünün boyutunu da değiştireceğiz:
Genişlik:% 74 Modül hizalaması: doğru
Ekstra: Metnin gölgesini sembole ekleyin
Metin Metin Modülü Metin #1 Bu örneği bir adım önde almak ister misiniz? Ayrıca metnin gölgesini ekleyin. İlk sembol metin modülünüzü açın ve aşağıdaki metin gölgesini uygulayın: Yatay uzunlukta gölge metni: 1.3em Dikey uzunluk Gölge Metin: 0.4EM
Metin Gölgesi Renk: #FFB356
Metin Metin Modülü Metin #2 Ardından, ikinci metin modülünüzü açın ve ayrıca aşağıdaki metin gölgesini uygulayın:
Yatay uzunlukta gölge metni: -1.6em Dikey uzunluk gölge metni: -0.3em
Metin Gölgesinin Rengi: #44627CUITS Örnek #3
Bu öğreticinin son örneği için yeni bir satır satırı ekleyin, satırınızı yön sayfanızdaki aşağıdaki yere ekleyin:
Sütun yapımız, bir kez daha sadece bir sütun kullanır. Yapıştırıcı ve aşağıdaki boyut ayarlarını kullanarak satırımızın genişliğini artıracağız: Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet Talang genişliği: 1
Örneğimizi yapmak için Metin Modülü #1 sembolü ekleyin, iki metin modülüne ihtiyacımız var. İlk metin modülünüzü aşağıdaki sembolü kullanarak ekleyin: ❖❖
Metin Ayarları Bu ilk metin modülü için aşağıdaki ayarları kullanın:
Metin rengi: #44627c Metin Boyutu: 200px Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Metin Modülünü Ekleyin İkinci metin modülünün #2 sembolleri yalnızca bir sembol gerektirir: ❖
Metin Ayarları Bu metin modülüne aşağıdaki metin ayarlarını uygulayın:
Metin rengi: #ffb356 Metin Boyutu: 200px Hat yüksekliği metni: 1em
Metin Oryantasyonu: Orta
Son mesafe, üst kenar boşluğuna ‘-100px’ ekleyin ve bitti!
Önizleme Şimdi tüm adımlardan ve tüm örneklerden geçtik, nihai sonuçlara farklı ekran boyutlarında bakalım.
