Divi Ürün Öne Çıkanlar: DiviGrid

DiviGrid, Divi Builder'a 30'dan fazla yeni modül ekleyen bir eklentidir. Bu ek modüllerle içeriğinizi ilgi çekici şekillerde sergilemek için karmaşık düzenler oluşturabilirsiniz. Bu eklenti, içeriğin bir ızgarada görüntülenmesini kolaylaştıran, özellikleri, ürünleri, hizmetleri ve daha fazlasını sergilemek için ideal olan çeşitli eklentiler içerir. Modüller, kapsamlı tasarım ayarları, ilgi çekici animasyon ve fareyle üzerine gelme efektleri ile öğelerin sırası ve düzeni üzerinde sezgisel kontroller içerir. Ek olarak eklenti, kendi tasarımlarınıza hızlı bir başlangıç ​​yapmak için kullanabileceğiniz 500'den fazla demo düzenine sahiptir.

Bu yazıda, bir sonraki web tasarım projeniz için doğru Divi ürünü olup olmadığına karar vermenize yardımcı olmak için DiviGrid'e göz atacağız.

Başlayalım!

DiviGrid'in Kurulumu

Başlamadan önce Divi temasının web sitenizde yüklü ve etkin olduğundan emin olun.

DiviGrid, diğer WordPress eklentileri gibi kurulabilir. WordPress kontrol panelinde eklentiler sayfasını açın ve ardından Yeni Ekle'ye tıklayın.

Üst kısımdaki Eklentiyi Yükle'ye tıklayın, ardından eklenti dosyasını seçin ve Şimdi Kur'a tıklayın.

Eklentiyi yükledikten sonra etkinleştirin.

DiviGrid Ayarları

DiviGrid yüklenip etkinleştirildiğinde, WordPress kontrol panelinde DiviGrid için yeni bir sekme göreceksiniz. Burada aktif DiviGrid modüllerini yönetebilir ve dahil edilen demo şablonlarını görüntülemek ve indirmek için bağlantılara erişebilirsiniz. Ek olarak, dokümantasyon ve desteğe yönelik bazı kullanışlı bağlantılar bulunmaktadır.

DiviGrid Modülleri

DiviGrid 30'dan fazla modülle birlikte gelir. Divi Builder ile bir sayfa açın ve yeni bir modül eklemek için gri artı simgesine tıklayın. Modül listesinde mevcut DiviGrid modüllerini görmelisiniz.

DiviGrid'de bulunan modüllerin her birine daha yakından bakalım.

Gelişmiş Tanıtım Yazısı

Gelişmiş Tanıtım Modülü ile başlık, alt başlık, metin, simge, resim, rozet ve düğme üzerinde kontrol sahibi olarak benzersiz tanıtım tasarımları oluşturabilirsiniz. Tanıtım yazısında bu öğelerin her birinin sırası üzerinde kontrol, içerik öğelerinin herhangi biri arasına bölücüler ekleme yeteneği, benzersiz fareyle üzerine gelme efektleri ve tasarımı beğeninize göre ince ayar yapmak için birçok ayar içerir.

İşte benzersiz fareyle üzerine gelme efektine sahip Gelişmiş Blurb Demo 2.

Gelişmiş Başlık

Gelişmiş Başlık Modülü, ayrı ayrı şekillendirilebilen birden fazla içerik alanı, çift metin düzeni ve bölücülerle ilgi çekici başlık tasarımları oluşturmayı kolaylaştırır. Tasarım seçeneklerinde, başlık öğelerinin her biri için degrade ve arka plan klip stili, gösterme ve vurgulama efektleri, metin vurgulamaları ve birçok tasarım seçeneği ekleyebilirsiniz.

Bu, iki stillendirilmiş metin alanı ve bir simgeyle stillendirilmiş bir ayırıcı içeren Gelişmiş Başlık Demosu 6'dır. Metnin fareyle üzerine gelindiğinde yalpalama etkisi var.

Gelişmiş Resim Döngüsü

Gelişmiş Görüntü Karusel Modülü ile, her biri statik ve karusel elemanları üzerinde tam tasarım kontrolüne sahip iki düzen seçeneğiyle büyüleyici karuseller tasarlayabilirsiniz. Boyutlandırma, gezinme okları, sayfalandırma, kaplamalar ve arka planlar, tipografi, düğmeler, slayt yönü, otomatik oynatma ve döngü ve daha fazlası üzerinde hassas kontrole sahip olursunuz.

