Benzersiz Geçiş ve Akordeon İçerik Tasarımları için Divi'nin Metin ve Liste Stili Seçeneklerini Kullanma
Yayınlanan: 2019-07-24Divi'nin metin ve liste stili seçenekleri, çoğu Divi Modülünde bulunan ortak bir özelliktir. Bu, daha önce yalnızca metin modülünde mümkün olan yaratıcı içerik tasarlamak ve modüller içindeki tasarımları (geçiş ve akordeon modülü gibi) listelemek için yeni fırsatlar açar. İşin püf noktası, içeriğinizi uygun html ile kurmaktır, böylece yerleşik tasarım ayarlarını kullanarak bu öğeleri hedefleyebilirsiniz.
Bu eğitimde, benzersiz geçiş ve akordeon içerik tasarımları için Divi'nin metin ve liste stili seçeneklerini nasıl kullanacağınızı göstereceğim. Bu, CSS sınıfları veya satır içi css kullanmak zorunda kalmadan farklı metin tasarımlarını birleştirmek istediğinizde kullanışlı olacaktır.
Başlayalım.
Gizlice Bakış
Divi'nin metin ve liste stili seçeneklerini kullanarak oluşturacağımız tasarımlara hızlı bir bakış.
Geçişler ve Akordeon Düzeni için Liste Stili Tasarımlarını ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için aşağıdakilere sahip olmanız gerekir:
- Divi Teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
- Sahte içerik için kullanılacak resimler
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Bölüm 1: Geçiş Modüllerinde Liste Stillerini Kullanma
Eğitimin bu ilk bölümünde, her biri liste stili seçenekleri kullanılarak tasarlanmış içeriğe sahip üç geçiş oluşturacağız. Bu, liste öğelerinizi neredeyse özel bir içerik tanıtıcısı gibi ayrı geçişlere ayırmak için yararlı olacaktır.
İlk önce üç sütunlu bir satır içeren normal bir bölüm oluşturun. Ardından satır ayarlarını aşağıdaki gibi güncelleyin:
Oluk Genişliği: 2
Genişlik: %100
Maksimum Genişlik: 90vw
Geçiş Modülü Ekle
Ardından, sütun 1'e bir geçiş modülü ekleyin. Bu, üç sütunun her birine eklenecek olan üç geçiş modülünden ilki olacaktır.
Geçiş HTML İçeriğini Ekle
HTML içeriği bu tasarımın anahtarıdır. Divi geçiş ayarlarındaki farklı liste stillerinden faydalanabilmemiz için içerik kutumuza HTML listeleri eklememiz gerekiyor.
Devam edin ve aşağıdaki HTML'yi
Gövde içerik kutusu.
<ol start="1">
<li>
<ul style="margin-top: -1.5em;">
<li>Lorem ipsum dolor sit amet</li>
</ul>
</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.</p>
Şimdi bu HTML kodu parçası ol etiketini kullanarak sıralı bir liste oluşturur. Sıralı listede, bazı sahte içeriğe sahip bir liste öğesi (li) ile iç içe sıralanmamış bir liste (ul) olan yalnızca bir liste öğesi (li) bulunur. Sıralı listenin altında metnin temel bir paragrafı bulunur.
Bu kurulumla, Divi'nin liste stillerini içeren yerleşik metin stillerini kullanarak bu etiketlerin (ol, ul, p) her birini farklı stiller için hedefleyebiliriz.
Başlangıç ol etiketinin içinde start=”1″ olduğuna dikkat edin. Bu, listeye, her liste öğesiyle birlikte sıralı listenin numaralarını listeleyerek hangi numaradan başlayacağını söyler. Teknik olarak, ilk sayı için bu gerekli değildir, çünkü varsayılan olarak otomatik olarak 1 ile başlayacaktır. Ancak ekleyeceğimiz sonraki geçişler için buna ihtiyacımız olacak.
Ayrıca, sırasız liste etiketi, ul içeriğini negatif kenar boşluğu kullanarak biraz yukarı getirmek için bazı satır içi stillere sahiptir. Tasarımdaki sırasız listenin metni ile sıralı listenin numarasını bu şekilde örtüştüreceğiz.
İçeriği Şekillendirme
Artık yerleşik ayarları ve liste stillerini kullanarak bazı renkler ve yazı tipi stilleri eklemeye başlayabiliriz. Geçiş tasarımı ayarlarını aşağıdaki gibi güncelleyin:
Simge Rengi: #ff3d97
Simge Yazı Tipi Boyutu: 26px
Arka Plan Rengini Aç/Kapat: #ffffff
Kapalı Geçiş Arka Plan Rengi: #ffffff
Başlık Metni Rengini Açın: #333333
Başlık Metin Rengi: #333333
Başlık Yazı Tipi: Oswald
Başlık Metin Boyutu: 18px
Başlık Satırı Yüksekliği: 3em
Sırasız Liste Yazı Tipi: Oswald
Sırasız Liste Yazı Tipi Ağırlığı: Hafif
Sırasız Liste Metin Rengi: #333333
Sırasız Liste Metin Boyutu: 36px
Sırasız Liste Stili Türü: Yok
Sıralı Liste Yazı Tipi: Kameron
Sıralı Liste Yazı Tipi Ağırlığı: Kalın
Sıralı Liste Metin Rengi: rgba(255,61,151,0.34)
Sıralı Liste Metin Boyutu: 100px
Sıralı Liste Satır Yüksekliği: 1.1em
Diğer Geçişleri Oluşturmak için İlk Geçiş Modülünü Çoğalt
Sütun 2 ve 3 için geçişleri oluşturmak için, tasarlamayı yeni bitirdiğimiz geçiş modülünü çoğaltacağız. Ardından bunları her sütuna sürükleyerek her sütunun aynı geçiş modülüne sahip olmasını sağlayabiliriz.
Sıralı Liste Başlangıç Numaralarını Güncelleyin
Sütun 2'deki yinelenen geçiş için, sıralı listenin "1" yerine "2" ile başlaması gerekir. Bunu değiştirmek için geçiş modülü ayarlarını açın ve ol etiketindeki başlangıç numarasını “2” olarak değiştirin.
Ayrıca sütun 3'teki geçişi, sıralı liste başlangıç numarası "3" olacak şekilde güncellemeniz gerekecektir.
Son tasarım
Şimdi son tasarımı kontrol edelim.
Bölüm 2: Akordeon Modüllerinde Liste Stillerini Kullanma
Eğitimin bu ikinci bölümünde, liste stili içerik tasarımlarını geçiş modülünden bir akordeon modülüne getirmenin hızlı ve kolay bir yolunu göstereceğim. İşlem kolaydır, çünkü önceki geçişlerimizde kullandığımız aynı metin ve liste stillerini bir akordeon modülünde (veya hemen hemen herhangi bir modülde) kullanabilirsiniz. Bunu yapmak için önce tek sütunlu yeni bir bölüm oluşturun. Ardından sıraya bir akordeon modülü ekleyin.
Ardından, toplam üç akordeon için içerik sekmesi altındaki iki varsayılan akordeondan birini çoğaltın. Ardından, her bir akordeon için içeriği, daha önce oluşturduğumuz üç geçişin her birinde aynı geçiş html içeriğiyle güncelleyin.
Geçiş Stillerini Akordeon'a Genişletin
Stili, oluşturduğumuz geçişlerden akordeon modülüne taşımanın hızlı bir yolu, stilleri genişletme özelliğini kullanmaktır. Bunu yapmak için, geçiş modüllerinden birini açın ve simge stili kategorisine sağ tıklayın ve sağ tıklama menüsünden “simge stillerini genişlet” seçeneğini seçin. Ardından, bu simgenin stillerini “Bu Sayfa” boyunca “Tüm Akordeonlar”a genişletmek için seçin.
Ardından, akordeon modülüne genişletilmesi gereken özel stile sahip tasarım kategorilerinin her biri için aynısını yapın. Bunlar, "Başlık Metni" ve "Gövde Metni" için "Değiştir" stilini içerir.
Ardından akordeon tasarımının nihai sonucunu kontrol edin.
Bölüm 3: Bir Geçiş Modülünde Birden Çok Sütun içeriği Oluşturmak için Liste Stillerini Kullanma
Eğitimin bu üçüncü bölümünde, liste stili tasarımlarınız için birden çok içerik sütununu nasıl oluşturabileceğinizi göstereceğim.
İlk olarak, tek sütunlu bir satırla yeni bir bölüm oluşturun. Ardından, daha önce oluşturduğumuz geçiş modüllerinden birini kopyalayıp satıra yapıştırın.
Ardından, geçiş modülü gövdesi içeriğini yeni HTML ile aşağıdaki gibi güncelleyin:
<ol style="column-count: 2">
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
<li>
<ul>
<li>Lorem ipsum dolor sit amet</li>
<a href="#">Learn More</a>
</ul>
</li>
</ol>
Başlangıç ol etiketine eklenen "column-count:2" satır içi stil özelliğine dikkat edin. Bu, sıralı liste içeriğinin bir yerine iki sütun halinde yapılandırılmasına izin verecektir. Gerektiğinde daha fazla sütun için bunu herhangi bir sayıya değiştirebilirsiniz.
Başlık, bağlantı ve liste stilleri için Divi'nin yerleşik tasarım ayarlarını nasıl kullanabileceğimize dikkat edin.
Bağlantı Metninin Stilini Oluşturma
Başlık ve liste stilleri zaten önceki tasarımdan olduğu için, tek yapmamız gereken bağlantı metni için biraz tasarım eklemek.
Geçiş ayarlarını açın ve aşağıdakileri güncelleyin:
Bağlantı Yazı Tipi Ağırlığı: Yarı Kalın
Bağlantı Yazı Tipi Stili: Altı Çizili
Bağlantı Metni Rengi: #ff3d97
Bağlantı Metni Boyutu: 15px
Ve bu tasarımla herhangi bir metin örtüşmediği için, devam edin ve sıralı liste stili numaralarına aşağıdaki gibi daha parlak bir renk verin:
Sıralı Liste Metin Rengi: #ff3d97
Geçişe bir Arka Plan ekleyin
Tasarımı bitirmek için geçişimize özel bir arka plan ekleyebiliriz. Bunu yapmak için aşağıdaki geçiş ayarlarını güncelleyin:
Arka Plan Resmi: [seçtiğiniz resmi yükleyin]
Arka Plan Gradyanı Sol Renk: rgba(255,255,255,0.92)
Arka Plan Gradyanı Sağ Renk: rgba(255,255,255,0.8)
Gradyan Yönü: 90deg
Başlangıç Konumu: %50
Bitiş Konumu: %0
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET
İki sütun geçişine Duyarlı Öğeler Ekleme
Geçiş içeriği artık iki sütun olduğundan, mobilde güzel bir şekilde ölçeklenmesini sağlamak için tasarımı bazı duyarlı stillerle güncelleyelim.
İlk olarak, satır ayarlarını aşağıdaki gibi güncelleyin:
Genişlik: %100
Maksimum Genişlik: 89vw (masaüstü), 90vw (tablet ve telefon)
Geçiş ayarlarını açın ve aşağıdakileri güncelleyin:
Simge Yazı Tipi Boyutu: 5vw
Başlık Metin Boyutu: 4vw
Sırasız Liste Metin Boyutu: 26px (masaüstü), 18px (tablet), 14px (telefon)
Sırasız Liste Öğesi Girintisi: 1px
Sıralı Liste Metin Boyutu: 8vw
Çok Sütunlu Geçiş İçeriğinin Son Tasarımı
İşte tablet ve telefon ekranlarındaki tasarım.
Ve burada daha koyu bir arka plan ve beyaz metin renkleri ile aynı tasarım.
Son düşünceler
Çoğu zaman, geçişler ve akordeonlar, gerçekten yaratıcı tasarım gerektirmeyen temel gövde içeriğine sahip olacaktır. Ancak, geçiş ve akordeon içeriğinizi renklendirmek istediğiniz zaman gelirse, Divi'nin yerleşik metin ve liste stili seçeneklerinden yararlanabilirsiniz. Html'nizi yerleştirdikten sonra, harici özel CSS veya sınıflar kullanmak zorunda kalmadan bu html etiketlerini farklı tasarımlar için hedefleyebilirsiniz. Bu, aynı liste stili seçenekleri tüm modüllerde mevcut olduğundan, Divi oluşturucuyu kullanan herhangi bir modülde yaratıcı liste stillerini görüntülemenin harika bir yoludur.
Yeni tasarımları keşfederken iyi eğlenceler.
Yorumlarda sizden haber bekliyorum.
Şerefe!