Divi ile Üst ve Alt Kaydırma Bağlantıları ile Tam Ekran Bölümleri Nasıl Oluşturulur

Divi'nin tam genişlikli başlık modülü, başlığın yüksekliğini tarayıcı pencerenizin yüksekliğine eşit olarak ayarlayacak bir tam ekran seçeneğiyle birlikte gelir. Bu, ekranının boyutu ne olursa olsun kullanıcıya her şeyi (ekranın üst kısmında) görünür tutarak UX ve tasarımı güçlendirmenin harika bir yoludur. Ancak bir başlıkta durmak zorunda değilsiniz.

Bu yazıda, tarayıcınızın yüksekliğine net bir şekilde ayarlanacak birden fazla "tam ekran" bölüm oluşturmak için tam genişlikli başlık modülünü gerçekten nasıl kullanabileceğinizi göstereceğim. Ve bazı üst ve alt "kaydır" düğmeleri ekleyerek, bu, kullanıcılar için keyifli bir görüntüleme deneyimi sağlar. Kaydırmak yerine tek yapmaları gereken tıklamak ve sonraki bölüm kendi görünümlerinde mükemmel bir şekilde görünecektir.

İşte anlatacağım şey:

• Tam genişlikli başlık modülünü kullanarak 4 benzersiz tam ekran bölümü nasıl oluşturulur
• Her bölümün üst kısmı için özel yukarı kaydırma düğmeleri nasıl oluşturulur.
• İçeriğin ekran boyutlarıyla orantılı kalmasını sağlamak için vw birimlerini boyutlandırmak için kullanma.

Gizlice Bakış

İşte bu eğitimde ne inşa edeceğime bir göz atın:

Dizayn

işlevsellik

Hedef ve Strateji

Tam ekran bölümleri gerçekleştirme stratejim Divi'nin tam genişlikli başlık modülünü kullanmayı içeriyor. Tam genişlikte başlık modülünün web sitenizdeki normal bölüm içeriği için kullanılmak üzere tasarlanmadığının farkındayım. Tüm bölüm için bir modülün içeriği ve ayarları ile sınırlısınız.

Ancak bu tam ekran bölümler, belirli içerikler için son derece iyi çalışabilir. Çoğu durumda (bir ürün özelliği gibi), zaten çok fazla içeriğe sahip olmak istemezsiniz. Gerçekten ihtiyacınız olan tek şey bir resim ve bir CTA. Ve tam genişlikte başlık modülü bu tür şeyler için mükemmeldir. Bunun, kullanıcı tıkladıkça görüntülerin tam ekrana yayılmasını garanti etmek isteyen portföy sayfaları için de çalıştığını görebiliyorum.

Bu tasarımı sergilemek istememin bir başka nedeni de, içeriğin tüm ekran boyutlarında tutarlı bir şekilde ortalanmış ve görünür olmasını sağlamak için metin ve boşluk içeren uzunluk birimlerinin nasıl kullanılacağına dair örnekler vermektir.

Bölüm 1 Oluşturma

Tam genişlikli başlık modülüne aşina olanlarınız için bu kolay ve anlaşılır olmalıdır.

Yeni bir sayfa oluşturun ve tam genişlikte başlık modülüyle tam genişlikte bir bölüm ekleyin.

Ardından bir arka plan resmi ekleyin (yaklaşık 1920 piksele 1080 piksel boyutunda).

Tam Genişlik Başlık Modülünü aşağıdakilerle güncelleyin:

Başlık: Zarif Tasarım
Alt başlık: Vivamus suscipit tortor eget felis porttitor volutpat.
Başlık Resmi URL'si: [resmi en az 800 piksel genişliğinde yükleyin]

Tasarım sekmesi altında aşağıdakileri güncelleyin:

Metin ve Logo Yönü: Ortalanmış
Tam Ekran Yap: EVET
Aşağı Kaydır Düğmesini Göster: EVET
Aşağı Kaydır Simge Boyutu: 50px (masaüstü), 30px (akıllı telefon)
Arka Plan Yerleşimi Rengi: rgba(240,91,76,0.91)
Metin Rengi: Açık
Başlık Metin Boyutu: 5vw Masaüstü, 32px Akıllı Telefon

