Özel bir divi bölümü ile benzersiz bir çok katlı kahraman nasıl tasarlanır

Tüm tasarım trendleri boyunca, kahramanlarınızı tasarlama şekliniz çok önemlidir. Divi ile farklı bir yaklaşım benimseyebilir ve önemli bir kahraman yapabilir ve insanları web sitenizde evlerini genişletmeye teşvik edebilirsiniz. Yaklaşan Divi projeniz için ilham almanıza yardımcı olmak için, yalnızca Divi’nin varsayılan seçeneklerini kullanarak benzersiz bir çok sütunlu kahraman bölümünü nasıl tasarlayacağınızı göstereceğiz. Çok sütunlu kahraman sadece harika görünmekle kalmaz, aynı zamanda ziyaretçilerinizi yüklemeden kahraman bölümüne daha fazla stratejik içerik yerleştirmenize yardımcı olur.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.

Elinizi çok sütunlu kahramanın düzenine koymak için ücretsiz çok sütunlu kahramanın düzenini indirin, önce aşağıdaki düğmeyi kullanarak indirmelisiniz. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.
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. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Yaratmaya başlayalım! Sütun yapısının yeni bir özel kısmını ekleyin Pürüzsüz bir çok sütunlu kahraman oluşturmak için, Divi’nin görsel oluşturucuya erişebileceğiniz özel kısımlarından birini kullanacağız. Özel bir bölüm seçmek, çok sütunlu bir kahraman tasarlarken kullandığınız kafes yapısında daha iyi bir kavrama yapmanızı sağlar. Bu özel örnek için aşağıdaki sütun yapısını seçtik:
Arka Plan Rengi Parçanın ayarlarını açın ve beyaz arka plan rengini ekleyin.

Arka plan rengi: #ffffff
Yapıştırıcımız, boyut ayarlarını değiştirerek bölüm sütunu arasında boşluk olmamasını sağlar.

Yüksek sütunu eşitleyin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
İç Genişlik:% 100
Maksimum iç genişlik:% 100
Mesafemiz ayrıca varsayılanın tüm üst ve alt dolgusunu satırlardan ve sütunlardan kaldırır.

Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 1 Dolgu Üst: 0px
Sütun 1 Pilding Alt: 0px
Üst Sütun 2 Dolgu: 0px
Sütun 2 Dolgu Alt: 0px
Sütun 3 dolgu üst: 0px
Sütun 3 Dolgu Alt: 0px
Sıra #1 sütun yapısı ekle Aşağıdaki sütun yapısını kullanarak sütunun ilk kısmına yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden mesafe, satır ayarlarını açın ve tüm dolgu üst ve alt varsayılanları silin.

Üst dolgu: 0px

Aşağıda dolgu: 0px
Metin modülünü sütuna ekleyin, H1 paragrafını ve içeriğini ekleyin, modülü eklemeye başlama zamanı! Seçtiğiniz birkaç paragraf ve H1 içeriği içeren yeni bir metin modülü ekleyin.
Metin Ayarları Tasarım sekmesine geçer ve metin ayarlarını değiştirir.

Metin yazı tipi: SANS’ı aç

Metin Boyutu: 0.9VW (masaüstü), 1.6vw (tablet), 2.2vw (telefon)
H1 metin ayarları ayrıca metin ayarlarını değiştirir H1.
Yazı Tip Başlığı: Open Sans

Başlık Mektubu Ağırlığı: Yarı Kalınlık
Yazı tipi stili başlığı: büyük harf
Başlık Metin Rengi: #000000
Başlık Metin Boyutu: 4VW
Hat yüksekliği: 1.1em
Mesafe Bazı özel dolgu değerleri de ekleyin.
Üst Dolgu: 10.8VW

Sol dolgu: 4VW
Doğru dolgu: 4VW
Sütunun ilk bölümünde ihtiyacımız olan ikinci sıra sütun yapısı #2 satır ekleyin aşağıdaki sütun yapısını kullanır:
Herhangi bir modül eklemeden mesafe, satır ayarlarını açın ve dolgu değerini değiştirin.

Üst Dolgu: 3VW

Sol dolgu: 4VW
Doğru dolgu: 4VW
1 numaralı metin modülünü Sütun 1’e ekleyin H3 içeriği ekleyin Satır ayarları ile bitirdikten sonra, devam edebilir ve ilk sütuna yeni bir metin modülü ekleyebilirsiniz. Seçtiğiniz bazı H3 içeriklerini girin.
H3 Metin Ayarları Tasarım sekmesine geçin ve uygun H3 metin ayarlarını değiştirin:

