Divi ile Serbest Çalışan Siteniz için Öne Çıkan Bir İş Deneyimi Bölümü Nasıl Tasarlanır

İş deneyiminizi ve becerilerinizi çevrimiçi olarak sergilemek, kendinizi bir serbest çalışan olarak ayırmanın harika bir yoludur. Divi ile çalışma geçmişinizi hem temiz hem de profesyonel bir şekilde görüntülemek için benzersiz bir zaman çizelgesi oluşturabilirsiniz. Ayrıca Divi'nin daire sayacı modülüyle biraz yaratıcılığınızı kullanarak, becerilerinizi öne çıkarmak için animasyonlu bir infografik de ekleyebilirsiniz.

Bu eğitici yazıda, web siteniz için çarpıcı bir iş deneyimi ve beceriler bölümü tasarlamak için Divi Builder'ı nasıl kullanabileceğinizi göstereceğim.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız şeyin bir önizlemesi.

Başlık Bölümünüzü Oluşturun

Başlığınızı oluşturun bölümüne, metin modülü ile tek sütunlu bir satır ekleyin.

Metin modülünün içeriği için aşağıdaki html'yi girin:

<h2>Here's my</h2>
<h3>Education, Work Experience and Some Skills</h3>
<p>Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec rutrum congue leo eget malesuada.</p>

Metin modülünüz için tasarım sekmesi ayarını aşağıdaki gibi güncelleyin:

Metin Yazı Tipi: Source Sans Pro
Metin Metin Boyutu: 16px

İçeriğimizde hem h2 hem de h3 başlığı olduğu için ikisini de tasarlamamız gerekiyor.

Başlık 2 Yazı Tipi: Arşiv Dar
Başlık 2 Yazı Tipi Ağırlığı: Kalın
Başlık 2 yazı tipi Stili: TT
Başlık 2 Metin Boyutu: 24px
Başlık 2 Metin rengi: #06a08c

Başlık 3 Yazı Tipi: Julius Sans One
Başlık 3 Yazı Tipi Ağırlığı: Kalın
Başlık 3 Yazı Tipi Stili: TT
Başlık 3 Metin Boyutu: 62px
Başlık 3 Metin Rengi: #3d394b

Satır Ayarlarını Güncelle

Artık bölümün başlığının içeriğini girmeyi tamamladığınıza göre, satır ayarlarını biraz daha fazla boşluk bırakacak şekilde aşağıdaki gibi güncelleyin:

Özel Genişlik Kullan: EVET
Özel Genişlik: 1245 piksel
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1

İş Deneyimi Zaman Çizelgenizi Oluşturun

İş deneyimi zaman çizelgenizi oluşturmak için dörtte bir dörtte bir buçuk sütun düzenine sahip yeni bir satır ekleyin.

İlk modülünüzü eklemeden önce yukarıdaki satırın stilini yeni satırımızla eşleştirmemiz gerekiyor. Bunu yapmak için, yukarıdaki ilk satırın stilini kopyalamak için sağ tıklama seçeneklerini kullanın ve stili yeni eklediğiniz satıra yapıştırın.

İlk sütuna bir tanıtım yazısı modülü ekleyin.

Ardından, tanıtıcı modül ayarlarını aşağıdaki gibi güncelleyin:

Başlık: 2001-2003
İçerik: Quisque velit nisi, pretium ut lacinia in, elementum id enim. Proin eget tortor risus. Curabitur aliquet quam id dui pozuere blandit. Praesent sapien massa, convallis bir pellentesque nec.
Simgeyi Kullan: EVET
Simge: bir simge seçin

Tasarım sekmesi ayarları altında, simge tasarımı seçeneklerini aşağıdaki gibi güncelleyin:

Simge rengi: #06a08c
Daire Simgesi: EVET
Daire rengi: #ffffff
Daire Kenarlığını Göster: EVET
Daire Kenarlık Rengi: #06a08c
Resim/Simge Yerleşimi: Sol
Simge Yazı Tipi Boyutunu Kullan: EVET
Simge Yazı Tipi Boyutu: 40px

Şimdi başlık ve gövde metni tasarım seçeneklerini aşağıdaki gibi güncelleyin:

Başlık Yazı Tipi: Arşiv Dar
Başlık Yazı Tipi Ağırlığı: Yarı Kalın
Başlık Yazı Tipi Stili: TT
Başlık Metin Boyutu: 24px
Başlık Satır Yüksekliği: 60px

Gövde metni ayarlarını aşağıdaki gibi güncelleyin:

Gövde Yazı Tipi: Source Sans Pro
Gövde Metin Boyutu: 16px

Şimdi tanıtıcı modülümüzü, satırımız için daha sonra oluşturacağımız sol sınır çizgisiyle örtüşecek şekilde konumlandıralım. Aşağıdakileri güncelleyin:

Özel Kenar Boşluğu: -30px Üst, -30px Sol
Özel Dolgu: 30 piksel Sağ, 40 piksel Alt

İkinci sütunda devam eden zaman çizelgesi için kullanmak üzere bir sağ sınır çizgisi oluşturmamız gerekiyor. Bunu yapmak için bu tanıtım yazısı modülünde doğru bir kenarlık oluşturacağız. Aşağıdakileri güncelleyin:

Kenarlık Stilleri: sağ kenarlık
Sağ Kenar Genişliği: 2px
Sağ Kenar Rengi: #06a08c

Artık ek zaman çizelgesi içeriğimizi oluşturmak için tanıtım modülümüzü çoğaltmaya hazırız. İlk sütunda toplam 4 tanıtım yazısı modülü oluşturmak için tanıtım yazısı modülünü üç kez çoğaltın.

Ardından aynı tanıtım modülünü kopyalayın ve ikinci sütuna yapıştırın. Ardından, şimdi ikinci sütunda oturan tanıtım yazısı modülü için sağ kenarlığı çıkarın.

Şimdi, ikinci sütunda toplam üç tanıtıcı modül oluşturmak için bu tanıtıcı modülünü iki kez çoğaltın.

İlk sütundaki son iki tanıtım yazısının sağ kenarlığını çıkararak ikinci sütun tanıtım yazılarının altındaki fazladan satır boşluğundan kurtulmamız gerekiyor. Bunu yapmak için ilk sütundaki son iki tanıtım modülünü aşağıdakilerle güncelleyin:

Sağ Kenar Genişliği: 0px

Şimdi ilk satırdaki tanıtım yazısı simgelerini eklemek için satırımıza sol kenarlığı eklememiz gerekiyor. Bunu yapmak için satır ayarlarını aşağıdaki gibi güncelleyin:

Kenarlık Stilleri: Sol Kenarlık
Sol Kenar Genişliği: 2px
Sol Kenar Rengi: #06a08c

Şimdi satır aralığını biraz güncelleyin.

Özel Dolgu: 28px Üst, 0px Alt

Simgelerimiz satırımızın sol kenarını aştığından, simgenin geri kalanının görünür olduğundan emin olmak için tek bir özel css satırı eklememiz gerekiyor. Bunu yapmak için, satır ayarlarının gelişmiş sekmesine gidin ve ana öğe kutusunun altına aşağıdakini girin:

overflow: visible;

İlk sütundaki son tanıtım yazısının yanındaki sol kenar çizgisini gizlemek için o tanıtım yazısı modülüne beyaz bir arka plan rengi vermemiz gerekiyor. Bu işe yarar çünkü tanıtım yazısı modülü zaten -30 piksellik bir sol kenar boşluğu ile sola kaydırılmıştır.

Beceri Bilgi Grafiği Oluşturmak için Çember Sayacı Modüllerini Örtün

Bir sayfada beceri seviyenizi göstermek için 4 farklı daire sayacı modülü arasında boşluk bırakmak yerine, her bir daire sayacının farklı boyutlarını oluşturabilir ve tek bir infografik oluşturmak için bunları üst üste getirebilirsiniz. Yerleşik animasyonla, gerçekten etkileyici bir örnek oluşturuyor.

İlk Çember Sayacı Modülünüzü Ekleyin

Bunu yapmak için önce dört daire sayaç modülümüzün ilkini oluşturmalıyız. İlkini zaman çizelgemizin yanındaki satırımızın en sağındaki sütuna ekleyelim.

Daire sayıcı modülümüzü diğerleriyle katmanlaştıracağımız için, ilkinin sayı değerini gerçekten göstermesini istemiyoruz. Ancak animasyonlu renk çubuğunu görüntülemek için bir sayı değeri ayarlamak istiyoruz. Daire sayacı ayarlarını aşağıdaki gibi güncelleyin:

Sayı: 60
Yüzde İşareti: KAPALI

Tasarım sekmesi altında…

Çubuk Arkaplan rengi: #06a08c
Metin Rengi: Açık (bu, metnimizi beyaz arka planda gizleyecektir)

Genişlik: 350 piksel
Modül Hizalaması: Merkez

İnfografik tasarımını tamamlamak için bir öncekinin üzerine eklediğimiz her daire modülü ile 350 pikselin Genişliği kademeli olarak azalacaktır.

Özel Kenar Boşluğu: -2px Sol (bu, mobil cihazlarda daire modülünün yanında görünecek yeşil sol kenarlığı gizlemek içindir)

Modüllerin çakışmasını yapacağımız için, sonraki üç daire modülünü tamamlamak için tel kafes görünümünü dağıtın. Ardından, satırın en sağ sütununda toplam dört daire sayaç modülünüz olacak şekilde daire modülünü üç kez çoğaltın.

Şimdi tasarımı güncellememiz ve çizimin geri kalanını tamamlamak için üç kopyalanmış daire sayaç modülünü yerleştirmemiz gerekiyor.

İkinci Daire Sayacı Tasarlayın ve Yerleştirin

İkinci daire sayacının (orijinalin altındaki) ayarlarını aşağıdakilerle güncelleyin:

Sayı: 80
Bar Arka Plan Rengi: #187d6f
Genişlik: 330 piksel

Dikkat edin, daire sayacının genişliğini ilkinden 20 piksel azaltıyorum. Bu şekilde, daha büyük dairenin ortasına güzel bir şekilde sığacaktır. Şimdi daire sayacımızı negatif bir marjla getirmemiz gerekiyor.

Özel Kenar Boşluğu: -338px Üst

Şimdi ayarlarınızı kaydedin ve sayfanızın önizlemesini yapın. Çemberin diğerinin içine oturduğunu görmelisiniz.

Sonraki iki daire sayacı ile bu işleme devam edin.

Üçüncü Daire Sayacını Tasarlayın ve Yerleştirin

Üçüncü daire sayacı için aşağıdaki ayarları güncelleyin:

Sayı: 70
Çubuk Arka Plan Rengi: #eec42d
Genişlik: 310 piksel

Dikkat edin, dairenin genişliğini tekrar 20 piksel azalttım. Bu, üst üste binen daireler arasındaki boşluğun eşit uzaklıkta olmasını sağlamak içindir.

Özel Kenar Boşluğu: -318px Üst

Üst üste binen daireler arasındaki uygun dikey boşluğu hesaba katmak için özel kenar boşluğunun da 20 piksel azaltıldığına dikkat edin.

Dördüncü Daire Sayacı Tasarlayın ve Yerleştirin

Dördüncü daire sayacı için aşağıdaki ayarları güncelleyin:

Sayı: 90
Bar Arka Plan Rengi: #3d394b

Bu noktada daire sayaçlarınızın ortasındaki sayıyı dahil etmek isteyebilirsiniz. Öyleyse, metin rengini koyu olarak güncelleyebilirsiniz.

Metin Rengi: koyu

Aslında, bu şekilde dört daire sayacınızdaki sayı değerlerinden herhangi birini görüntülemeyi seçebilirsiniz. Yalnızca koyu metin rengine sahip birini seçtiğinizden emin olun, böylece sayıların çakışması gerekmez.

Genişlik: 290 piksel

Özel Kenar Boşluğu: -298 piksel Üst, 80 piksel Alt

Bu son daire modülü için, onu sadece negatif bir marjla getirmek gerekli değil, aynı zamanda oluşturulan negatif boşluğu telafi etmek için aşağıya bir pozitif marj eklemek istiyoruz. Bu, daire modüllerinin altına koyacağınız bir sonraki modülün uygun boşluklara sahip olmasını sağlayacaktır.

