Divi'nin Blog Modülü ile Dinamik Kariyer İş İlanı Bölümü Nasıl Oluşturulur

Önceki bir Divi eğitiminde, Divi's Theme Builder ve Advanced Custom Fields eklentisi ile tamamen dinamik bir açık iş pozisyonu şablonunun nasıl oluşturulacağını göstermiştik. Bugünkü eğitimde, kariyer sayfanızda açık iş pozisyonlarını dinamik olarak nasıl öne çıkarabileceğinizi göstereceğiz. Bu öğretici, açık iş pozisyonu şablon gönderisinin devamıdır, bu nedenle önce şablonu yeniden oluşturduğunuzdan ve ardından bu eğiticiye geri döndüğünüzden emin olun.

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

Dinamik Kariyer İş İlanı Düzenini ÜCRETSİZ İndirin

Ücretsiz dinamik kariyer iş listeleme düzenine 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. Kariyer Sayfası Ekle

Yeni Sayfa Ekle ve Visual Builder'a Geç

Yeni bir sayfa oluşturarak, sayfanıza bir başlık vererek ve Visual Builder'a geçerek başlayın.

2. Ön Uçta Kariyer Sayfası Oluşturmaya Başlayın

1. Bölüm Ekle

Degrade Arka Plan

İlk bölümü sayfaya ekleyin, bölüm ayarlarını açın ve degrade bir arka plan kullanın.

• Renk 1: #ff6600
• Renk 2: #fbff30
• Gradyan Yönü: 126deg

Alt Bölücü

Bir alt bölüm ayırıcı da kullanın.

• Bölücü Stili: Listede Bul
• Bölücü Yüksekliği: 8vw
• Bölücü Yatay Tekrar: 3x
• Bölücü Düzenlemesi: Bölüm İçeriğinin Altında

aralık

Biraz alt dolgu ekleyerek bölüm ayarlarını tamamlayın.

• Alt Dolgu: 200px

Yeni 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 Metin Modülü Ekle

H1 İçeriği Ekle

Seçtiğiniz bazı H1 içeriğiyle satırın sütununa bir Metin Modülü ekleyin.

H1 Metin Ayarları

Modülün tasarım sekmesine gidin ve H1 metin ayarlarını buna göre değiştirin:

• Başlık Yazı Tipi: Montserrat
• Başlık Yazı Tipi Ağırlığı: Ağır
• Başlık Metni Rengi: #ffffff
• Başlık Metni Boyutu: 8rem (Masaüstü), 4rem (Tablet), 2.5rem (Telefon)

Sütuna Ayırıcı Modül Ekle

görünürlük

Metin Modülünün hemen altına bir Bölücü Modül ekleyin. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Daha sonra modülün çizgi rengini değiştirin.

• Çizgi Rengi: #ffffff

boyutlandırma

Ve boyutlandırma ayarlarını değiştirerek modülün ayarlarını tamamlayın.

• Bölücü Ağırlığı: 8px
• Genişlik: %30

2. Bölüm Ekle

Sayfaya başka bir normal bölüm ekleyin.

Yeni 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ütuna Metin Modülü Ekle

H2 İçeriği Ekle

Satırın sütununa bir Metin Modülü ekleyin ve seçtiğiniz bazı H2 içeriğini ekleyin.

H2 Metin Ayarları

Modülün 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ığı: Ağır
• Başlık 2 Metin Rengi: #ffa500
• Başlık 2 Metin Boyutu: 2.3rem

Sütuna Ayırıcı Modül Ekle

görünürlük

Bu sütunda ihtiyacımız olan bir sonraki modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.

• Bölücüyü Göster: Evet

Hat

Daha sonra modülün çizgi rengini değiştirin.

• Çizgi Rengi: #ffa500

boyutlandırma

Ve boyutlandırma ayarlarında bölücü ağırlığını ve maksimum genişliği değiştirerek modülün ayarlarını tamamlayın.

• Bölücü Ağırlığı: 6px
• Maksimum Genişlik: 80 piksel

