Divi ile Yatay Fiyat Tabloları Nasıl Oluşturulur

Yatay Fiyatlandırma Tabloları, birçok özelliğe sahip ürünleri tanıtmanın harika bir yoludur. Ve Divi'nin yeni beş sütunlu düzeni ile bunu yapmak şaşırtıcı derecede kolaydır. Ancak, beş veya daha fazla sütunu olan herhangi bir düzende olduğu gibi, zorluk, düzeni mobilde de iyi görünecek şekilde duyarlı hale getirmektir. Bu eğitimde size tüm cihazlarda harika görünen yatay fiyatlandırma tablolarının nasıl oluşturulacağını göstereceğim. Hatta size yatay fiyatlandırma tablolarınızı çoğaltmanın ve birkaç tıklamayla tablolarınızın renk düzenini hızla değiştirmek için “bul ve değiştir” gibi yeni tasarım özelliklerini kullanmanın ne kadar kolay olduğunu göstereceğim.

Başlayalım.

Gizlice Bakış

Başlarken

Bu eğitim için ihtiyacınız olan tek şey Divi. Ve Visual Builder'ı kullanacağız. Tabloları sıfırdan oluşturacağımız için yeni bir sayfa oluşturmanız, görsel oluşturucuyu dağıtmanız ve ardından “Sıfırdan Yerleşim Oluştur” seçeneğini seçmeniz gerekecektir.

Bundan sonra, başlamaya hazırsınız. Haydi Yapalım şunu!

Yatay Fiyatlandırma Tablolarınız için Beş Sütun Satırını Ayarlama

Yeni başlayanlar için, görsel oluşturucuda bizi bekleyen bölüme beş sütunlu bir düzen verelim.

Herhangi bir modül eklemeye başlamadan önce, bölüm ayarlarını herhangi bir üst veya alt dolgu olmadan özel bir genişliğe sahip olacak şekilde güncelleyelim.

Genişlik: 1200 piksel
Bölüm Hizalama: Merkez
Özel Dolgu: 0px Üst, 0px Alt

Ardından, satırınıza ve ayrıca ortadaki üç sütuna aşağıdaki gibi hızlı bir şekilde arka plan rengi vermek için satır ayarlarına gidin:

Arka Plan Rengi: #00cbc9
Sütun 2 Arka Plan Rengi: #00cbc9
3. Sütun Arka Plan Rengi: #eeeeee
4. Sütun Arka Plan Rengi: #eeeeee

Ardından, boyutlandırmayı aşağıdaki gibi güncelleyin:

Bu Satırı Tam Genişlikte Yapın: EVET
Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: EVET

Aralığı güncellemek için birazdan satır ayarlarına geri dönmemiz gerekecek, ancak şimdilik içerik için her sütunumuza tanıtım yazısı eklemeye başlayalım.

Sütunları İçerik Modülleriyle Doldurma

Ürün Adı

İlk sütunda, içerik kutusuna (metin sekmesinin altında) aşağıdaki başlığa sahip bir metin modülü ekleyin:

<h2>Starter</h2>

Bu, öne çıkardığınız planınızın veya ürününüzün başlığı için bir nokta görevi görecektir. Bu örnekte, bu bir tür "Başlangıç" 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 Metin Rengi: #ffffff
Başlık 2 Metin Boyutu: 38px
Özel Dolgu (masaüstü): %90 Üst, %90 Alt, %10 sol
Özel Dolgu (tablet): %30 Üst, %30 Alt

Özellik Kategorisi Başlıkları için Tanımlama Ekleyin

İkinci sütuna bir tanıtım yazısı modülü ekleyin. Ardından içerik kutusundaki dolgu metnini silin ve Başlık metnini olduğu gibi bırakın. Ardından, resim yerine bir simge kullanmayı seçin ve simgeyi istediğiniz biriyle güncelleyin.

Tasarım sekmesine geçin ve ayarların geri kalanını aşağıdaki gibi güncelleyin:

Simge Rengi: #00cbc9
Resim/Simge Yerleşimi: Sol
Başlık Metin Boyutu: 16px
Özel Dolgu: 2vw Alt
Alt Sıra Kenarlık Genişliği: 4px
Alt Kenarlık Rengi: #cccccc

Bu tanıtım yazısı tasarımı 2., 3. ve 4. sütunlarda bir özellik kategorisi başlığı olarak kullanılacağından tanıtım modülünü kopyalayıp ikinci ve üçüncü sütuna yapıştırabilirsiniz.

Aralığın şu anda gerçekten harika görünmediğinin farkındayım. Modül düzeyinde biraz boşluk eklemek isteyebilirsiniz, ancak bu tasarım için, sütun düzeyinde (satır ayarları altında) boşluk ayarlamaları yapmayı daha kolay buluyorum. Buna daha sonra geleceğiz.

Özellik Açıklamaları Listesi için Metin Modülleri Ekleme

Sonraki İkinci sütundaki tanıtım yazısının altına bir metin modülü ekleyin. Ardından, içerik kutusuna aşağıdaki tablo html kodunu ekleyin:

• özelliğin açıklaması buraya gelir.
• özelliğin açıklaması buraya gelir.
• özelliğin açıklaması buraya gelir.
• özelliğin açıklaması buraya gelir.

Sırasız Liste Stil Türü: Kare
Sırasız Liste Öğesi Girintisi: 4px
Özel Dolgu: 20px Üst, 20px Alt, %5 Sol, %5 Sağ

Şimdi tanıtım yazıları için yaptığımız gibi, devam edin ve metin modülünü kopyalayın ve 3. ve 4. sütunlardaki tanıtım yazısı modüllerinin her birinin altına yapıştırın.

Son Sütuna Fiyat ve Düğme Ekleme

Son sütunda (Sütun beş), dolar işaretli fiyatlandırma metninin tasarımını elde etmek için bir fiyatlandırma tablosu modülü kullanacağım. Fiyatlandırma tabloları modülünden gerçekten ihtiyacımız olan tek şey bu, bu yüzden geri kalan içerik ve tasarım öğelerinin içini boşaltacağım, fiyatlandırma metnini ve dolar işaretini bırakacağım. Fiyatlandırma tabloları modülüne dahil olan düğmeyi kullanabilirdim, ancak bu, tablette bazı duyarlı sihir yapmak biraz daha zordu (ne demek istediğimi daha sonra göreceksiniz). Bu yüzden ben de bir düğme modülü kullanacağım.

Devam edin ve Fiyatlandırma tabloları Modülünü beşinci sütuna ekleyin. Varsayılan olarak dahil edilen iki tablodan birinin sağındaki çöp kutusu simgesine tıklayarak silin.

Ardından tamamen şeffaf bir renk kodu ekleyerek arka plan renginden kurtulun.

Arka Plan Rengi: rgba(255,255,255,0)

Ardından aşağıdakileri güncelleyin:

Tablo Başlığı Arka Plan Rengi: rgba(255,255,255,0)
Para Birimi ve Frekans Metin Rengi: #ffffff
Para Birimi ve Frekans Metin Boyutu: 30px
Fiyat Metin Rengi: #ffffff
Kenar Genişliği: 0px
Özel Kenar Boşluğu (tablet): -%100 Sağ
Özel Marj (akıllı telefon): %0 Sağ
Özel Dolgu: 0px Üst, 10px Alt, 0px Sol, 0px Sağ

Şimdi bireysel tablo görüntüleme menüsünün solundaki dişli simgesine tıklayarak bireysel tablo ayarlarına gidin.

Şimdi Başlık, Altyazı ve İçerik için varsayılan içeriği silin. Bu sadece Para Birimi ve Fiyat Metni bırakacaktır.

Şimdi bu noktada ne düşündüğünü biliyorum. Fiyat metninin altındaki bu sınır çizgisi hakkında ne yapmalı? Bunun için küçük bir özel css parçacığı var. Gelişmiş sekmesine gidin ve aşağıdaki CSS'yi Fiyatlandırma Üst giriş kutusuna ekleyin:

Fiyatlandırma Üstü:

border: none;

Artık yalnızca Fiyatlandırma Metni ve Para Birimi sembolü için fiyatlandırma tablosunu bu şekilde başarılı bir şekilde oluşturabilirsiniz!

Düğme için, fiyatlandırma tabloları modülünün altına bir düğme modülü ekleyin ve aşağıdakileri güncelleyin:

Düğme Hizalama: Merkez
Metin Rengi: Açık
Özel Kenar Boşluğu (tablet): -%100 Sağ
Özel Marj (akıllı telefon): %0 Sağ

Özel marj, tablette tam genişlikte bir modül elde etmek için fiyatlandırma tabloları modülüne eklediğimiz marjla eşleşecektir. Tabletteki beş sütunlu düzen, beşinci sütunu iki sütunlu bir düzenin sol tarafına yerleştireceğinden, modülü -%100 sağa çekmek, modülü satırın tam genişliğine zorlayacaktır.

Ok Tasarımını ve Duyarlı Sütun Aralığını Ekleme

Degradeleri katmanlayarak Ok Ekleme

İlk sütunda ok tasarımı efektini oluşturmak için iki degrade arka planı katmanlayacağız. İlk degrade arka planı sütun düzeyinde eklenecektir. Bir sonrakini daha sonra modül düzeyinde ekleyeceğiz.

Degrade arka planı eklemek için satır ayarlarına gidin ve aşağıdakileri ekleyin:

Sütun 1 Degrade Arka Plan Sol renk: rgba(255,255,255,0)
Sütun 1 Degrade Arka Plan Sağ renk: #eeeeee (bu, sütun 2'nin arka plan rengiyle eşleşmelidir)
Gradyan Yönü: -245deg
Başlangıç ​​Konumu: %75
Bitiş Konumu: %0

Ayarları kaydedin ve birinci sütundaki metin modülü ayarlarına geçin. Oku tamamlamak için ikinci arka plan gradyan katmanını ekleyeceğimiz yer burasıdır. Aşağıdakileri güncelleyin:

Sütun 1 Gradyan Arka Plan Sol renk: #eeeeee
Sütun 1 Degrade Arka Plan Sağ renk: rgba(255,255,255,0)
Gradyan Yönü: 245deg
Başlangıç ​​Konumu: %25
Bitiş Konumu: %0

Değerlerin birbirine eşit olarak zıt olduğuna dikkat edin. Örneğin, renk sırası değişti, 245 derece negatiften pozitife değişti ve %75 şimdi %25 (fark) oldu. Ok noktasının kenarlarının mükemmel simetrik olmasını bu şekilde elde edersiniz.

Satır ve Sütunları Boşaltma

Satır ayarlarına geri dönün ve aşağıdakileri güncelleyerek Satır ve Sütunlarımızın aralığını ayarlayalım:

Özel Dolgu: 0px Üst, 0px alt, 0px Sol, 0px Sağ
Özel 2 Dolgu: %5 Üst, %5 alt, %2 Sol, %2 Sağ
Özel 3 Dolgu: %5 Üst, %5 alt, %2 Sol, %2 Sağ
Özel 4 Dolgu: %5 Üst, %5 alt, %2 Sol, %2 Sağ
Özel 5 Dolgu: %10 Üst, %10 alt

Neden sadece 2 oluk genişliği kullanmadığımı ve bununla bitmediğimi merak ediyor olabilirsiniz. Bunun nedeni, tüm cihazlarda okunabilirliği artırmak için metin içeren sütunlardaki alanı mümkün olduğunca en üst düzeye çıkarmak istememdi. Tasarruf edebileceğimiz her küçük alan önemlidir. Bu nedenle sütunlar arasındaki boşluklar sol ve sağ dolgu yüzdeleriyle oluşturulur.

Yeni Tablolar ve Renk Şemaları için Tabloyu Çoğaltmak

Açıkçası, kullanıcıların karşılaştırması için birden fazla yatay fiyatlandırma tablosuna sahip olmak isteyeceksiniz. İkinci fiyatlandırma tablosunu oluşturmak için, oluşturduğunuz ilk tabloyu içeren bölümün tamamını çoğaltın.

Ardından Satır ayarlarını açın ve arka plan renginin üzerine gelin ve bul ve değiştir'i tıklayın.

