Ana İçeriğe Geç

Divi öğretici: Filtre ile cüzdan modülünü nasıl kullanılır

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Divi temasının Tam Genişlik Portföy modülü, projenizi mükemmel bir Tam Genişlik modunda görüntülemesi dışında, normal Portföy modülü gibi çalışır. Ayrıca birkaç yeni benzersiz konfigürasyonla birlikte gelir: Izgara ve Atlıkarınca. Modül, en son projelerinizin bir listesini görüntüleyerek çalışır ve en son çalışmalarının bir galerisini görüntülemek isteyen tasarımcılar ve sanatçılar tarafından kullanılabilir.

Tam genişlikli porfolio modülü divi.png

Sayfanıza bir Portföy Fullwidth modülü nasıl eklenir

Sayfanıza tam bir portföy modülü eklemeden önce Divi Builder'a geçmelisiniz. Divi teması web sitenize yüklendikten sonra bir düğme göreceksiniz. Divi Builder'ı Kullan yeni bir sayfa oluşturduğunuzda yayın düzenleyicisinin üzerinde. Divi Builder'ı etkinleştirmek ve tüm Divi Builder modüllerine erişmek için bu düğmeye tıklayın. Ardından düğmeye tıklayın Visual Builder'ı kullan Jeneratörü görsel modda başlatmak için. Düğmeye de tıklayabilirsiniz Visual Builder'ı kullan WordPress panonuza bağlıysanız, web sitenizi ön planda tuttuğunuzda.

divi oluşturucu

Visual Builder'a girdikten sonra, sayfanıza yeni bir modül eklemek için gri artı düğmesini tıklayabilirsiniz. Yeni modüller yalnızca satırların içine eklenebilir. Yeni bir sayfaya başlıyorsanız, önce sayfanıza bir satır eklemeyi unutmayın. Divi'nin çizgi ve kesit öğelerini kullanma konusunda harika eğitimlerimiz var.

filterable port.png

Modüller listesinde filtrelenebilir cüzdan modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani "filtrelenebilir portföy" kelimesini yazabilir ve ardından filtrelenebilir portföy modülünü otomatik olarak bulup eklemek için "Enter" tuşuna tıklayabilirsiniz. Modül eklendiğinde, modül seçenekleri listesi tarafından karşılanacaksınız. Bu seçenekler üç ana gruba ayrılmıştır: içindekiler , Gebe kalma et gelişmiş.

Örnek kullanım örneği: Bir portföy sayfasına filtrelenebilir bir portföy modülü ekleme

Bu örnekte, sayfanın genişliğini kapsayan bir portföy sayfasında bir portföyü nasıl sunacağınızı size göstereceğim.

bütün bir sayfada portföyü divi.jpg

Başlayalım.

Sayfa başlığının altına bir Tam Genişlik bölümü eklemek için görsel oluşturucuyu kullanın. Ardından filtrelenebilir bir portföy modülü ekleyin.

bir portföy portföyü eklemek divi.jpg

Filtrelenebilir portföy ayarlarını aşağıdaki gibi güncelleyin:

İçerik seçenekleri

Mesaj Sayısı: 8 Ekran Sayfalama: YOK

Tasarım seçenekleri

Düzen: Izgara Yakınlaştırma Simgesi Renk: # 000000 Hover Kaplama Renk: #ffffff Başlık Yazı Tipi: Varsayılan, Kalın, Büyük Harf Başlık Yazı Tipi Boyutu: 14px Başlık Harf Aralığı: 1px Meta Yazı Tipi Boyutu: 12px Meta Aralığı harfler: 1px

filtrelenebilir portföy modülü divi.png

Bu kadar!

Portföy modülü içeriği seçeneği

İçerik sekmesinde, modülün metin, resimler ve simgeler gibi tüm içerik öğelerini bulacaksınız. Tüm kontroller ce qui modülünüzde beliren her zaman bu sekmede bulunur.

filtrelenebilir portföy modülü divi içeriği section.png

Portföy başlığı

Portföyün üstünde görüntülenen bir başlık girin veya bir başlık kullanmamak için boş bırakın.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Kategorileri Dahil Et

Görüntülemek istediğiniz kategorileri seçin. Seçilmeyen kategorilerdeki projeler proje listesinde görünmeyecektir.

yayınların sayısı

Görüntülenen proje sayısını kontrol edin Miktarı sınırlamamak için boş bırakın veya 0 kullanın.

Başlığı göster

Fareyi proje öğesinin üzerine getirdiğinizde her projenin başlığının görüntülenip görüntülenmeyeceğini seçin.

Tarihi göster

Proje öğesinin üzerine geldiğinizde her proje için yayın tarihinin görüntülenip görüntülenmeyeceğini seçin.

Arka plan rengi

Modülünüz için özel bir arka plan rengi tanımlayın veya varsayılan rengi kullanmak için boş bırakın.

Arka plan resmi

Ayarlanırsa, bu görüntü bu modül için arka plan olarak kullanılacaktır. Bir arka plan resmini kaldırmak için, URL'yi ayarlar alanından kaldırmanız yeterlidir. Arka plan resimleri, arka plan renklerinin üstünde görünecektir; bu, bir arka plan görüntüsü uygulandığında arka plan renginin görünmeyeceği anlamına gelir.

Yönetici Etiketi

Bu, kolay tanımlama için yapıcıdaki modül etiketini değiştirecektir. WireFrame görünümünü Visual Builder'da kullandığınızda, bu etiketler Divi Builder arayüzünün modül bloğunda görünür.

Tam genişlikte cüzdan tasarım seçenekleri

Tasarım sekmesinde yazı tipleri, renkler, boyutlandırma ve aralık gibi tüm modül stil seçeneklerini bulacaksınız. Bu, modülünüzün görünümünü değiştirmek için kullanacağınız sekmedir. Her Divi modülünde, herhangi bir şeyi değiştirmek için kullanabileceğiniz uzun bir tasarım ayarları listesi vardır.

tasarım modülü divi.png

hüküm

Kullanmak istediğiniz düzeni seçin. "Izgara", tüm öğelerinizi çok sütunlu, çok satırlı bir düzende görüntüler. Döngü, listedeki ek öğeleri ortaya çıkarmak için kayan tek bir döşemeli görüntü satırında öğelerinizi görüntüler.

Yakınlaştırma Renk Simgesi

Portföy modülünde bir öğenin üzerine geldiğinizde, bir kaplama simgesi görünür. Bu ayardaki renk seçiciyi kullanarak bu simgeden kullanılan rengi ayarlayabilirsiniz.

Vurgulu Renk Yerleşimi

Portföy modülünde bir öğenin üzerine geldiğinizde, görüntünün üstünde ve portföy başlık metni ve simgesinin altında bir kaplama rengi belirir. Varsayılan olarak yarı saydam bir beyaz renk kullanılır. Farklı bir renk kullanmak istiyorsanız, bu ayardaki renk seçiciyi kullanarak rengi ayarlayabilirsiniz.

Hover Simgesi Seçici

Burada, bir ziyaretçi modüldeki portföy öğelerinin üzerine geldiğinde görüntülenecek özel bir simge seçebilirsiniz.

Metin rengi

Burada, metninizin açık mı yoksa koyu mı olacağını seçebilirsiniz.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

seçenek tasarımı filtrelenebilir portföy modülü divi.png

Başlık yazı tipi

Açılır menüden istediğiniz yazı tipini seçerek başlık metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini de özelleştirebilirsiniz.

Başlık yazı tipi boyutu

Burada başlık metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına istediğiniz metin boyutu değerini doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Başlık metni rengi

Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri olarak görünür. Başlığınızın metin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Başlık harflerinin aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Başlık metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Başlık satırının yüksekliği

Satır yüksekliği, başlık metninizin her satırı arasındaki boşluğu etkiler. Her satır arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya imlecin sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

filtrelenebilir portföy divi modülü bölümü metadonnee.png

Meta Yazı Tipi

