Fiyat paketlerini görüntülemek için Divi modüllerini kullanmanın yaratıcı yolları
Web sitenizde bir fiyat planı görüntüleme söz konusu olduğunda, birçok dönüş yapabilir ve gerçekten şaşırtıcı ve çekici bir sayfa veya fiyat parçası oluşturabilirsiniz. Divi ile bir web sitesi oluştururken, büyük olasılıkla fiyat tablosu modülünü kullanacaksınız. Bu modül, hızlı bir şekilde bir fiyat tablosu eklemenize ve istediğiniz gibi düzenlemenize olanak tanır. Ancak sayfanızın özel bölümüne daha fazla etkileşim eklemek istiyorsanız, tıklandığında fiyat paketini görüntülemek için anahtarlama modülünü de kullanabilirsiniz. Bu, durumunu açık tutarak ve diğer ikisini kapatarak belirli bir fiyat paketini vurgulamanın iyi bir yoludur.
Bu öğreticide, geçiş divi modülünü kullanarak güzel bir piyango fiyat masası tasarımının nasıl yapılacağını adım adım göstereceğiz. Yaklaşımı aldıktan sonra, oluşturduğunuz her türlü web sitesi için tıklanan her türlü geçiş fiyat paketini yapabilirsiniz. Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçlara farklı bir ekran boyutunda bir göz atalım.
Üst dolgu: 160px
Dolgu Alt: 160 piksel Satırlar #1 Sütun Yapısı Ekle Bölümün ayarlarını değiştirdikten sonra, devam edebilir ve aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyebilirsiniz: Metin Modülünü Ekle İçeriğin satırda değişiklik yapması gerekmez, bu nedenle devam edin ve metin modülünü hemen ekleyin. Modül İçerik Kutusuna seçilen bazı H2 içeriğini girin. Tasarım sekmesini girip başlık metni ayarlarını değiştirerek başlık metni ayarları devam edin. Başlık 2 Yazı Tipi: Didact Gothic
Başlık 2 yazı tipi ağırlığı: normal
Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #000000
Başlık 2 Metin Boyutu: 40 PX
Başlık alanı 2 harf: -1px
Görünürlük Bölme Modülünü Ekleyin Bölme modülünü, önceki adımda eklediğiniz ve değiştirdiğiniz metin modülünün hemen altına ekleyin. Bölücü modülündeki ‘Divider’ seçeneğinin etkinleştirildiğinden emin olun. Divisor göster: evet
Tasarım sekmesini girerek ve bölücü rengini değiştirerek renge devam edin. Renk: #000000
Yapıştırıcı Boyut ayarlarındaki modülün genişliğini de değiştirin. Genişlik:% 39
Modül hizalaması: merkez
Mesafe de bazı özel kenar boşlukları ekleyin. Alt kenar boşluğu: 50 piksel
2 numaralı satır ekle Sütun yapımız ilk satır ve modülü değiştirmeyi bitirdi. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleme zamanı: Sütun 1 Gradyan Arka Plan herhangi bir modül eklemeden, satır ayarlarını açın ve gradyanın arka planını sütun 1’e ekleyin. Renk 1: #00fff2
Renk 2: RGBA (255,255,255.0)
Sütun 1 Tip gradyanı: Radyal
Sütun 1 radyal yön: sağ alt
Sütun 1 Başlangıç Pozisyonu:% 30
Sütun 1:% 30’un son konumu
Sütun 2 gradyan arka planı ikinci sütun için de aynısını yapın. Renk 1: #FCE96F
Renk 2: RGBA (255,255,255.0)
Sütun 2 gradyan tipi: radyal
Sütun 2 radyal yön: sağ üst
Sütun 2 Başlangıç Konumu:% 40
Sütun 2:% 40’ın son konumu
Sütun 3 Gradyan Arka Planı Benzer şekilde, aşağıdaki ayarları kullanarak gradyanın arka planını üçüncü sütuna ekleyin: Renk 1: #A659FF Renk 2: RGBA (255,255,255.0)
Sütun 3 Gradyan Türü: Radyal
Sütun 3 radyal yön: aşağıda
Sütun 3 Başlangıç Konumu:% 30
Sütun 2 Son Konum:% 30
Yapıştırıcı Gradyanın arka planını eklemeyi bitirdikten sonra, tasarım sekmesine devam edin ve boyut ayarlarını değiştirin.
Bu çizgiyi tamamen genişletin: evet
Talang genişliği: 2
Sütun 1’e geçmek için modülü ekleyin. İlk sütuna yeni bir geçiş modülü ekleyin ve başlığı girin. İçerik kutusunda farklı öğeler düzenlemek için birkaç ek HTML etiketi kullandık. Devam edin ve aşağıdaki satırları kopyalayın ve içerik kutunuzdaki metin sekmesine ekleyin:
& nbsp; İçeriğiniz buraya gidiyor. Bu metni satır içi veya modül içerik ayarlarında düzenleyin veya kaldırın. Ayrıca, bu içeriğin her yönünü modül tasarım ayarlarında şekillendirebilir ve hatta modül gelişmiş ayarlarında bu metne özel CSS uygulayabilirsiniz.
& nbsp;
30 $ /mo
& nbsp;
<a href = " #" style = "font-weight: bold; #ffffff; arka plan rengi: #000000_; dolgu: 15px 40px 15px 40px pt/
& nbsp;
Ülkeniz açık veya kapalı bir geçiş modülü durumu isteyip istemediğinizi seçebilir. Eğiticinin geri kalanı boyunca yaptığınız tüm değişiklikleri görebilmek için, tüm farklı tasarım ayarlarını değiştirmeyi bitirene kadar 'açık' kalmanızı öneririm. Arka plan rengi, geçiş modülünün arka plan ayarlarını girerek devam edin ve beyaz ekleyin arka plan rengi.
Arka plan rengi: #ffffff Simgeyi Ayarla Bir sonraki tasarım sekmesinde simgenin rengini değiştirin. Renk simgesi: #000000
Ayarları ve Değişikleri Yönlendirme Arka plan rengini açma ayarlarında da açın. Açma Arka Plan Rengi: RGBA (255,255,255.0)
Başlık Metin Ayarları Daha sonra, başlık metninin başlığında bazı değişiklikler yapın. Yazı tipi başlığı: Didact Gothic
Ağır yazı tipi başlığı: kalın Başlık Metin Rengi: #000000
Boyut Metin Başlığı: 3.5VW (masaüstü), 60px (tablet), 40 piksel (telefon)
Gövde metnini ayarlamak İçindekiler metin ayarlarını da değiştirir.
Body Font: Didact Gothic
Vücut metninin hizalanması: sol Gövde metni rengi: #000000
Vücut Metin Boyutu: 18px
Vücut Hattı Yüksekliği: 1.5EM
Klon anahtarı modülü iki kez iki kez yerleştirin ve Sütun 1’deki geçiş modülünü değiştirmeyi bitirdikten sonra kalan iki sütuna yerleştirin, devam edip iki kez klonlayabilir ve kopyayı kalan iki sütuna yerleştirebilirsiniz.
Kopyala Değiştirme Tüm yinelenen kopyaları değiştirdiğinizden ve bitirdiğinizden emin olun!
Önizleme Şimdi tüm adımlardan geçtikten sonra, farklı bir ekran boyutunda yaptığımız tasarımın nihai sonuçlarına bakalım.
