Tasarlamak için Divi Metin Stili ve Divi Listesi Nasıl Kullanılır ve Eşsiz Koordinatlar
Divi’nin metin ve stil seçenekleri listesi çoğu Divi modülünde yaygın özelliklerdir. Bu, daha önce yalnızca metin modülünde mümkün olan modüllerde (anahtar ve modüller gibi) yaratıcı içerik ve tasarım listeleri tasarlamak için yeni fırsatlar açar. İşin püf noktası, varsayılan tasarım ayarlarını kullanarak öğeyi hedefleyebilmeniz için içeriğinizi doğru HTML ile ayarlamaktır. Bu öğreticide, benzersiz bir anahtar ve hesaplar tasarlamak için metin stili seçeneğini ve Divi listesini nasıl kullanacağınızı göstereceğim. Bu, CSS veya CSS sınıfını kullanmak zorunda kalmadan farklı metin tasarımlarını birleştirmek istediğinizde yararlı olacaktır.
Başlayalım. Aşağıdaki gizlice göz atma, metin stili seçeneğini ve divi listesini kullanarak yapacağımız tasarımın bir bakış.
Dosyayı indir
Düzeni sayfanıza aktarmak için, ZIP dosyasını çıkarın ve JSON dosyasını Divi Builder’a sürükleyin.
Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntüler
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak. Bölüm 1: Geçiş modülünde liste stilini kullanma
Bu öğreticinin ilk bölümünde, her biri liste stili seçeneği kullanılarak tasarlanan içeriğe sahip üç anahtar yapacağız. Bu, liste öğelerinizi özel bir içerik açıklaması gibi ayrı ayrı kapatmak için ayırmak için yararlı olacaktır. İlk olarak, üç sütun satırı ile düzenli bir bölüm oluşturun. Ardından satır ayarlarını aşağıdaki gibi güncelleyin: Talang genişliği: 2 genişlik:% 100 maks. Genişlik: 90VW
Bir sonraki anahtar modülünü ekleyin, geçiş modülünü sütun 1’e ekleyin. Bu, üç sütunun her birine eklenecek üç geçiş modülünün ilki olacaktır. HTML İçerik Ekle HTML içeriği bu tasarımın anahtarıdır.Divi anahtar ayarlarında farklı liste stillerinden yararlanabilmemiz için içerik kutumuza bir HTML listesi eklememiz gerekir.Lütfen ve aşağıdaki html’yi vücut içeriğine yapıştırın.
- >
lorem iPsum Dolor Sit Amet
lorem iPsum Dolor oturma amet, seçkin adipiscing kavramı.Tamsayı Nec Odio.Praecent Libero.Sed cursus ante dapibus sessizdir.Sed Nisi.Nulla Quis Sem, Nibh Elementum Imperdiet’te.
Şimdi bu HTML kod parçası OL etiketlerini kullanarak bir sıralama listesi oluşturuyor.Yalnızca sıralanan listede, birkaç yapay içeriğe sahip bir liste öğesine (LI) sahip olmayan (UL) listelerin bir listesi olan bir liste öğesi (LI) vardır.Sıralı listenin altında metnin temel paragrafı bulunmaktadır.
Bu ayarla, Divi’nin bir liste stili içeren varsayılan metin stilini kullanarak farklı stiller için bu etiketlerin her birini (OL, UL, P) hedefleyebiliriz. İlk OL etiketinin içinde bir başlangıç = “1” olduğunu unutmayın. Bu, her liste öğesiyle sipariş edilen liste numarasını dahil ederek hangi sayıların başlayacağını bir listeye verir. Teknik olarak, bu ilk sayı için gerekli değildir, çünkü otomatik olarak olacaktır. 1 varsayılan ile başlayın. Ancak ekleyeceğiz bir sonraki kapatmak için ihtiyacımız olacak. Ayrıca, sıralanmayan liste etiketinin negatif kenar boşluklarını kullanarak biraz UL içeriği getirmek için birkaç satırı var. Listeden listeden metin tarafından sipariş edilen liste tasarımda sıralı olmayan. İçeriğin içeriği Şimdi varsayılan ayarları ve liste stillerini kullanarak birkaç renk ve yazı tipi eklemeye başlayabiliriz. Anahtar tasarım ayarlarını aşağıdaki gibi güncelleyin: simge rengi : #FF3D97 Yazı Tipi Boyutu Ikon: 26px Açma Arka Plan Renk: #ffffff Renk Kapalı Geçiş Arka Plan: #ffffff Renk Açık Başlık Metin: #333333 Renk Metin Başlığı: #33333 3
YAZI TARAFINDAN YAZI TARAFINDA: OSWALD AĞIRLIĞI YAZI SADECE SADECE LİSTESİ: Hafif Renk Metin Listesi Yanlış Değil: #333333 Metin Boyutu Kayıtlı Kayıt: 36px Stil Türü Oybirliğiyle: Yok
Yazı tipi Yazı Tipi Sipariş: Cameron Ağırlık Yasağı Siparişi Listesi: Renk Kalınlığı Metin Listesi Sipariş Edildi: RGBA (255,61,151,0.34) Metin boyutu Sipariş edilen liste: 100px Sipariş edilen listelerin yüksekliği: 1.1em Sütun 2 ve 3 için geçiş yapmak için diğer geçişler yapmak için ilk geçiş modülünü çoğaltın, yeni tasarladığımız geçiş modülünü çoğaltacağız. Ardından, her sütunun aynı anahtar modülüne sahip olması için onu her sütuna sürükleyebiliriz. Yeni sayı, sütun 2’deki kopya anahtarı için sıralanan listeyi başlatır, sıra listesi “1” değil “2” sayısıyla başlamalıdır. Değiştirmek için anahtar modülü ayarlarını açın ve OL etiketindeki ilk numarayı “2” olarak değiştirin. Ayrıca Sütun 3’teki anahtarı ilk “3” dizi listesiyle güncellemeniz gerekir. Son Tasarım Şimdi son tasarımı kontrol edelim. Bölüm 2: Modülde Liste Stilini Kullanma Modül Bu öğreticinin ikinci bölümünde, anahtar modülünden modül modülüne stil içeriği listesi getirmenin hızlı ve kolay bir yolunu göstereceğim. İşlem kolaydır, çünkü önceki anahtarda kullandığımız Accordeon’un (veya neredeyse tüm modüllerin) modülünde aynı metin ve liste stilini kullanabilirsiniz. Bunu yapmak için önce bir sütun satırı ile yeni bir parça oluşturun. Ardından Accordeon modülünü satıra ekleyin.
Ardından, toplam üç akor için İçerik sekmesi altındaki iki varsayılandan birini çoğaltın. Ardından, daha önce yaptığımız üç geçişin her birinde aynı HTML geçiş içeriği ile her bir Chordeon için içeriği güncelleyin.
Acordeon’a geçiş stilini genişletin Modülde yaptığımız anahtarın stilini modüle getirmenin hızlı yollarından biri, Uzatma Kuvvetleri özelliğini kullanmaktır. Bunu yapmak için, anahtar modüllerinden birini açın ve simge stili kategorisinde sağa tıklayın ve sağ -tıklama menüsünden “Icon Style’ı genişletin” seçeneğini seçin. Ardından bu simge stilini bu “sayfa” boyunca “tüm akorlar” olarak genişletmeyi seçin. Bu, “geçiş” “başlık metni” ve “içerik metni” stilini içerir. Ardından, Chordeon’u tasarlamak için nihai sonucu görün. Bölüm 3: Geçiş modülünde birkaç sütun oluşturmak için liste stilini kullanma Bu öğreticinin üçüncü bölümünde, liste stili tasarımınız için nasıl birkaç içerik sütunu oluşturabileceğinizi göstereceğim. İlk olarak, bir satır bir sütunla yeni bir parça oluşturun. Ardından daha önce yaptığımız anahtar modüllerinden birini kopyalayıp yapıştırın. Ardından, geçiş modülünün içeriğini birkaç yeni HTML modülü ile güncelleyin:- >
lorem iPsum Dolor Sit Amet
Daha fazla bilgi edinin
lorem iPsum Dolor Sit Amet
Daha fazla bilgi edinin
lorem iPsum Dolor Sit Amet
Daha fazla bilgi edinin
lorem iPsum Dolor Sit Amet
daha fazla bilgi edinin
Başlangıç OL etiketine eklenen satır içi kuvvet özniteliğine “sütun sayımı: 2” dikkat edin. Bu, sıralanan liste içeriğinin bir değil, iki sütuna düzenlenmesine izin verecektir. Bunu gerektiği gibi diğer sütunlar için herhangi bir numaraya değiştirebilirsiniz.
Ve başlık, bağlantılar ve listeler stili için Divi’nin varsayılan tasarım ayarlarını nasıl kullanabileceğimize dikkat edin.
Bağlantının metnini düzenleme Başlık ve listenin başlığı önceki tasarımdan zaten var olduğundan, tek yapmamız gereken bağlantı metnine bazı tasarımlar eklemektir. Aşağıdaki anahtar ayarlarını açın ve güncelleme: Bağlantı harf ağırlığı: Yarı kalınlıkta yazı tipi stili bağlantı: alt satır renk bağlantısı metni: #ff3d97 metin boyutu bağlantı metni: 15px
Ve bu tasarımla herhangi bir metin üst üste gelmediğimiz için, devam edin ve daha parlak bir renkte renk kuvveti numarası verin: Renk Metin Listesi Sipariş Edildi: #FF3D97
Tasarımı tamamlamak için anahtara arka plan ekleyin, anahtarımıza özel bir arka plan ekleyebiliriz. Bunu yapmak için aşağıdaki anahtar ayarlarını güncelleyin: Arka plan görüntüsü: [seçtiğiniz görüntü yükle] Sol renk arka plan gradyanı: RGBA (255,255,255,0.92) Doğru renk arka plan gradyanı: RGBA (255,255,255,0.8) 50% nihai konum:% 0 yer Arka plan görüntüsünün üzerindeki gradyan: evet
İki geçiş sütununa duyarlı öğeler eklemek Geçiş içeriği artık iki sütun olduğundan, tasarımı birkaç duyarlı stille güncelleyelim, böylece ölçeğin hücreselde iyi olması. İlk olarak, satır ayarlarını aşağıdaki gibi güncelleyin: genişlik:% 100 maks. Genişlik: 89VW (masaüstü), 90VW (tablet ve cep telefonu) Anahtar ayarlarını açın ve aşağıdakileri güncelleyin: Yazı tipi boyutu simgesi: 5VW