Metin boyutunu bir vw değerine ayarlamak, metnin tarayıcı boyutuna ayarlanmasını sağlayacaktır. Akıllı telefon için bir piksel değeri eklemek, metnin çok küçük ölçeklenmemesini sağlar.

Gelişmiş sekmesi altında, CSS Kimliği için "bir" girin. Bu, aşağıdaki bölümün bu bölüme geri (veya yukarı) bağlanmasına izin verecektir.

Ayarları kaydet.

İşte son düzen. Oldukça basit.

2. Bölüm Oluşturma

İkinci bölüm için yeni oluşturduğumuz ilk fullwidth başlığını çoğaltalım ve içeriği aşağıdaki gibi güncelleyelim:

Başlık: Açılış Sayfası Dönüşüm Optimizasyonu
Düğme #1 Metni: Daha Fazla Bilgi Edinin
Düğme #2 Metni: [düğmenin görünmesi için boşluk eklemek için boşluk çubuğuna basın] İçerik: Curabitur placerat leo leo, id ultrices libero tincidunt a. Vestibulum turpis quam, condimentum a pellentesque.
2. Düğme URL'si: #one

Bu bölümün üst kısmındaki yukarı ok için #2 düğmesi kullanılacaktır. Yalnızca düğme simgesine (metne değil) ihtiyacımız olacağından, düğmeyi göstermek için düğme #2 metin giriş alanına boşluk eklememiz yeterlidir. 2 numaralı düğmenin “#bir” URL'si, en üst bölüme geçmek için kullanılacaktır.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

Metin ve Logo Yönü: Sol
Arka Plan Bindirme Rengi: rgba(51,51,51,0.9)
Başlık Metin Boyutu: 3vw (masaüstü), 3vw (tablet)

Düğme İki Metin Boyutu: 50px (masaüstü), 30px (akıllı telefon)
Düğme İki Kenar Genişliği: 0px
Düğme İki Simgesi: [ekran görüntüsüne bakın] Yalnızca İkinci Düğme için Fareyle Üzerine Geldiğinde Simgeyi göster: HAYIR
Düğme İki vurgulu Arka Plan Rengi: rgba(0,0,0,0)

Düğme Bir için Özel Stilleri Kullan: EVET
Düğme Bir Metin Boyutu: 2vw (masaüstü), 16px (akıllı telefon)
Düğme Bir Arka Plan Rengi: #f05b4c
Düğme Bir Kenar Rengi: #f05b4c
Düğme Bir Simgeyi Göster: HAYIR

Özel Dolgu: 7vw Sağ, 7vw Sol

Gelişmiş sekmesi altında, CSS kimliği için "iki" girin. Bu CSS kimliği, bir sonraki bölümde düğmemizde ayarlayacağımız bağlantı bağlantı url'sine karşılık gelecektir, böylece düğme bu bölümün en üstüne geri dönecektir.

Ardından Header Container giriş kutusuna aşağıdaki özel CSS'yi girin:

width: 100%

Bu isteğe bağlıdır, ancak içeriğiniz için size daha fazla yatay alan sağlamak için içerik kabının genişliğini artırmanın iyi olacağını düşündüm.

Ayrıca, Düğme İki giriş kutusuna aşağıdaki özel css'yi girin:

position: absolute;padding-left:0.4em !important;top: 0;left: 0;right: 0;margin: 0 auto;width: 0px;

Bu css, 2 numaralı düğmeyi bölümünüzün en üstüne yerleştirir.

Artık bölümümüzde üç çalışma butonunuz var. Düğme #1, içerik alanımızda kullanılacak daha fazla bilgi düğmesidir. Düğme #2, önceki bölüme geri dönen bağlantı bağlantısına sahip özel üst düğmedir. Ve Düğme #3, tam genişlikte başlıkta yerleşik olarak bulunan ve otomatik olarak aşağıdaki bir sonraki bölüme geçecek olan aşağı kaydırma düğmesidir.