Başlık 3 Yazı Tipi: SANS’ı Aç

Başlık 3 Font Ağırlığı: Yarı Kalınlık
Başlık 3 yazı tipi stili: büyük harf
Başlık 3 Renk Metni: #000000
Başlık 3 Metin Boyutu: 1.5VW (Masaüstü), 2VW (Tablet), 2.5VW (Telefon)
Cep telefonuna birkaç üst kenar ekleyerek gelişmiş mesafe.
Bölücü modülünü sütun 1 görünürlüğüne ekleyin İlk sütunda ihtiyacımız olan ikinci modül bölücü modülüdür. ‘Ekran göster’ seçeneğinin etkinleştirildiğinden emin olun.

Divisor göster: evet
Hat bir sonraki satırı değiştirir.

Çizgi rengi: #000000
Mesafe Bölücü etrafında yer açmak için bazı özel marj değerleri ekleyin.

Üst Marj: 2VW
Alt marj: 2VW

Doğru marj: 2VW
Sütun 1’e Metin Modülü #2 ekleyin Bir sonraki içeriğin içeriğini ekleyin ve son olarak bu sütunda ihtiyacımız olan şey başka bir metin modülü. Seçtiğiniz bazı paragraf içerikleri girin.
Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin yazı tipi: SANS’ı aç

Metin Boyutu: 0.6VW (masaüstü), 1.1vw (tablet), 2vw (telefon)

Hat yüksekliği metni: 2em
Mesafe Birkaç alt ve sağ rulman da ekleyin.
Alt marj: 5VW (sadece telefon)
Doğru marj: 2VW

Sütun 1’deki tüm modüllerin klonları iki kez iki kez ve kalan sütuna yinelenme yerleştirin Sütun 1’deki tüm modülleri bitirdikten sonra, her modülü iki kez klonlayabilirsiniz. Kalan iki sıra sütuna yinelenen yerleştirin.
İçeriği Değiştirin Metin modülündeki tüm içeriği değiştirdiğinizden emin olun.
Aşağıdaki sütun yapısını kullanarak sütunun ilk bölümünde ihtiyaç duyduğumuz bir sonraki ve son satır sütununun 3 numaralı satır yapısını ekleyin:

Satır ayarlarının aralığı açın ve boşluk değerini değiştirin.

Üst Marj: 2VW

Üst dolgu: 0px

Aşağıda dolgu: 0px
Metin modülünü sütun 1’e ekleyin, içeriği ekleyin. Metin modülünü ilk sütuna ekleyerek seçtiğiniz bazı kopyalarla devam edin.
Bir bağlantı ekleyin, tüm modüle da bir bağlantı ekleyin.
Arka plan rengimiz ayrıca metin modülünün arka plan rengini değiştirir. Arka plan rengi: #000000

Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:

Metin yazı tipi: SANS’ı aç

Metin yazı tipi ağırlığı: çok kalın
Metin yazı tipi stili: büyük harf

Hizalama Metni: Orta
Metin rengi: #ffffff
Metin Boyutu: 1VW (masaüstü), 1.7vw (tablet), 2.5vw (telefon)
Mesafe ve bazı özel marj ve dolgu değerleri kullanarak modülün etrafında yer açın.
Üst kenar: 4VW (masaüstü), 11vw (tablet), 0vw (telefon)
Üst Dolgu: 4VW
Dolgu Alt: 4VW

Klon Metin Modülü ve Çoğaltma Sütun 2’ye yerleştirin Metin modülünü Sütun 1’de tamamladıktan sonra klonlayabilir ve kopyayı ikinci sütuna yerleştirebilirsiniz.
İçeriği değiştirin İçeriği ve bağlantıyı değiştirdiğinizden emin olun.
Arka plan rengini ve arka plan rengini değiştirin.
Arka plan rengi: #e5e5e5

Metnin rengini değiştirin, Tasarım sekmesine geçin ve metnin rengini değiştirin.

Metin rengi: #000000

Son fakat en az olmayan alanı değiştirin, boşluk ayarının yalnızca aşağıdaki değerleri içerdiğinden emin olun:
Üst Dolgu: 4VW

Dolgu Alt: 4VW
Resim Modülünü Sütun Bölüm 2’ye Ekleyin Görüntüyü bir sonraki bölüm sütununa yükleyin! Burada ihtiyacımız olan ilk modül görüntü modülü. Resim seçiminizi yükleyin veya bu yazının başında paylaşılan ZIP klasöründe bulabileceğinizi kullanın.

