Ana İçeriğe Geç

Divi Blog modülüyle dinamik iş listesi bölümü nasıl oluşturulur

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]

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.

Divi kariyer sayfası oluşturun

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
Degrade arka plana sahip bir bölüm oluşturun

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
  • Ayırıcı düzeni: bölüm içeriğinin altında
Divi bölüm ayarı

aralık

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

  • Alt doldurma: 200px
Divi bölümü alt aralığı

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:

Divi düzenini seçin

Sütuna metin modülü ekleme

H1 içeriği ekle

Seçtiğiniz H1 içeriğine sahip satır sütununa bir metin modülü ekleyin.

Metin bölümü ekle

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
Ayırıcı modül ekle

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.

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]

  • 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:

dinamik kariyer

Sütuna metin modülü ekleme

H2 içeriği ekle

Satır sütununa bir metin modülü ekleyin ve istediğiniz H2 içeriğini ekleyin.

Divi metin modülü ekle

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
Özelleştirme renk bölümü metin divi

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
Divi ayırıcısı ekle

Hat

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

  • Çizgi rengi: # ffa500
Renk ayırıcı divi'yi özelleştirme

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
Ayırıcı konfigürasyonu

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:

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]

  • Mesaj türü: Mesajlar
  • Kategoriler dahil: Pazarlama
  • Ekstrakt uzunluğu: 150
Blog modülü ekle

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
Divi blog modülü yapılandırması 1

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
Blog modülü düzen yapılandırması 1

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
Blog modülü metin yapılandırması

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
Blog modülü yazı tipi yapılandırması

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
Yapılandırma daha fazlasını okuyun blog modülü 1

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
Aralık yapılandırması

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;

Özel kod blog modülü

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

Divi metninin içeriğini değiştirme

Blog modüllerinin kategorilerini düzenleme

Blog modülünün kategorileriyle.

dinamik kariyer

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:

Ç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]

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

Css divi kodu ekle

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, Divi Blog modülünü kullanarak Kariyer sayfanızda bu dinamik ve açık makaleleri nasıl sunacağınızı gösterdik. Lütfen aşağıdaki yorumlar bölümüne yorum yapmaktan çekinmeyin.

Bu makalede, 1 yorumunu içeren

  1. merhaba, kod eklemeniz gereken kısımdayım ama kaydedip siteye gittiğimde stil uygulanmıyor ve kod çevrimiçi olarak stil etiketleri olmadan görünüyor. Yardımın için teşekkürler.

    Bonne journée!

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üş
0 hisseleri
hisse
cıvıltı
Enregistrer