Divi Blog Modülü ile Dinamik Kariyer İş Listesi Bölümü Nasıl Yapılır
Önceki Divi öğreticisinde, bir divi teması ve gelişmiş özel alan eklentisi üreticisi ile tamamen dinamik bir açık çalışma pozisyonu şablonunun nasıl yapılacağını gösterdik. Bugünün öğreticisinde, kariyer sayfanızdaki açık çalışma pozisyonunu nasıl dinamik olarak görüntüleyebileceğinizi göstereceğiz. Bu öğretici, iş pozisyonu şablonu postasının bir devamıdır, bu nedenle önce bir şablonu yeniden oluşturduğunuzdan emin olun, ardından bu öğreticiye dönün. Haydi Yapalım şunu. Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Masaüstü
Dosyayı indir
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin! 1. Bir kariyer sayfası ekle Yeni bir sayfa ekleyin ve yeni bir sayfa oluşturarak, sayfa başlığınızı verin ve görsel oluşturucuya geçerek Visual Builder Start’a geçin.
2. Ön uçta bir kariyer sayfası oluşturmaya başlayın Bölüm #1 arka plan gradyanı ekleyin Sayfaya ilk parçayı ekleyin, bölümün ayarlarını açın ve gradyanın arka planını kullanın. Renk 1: #FF6600
Renk 2: #FBFF30
Gradyan yönü: 126deg
Alt bölücü ayrıca alt bölücüyü de kullanır. Bölme Stili: Listede bulun
Böcek Yüksekliği: 8VW
Yatay bölücü tekrar: 3x
Bölme Ayarları: Altını doldurun
Mesafe Birkaç alt rulman ekleyerek ayarları tamamlayın. Dolgu Alt: 200px
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin: Metin modülünü sütuna ekleyin, H1 içeriğini ekleyin, metin modülünü istediğiniz bazı H1 içeriğiyle satır sütununa ekleyin. H1 Metin Ayarları Modül Tasarım sekmesine geçin ve uygun H1 metin ayarlarını değiştirin: Yazı tipi başlığı: Montserrat
Başlık Mektubu Ağırlık: Ağırlık
Başlık metin rengi: #ffffff
Başlık Metin Boyutu: 8REM (Masaüstü), 4Rem (Tablet), 2.5Rem (Telefon)
Bölme modülünü Metin Modülünün hemen altındaki görünürlük sütununa ekleyin, bölücü modülünü ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun. Divisor göster: evet
Hat Bir sonraki modül hattının rengini değiştirin. Çizgi rengi: #ffffff
Boyut ayarlarını değiştirerek yapıştırıcı ve tam modül ayarları. Bölücü ağırlığı: 8px
Genişlik:% 30
Bölüm #2 Ekle sayfaya diğer normal bölümü ekleyin. Sütun yapısının yeni bir satırı ekleyin, aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyin: Metin modülünü sütuna ekleyin, H2 içeriğini ekleyin, metin modülünü satır sütununa ekleyin ve istediğiniz H2 içeriğinin bazılarını girin. H2 Metin Ayarları Modülünü Değiştir H2 Metin Ayarları aşağıdaki gibi: Başlık 2 Yazı Tipi: Montserrat
Başlık 2 Font Ağırlığı: Ağırlık
Başlık 2 Renk Metni: #FFA500
Başlık 2 Metin Boyutu: 2.3Rem
Bölme modülünü bu sütunda ihtiyacımız olan bir sonraki modül görünürlük sütununa ekleyin. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
Çizgi rengi: #FFA500 Boyut ayarlarında bölen ağırlığını ve maksimum genişliğini değiştirerek yapıştırıcı ve tam modül ayarları.
Bölücü ağırlığı: 6px Maksimum genişlik: 80px
İçindekiler sütununa bir blog modülü ekleyin Çeşitli açık çalışma konumlarını görüntülemek için, ihtiyaçlarımıza göre ayarlayacağımız blog modülünü kullanacağız. Aşağıdaki içeriğin geçerli olduğundan emin olun:
Gönderi türü: Gönderi Kategorileri Ekleyin: Pazarlama
Alıntı Uzunluğu: 150
Elemanları ayarlamadaki öğeler, yalnızca etkinleştirdiğimiz iki seçenek aşağıdadır:
Tam okuma düğmesini göster: evet Teklif Performansı: Evet
Düzen, Modül Tasarım sekmesine geçer ve tam geniş bir düzen kullandığınızdan emin olun.
Düzen: Tam Genişlik Başlık Metin Ayarları Başlık metin ayarlarını da değiştirin.
Başlık Başlığı Seviyesi: H3 Yazı tipi başlığı: Montserrat
Boyut Metin Başlığı: 1.5Rem
Gövde metnini ayarlayın, içerik metin ayarlarını değiştirin.
Body Font: Raleway Vücut Metin Boyutu: 1.1Rem
Vücut Hattı Yüksekliği: 2.1em
Daha fazla metin ayarı ile birlikte daha fazla metin ayarı oku.
Daha Fazla Yazı Tip Stili: Büyük harf Metnin tam rengini okuyun: #ffffff
Daha fazla oku Metin boyutu: 1Rem
Mesafe Uzay ayarlarına biraz marj ve özel dolgu değerleri ekleyin.
Sol kenar boşluğu: 100 piksel (masaüstü), 50px (tablet), 0px (telefon)
Üst dolgu: 0px Aşağıda dolgu: 0px
Daha fazla CSS düğmesini okuyun ve Gelişmiş sekmesinde daha fazla CSS için birkaç okuma düğmesi ekleyerek modül ayarlarını tamamlayın. Max-Width: 200px;
Metin-align: merkez;
Dolgu: 20px; Marj-Top: 40 piksel;
Border-Radius: 100px;
Arka plan-görüntü: doğrusal gradyan (126deg,#ff6600%0,#fbff30%100)! Önemli;
Klon satırı, hattı ve tüm modülleri bitirdikten sonra gerektiği kadar sıktır, şirketinizin kaç departmanına bağlı olarak istediğiniz kadar klonlayabilirsiniz.
Metin Modülünün İçeriğini Değiştirin Her bir yinelenen satırın H2 içeriğini değiştirdiğinizden emin olun.
Blog modülü kategorisini blog modülü kategorisi ile birlikte değiştirin. Kod modülünü son satır sütununa ekleyin, tasarımı tamamlamak için ayrı ayrı açık olan iş konumunu düzenlemek için CSS kodunu girin, kod modülünü sayfamızdaki son satıra ekleyeceğiz ve aşağıdaki CSS kod satırını ekleyeceğiz: .et_pb_posts .et_pb_post { Box-Shadow: 0px 2px 50px 0px RGBA (0.0,0,0.0.09);
Dolgu: 50px;
Border-Radius: 20px;
Arka Plan rengi: #fff;
}
3. Sayfa tasarımını kaydedin ve sonuçları görün sayfa tasarımını tamamladıktan sonra tüm değişiklikleri depolayabilir, görsel oluşturucudan çıkabilir ve sonuçları görebilirsiniz!
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.Masaüstü
Bu öğreticinin son zihni, size açık bir çalışma pozisyonu şablonunun nasıl yapılacağını gösterdiğimiz önceki öğreticinin bir devamıdır.Bu öğreticide daha ileri gittik ve Divi blog modülünü kullanarak kariyer sayfanızdaki dinamik açık çalışma pozisyonunu nasıl görüntüleyeceğinizi gösterdik.JSON dosyalarını ücretsiz olarak da indirebilirsiniz!Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde yorum bırakmaktan çekinmeyin.
