Freelancer siteniz için divi ile önde gelen bir iş deneyimi nasıl tasarlanır?
İş deneyimi ve çevrimiçi beceriler sergilemek, kendinizi serbest çalışan olarak ayırt etmenin iyi bir yoludur. Divi ile, çalışma geçmişinizi temiz ve profesyonel bir şekilde göstermek için benzersiz bir zaman çizgisi yapabilirsiniz. Ve, Divi Circle sayma modülü ile biraz yaratıcı ile, uzmanlığınızı vurgulamak için animasyonlu infographics de ekleyebilirsiniz. Bu öğreticide, web siteniz için deneyim ve iş becerilerinin önemli bir parçası tasarlamak için Divi Builder’ı nasıl kullanabileceğinizi göstereceğim. Başlayalım.
Aşağıdaki Sneak Peek, bu öğreticide ne yapacağımızın bir önizlemesidir.
İşte benim
Eğitim, iş deneyimi ve bazı beceriler
Öldürücü tortor risus. Curabitur non nulla oturma amet nisl tempus convallis quis ac lectus. Facibus orci luctus et ultrices posuere cubilia curae’de vestibulum ante iPsum primis; Donec velit neque, auctor oturma amet aliquam vel, ullamcorper oturma amet ligula. Vestibulum ac sessiz oturma amet quam araç elementum sed oturma amet dui. Donec Rutrum Congue Leo Eget Malesada.
Metin modülünüz için tasarım sekmesi ayarlarını şu şekilde güncelleyin:
Metin Yazı Tipi: Sour Sans Pro Metin Boyutu: 16px
Şimdi ek zaman çizelgesi içeriğimizi oluşturmak için açıklama modülümüzü çoğaltmaya hazırız. İlk sütunda toplam 4 bulanık modül yapmak için bulanıklık modülünü üç kez çoğaltın. Ardından aynı açıklama modülünü kopyalayın ve ikinci sütuna yapıştırın. Ardından, ikinci sütunda geçerli modül için sağ sınırı çıkarın. Şimdi ikinci sütunda açıklamanın toplam üç modülü yapmak için açıklama modülünü iki kez çoğaltın. İlk sütundaki son iki açıklamanın doğru sınırını ortadan kaldırarak ikinci sütun açıklaması altındaki ekstra çizgi boşluğunu ortadan kaldırmamız gerekir. Bunu yapmak için, ilk sütundaki son iki modülü aşağıdakilerle güncelleyin: Sağ Sınır Genişliği: 0PX Şimdi, ilk satırda açıklama simgesini eklemek için satırımıza sol limiti eklememiz gerekiyor. Bunu yapmak için, çizgi ayarlarını aşağıdaki gibi güncelleyin: Sınır kuvveti: Sol sınır sol sınır sol sınır: 2px sol sınır rengi: #06A08 Şimdi küçük bir satır alanı güncelleyin. Pilding Custom: Top 28px’de, 0px’in altında, simgemiz satırımızın sol sınırına uzandığından, kalan simgelerin görünür olduğundan emin olmak için özel bir CSS hattı eklememiz gerekir. Bunu yapmak için, satır ayarlarının devam eden sekmesini açın ve ana öğe kutusunun altına aşağıdakileri girin: Overflow: Görünür; İlk sütundaki son açıklamanın yanındaki sol sınır çizgisini gizlemek için, modülüne beyaz arka plan renginin açıklamasını vermemiz gerekir. Bu işlev görür, çünkü açıklama modülü sola -30 piksel bir marjla sola aktarıldığı için. Daire sayma modülü, bir sayfadaki becerilerinizin seviyesini tanımlamak için 4 farklı daire sayma modülü mesafesi vermek yerine infografik beceriler kazanmak için örtüşür, tek bir infografik yapmak için her daireden farklı boyutlar ve üst üste binen sayaçlar yapabilirsiniz. Doğuştan gelen animasyon ile gerçekten etkileyici bir örnek oluşturuyor. Bunu yapmak için ilk daire sayma modülünüzü ekleyin, önce dört daire sayma modülünün ilk modülünü oluşturmalıyız. Zaman çizelgemizin yanındaki satırımızın en sağındaki sütununu ilk ekleyelim. Daire sayma modülümüzü başkalarıyla kaplayacağımız için, değeri ilk göstermesini istemiyoruz. Ancak animasyonlu renk çubuğunu görüntülemek için değer değerini belirlemek istiyoruz. Daire sayma ayarlarını aşağıdaki gibi güncelleyin: Sayı: 60 İşaret Yüzde: Tasarım Sekmesi Altında Ölüm … Renk Arka Plan Kök: #06A08C Metin Renk: Işık (Bu metnimizi beyaz arka planda gizleyecektir) Genişlik: 350px modül hizalaması: 350 piksel genişliğin merkezi, infografik tasarımı tamamlamak için önceki modülün üzerine eklediğimiz her daire modülü ile kademeli olarak azalacaktır. Özel kenar: -2px sol (bu, cep telefonundaki daire modülünün yanında görünecek sol yeşil sınırı gizlemek için)
Çakışan bazı modüller yapacağımız için, sonraki üç daire modülü tamamlamak için çerçeve görüntüsünün görüntüsünü kullanın. Ardından, sıranın en sağ sütununda toplam dört daire sayma modülü olması için daire modülünü üç kez çoğaltın.
Şimdi tasarımı güncellememiz ve kalan resimleri tamamlamak için çoğaltılan üç dairesel sayma modülü yerleştirmemiz gerekiyor.İkinci daire sayımını tasarlayın ve yerleştirin İkinci daire sayımı için ayarları (orijinalin altında) aşağıdakilerle güncelleyin: Sayı: 80 Renk Arka Plan Kök: #187D6F Genişlik: 330px Bir daire sayısının genişliğini 20 pikselden azalttığım unutmayın. ilk.Bu şekilde daha büyük bir dairenin ortasına sığacaktır.Şimdi daire sayaçlarımızı negatif marjlarla ortaya çıkarmamız gerekiyor.Özel Marj: -338px Şimdilik ayarlarınızı kaydedin ve sayfalarınızı alın.Diğerinde doğru daireyi göreceksiniz. Bir sonraki daire sayımı ile bu sürece devam edin. Üçüncü Daire Sayısı Tasarım ve Yerleştirin Üçüncü Daire Sayısı için, Aşağıdaki Ayarları Güncelleyin: Numara: 70 Renk Arka Plan Kök: #EEC42D Genişlik: 310PX Dairenin genişliğini tekrar 20 piksel azalttığım unutmayın. Bu, üst üste binen daireler arasındaki mesafenin aynı mesafe olmasını sağlamaktır. Özel marj: -318 piksel Özel kenar boşluklarına dikkat etmek için, üst üste binen daireler arasındaki doğru dikey mesafeyi hesaplamak için 20 piksel azalttı. Dördüncü daire sayımı için dördüncü daire sayısını tasarlayın ve yerleştirin, aşağıdaki ayarları güncelleyin: Numara: 90 Renk Arka Plan Kök: #3D394B Mevcut dairenizin ortasına numarayı girmek isteyebilirsiniz. Eğer öyleyse, metnin rengini karanlık olarak güncelleyin. Metin Rengi: Aslında karanlık, dört daire sayımınızın sayılarından birini bu şekilde göstermeyi seçebilirsiniz. Çakışan bir numaraya ihtiyacınız olmayacak şekilde koyu bir metin rengine sahip olmak için yalnızca birini seçtiğinizden emin olun. Genişlik: 290 piksel Özel Marj: -298px üst, bu son daire modülü için 80 piksel dip, sadece negatif kenar boşluklarıyla ortaya çıkması gerekmiyor, aynı zamanda yapılan negatif alanı kullanmak için aşağıya bazı olumlu marjlar eklemek istiyoruz. Bu, daire modülünün altına koyduğunuz bir sonraki modülün doğru mesafeye sahip olmasını sağlayacaktır. Şimdi sonuçlara bakın. Becerilerinizi, çemberinizin rengiyle eşleşen renkli bir etiketle kaydedin, son adım sayarak, her bir daire sayısındaki her çubuk rengine uygun olarak hangi becerilerin olduğunu anlamaya yardımcı olmak için bir renk anahtarı yapmaktır. Özel bir liste öğesi yapmanın iyi bir yolu, açıklama modülü kullanmaktır. Çerçeve görüntü ekranından geçmeden önce, doğru sütundaki daire sayımınızın altına yeni bir açıklama modülü ekleyin. Ardından öğreticinin geri kalanını tamamlamak için masaüstü ekranını değiştirin. Modül Ayarlarını Güncelleyin Aşağıdaki için: Başlık: JavaScript Icon’u kullanın: Evet Icon: Tasarım sekmesinin altındaki Persegidy simgesini seçin … Renk simgesi: #187d6f Görüntünün Yerleştirilmesi/Ikon: Sol Yazı Tipi Başlık: Archivo Dar Heavy Yazı Tipi Başlık: Kalın Yazı Tipi Başlık Tarzı: TT Boyut Metin Başlık: 24px Renkli Metin Başlık: #187D6F Yüksek Satır Başlık: 1.4EM Başlığın rengini simgenin rengiyle eşleştirdiğimi ve aynı rengi NOT NOT Yukarıdaki daireler. İpucu: Başlığımı dikey olarak odaklamak için başlık çizgisinin yüksekliğini kullanıyorum, böylece soldaki simgeye paralel olacak. Bunu gelecekte yaparken bunu hatırlayın. Özel Marj:% 37 Sol, açıklamamın sol marjı, daire sayısının altına yerleştirmenizi sağlar. İkinci renkli bir etiket oluşturmak için ikinci renkli bir etiket ekleyin, yeni oluşturduğunuz ve güncellediğiniz etiketi çoğaltın: HTML/CSS Renk Icon: #06A08C Renk Metin Başlığı: #06A08C Üçüncü renkli etiketi ekleyin Üçüncü bir etiket oluşturmak için, yeni oluşturduğunuz ve güncellediğiniz etiketi çoğaltın: Başlık: WordPress Renk Icon: #EEC42D Renk Metin Başlığı: #EEC42D Dördüncü etiketi oluşturmak için dördüncü renkli etiketi ekleyin, yeni oluşturduğunuz etiketi çoğaltın: Başlık: WordPress Renk Icon: #3D394B Renk Metin Başlığı: #3D394BSIPAN DEĞİŞİKLİKLERİNİZ. Bölümünüze son dokunuş olarak bölücüyü ekleyin, parçanızın ayarlarına geri dönün ve aşağıdaki gibi arka plan dokusu eklemek için bölücüyü ekleyin: Bölücü: Bölme Kuvvetinin Üstü: Bölücü renginin ekran görüntüsüne bakın: RGBA (6,160,140.0. 08) Bölücü yüksekliği: 1100 piksel İşte burada. Sonuçlar aşağıdadır. Tasarımınız tamamlandıktan sonra sarma, tek yapmanız gereken simgeyi, içeriği, becerileri vb. Geri dönüp güncellemektir. İhtiyaçlarınıza uyacak şekilde ve hazırsınız. Simgeyi kendi simgeniz/resminizle değiştirmeniz gerekiyorsa, lütfen. Bu düzene uymak için boyutun 40 piksel 40 piksel olduğundan emin olun. Umarım iş deneyiminin bu kısmı serbest çalışan olarak öne çıkmanıza yardımcı olacaktır. Ve bu düzenin diğer kullanım durumları için iyi çalışacağını düşünüyorum. Örneğin, şirketinizin geçmişini sayfada görüntülemek için bu Time Line düzenini kullanabilirsiniz. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!