Çarpıcı Divi Bölünmüş Bölüm Tasarımında Görüntüler Arasında Nasıl Geçiş Yapılır

Yayınlanan: 2019-10-31

Etkileşimli tasarımlar herhangi bir web sitesini parlatabilir. Bu öğreticide, çarpıcı bir bölünmüş bölüm tasarımında görüntüler arasında nasıl geçiş yapacağınızı göstereceğiz. Bir görüntüyü gezdirirken diğerini örterken öne çıkar. Tasarımı yeniden oluşturmak için aşağıdaki adımları izleyin veya kayıt bağlantısı aracılığıyla JSON dosyasını indirin. Her sütunun arka plan renklerini kontrol edebilmek için şeffaf arka plana sahip resimler kullandığınızdan emin olun.

Hadi hadi bakalım!

Ön izleme

Farklı ekran boyutlarındaki tasarıma bir göz atalım.

masaüstü

Mobil

Geçiş Görüntü Tasarımını ÜCRETSİZ İndirin

Ellerinizi ücretsiz geçişli görüntü tasarımına koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Yeniden Oluşturmaya Başlayalım

Yeni Bölüm Ekle

aralık

Yeni bir sayfa oluşturun veya mevcut bir sayfayı açın. Normal bir bölüm ekleyin, bölüm ayarlarını açın ve tüm varsayılan üst ve alt dolguyu kaldırın.

Üst + Alt Dolgu: 0vw

görünürlük

Ardından, bölümün taşmalarını gizli olarak ayarlayın.

Yatay + Dikey Taşma: Gizli

Yeni Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

boyutlandırma

Herhangi bir modül eklemeden önce satırın boyutunu ayarlayın.

Oluk Genişliği: 1
Genişlik: %100
Maksimum Genişlik: %100

aralık

Satırın varsayılan üst ve alt dolgusunu da kaldırın.

Üst ve Alt Dolgu: 0vw

Sütun 1 Ayarları

Arka plan

Sonraki sütun 1 ayarlarını açın ve bir arka plan rengi ekleyin.

Renk: Soluk Gül #E7BAC6

Sınır

Ardından, sütunun kenarlık ayarlarını farklı ekran boyutlarına göre ayarlayın.

Yuvarlatılmış Köşeler: Sağ Üst + Sağ Alt
- Masaüstü: 10vw
- Tablet ve Telefon: 0vw

görünürlük

Gelişmiş sekmesine geçin ve görünürlük ayarlarını aşağıdaki gibi yapın:

Yatay + Dikey Taşma
- Masaüstü: Varsayılan
- Fareyle üzerine gelin: Görünür
Z-endeksi:
- Masaüstü: 10
- Fareyle üzerine gelin: 11

Sütun 2 Ayarları

Arka plan

Şimdi, renkli arka planı sütun 2'ye ekleyin.

Renk: Soluk Yeşil #bfd5a5

Sınır

İkinci sütunun kenarlık ayarlarını aşağıdaki gibi değiştirin:

Yuvarlatılmış Köşeler: Sol Üst + Sol Alt
- Masaüstü: 10vw
- Tablet ve Telefon: 0vw

görünürlük

Son olarak, görünürlük ayarlarını buna göre değiştirin:

Yatay + Dikey Taşma
- Masaüstü: Varsayılan
- Fareyle üzerine gelin: Görünür
Z-endeksi:
- Masaüstü: 9
- Fareyle üzerine gelin: 11

Sütun 1'e Görüntü Modülü Ekle

Resim eklemek

Modül eklemeye başlama zamanı! Sütun 1'e bir görüntü modülü ekleyin ve istediğiniz yarı saydam bir görüntüyü yükleyin.

Arka plan

Görüntü arka plan renginiz olarak sütunun arka plan rengini kullanın.

Renk: Soluk Gül #E7BAC6

boyutlandırma

Ardından, tasarım sekmesinde boyutlandırma ayarlarını yapın.

Tam Genişliği Zorla: Evet

aralık

Bazı özel dolguları da ekleyin.

Sağ Dolgu:
- Tablet: 18vw
- Telefon: 20vw

dönüştürmek

Son olarak, modülün dönüştürme çevirme ayarlarını yapın.

Dönüştür Çevir: x ekseni 19vw

Sütun 1'e Metin Modülü Ekle

İçerik ekle

