Divi Eklentisi Vurgusu – Divi Portföy Izgarası

Divi, portföyünüzü tam genişlikte veya ızgara düzeninde görüntüleyen ve bir Divi modülünden bekleyeceğiniz tüm temel işlevleri içeren bir portföy modülü içerir - arka planlar, yazı tipleri, renkler, kenarlıklar, kaplamalar, simgeler vb. çok sütunlu tasarım gibi farklı bir düzen mi yoksa özelleştirilebilir bir düğme gibi yeni özellikler mi? Divi Portfolio Grid adlı bir üçüncü taraf eklentisi ilginizi çekebilir.

Divi Portfolio Grid, Divi Theme Store'dan üçüncü taraf bir eklentidir. Size yalnızca standart Divi modülü özelliklerini vermekle kalmaz, aynı zamanda benzersiz portföyler oluşturabilmeniz için yeni stil özellikleriyle 2, 3 ve 4 sütun düzeni sağlar. Ayrıca renkleri değiştirmek için metin ve fareyle üzerine gelme efektleri içeren bir düğme ekler.

Bu genel bakışta, oluşturduğum örnek bir portföyü kullanarak Divi Portfolio Grid'e bir göz atacağız. Portfolyolarda ve arka planlarda kullanılan tüm görseller Unsplash.com'dan alınmıştır.

Divi Portföy Izgarası Eklentisini Yükleme

Eklentiyi yüklemeden önce indirme dosyasını açmanız gerekir. Sıkıştırılmış dosyanın içinde sıkıştırılmış eklenti dosyasını ve hızlı bir PDF kılavuzu bulacaksınız. Hızlı kılavuz, kurulumda size yol gösterecek bir belge ve modülün nasıl kullanılacağına ilişkin bir genel bakıştır. İndirilen dosyanın içindeki sıkıştırılmış eklenti dosyasını yükleyin, kurun ve normal şekilde etkinleştirin.

Özel Portföy Modülü Özellikleri

Eklenti, Divi Builder'a Özel Portföy Modülü adı verilen yeni bir modül ekler. Modül, arka uçtaki diğer Divi Builder modülleri gibi çalışır; böylece onu herhangi bir satıra sürükleyip bırakabilir ve içeriği, tasarımı ve gelişmiş ayarları düzenleyebilirsiniz.

Arka plan rengini özelleştirin, bir arka plan resmi seçin, bir düzen seçin, özel düğme metni oluşturun, görüntülenecek gönderi sayısını seçin, kategoriyi seçin, meta göster, renkleri seçin, vb.

Tüm standart tasarım özellikleri de burada. Renkleri, yazı tiplerini, düğmeleri, simgeleri, kaplamaları ve daha fazlasını ayarlayın.

Örnekler – Divi Özel Portföy Modülünü Kullanma

Örneklerim için bir sayfa oluşturdum, biraz görsel parıltı vermek için bir arka plan ekledim, satırı tam genişlikte yaptım ve Portföy Izgara Modülünü ekledim. Buna bakmadan önce, karşılaştırma için standart Divi Building portföy modülüne hızlıca bir göz atalım.

Standart Divi Portföy Modülü

Standart Divi portföy modülünü kullanan sayfaya bir göz atın. Izgara düzenine ayarladım ve yazı tipi rengini ışığa ayarladım. Diğer tüm özellikler varsayılan olarak ayarlanmıştır. Ayrıca simgeler (kılavuz modunda), kenarlıklar, arka plan, meta ve yazı tipi stili içeren vurgulu kaplamalar içerir.

Projenin öne çıkan görseli, görselin altında proje başlığı ve kategorisi ile birlikte görüntülenir. Başlığa tıklamak sizi projeye götürür. Kategori başlığına tıklamak, o kategori için bir kategori sayfası açar. Ayrıca ızgara düzenini kullanırken kaplama rengi ve simge seçenekleriyle vurgulu efektleri içerir.

Özel Portföy Modülü Örnekleri

Portföylerinizi 2, 3 veya 4 sütun halinde ayarlayabilmeniz için aralarından seçim yapabileceğiniz üç düzen içerir. Çeşitli özelleştirmeler ve özelliklerle düzenlerin her birine bakalım.

İşte 2 sütun düzenine bir bakış. Projenin öne çıkan resmini görüntüler, resmin altındaki bir çubukta tıklanabilir başlığı ve kategoriyi içerir ve resmin ve çubuğun üzerine metin içeren bir düğme yerleştirir. Bu, varsayılan özellikler ve renklerdir.

Görüntü, standart portföy modülüyle aynı vurgulu efektleri içerir, ancak düğme aynı zamanda vurgulu efektleri de içerir. Bu örnekte, varsayılan düğme ayarlarının mor arka planı kırmızıya çevirdiğini görebilirsiniz.

