Sunum simgelerini estetik dokunuşlar olarak kullanmak, mizanpajınıza hiç düşünmemiş olabileceğiniz benzersiz bir tasarım verebilir. Sunum modülünün simgesini bir metin modülünü kapsayacak şekilde konumlandırmaya ek olarak, simgeye stil vermek için metin modülünün arka planını ve kenarlığını kullanabilirsiniz. Bu, simgelerinize tamamen benzersiz bir tasarım verirken içeriği çerçeveleyen hoş bir tasarım vurgusu yaratır.
Bu derste, sunum simgelerini Divi'deki içeriğiniz için tasarım vurguları olarak nasıl stilize edeceğinizi göstereceğim.
anket
İşte bu derste geliştireceğimiz tasarımın bazı örnekleri.
Bu öğretici için örnek düzenleri indirin
Tanıtım modülünün vurgu desenlerinin düzenini öğrenmek için ücretsiz, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişim sağlamak için Divi Daily posta listemize abone olmanız gerekir. formulaire altında. Yeni bir abone olarak, her Pazartesi daha da fazla Divi avantajı ve Divi Düzen paketi alacaksınız ücretsiz ! Zaten listedeyseniz aşağıya e-posta adresinizi girin ve İndir'i tıklayın. "Yeniden kaydolmayacaksınız" veya ek e-posta almayacaksınız.
Indir
Tasarımdan sıfırdan başla
Başlamak için yeni bir sayfa oluşturun ve sayfanıza bir başlık verin. Ardından, Divi oluşturucuyu genel parça sistemine dağıtın. Tek sütunlu bir satır içeren normal bir bölüm ekleyin. İlk modülünüzü eklemeden önce, aşağıdaki şekilde satır ayarlarını güncelleyin:
Özel oluk genişliğini kullanın: YES
Özel Oluk Genişliği: 1
Bu modüller arasındaki herhangi bir özel marjı ortadan kaldıracaktır.
Metin modülünü oluşturma
Ardından satırın içine bir metin modülü ekleyin.
Metin modülünü aşağıdaki doldurma metni ile güncelleyin:
Hizmetlerimiz bu bölüm müşterilerimize sunduğumuz farklı hizmetlerin listesini gösterir.
Metin modülünü stilize et
Şimdi, Metin modülü parametresinin kalanını aşağıdaki gibi güncelleyin:
- Arka plan rengi: #ffffff
- Başlık 2 Yazı Tipi: Nunito
- Başlık 2 Yazı tipi ağırlığı: Kalın
- Başlık 2 Yazı Tipi Stili: TT
- Başlık 2 Metin rengi: #f24a5b
- Başlık 2 Metin Boyutu: 42 piksel (masaüstü), 32 piksel (tablet), 22 piksel (telefon)
- Başlık 2 Harf Boşluğu: 16px
- Başlık 2 Satır Yüksekliği: 1.3em
- Genişlik: 500px (masaüstü), 490px (tablet)
- Modülün hizalanması: orta
- Özel dolgu (masaüstü): Üstte 40px, altta 40px, solda 50px, sağda 50px
- Özel dolgu (telefon): Solda 20px, sağda 20px
- Kenarlığın genişliği: 10px
- Kenarlık rengi: #ffffff
Metin modülünü sunum simgeleriyle üst üste getireceğimiz için, metin modülünün simgelerin üzerinde z-uzay sırasına göre oturduğundan emin olmalıyız. Bunu yapmak için, öncelikle Metin modülünün ana öğesinin CSS alanına aşağıdaki CSS parçacığını eklememiz gerekir:
konum: göreceli;
Sonra z-index değerini 1 olarak ayarlayın.
Şimdi, bu metin modülü, tasarım için önemli olan örtüşen diğer modüllerin üzerine yerleştirilecektir.
Blurb simgesini oluşturun
Artık ilk tanıtıcı yazı simgesini oluşturmaya hazırız. Bunu yapmak için öncelikle bir Blurb modülü ekleyip onu metin modülünün en üstüne sürüklememiz gerekiyor. Daha sonra şunu silin içindekiler yer tutucu (başlık metni ve gövde metni) ve Tanıtım metni için resim yerine bir simge kullanmak için tıklayın.
Ardından, aşağıdaki tasarım parametrelerini güncelleyin:
- Simge Rengi: # 2ea3f2
- Simge yazı tipi boyutunu kullan: EVET
- Simge Yazı Tipi Boyutu: 100px
- Özel Kenar Boşluğu: Alttaki 0px (bu, modüller arasındaki varsayılan alt kenar boşluğunu kaldırır, 1 oluk genişliği kullanıyorsanız gerekli değildir)
Daha sonra, modülde herhangi bir metin kullanmadığımızdan (sadece simge), düzen simgesinin altındaki varsayılan alt kenar boşluğunu kaldırabiliriz. Bunu yapmak için, Blurb Görüntü CSS alanına aşağıdaki özel CSS kodunu ekleyin:
Blurb Görüntüsü CSS:
kenar boşluğu alt: 0px
Bulanıklaştırma Simgesini Çoğaltın
Bulmacayı konumlandırmaya başlamadan önce, devam edelim, tanıtım modülünü kopyalayıp metin modülünün altına sürükleyelim. Artık metin modülünün üstünde ve altında bir sunum simgeniz olmalıdır.
Dönüştürme Çeviri'yi Kullanarak Sunum Simgelerini Konumlandırma
Sunum simgelerini konumlandırmak için Divi'nin dönüştürme seçeneklerini kullanacağız, bu da simgenin bulunduğu sunum modülünü sayfanın herhangi bir yerine yerleştirmemize olanak tanır.
Konumlandırma Bluru Simgesi #1
Bulanıklık simgesini yerleştirmek için, bulanıklık modülü ayarlarını açın ve aşağıdakileri güncelleyin:
- Çeviri X ekseni dönüştürün (masaüstü): -242px
- Y eksenini dönüştürme (masaüstü): 50px
- Çeviri X ekseni (telefon) çevirmek: -170px
Ancak, bunu yaptığınız ayarlara göre ekleyebilirsiniz.
Konumlandırma Bluru Simgesi # 2
Bu sunum simgesini konumlandırmadan önce onu büyütelim. Bunu yapmak için Blurb modülünün ayarlarını açın ve simgenin yazı tipi boyutunu 150px olarak değiştirin.
Ardından, aşağıdaki dönüştürme seçeneklerini güncelleyerek sunum simgesini konumlandırın:
- Çeviri X ekseni dönüştürün (masaüstü): 242px
- Y eksenini dönüştür (masaüstü): -100px
- Çeviriyi çevir X ekseni (telefon): 190px
Başka bir bölümün oluşturulması
Şu andan itibaren, yaptığımız şeyden ilham alarak farklı bir düzenlemeyle başka bir bölge yaratabiliriz. Tek yapmanız gereken yeni bir sütun oluşturmak ve önceki modülleri kopyalamaktır. Çoklu bir kopyalama yapmak için klavyenizdeki CTRL tuşunu basılı tutarken fareyle her modülün üzerine gelin.
Nihai sonuç
Şimdi son sonucu görelim.
Son düşünceler
Sunum simgelerinize tasarım vurguları olarak ekleme içindekiler tamamen benzersiz bir tasarım oluşturmak için iki modülün nasıl birleştirilebileceğinin bir örneğidir. Bu durumda metin modülünün arka planı ve kenarlığı, çevredeki simgeler için kısmi bir kaplama görevi görür. Sonuç benzersizdir ve çeşitli tasarım varyasyonlarını keşfetmenin kapısını açar. Kendi ihtiyaçlarınıza uygun bir şeyler yaratmak için farklı simgeleri ve renk kombinasyonlarını keşfetmekten çekinmeyin.
Yorumlarda sizden haber almayı umuyoruz.
