Divi ile Yaratıcı Ürün Karşılaştırma Tablosu Nasıl Tasarlanır

Bir ürün karşılaştırma tablosu, yeni ürünleri yükseltilmiş özellikleriyle birlikte tanıtmanın son derece etkili bir yolu olabilir. Bir grafiğin görsel yönü, kullanıcılara basit metinden daha çekici gelir. Ve yan yana karşılaştırmanın yapısı, kullanıcıların her bir ürün özelliği arasındaki farkı kolaylıkla görmelerini sağlar.

Bu derste size Divi ile nasıl yaratıcı bir ürün karşılaştırma tablosu tasarlayacağınızı göstereceğim. Ve bu tasarım düzeni hemen hemen her şeyi karşılaştırmak için kullanılabilir. Örneğin, bunun vaka çalışmaları için de mükemmel bir düzen olduğunu görebiliyorum.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağım karşılaştırma tablosuna bir göz atın.

Bu Eğitim İçin İhtiyacınız Olan Şeyler

Bu eğitim için aşağıdakilere ihtiyacınız var:

• Divi Teması (Yüklü ve Aktif)
• Karşılaştırma tablosunda ürün resimleriniz olarak kullanılacak iki Resim (yaklaşık 800 piksele 450 piksel).

Başlık ve Ürün Görsellerinizi Oluşturma

Yeni başlayanlar için yeni bir sayfa oluşturun, Visual Builder'ı dağıtın ve ardından sayfanızı sıfırdan oluşturmayı seçin.

Ardından, bölümünüzün satırına bir sütun düzeni ekleyin.

Modül eklemeden önce bölüm ayarına gidelim ve aşağıdakileri güncelleyelim:

Arka Plan Rengi: #222222
Arka Plan Gradyan Rengi Sol: rgba(242,90,71,0.14)
Arka Plan Gradyan Rengi Sağ: rgba(255,255,255,0)
Gradyan Türü: Radyal
Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET

Ayarları kaydet. Şimdi satır ayarlarınızı açın ve satırınıza %100'lük özel bir genişlik verin.

Ardından, aşağıdaki ayarlarla bir sütun satırınıza bir metin modülü ekleyin:

İçerik için bu html'yi girin:

<h2>Compare</h2>
VS

Metin Yazı Tipi: Montserrat
Metin Yazı Tipi Ağırlığı: Ultra Kalın
Metin Yazı Tipi Stili: TT (Büyük Harf)
Metin Metin Rengi: rgba(255,255,255,0.3)
Metin Metin Boyutu: 3vw
Metin Satır Yüksekliği: 1.8em
Metin Yönü: Merkez

Ardından, h2 başlık tasarım seçeneklerini güncelleyin ve örtüşen efekti oluşturmak için modülünüze özel bir alt kenar boşluğu verin.

Başlık 2 Yazı Tipi: Montserrat
Başlık 2 Metin Rengi: rgba(255,255,255,0.3)
Başlık 2 Metin Boyutu: 13vw
Başlık 2 Harf Aralığı: 1vw
Özel Marj: -13vw Alt

Metninizin bir kısmı şimdilik gizlenecek, ancak diğer içeriği eklediğimizde görünecektir.

İki, ikinci satırımızı oluşturun, ilk satırı çoğaltın ve ardından çoğaltılan satırın içindeki metin modülünü silin. Ardından sütun yapısını iki sütunlu bir satıra güncelleyin.

Devam edin ve satır ayarlarınızı aşağıdaki gibi güncelleyin:

Özel Oluk Genişliği: 1
Sütun 1 Özel Dolgu: 2vw Sağ
Sütun 2 Özel Dolgu: 2vw Sol

Karşılaştırmak istediğimiz iki ürünümüzün resimlerini buraya koyacağız. Satırımızın sol sütununda, resim modülünü kullanarak resminizi ekleyin. Bu örnek için 800 piksele 459 piksel boyutunda bir png resmi kullanıyorum. Ardından görüntü modülü ayarlarını aşağıdaki gibi güncelleyin:

Genişlik: %70
Modül Hizalaması: Sağ
Özel Dolgu: 40px Alt

Ardından modülü kopyalayın ve sağdaki sütuna yapıştırın. Resmi değiştirin ve ardından modül hizalamasını sola ayarlayın.

Sol sütundaki görüntü modülünün altına şu metin içeriğine sahip bir metin modülü ekleyin: “Eski Ürün”.

Ardından, yukarıdaki ilk satırdaki metin modülüne gidin ve metin stillerini kopyalayın.