İşte Demo Düzeni 15; en sol kenarda slaytla gezinme, sol tarafta metin ve bir düğme ve sağda tam yükseklikte bir resim bulunur. Atlıkarınca, metin ve resim üzerinde hoş bir slayt efekti kullanır.

İleri Düzey Kişi

Daha sonra, Gelişmiş Kişi Modülü, ekip üyelerini veya müşteri referanslarını sergilemek için mükemmeldir. Bir başlık, atama, açıklama, düğme, resim, fareyle üzerine gelindiğinde gösterilecek alternatif bir resim, rozet, yıldız derecelendirmesi ve sosyal simgeler ekleyebilirsiniz.

Bu, fareyle üzerine gelindiğinde alternatif bir resim görüntüleyen yuvarlak profil resmine sahip Gelişmiş Kişi Demosu 5'tir.

Gelişmiş Fiyat Listesi

Gelişmiş Fiyat Listesi Modülü ayarlarında, görüntülemek istediğiniz bileşenlerin her biri için ayrı ayrı öğeler ekleyebilirsiniz. Bir simge, görsel, başlık, fiyat değeri, açıklama, simge ve metin, görsel ve metin, sıralı liste, sırasız liste veya düğme arasından seçim yapabilirsiniz. Ayrıca fiyat listesine rozetler ekleyebilir ve bileşenlerin her birini çok sayıda tasarım seçeneğiyle özelleştirebilirsiniz.

Gelişmiş Fiyat Listesi Demo 10, fiyat bileşeni için degrade bir arka plan, ürünleri sergilemek için resim ve metin düzenleri ve üstte bir rozet içerir.

Gelişmiş sekme

Şimdi Gelişmiş Sekme Modülüne bir göz atalım. Fareyle üzerine gelindiğinde veya tıklatıldığında sekmeleri göstermeyi, sekme gösterme animasyonları eklemeyi, düzeni ve aralığı özelleştirmeyi ve her öğenin tasarımını özelleştirmeyi seçebilirsiniz.

Bu, tıklamayla bir geçiş animasyonuyla ortaya çıkan mor sekmelere sahip Demo Düzeni 8'dir.

Önce Sonra Resim

Öncesi ve sonrası görseli, potansiyel müşterilere sunabileceğiniz sonuçları göstermenin ilgi çekici bir yolu olabilir. Bu modül ile önceki ve sonraki görüntüler arasında geçiş yapmak için kaydırıcıyı sürükleyebilirsiniz. Kaydırıcı kontrollerini özelleştirebilir, kaydırıcıya etiket ekleyebilir ve tasarımı özelleştirebilirsiniz.

İşte Önce Sonra Görüntü Düzeni 1.

Blog Döngüsü

Bu modül ile blog yazılarınıza atlıkarınca görünümü ekleyebilirsiniz. İki düzen türü ve dört slayt stili arasından seçim yapabilirsiniz. Bir ayırıcı ekleyebilir, öğe sırasını değiştirebilir ve gösterilen öğeleri ve her bileşenin tasarımını kontrol edebilirsiniz.

Bu, slayt atlıkarınca tipine sahip Blog Atlıkarınca Demo 3'tür. Solda bir resim, ortada yazıyla ilgili bilgiler, ardından blog başlığı ve alıntı yer alıyor. En sağda gezinme noktaları var.

Çalışma Saati

Çalışma Saati Modülü, çalışma saatlerinizi basit bir ekranda web sitenize eklemenizi kolaylaştırır. Saatlerinize başlangıç ​​saati ve bitiş saati ekleyebilir, bölücü stilini özelleştirebilir, modüldeki her satırı ayrı ayrı stillendirebilir ve çeşitli tasarım seçenekleriyle tüm modülü stillendirebilirsiniz.

İşte, renkli arka planlar ve noktalı ayırıcı çizgiyle tasarlanmış iki İş Saati Modülü içeren İş Saati Düzeni 7.

İçerik Tablosu

Daha sonra içerik ızgarası, metin, resim ve düğme içeren kartları görüntülemek için bir ızgara düzeni oluşturabileceğiniz çok yönlü bir modüldür. Her bir ızgara öğesi ayrı ayrı şekillendirilebilir ve Izgara Modülü, ızgaranın düzenini ve tasarımını kontrol etmek için birçok seçenekle birlikte gelir.

Bu, bir e-ticaret mağazası için gezinme bölümü olarak tasarlanmış İçerik Izgarası Düzeni 20'dir.

Kayan Resim

Yüzen Görüntü Modülü ile birden fazla görüntüden oluşan bir kompozisyon oluşturabilir ve bölüme hareket katan, kullanıcının dikkatini çeken kayan bir animasyon efekti ekleyebilirsiniz.