Açılır menüden istediğiniz yazı tipini seçerek meta metninizin yazı tipini değiştirebilirsiniz. Divi, Google Yazı Tipleri tarafından desteklenen düzinelerce harika yazı tipiyle birlikte gelir. Varsayılan olarak Divi, sayfanızdaki tüm metinler için Open Sans yazı tipini kullanır. Ayrıca kalın, italik, büyük harf ve altı çizili seçenekleri kullanarak metninizin stilini özelleştirebilirsiniz.

Metas yazı tipi boyutu

Burada meta metninizin boyutunu ayarlayabilirsiniz. Metninizin boyutunu artırmak veya azaltmak için aralık kaydırıcısını sürükleyebilir veya kaydırıcının sağındaki giriş alanına istediğiniz metin boyutu değerini doğrudan girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Meta metni rengi

Varsayılan olarak, Divi'deki tüm metin renkleri beyaz veya koyu gri olarak görünür. Metninizin rengini değiştirmek istiyorsanız, bu seçeneği kullanarak renk seçiciden istediğiniz rengi seçin.

Meta Harf Aralığı

Harf aralığı, her harf arasındaki boşluğu etkiler. Meta metninizin her harfi arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istediğiniz boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Meta Hattı Yüksekliği

Satır yüksekliği, meta metninizdeki her satır arasındaki boşluğu etkiler. Her satır arasındaki boşluğu artırmak istiyorsanız, boşluğu ayarlamak için aralık kaydırıcısını kullanın veya imlecin sağındaki giriş alanına istediğiniz boşluk boyutunu girin. . Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için boyut değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Sınırı kullan

Bu seçeneğin etkinleştirilmesi, modülünüzün etrafına bir sınır koyacaktır. Bu sınır, aşağıdaki koşullu parametreler kullanılarak özelleştirilebilir.

Sınırın rengi

Bu seçenek, kenarlığınızın rengini etkiler. Kenarlığınıza uygulamak için renk seçiciden özel bir renk seçin.

Sınırın genişliği

Varsayılan olarak kenarlıklar 1 piksel genişliğindedir. Aralık kaydırıcısını sürükleyerek veya kaydırıcının sağındaki giriş alanına özel bir değer girerek bu değeri artırabilirsiniz. Özel ölçü birimleri desteklenir; bu, varsayılan birimi "px" yerine em, vh, vw vb. gibi başka bir şeye değiştirebileceğiniz anlamına gelir.

Sınır Stili

Kenarlıklar sekiz farklı stili destekler: düz, noktalı, noktalı, çift, oluk, sırt, kaplama ve başlangıç. Kenarlığınıza uygulamak için açılır menüden istediğiniz stili seçin.

Gelişmiş Portföy Seçenekleri Tam Genişliği

Gelişmiş sekmesinde, özel CSS ve HTML özellikleri gibi daha deneyimli web tasarımcılarının yararlı bulabileceği seçenekler bulacaksınız. Burada, modülün birçok öğesinden herhangi birine özel CSS uygulayabilirsiniz. Ayrıca, alt temanızın style.css dosyasında modülü özelleştirmek için kullanılabilen modüle özel CSS sınıfları ve kimlikleri de uygulayabilirsiniz.

divi filterable portföy modülü forward.png bölümü

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

CSS Kimliği

Bu modül için kullanmak üzere isteğe bağlı bir CSS Kimliği girin. Kimlik, özel bir CSS stili oluşturmak veya sayfanızın belirli bölümlerine bağlanmak için kullanılabilir.

CSS sınıfı

Bu modül için kullanmak üzere isteğe bağlı CSS sınıflarını girin. Özel CSS stili oluşturmak için bir CSS sınıfı kullanılabilir. Bir boşlukla ayırarak birden çok sınıf ekleyebilirsiniz. Bu sınıflar, Divi alt temanızda veya Divi tema seçeneklerini veya Divi Builder sayfa ayarlarını kullanarak sayfanıza veya web sitenize eklediğiniz özel CSS stil sayfasında kullanılabilir.

Özel CSS