Şimdi sonucu kontrol edin.

Çember Sayaç Renklerinize Karşılık Gelen Renkli Etiketlerle Becerilerinizi Listeleyin

Son adım, daire sayaçlarının her birinde her bir çubuk rengine hangi becerilerin karşılık geldiğini anlamaya yardımcı olacak bir renk anahtarı oluşturmaktır.

Özel liste öğeleri oluşturmanın harika bir yolu, tanıtım modülünü kullanmaktır. Tel çerçeve görünümünden çıkmadan önce, sağ sütundaki Çember sayaçlarınızın altına yeni bir tanıtım yazısı modülü ekleyin. Ardından, öğreticinin geri kalanını tamamlamak için masaüstü görünümünü değiştirin.

Tanımlama modülü ayarlarını aşağıdaki gibi güncelleyin:

Başlık: Javascript
Simgeyi Kullan: EVET
Simge: kare simgeyi seçin

Tasarım sekmesi altında…

Simge Rengi: #187d6f
Resim/Simge Yerleşimi: Sol
Başlık Yazı Tipi: Arşiv Dar
Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Yazı Tipi Stili: TT
Başlık Metin Boyutu: 24px
Başlık Metin Rengi: #187d6f
Başlık Satırı Yüksekliği: 1.4em

Başlık rengini simge rengiyle eşleştirdiğime ve aynı rengin yukarıdaki daire sayaçlarından birinin rengine karşılık geldiğine dikkat edin.

İpucu: Başlığımı soldaki simgeyle hizalanacak şekilde dikey olarak ortalamak için Başlık satırı yüksekliğini kullandım. Gelecekte bunu yaparken bunu aklınızda bulundurun.

Özel Kenar Boşluğu: %37 Sol

Tanıtım yazısıma sol kenar boşluğu vermek, onu daire sayaçlarının altına yerleştirmenize olanak tanır.

İkinci Renkli Etiketi Ekleyin

İkinci renkli etiketi oluşturmak için, az önce oluşturduğunuz etiketi çoğaltın ve aşağıdakileri güncelleyin:

Başlık: HTML/CSS
Simge Rengi: #06a08c
Başlık Metin Rengi: #06a08c

Üçüncü Renkli Etiketi Ekleyin

Üçüncü etiketi oluşturmak için, az önce oluşturduğunuz etiketi çoğaltın ve aşağıdakileri güncelleyin:

Başlık: WordPress
Simge Rengi: #eec42d
Başlık Metin Rengi: #eec42d

Dördüncü Renkli Etiketi Ekleyin

Dördüncü etiketi oluşturmak için, az önce oluşturduğunuz etiketi çoğaltın ve aşağıdakileri güncelleyin:

Başlık: WordPress
Simge Rengi: #3d394b
Başlık Metin Rengi: #3d394b

Değişikliklerinizi kaydedin.

Bölümünüze Bölücü Ekleyin

Son bir dokunuş olarak, bölüm ayarlarınıza geri dönün ve aşağıdaki gibi bir arka plan dokusu eklemek için bir ayırıcı ekleyin:

Bölücü: Üst
Bölücü Stili: ekran görüntüsüne bakın
Bölücü Rengi: rgba(6,160,140,0,08)
Bölücü Yüksekliği: 1100px

Bu kadar.

İşte nihai sonuç.

toparlamak

Tasarımınız tamamlandıktan sonra tek yapmanız gereken geri dönüp simgelerinizi, içeriğinizi, becerilerinizi vb. ihtiyaçlarınıza göre güncellemektir ve artık hazırsınız. Simgeleri kendi simgeleriniz/resimlerinizle değiştirmeniz gerekirse, çekinmeyin. Bu düzene uymaları için 40 piksele 40 piksel olduklarından emin olun.

Umarım bu iş deneyimi bölümü, bir serbest çalışan olarak öne çıkmanıza yardımcı olur. Ve bu düzenin diğer kullanım durumları için iyi çalışacağını hayal ediyorum. Örneğin, bir hakkında sayfasında şirket geçmişinizi göstermek için bu zaman çizelgesi düzenini kullanabilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!