Döndürülmüş Kopyayı Kullanarak Divi'nin Mobil Görünümlerini En Üst Düzeye Çıkarma
Yayınlanan: 2020-06-06Bir web sitesi tasarlarken en başta yapmanız gereken önemli bir seçim var: “İlk olarak hangi cihazı tasarlayacağım?” Çoğu zaman, cevap masaüstüdür. Ancak önce masaüstü için tasarım yapıyor olmanız, mobil tasarımınızın bu kadar kapsamlı olamayacağı anlamına gelmez. Örneğin, döndürülmüş kopyayı kullanarak Divi'nin mobil görünüm pencerelerini en üst düzeye çıkarabilir ve ziyaretçilerinize veya tasarımınıza aşırı yük bindirmeden mobil görünüm alanlarına daha fazla içerik sığdırabilirsiniz. Bu derste, bunu Divi'de tam olarak nasıl yapacağınızı göstereceğiz. JSON dosyasını da ücretsiz olarak indirebileceksiniz!
Hadi hadi bakalım.
Ön izleme
Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.
En Üst Düzeye Çıkaran Mobil Görünüm Alanları Düzenini ÜCRETSİZ olarak indirin
Ellerinizi ücretsiz en üst düzeye çıkaran mobil görünüm penceresi düzenine 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.
Ü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 Yaratmaya Başlayalım!
Yeni Bölüm Ekle
aralık
Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın. Bölüm ayarlarını açın ve tüm varsayılan üst ve alt dolguyu kaldırın.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
1. Satır Ekle
Sütun Yapısı
Aşağıdaki sütun yapısını kullanarak bölüme yeni bir satır ekleyerek devam edin:
boyutlandırma
Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
- Sütun Yüksekliklerini Eşitle: Evet
- Genişlik: %100
- Maksimum Genişlik: %50 (Masaüstü), %100 (Tablet ve Telefon)
- Satır Hizalama: Sol
aralık
Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
Ana Eleman CSS
Tüm sütunların yan yana kalmasını sağlamak için satırın ana öğesine de tek bir CSS kodu satırı ekleyeceğiz.
display: flex;
Sütun 1 Ayarları
Animasyon
Ardından, sütun 1 ayarlarını açacağız ve aşağıdaki animasyonu ekleyeceğiz:
- Animasyon Stili: Soluk
Ana Eleman CSS
Sütunun ana öğesine aşağıdaki CSS kodu satırını ekleyerek sütun boyutunu daha küçük ekran boyutlarında tutacağız:
width: 40% !important;
Sütun 2 Ayarları
Animasyon
Ardından, sütun 2 ayarlarını açacağız ve aşağıdaki animasyonu uygulayacağız:
- Animasyon Stili: Soluk
- Animasyon Gecikmesi: 200ms
Ana Eleman CSS
Aşağıdaki CSS kodu satırını ekleyerek sütunun boyutunu daha küçük ekran boyutlarında tutuyoruz:
width: 60% !important;
Sütun 2'ye Görüntü Modülü Ekle
Fotoğraf yükleniyor
Modül ekleme zamanı. 2. sütuna bir Resim Modülü ekleyin ve seçtiğiniz bir portre resmini yükleyin.
boyutlandırma
Modülün tasarım sekmesine gidin ve modülü tam genişliğe zorlayın.
- Tam Genişliği Zorla: Evet
Sütun 1'e Metin Modülü Ekle
H2 İçeriği Ekle
1. sütunda, ihtiyacımız olan ilk modül H2 içeriğini içeren bir Metin Modülüdür.
H2 Metin Ayarları
Modülün tasarım sekmesine gidin ve H2 metin ayarlarını aşağıdaki gibi değiştirin:
- Başlık 2 Yazı Tipi: Montserrat
- Başlık 2 Yazı Tipi Ağırlığı: Hafif
- Başlık 2 Metin Hizalama: Merkez (Yalnızca Tablet ve Telefon)
- Başlık 2 Metin Rengi: #000000
- Başlık 2 Metin Boyutu: 3vw (Masaüstü), 50px (Tablet), 40px (Telefon)
- Başlık 2 Harf Aralığı: -3px
boyutlandırma
Ardından, boyutlandırma ayarlarında genişliği değiştireceğiz.
- Genişlik: %89 (Masaüstü), %150 (Tablet ve Telefon)
Dönüştür Döndür
Modülümüzü daha küçük ekran boyutlarında döndürmek için dönüştürme döndürme ayarlarını kullanacağız.
- Sol: 270 derece (Yalnızca Tablet ve Telefon)
Konum
Ayrıca modülü farklı ekran boyutlarında farklı şekilde yeniden konumlandırıyoruz.
- Pozisyon: Mutlak
- Konum: Alt Merkez (Masaüstü), Merkez (Tablet ve Telefon)
- Dikey Ofset: 50px
Sütun 1'e Bölücü Modülü Ekle
görünürlük
Sütun 1'de ihtiyacımız olan sonraki ve son modül bir Bölücü Modüldür. 'Bölücüyü Göster' seçeneğinin etkinleştirildiğinden emin olun.
- Bölücüyü Göster: Evet
Hat
Modülün tasarım sekmesine gidin ve çizgi rengini değiştirin.
- Çizgi Rengi: #000000
boyutlandırma
Boyutlandırma ayarlarını da değiştirin.
- Genişlik: %50 (Masaüstü), %30 (Tablet ve Telefon)
Konum
Modülü uygun şekilde yeniden konumlandırarak modül ayarlarını tamamlayın:
- Pozisyon: Mutlak
- Konum: Merkez Sağ
2. Satır Ekle
Sütun Yapısı
Bir sonraki satıra geçmek için aşağıdaki sütun yapısını kullanın:
boyutlandırma
Henüz herhangi bir modül eklemeden satır ayarlarını açın ve boyutlandırma ayarlarını aşağıdaki gibi değiştirin:
- Özel Oluk Genişliğini Kullan: Evet
- Oluk Genişliği: 1
- Sütun Yüksekliklerini Eşitle: Evet
- Genişlik: %100
- Maksimum Genişlik: %50 (Masaüstü), %100 (Tablet ve Telefon)
- Satır Hizalama: Sağ
aralık
Sonraki tüm varsayılan üst ve alt dolguyu kaldırın.
- Üst Dolgu: 0px
- Alt Dolgu: 0px
Ana Eleman CSS
Daha küçük ekran boyutlarında her iki sütunun da yan yana kalmasını sağlamak için satırın ana öğesine tek bir CSS kodu satırı ekleyeceğiz.
display: flex;
Sütun 1 Ayarları
Degrade Arka Plan
Ardından, sütun 1 ayarlarını açacağız ve bir gradyan arka planı uygulayacağız.
- Renk 1: #1a9970
- Renk 2: #000000
- Gradyan Türü: Doğrusal
- Gradyan Yönü: 153 derece
Animasyon
Bu sütunda da gecikmeli bir animasyon kullanıyoruz.
- Animasyon Stili: Soluk
- Animasyon Gecikmesi: 400ms
Ana Eleman CSS
Ardından, sütunun ana öğesine aşağıdaki CSS kodu satırını ekleyerek sütun boyutunu daha küçük ekran boyutlarında tuttuğumuzdan emin olacağız:
width: 25% !important;
görünürlük
Son olarak, hiçbir şeyin kapsayıcıyı aşmadığından emin olmak için sütunun taşmalarını gizleyeceğiz.
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
Sütun 2 Ayarları
Arka plan rengi
Sütun 2 ayarlarına gidin. Bunun için aşağıdaki arka plan rengini kullanın:
- Arka Plan Rengi: #f4f4f4
Animasyon
Gecikmeli bir animasyon da uygulayın.
- Animasyon Stili: Soluk
- Animasyon Gecikmesi: 600ms
Ana Eleman CSS
Ve sütunun ana öğesine tek bir CSS kodu satırı ekleyerek sütun ayarlarını tamamlayın. Bu, sütunun boyutunu daha küçük ekran boyutlarında tutmasını sağlayacaktır.
width: 75% !important;
Sütun 2'ye Metin Modülü Ekle
İçerik Ekle
Modül ekleme zamanı. Seçtiğiniz bazı açıklama içeriğiyle 2. sütuna bir Metin Modülü ekleyin.
Metin Ayarları
Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:
- Metin Yazı Tipi: Sans'ı Aç
- Metin Boyutu: 15px (Masaüstü), 14px (Tablet), 13px (Telefon)
- Metin Satırı Yüksekliği: 2.4em
boyutlandırma
Ardından, boyutlandırma ayarlarını değiştireceğiz.
- Genişlik: %80
- Modül Hizalaması: Merkez
aralık
Aralık ayarlarına bazı özel dolgu değerleri ekleyerek modül ayarlarını tamamlayacağız.
- Üst Dolgu: %15
- Alt Dolgu: %15
2. Sütun'a Düğme Modülü Ekle
Kopya Ekle
2. sütunda ihtiyacımız olan sonraki ve son modül bir Düğme Modülüdür. Seçtiğiniz bir kopyayı ekleyin.
hizalama
Modülün tasarım sekmesine gidin ve düğme hizalamasını değiştirin.
- Düğme Hizalama: Merkez
Düğme Ayarları
Sonraki düğmeyi stilleyin.
- Düğme İçin Özel Stiller Kullan: Evet
- Düğme Metin Rengi: #000000
- Düğme Arka Plan Rengi: #ffffff
- Düğme Kenar Genişliği: 0px
- Düğme Sınır Yarıçapı: 0px
- Düğme Yazı Tipi: Montserrat
- Düğme Simgesini Göster: Evet
- Düğme Simge Yerleşimi: Sol
- Yalnızca Düğmenin Üzerine Geldiğinde Simgeyi Göster: Hayır
aralık
Ve boşluk ayarlarına bazı özel dolgu değerleri ekleyerek modül ayarlarını tamamlayın.
- Üst Dolgu: %2
- Alt Dolgu: %2
- Sol Dolgu: %10
- Sağ Dolgu: %10
Sütun 1'e Metin Modülü Ekle
İçerik Ekle
1. sütunda ihtiyacımız olan tek modül bir Metin Modülüdür. İçerik kutusuna şu içeriği ekleyin: '— 01'.
Metin Ayarları
Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:
- Metin Yazı Tipi: Montserrat
- Metin Yazı Tipi Ağırlığı: İnce
- Metin Rengi: #ffffff
- Metin Boyutu: 50px (Masaüstü), 40px (Tablet), 35px (Telefon)
- Metin Hizalama: Merkez
boyutlandırma
Sonraki modülün genişliğini artırın.
- Genişlik: %150
Dönüştür Çeviri
Ardından, dönüştürme ayarlarına gidin ve dönüştürme dönüştürme ayarlarını değiştirerek modülü yeniden konumlandırın:
- Alt: -%50 (Yalnızca Tablet ve Telefon)
Dönüştür Döndür
Modülü daha küçük ekran boyutlarında da döndürüyoruz.
- Sol: 270 derece (Yalnızca Tablet ve Telefon)
Konum
Ve modülü gelişmiş sekmesinde yeniden konumlandırarak modül ayarlarını tamamlayacağız.
- Pozisyon: Mutlak
- Yer: Merkez
Yeniden Kullanım için Klonlama Bölümü
İlk bölümü tamamladıktan sonra, istediğiniz kadar klonlayabilirsiniz.
Tüm Kopyaları ve Bağlantıları Değiştir
Tüm kopyaları ve bağlantıları değiştirdiğinizden emin olun.
Resmi değiştir
Portre görüntüsü ile birlikte ve bitirdiniz!
Ön izleme
Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.
Son düşünceler
Bu gönderide, Divi içindeki mobil görünümlerinizi nasıl en üst düzeye çıkaracağınızı gösterdik. Daha spesifik olarak, bunaltıcı bir tasarım deneyimi yaratmadan görünümlerimize daha fazla içerik sığdırmak için döndürülmüş kopyayı kullandık. JSON dosyasını da ücretsiz olarak indirebildiniz! Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin.
Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.