Divi ile yaratıcı ürünlerin karşılaştırma tablosu nasıl tasarlanır
Ürün karşılaştırma grafiği, geliştirilmiş özelliklerle birlikte yeni ürünleri tanıtmanın çok etkili bir yolu olabilir. Grafiğin görsel yönü kullanıcılar için basit metinlerden daha çekicidir. Ve karşılaştırma yapısı yan yana, kullanıcıların her ürün özelliği arasındaki farkı kolayca görmelerini sağlar. Bu öğreticide, yaratıcı ürünlerin Divi ile karşılaştırılmasını nasıl tasarlayacağınızı göstereceğim. Ve bu tasarım düzeni herhangi bir şeyi karşılaştırmak için kullanılabilir. Örneğin, bunu vaka çalışmaları için de mükemmel bir düzen olarak görebiliyorum.
Başlayalım. Aşağıdaki Sneak Peek, bu öğreticide yapacağım bir karşılaştırma grafiğidir.
Divi teması (yüklü ve aktif)
Karşılaştırma grafiğinde ürününüzün görüntüleri olarak kullanılacak iki görüntü (yaklaşık 800 piksel kez 450px).
Ürününüzün başlığını ve resmini bir başlangıç olarak yapın, yeni bir sayfa oluşturun, Visual Builder uygulayın, ardından sayfanızı en baştan oluşturmak için seçin. Ardından, satırın bir kısmına bir sütunun düzenini ekleyin. Modülü eklemeden önce ayar ayarlarını girelim ve aşağıdakileri güncelleyelim:
Arka plan rengi: #2222222 Gradyan Rengi Sol Arka Plan: RGBA (242,90,71,0.14) Gradyan Renk Arka Plan: RGBA (255,255,255.0) Gradyan Türü: Radyal Yer Gradyan Arka Plan Görüntü: Evet Ayarları kaydedin. Şimdi çizgi ayarlarınızı açın ve%100 özel genişlik satırınızı verin. Ardından metin modülünü aşağıdaki ayarlarla sütunlarınızdan birine ekleyin: İçerik için bu html’i girin: & h2 & gt;/lt;/h2 & gt;
Vs
Metin Yazı Tipi: Montserrat Ağırlık Yazı Tipi Metin: Çok Kalın Metin Yazı Tipi Stili: TT (Büyük Case) Metin Renk Metin: RGBA (255,255,255,0.3) Metin Boyutu Metin: 3VW Yüksek Satır Metin: 1.8mest Metin: Bir modül kenar boşluğunu Özel Oluşturmak İçin Bir Modül Marjı Bir örtüşen etki. Başlık 2 Yazı Tipi: Montserrat Başlık 2 Renk Metin: RGBA (255,255,255,0.3) Başlık 2 Metin Boyutu: 13VW Uzay Başlık 2 Mektup: 1VW Özel Marj: -13VW Daha düşük Metninizden bazıları şimdilik gizlenecek, ancak başka içerik ekledikten sonra görünecek. İkinci satırdan ikisi ilk satırı çoğaltır ve daha sonra yinelenen satırdaki metin modülünü siliyoruz. Ardından sütun yapısını iki sütuna güncelleyin. Lütfen satır ayarlarınızı aşağıdaki gibi güncelleyin: Özel Oluklar: 1 Sütun 1 Dolgu Özel: 2VW Sağ Sütun 2 Dolgu Özel: Sol 2VW
Karşılaştırmak istediğimiz iki ürünün resimlerini buraya koyacağız. Satırımızın sol sütununda, görüntü modülünü kullanarak görüntünüzü ekleyin. Bu örnek için PNG 800px Kali 459px görüntü kullanıyorum. Ardından görüntü modülü ayarlarını aşağıdaki gibi güncelleyin: Genişlik:% 70 Hizalama Modülü: Doğru Özel Dolgu: 40 PX’in altında Ardından modülü kopyalayın ve sağ sütuna yapıştırın. Görüntüyü değiştirin ve modül seviyesini sola ayarlayın. Sol sütundaki görüntü modülünün altında, aşağıdaki metin içeriğine sahip metin modülünü ekleyin: “Eski Ürün”. Ardından metin modülünü yukarıdaki ilk satıra girin ve metin kuvvetini kopyalayın.
Ardından, imleci “Eski Ürün” metniyle yeni metin modülüne yönlendirin ve sağ tıklamayı kullanarak metin stilini modüle yapıştırın. Bu, çok daha hızlı ihtiyacımız olan metin stiline uyacaktır. Şimdi yapmamız gereken metin boyutunu ve seviyesini güncellemektir: Metin Boyutu: 16px Metin Oryantasyonu: Şu anda aşağıdaki gelişmiş sekmeyi açın ve aşağıdaki özel CSS’yi ana öğe giriş kutusuna girin: Metin-Aign: Right! Önemli; Divi, varsayılan olarak akıllı telefondaki soldaki metin seviyesini ayarlayacağından bu gereklidir. Bu CSS görüntüleri buna gelecek ve akıllı telefonda da uyum içinde kaldığından emin olacak. Ayarları kaydedin. Ardından metin modülünü kopyalayın ve görüntünün altına sağ sütundaki 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 olduğumuz şey.
Bir Ürün Karşılaştırma Grafiği Yapma Karşılaştırma grafiğimizi yapmak için, her biri bir satır sütun ile ayrılmış iki sütunun sırasını kullanacağız. İki sıra sütun renkli saplarımızı tutacaktır. Ve Row bir sütunu çubuk değeri ile ilgili özelliklerin adını görüntüler. Yeni bir iki sütun satırı oluşturun ve satır ayarlarını aşağıdaki gibi güncelleyin: Özel Genişlik:% 100 Gutch Genişliği: 1 Özel Dolgu: 0px Sütun 1 Dolgu Özel: 2VW Sağ Sütun 2 Dolgu Özel: Sol 2VW Pilding Custom Sütunları 1 ve 2, ekleyeceğimiz kök diyagramının ortasında ihtiyacımız olan alanı yarattı.
Sol sütunda bölücüyü ekleyin ve aşağıdaki ayarları güncelleyin: Sol arka plan gradyan rengi: RGBA (81,91,214.0.25) Sağ arka plan gradyan rengi: RGBA (255,255,255.0.15) gradyan yönü: 90 derece Başlangıç Pozisyonu: 35% Renk: 35 renk: 35 % Renk: #515BD6 Bölme Ağırlığı: 23px (Bu değer, bölücü modülün arka planıyla aynı genişliğe sahip olması için varsayılan olarak 23px olan bölücünün yükseklik değeri ile aynı olmalıdır) Dolma özel:% 70 sol ( Bu, bölücünün sağ% 75’ine iter, sağdan% 25 çubuk grafik değeri üretir) ayarları kaydeder. Şimdi bölücü modülünü aynı satırın sağ sütuna kopyalayın. Daha sonra aşağıdaki ayarları güncelleyin: Sol arka plan gradyan rengi: RGBA (255,255,255,0.15) Sağ arka plan gradyan rengi: RGBA (242,90,71,0.25) Başlangıç Pozisyonu:% 70 Renk: #F25A47 Dolgu Özel:% 30 Sağ (teşvik eder Sol bölücü% 30 soldan% 70 çubuk grafik değeri üretir.)
Şimdi bagajınızın ilk satırı onun yerine geldikten sonra, ürün özelliklerimizi etiketlemek için altına bir satır sütun eklememiz gerekiyor. Üstte özel 0px dolguya sahip bir sütun satırı oluşturun. Ardından yeni bir bulanıklık modülü ekleyin ve bulanıklık modülü ayarlarını aşağıdaki gibi güncelleyin:
İçerik: “Özellik” Kullan simgesi: Evet simgesi: Ekran görüntüsüne bakın Renk Icon: RGBA (255,255,255,0.3) simge yazı tipi boyutunu kullanın Boyut: Evet Ikon Yazı Tipi Boyut: 30px Metin Oryantasyonu: Orta Yazı Tipi Gövdesi: Montserrat Vücut Ağırlığı: Ultra Kalınlık Renk Gövde Metin: RGBA (255,255,255.0.0. GÜZEL: Devam sekmesi altında, CSS kutusu bulanıklığı görüntüsüne aşağıdaki özel CSS ekleyerek açıklama simgesi altındaki varsayılan marjı ortadan kaldırabilirsiniz: Marj-Alt: 0px;Artık ürün karşılaştırma özelliğinin ilk çalışma örneğine sahip olduğunuza göre, yapmanız gereken bir karşılaştırma özelliği oluşturan iki satırı çoğaltmaktır (iki çubuk/divisor ve modül açıklamasıyla satır). Her satırı kopyalamak için CTRL + C (veya komut + C) ve ardından Ctrl + V (veya komut + V) ‘nin birbirine eklemek için en kolay olduğunu buldum. Ardından, farklı bir çubuk diyagram değeri görüntülemek için yinelenen bölücü için özel dolguyu güncelleyin. Ayrıca, seçtiğiniz özel dolgu değerine bağlı olarak gradyanın başlangıç ve ucunu da ayarlayabilirsiniz. Örneğin, sol% 60 sol dolgu sütun bölücü verirseniz, gradyanınızın başlangıç konumunu% 30’a (tam olarak dolma mesafesinin yarısı) ayarlayabilirsiniz. Son dokunuş için, sizin tarafınıza bir bölücü arka plan eklemek isteyebilirsiniz. Bu örnek için aşağıdakileri ekleyeceğim: üst bölücü: bkz. Ekran yakalama Rengi: RGBA (255,255,255,0,05) Yüksek Bölücü: 19VW Sonuçlar aşağıdadır. Parçanın arka plan rengini #000314 olarak değiştirdiğimde tasarımın görünümünü de seviyorum.
Divi’de duyarlı tasarımlar oluşturma, iki sütunun her satışı mobil cihazlarda otomatik olarak birbirinin üstüne istiflenecektir. Bu elbette cep telefonundaki tasarıma zarar verecektir. Bunu düzeltmek için iki şey yapmalıyız. İlk olarak, tema ayarına özel bir küçük CSS parçası eklememiz gerekiyor. @Media (Max-Width: 980px) { .Disable-creak .et_pb_column { Genişlik:%50! Önemli; Marj-Alt: 30px; }
}
Bu kod, CSS sınıfı “Devre Dışı Break” ile her satırın sütunun genişliğini%50’ye ayarlayacaktır. Bu, tasarımın hasar görmemesi için mobil cihazlarda iki sütunun yapısını korumamızı sağlayacaktır. Değişikliklerinizi yayınlamayı unutmayın. CSS yerine geldikten sonra, iki sütun yapısına sahip her satıra CSS sınıfını eklememiz gerekir. Yeni başlayanlar için, CSS sınıfını ürünlerimizin iki resmini saklayan iki sütuna ekleyelim. Satır ayarlarını açın ve devam eden sekmeyi açın. Ardından CSS sınıfı giriş kutusuna “Devre Dışı Bırak” girin. Ardından CSS sınıfı seçeneğini sağ tıklayın ve “CSS Sınıfını Kopyala” yı tıklayın.
Şimdi tek yapmanız gereken, iki sütun yapısına (Divisor/Çubuklu Tüm Satırlar) sahip olan her satıra doğru tıklayın ve “CSS Sınıfı Yapıştır” ı tıklayın.
Şimdi sütununuz mobil cihazlarda iki sütunun yapısını koruyacak ve tasarımı tutarlı tutacaktır.
Son zihin, bazı tasarım tekniklerini öğrendikten sonra Divi’deki ürün karşılaştırma grafiğini çok kolay hale getirir. İşin püf noktası,% 100 genişlik ve oluk genişliği 1 ile iki sütununuzu ayarlamaktır. Bundan sonra, bazı benzersiz kök diyagram tasarımları yapmak için bir bölücü modülü kullanabilirsiniz. Ve hücresel olarak iki sütunun düzenini korumak istiyorsanız, ihtiyacınız olan tek şey sadece küçük bir CSS parçasıdır. Umarım bu karşılaştırma grafiğinin düzeni çeşitli şekillerde kullanılabilir. Bazı fikirleri Divi Nation ile paylaşmaktan çekinmeyin. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
