Divi dönüşüm seçenekleriyle yapılan boş zaman çizgisini indirin
İçerik düzenlemesi açısından, bir zaman çizgisi yapmak, bilgileri ziyaretçileriniz için ilginç ve çekici tutmanın iyi bir yoludur. Ayrıca okudukları bilgileri daha hızlı gezdirmelerine ve işlemelerine yardımcı olur. İyi bir tasarım kullandığınızda, genel sayfanızın görünümünü ve hissini de artırır. Bu yazıda, Divi Dönüşüm seçeneğiyle zaman çizelgesinin inanılmaz bir bölümünü nasıl oluşturacağınızı göstereceğiz. Yeniden yaratacağımız tasarım daha küçük ekran boyutlarında duyarlı kalacaktır. Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Masaüstü
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Yaratıcı başlayalım!
YouTube kanalına abone olun Yeni bir sayfa için mesafenin yeni bir bölümünü ekliyoruz veya mevcut bölümünü açıyoruz ve normal bölümü ekliyoruz. Bölüm ayarlarını açın, mesafe ayarlarını açın ve bazı özel üst ve alt yatak ekleyin.
Üst Dolgu: 12VW
Dolgu Alt: 0VW
Aşağıdaki sütun yapısını kullanarak bölüme yeni satırlar ekleyerek 1 numaralı Sütun Yapısı Ekle: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın. Tasarım sekmesindeki boyut ayarlarını açın ve hattın tüm ekran genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Bir sonraki adımda illüstrasyon eklemek için bu görünürlük çizgisini kullanacağız. Sadece masaüstü için bu illüstrasyona ihtiyacımız var. Bu yüzden tablet ve cep telefonlarındaki tüm çizgileri gizleyeceğiz. Resim Yükle Görüntü Yükleme Modülünü ekleyin Bu yazının önceki adımında belirtildiği gibi, bu satıra ihtiyacımızın tek nedeni zaman çizelgesi çizimleri eklemektir. Bu yazının başında indirdiğiniz klasörde bulabilirsiniz. Bulduktan sonra yeni görüntü modülüne yükleyin. Yapıştırıcı Her şeyin tüm ekran boyutlarında duyarlı kalmasını sağlamak için, görüntü modülünün boyut ayarlarında ‘zorla tam genişlik’ seçeneğini etkinleştireceğiz. Tam geniş zorla: Evet
Sıra #2 sütun yapısı ekle Aşağıdaki sütun yapısını kullanarak bölüme ikinci satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın ekranın tüm genişliğini karşılamasına izin verin. Özel Talang’ın genişliğini kullanın: Evet Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Mesafe o zaman, uzay ayarlarına gidin. Burada, tüm özel üst ve alt yatakları kaldırarak satırlar (masaüstünde) tarafından kullanılan alanı sınırlamak istiyoruz. Daha küçük ekran boyutlarında birkaç üst ve alt ped tutuyoruz.
Üst Pilding: 0px (masaüstü), 15VW (tablet ve cep telefonu) Aşağıda dolgu: 0px (masaüstü), 15VW (tablet ve cep telefonu)
Blurb modülünü sütun 1’e ekleyin. Blurb modülünü sütun 1’e ekleyin. İstediğiniz içeriklerden bazılarını girin.
İstediğiniz simgeyi seçerek simgeyi seçin. Gradyan Arka Plan, gradyanın arka planını da ekleyin. Renk 1: #A5C4FF Renk 2: #ffffff
Başlangıç Pozisyonu:% 40
Son pozisyon:% 40
Simge ayarları daha sonra tasarım sekmesini açın ve simge ayarlarını değiştirin.
Ikon Color: #ffffff Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 5VW (masaüstü), 17VW (tablet), 18VW (Telefon)
Başlık Metin Ayarları Başlık metin ayarlarına geçin ve uygun seçeneği değiştirin:
Yazı tipi başlığı: Didact Gothic Ağır yazı tipi başlığı: kalın
Hizalama Metin Başlığı: Orta
Boyut Metin Başlığı: 1.1VW (masaüstü), 2.7vw (tablet), 4VW (Telefon)
Hat yüksekliği başlığı: 2.8em
Gövde metni ayarları içerik metin ayarları için aynı şeyi yapar.
Gövde yazı tipi: açık sans Vücut metninin hizalanması: orta
Gövde metni boyutu: 0.7vw (masaüstü), 1.5vw (tablet), 2.1vw (cep telefonu)
Vücut çizgisinin yüksekliği: 2em
Mesafemiz ayrıca farklı ekran boyutlarına göre ayarlayacağımız bazı özel marj ve dolgu değerleri ekler.
Sol kenar boşluğu: 3VW Sağ kenar boşluğu: 3vwmargin aşağıda: 5VW (tablet), 7vw (telefon)
Üst Dolgu: 2VW (masaüstü), 6VW (tablet ve cep telefonu)
Aşağıda dolgu: 2VW (masaüstü), 6VW (tablet ve cep telefonu)
Sol dolgu: 3VW (masaüstü), 9vw (tablet ve cep telefonu)
Sağ dolgu: 3VW (masaüstü), 9vw (tablet ve cep telefonu)
Sınır ayarlarına taşınır ve her köşeye ’20px’ ekler.
Son fakat en az değil kutunun gölgesi, bulanıklık modülüne pürüzsüz bir kutu gölgesi ekleyerek sayfada biraz derinlik oluşturun.
Bulanık Güç Gölgesi Kutusu: 80px Gölge Rengi: RGBA (0.0,0,0.1) Klon Blurb Modülünü Üç Kez ve Yerleştirme Çoğaltma Blurb modülünü yapmayı ve ayarlamayı bitirdikten sonra üç kez klonlayabilirsiniz. Kalan satır sütununa kopya yerleştirin.
Yinelenen gradyanın arka planını değiştirin #1 İlk kopyayı açın (sütun 2’deki bulanıklık modülü) ve ilk rengi degradenin arka planından değiştirin.
Renk 1: #FFA5AE Yinelenen gradyanın arka planını değiştir #2 Sütun 3’teki bulanıklık modülü için de aynısını yapın. Renk 1: #F7E3A0
Yinelenen gradyan #3’ün arka planını değiştirin ve ayrıca son bulanıklık modülü gradyanının arka planını değiştirin. Renk 1: #CAA5FF
Dönüşüm ayarlarını bulanıklık modülüne ekleyin, Blurb #1 Modülüne tercüme etmek için dönüşüm ekleyin Şimdi ihtiyacımız olan tüm tasarım öğelerine sahibiz, konumunu değiştirmeye başlayabiliriz! Bunu yapmak için çeviri değiştirme seçeneğini kullanacağız. Sütun 1’deki bulanıklık modülünü açın ve değeri buna göre değiştirin: Aşağıda: 2VW (masaüstü), 0VW (tablet ve cep telefonu)
Sağ: -106vw (masaüstü), 0vw (tablet ve cep telefonu) Bulanık Modül #2’ye dönüşmek için dönüşüm ekleyin #2 İkinci Blurb modülüne geçin ve uygun Dönüşüm Çeviri değerini değiştirin:
Aşağıda: 16.6vw (alt), 0VW (Tablet ve Cep Telefonu) Sağ: -78VW (sağ), 0vw (tablet ve cep telefonu)
Blurb Modülüne Çevirmek İçin Dönüşüm Ekle #3 Sonraki 3 sütunda Blurb Modülünü açın ve aşağıdaki Dönüşüm Dönüşümü değerini kullanın: Aşağıda: 17VW (masaüstü), 0vw (tablet ve cep telefonu)
Sağ: -46vw (masaüstü), 0vw (tablet ve cep telefonu)
Aşağıdaki değerleri kullanarak Blurb Modülüne Çeviri #4 Son Blurb modülü için aynısını yapın: Aşağıda: -66vw (masaüstü), 0vw (tablet ve cep telefonu)
Sağ: -24vw (masaüstü), 0vw (tablet ve cep telefonu)
Dönüşüm seçeneğini kullanarak Sıra 2’ye negatif bir alt kenar ekleyin. Bu alanı ortadan kaldırmak için satıra ve bitişe bazı olumsuz marjlar ekleyebiliriz! Alt marj: -15vw (masaüstü), 0vw (tablet ve telefon)
Önizleme Şimdi tüm adımlardan geçtik, sonuçlara bakalım. Masaüstü
Hücresel Bu yazıdaki son zihin, yeni Divi Dönüşüm seçeneğini kullanarak nasıl güzel bir zaman çizelgesi oluşturacağınızı gösterdik. Öğreticinin başında, JSON dosyalarını ve illüstrasyonlarını ücretsiz olarak indirebilirsiniz! Bu hemen başlamanıza yardımcı olacaktır. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! Yaratıcı başlayalım!
YouTube kanalına abone olun Yeni bir sayfa için mesafenin yeni bir bölümünü ekliyoruz veya mevcut bölümünü açıyoruz ve normal bölümü ekliyoruz. Bölüm ayarlarını açın, mesafe ayarlarını açın ve bazı özel üst ve alt yatak ekleyin.
Üst Dolgu: 12VW
Dolgu Alt: 0VW
Aşağıdaki sütun yapısını kullanarak bölüme yeni satırlar ekleyerek 1 numaralı Sütun Yapısı Ekle: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın. Tasarım sekmesindeki boyut ayarlarını açın ve hattın tüm ekran genişliğini karşılamasına izin verin. Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Bir sonraki adımda illüstrasyon eklemek için bu görünürlük çizgisini kullanacağız. Sadece masaüstü için bu illüstrasyona ihtiyacımız var. Bu yüzden tablet ve cep telefonlarındaki tüm çizgileri gizleyeceğiz. Resim Yükle Görüntü Yükleme Modülünü ekleyin Bu yazının önceki adımında belirtildiği gibi, bu satıra ihtiyacımızın tek nedeni zaman çizelgesi çizimleri eklemektir. Bu yazının başında indirdiğiniz klasörde bulabilirsiniz. Bulduktan sonra yeni görüntü modülüne yükleyin. Yapıştırıcı Her şeyin tüm ekran boyutlarında duyarlı kalmasını sağlamak için, görüntü modülünün boyut ayarlarında ‘zorla tam genişlik’ seçeneğini etkinleştireceğiz. Tam geniş zorla: Evet
Sıra #2 sütun yapısı ekle Aşağıdaki sütun yapısını kullanarak bölüme ikinci satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve satırın ekranın tüm genişliğini karşılamasına izin verin. Özel Talang’ın genişliğini kullanın: Evet Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Mesafe o zaman, uzay ayarlarına gidin. Burada, tüm özel üst ve alt yatakları kaldırarak satırlar (masaüstünde) tarafından kullanılan alanı sınırlamak istiyoruz. Daha küçük ekran boyutlarında birkaç üst ve alt ped tutuyoruz.
Üst Pilding: 0px (masaüstü), 15VW (tablet ve cep telefonu) Aşağıda dolgu: 0px (masaüstü), 15VW (tablet ve cep telefonu)
Blurb modülünü sütun 1’e ekleyin. Blurb modülünü sütun 1’e ekleyin. İstediğiniz içeriklerden bazılarını girin.
İstediğiniz simgeyi seçerek simgeyi seçin. Gradyan Arka Plan, gradyanın arka planını da ekleyin. Renk 1: #A5C4FF Renk 2: #ffffff
Başlangıç Pozisyonu:% 40
Son pozisyon:% 40
Simge ayarları daha sonra tasarım sekmesini açın ve simge ayarlarını değiştirin.
Ikon Color: #ffffff Simge Yerleştirme: Üst
Simge yazı tipi boyutu kullanın: evet
Yazı tipi boyutu simgesi: 5VW (masaüstü), 17VW (tablet), 18VW (Telefon)
Başlık Metin Ayarları Başlık metin ayarlarına geçin ve uygun seçeneği değiştirin:
Yazı tipi başlığı: Didact Gothic Ağır yazı tipi başlığı: kalın
Hizalama Metin Başlığı: Orta
Boyut Metin Başlığı: 1.1VW (masaüstü), 2.7vw (tablet), 4VW (Telefon)
Hat yüksekliği başlığı: 2.8em
Gövde metni ayarları içerik metin ayarları için aynı şeyi yapar.
Gövde yazı tipi: açık sans Vücut metninin hizalanması: orta
Gövde metni boyutu: 0.7vw (masaüstü), 1.5vw (tablet), 2.1vw (cep telefonu)
Vücut çizgisinin yüksekliği: 2em
Mesafemiz ayrıca farklı ekran boyutlarına göre ayarlayacağımız bazı özel marj ve dolgu değerleri ekler.
Sol kenar boşluğu: 3VW Sağ kenar boşluğu: 3vwmargin aşağıda: 5VW (tablet), 7vw (telefon)
Üst Dolgu: 2VW (masaüstü), 6VW (tablet ve cep telefonu)
Aşağıda dolgu: 2VW (masaüstü), 6VW (tablet ve cep telefonu)
Sol dolgu: 3VW (masaüstü), 9vw (tablet ve cep telefonu)
Sağ dolgu: 3VW (masaüstü), 9vw (tablet ve cep telefonu)
Sınır ayarlarına taşınır ve her köşeye ’20px’ ekler.
Son fakat en az değil kutunun gölgesi, bulanıklık modülüne pürüzsüz bir kutu gölgesi ekleyerek sayfada biraz derinlik oluşturun.
Bulanık Güç Gölgesi Kutusu: 80px Gölge Rengi: RGBA (0.0,0,0.1) Klon Blurb Modülünü Üç Kez ve Yerleştirme Çoğaltma Blurb modülünü yapmayı ve ayarlamayı bitirdikten sonra üç kez klonlayabilirsiniz. Kalan satır sütununa kopya yerleştirin.
Yinelenen gradyanın arka planını değiştirin #1 İlk kopyayı açın (sütun 2’deki bulanıklık modülü) ve ilk rengi degradenin arka planından değiştirin.
Renk 1: #FFA5AE Yinelenen gradyanın arka planını değiştir #2 Sütun 3’teki bulanıklık modülü için de aynısını yapın. Renk 1: #F7E3A0
Yinelenen gradyan #3’ün arka planını değiştirin ve ayrıca son bulanıklık modülü gradyanının arka planını değiştirin. Renk 1: #CAA5FF
Dönüşüm ayarlarını bulanıklık modülüne ekleyin, Blurb #1 Modülüne tercüme etmek için dönüşüm ekleyin Şimdi ihtiyacımız olan tüm tasarım öğelerine sahibiz, konumunu değiştirmeye başlayabiliriz! Bunu yapmak için çeviri değiştirme seçeneğini kullanacağız. Sütun 1’deki bulanıklık modülünü açın ve değeri buna göre değiştirin: Aşağıda: 2VW (masaüstü), 0VW (tablet ve cep telefonu)
Sağ: -106vw (masaüstü), 0vw (tablet ve cep telefonu) Bulanık Modül #2’ye dönüşmek için dönüşüm ekleyin #2 İkinci Blurb modülüne geçin ve uygun Dönüşüm Çeviri değerini değiştirin:
Aşağıda: 16.6vw (alt), 0VW (Tablet ve Cep Telefonu) Sağ: -78VW (sağ), 0vw (tablet ve cep telefonu)
Blurb Modülüne Çevirmek İçin Dönüşüm Ekle #3 Sonraki 3 sütunda Blurb Modülünü açın ve aşağıdaki Dönüşüm Dönüşümü değerini kullanın: Aşağıda: 17VW (masaüstü), 0vw (tablet ve cep telefonu)
Sağ: -46vw (masaüstü), 0vw (tablet ve cep telefonu)
Aşağıdaki değerleri kullanarak Blurb Modülüne Çeviri #4 Son Blurb modülü için aynısını yapın: Aşağıda: -66vw (masaüstü), 0vw (tablet ve cep telefonu)
Sağ: -24vw (masaüstü), 0vw (tablet ve cep telefonu)
Dönüşüm seçeneğini kullanarak Sıra 2’ye negatif bir alt kenar ekleyin. Bu alanı ortadan kaldırmak için satıra ve bitişe bazı olumsuz marjlar ekleyebiliriz! Alt marj: -15vw (masaüstü), 0vw (tablet ve telefon)
Önizleme Şimdi tüm adımlardan geçtik, sonuçlara bakalım. Masaüstü
Hücresel Bu yazıdaki son zihin, yeni Divi Dönüşüm seçeneğini kullanarak nasıl güzel bir zaman çizelgesi oluşturacağınızı gösterdik. Öğreticinin başında, JSON dosyalarını ve illüstrasyonlarını ücretsiz olarak indirebilirsiniz! Bu hemen başlamanıza yardımcı olacaktır. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun.