Ardından, “Eski Ürün” metninin bulunduğu yeni metin modülünün üzerine gelin ve sağ tıklamayı kullanarak metin stillerini modüle yapıştırın.

Bu, çok daha hızlı ihtiyacımız olan metin stilleriyle eşleşecek. Şimdi tek yapmamız gereken
metin boyutunu ve hizalamasını güncelleyin:

Metin Metin Boyutu: 16px
Metin Yönü: Sağ

Şimdi gelişmiş sekmeye gidin ve aşağıdaki özel CSS'yi Ana Öğe giriş kutusuna yerleştirin:

text-align:right !important;

Bu gereklidir çünkü Divi, metin hizalamasını varsayılan olarak akıllı telefonlarda sola ayarlayacaktır. Bu CSS pasajı bunu geçersiz kılar ve akıllı telefonda da doğru hizada kalmasını sağlar.

Ayarları kaydet. Ardından metin modülünü kopyalayın ve sağ sütundaki görüntünün altına yapıştırın. Metin içeriğini “Yeni Ürün” olarak değiştirin ve metin yönünü “Sol” olarak güncelleyin.

İşte şimdiye kadar sahip olduklarımız.

Ürün Karşılaştırma Tablosu Oluşturma

Karşılaştırma grafiğimizi oluşturmak için, her biri bir sütun satırıyla ayrılmış iki sütun satırı dizisi kullanacağız. İki sütun satırı renkli çubuklarımızı tutacaktır. Ve bir sütun satırı, çubuk değerleriyle ilişkili özelliğin adını görüntüler.

Yeni bir iki sütunlu satır oluşturun ve satır ayarlarını aşağıdaki gibi güncelleyin:

Özel Genişlik: %100
Oluk Genişliği: 1
Özel Dolgu: 0px Alt
Sütun 1 Özel Dolgu: 2vw Sağ
Sütun 2 Özel Dolgu: 2vw Sol

Sütun 1 ve 2 özel dolgusu, ekleyeceğimiz çubuk grafiklerimizin ortasında ihtiyacımız olan alanı oluşturur.

Sol sütuna bir ayırıcı modül ekleyin ve ayarları aşağıdaki gibi güncelleyin:

Arka Plan Gradyan Rengi Sol: rgba(81,91,214,0.25)
Arka Plan Gradyan Rengi Sağ: rgba(255,255,255,0.15)
Gradyan Yönü: 90deg
Başlangıç ​​Konumu: %35
Renk: #515bd6
Bölücü Ağırlığı: 23px (bu değer, bölücünün modülün arka planıyla aynı genişlikte olması için varsayılan olarak 23px olan Bölücü Yükseklik değerine eşit olmalıdır)
Özel Dolgu: %70 Sol (Bu, ayırıcıyı %75 sağa iter ve sağdan %25'lik bir çubuk grafik değeri verir)

Ayarları kaydet.

Şimdi Bölücü Modülü aynı satırın sağ sütununa kopyalayın. Ardından aşağıdaki ayarları güncelleyin:

Arka Plan Gradyan Rengi Sol: rgba(255,255,255,0.15)
Arka Plan Gradyan Rengi Sağ: rgba(242,90,71,0.25)
Başlangıç ​​Konumu: %70
Renk: #f25a47
Özel Dolgu: %30 Sağ (Bu, ayırıcıyı sola %30 iter ve soldan %70'lik bir çubuk grafik değeri verir.)

Artık ilk çubuk sıranız yerine oturduğuna göre, ürün özellik etiketimizi koymak için altına bir sütun satırı eklememiz gerekiyor.

Üstte 0 piksellik özel dolgulu bir sütun satırı oluşturun. Ardından yeni bir tanıtım yazısı modülü ekleyin ve tanıtım yazısı modülü ayarlarını aşağıdaki gibi güncelleyin:

İçerik: "özellik"
Simgeyi Kullan: EVET
Simge: ekran görüntüsüne bakın

Simge Rengi: rgba(255,255,255,0.3)
Simge Yazı Tipi Boyutunu Kullan: EVET
Simge Yazı Tipi Boyutu: 30px
Metin Yönü: orta
Gövde Yazı Tipi: Montserrat
Gövde Yazı Tipi Ağırlığı: Ultra Kalın
Gövde Metni Rengi: rgba(255,255,255,0.3)
Gövde Harf Aralığı: 2px
Özel Kenar Boşluğu: -20 piksel

Gelişmiş sekmesi altında, Blurb Image CSS kutusuna aşağıdaki özel CSS'yi ekleyerek, tanıtıcı simgesinin altındaki varsayılan kenar boşluğunu kaldırabilirsiniz:

margin-bottom: 0px;

Artık ilk çalışan ürün karşılaştırma özelliği örneğine sahip olduğunuza göre, tek yapmanız gereken karşılaştırma özelliğini oluşturan iki satırı (iki çubuk/bölücü içeren satır ve tanıtım yazısı modülü içeren satır) çoğaltmaktır. Her satırı kopyalamak için ctrl + c (veya komut + c) kullanmanın ve ardından bunları birbirinin altına yapıştırmak için ctrl + v (veya komut + v) kullanmanın en kolay olduğunu buldum. Ardından, çoğaltılan bölücüler için özel dolguyu farklı çubuk grafik değerleri gösterecek şekilde güncellemeniz yeterlidir.

Seçtiğiniz özel dolgu değerine bağlı olarak degradenin başlangıç ​​ve bitiş konumunu da ayarlayabilirsiniz. Örneğin, sol sütun ayırıcıya %60 Sol dolgusu verirseniz, degradenizin başlangıç ​​konumunu %30'a ayarlayabilirsiniz (dolgu mesafesinin tam olarak yarısı).

Son bir dokunuş için, bölümünüze ayırıcı bir arka plan eklemek isteyebilirsiniz. Bu örnek için aşağıdakileri ekleyeceğim:

Üst Bölücü: Ekran görüntüsüne bakın
Bölücü Rengi: rgba(255,255,255,0.05)
Bölücü Yüksekliği: 19vw

İşte nihai sonuç.

Bölüm arka plan rengini #000314 olarak değiştirdiğimde tasarımın görünümünü de beğeniyorum.

Tasarımı Duyarlı Hale Getirmek

Divi'de, iki sütunlu herhangi bir satır, mobil cihazlarda otomatik olarak üst üste yığılır. Bu elbette tasarımı mobilde kıracak. Bunu düzeltmek için iki şey yapmamız gerekecek. İlk olarak, tema özelleştiriciye küçük bir özel CSS parçası eklememiz gerekiyor.

@media (max-width: 980px){
.disable-break .et_pb_column {
    width: 50%!important;
    margin-bottom: 30px;
}
}

Bu kod, CSS sınıfı "disable-break" olan herhangi bir satırın sütun genişliğini %50'ye ayarlayacaktır. Bu, tasarımın bozulmaması için iki sütunlu yapımızı mobil cihazlarda tutmamızı sağlayacaktır. Değişikliklerinizi yayınlamayı unutmayın.

CSS yerleştirildikten sonra, iki sütunlu yapıya sahip herhangi bir satıra CSS sınıfını eklememiz gerekiyor.

Yeni başlayanlar için, iki ürün resmimizi içeren iki sütun satırına CSS sınıfını ekleyelim. Satır ayarlarını açın ve gelişmiş sekmeye gidin. Ardından CSS Sınıfı giriş kutusuna "disable-break" yazın.

Ardından CSS Sınıfı seçeneğine sağ tıklayın ve “CSS Sınıfını Kopyala” seçeneğine tıklayın.

Şimdi yapmanız gereken tek şey, iki sütunlu bir yapıya sahip her satıra (bölücüler/çubuklar olan tüm satırlar) sağ tıklayıp “CSS Sınıfını Yapıştır” seçeneğine tıklamak.

Artık kolonlarınız mobil cihazlarda iki kolonlu yapıyı koruyacak ve tasarımı tutarlı tutacaktır..

Son düşünceler

Birkaç tasarım tekniğini öğrendikten sonra Divi'de bir ürün karşılaştırma tablosu oluşturmak basittir. İşin püf noktası, iki sütunlu satırlarınızı %100 genişlik ve oluk genişliği 1 olacak şekilde ayarlamaktır. Bundan sonra, bazı benzersiz çubuk grafik tasarımları oluşturmak için ayırıcı modülünü kullanabilirsiniz. Ve iki sütunlu düzeninizi mobil cihazlarda tutmak istiyorsanız, tek ihtiyacınız olan küçük bir özel CSS parçacığıdır. Bu karşılaştırma tablosu düzeninin birçok farklı şekilde kullanılabileceğini umuyorum. Divi Nation ile bazı fikirleri paylaşmaktan çekinmeyin.

Yorumlarda sizden haber bekliyorum.

Şerefe!