Bu, Yüzen Görüntü Örneği 4'tür. Bu örnekte, sandalyedeki kişi, masa, bitki ve arka plandaki beyaz dairenin hepsi ayrı ayrı görüntülerdir ve modül ayarlarıyla canlandırılmıştır.

Yemek menusu

Sonraki, kolay menü düzenleri oluşturmaya yönelik işlevsellik sağlayan başka bir kullanışlı modüldür. Her menü öğesi için bir başlık ve alt başlık ekleyebilir, başlık seviyelerini ayarlayabilir, para birimi göstergesini ve fiyatı ekleyebilir ve bir düğme ve/veya rozet ekleyebilirsiniz.

İşte öğe başlığı, alt başlık, fiyat ve satın alma düğmesinin yer aldığı iki sütunlu bir menüye sahip Yemek Menüsü Düzeni 6.

Degrade Metin

Degrade Metin Modülü ile ilginç, göz alıcı başlık düzenleri oluşturabilirsiniz. Ön ek, iç ek ve son ek metni ekleyebilir ve her birini degrade başlık, arka plan klibi, anahat stilleri, animasyon ayarları, vurgulu efektler ve daha fazlasını içeren çeşitli tasarım seçenekleriyle özelleştirebilirsiniz.

İşte Degrade Metin Modülü Örneği 2. Degrade arka planlara sahip bir önek ve iç ek ile hareketli bir arka plan klibine sahip son ek metnini içerir.

Bal peteği

Petek Modülü, içeriği benzersiz bir düzende görüntülemenize olanak tanıyan başka bir modüldür. Bu durumda, petek deseninde düzenlenmiş petek şeklindeki kartlara metin, resim ve simgeler ekleyebilirsiniz.

Bu, fareyle üzerine gelindiğinde bir görüntü görüntüleyen Petek Örneği 9'dur.

Görüntü Akordeon

Bu Görüntü Akordeon Modülüdür. Tıklandığında veya üzerine gelindiğinde seçilen resim genişleyerek içeriği ortaya çıkaracaktır. Görüntüyü basitçe görüntüleyebilir veya sergilemek için metin, simgeler, resimler veya düğmeler gibi içerikler ekleyebilirsiniz.

Bu, Görüntü Akordeon Demo Düzeni 5'tir. Bu, fareyle üzerine gelindiğinde görüntüyü hareketli bir kenarlıkla ortaya çıkaran basit bir düzendir.

Resim Başlığı

Sırada Resim Yazısı Modülü var. Bununla birden fazla resim görüntüleyebilir ve fareyle üzerine gelindiğinde bir başlık görüntüleyebilirsiniz. Stili, düzeni, yazı tiplerini, resimleri ve daha fazlasını özelleştirmek için birçok tasarım seçeneği vardır.

İşte Resim Başlığı Demo Düzeni 8. Fareyle üzerine gelindiğinde resim yazısı görünür ve diğer resimlerde gri bir kaplama bulunur.

Resim Atlıkarıncası

DiviGrid'in Görüntü Atlıkarınca Modülü, görsellerinizi, sayfalarınızı, ürünlerinizi, hizmetlerinizi ve daha fazlasını sergilemek için kullanabileceğiniz birçok ilgi çekici seçenekle birlikte gelir. Resimlere metin ve düğmeler ekleyebilir, birden fazla slayt ve gezinme stili arasından seçim yapabilir, fareyle üzerine gelme efektleri ekleyebilir ve daha fazlasını yapabilirsiniz.

Bu, soldaki madde işareti stili sayfalandırmayı içeren Görüntü Atlıkarınca Düzeni 1'dir. Fareyle üzerine gelindiğinde başlık ve fiyat bir katmanla gösterilir.

Görüntü Etkin Noktası

Görüntü Sıcak Noktası Modülüyle, bir görüntüye sıcak noktalar ekleyebilir ve tıklama ve/veya fareyle üzerine gelindiğinde araç ipucunda görüntülenen içeriği ekleyebilirsiniz. Bir simge, metin veya görüntü sıcak noktası arasından seçim yapabilir, sıcak nokta animasyon ayarları ekleyebilir, araç ipucunda metin veya kitaplık düzeni gösterebilir ve her bir araç ipucunun tasarımını ayrı ayrı tamamen özelleştirebilirsiniz.

İşte simgelerle birlikte turuncu araç ipuçlarını içeren Image Hotspot Demo Düzeni 3. Tıklandığında ürünle ilgili bilgileri ortaya çıkaran araç ipuçları açılır.

Satır İçi Açılır Pencere