Yapıştırıcı boyut ayarlarını açın ve ‘zorla tam genişlik’ seçeneğinin etkinleştirildiğinden emin olun. Bu, görüntünün boyutunu tüm ekran boyutlarında korumasını sağlayacaktır.
Tam geniş zorla: Evet
Filtre Sonraki filtre ayarlarını değiştirin.

Doygunluk:% 0

Parlaklık:% 50
Metin Modülünü Sütun Bölüm 2’ye Ekleyin Paragraf ve İçerik Ekle H3 Bu sütunda ihtiyacımız olan ikinci modül metin modülüdür. İstediğiniz birkaç paragraf ve içerik girin H3. Arka plan rengi Modüle arka plan rengini ekleyin.

Arka plan rengi: #000000
Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin:
Metin yazı tipi: SANS’ı aç

Metin rengi: #ffffff

Metin Boyutu: 0.9VW (masaüstü), 1.6vw (tablet), 2.2vw (telefon)
H3 metin ayarları ayrıca metin ayarlarını değiştirir H3.

Başlık 3 Yazı Tipi: SANS’ı Aç
Başlık 3 Font Ağırlığı: Yarı Kalınlık
Başlık 3 yazı tipi stili: büyük harf
Başlık 3 Renk Metni: #ffffff

Başlık 3 Metin Boyutu: 1.5VW (Masaüstü), 2.5VW (Tablet), 3VW (Telefon)
Mesafe ve boşluk ayarlarına bazı özel dolgu değerleri ekleyin.
Üst Dolgu: 3VW
Dolgu Alt: 3VW
Sol dolgu: 2VW
Doğru dolgu: 2VW

Modülün ikinci klonu ve her iki modülü bitirdikten sonra Sütun 3’e (Ters Sipariş) yerleştirilmiş, devam edebilir ve klonlayabilirsiniz. Kalan bölüm sütununa kopyayı ters sırayla yerleştirin.
Metin Modülünü Değiştir Arka plan rengini değiştirin Üçüncü bölüm sütunundaki yinelenen metin modülünü açın ve arka plan rengini değiştirin.
Arka plan rengi: #ffffff
Metin rengini değiştirin Bir sonraki metin rengini değiştirin.
Metin rengi: #000000

H3 metninin rengini H3 metninin rengine uygun olarak değiştirin.

Başlık 3 Renk Metni: #000000
Modül Görüntünü Değiştirme Farklı görüntü görüntülerini bir sonraki yinelenen görüntü modülüne değiştirin.

Filtreyi değiştirin ve filtre ayarlarını değiştirin.
Doygunluk:% 0

Parlaklık:% 147
Bölüm 2 konumuna bölücü modülünü ekleyin, ayrıca tasarımımıza detay eklemek için değiştirilen bazı böcekler de ekliyoruz. İlk bölücü modülünü buraya yerleştirin:

Görünürlük ‘Ekran’ görüntüleme seçeneğinin etkinleştirildiğinden emin olun. Bölücüyü görüntüle: Evet

Çizgi bir sonraki satırın rengini ekler.
Çizgi rengi: #ffffff
Dönüşü değiştirin ve sol dönüşümün dönüşünü değiştirerek yatay bölücüyü dikey bölücü olarak değiştirin.

Sol: 270 derece

Çeviri çeviri ayarlarında ViewPort Geniş Birimi kullanarak Bölüm Modülü Yeniden Konumlandırma’nın çevirisini değiştirin.
Sağ: -19vw (masaüstü)

Aşağıda: -11vw (masaüstü), -24vw (tablet)
Görünürlük ve cep telefonundaki tüm modülleri gizleyin.

Bölücü modülünü Sütun Bölüm 3’e ekleyin Bir sonraki konumun konumu ve son olarak buraya eklenmesi gerekiyor:
Görünürlük ‘Görüntüleme’ seçeneğinin etkinleştirildiğinden emin olun.

Divisor göster: evet
Hat tasarım sekmesine geçer ve çizginin rengini değiştirir.
Çizgi rengi: #000000

Değiştir Yatay bölücüyü bir sonraki dikey bölücüye çevirin.

Sol: 270 derece

Çeviri ve Dövüşme Çevirisini Değiştirme Dönüşüm Ayarları’nı kullanarak.
Doğru: 2VW

Aşağıda: -11vw (masaüstü), -24vw (tablet)
Görünürlük Bölücünün aşağıdaki görüntü modülünün üzerinde görünmesini sağlamak için, görünürlük ayarlarında z indexini artıracağız. Ayrıca tüm modülü telefonda gizleyeceğiz.

Dizin Z: 2
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir