Bugünün eğitiminde, açık pozisyonları Kariyer sayfanızda dinamik olarak nasıl görüntüleyebileceğinizi göstereceğiz. Hadi başlayalım.

Sonuca genel bakış

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

1. Kariyer sayfası oluşturma

Yeni bir sayfa ekleyin ve Visual Builder'a geçin

Yeni bir sayfa oluşturarak başlayın, sayfanıza bir başlık verin ve Visual Builder'a gidin.

2. Ön uçta Kariyer sayfası oluşturmaya başlayın

İlk bölümü ekle

Gradyan arka planı

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

• Renk 1: # ff6600
• Renk 2: # fbff30
• Gradyan yönü: 126 derece

Alt bölücü

Ayrıca bir alt bölüm ayırıcı kullanın.

• Ayırma stili: Listede arama
• Bölücü yüksekliği: 8vw
• Bölücünün yatay tekrarı: 3x
• Bölücülerin düzenlenmesi: altında içindekiler bölümün

aralık

Alt dolgu ekleyerek bölüm parametrelerini tamamlayın.

• Alt doldurma: 200px

Yeni bir satır ekle

Sütun yapısı

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

Sütuna metin modülü ekleme

H1 içeriği ekle

Satır sütununa bir metin modülü ekleyin içindekiler H1 sizin seçiminiz.

H1 metin ayarları

Modül tasarımı sekmesine geçin 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
• Üstbilgi Metin Rengi: #ffffff
• Başlık Metin Boyutu: 8rem (masaüstü), 4rem (tablet), 2.5rem (telefon)

Sütuna bir ayırma modülü ekleme

görünürlük

Metin modülünün hemen altına bir ayırıcı modül ekleyin. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.

• Ayırıcıyı göster: Evet

Hat

Ardından modülün çizgi rengini değiştirin.

• Çizgi rengi: #ffffff

boyutlandırma

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

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

2. bölüm ekle

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

Yeni bir 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ü ekleme

H2 içeriği ekle

Satır sütununa bir metin modülü ekleyin ve metin ekleyin içindekiler H2 sizin seçiminiz.

H2 metin ayarları

Modülün H2 metin parametrelerini aşağıdaki gibi değiştirin:

• Başlık 2 Polis: Montserrat
• Madde 2 Politikanın ağırlığı: ağır
• 2. öğenin metin rengi: # ffa500
• Başlık 2 Metin boyutu: 2.3rem

Sütuna bir ayırma modülü ekleme

görünürlük

Bu sütunda ihtiyacımız olan bir sonraki modül bir ayırma modülüdür. "Ayırıcıyı Göster" seçeneğinin etkinleştirildiğinden emin olun.

• Ayırıcıyı göster: Evet

Hat

Ardından modülün çizgi rengini değiştirin.

• Çizgi rengi: # ffa500

boyutlandırma

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

• Bölücü ağırlık: 6px
• Maksimum genişlik: 80 piksel

Sütuna bir blog modülü ekleyin

içindekiler

Farklı açık pozisyonları 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:

• Mesaj türü: Mesajlar
• Kategorileri dahil et: Pazarlama
• Ekstrakt uzunluğu: 150

Elemanları

Elemanların parametrelerinde, etkinleştirdiğimiz sadece iki seçenek şunlardır:

• Daha fazla düğme göster: Evet
• Şovdan bir alıntı: Evet

hüküm

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

• Düzen: tam genişlik

Başlık metni ayarları

Ayrıca başlık metni ayarlarını da değiştirin.

• Başlık seviyesi: H3
• Başlık yazı tipi: Montserrat
• Başlık metni boyutu: 1.5rem

Gövde metni ayarları

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

• Vücut Polisi: Raleway
• Metin gövde boyutu: 1.1rem
• Gövde çizgisinin yüksekliği: 2.1em

Daha fazla bilgi edinin Metin ayarları

Metin ayarları ile daha fazla bilgi edinin.

• Devamını oku Polis: Montserrat
• Daha fazla bilgi edinin Yazı tipi stili: Capital
• Daha fazla bilgi edinin Metin rengi: #ffffff
• Metin boyutu: 1rem

aralık

Aralık ayarlarına özel kenar boşlukları ve dolgu değerleri ekleyin.

• Sol kenar boşluğu: 100 piksel (masaüstü), 50 piksel (tablet), 0 piksel (telefon)
• Üst dolgu: 0 piksel
• Alt doldurma: 0px

Daha fazla bilgi edinin Düğme CSS

Gelişmiş sekmeye CSS oynatma düğmeleri ekleyerek modül 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;

Çizgiyi gerektiği kadar klonlayın

Hattı ve tüm modüllerini tamamladıktan sonra, şirketinizdeki departman sayısına bağlı olarak istediğiniz kadar klonlayabilirsiniz.

Metin modülünün içeriğini düzenleme

Her yinelenen satırın H2 içeriğini düzenlediğinizden emin olun.

Blog modüllerinin kategorilerini düzenleme

Blog modülünün kategorileriyle.

Son satırın sütununa bir kod modülü ekleme

Tek tek açık iş istasyonlarını stilize etmek için CSS kodu ekleyin

Tasarımı tamamlamak için, sayfamızın son satırına bir kod modülü ekleyeceğiz ve aşağıdaki CSS kodu 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ı kaydedin ve sonucu görüntüleyin

Sayfayı tasarlamayı bitirdikten sonra, tüm değişiklikleri kaydedebilir, Visual Builder'dan çıkıp sonucu görüntüleyebilirsiniz!

Nihai sonuç

Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.

Son düşünceler

Bu eğitimde, Blog modülünü kullanarak Kariyer Sayfanızda bu dinamik, açık uçlu makaleleri nasıl sergileyeceğinizi gösterdik. Divi. Aşağıdaki yorum bölümünde bir yorum bırakmaktan çekinmeyin.