Divi'de Akışkan Kahraman Bölümü Nasıl Tasarlanır
Yayınlanan: 2021-07-26Bir web sitesinin kahraman bölümü, akıcı tasarım için en iyi adaylardan biridir. Farklı kesme noktalarında ayarlanan geleneksel duyarlı tasarımın aksine, akıcı tasarım, tarayıcı görünümüyle sorunsuz bir şekilde ölçeklenir ve tasarımın herhangi bir cihazda tutarlı olmasını sağlar. Sonuçta, kullanıcıların bir web sitesinde gördüğü ilk şey kahraman bölümüdür.
Akışkan tipografisi, akışkan modülleri ve/veya akışkan düğmeleriyle ilgili önceki eğitimlerde gösterilen akışkan tasarımı görmüş olabilirsiniz. Bu eğitimde, size Divi'de tam bir akışkan kahraman bölümünün nasıl oluşturulacağını göstereceğiz. Bu akıcı tasarımı oluşturmanın anahtarı, kullanılan modüllerin her birine bir değişken kök yazı tipi boyutu eklemek ve ardından modülün ayarları boyunca em uzunluk birimini (kök gövde yazı tipi boyutuna göredir) dahil etmektir.
Başlayalım!
Gizlice Bakış
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Akışkan tasarımın tarayıcı görüntü alanı genişliğiyle nasıl sorunsuz bir şekilde ölçeklendiğine dikkat edin.
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İ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!
Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.
İçe Aktar düğmesini tıklayın.
Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.
Ardından içe aktar düğmesini tıklayın.
Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.
Hadi öğreticiye geçelim, olur mu?
Başlamak için Gerekenler
Başlamak için aşağıdakileri yapmanız gerekir:
- Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
- WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
- “Sıfırdan Oluştur” seçeneğini seçin.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'de Akışkan Kahraman Bölümü Nasıl Tasarlanır
Akışkan kahraman bölümünü oluşturmak için, üç modülün her birine bir akışkan kök yazı tipi boyutu ekleyeceğiz. Bu modüller başlığı, alt başlığı ve düğmeyi oluşturacaktır. Ardından, tasarım öğelerinin akışkan kök yazı tipi boyutuna göre olduğundan emin olmak için modül tasarım ayarlarında em uzunluk birimini kullanacağız. Ardından resmi sayfanın sol tarafına mutlak bir konum ve ofset ile konumlandıracağız. Sonuç, tasarımın tüm cihazlarda tutarlı olması için görünüm alanı genişliğiyle mükemmel şekilde ölçeklenen akıcı bir kahraman bölümü olacaktır.
Bölüm Ayarları
Başlamak için, bölüm için mevcut tasarım ayarlarını güncelleyelim. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:
- Arka Plan Gradyanı Sol Renk: #ff2000
- Arka Plan Gradyanı Sağ Renk: #121212
- Gradyan Yönü: 45deg
- Başlangıç Konumu: %30
- Bitiş Konumu: %0
Tasarım sekmesi altında dolguyu güncelleyin:
- Dolgu: 0 piksel üst, 0 piksel alt
Satır Oluştur
Ardından, bölüme tek sütunlu bir satır ekleyin.
Satır Ayarları
Satır için ayarları açın ve tasarım sekmesi altında aşağıdakileri güncelleyin:
- Oluk Genişliği: 1
- Genişlik: %100
- Maksimum Genişlik: 1700 piksel
- Min Yükseklik: 100vh (masaüstü), yok (tablet ve telefon)
- Dolgu: 0 piksel üst, 0 piksel alt
Kenarlıklı Değişken Başlık Metni Oluşturun
Artık bölüm ve satır bittiğinde, akıcı başlık metnini kahraman bölümüne ekleyebiliriz. Ayrıca yaratıcı bir tasarım öğesi için metin modülüne akışkan bir kenarlık ekleyeceğiz.
Metin Modülü Ekle
Başlık metni ve kenarlığı oluşturmak için sütuna yeni bir metin modülü ekleyin.
Metin Ayarları
İçerik sekmesi altında, gövde içeriğini aşağıdaki HTML ile güncelleyin:
<h1>Fluid Fullscreen Page Design<span style="color: #ff2000;">.</span></h1>
Tasarım öğelerini akıcı hale getirmek için, öncelikle CSS Clamp() işlevini kullanarak modüle bir değişken kök yazı tipi boyutu eklememiz gerekir. Gelişmiş sekmesinin altında, aşağıdaki CSS pasajını geçin:
font-size: clamp(32px, 4.1vw, 70px);
Değişken kök yazı tipi boyutu yerindeyken, tasarım ayarlarını güncellemeye hazırız. em uzunluk birimi, öğenin kök yazı tipi boyutuna göreli olduğundan, baştan sona em uzunluk birimini kullanmak önemlidir.
Tasarım sekmesi altında, aşağıdaki başlık metni tasarım ayarlarını güncelleyin:
- Başlık Türü: H1
- Başlık Yazı Tipi: Montserrat
- Başlık Yazı Tipi Ağırlığı: Ağır
- Başlık Metni Rengi: #ffffff
- Başlık Metni Boyutu: 1em
- Başlık Harf Aralığı: 0.1em
- Yön Çizgisi Yüksekliği: 1.2em
Ayrıca modül dolgusunu aşağıdaki gibi güncelleyin:
- Dolgu: 1em (üst, alt, sol, sağ)
Değişken kenarlık tasarımını oluşturmak için aşağıdakileri güncelleyin:
- Kenar Genişliği: 1em
- Kenar Rengi: #ffffff
- Alt Kenarlık Rengi: şeffaf
- Sol Kenarlık Rengi: şeffaf
Vurgu Kenarlığını Oluşturma
Vurgu kenarlığını oluşturmak için mevcut metin modülünü çoğaltabiliriz.
Mevcut gövde içeriğini çıkarın ve tasarım ayarlarını aşağıdaki gibi güncelleyin:
- Maksimum Genişlik: 6.5em
- Yükseklik: 3.25em
- Kenar Genişliği: 0,5em
- Kenar Rengi: #ff2000
Bu yinelenen modülde aynı değişken kök yazı tipi boyutunun bulunduğunu unutmayın. Böylece, kenarlığın boyutunu ve genişliğini ayarlamak için em uzunluk birimini kullanabiliriz. Bu, tasarımın başlık metin modülünün tasarımıyla birlikte ayarlanmasını sağlayacaktır.
Vurgu kenarlığını konumlandırmak için, başlık metni modülündeki (1em) kenarlığın genişliğine eşit bir kayma ile mutlak bir konum ekleyin. Gelişmiş sekmesi altında, aşağıdaki Konum seçeneklerini güncelleyin:
- Pozisyon: Mutlak
- Yer: sağ üst
- Dikey Ofset: 1em
- Yatay Ofset: 1em
Değişken Altyazı Gövde Metni Oluşturun
Başlık metninin altına akıcı altyazı gövde metnini ekleyeceğiz. Bu metin daha küçük olduğundan, daha küçük bir akışkan kök yazı tipi boyutu ekleyeceğiz.
Yeni Metin Modülü Ekle
Altyazı metnini oluşturmak için mevcut başlık metin modülünün altına yeni bir metin modülü ekleyin.
Birkaç cümlelik dolgu metni ekleyebilirsiniz:
- Gövde İçeriği: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, conectetur adipiscing elit.
Akışkan Kökü Yazı Tipi Boyutu Ekle
Ardından, daha küçük metinler için daha uygun olan yeni bir akışkan yazı tipi boyutu eklememiz gerekiyor. Gelişmiş sekmesinin altında, aşağıdaki CSS parçacığını Ana Öğe altına yapıştırın:
font-size: clamp(14px, 1.4vw, 24px);
Metin Tasarım Ayarları
Tasarım sekmesi altında aşağıdakileri güncelleyin:
- Metin Yazı Tipi Ağırlığı: Yarı Kalın
- Metin Metin Rengi: #ffffff
- Metin Metin Boyutu: 1em
- Metin Satırı Yüksekliği: 1,6em
Ardından boyutu ve aralığı aşağıdaki gibi güncelleyin:
- Maksimum Genişlik: 19em
- Kenar boşluğu: 2em alt, otomatik sol, 5em sağ
Akışkan Düğmesini Oluşturun
Akışkan düğmesini oluşturmak için altyazı metin modülünün altına yeni bir düğme modülü ekleyin.
Ardından, düğme metnini “7 Günlük Ücretsiz Deneme”yi okuyacak şekilde güncelleyin.
Akışkan Kökü Yazı Tipi Boyutu Ekle
Ardından, bir buton için uygun olan yeni bir değişken yazı tipi boyutu eklememiz gerekiyor. Gelişmiş sekmesinin altında, aşağıdaki CSS parçacığını Ana Öğe altına yapıştırın:
font-size: clamp(20px, 2.35vw, 40px);
Düğme Tasarım Ayarları
Tasarım sekmesi altında aşağıdakileri güncelleyin:
- Düğme Hizalama: Sağ
- Düğme Metin Rengi: #ff2000
- Düğme Arka Plan Gradyanı Sol Renk: şeffaf
- Düğme Arka Plan Gradyanı Sağ Renk: #ffffff
- Gradyan Yönü: 45deg
- Başlangıç Konumu: %25
- Bitiş Konumu: %0
- Düğme Kenar Genişliği: 0px
- Düğme Sınır Yarıçapı: 0px
- Düğme Yazı Tipi: Montserrat
- Düğme Yazı Tipi Ağırlığı: Ağır
- Düğme Yazı Tipi Stili: İtalik
- Düğme Simgesi: sağ üçgen ok (ekran görüntüsüne bakın)
- Düğme Simge Yerleşimi: Sol
- Marj: 8em sağ
- Dolgu: 0,2em üst, 0,2em alt, 1,5em sol, 1em sağ
Kahraman Bölümü için Resim Oluştur
Tüm kahraman bölümü içeriği sayfanın sağ boyutundayken, kahraman bölümü görselini sol tarafa eklemeye hazırız. Bunu yapmak için önce düğmenin altına bir görüntü modülü ekleyin.
Görüntü ayarlarını açın ve bir görüntü yükleyin.
Görüntü Tasarım Ayarları
Tasarım sekmesi altında aşağıdaki ayarları güncelleyin:
- Görüntü Hizalama: Sol (masaüstü ve tablet), Merkez (telefon)
- Maksimum Genişlik: %48 (masaüstü ve tablet), %70 (telefon)
- Dolgu: %4 Sol
Son olarak, aşağıdaki gibi vmin uzunluk birimini kullanarak bir ofset ile görüntüye mutlak bir konum verin:
- Konum: Mutlak (masaüstü ve tablet), Akraba (telefon)
- Konum: Sol Üst (masaüstü ve tablet)
- Dikey Ofset 30vmin (masaüstü ve tablet), 0px (telefon)
Son sonuç
İşte canlı bir sayfada nihai sonuç.
Akışkan tasarımın tarayıcı görüntü alanı genişliğiyle nasıl sorunsuz bir şekilde ölçeklendiği aşağıda açıklanmıştır.
Tarayıcı Desteği
CSS kelepçe() işlevi (bu eğitimde değişken yazı tipi boyutu için kullanılır), IE dışındaki tüm büyük tarayıcılar tarafından şaşırtıcı derecede iyi desteklenir. Tarayıcı penceresini ayarlarken dinamik olarak ölçeklenmeyen, ancak sayfa yüklendiğinde doğru görünen garip bir safari hatası var. Bunu düzeltmek için görünüşte tek yapmanız gereken modüllerin her birine minimum 0vw yüksekliği vermek.
Son düşünceler
Bir kahraman bölümüne akıcı tasarım eklemek, belirli kesme noktalarında tasarımı güncelleme veya medya sorguları kullanma zahmetine girmeden ekranın üst kısmının tüm tarayıcı boyutlarında güzel bir şekilde tutarlı görünmesini sağlamak için uygun bir yol olabilir.
Akışkan tipografisi, akışkan modülleri ve akışkan düğmelerinin nasıl oluşturulacağı da dahil olmak üzere akışkan tasarımı hakkındaki diğer makalelerimize göz atmayı unutmayın.
Yorumlarda sizden haber bekliyorum.
Şerefe!