Divi'deki filtrelenebilir Portföy, en son projelerinizi Izgara veya Standart modda görüntülemenizi sağlar. Filtrelenebilir portföy, bir Ajax isteği kullanarak yeni projeleri yüklemesi ve proje listesini kategorilere göre filtreleme seçenekleri içermesi dışında normal portföy modülüne benzer. Belirli bir kategori seçildiğinde, seçilen kategoriden yeni bir proje listesi ile proje listesi anında yeniden oluşturulur.

tam genişlik portföyü divi.png

Sayfanıza filtrelenebilir portföy modülü nasıl eklenir

Sayfanıza filtrelenebilir bir portföy modülü ekleyebilmeniz için önce Divi Builder'a atlamanız gerekir. Bir kere Divi teması senin üzerine kurulu Site Web, 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 Görsel Oluşturucu'yu etkinleştir göz attığınızda Site Web WordPress kontrol panelinize giriş yaptıysanız ön planda.

divi oluşturucu kullanın

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.

tam ekran cüzdan divi.png

Modüller listesinde filtrelenebilir portföy modülünü bulun ve sayfanıza eklemek için üzerine tıklayın. Modül listesi aranabilir, yani "tam ekran portföy" kelimesini de 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, bir portföy sayfasına filtrelenebilir portföy modülünü nasıl ekleyeceğinizi göstereceğim.

bölünebilir portföy divi builder.jpg

Başlayalım.

Sayfa başlığının altına tam genişlikte (1 sütun) satır içeren normal bir bölüm eklemek için görsel oluşturucuyu kullanın. Ardından satıra filtrelenebilir bir portföy modülü ekleyin.

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

İçerik seçenekleri

Yazı sayısı: 8

Tasarım seçenekleri

Düzen: Kılavuz Yakınlaştırma Simgesi Renk: #ffffff Vurgulu Kaplama Rengi: rgba (224,153,0,0.58) 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 Yazı tipi filtresi: Varsayılan, Kalın, büyük harf Filtre Yazı tipi boyutu: 14px Filtre harfi aralığı: 1px Meta Yazı tipi boyutu: 12px Meta Harf aralığı: 1px

Gelişmiş seçenekler (özel CSS)

Aktif portföy filtresi: renk: # e09900; Portföy başlığı: metin hizalama: merkez; Portföy Mesajı Metası: metin hizalama: merkez; Sayfalandırma Etkin Sayfası: renk: # e09900! Önemli;

portföy modülü ile divi.png

İşte bu kadar!

Filtrelenebilir Portföy İçeriği Seçenekleri

İç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.

modül divi filtre portföyü full screen.png

yayınların sayısı

Liste sayfalandırılmadan önce görüntülemek istediğiniz yayınların nasıl görüntüleneceğini seçin.

Kategorileri Dahil Et

Görüntülemek istediğiniz kategorileri seçin. Seçilmeyen kategorilerdeki gönderiler, oluşturulan gönderiler listesinde görünmeyecektir.

Başlığı göster

İsterseniz, projeler listesinin üstüne yerleştirilecek bir başlık girin.

Kategorileri göster

Kategorinin meta veri alanındaki her makalenin altında görüntülenip görüntülenmeyeceğini seçin.

Sayfalandırmayı görüntüle

Bu seçenek sayfalamayı etkinleştirir / devre dışı bırakır. Sayfalandırma devre dışı bırakılırsa, her kategori için yalnızca bir proje sayfası görüntülenecektir.

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önetim 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.

Filterable Portföy 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.

portföy modülü fullwidth divi bölümü design.png

hüküm

Portföyünüz için düzen stilini seçin. "Tam Genişlik" satır başına bir mesaj görüntülerken "Izgara", projelerinizi her satırda birden çok proje olacak şekilde döşenmiş bir ızgarada görüntüler.

Metin rengi

Burada metninizin açık mı yoksa koyu mu olacağını seçebilirsiniz. Koyu bir arka plan üzerinde çalışıyorsanız, metniniz açık olmalıdır. Arka planınız açıksa, metniniz koyu olmalıdır.

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 doğrudan istenen metin boyutunun değerini girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden 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, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istenen boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

portföy modülü divi.png

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, aralığı ayarlamak için aralık kaydırıcısını kullanın veya giriş alanına istediğiniz boşluk boyutunu girin imlecin sağında bulunur. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Yazı tipi filtrele

Açılır menüden istediğiniz yazı tipini seçerek filtre 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.

Yazı tipi boyutunu filtrele

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

Metin rengini filtrele

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

Harf aralığını filtrele

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

Filtre hattının yüksekliği

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

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.

Meta 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 doğrudan istenen metin boyutunun değerini girebilirsiniz. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden 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. Metninizdeki her harf arasındaki boşluğu artırmak istiyorsanız, aralığı ayarlamak için aralık kaydırıcısını kullanın veya kaydırıcının sağındaki giriş alanına istenen boşluk boyutunu girin. Giriş alanları farklı ölçü birimlerini destekler; bu, birim türünü değiştirmek için beden değerinize bağlı olarak "px" veya "em" girebileceğiniz anlamına gelir.

Meta Hattı Yüksekliği

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

meta portföy modülü tam ekran divi.png

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" den em, vh, vw vb. Gibi başka bir şeye değiştirebileceğiniz anlamına gelir.

Sınır tarzı

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ş filtrelenebilir portföy seçenekleri

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.

bölüm avans modülü portföyü fullwidth.png

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 kullanılacak 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 fazla sınıf ekleyebilirsiniz. Bu sınıflar, Divi alt temanızda veya sayfanıza veya web sitenize eklediğiniz özel CSS stil sayfasında kullanılabilir. Site Web Divi tema seçeneklerini veya Divi Builder sayfa ayarlarını kullanarak.

Ö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.

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.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”genişletilmiş” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DIVI TEMASINI İNDİRİN [/vcex_button][/vc_column][vc_column width=” 1 /2"][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”genişletilmiş” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]YÜKLE ŞABLONLARI DIVI[/vcex_button][/vc_column][/vc_row]

Diğer Divi öğreticiler