Divi ve ACF ile Dinamik Portföy Proje Şablonu Nasıl Oluşturulur

Web sitenizde portföy öğeleri oluşturma şeklinizi kolaylaştırmanın bir yolunu mu arıyorsunuz? Eğer öyleyse, bu gönderiyi seveceksiniz. Bu eğitimde size Divi's Theme Builder ve ACF eklentisi ile dinamik bir portföy projesi şablonunun nasıl oluşturulacağını göstereceğiz. Bir portföy projesi şablonu oluşturmak, şablon gövdesini bir kez tasarlamanıza ve gelecekte ekleyeceğiniz tüm portföy öğelerine uygulanmasını sağlamanıza olanak tanır. Yarattığımız şablon tasarımı, her türlü yaratıcı mesleğe uygundur, ancak bu sadece buzdağının görünen kısmıdır. İstediğiniz kadar alan ekleyebilir ve bunları şablonunuzun içinde kullanabilirsiniz. Yeniden oluşturacağımız tasarımın JSON dosyasını da ücretsiz olarak indirebileceksiniz!

Hadi hadi bakalım.

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

ÜCRETSİZ Dinamik Portföy Proje Şablonunu İndirin

Önemli: ACF alanlarını ayarladıktan ve şablon JSON dosyasını Tema Oluşturucu'ya yükledikten sonra her modüle manuel olarak dinamik içerik eklemeniz gerekecektir.

Ücretsiz dinamik portföy projesi şablonuna el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

1. ACF'yi Kurun ve Proje Alanlarını Ayarlayın

ACF'yi Yükleyin ve Etkinleştirin

WordPress web sitenize ücretsiz Gelişmiş Özel Alanlar eklentisini yükleyerek başlayın. Kurduktan sonra, onu da etkinleştirdiğinizden emin olun.

Alan Grubunu Ayarla

Eklentiyi kurup etkinleştirdikten sonra, özel alanları oluşturmaya başlamanın zamanı geldi. Eklenti ayarlarınıza gidin ve yeni bir alan grubu ekleyin.

Alan grubunuzun konumunu değiştirin. Sadece projelerimizde görünmesini istiyoruz.

• Yazı Tipi – eşittir – Proje

Alan Ekle

Aşağıda belirtilen öğelerin her biri için yeni bir alan ekleyerek devam edin:

• Sorun
  • Alan Etiketi: Sorun
  • Alan Türü: Metin Alanı
• Çözüm
  • Alan Etiketi: Çözüm
  • Alan Türü: Metin Alanı
• referans
  • Alan Etiketi: Referans
  • Alan Türü: Metin
• İlgili kişi
  • Alan Etiketi: İlgili Kişi
  • Alan Türü: Metin
• İlgili Kişi Resmi
  • Alan Etiketi: İlgili Kişi Resmi
  • Alan Türü: Resim
• İlgili Kişi İş Unvanı
  • Alan Etiketi: İlgili Kişi İş Unvanı
  • Alan Türü: Metin
• Müşteri Logosu
  • Alan Etiketi: Müşteri Logosu
  • Alan Türü: Resim
• Müşteri Web Sitesi
  • Alan Etiketi: Müşteri Web Sitesi
  • Alan Türü: URL
• Proje süresi
  • Alan Etiketi: Proje Süresi
  • Alan Türü: Aralık
  • Ekle: haftalar

Oluşturmak istediğiniz proje şablonuna bağlı olarak istediğiniz kadar alan eklemekte özgür olduğunuzu bilin. Bu gönderinin önizlemesinde gösterilen tasarımın aynısını yeniden oluşturmak için yukarıda belirtilen tüm alanlara ihtiyacınız olacak.

2. Yeni Proje Oluştur

Portföy Ekle Proje Başlığı ve Açıklaması

Alan grubunu ve tüm alanlarını oluşturduktan sonra sıra örnek bir proje oluşturmaya gelir. WordPress panonuza gidin, yeni bir proje ekleyin ve bir başlık ve açıklama girin.

Öne Çıkan Görsel Yükle

Ardından, seçtiğiniz öne çıkan bir resmi yükleyin.

Tüm Özel Alanları Doldurun

Eğiticinin ilk bölümünde eklediğiniz tüm farklı özel alanları doldurarak devam edin.

3. Yeni Şablon Oluşturun

Divi Tema Oluşturucu'ya gidin ve Yeni Şablon Oluşturun

Şablonu oluşturmaya başlama zamanı! Divi Tema Oluşturucu'ya gidin ve yeni bir şablon ekleyin.

Kullanmak

Şablonu tüm projelerinize uygulayın.

• Kullanımda: Tüm Projeler

4. Şablon Gövdesi Oluşturmaya Başlayın