Sütuna Blog Modülü Ekle

İçerik

Farklı açık iş pozisyonlarını görüntülemek için ihtiyaçlarımıza göre özelleştireceğimiz bir Blog Modülü kullanacağız. Aşağıdaki içerik ayarlarının geçerli olduğundan emin olun:

• Yazı Tipi: Yazılar
• Kategorileri Dahil Et: Pazarlama
• Alıntı Uzunluğu: 150

Elementler

Öğe ayarlarında, etkinleştirdiğimiz yalnızca iki seçenek aşağıdakilerdir:

• Devamını Oku Düğmesini Göster: Evet
• Alıntıyı Göster: Evet

Düzen

Modülün tasarım sekmesine gidin ve tam genişlikte bir düzen kullandığınızdan emin olun.

• Düzen: Tam genişlik

Başlık Metni Ayarları

Başlık metni ayarlarını da değiştirin.

• Başlık Başlık Düzeyi: H3
• Başlık Yazı Tipi: Montserrat
• Başlık Metin Boyutu: 1.5rem

Gövde Metni Ayarları

Ardından, gövde metni ayarlarını değiştirin.

• Gövde Yazı Tipi: Raleway
• Gövde Metin Boyutu: 1.1rem
• Gövde Çizgisi Yüksekliği: 2.1em

Daha Fazla Metin Ayarları Oku

Daha fazla metin okuma ayarlarıyla birlikte.

• Devamını Oku Yazı Tipi: Montserrat
• Yazı Tipi Stili: Büyük Harf
• Devamını Oku Metin Rengi: #ffffff
• Devamını Oku Metin Boyutu: 1rem

aralık

Boşluk ayarlarına bazı özel kenar boşluğu ve dolgu değerleri ekleyin.

• Sol Kenar Boşluğu: 100px (Masaüstü), 50px (Tablet), 0px (Telefon)
• Üst Dolgu: 0px
• Alt Dolgu: 0px

Daha Fazla Düğme CSS Oku

Ve gelişmiş sekmeye biraz daha fazla oku buton CSS ekleyerek modülün ayarlarını tamamlayın.

max-width: 200px;
text-align: center;
padding: 20px;
margin-top: 40px;
border-radius: 100px;
background-image: linear-gradient(126deg,#ff6600 0%,#fbff30 100%)!important;

Satırı Gerektiği Kadar Kez Klonlayın

Satırı ve tüm modüllerini tamamladıktan sonra, şirketinizin kaç departmana sahip olduğuna bağlı olarak onu istediğiniz kadar klonlayabilirsiniz.

Metin Modülü İçeriğini Değiştir

Yinelenen her satırın H2 içeriğini değiştirdiğinizden emin olun.

Blog Modülü Kategorilerini Değiştir

Blog Modülü kategorileri ile birlikte.

Son Satırın Sütununa Kod Modülü Ekle

Açık İş Pozisyonlarına Ayrı Ayrı Stil Vermek için CSS Kodu Ekleme

Tasarımı tamamlamak için sayfamızın son satırına bir Kod Modülü ekleyeceğiz ve aşağıdaki CSS kod satırlarını ekleyeceğiz:

<style>
.et_pb_posts .et_pb_post {
box-shadow: 0px 2px 50px 0px rgba(0,0,0,0.09);
padding: 50px;
border-radius: 20px;
background-color: #fff;
}
</style>

3. Sayfa Tasarımını Kaydet ve Sonucu Görüntüle

Sayfa tasarımını tamamladıktan sonra tüm değişiklikleri kaydedebilir, Visual Builder'dan çıkabilir ve sonucu görüntüleyebilirsiniz!

Ö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 eğitim, bir açık iş pozisyonu şablonunun nasıl oluşturulacağını size gösterdiğimiz önceki eğitimin devamı niteliğindedir. Bu eğitimde, bunu bir adım daha ileri götürdük ve Divi'nin Blog Modülünü kullanarak bu dinamik açık iş pozisyonlarını kariyer sayfanızda nasıl öne çıkaracağınızı gösterdik. 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.