Ayrıca, üzerine geldiğiniz kartın arkasında bir gölge oluşturan hoş bir vurgulu efekti de görebilirsiniz. Başlık bir araç ipucu olarak görüntülenir. Vurgulu yer paylaşımı da varsayılan bir özelliktir, bu nedenle etkinleştirilmesi gerekmez. Fareyle üzerine gelme efektinin geçişi, geçiş tamamlanana kadar daha ağır bir gölge görüntüler.

İşte 3 sütun düzenine bir bakış. Bu örnekte, düğme arka planının ve metninin rengini değiştirdim ve metni kendi mesajımı gösterecek şekilde değiştirdim.

Düğme ayrıca gölge vurgusu efektini de içerir. Bu örnekte, yalnızca düğmenin üzerine geliyorum, bu nedenle görüntü, üzerine gelme efektini göstermiyor. Düğme arka planı ve metninin rengi değişti.

Bu örnek, 4 sütun düzenini kullanır. Düğme yarıçapını 0'a ayarladım ve tüm yazı tipi stillerini değiştirdim.

Fareyle üzerine gelme efekti, %47 opaklığa sahip mavi bir kaplama yerleştirir (tek sayı için üzgünüm ama farem burada durdu, ben de onunla gittim) ve kırmızı bir onay kutusu simgesi. Düğme, açık sekme metni içeren koyu griden koyu gri metin içeren kirli beyaza dönüşür.

Bu örnekte, başlığın ve metanın arkasını gösteren bir arka plan ekledim. 2 piksel genişliğinde kırmızı bir kenarlık ekledim (böylece resimde görülmesi kolay). Tüm yazı tiplerini ve renkleri ayarladım ve düğme arka plan rengini, üzerine gelme rengini ve simge rengini değiştirdim. Öne çıkan görüntü alanı ile başlık ve meta bölümün arkasındaki arka plan görüntüsü arasındaki kontrastı göstermek için varsayılan vurgulu kaplama rengini bıraktım.

Düğme yalnızca başlığı gösteriyorsanız görüntülenir. Bu örnek yalnızca kategoriyi görüntüler.

Bu örnek yalnızca proje başlığını görüntüler. Başlık görüntülendiğinden, düğme de görüntülenir.

Bu örnekte opaklığı 66 olan kırmızı bir kaplama yerleştirdim. Vurgulu simgesini değiştirdim ve düğmeyi ve vurgulu efektlerini özelleştirdim. Başlığın arkasına bir arka plan resmi (gri bir gökyüzü) yerleştirilir. Bu, farklı proje kategorileri kullanır. Düğme yarıçapı 10 olarak ayarlanmıştır.

Divi Portföy Izgarası – Duyarlı

Eklenti duyarlı. İşte dikey modda bir iPad'deki (Chrome'un Geliştirici Araçları'nda öykünülmüş) 3 sütun düzeni. Google Chrome Geliştirici araçları hakkında daha fazla bilgi edinmek için Chrome Geliştirici Araçlarını Neden Hemen Şimdi Kullanmaya Başlamalısınız makalesine bakın.

Bu, yatay modda aynı düzendir.

Bu, portre modundaki bir Galaxy S5'teki aynı düzendir.

Ve işte Galaxy S5 kullanan düzen, manzara modudur.

Lisans, Güncellemeler ve Belgeler

Lisans, sınırsız kullanımı kapsar ve ömür boyu güncellemeler içerir. Belgeler, sıkıştırılmış klasörde gelen PDF dosyasında sağlanır. Bu kısa bir belgedir ve başlamanıza yardımcı olacak görseller içeren bir kılavuz sağlar. Kullanımı kolay bir eklenti ve her şeyi sezgisel buldum. Divi modüllerini kullanmaya alışkınsanız, bu modül ile kendinizi evinizde hissedeceksiniz.

Divi Portfolio Grid, Divi Tema Mağazasından satın alınabilir.

Son düşünceler

Divi Portfolio Grid'in kullanımı kolaydır ve standart Divi portföy modülü üzerinde birçok kullanıcının gerekli bulacağı yeterli sayıda ekstra özellik sağlar. 2, 3 ve 4 sütun düzeni içerir, üzerine gelme efektli bir düğme ekler, simgelerle bindirmeler ve kendi kodunuzla özelleştirebilmeniz için gelişmiş CSS özellikleri de dahil olmak üzere beklediğiniz tüm modül stilleri. Standart Divi portföy modülünün ötesinde özelliklere sahip bir portföy istiyorsanız, ihtiyacınız olan modül Divi Portfolio Grid olabilir.

Sizden haber almak isteriz! Divi Portfolio Grid'i denediniz mi? Aşağıdaki yorumlarda deneyiminizi bize bildirin.

2RAL / Shutterstock.com üzerinden Öne Çıkan Görsel