Bu modülle, fareyle üzerine gelindiğinde satır içi açılır pencereyi ortaya çıkaran öğelerden oluşan bir ızgara düzeni oluşturabilirsiniz. Izgara öğesine bir resim, başlık, alt başlık, metin ve kaplama metni ekleyebilirsiniz. Açılır pencerede bir resim, başlık, alt başlık, metin içeriği, düğme ve sosyal medya simgeleri gösterebilirsiniz. Bu öğelerin tümü tasarım ayarlarıyla tamamen şekillendirilebilir.

Bu, altıgen görüntü sarmalayıcı ve görüntü yakınlaştırma vurgulu stilinin uygulandığı Satır İçi Açılır Pencere Düzeni 25'tir. Tıklandığında, bir resim, içerik, sosyal simgeler ve bir düğmeyle birlikte satır içi açılır pencere aşağıda görünür.

İnteraktif Kart

Etkileşimli kart, bilgileri ilgi çekici bir şekilde görüntülemenize olanak tanıyan, zengin özelliklere sahip başka bir modüldür. Etkileşimli bir kart oluşturmak için tıklatıldığında veya üzerine gelindiğinde görünen veya kapak içeriğinin yanında görünen içeriği ekleyebilirsiniz. Ön tarafa başlık, alt başlık, metin içeriği ve düğme ekleyebilirsiniz. Arka tarafta bu öğeleri sosyal medya simgeleriyle birlikte de görüntüleyebilirsiniz.

Burada, fareyle üzerine gelindiğinde bir kenarlık animasyonu görüntüleyen ve tıklandığında metin ve düğme içeren arka tarafı ortaya çıkaran Etkileşimli Kart Örneği 11 yer almaktadır.

Gerekçeli Galeri

Yaslanmış Galeri Modülü, görselleri sitenizde görüntülemenin harika bir yoludur. Resimler için kaplama ve fareyle üzerine gelme efektleri ekleyebilir ve bir ışık kutusunun tıklandığında açılmasını sağlayabilirsiniz.

Bu, Yaslanmış Galeri Demo Düzeni 9'dur. Fareyle üzerine gelindiğinde görüntü belirli bir açıyla yakınlaştırılır ve bir kenarlık görünür. Tıkladığınızda görüntüyü bir ışık kutusunda görüntüleyebilirsiniz.

Izgarayı Listele

Daha sonra Liste Izgarası Modülü, hizmetlerin, özelliklerin, bir süreçteki adımların ve daha fazlasının bir listesini oluşturmak için kullanışlıdır. Her liste öğesine bir başlık, açıklama, rozet ve resim veya simge ekleyebilirsiniz. Liste öğelerinizi görsel olarak birbirine bağlayabilecek bir bağlayıcı çizgiyi de etkinleştirebilirsiniz.

Bu, üstte bir simge ve sağda numarayı içeren bir rozet bulunan Liste Izgara Düzeni 32'dir.

Duvar Galerisi

Masonry Gallery, resimlerinizi galeri düzeninde görüntülemek için başka bir seçenektir. Görüntüleri bir ışık kutusunda açabilir, sayfalandırma ekleyebilir, kaplama ve fareyle üzerine gelme efektleri uygulayabilir ve daha fazlasını yapabilirsiniz. Her öğe tasarım ayarlarıyla tamamen özelleştirilebilir.

İşte Masonry Gallery Layout 2. Renkli bir kaplamaya ve fareyle üzerine gelindiğinde beyaz kenarlıklara sahiptir.

Çoklu Düğme

Çoklu Buton Modülü ile modül içerisine yan yana görüntülenen birden fazla buton ekleyebilirsiniz. Düğmeleri bir satırda veya bir sütunda görüntülemeyi seçebilir ve hizalamayı özelleştirebilirsiniz. Her düğme ayrı ayrı şekillendirilebilir ve modül, eklenebilecek birçok ilginç vurgulu efekt içerir.

Bu, Çoklu Düğme Modülü Örnek Düzeni 10'dur. Fareyle üzerine gelindiğinde, ilk düğmenin üzerine gelindiğinde noktalar görünür. İkinci düğmede alt kısımdaki şeritler fareyle üzerine gelindiğinde hareket eder.

Direk Izgarası

Bu modül, blog gönderilerinin özelleştirilebilir bir ızgarada görüntülenmesini kolaylaştırır. Izgarada görünen gönderi türleri ve her gönderide görünen öğeler üzerinde tam kontrole sahipsiniz. Izgaranın düzenini, gönderi görselinin görünme biçimini ve tabii ki ızgarada gördüğünüz her öğenin tasarımını özelleştirmek için birçok seçenek vardır.

