İçinde bir Kahraman bölümü oluşturmak ister misiniz? Divi geleneksel yanıt veren yerine akıcı olan hangisidir?
Kahraman bölümü bir Site Web akışkan tasarımı için en iyi adaylardan biridir. Farklı kesme noktalarına uyum sağlayan geleneksel duyarlı tasarımın aksine, akıcı tasarım, tarayıcı görünüm alanına sorunsuz bir şekilde uyum sağlar ve tasarımın herhangi bir cihazda tutarlı olmasını sağlar. Sonuçta, Kahraman bölümü, kullanıcıların bir bilgisayarda gördükleri ilk şeydir. Site Web.
Bu eğitimde, size tüm akıcı bir kahraman bölümünün nasıl oluşturulacağını göstereceğiz. Divi. 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 uzunluk birimini dahil etmektir. em (kim kök gövde yazı tipi boyutuna göre ) modül ayarlarında.
Hadi başlayalım!
anket
İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.
Akışkan tasarımın, tarayıcı penceresinin genişliğine nasıl sorunsuz bir şekilde uyum sağladığına dikkat edin.
Divi Builder ile yeni bir sayfa oluşturun
Başlamak için aşağıdakileri yapmanız gerekir:
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın kullanım Divi inşaatçı
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra tasarlamaya başlamak için boş bir tuvaliniz olacak. Divi.
Ayrıca Oku: Divi: Fullwidth Header modülüyle bir Kahraman bölümü nasıl oluşturulur
Divi'de Akışkan Kahraman Bölümü Nasıl Tasarlanı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:
- Gradyan Durakları:
- %30: #ff2000
- %30: #121212
- Gradyan Yönü: 45deg
Sekmenin altında Dizayn, dolguyu güncelleyin:
- Dolgu: 0 piksel üst, 0 piksel alt
Bir çizgi oluştur
Ardından, bölüme tek sütunlu bir satır ekleyin.
Satır Parametreleri
Hat ayarlarını açın ve sekmenin altında aşağıdakileri güncelleyin Dizayn :
- Oluk Genişliği: 1
- Genişlik: %100
- Maksimum Genişlik: 1 piksel
- Min Yükseklik: 100 vh (Masaüstü), yok (Tablet ve Telefon)
- Dolgu: 0px (Üst ve Alt)
Kenarlıklı akan başlık metni oluşturun
Artık bölüm ve satır tamamlandığında, akan başlık metnini Kahraman bölümüne ekleyebiliriz. Ayrıca, yaratıcı bir tasarım öğesi için Metin modülüne değişken bir kenarlık ekleyeceğiz.
Metin modülü ekleyin
Başlık metnini ve kenarlığı oluşturmak için sütuna yeni bir Metin modülü ekleyin.
Metin ayarları
Sekmenin altında içerik, güncelle onu içindekiler aşağıdaki HTML koduyla gövdenin:
<h1>Fluid Fullscreen Page Design<spanstyle="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.
Sekmenin altında gelişmiş, aşağıdaki CSS parçacığını yapıştırın:
font-size: clamp(32px, 4.1vw, 70px);
Sekmenin altında Dizayn, aşağıdaki başlık metni tasarım ayarlarını güncelleyin:
- Başlık metni:
- Tip: H1
- Yazı Tipi: Montserrat
- Yazı Tipi Ağırlığı: Ağır
- Renk: #ffffff
- Boyut: 1em
- Harf Aralığı: 0,1em
- Satır Yüksekliği: 1,2 em
Ayrıca mod dolgusunu aşağıdaki gibi güncelleyin:
- Dolgu: 1. (Üst, Alt, Sol ve 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: açık
- Sol Kenarlık Rengi: temizle
Vurgu Kenarlığı Oluşturma
Vurgu kenarlığını oluşturmak için mevcut Metin modülünü çoğaltabiliriz.
Silin içindekiler mevcut gövdenin değiştirilmesi ve tasarım parametrelerinin aşağıdaki şekilde güncellenmesi:
- Maksimum Genişlik: 6,5cm
- Yükseklik: 3,25 cm
- Kenar Genişliği: 0,5em
- Kenar Rengi: #ff2000
Vurgu kenarlığını konumlandırmak için, Başlık Metni (1em) modülünde kenarlığın genişliğine eşit bir uzaklıkla mutlak bir konum ekleyin.
Sekmenin altında gelişmiş, aşağıdaki Konum seçeneklerini güncelleyin:
- Pozisyon: Mutlak
- Yer: sağ üst
- Dikey Ofset: 1em
- Yatay Ofset: 1em
Altyazı metni oluştur
Başlık metninin altına akan altyazı metnini ekleyeceğiz. Bu metin daha küçük olduğundan, daha küçük bir akışkan kök yazı tipi boyutu ekleyeceğiz.
Yeni bir Metin modülü ekleyin
Altyazı metnini oluşturmak için mevcut Başlık Metni modülünün altına yeni bir Metin modülü ekleyin.
Aşağıdaki gibi bazı dolgu metni cümleleri ekleyebilirsiniz:
- İçerik: Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Lorem ipsum dolor sit amet, conectetur adipiscing elit.
Değişken kök yazı tipi boyutu ekle
Ardından, küçük metinler için daha iyi çalışan yeni bir akışkan yazı tipi boyutu eklememiz gerekiyor. Gelişmiş sekmesi altında, aşağıdaki CSS parçacığını ana öğenin altına yapıştırın:
font-size: clamp(14px, 1.4vw, 24px);
Metin tasarım ayarları
Sekmenin altında Dizayn, aşağıdakileri güncelleyin:
- Metin :
- Yazı Ağırlığı: Yarı Kalın
- Renk: #ffffff
- Boyut: 1em
- Yükseklik: 1,6 cm
Ardından boyutu ve aralığı aşağıdaki gibi güncelleyin:
- Maksimum Genişlik: 19cm
- Kenar boşluğu: 2 em (Alt), otomatik (Sol), 5 em (Sağ)
Akışkan düğmesini oluşturun
Değişken düğmeyi oluşturmak için Altyazı Metni modülünün altına yeni bir Düğme modülü ekleyin.
Ardından, düğme metnini "7 Günlük Ücretsiz Tral" olarak güncelleyin.
Değişken kök yazı tipi boyutu ekle
Ardından, bir düğmeye uygun yeni bir akışkan yazı tipi boyutu eklememiz gerekiyor.
Sekmenin altında gelişmiş, aşağıdaki CSS parçacığını ana öğenin altına yapıştırın:
font-size: clamp(20px, 2.35vw, 40px);
Düğme tasarım ayarları
Sekmenin altında Dizayn, aşağıdakileri güncelleyin:
- Düğme Hizalama: Sağ
- Düğme İçin Özel Boyut Kullan: EVET
- Düğme Metin Rengi: #ff2000
- Gradyan Durakları:
- Renk 1 %25: temizle
- Renk 2 %25: #ffffff
- Gradyan Yönü: 45 derece
- Buton :
- Kenarlık Genişliği: 0 piksel
- Sınır Yarıçapı: 0 piksel
- Yazı Tipi: Montserrat
- Yazı Tipi Ağırlığı: kalın
- stil: italik
- Düğme Simgesini Göster: EVET
- Simge: sağda üçgen şekilli ok (ekran görüntüsüne bakın)
- Simge Yerleşimi: Sağ
- Marj: 8em (Sağ)
- Dolgu: 0,2em (Üst ve Alt), 1,5em (Sol), 1em (Sağ)
Kahraman bölümü için bir resim oluşturun
tüm ile içindekiler Hero bölümünün sayfanın doğru boyutuna getirilmesiyle sol tarafa Hero bölümü görselini eklemeye hazırız. Bunu yapmak için öncelikle 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ı
Sekmenin altında Dizayn, aşağıdaki ayarları güncelleyin:
- Görüntü Hizalama: sol (Masaüstü ve Tablet), orta (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:
- Pozisyon: Mutlak (Masaüstü ve Tablet), Göreli (Telefon)
- Konum: sol üst (Masaüstü ve Tablet)
- Dikey Ofset: 30vmin (Masaüstü ve Tablet), 0px (Telefon)
Nihai sonuç
İşte canlı bir sayfadaki sonuç.
Ayrıca bakınız: Divi: Bir Kahraman Bölümü için Maskeler ve Arka Plan Desenleri Nasıl Kullanılır
Akışkan tasarım bu şekilde tarayıcı penceresinin genişliğine sorunsuz bir şekilde uyum sağlar.
DIVI'yı şimdi indirin!!!
Sonuç
Bir Kahraman bölümüne akıcı bir tasarım eklemek, belirli noktalarda tasarımı güncellemek veya medya sorgularını kullanmak zorunda kalmadan ekranın üst kısmının tüm tarayıcı boyutlarında güzel bir şekilde tutarlı olmasını sağlamak için kullanışlı bir yol olabilir.
Umarım bu teknik, gelecekteki projeler için başka bir yararlı tasarım becerisi katacaktır.
Ayrıca bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa.
Rehberimize de danışmaktan çekinmeyin. WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