Bu bölüm düzeninin, öne çıkan hizmetleriniz için CTA'lar oluşturmak için nasıl yararlı olabileceğini görebilirsiniz. Tek yapmanız gereken bölümü çoğaltmak ve başka bir özellik eklemek. Bu, kullanıcının kaydırmak zorunda kalmadan bölümlerinize kolayca tıklamasını sağlar.

Bölüm #3 Oluşturma

Bölüm 3'ü oluşturmak için Bölüm 2'yi çoğaltın ve tam genişlikli başlık ayarlarını aşağıdaki gibi güncelleyin:

Başlık: Şehir
Düğme #2 URL'si: #two (bu, yukarıdaki 2. bölüme bağlanacaktır)
Arka Plan Resmi: [resmi en az 1920 piksele 1080 piksel yükleyin] Arka Plan Resmi Boyutu: Kapak
Arka Plan Resmi Karışımı: Çarpma

Arka Plan Yerleşimi Rengi: rgba(255,255,255,0)
Başlık Başlık Düzeyi: H2
Başlık Metin Boyutu: 5vw (masaüstü)
Düğme Bir Arka Plan rengi: #333333
Düğme Bir kenarlık Renk: #333333

CSS kimliği: üç

İhtiyaçlarınıza bağlı olarak başlık metin boyutu vw değeri ile oynamanız gerekebilir. Metin büyümeye devam edeceğinden, gerçekten büyük monitörlerde neler olduğuna dikkat edin.

4. Bölüm Oluşturma

4. bölümü oluşturmak için 3. bölümü çoğaltın ve ardından aşağıdakileri güncelleyin:

Bu bölüm için başlık metnimizde iki renk kullanacağım. Bunu yapmak için biraz html kullanmamız gerekecek. Bu nedenle, 3. bölümden kopyalanan başlık metnini ve alt başlık metnini çıkarın ve aşağıdaki html'yi metin sekmesinin altındaki içerik kutusuna yapıştırın.

<span style="color: #333;">The</span> City

Html aralığı, “The” kelimesine koyu gri bir renk vermek için kullanılır ve “City” kelimesini beyaz olarak bırakır.

Düğme #2 URL'si: #üç (bu, yukarıdaki Bölüm #3'e bağlanır)

Sol Gradyan Rengi: rgba(240,91,76,0.88)
Sağ Gradyan Rengi: rgba(51,51,51,0.88)

Arka Plan Resmi Karışımı: Normal

Tasarım sekmesi altında….

Metin ve Logo Yönü: orta
İçerik Metni Rengi: #f05b4c
İçerik Metin Boyutu: 8vw
İçerik Satırı Yüksekliği: 1.3em

Düğme Bir Metin Boyutu: 1.7vw

Geçerli Düğme Bir Arka Plan Rengini silin ve ardından aşağıdaki degrade arka planını ekleyin:

Düğme Bir Sol Degrade Renk: rgba(51,51,51,0.87)
Düğme Bir Sol Degrade Renk: rgba(240,91,76,0.97)
Gradyan Yönü 90deg
Başlangıç ​​Konumu: %50
Bitiş Konumu: %50

Düğme Bir Kenar Genişliği: 0px
Düğme Bir Kenar Yarıçapı: 15 piksel
Düğme Bir Harf Aralığı: 1.3vw
Düğme Bir Vurgulu Harf Aralığı: 1.3vw

Bu tasarımın anahtarı, düğme harf aralığı ile birleştirilmiş içerik ve düğme metni boyutudur. Tasarımı değiştirmeden ekran boyutuna nasıl uyum sağlar.

Ve işte dört bölümün tamamı tamamlanmış nihai sonuç.

Orijinal Düğme Konumlarını Kaydırma Bağlantıları Olarak Kullan

Basit bir düzeniniz varsa, orijinal tam genişlikte başlık düğmelerini kaydırma bağlantıları olarak kullanabilirsiniz. Buradaki hile, bir simge konumunu sola ve bir sağa ayarlamaktır. Ve elbette, düğme URL'lerinizin, kullanıcıların kaydırmasını istediğiniz bölümle eşleştiğinden emin olun.