Bu, Post Grid Modülü Örneği 14'tür. Öne çıkan görseli, koyu renkli bir katmanla gönderi öğesinin arka planı olarak öne çıkarır. Her gönderi için kategoriyi, yazarı, tarihi, başlığı ve daha fazlasını oku bağlantısını görebilirsiniz.

Çoklu Görüntüyü Kaydır

Daha sonra, Çoklu Görüntü Kaydırma Modülü ile, sayfanızda otomatik olarak kayan bir atlıkarıncaya görseller ekleyebilirsiniz. Yatay veya dikey bir düzen ayarlayabilir ve kaydırma süresini ve aralığını özelleştirebilirsiniz. Her öğenin bir resmi, başlığı ve açıklaması olabilir.

Bu, içeceklerin başlığı ve fiyatıyla birlikte yatay kaydırma düzeninde yer aldığı Kaydırmalı Çoklu Görüntü Demo Düzeni 7'dir.

Tek Görüntü Kaydırma

Tek Görüntü Kaydırma Modülü, panoramik görüntüler gibi büyük görüntüleri ayrıntılı olarak sergilemenin harika bir yoludur. Fareyle üzerine gelindiğinde görüntüyü yukarıdan aşağıya, aşağıdan yukarıya, soldan sağa veya sağdan sola kaydıracak şekilde ayarlayabilirsiniz. Ayrıca görselin yanında görüntülenecek bir rozet, başlık ve açıklama da ekleyebilirsiniz.

Bu, fareyle üzerine gelindiğinde kaybolan bir katmanla soldan sağa ve sağdan sola kaydırma seçeneklerini gösteren Tek Görüntü Kaydırma Modülü Örnek 4'tür.

sosyal paylaşım

Sosyal Paylaşım Modülü ile kullanıcıları sayfanızı paylaşmaya veya sosyal medyada paylaşım yapmaya teşvik edebilirsiniz. Modül, bu simgelerin stilini özelleştirmek için iki farklı düzen, çeşitli içerik ve tasarım ayarları ve ilginç vurgulu efektler dahil olmak üzere birçok tasarım seçeneğiyle birlikte gelir.

İşte Sosyal Paylaşım Demo Düzeni 1.

Yıldız Derecelendirmesi

Ürünleriniz veya hizmetleriniz için müşteri derecelendirmelerini sergilemek, referansları görüntülemek ve daha fazlasını yapmak için Yıldız Derecelendirmesi Modülünü kullanabilirsiniz. Bu modülle, kapsamlı düzenler oluşturmak için yıldız derecelendirmesinin yanı sıra bir başlık, resim, rozet, alt başlık ve açıklama da görüntüleyebilirsiniz.

Yıldız Derecelendirmesi Örnek Düzeni 3, menü öğelerinin yanında yıldız derecelendirmelerini görüntüler.

Eğimli Görüntü Kartı

Eğimli Görüntü Kartı Modülü ile görüntü, içerik ve düğme içeren kart tasarımları oluşturabilir ve fareyle üzerine gelindiğinde eğim efektini etkinleştirerek tasarımınıza etkileşim katabilirsiniz. İçeriği fareyle üzerine gelindiğinde gösterme seçeneğini de etkinleştirebilirsiniz.

Bu, içerik alanına degrade arka planın uygulandığı Eğimli Görüntü Kartı Demo Düzeni 8'dir.

DiviGrid'i Nereden Satın Alabilirim?

DiviGrid, Divi Pazaryeri'nde mevcuttur. Sınırsız web sitesi kullanımı ve 1 yıllık destek ve güncelleme ücreti 59 ABD dolarıdır. Fiyata ayrıca 30 günlük para iade garantisi de dahildir.

Son düşünceler

Genişletilmiş özelliklere ve tasarım ayarlarına sahip yeni modüller ekleyen bir Divi eklentisi arıyorsanız DiviGrid harika bir seçenektir. DiviGrid'in modülleriyle, özel koda ihtiyaç duymadan karmaşık düzenleri kolayca oluşturabilirsiniz. Modüllerin tümü kapsamlı tasarım seçenekleri sunar ve birçoğu ilginç vurgulu ve animasyon efektleri içerir. Eklentinin içerdiği örnek düzenler de modüllerden yararlanır ve kendi tasarımlarınız için harika bir başlangıç ​​noktası olabilir.

Sizden haber almayı çok isteriz! DiviGrid'i denediniz mi? Yorumlarda bunun hakkında ne düşündüğünüzü bize bildirin!