Bir metin modülü olan bir sonraki modüle geçin. Seçtiğiniz bazı H2 ve paragraf içeriğini ekleyin.

Metin

Tasarım sekmesine geçin ve metin ayarlarını aşağıdaki gibi değiştirin.

Yazı Tipi: Verdana
Renk: Beyaz #ffffff
Boy:
- Masaüstü: 2vw
- Tablet: 3vw
- Telefon: 3.5vw
Harf Aralığı: 1px
Hizalama: ortalanmış

Başlık Metni

Sonraki başlık metnine stil verin.

Başlık Seviyesi: H2
Yazı Tipi: Verdana
Ağırlık: Kalın
Hizalama: Merkez
Renk: Macenta #9d3056
Boy:
- Masaüstü: 6vw
- Tablet + Telefon: 8vw

boyutlandırma

Ardından, modülün boyutunu ayarlayın.

Genişlik:
- Masaüstü: %56
- Tablet + Telefon: %43

aralık

Farklı ekran boyutları arasında boşluk ayarlarını değiştirerek modülün ayarlarını tamamlayın.

Üst boşluk:
- Masaüstü: -55vw
- Tablet: -70vw
- Telefon: -90vw
Alt Dolgu:
- Masaüstü + Tablet: 0vw
Sol Dolgu: 2vw

Sütun 1'e Çubuk Sayaç Modülü Ekle

Çubuk Sayaç Ayarları 1-4

Başlıklar

Sütun 1'de ihtiyacımız olan sonraki ve son modül, bar sayaçları modülüdür. Çubuk sayaçlarına başlık ekleyin.

Çilekler
Yaban mersini
Böğürtlenler
Ahududu

yüzdeler

Yüzdelerle birlikte.

boyutlandırma

İlk çubuğa tıklayın ve yüksekliği ayarlayın. Dört çubuğun tümü için bu adımı tekrarlayın.

Yükseklik: 1.5vw

Genel Çubuk Sayaç Ayarları

Elementler

Genel çubuk sayacı ayarlarında, eleman ayarlarını açın. Yüzdeyi "Hayır" olarak değiştirin.

Yüzdeyi Göster: Hayır

Arka plan

Şimdi yarı saydam bir arka plan ekleyin.

Renk: Şeffaflık ile Soluk Gül rgba(157,48,86,0.18)

Bar

Tasarım sekmesinde, çubuklara macenta bir çubuk rengi verin.

Arka Plan Rengi: Macenta #9d3056

Başlık Metni

Sonraki başlık metni ayarlarına stil verin.

Yazı Tipi: Verdana
Renk: Beyaz #ffffff
Boy:
- Masaüstü: 1vw
- Tablet: 2vw
- Telefon: 3vw

boyutlandırma

Modülün boyutlandırma ayarlarını yaparak devam edin.

Genişlik:
- Masaüstü: %49
- Tablet + Telefon: %33

aralık

Boşluk ayarlarını da değiştirin.

Üst boşluk:
- Tablet + Telefon: -3vw
Alt Kenar Boşluğu:
- Masaüstü: 21vw
- Tablet + Telefon: 28vw
Sol Kenar Boşluğu:
- Masaüstü: 3vw
- Tablet + Telefon: 6vw
Alt + Sol Dolgu: 0vw

Sınır

Sonraki kenarlık ayarlarını değiştirin.

Yuvarlatılmış Köşeler: Dört köşenin tümü 1vw

görünürlük

Son olarak, görünürlük sekmesinde z indeksini ve taşmaları ayarlayın.

Yatay Taşma: Görünür
Dikey Taşma: Gizli
Z-endeksi: 11

Sütun 2'ye Görüntü Modülü Ekle

Resim eklemek

İkinci sütuna geç! Yeni bir görüntü modülü ekleyin ve istediğiniz yarı saydam bir görüntüyü yükleyin.

Arka plan

2. sütunun arka plan rengini, bir sonraki resminizin arka plan rengi olarak kullanın.

Renk: Soluk Yeşil #bfd5a5

boyutlandırma

Tasarım sekmesinde modülün boyutunu ayarlayın.

Tam Genişliği Zorla: Evet

aralık

Daha küçük ekran boyutlarına da bazı özel sol dolgu ekleyin.

Sol Dolgu:
- Tablet: 16vw
- Telefon: 18vw