Şablonun özel gövdesini oluşturmaya başlayarak devam edin.

Bölüm 1

Arka plan rengi

Şablon düzenleyicinin içinde bir bölüm göreceksiniz. Bu bölümü açın ve siyah bir arka plan rengi ekleyin.

• Arka Plan Rengi: #000000

aralık

Daha sonra bazı özel üst ve alt dolgu ekleyin.

• Üst Dolgu: 250 piksel
• Alt Dolgu: 250px

Sınır

Biraz sol alt ve sağ kenarlık yarıçapı da ekleyin.

• Sol Alt: 8vw
• Sağ Alt: 8vw

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme ilk satırı ekleyerek devam edin:

Sütuna Metin Modülü #1 Ekle

İçerik Ekle

Ardından, bir Metin Modülü ekleyin ve içerik kutusuna bir miktar içerik yerleştirin.

• Gövde: Proje Süresi:

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Montserrat
• Metin Rengi: #a0a0a0
• Metin Boyutu: 1.2rem

Sütuna Metin Modülü #2 Ekle

Dinamik İçerik

Sütuna başka bir Metin Modülü ekleyin ve proje süresi dinamik içeriğini seçin.

• Dinamik İçerik: Proje Süresi
• sonra: haftalar

Metin Ayarları

Daha sonra modülün metin ayarlarını değiştirin.

• Metin Yazı Tipi: Lora
• Metin Rengi: #ffffff
• Metin Boyutu: 1.5rem

Sütuna Metin Modülü #3 Ekle

Dinamik İçerik

Başka bir Metin Modülü ekleyin ve gönderi/arşiv başlığı dinamik içeriğini seçin.

• Dinamik İçerik: Gönderi/Arşiv Başlığı
• Önce: <H1>
• Sonra: </H1>

H1 Metin Ayarları

Modülün H1 metin ayarlarına stil verin.

• Başlık Yazı Tipi: Montserrat
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 6rem (Masaüstü), 3rem (Tablet ve Telefon)

aralık

Biraz üst ve alt kenar boşluğu ekleyerek modülün ayarlarını tamamlayın.

• Üst Kenar Boşluğu: 100 piksel
• Alt Kenar Boşluğu: 100 piksel

Gönderi İçeriği Modülü Ekle

Metin Ayarları

Sütunda ihtiyacımız olan sonraki ve son modül, İçerik Sonrası Modülüdür. Bu, projenizin açıklamasını gösterecektir. Modülün metin ayarlarını aşağıdaki gibi değiştirin:

• Metin Yazı Tipi: Lora
• Metin Rengi: #ffffff
• Metin Boyutu: 1.5rem (Masaüstü), 0.9rem
• Metin Satır Yüksekliği: 2em

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme başka bir satır ekleyin:

Sütun 1'e Görüntü Modülü Ekle

Dinamik İçerik

Sütun 1'e bir Görüntü Modülü ekleyin ve istemci logosu dinamik içeriğini seçin.

• Dinamik İçerik: Müşteri Logosu

Sütun 2'ye Metin Modülü Ekle

İçerik Ekle

Ardından, 2. sütuna bir Metin Modülü ekleyin ve seçtiğiniz bir kopyayı girin.

Dinamik İçeriği Bağla

Bağlantı ayarlarında istemci web sitesi dinamik içeriğini seçerek modülü istemci web sitesine bağlayın.

• Dinamik İçerik: Müşteri Web Sitesi

Metin Ayarları

Daha sonra modülün metin ayarlarını değiştirin.

• Metin Yazı Tipi: Montserrat
• Metin Rengi: #ffffff
• Metin Boyutu: 1.5rem
• Metin Satırı Yüksekliği: 1em

aralık

Bazı özel alt dolguları da ekleyin.

• Alt Dolgu: 50px

Sınır

Ve bir alt kenarlık ekleyerek modülün ayarlarını tamamlayın.

• Alt Kenar Genişliği: 1px
• Alt Kenar Rengi: #ffc300

2. Bölüm Ekle

aralık

Bir sonraki bölüme! Tüm varsayılan üst ve alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Satır ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

aralık

Satır ayarlarını açın ve tüm varsayılan üst alt dolguyu kaldırın.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

Sütuna Resim Modülü Ekle

Dinamik İçerik

Bu satırda ihtiyacımız olan tek modül bir Görüntü Modülüdür. Görüntüyü projenin öne çıkan görüntüsüne bağlayın.

• Dinamik İçerik: Öne Çıkan Resim

Sınır

Biraz sol alt ve sağ kenarlık yarıçapı da ekleyin.

• Sol Alt: 8vw
• Sağ Alt: 8vw

3. Bölüm Ekle

aralık

Bazı özel üst ve alt dolgularla başka bir normal bölüm ekleyin.

