Divi mağazası modüllerini düzenlemenin 5 güzel yolu
Divi 100 maratonumuzun 75. gününe hoş geldiniz. Bu serinin son gününde Divi 3.0’ın muhteşem sürümünü geri saydığımızda Divi’nin olağanüstü kaynaklarının 100 gününü takip etmeye devam edin!
Divi mağazası modülü çok uyarlanmış ve ürünlerini yenilikçi bir şekilde sergilemek için iş fırsatları sunmaktadır. Bunu hatırlayarak, bu makale beş basit divi mağazası stili yaparak adım adım yol gösterecektir. Bu öğreticinin sonunda, Divi Shop modülü tarafından sunulan olasılıklara daha fazla alışacaksınız ve güzel ürününüzün bir ekran penceresi hızlı ve kolay bir şekilde oluşturabileceksiniz.
Her şeyi hazırlamak Divi WooCommerce ile uyumludur ve Divi Shop modülüyle kullanmanızı öneririz. WooCommerce yüklemediyseniz, en son sürümü burada bulabilirsiniz. WooCommerce etkin ve çalıştırıldıktan sonra Ürün sekmesini açabilir ve ürününüzü yükleyebilirsiniz. Varsayılan mağaza modülü Başlamadan önce, varsayılan olarak Divi Shop modülünün nasıl olduğunu görelim. Bu, aşağıdaki her örnekte kullandığımız başlangıç noktasıdır. Elde ettiğimiz aynı sonuçları elde etmek için, her örneğin aşağıdaki talimatları izleyin. 1. Düz Kart Bu basit ama zarif ekran, Divi Shop modülü kullanılarak hızlı bir şekilde elde edilebilir. Bunlar, bu makaledeki stillerin çoğunu yapmaya başlamak için izleyeceğimiz genel adımlar:
Yeni bir sayfa ve sayfa açın
Divi Builder’ı kullanın
Divi Builder’da bölümde sıradan bir satırınız var
Sütunu ekle tıklayın
İlk seçeneği seçin (büyük bir karo gösteren)
Modülü ekleyin ve mağazayı seçin
Bu sizi doğrudan mağaza modülü ayarları bölümüne yönlendirecektir Türde görüntülemek istediğiniz ürünü seçin
Not: Belirli bir kategori istiyorsanız, ürün kategorisini seçin ve kategoriler listeniz otomatik olarak yeni bölümde Post numarası bölümünün altındaki görünür.
Hangi kategoriyi görüntülemek istediğinizi kontrol edin
Posta numarasında ana sayfanızda istediğiniz toplam posta numarasını seçin (bu stil için üçünü seçiyoruz)
Sütun numarasında belirli bir modülde istediğiniz sütun sayısını seçin (bu stil için üçünü seçiyoruz)
Ayrıca, ürünün nasıl sıralanmasını istediğinizi seçmek için ayarlara göre siparişiniz var
Gelişmiş Tasarım Ayarları sekmesinde yazı tiplerini ve başlık ve fiyatın boyutunu değiştirebilirsiniz. Bu ekran için, ilgili başlıkları ve fiyatları için 30 tatmin yazı tipi ve 20 lato yazı tipi boyutunu kullandık. Her ikisi için metnin rengi #EF285A’dır. Bu öğeler için hattın mesafesini ve yüksekliğini de ayarlayabilirsiniz.
Bunun daha çekici görünmesini sağlamak için, kartın arka plan rengini değiştirmek ve ortadaki yazı tipini uyumlu hale getirmek istiyoruz. Arka plan rengi, ürün kutusuna aşağıdaki kodu girilerek Özel CSS sekmesinde değiştirilebilir: arka plan-color: #ffeBee; Renk kodu istediğiniz renge göre ayarlanabilir. Yazı tipi seviyesi, Başlık ve Fiyat bölümünde aşağıdaki kod satırları kullanılarak Özel CSS sekmesinde de değiştirilebilir: Metin-Aign: Center; Bu ekran Divi Shop modülünden ayrılmadan elde edilir. Gerekli bölüm veya satır ayarında değişiklik yoktur. 2. Malzeme Kartı Malzeme kartı, görüntüde derinlik oluşturmak için bir gölge kullanarak düz kart ekrana ilgi ve doku ekler.
Bu özel tasarımı elde etmek için ilk olarak yukarıdaki örnekte olduğu gibi bir Divi mağazası modülü yaptık. Bu kez her altı ve üçte yayın ve sütun sayısı. Gelişmiş Tasarım Ayarları sekmesinde, başlık 18 Cantata One yazı tipi boyutuna göre düzenlenmiştir ve fiyat 17 Açık Sans yazı tipi boyutuna ayarlanmıştır. Şimdi bir gölge etkisi yapmamız gerekiyor. Bunu başarmak için Özel CSS sekmesini girin ve ürün bölümüne aşağıdaki kod satırını ekleyin: -webkit-box-shadow: 10px 10px 5px 0px rgba (0.0.0.0.4);-moz-box-shadow: 10px 10px 5px 5px 0px RGBA (0.0,0,0,4);
Box-Shadow: 10px 10px 5px 0px RGBA (0.0,0,0,0.4); Gölgenin boyutu ve rengi, koddaki sayıları değiştirilerek ayarlanabilir. Etrafta oynayın ve ne tür bir etki yaratabileceğinizi görün!
3. Minimum genişlik
Bu stil, izleyicilerin sadece ürün görüntülerini gördüğü minimalist bir görünüm elde etmeyi amaçlamaktadır. Buna ek olarak, imleci resme yönlendirdiklerinde sadece bir simge görürler. Bu stil için yine yukarıdaki örneğe benzer bir Divi mağazası modülü yaptık. Genel ayar sekmesinde üç gönderi ve üç sütun seçtik. Bu sefer başlık ve fiyat ayarlarını ayarlamıyoruz, çünkü görülmeyecek. Sadece ürün görüntülerinin görünür olması için başlığı ve fiyatı silmek istiyoruz. Bu özelliği ekrandan silmek için Özel CSS sekmesini girmeniz gerekir. Aynı kodun başlığı ve türü altında: Görünürlük: gizli; Bu stil için imleci resme yönlendirdiğimizde gelişim simgesini görmek istiyoruz. Bu nedenle, kaplama görünürlüğünü ortadan kaldırmamız gerekir. Gelişmiş tasarım ayarlarında, bindirme rengine gidebilir ve renk ve şeffaflığı kaplama – yani RGBA (0.0.0.0) olacak şekilde ayarlayabilirsiniz. Buna ek olarak, bu sekmede, sitenizin stiline uyacak şekilde Hover simgesinin görüntüsünü ve rengini değiştirebilirsiniz. Soluk pembe bir kalp göstermek için gelişim simgesini düzenliyoruz. Genel etki, birisinin imleci bir ürüne yönlendirdiği zaman, sadece bizim seçtiğimiz simgeyi görüyorlar:
Elbette bu efekti çeşitli şekillerde kullanabilirsiniz – minimalist bir görünüm isteyen herkes için çok uygun. 4. Kapalı Izgara Bu dükkanın stili tüm ekranı bir görüntü ile buluşuyor ve çok etkili olabilir. Bu görünümü elde etmek için, her karo için ayrı bir Divi mağazası modülü yapıyoruz. Bunu yapmak için, sütuna tıkladığınızda, “1/3” etiketli üç karo görüntüleyen bir tane seçin. İlk sütunda modül (ler) i takın ve alışverişi seçin. Yalnızca bir gönderi ve bir sütun seçeceksiniz. Bir kez daha, başlık ve fiyatın bu ekran için görülmesini istemiyoruz, bu nedenle özel CSS sekmesini açın ve başlık ve fiyat altında bu koda girin: Görünürlük: gizli; Bu tip ızgara genellikle kontrast kaplamasıyla iyi çalışır. Kaplama ayarlarını değiştirmek için, Gelişmiş Tasarım Ayarları sekmesini girin ve site görüntüsünüze uyacak şekilde renk ve şeffaflık kaplamasını değiştirin. Markanıza uyacak şekilde Hover simgesinin rengini de değiştirebilirsiniz. Daha sonra bu modülü iki kez klonlayabilir ve diğer iki sütuna bir kopyasını sürükleyip bırakabilirsiniz. Sadece hangi ürünleri göstermek istediğiniz ürünleri değiştirmek için her modüle gitmeniz gerekir. Modülü klonlamak için, üst üste binen iki dikdörtgen gösteren modülün solundaki simgeyi tıklayın: Fayans ekranın tam genişliğine ulaşmak için satır menüsüne girmelisiniz ve genel ayar sekmesinde bu çizgiyi yapmak için Evet’i seçmelisiniz. Tam geniş. Ardından, karolar arasındaki boşluğu ortadan kaldırmak için, özel oluk genişliği kullanmak için evet seçmelisiniz. Ayarlar 1, karolar arasındaki boşluğu ortadan kaldıracaktır.
5. Düzensiz ızgara Düzensiz kafes için, istediğiniz görünümü elde etmek için bir dizi divi mağaza modülünü birleştirebilirsiniz. Bu stil için, beş ürünün üstünde üç üründen oluşan bir sıra yığıldık. Bunu yapmak için, önce üç yazı ve üç sütunlu bir ayarlı bir Divi mağazası modülü yapıyorsunuz. Ardından, ilk satırın altına satır ekle’yi tıklayın. Yeni satırda, beş yazı ve beş sütunlu genel ayar ile Divi Shop modülüne girin. Ayrıca, daha temiz bir görünüm sağlamak için bu görüntülerin başlığını ve fiyatını siliyoruz. Bunu yapmak için, daha önce olduğu gibi, Özel CSS sekmesini ve başlık ve fiyat altına girerek aşağıdaki kodu ekleyin: Görünürlük: Yok; Satırlar arasındaki varsayılan oda, burada sevmek için çok büyük. Bu alanı azaltmak için satır modülü ayarlarını girdik (satır modülünün solundaki üç ilik simgesi). Üst sıranın tabanı ve alt sıranın üst kısmı için 0 ila 0 dolguyu ayarlarız. Sarma Marka imajınızı ve coşkunuzu çevrimiçi bir mağazaya yansıtmak zor görünse de, bir Divi mağaza modülüyle birçok şeyin yapılabileceğini görebilirsiniz. Çok sayıda kolay -kullanım ayarını kullanarak, mağazanız için sayısız güzel tasarım yapabilirsiniz. Bu öğreticiden hangi fikri dahil edeceksiniz? Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun! Titov Nikolai / Shutterstock.com.Divi tarafından Makale Küçük Resim 75 Divi 3.0’a Geri Sayın Bu yazı Divi 100 Maratonumuzun bir parçasıdır. Arka arkaya 100 gün boyunca ücretsiz bir divi kaynağı yayınladığımızda takip etmeye devam edin! REACT kullanarak aşağıdan yukarıya inşa edilmiş yeni görsel düzenleyicimiz de dahil olmak üzere Divi 3.0 oyununu değiştiren bir sürümle sona erecek. Divi 3.0 sonsuza dek Divi Builder ile bir web sitesi oluşturma şeklinizi değiştirecek! Geri sayım başlasın. Divi 3.0 hakkında daha fazla bilgi edinin
