4 İnanılmaz Örnekler Modül Başlık Divi & amp;Nasıl başarılır
Blogunuzu yayınlayarak insanları dahil etmenin yeni yollarını arayan tüm Divi blogcularınız için Divi Post başlıkının başlığı başlamak için iyi bir yer. Post başlık modülü, sayısız şaşırtıcı tasarım için yazı başlığını (ve üstün görüntü) çeşitli şekillerde düzenlemenize olanak tanır. Bu, potansiyel okuyucularınızı ilk görüşten çeken bazı güzel makaleler yapmanızı sağlar. Bugün, okuyucularınızı çekmek için Divi Post başlık modülünü düzenlemenin dört şaşırtıcı yolunu göstereceğim.
Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticide görüntülenen Posta Modülü Tasarım Modülüne bir bakış. #1 soyut çerçeve
Ayarlar Bu öğretici için yeni bir gönderi için, yeni bir gönderide başlık tasarımının bir örneği oluşturmak için Divi Builder’ı kullanacağım. Bu öğreticide oluşturulacak ayarlar almak için aşağıdakileri yapmanız gerekir:
Yeni bir gönderi oluşturun.
Başlığı gönderinize ekleyin.
Gönderinize üstün görüntüler ekleyin.
Divi Maker’ı uygulayın.
Başından beri inşa etmeyi seçin
Divi sayfa ayarlarının altında, yan bıçaklar olmadan sayfa düzenini seçin ve yayın başlığını gizlemek için seçin.
Ardından, sayfaları görsel olarak tasarlayabilmeniz için ön uç üzerine oluşturun veya arka uçta masaüstü ekran modu uygulayın. Bir gönderide birkaç gönderi başlığı eklerseniz, aynı amiral gemisi sayfasını ve resim başlığını devralacağını unutmayın. #1 soyut çerçeve Bu temiz yazı başlık tasarımı, üstün görüntüde ve yayınınızın başlığında iyi işlev görecek pürüzsüz bir soyut fuşatma öğesine sahiptir. Çerçeveleme etkisi birkaç özel sınır ve kutunun gölge stili kullanılarak yapılır. İşte nasıl yapılacağı. Bu makalenin başlangıcında açıklandığı gibi yeni bir yazı ayarladığınızdan emin olun (yan sayfanın düzeni olmadan başlıklar, üstün resimler ekleyin, varsayılan gönderi başlığını gizleyin). Gönderinize bir satır bir sütunla yeni bir parça ekleyin. Ardından Gönderi Başlığı modülünü satıra ekleyin. Post başlık ayarlarında, öne çıkan görüntü yerleşimini aşağıdaki gibi ayarlayın: Üstün Görüntülerin Yerleştirilmesi: Başlığın üstünde, güncelleme Modülün sağ alt köşesine küçük bir soyut tasarım öğesi eklemek için bir arka plan gradyanı ekleyin. Gradyan Arka Planın Sol Rengi: RGBA (0.0,0,0.06) Sağ Renk Arka Plan Yasası: RGBA (0.0,0,0) Gradyan Tip: Radyal Radyal Yön: Sağ Alt Başlangıç Konum: % 10 Nihai Konum: % 0
Kalan tasarımı aşağıdaki gibi güncellemeye devam et: Yazı tipi başlık: Josefin Sans Laying Metin Başlığı: Doğru Metin Boyutu Başlık: 36px Yüksek Satır Başlık: 1.7EM (Masaüstü), 1.3em (Tablet ve Akıllı Telefon) Meta Yazı Tipi: Josefin Sans Style Yazı Tipi Meta: TT performans meta metin: Sol boşluk meta harf: 2px meta hattı yüksekliği: 2EM Özel Marj: -5VW Üstü Özel Dolgu: 5VW üst, 5VW daha düşük, 5vw sol, 5VW sağ genişlik sağ sınırı: 4pxmargin -5vw yukarı modülü dışın dışına çeker Sıraya ekleyeceğimiz sol sınırın üstünde doğru durur. Şimdi bir kutu kullanarak soyut bir tasarım öğesi ekleyelim: Gölge Kutusu: Gölgelerin Yatay Ekrana Bkz. Kutu: 112px Dikey Konum Gölge Kutusu: 85px Square Free Spread Box: -80px Gölge Renk: RGBA (224,43,32.0. 3) Ayarları kaydedin. Şimdi boyutunu değiştirmek ve kutunun sınırını ve gölgesini kullanarak çerçeve tasarımının sol tarafını yapmak için satır ayarlarını açın. Özel Genişlik: 700 piksel Sağ Sınır Genişliği: 4px Gölge Kutusu: Bkz. Yatay Korkunç Konum Becerileri Kutusu: 112px Dikey Konum Gölge Kutusu: Kare Dağıtımın 85px Mukavemeti: -80px Gölge Renk: RGBA (224,43,32,0,3) Şimdi son tasarımı kontrol edelim. #2 örtüşen metin ve üstün resimler İki sıra sütun içeren yeni bir parça oluşturun. Ardından, görüntü modülünü sol sütuna ekleyin. Bu, dinamik içerik kullandığımız üstün bir görüntü olarak işlev görecektir. Görüntü ayarlarını açın ve yapay görüntüleri silin ve önizleme kutusunun sağ üst kısmındaki dinamik içerik simgesini tıklayın. Ardından sayfaya üstün görüntüler eklemek için listeden üstün görüntüyü seçin. Şimdi yazı başlığı modülünü sağ sütuna ekleyin. Ayarları açın ve üstün görüntüleri hayır olarak görüntüleme seçeneğini ayarlayarak üstün görüntüleri gizleyin. Ardından Post başlık modülüne arka plan gradyanını ekleyin. Sol gradyan renk arka planı: #fffffff sağ renk gradyan arka plan: RGBA (255,255,255.0) görüntüyü kapsamak için bazı negatif kenar boşlukları ekledikten sonra görülecektir. Tasarımın geri kalanını şu şekilde güncelleyin: Yazı tipi başlık: Fira Sans Ağır yazı tiplerinin yoğunlaştırılmış başlığı: Ultra Hafif Başlık Metin Boyutu: 80px (masaüstü), 70px (tablet), 45px (akıllı telefon) Meta Yazı Tipi: Fira Sans Yoğunlaştırılmış yazı tipi meta stili: TT Tesviye Meta Metin: Sağ Renk Meta Metin: #CCCCCC Meta Mektup Alanı: 2px Özel Kıymet:% -20 Kalan (Masaüstü),% 0 (Tablet ve Akıllı Telefon) Özel Dolgu: 5VW üst, 5VW Aşağıda, 30px Sol Sol Şimdi başlık altında bir çizgi yapmak için bir kutunun gölgesini verelim. Gölge Kutusu: Gölge Kutusunun Yatay Ekran Görüntüsü’ne bakın: 80px Dikey Konum Gölge Kutusu: Gölge Kutularının Dağıtımının 82 Piksel Gücü: -80px Ayarları kaydedin ve oluk genişliğini ayarlamak için satır ayarlarını açın. Talang Genişliği: 1 Eşit Sütun Yüksekliği: Evet Şimdi son tasarımı kontrol edin. Alternatif Yuvarlak Görüntü Tasarımı Sadece birkaç küçük ayarla, üstün bir görüntü dairesel yapabilir ve posta karolarını dikey olarak orta olacak şekilde ayarlayabilirsiniz. Bunu yapmak için görüntü ayarlarını açın ve aşağıdakileri güncelleyin: Yuvarlak açı:% 50
Ardından satır ayarlarını açın ve ana öğenin altına aşağıdaki özel CSS ekleyin: Hizalama-öğeler: Center;
Bu yalnızca, eşyaları dikey olarak uyumlu hale getirmemize izin veren esnek özelliği etkinleştiren EVET’e ayarlanmış eşit sütun yüksekliklerine sahipseniz çalışır. Aşağıdakiler son tasarımdır.#3 Hazır için arka plan benzersiz içeriği Bu yazı başlığının tasarımı, meta başlıkları ve metnin üstün görüntülerin arka planıyla okunmasını kolaylaştırmak için bir arka plan gradyanını birleştirir. İşte nasıl yapılacağı. Bir satır bir sütunla yeni bir parça oluşturun. Ardından Gönderi Başlığı modülünü satıra ekleyin.
Ardından, Üstün Görüntüyü gizlemek için gönderi için gönderi modülü ayarlarını güncelleyin. Yazı Tip Başlığı: Abril Fatface Renk Metin Başlığı: #121212 Metin Başlığı Boyut: 75px (masaüstü), 50px (tablet), 30px (akıllı telefon) Aralık Harfleri Başlık: 2px yükseklik çizgisi başlık: 1.1em meta yazı tipi: Roboto kompakt meta metin rengi: # FFFFFF Meta Metin Boyutu: 16px Meta Hareket Alanı: 2px Meta Hat Yüksekliği: 2EM genişliği:% 60 (masaüstü),% 90 (tablet),% 100 (akıllı telefon) Dolgu Özel: Kalan 3VW Şimdi meta metinde arka plan olarak kullanılacak bir kutunun gölgesini ekleyelim ve okumayı kolaylaştıralım. Gölge Kutusu: Gölge Kutusunun Yatay Ekran Görüntüsüne bakın: 0px Dikey Konum Gölge Kutusu: -32px Renk Gölge Kutusu: #121212 Şimdi üstün görüntülerimizi dinamik içerik kullanarak bölümün arka planına ekleyeceğiz. Bölüm ayarlarını açın ve arka plan görüntüsünün arka plan görüntüsünün sağ üst kısmındaki dinamik içerik simgesini tıklayın. Ardından bölüme üstün görüntüler eklemek için listeden üstün görüntüyü seçin.
Şimdi metin başlığı metnini daha kolay okumak için bir gradyan arka plan öğesi ekleyelim. Gradyan sekmesine tıklayın ve aşağıdakileri güncelleyin: Arka planın sol rengi gradyan: RGBA (255,255,255,0,76) Sağ renk gradyan arka plan: RGBA (255,255,255.0) Gradyan Türü: Radyal Radyal Yön: Üst Sol Konum:% 40 Pozisyon Sonu :% 0 Gradyanı arka planın üzerine yerleştirin Görüntü: Yasekarang Son tasarıma bakalım. Birden fazla üstün görüntü ile 4 numaralı istiflemenin etkisi Bu tasarım, başlık modülünü ve bölümün arka planını oluşturan öğelerin birikiminin etkisini vermek için birkaç gölge kutusunu birleştirir. Ayrıca benzersiz tasarım öğeleri için iki üstün görüntü (dinamik) sürümünü kullanır. İşte nasıl yapılacağı. Bir satır bir sütunla yeni bir parça oluşturun. Ardından, gönderi modülünü satıra ekleyin ve üstün görüntülerin meta arka planın başlığına/görüntüsüne yerleştirilmesini güncelleyin. Ardından tasarım ayarlarını aşağıdaki gibi güncelleyin: Metin Renk: Parlak Renk Arka Plan Metin: RGBA (1,59,104,0,79) Metin Oryantasyonu: Orta Yazı Tipi Başlık: Roboto Yoğun Yazı Tipi Başlık: Işık Metin Başlık Boyutu 70px (masaüstü), 50px (Tablet), 30px (akıllı telefon) Yükseklik çizgisi başlık: 1.3EM ağırlık meta yazı tipi: hafif meta yazı tipi kuvveti: tt renk meta metin: #cccccc meta harf alanı: 1px dolgu özel: 10vw üst, 0px aşağıda Şimdi ilk besteleme katmanımızı yapmak için ilk kutumuzun gölgesini ekleyelim. Gölge Kutusu: Gölge Kutusunun Yatay Ekran görüntüsüne bakın: 0px Dikey Konum Gölge Kutusu: -46px Gölge Renk: #ffffff Bunun aynı zamanda meta başlıkları ve metni bölmek için yaratıcı bir yol olarak da işlev gördüğünü görebilirsiniz. Şimdi ayarlarınızı kaydedin ve bölüm ayarlarını açın. Dinamik içerik olarak arka planınıza üstün görüntüler ekleyin. Daha sonra gradyanı aşağıdaki gibi ekleyin: Arka plan gradyanının sol rengi: RGBA (1,59,104,0,79) Arka Plan Rengi Sağ Gradient: RGBA (1,59,104,0,79) Gradyanı arka plan görüntüsünün üzerine yerleştirin: evet arka plan tasarımı Bu ek görüntü, her yeni üstün görüntü ile dinamik olarak değişecek olan Post başlıkınıza benzersiz bir tasarım vermenin benzersiz bir yoludur. Ayrıca, bazı özel rulmanlar ekleyin. Özel Dolgu (Masaüstü): 10VW üst, 0px daha düşük özel dolgu (akıllı telefon): 0vw üst, 0px daha düşük Ardından istifleme etkisine devam etmek için başka bir kutunun gölgesini ekleyin. Gölge Kutusu: Gölge Kutusunun Yatay Ekran görüntüsüne bakın: 0px Dikey Konum Gölge Kutusu: -92px Gölge Renk: #ffffff Tasarımı tamamlamak için aşağıdaki satır ayarlarını açın ve güncelleme: Bu satırı tam genişlik yapın: evet Talang Genişliği: 1 Pilding Custom (Masaüstü): 0px üst, 0px alt,% 6 sol,% 6 sağ dolgu özel (Akıllı Telefon: 0 Yukarıdaki pikseller, 0 piksel daha düşük,% 0 sol,% 0 sağ Şimdi son tasarımı kontrol edin.
