Divi ile yüzerken sayfalarınızı şekil değiştirerek dekore etmek
Etkileşimli bir tasarım yapmak, herhangi bir web sitesinin görünümünü ve hissini hemen geliştirmeye yardımcı olan bir şeydir. Varsayılan Divi seçeneği ile birçok dönüş yapabilir ve web sitenizde gerçekten benzersiz bir etki yaratabilirsiniz. Bu yazıda, yüzerken şekilleri değiştirerek sayfalarınızı nasıl dekore edeceğinizi göstereceğiz. Sonuçlar masaüstü deneyimine odaklanacağız, ancak yine de daha küçük ekran boyutlarında düzgün ve kullanıcı dostu bir tasarım sağlayacağız. Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, baştan yeniden yapacağımız iki örneğe bakalım.
örnek 1
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! Yeni bir sayfa oluşturarak veya mevcut olanı açarak Stary arka plan renginin yeni bir bölümünü ekleyin. Her zamanki parçayı ekleyin, parçanın ayarlarını açın ve tamamen siyah olan arka plan rengini ekleyin.
Arka plan rengi: #000000
Bu öğreticide formdaki kaplama görüntülerini keserek, bölümün ana öğesine bir satır CSS kodu ekleyerek kabı aşan hiçbir şey olmadığından emin olacağız. Taşma: gizli; Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir 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. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Modül eklemeye başlamak için görüntü modülünü görüntünün şeklinin yükleme satırına ekleyin! İhtiyacımız olan ilk modül bir görüntü modülü. İndirdiğiniz klasörde bulabileceğiniz ilk resim biçimini yükleyin. Bu yayını açarak, dosyaları indirerek, bir illüstratör dosyası açarak ve ihtiyaçlarınıza göre ayarlayarak daha fazla görüntü bulabilirsiniz. Ancak, yalnızca bu yayının önizlemesinde paylaşılan bir örneği yeniden oluşturmak istiyorsanız, bu yayının başında indirdiğiniz klasör kullanılabilir. Varsayılanın arka plan rengi görüntü modülünün arka plan ayarlarını açın ve aşağıdaki varsayılan arka plan rengini ekleyin: Arka plan rengi: #6A00FF
Arka plan rengini, aşağıdaki renk kodu kullanarak yüzerken arka plan rengini değiştirin: Arka plan rengi: #ffa216 Gradyan Arka Plan, gradyanın arka planını görüntü modülüne ekleyerek devam edin.
Renk 1: #FF2841 Renk 2: RGBA (255,255,255.0)
Gradyan yönü: 168deg
Son pozisyon:% 68
Yapıştırıcı tasarım sekmesine geçti ve ‘Force Fullwidth’ seçeneğini etkinleştirdi.
Tam geniş zorla: Evet Mesafemiz ayrıca, boşluk ayarlarına bazı negatif üst kenarlar ekleyerek şekillenen görüntülerin genişliğinin kısımlarını gizler. Eğiticinin başlangıcındaki bölüme eklediğimiz bir CSS kodu satırı sayesinde modülün kabı aşmayacağını göreceksiniz.
Üst kenar: -22vw (masaüstü ve tablet), 0vw (telefon) Varsayılan dönüşümü oynat şimdi modülü değiştirmeye başlayabiliriz! Görüntü modülüne aşağıdaki varsayılan dönüşüm ayarlarını ekleyin:
Merkez: 359 derece Dönüşümde gezinin ve imleci bir dönüşüm formu yapmaya yönlendirirken bu değerleri değiştirin.
Sol: 250 derece Merkez: 320deg
ID CSS Görüntü modülünü yönlendirirken, görüntünün şekli üzerindeki diğer tüm modüllerle örtüşecektir. Bundan kaçınmak için, imleci daha sonra yazıya yönlendirirken modül dizinini değiştirmemiz gerekir. Bunu başarmak için görüntü modülüne özel bir CSS sınıfı eklemelisiniz.
Son fakat en az değil, gelişmiş sekmedeki geçiş süresini artırarak sorunsuz bir geçiş yaparız.
H2 Metin Ayarları Ardından, Tasarım sekmesini açın ve H2 metin ayarlarını değiştirin. Başlık 2 Yazı Tipi: Didact Gotik Başlık 2 Ağırlık Yazı Tipi: Kalınlık Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #ffffff
Başlık 2 Metin Boyutu: 7VW
Post 2 satır yükseklik: 0.9em
Bu modül ve görüntü modülü arasındaki örtüşme mesafesi birkaç özel marj değeri kullanır.
Üst Marj: -68VW
Alt marj: 8vw Sol kenar boşluğu: 29vw
Doğru marj: 29vw
#2 metin modülünü satıra ekleyin Dolgu ekleyin, bir öncekinin hemen altına başka bir metin modülü ekleyin ve seçeneğiniz paragraf içeriğini girin.
Metin Ayarları Ardından, Tasarım sekmesini açın ve metin ayarlarını değiştirin.
Metin yazı tipi: SANS’ı aç Metin rengi: #ffffff Metin Boyutu: 1VW (masaüstü), 2VW (tablet), 3VW (telefon)
Yüksek çizgi metin: 1.8em
Metin Oryantasyonu: Orta
Mesafe Bazı özel marj değerleri de ekleyin.
Alt kenar boşluğu: 2VW (masaüstü), 4VW (tablet), 6VW (Telefon)
Sol kenar boşluğu: 30VW (masaüstü), 10vw (tablet ve cep telefonu) Sağ kenar boşluğu: 30VW (masaüstü), 10vw (tablet ve cep telefonu)
Bölücü modülünü bir sonrakine ekleyin ve son olarak ihtiyacımız olan görünürlük hatları bölücü modülüdür. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
O zaman renk tasarım sekmesini açın ve bölücünün rengini değiştirin. Renk: #ffffff
Yapıştırıcı değişim de boyut değeri. Bölücü ağırlığı: 7px
Genişlik:% 15 Modül hizalaması: merkez
Mesafe ve bazı özel alt pedler ekleyin.
Alt marj: 5VW
Tüm parçaları ikinci örneğe klonlayın! Yeni bitirdiğiniz kısmı klonlamak. Görüntü Yükleme Modülünü Değiştirin Yeni Görüntülerin Genişletme Modülünü Değiştirin, şekilli görüntüyü kaplamadan başlayarak yapmamız gereken bazı değişiklikler vardır. Lütfen ve bu yazının başında indirdiğiniz klasörde bulabileceğiniz ikinci şekilli görüntüyü yükleyin.
Varsayılanın arka plan rengini değiştirin, ardından görüntü modülünün arka plan ayarlarını açın ve varsayılanın arka plan rengini değiştirin. Arka plan rengi: #2D007C Arka plan rengini değiştirin, imlecin gelin arka plan rengini de değiştirin. Arka plan rengi: #008089 Gradyanın arka planını degradenin arka planı ile değiştirin.
Renk 1: #0C0C0C Renk 2: RGBA (255,255,255.0)
Gradyan yönü: 168deg Son pozisyon:% 68
Savunma Dönüşüm Döndürme Ayarlarımızı Değiştirin Dönüşümün etkisini de değiştiriyoruz. Dönüşüm ayarlarını açın ve varsayılan dönüşüm dönüş değerini değiştirin.
Sol: 270 derece
Merkez: 359 derece
Doğrudan Dönüşümü Değiştir İmleciyi yönlendirirken aynı değeri değiştirin. Sol: 192 derece
Merkez: 280deg
Doğru: 15 derece Sayfa Açma Sayfasının geçerli sayfasına özel bir kod ekleyin, bu yayının son kısmı, Dönüşüm Formunun toprağa girerken diğer tüm modüllerin altında kalmasını sağlar. Sayfa ayarlarını açın.
CSS kodunu ekleyin, ardından Gelişmiş sekmesine gidin ve aşağıdaki CSS kodunu ekleyin. .Hover-State: Hover {
Z -Index: -99; } Öğretici boyunca bölüme ayarladığımız CSS sınıfını kullanıyoruz.
Önizleme Şimdi tüm adımlardan geçtik, sonuçlara bakalım. örnek 1 Örnek #2 Bu yazıdaki son zihin, Divi Dönüşüm seçeneğiyle nasıl yaratıcı olacağınızı gösterdik. Daha spesifik olarak, değişen bir arka plan şekli yapmak için bir görüntü şeklinde bir görüntü modülü kullandık. 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! Yeni bir sayfa oluşturarak veya mevcut olanı açarak Stary arka plan renginin yeni bir bölümünü ekleyin. Her zamanki parçayı ekleyin, parçanın ayarlarını açın ve tamamen siyah olan arka plan rengini ekleyin.
Arka plan rengi: #000000
Bu öğreticide formdaki kaplama görüntülerini keserek, bölümün ana öğesine bir satır CSS kodu ekleyerek kabı aşan hiçbir şey olmadığından emin olacağız. Taşma: gizli; Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir 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. Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Modül eklemeye başlamak için görüntü modülünü görüntünün şeklinin yükleme satırına ekleyin! İhtiyacımız olan ilk modül bir görüntü modülü. İndirdiğiniz klasörde bulabileceğiniz ilk resim biçimini yükleyin. Bu yayını açarak, dosyaları indirerek, bir illüstratör dosyası açarak ve ihtiyaçlarınıza göre ayarlayarak daha fazla görüntü bulabilirsiniz. Ancak, yalnızca bu yayının önizlemesinde paylaşılan bir örneği yeniden oluşturmak istiyorsanız, bu yayının başında indirdiğiniz klasör kullanılabilir. Varsayılanın arka plan rengi görüntü modülünün arka plan ayarlarını açın ve aşağıdaki varsayılan arka plan rengini ekleyin: Arka plan rengi: #6A00FF
Arka plan rengini, aşağıdaki renk kodu kullanarak yüzerken arka plan rengini değiştirin: Arka plan rengi: #ffa216 Gradyan Arka Plan, gradyanın arka planını görüntü modülüne ekleyerek devam edin.
Renk 1: #FF2841 Renk 2: RGBA (255,255,255.0)
Gradyan yönü: 168deg
Son pozisyon:% 68
Yapıştırıcı tasarım sekmesine geçti ve ‘Force Fullwidth’ seçeneğini etkinleştirdi.
Tam geniş zorla: Evet Mesafemiz ayrıca, boşluk ayarlarına bazı negatif üst kenarlar ekleyerek şekillenen görüntülerin genişliğinin kısımlarını gizler. Eğiticinin başlangıcındaki bölüme eklediğimiz bir CSS kodu satırı sayesinde modülün kabı aşmayacağını göreceksiniz.
Üst kenar: -22vw (masaüstü ve tablet), 0vw (telefon) Varsayılan dönüşümü oynat şimdi modülü değiştirmeye başlayabiliriz! Görüntü modülüne aşağıdaki varsayılan dönüşüm ayarlarını ekleyin:
Merkez: 359 derece Dönüşümde gezinin ve imleci bir dönüşüm formu yapmaya yönlendirirken bu değerleri değiştirin.
Sol: 250 derece Merkez: 320deg
ID CSS Görüntü modülünü yönlendirirken, görüntünün şekli üzerindeki diğer tüm modüllerle örtüşecektir. Bundan kaçınmak için, imleci daha sonra yazıya yönlendirirken modül dizinini değiştirmemiz gerekir. Bunu başarmak için görüntü modülüne özel bir CSS sınıfı eklemelisiniz.
Son fakat en az değil, gelişmiş sekmedeki geçiş süresini artırarak sorunsuz bir geçiş yaparız.
Geçiş süresi: 950ms
1 numaralı metin modülünü satıra ekleyin İhtiyacımız olan bir sonraki H2 içeriğini ekleyin Metin modülü. Seçtiğiniz bazı H2 içeriğini ekleyin.H2 Metin Ayarları Ardından, Tasarım sekmesini açın ve H2 metin ayarlarını değiştirin. Başlık 2 Yazı Tipi: Didact Gotik Başlık 2 Ağırlık Yazı Tipi: Kalınlık Başlık 2 Metin Seviyesi: Orta
Başlık 2 Renk Metni: #ffffff
Başlık 2 Metin Boyutu: 7VW
Post 2 satır yükseklik: 0.9em
Bu modül ve görüntü modülü arasındaki örtüşme mesafesi birkaç özel marj değeri kullanır.
Üst Marj: -68VW
Alt marj: 8vw Sol kenar boşluğu: 29vw
Doğru marj: 29vw
#2 metin modülünü satıra ekleyin Dolgu ekleyin, bir öncekinin hemen altına başka bir metin modülü ekleyin ve seçeneğiniz paragraf içeriğini girin.
Metin Ayarları Ardından, Tasarım sekmesini açın ve metin ayarlarını değiştirin.
Metin yazı tipi: SANS’ı aç Metin rengi: #ffffff Metin Boyutu: 1VW (masaüstü), 2VW (tablet), 3VW (telefon)
Yüksek çizgi metin: 1.8em
Metin Oryantasyonu: Orta
Mesafe Bazı özel marj değerleri de ekleyin.
Alt kenar boşluğu: 2VW (masaüstü), 4VW (tablet), 6VW (Telefon)
Sol kenar boşluğu: 30VW (masaüstü), 10vw (tablet ve cep telefonu) Sağ kenar boşluğu: 30VW (masaüstü), 10vw (tablet ve cep telefonu)
Bölücü modülünü bir sonrakine ekleyin ve son olarak ihtiyacımız olan görünürlük hatları bölücü modülüdür. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.
Divisor göster: evet
O zaman renk tasarım sekmesini açın ve bölücünün rengini değiştirin. Renk: #ffffff
Yapıştırıcı değişim de boyut değeri. Bölücü ağırlığı: 7px
Genişlik:% 15 Modül hizalaması: merkez
Mesafe ve bazı özel alt pedler ekleyin.
Alt marj: 5VW
Tüm parçaları ikinci örneğe klonlayın! Yeni bitirdiğiniz kısmı klonlamak. Görüntü Yükleme Modülünü Değiştirin Yeni Görüntülerin Genişletme Modülünü Değiştirin, şekilli görüntüyü kaplamadan başlayarak yapmamız gereken bazı değişiklikler vardır. Lütfen ve bu yazının başında indirdiğiniz klasörde bulabileceğiniz ikinci şekilli görüntüyü yükleyin.
Varsayılanın arka plan rengini değiştirin, ardından görüntü modülünün arka plan ayarlarını açın ve varsayılanın arka plan rengini değiştirin. Arka plan rengi: #2D007C Arka plan rengini değiştirin, imlecin gelin arka plan rengini de değiştirin. Arka plan rengi: #008089 Gradyanın arka planını degradenin arka planı ile değiştirin.
Renk 1: #0C0C0C Renk 2: RGBA (255,255,255.0)
Gradyan yönü: 168deg Son pozisyon:% 68
Savunma Dönüşüm Döndürme Ayarlarımızı Değiştirin Dönüşümün etkisini de değiştiriyoruz. Dönüşüm ayarlarını açın ve varsayılan dönüşüm dönüş değerini değiştirin.
Sol: 270 derece
Merkez: 359 derece
Doğrudan Dönüşümü Değiştir İmleciyi yönlendirirken aynı değeri değiştirin. Sol: 192 derece
Merkez: 280deg
Doğru: 15 derece Sayfa Açma Sayfasının geçerli sayfasına özel bir kod ekleyin, bu yayının son kısmı, Dönüşüm Formunun toprağa girerken diğer tüm modüllerin altında kalmasını sağlar. Sayfa ayarlarını açın.
CSS kodunu ekleyin, ardından Gelişmiş sekmesine gidin ve aşağıdaki CSS kodunu ekleyin. .Hover-State: Hover {
Z -Index: -99; } Öğretici boyunca bölüme ayarladığımız CSS sınıfını kullanıyoruz.
Önizleme Şimdi tüm adımlardan geçtik, sonuçlara bakalım. örnek 1 Örnek #2 Bu yazıdaki son zihin, Divi Dönüşüm seçeneğiyle nasıl yaratıcı olacağınızı gösterdik. Daha spesifik olarak, değişen bir arka plan şekli yapmak için bir görüntü şeklinde bir görüntü modülü kullandık. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