Herhangi Bir Bölüm Nasıl Tam Ekran Yapılır

Tam ekran sayfa bölümleri için tam genişlikte başlık modülünü kullanmanın basitliğinden uzaklaşmak istiyorsanız, bunu özel CSS ile yapabilirsiniz. Ancak sizi uyarmalıyım, özellikle tam ekran bölümünüzün içinde çok fazla içerik (satır, modül) satırı ve modülü varsa, bu biraz zor olabilir. Bu tasarım için gerçekten önce mobili düşünmeniz gerekiyor, bu nedenle bir mobil ekrana sığabileceklerinizle sınırlısınız. Bu nedenle, üç satır içerikli bir bölüm, şüphesiz bir mobil ekrana sığacaktır.

Bu yüzden şimdilik size sadece temel fikri vereceğim. Bir bölümü tarayıcının tüm yüksekliğine yayılacak şekilde değiştirmek için, gelişmiş bölüm ayarlarınızdaki ana öğe kutusuna aşağıdaki CSS'yi ekleyebilirsiniz:

 
height: 100vh;

Gezinme başlığını (ve sabit gezinme konumunu) hesaba katmak için, css'ye küçük bir değişiklik eklemeniz gerekecektir.

height: calc(100vh - 53px)

Bu, sayfanın en üstünde bulunan başlık gezinmesini hesaba katmak için bölümünüzün altını 53 piksel kırpır.

Satırınızın sayfada dikey ve yatay olarak ortalandığından emin olmak için, satır ayarları gelişmiş sekmesi altındaki ana öğe giriş kutusuna aşağıdaki özel CSS'yi eklemeniz gerekir:

height: 50%;width: 80%;position: absolute;top: 0; left: 0; bottom: 0; right: 0; margin: auto !important;

Bundan sonra, içeriğin mobil cihazlarda ekrandan taşmaması için modül içeriğinizin uygun css uzunluk birimleri kullanılarak ölçeklenebilir olduğundan emin olmanız gerekir.

Yukarıda belirtilen özel CSS'nin yerinde olduğu bir bölüm ve satıra hızlı bir örnek. Nasıl görüneceğini size göstermek için satırın içine bir metin modülü ve bir düğme modülü ekledim.

Tek Sayfa Web Siteleri için Mükemmel

Kullanıcıyı sayfanın tam ekran bölümlerine getirmek için kaydırma bağlantılarını kullanmanın yanı sıra, gezinme menünüze kullanıcının sayfanın herhangi bir bölümüne atlamasını sağlayacak özel bağlantı bağlantıları da ekleyebilirsiniz. Bu, tek sayfalık bir web sitesi oluşturmanın arkasındaki temel fikirdir.

Örneğin, bu sayfayı tek sayfalık bir web sitesine dönüştürmek isterseniz, özel bir menü oluşturmanız ve bağlantı URL'lerinizi her bölümünüzün CSS kimlikleriyle eşleşecek şekilde ayarlamanız yeterlidir.

Son düşünceler

Divi'nin tam genişlikte başlık modülünü kullanarak tam ekran bölümler oluşturmak, bölümlerinize kesinlikle daha fazla önem verecektir. Ve kaydırma bağlantıları ile kullanıcılar, içeriğinizde büyük bir tam ekran dikey kaydırıcı gibi kolayca gezinebilir. Buradaki zorluk, içeriğinizin harika görünmesini ve tüm ekran boyutlarına uygun olmasını sağlamaktır ve metin için vw uzunluk birimini kullanmak kesinlikle bunu kolaylaştırır.

Bu gönderide bölümlerin her biri için kullanılan tasarımlar, bu yaratıcı meyve sularının akmasını sağlamak ve ilham vermek içindir. Umudum, burada kullanılan tekniklerden bazılarını alıp kendi tasarımınızla hepimizi şaşırtmanızdır.

Yorumlarda sizden haber bekliyorum.

Şerefe!