• Üst Dolgu: 250 piksel
• Alt Dolgu: 250px

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyin:

Sütun 1'e Metin Modülü Ekle

H2 İçeriği Ekle

Sütun 1'e bir Metin Modülü ekleyin ve seçtiğiniz bazı H2 içeriğini ekleyin.

H2 Metin Ayarları

H2 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Yazı Tipi Ağırlığı: Kalın
• Başlık 2 Metin Boyutu: 2rem

Sütun 2'ye Metin Modülü Ekle

Dinamik İçerik

İkinci sütuna geçin, bir Metin Modülü ekleyin ve problemli dinamik içeriği kullanın.

• Dinamik İçerik: Sorun

Metin Ayarları

Ardından modülün metin ayarlarını değiştirin:

• Metin Yazı Tipi: Lora
• Metin Boyutu: 1.5rem (Masaüstü), 0.9vw (Tablet ve Telefon)
• Metin Satır Yüksekliği: 2em

Klon Satırı

Satırı tamamladıktan sonra devam edin ve tamamen klonlayın.

Sütun 1'deki Metin Modülünün Kopyasını Değiştir

Yinelenen satırın 1 Metin Modülü sütununun kopyasını değiştirin.

Sütun 2'deki Metin Modülünün Dinamik İçeriğini Değiştirin

Yinelenen satırın 2. sütunundaki Metin Modülünün dinamik içeriğini de değiştirin.

• Dinamik İçerik: Çözüm

Yinelenen Satırın 2. Sütuna Düğme Modülü Ekle

Kopya Ekle

Yinelenen satırın 2. sütununa bir Düğme Modülü ekleyerek devam edin. Seçtiğiniz bir kopyayı ekleyin.

Düğme Ayarları

Modülün tasarım sekmesine gidin ve düğme ayarlarını aşağıdaki gibi değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 1.5rem
• Düğme Metin Rengi: #000000
• Düğme Sınır Yarıçapı: 0px

• Düğme Yazı Tipi: Montserrat

aralık

Bir miktar üst kenar boşluğu ekleyerek modülün ayarlarını tamamlayın.

• Üst Kenar Boşluğu: 100 piksel

4. Bölüm Ekle

Arka plan rengi

Bir sonraki ve son bölüme! Siyah bir arka plan rengi ekleyin.

• Arka Plan Rengi: #000000

Sınır

Bölüme de biraz üst sol ve sağ kenarlık yarıçapı ekleyin.

• Sol Üst: 8vw
• Sağ Üst: 8vw

Satır ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:

Sütuna Referans Modülü Ekle

Dinamik İçerik

Satıra bir Referans Modülü ekleyin ve modülün içindeki farklı öğeler için bir miktar dinamik içerik seçin.

• Yazar: İlgili Kişi
• İş Ünvanı: İlgili Kişi İş Ünvanı
• Gövde: Referans
• Resim: İlgili Kişi Resmi

Elementler

Sonraki alıntı simgesini devre dışı bırakın.

• Alıntı Simgesini Göster: Hayır

Arka plan rengi

Ardından modülün arka plan rengini siyah olarak değiştirin.

• Arka Plan Rengi: #000000

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin rengini değiştirin.

• Metin Rengi: Açık

Gövde Metni Ayarları

Sonraki gövde metni ayarlarını değiştirin.

• Gövde Yazı Tipi: Montserrat
• Gövde Metni Boyutu: 2rem (Masaüstü), 1.5rem (Tablet ve Telefon)

Yazar Metin Ayarları

Yazar metin ayarlarını da değiştirin.

• Yazar Yazı Tipi: Lora
• Yazar Metin Boyutu: 1.4rem (Masaüstü), 0.9rem (Tablet ve Telefon)

Konum Metni Ayarları

Konum metni ayarlarını uygun şekilde değiştirerek modülün ayarlarını tamamlayın:

• Pozisyon Yazı Tipi: Lora
• Konum Metni Rengi: #a8a8a8
• Konum Metin Boyutu: 1.4rem (Masaüstü), 0.9rem (Tablet ve Telefon)

4. Tema Oluşturucu Değişikliklerini Kaydet ve Sonucu Görüntüle

Şablonu tamamladıktan sonra tüm Divi Theme Builder değişikliklerini kaydedin ve sonucu projenizde görüntüleyin!

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, Divi Theme Builder ve ACF eklentisini kullanarak güzel bir portföy projesi şablonunun nasıl oluşturulacağını gösterdik. Bu, projeleri web sitenizde görüntüleme şeklinizi kolaylaştırmanın harika bir yoludur. Şablonu tüm projelerinize atadığınızda, gelecekte ekleyeceğiniz portföy öğelerine otomatik olarak uygulanacaktır. Bu tasarımın şablon JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.