Divi ile Yatay Fiyat Masası Nasıl Yapılır
Yatay fiyat tablosu, birçok özelliğe sahip ürünleri tanıtmanın iyi bir yoludur. Ve Divi’nin beş yeni sütununun düzeni ile bunu yapmak çok kolay. Bununla birlikte, beş sütunu veya daha fazla olan düzen gibi, zorluk da iyi görünmesi için duyarlı bir düzen yapmaktır. Bu öğreticide, tüm cihazlarda iyi görünen yatay bir fiyat tablosu oluşturmayı göstereceğim. Ve hatta, yatay fiyat tablonuzu çoğaltmanın ve bazı tıklamalarınızdaki her tablonun renk şemasını hızlı bir şekilde değiştirmek için “Bul ve Değiştir” gibi yeni tasarım özelliklerini kullanmanın ne kadar kolay olduğunu bile göstereceğim.
Başlayalım. Gizlice göz atma
Genişlik: 1200 piksel Bölüm Seviyelendirme: Orta Dolma Özel: 0px üst, 0px aşağıda Ardından, arka plan rengini satırınıza ve ayrıca üç orta sütuna hızlı bir şekilde vermek için satır ayarlarını girin: Arka plan rengi: #00CBC9 Sütun 2 Renk Arka Plan: #00CBC9 Sütun 3 Renk Arka Plan: #EEEEEE Sütun 4 Renk Arka Plan Arka: # eeeeee Sonra boyutu aşağıdaki gibi güncelleyin: Bu satırı tam genişliği yapın: evet talang genişliği: 1 Eşit sütun yüksekliği: Yakita, alanı güncellemek için küçük bir satır ayarına geri dönmelidir, ancak şimdilik sütunlarımızın her birine bir açıklama eklemeye başlayalım içerik. Sütunu ilk sütunda ürün başlığı içeriği ile doldurun, metin modülünü içerik kutusuna aşağıdaki başlıkla (metin sekmesinin altında) ekleyin:
marş
Bu, gösterdiğiniz planın veya ürünün başlığı için bir yer olarak işlev görecektir. Bu örnekte, bu bir tür “acemi” planı olacaktır. Ardından aşağıdaki tasarım ayarlarını güncelleyin: Başlık 2 Yazı Tipi Stili: TT Başlık 2 Renk Metin: #FFFFFF Başlık 2 Metin Boyutu: 38px Pilding Custom (masaüstü):% 90 üst,% 90 daha düşük,% 10 sol özel dolgu (tablet): 30 Yukarıdaki%, aşağıda% 30
İkinci sütunda özellik kategorisinin başlığına bulanık ekleyin, açıklama modülünü ekleyin. Ardından, içerik kutusundaki doldurma metnini silin ve yalnızca başlık metnini bırakın. Ardından görüntü yerine simgeyi kullanmayı seçin ve simgeyi seçeneklerinizden biriyle güncelleyin. Tasarım sekmesine atlayın ve diğer ayarları aşağıdaki gibi güncelleyin: Renk simgesi: #00cbc9 Resmin/simgenin yerleşimi: Sol metin boyutu başlık: 16px dolgu özel: bott 2vw genişlik alt sıra limiti: 4px renk alt sınır: #cccccccccccccccccccccccccccccccccccccc bud Bu açıklamanın tasarımı, 2, 3 ve 4 sütunlarındaki özellik kategorilerinin başlığı olarak kullanılacağından, açıklama modülünü kopyalayıp ikinci ve üçüncü sütunlara ekleyebilirsiniz. Mesafenin şimdi gerçekten iyi görünmediğini anlıyorum. Ve modül seviyesine bazı boşluklar eklemeye cazip gelebilirsiniz, ancak bu tasarım için sütun seviyesinde (satır ayarlarının altında) mesafe ayarlaması yapmayı daha kolay buluyorum. Daha sonra tartışacağız. Metin modülünü açıklama listesine ekleyin, ardından ikinci sütundaki açıklamanın altındaki metin modülünü ekleyin. Ardından içerik kutusuna aşağıdaki tablo HTML kodunu ekleyin: Özelliklerin açıklaması buraya gidin.Özelliklerin açıklaması buraya gidin.
Özelliklerin açıklaması buraya gidin.
Özelliklerin açıklaması buraya gidin.
Tarz Türü Tür Tarafsız: Öğe kutusu oybirliğiyle: 4px dolgu özel: 20px üst, 20px alt,% 5 sol,% 5 sağ
Şimdi açıklama için yaptığımız gibi, metin modülüne devam edin ve kopyalayın ve açıklamanın her modülünün altına 3 ve 4’te yapıştırın.
Son sütundaki son sütuna fiyatlar ve düğmeler ekleyin (beşinci sütun), bir dolar işaretiyle bir fiyat metni tasarımı almak için fiyat tablosu modülünü kullanacağım. Fiyat tablo modülünden gerçekten ihtiyacımız olan tek şey budur, bu yüzden kalan içerik ve tasarım öğelerini ortadan kaldıracağım, fiyat metnini ve dolar işaretini bırakacağım. Fiyat tablo modülüne dahil olan düğmeyi kullanabilirim, ancak tablette duyarlı mucizeler yapmak biraz daha zordur (daha sonra ne demek istediğimi göreceksiniz). Bu yüzden düğme modülünü de kullanacağım. Lütfen ve fiyat tablosu modülünü beşinci sütuna ekleyin. Varsayılan olarak dahil edilen iki tablodan birini, sağ tarafındaki çöp kutusunun simgesini tıklayarak silin. Ardından, tamamen şeffaf bir renk kodu ekleyerek arka plan renginden kurtulun. Background Color: RGBA (255,255,255.0) Then update the following: Background Color Header Table: RGBA (255,255,255,0) Currency & Frequency of Text Color: #FFFFF Currency & Frequency of Text Size: 30px Text Color Price: #FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF Border width: 0px Özel Marj (Tablet): -100% Sağ Özel Kenar (Akıllı Telefon): 0% Sağ Özel Dolgu: 0px üst, 10px alt, 0px sol, 0px şu anda tek tek tablo ayarlarını tıklatarak tek tek tablo ekran Menü. Şimdi başlıklar, altyazılar ve içerik için varsayılan içeriği silin. Bu yalnızca para birimi metnini ve fiyatını bırakacaktır.
Şimdi şu anda ne düşündüğünü biliyorum. Fiyat metninin altındaki sınır çizgisi hakkında ne yapılmalıdır? Bunun için küçük bir özel CSS parçası var. Gelişmiş sekmesini açın ve aşağıdaki CSS’yi giriş fiyatlandırma üst kutusuna ekleyin: Yukarıdaki fiyat: Sınır: Yok; Peki, sadece metin sembolleri ve fiyat para birimleri ile bir fiyat tablosu yapmayı başarıyorsunuz! Düğmeler için, fiyat tablosu modülünün altındaki düğme modülünü ekleyin ve aşağıdakileri güncelleyin: Düğmenin istihdamı: Orta Renk Metni: Özel kenar boşluğu ışığı (tablet):% -100 Sağ Özel Kenar (Akıllı Telefon):% 0 Sağ
Özel kenar boşlukları, tablette tam geniş bir modül almak için fiyat tablosu modülüne eklediğimiz kenar boşluğuna uyacaktır. Tablet üzerindeki beş sütunun düzeni, beşinci sütunu iki sütunun sol tarafına yerleştireceğinden, modülü% -100’e kadar sağa çekmek, modülü satırın tam genişliğine zorlayacaktır. Ok ekleyin Tasarım ve duyarlı sütun alanı, gradyanı kaplayarak oku eklemek için, gradyanı kaplamak için degradeyi kaplamak için bir ok tasarım efekti oluşturmak için gradyanı kaplamak için iki arka plan gradyanını kaplayacağız. Arka Plan ilk gradyan sütun seviyesine eklenecektir. Bir sonraki kişiyi daha sonra modül seviyesine ekleyeceğiz.
Gradyanın arka planını eklemek için, satır ayarlarını açın ve aşağıdakileri ekleyin: Sütun 1 Arka Plan Sol Renk gradyanı: RGBA (255,255,255.0) Sütun 1 Arka Plan Gradient Sağ Renk: #eeeeee (Bu, sütun 2’nin arka plan rengine uygun olmalıdır. ) Yönlendirme Yönü: -245deg Başlangıç Pozisyonu:% 75 Son Pozisyon:% 0
Ayarları kaydedin ve birinci sütundaki metin modülü ayarlarına atlayın. Burası, oku tamamlamak için arka plan gradyanının ikinci katmanını ekleyeceğiz. Aşağıdaki Güncelleme: Sütun 1 Arka Plan Sol Renk Gradyanı: #EEEEEEE Sütun 1 Arka Plan Gradyan Sağ Renk: RGBA (255,255,255,0) Gradyan Yönü: 245DEG Başlangıç Pozisyonu:% 25 Nihai Konum:% 0% 0
Ardından satır ayarlarını açın ve imleci arka plan rengine işaret edin ve Bul ve Değiştir’i tıklayın. “İn” bu bölüm “altında. “Geniş Değiştir” altında renk ekleyin: #f84f51 ve sonra değişen kutuyu kontrol edin (sadece arka plan rengi değil).
Ardından değiştir’i tıklayın ve mucizenin meydana gelmesini izleyin. Bu, yeni renklerle önceki tüm renkleri değiştirmenin hızlı ve kolay bir yoludur. Değişiklikleri depolamak için çıkıştan önce satır ayarlarını kaydetmeyi unutmayın. Şimdi yeni bir renk şemasına sahip yeni bir tablonuz var. Renkli başka bir tablo eklemek için bu işlemi tekrar tekrarlayın: #BDC958 Masalarınızdan birini öne çıkarmak için üstün bir tablo oluşturma ve biraz belirgin hale getirmek için, tabloyu tutan parçaya bir kutunun gölgesi ekleyebilir ve sütunun arka planı için kullanılan gri rengi ve gradyanı iyi bir beyaza değiştirebilirsiniz. renk.Bunu yapmak için, ikinci parçanın ayarlarını açın (orta) ve aşağıdakileri güncelleyin: Gölge Kutusu: Ekran Dikey Konum Yakalama Gölge Kutusu: 0PX Bulanık Güç Gölge Kutusu: 80 PX Gri arka planın rengini değiştirmek için satır ayarlarını girin ve sütun 2’nin (#eeeeeee) arka plan rengini bulun. Doğru üzerine tıklayın ve “Bul ve Değiştir” i tıklayın. Aşağıdaki güncelleme: “Seç” in “Bu bölüm”. “Geniş Değiştir” altında renk ekleyin: #ffffff sonra değişen kutuyu kontrol edin. Ardından “Değiştir” i tıklayın. Yazı tiplerini test etmek için bul ve değiştirin, tablonuz boyunca farklı yazı tipleri kullanmak istiyorsanız, “Discover and Değiştir” özelliğini kullanarak farklı yazı tiplerini kolayca test edebilirsiniz. Bu işlemi pürüzsüz hale getirmek için tüm modüllerin varsayılan yazı tipini kasten bıraktım. Tüm tablo sayfalarınız için yazı tiplerini değiştirmek için, yapmanız gereken tek şey, tablonun her bölümünün ilk sütununda metin modülünün metin ayarlarını açmaktır (aslında sayfanızdaki varsayılan yazı tipini kullanan herhangi bir modül olabilir). Ardından, kullanılan 2 yazı tipine sağ tıklayın ve “Bul ve Değiştir” i seçin. Ardından aşağıdakileri güncelleyin: “Kaydet” ten aşağıdaki “aşağıdaki”. “Geniş Değiştir” altında yazı tipini seçin (Roboto Condens kullanıyorum). Ardından, bölümde bulunan tüm değerleri değiştiren kutuyu kontrol edin (veya tüm H2 yazı tiplerini değiştirmek için kontrol edemezsiniz). Ardından “Değiştir” i tıklayın. Şimdi tüm yazı tipleri sayfaların her yerinde değiştirildi. İşte burada! Şimdi yatay fiyat tablosu tamamlandı. Sonuçlara bakalım. Beş sütunun tabletlere ve akıllı telefonlara ayarlanması da iyi çalışır.