dönüştürmek

Son olarak, dönüştürme çevirme ayarlarını değiştirin.

Dönüştür Çevir: x ekseni -19.6vw

Sütun 2'ye Metin Modülü Ekle

İçerik ekle

2. sütuna biraz H2 ve paragraf içeriğiyle bir Metin Modülü ekleyerek devam edin.

Metin

Ardından, tasarım sekmesinde metne stil verin.

Yazı Tipi: Verdana
Renk: Beyaz #ffffff
Boy:
- Masaüstü: 2vw
- Tablet: 3vw
- Telefon: 3.5vw
Harf Aralığı: 1px
Hizalama: Merkez

Başlık Metni

Başlık metni ayarlarını da değiştirin.

Başlık Seviyesi: H2
Yazı Tipi: Verdana
Ağırlık: Kalın
Hizalama: Merkez
Renk: Yeşil #2c5b00
Boy:
- Masaüstü: 6vw
- Tablet + Telefon: 8vw

boyutlandırma

Ve modülün boyutlandırma ayarlarını yapın.

Genişlik: %60
Hizalama: Sağ

aralık

Son olarak, farklı ekran boyutlarında bazı özel boşluk değerleri kullanın.

Üst boşluk:
- Masaüstü: -55vw
- Tablet: -63vw
- Telefon: -90vw
Alt Dolgu:
- Masaüstü + Tablet: 37vw
Sol Dolgu:
- Masaüstü: 0vw
- Tablet + Telefon: 16vw
Sağ Dolgu:
- Tablet + Telefon: 2vw

Sütun 2'ye Çubuk Sayaç Modülü Ekle

Çubuk Sayaç Ayarları 1-4

Başlıklar

Sütun 2'de ihtiyacımız olan son modül, bar sayaçları modülüdür. Dört çubuk sayacı ekleyin.

Brokoli
Kereviz
Salatalık
Kale

yüzdeler

Her çubuk sayacına bir yüzde atayın.

boyutlandırma

İlk çubuğun bireysel ayarlarını açın ve boyutlandırma ayarlarında yüksekliği değiştirin. Dört çubuğun tümü için bu adımı tekrarlayın.

Yükseklik: 1.5vw

Genel Çubuk Sayaç Ayarları

Elementler

Genel çubuk sayacı ayarlarında, yüzde geçişini "Hayır" olarak değiştirin.

Yüzdeyi Göster: Hayır

Arka plan

Ardından, yarı saydam bir arka plan rengi ekleyin.

Renk: Şeffaflık rgba ile Soluk Yeşil(17,119,3,0.18)

Bar

Ardından, tasarım sekmesinde sayaç çubuğuna renk ekleyin.

Çubuk Rengi: Yeşil #9d3056

Başlık Metni

Metni şekillendirerek devam edin.

Yazı Tipi: Verdana
Renk: Beyaz #ffffff
Boy:
- Masaüstü: 1vw
- Tablet: 2vw
- Telefon: 3vw

boyutlandırma

Genişliği farklı ekran boyutlarında da değiştirin.

Genişlik:
- Masaüstü: %49
- Tablet + Telefon: %33

aralık

Aralık ayarlarına geçin ve farklı ekran boyutlarına bazı özel aralık değerleri ekleyin.

Üst boşluk:
- Masaüstü: -37vw
- Tablet + Telefon: -40vw
Alt Kenar Boşluğu:
- Masaüstü: 21vw
- Tablet + Telefon: 28vw
Sol Kenar Boşluğu:
- Masaüstü: 23vw
- Tablet + Telefon: 60vw
Alt + Sol Dolgu: 0vw

Sınır

Bazı yuvarlak köşeler de ekliyoruz.

Yuvarlatılmış Köşeler: Dört köşenin tümü 1vw

görünürlük

Görünürlük sekmesindeki taşmaları ve z indeksini ayarlayarak modülün ayarlarını tamamlayın.

Yatay Taşma: Görünür
Dikey Taşma: Gizli
Z-endeksi: 11

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Bu bir Sargı!

Bu yazıda, güzel bir tasarımda resimler arasında nasıl geçiş yapacağınızı gösterdik. Bu, etkileşimli tasarım oluşturmanın ve hangi görüntünün görüneceğini belirlemek için Divi'nin yerleşik z dizinini kullanmanın harika bir yoludur. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!