“İçinde” altında “Bu Bölüm”ü seçin.
"Genişliği Değiştir"in altına şu rengi ekleyin: #f84f51
Ardından, bölümde bulunan Tüm değerleri Değiştir kutusunu işaretleyin (yalnızca arka plan rengini değil).

Ardından Değiştir'e tıklayın ve sihrin gerçekleşmesini izleyin. Bu, önceki rengin tüm örneklerini yeni bir renkle değiştirmenin hızlı ve kolay bir yoludur.

Değişiklikleri kaydetmek için çıkmadan önce satır ayarlarını kaydetmeyi unutmayın.

Artık yeni bir renk şemasına sahip yeni bir tablonuz var.

Şu renge sahip başka bir tablo eklemek için bu işlemi tekrarlayın: #bdc958

Öne Çıkan Tablo Yapmak

Tablolarınızdan birinin öne çıkması ve biraz öne çıkması için tablonun bulunduğu bölüme kutu gölgesi ekleyebilir, sütun arka planları ve degradeler için kullanılan gri rengi güzel bir beyaz renge değiştirebilirsiniz.

Bunu yapmak için ikinci bölümün (ortadaki) bölüm ayarlarına gidin ve aşağıdakileri güncelleyin:

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölge Dikey Konumu: 0px
Kutu Gölge Bulanıklığı Gücü: 80px

Gri arka plan rengini değiştirmek için satır ayarlarına gidin ve 2. sütun arka plan rengini (#eeeeee) bulun. Üzerine sağ tıklayın ve "bul ve değiştir" e tıklayın. Aşağıdaki güncelleme:

“İçinde” altında “Bu Bölüm”ü seçin.
"Genişliği Değiştir"in altına şu rengi ekleyin: #ffffff
Ardından, bölümde bulunan Tüm değerleri Değiştir kutusunu işaretleyin (yalnızca arka plan rengini değil).
Ardından "Değiştir" e tıklayın.

Fontları Test Etmek için Bul ve Değiştir'i Kullanma

Tablonuzun genelinde farklı bir yazı tipi kullanmak istiyorsanız, “Bul ve Değiştir” özelliğini kullanarak farklı yazı tiplerini kolayca test edebilirsiniz. Bu işlemi sorunsuz bir hale getirmek için tüm modüller için varsayılan yazı tipini bilerek bıraktım. Tüm tablo sayfanızın yazı tipini değiştirmek için tek yapmanız gereken, herhangi bir tablo bölümünün ilk sütunundaki metin modülünün ayarlarını açmaktır (aslında sayfanızdaki varsayılan yazı tipini kullanan herhangi bir modül olabilir). Ardından, kullanılan Başlık 2 Yazı Tipine sağ tıklayın ve “Bul ve Değiştir” seçeneğini seçin. Ardından aşağıdakileri güncelleyin:

“İçinde” altında “Bu Sayfayı” saklayın.
“Genişliği Değiştir” altında bir yazı tipi seçin (Roboto Condensed kullanıyorum).
Ardından, bölümde bulunan Tüm değerleri Değiştir kutusunu işaretleyin (veya tüm h2 yazı tiplerini değiştirmek için işaretleyemediniz).
Ardından "Değiştir" e tıklayın.

Şimdi tüm sayfa boyunca tüm yazı tipleri değiştirildi.

Bu kadar! Artık yatay fiyatlandırma tabloları tamamlandı.

Sonucu kontrol edelim.

Tablet ve akıllı telefondaki beş sütun ayarı da çok güzel çalışıyor.

Son düşünceler

Divi'nin beş sütunlu düzeni, Visual Builder'da bulunan güçlü tasarım özellikleriyle birlikte, bazı güzel yatay fiyatlandırma tabloları oluşturmanıza olanak tanır. Ve Bul ve Değiştir'i kullanırken renkleri ve yazı tiplerini ayarlamak, tasarım sürecini daha da iyileştirerek harika bir zaman tasarrufu sağlar. Umarım öğreticiyi hem bilgilendirici hem de ilham verici bulursunuz.

Yorumlarda sizden haber bekliyorum.

Şerefe!