Özel CSS, modüle ve modülün herhangi bir dahili bileşenine de uygulanabilir. Özel CSS bölümünde, her öğeye doğrudan özel CSS stil sayfaları ekleyebileceğiniz bir metin alanı bulacaksınız. Bu ayarlardaki CSS girişleri zaten stil etiketlerine sarılmıştır. Bu yüzden CSS kurallarını noktalı virgülle ayırarak girin.

Otomatik atlıkarınca

Atlı karınca düzeni seçeneği seçilmişse ve döngünün ziyaretçinin sonraki düğmeyi tıklaması gerekmeden otomatik olarak kaymasını istiyorsanız, bu seçeneği etkinleştirin ve isterseniz aşağıdan döndürme hızını ayarlayın.

Otomatik carousel hız

Yukarıda “Otomatik karusel dönüşü” seçeneği etkinleştirilmişse, burada döner dönme hızını belirtebilirsiniz. Sayı ne kadar yüksek olursa, her dönüş arasındaki duraklama o kadar uzun olur. (Ör. 1000 = 1 saniye)

görünürlük

Bu seçenek, modülünüzün göründüğü cihazları kontrol etmenizi sağlar. Modülünüzü tabletlerde, akıllı telefonlarda veya masaüstlerinde ayrı ayrı devre dışı bırakmayı seçebilirsiniz. Bu, farklı cihazlarda farklı modlar kullanmak istiyorsanız veya sayfadan belirli öğeleri kaldırarak mobil tasarımı basitleştirmek istiyorsanız kullanışlıdır.

Diğer Divi öğreticiler

Bu makale yorumları 7 içeriyor

  1. Bonjour
    Ya filtrelenebilir bir cüzdanım ya da tam genişlikte bir cüzdanım var ama tam genişlik filtrelenemez.
    “Klasik” portföylerde olduğu gibi, filtrelenebilir portföy resimlerime ilgili projenin başlığını ekleyebilmek istiyorum. Nasıl yapılacağını biliyor musun ?

  2. Merhaba!

    Az önce Divi'ye gittim ve yeni reklamlarımın emlak acentesi sitelerinde olduğu gibi küçük küçük resimler / minyatürler halinde yan yana görüneceği bir “Reklamlar” sayfası oluşturma yolunda tökezledim. Bilgi için REKLAMLAR sayfamı ve REKLAMLAR… kategorisiyle ilişkilendirdiğim bazı makaleleri (bir reklam için bir makale) oluşturdum. ancak geniş formatta görünürler. Umarım problemimde kendimi iyi anlatabilmişimdir! Önerilerinizi beklerken, açıklamalarınız ve tavsiyeleriniz için şimdiden teşekkür ederim! İyi akşamlar !! Saygılarımla - Jerome

    1. Merhaba, blog modülünü kullanıyorsanız, bu modül için geçerli olan belirli CSS eklemeniz gerekecek. Ne yazık ki, bu kalıp çok fazla özelleştirme seçeneği sunmuyor.

  3. Bonjour

    Makalenizin tamamı için teşekkür ederiz.
    Ya tam genişlikte bir porftoliyo ya da filtrelenebilir bir portföy sergilemeyi başardım, ancak etrafta büyük marjlar var.
    Divi'nin tam genişlikte filtrelenebilir bir portföy görüntülemenize izin verip vermediğini biliyor musunuz?
    Veya önemli marjlar olmadan filtrelenebilir bir portföy görüntülemek için?

    sağol

  4. Merhaba, makalenizi çok beğendim ama bu tür bir düzeni yeniden üretmeye çalıştığımda resimlerim arasında büyük boşluklar oluyor. Örneğinizdeki gibi resimlerin birleştirilmesini tercih ederdim. Bunun için modül nasıl yapılandırılır?

    Mersi !

    1. Merhaba Valerie,

      Yalnızca ekranın iyileşip iyileşmediğini görmek için tüm eklentileri devre dışı bırakmayı denediniz mi?

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
15 hisseleri
hisse2
cıvıltı2
Enregistrer11