Ekranı Divi ile üst ve alt kaydırma bağlantılarıyla nasıl yapılır
Fullwidth Divi başlık modülü, başlığın yüksekliğini tarayıcı pencerenizin yüksekliğine eşit olarak ayarlayacak tam ekran seçeneği ile birlikte gelir. Bu, ekran boyutları ne kadar olursa olsun, kullanıcılar tarafından (en iyi paro’da) görülen her şeyi tutarak UX ve tasarımı artırmanın iyi bir yoludur. Ama bir başlıkta durmanıza gerek yok. Bu yazıda, tarayıcı yüksekliğinize ayarlanacak bazı “tam ekran” bölümleri yapmak için FullWidth başlık modülünü gerçekten nasıl kullanabileceğinizi göstereceğim. Üst ve altta birkaç “kaydırma” düğmesi ekleyerek, bu kullanıcılar için hoş bir izleme deneyimi sağlar. Kaydırma yerine, tek yapmaları gereken tıklamak ve bir sonraki bölüm görünümlerinde mükemmel görünecektir.
Tartışacağım şey bu:
Tam geniş bir başlık modülü kullanarak 4 benzersiz tam ekran parçası nasıl yapılır
Özellikle her bölümün üst kısmı için bir kaydırma düğmesi nasıl yapılır.
İçeriğin ekran boyutuyla orantılı kalmasını sağlamak için bir VW ünitesinin boyut olarak nasıl kullanılması.
Aşağıdaki gizlice göz atma, bu öğreticide yapacağım şeylere bakmaktır: Tasarım
Ancak, bu tam ekran belirli içerik için çok iyi çalışabilir. Birçok durumda (ürün özellikleri gibi), yine de çok fazla içeriğe sahip olmak istemezsiniz. Sadece gerçekten ihtiyacınız olan resimler ve CTA. Ve Fullwidth başlık modülü bu tür şeyler için mükemmeldir. Bunun, kullanıcı tıkladığında tam ekrana uzanan görüntüleri garanti etmek isteyen bir portföy sayfası için de hizmet ettiğini görebiliyorum. Bu tasarımı sergilemek istememin bir başka nedeni, içeriği merkezlenmiş ve tüm ekran boyutlarında tutarlı bir şekilde görmek için uzun bir birimin metin ve boşlukla nasıl kullanılacağına dair bir örnek vermektir. Tam genişliğe alışkın olanlar için Bölüm 1 yapın. Başlık Modülü, bu kolay ve doğrudan olmalıdır. Yeni bir sayfa oluşturun ve tam geniş bir başlık modülüyle dolu geniş bir parça ekleyin.
Ardından bir arka plan görüntüsü ekleyin (yaklaşık 1920px kat 1080 piksel ölçer). Aşağıdakilerle dolu geniş başlık modülünü güncelleyin: Başlık: Zarif Tasarım Alt Posları: Vivamus Suscipit Tortor Egetant Felis Porttitor Volutpat. Güçlendirme Resim URL: [Minimum 800 piksel genişliğinde görüntü yükleyin] Tasarım sekmesinin altında aşağıdakileri güncelleyin: Metin Oryantasyonu ve Logo: Tam Ekran Merkezi: Evet Botall Topu Daha İyi Görüntüle: Evet Simgenin boyutunu aşağı kaydırın: 50px (masaüstü), 30px (akıllı telefon) Arka plan: RGBA (RGBA (akıllı telefon) 240, 91,76,0,91) Renk Metin: Işık Metin Başlığı Boyut: Masaüstü 5VW, 32px akıllı telefon Metnin boyutunu VW değerine ayarlamak, metnin tarayıcı boyutuna göre ayarlandığından emin olur. Bir akıllı telefona piksel değeri eklemek, metnin çok küçük olmamasını sağlar. Gelişmiş sekmesinin altında, CSS kimliği için “Bir” girin. Bu, alt parçanın bu bölüme yeniden bağlanmasına (veya yükselmesine) izin verecektir. Ayarları ayarlayın. Aşağıdakiler son düzendir. Oldukça kolay.
Bölüm #2 Oluştur İkinci bölüm için, yeni oluşturduğumuz ilk tam genişlik başlığını çoğaltalım ve içeriği aşağıdaki gibi güncelleyelim: Başlık: Açılış Sayfalarının Dönüşümünü Optimize etme #1 Metin: Daha Fazla Öğrenin Düğmesi #2 Metin: [Eklemek için Basın Uzayları: Görünür düğme için aralık] Doldur: Curabitur Placerat Leo Leo, Id Ultrices libero TinciDunt a. Vestibulum Turpis Quam, bir pelentesk çırpın. #2 URL düğmesi: #bir #2 düğmesi, bu bölümün üst kısmındaki üst ok için kullanılacaktır. Yalnızca bir düğme simgesine (metin değil) ihtiyacımız olduğu için, düğmeyi görüntülemek için yalnızca metin giriş sütunu #2’ye boşluk eklememiz gerekir. 2 numaralı düğme için “#bir” URL’si, üste doğru yuvarlanmak için kullanılacaktır. Tasarım sekmesinin altında aşağıdakileri güncelleyin: Metin Oryantasyonu ve Logo: Arka Plan Sol Rengi: RGBA (51.51.51,0,9) Metin Başlığı Boyutu: 3VW (masaüstü), 3VW (Tablet) İki boyutlu metin boyutu: 50px (masaüstü) , 30px (akıllı telefon) İki düğme sınır genişliği: 0px İki simge düğmesi: [Ekran yakalamaya bakın] Yalnızca iki düğmeyi işaret ettiğinde simgeler görüntüleyin: İki düğme yok, arka plan rengi: rgba (0,0,0,0)
Bir düğme için özel bir stil kullanın: evet bir boyut metin düğmesi: 2vw (masaüstü), 16px (akıllı telefon) Bir arka plan renk düğmesi: #f05b4c Bir renk düğmesi limiti: #f05b4c Tek düğme simgesini görüntüleyin: özel dolgu değil: 7VW sağ , 7VW Gelişmiş sekmesinin altında kaldı, CSS kimliği için “İki” girin. Bu CSS kimliği, bir sonraki bölümdeki düğmemize ayarlayacağımız ankraj bağlantısının URL’siyle eşleşecek, böylece düğmenin bu bölümün üst kısmına geri dönmesi. Ardından, giriş üstbilgisi kapsayıcısına aşağıdaki özel CSS’yi girin: Genişlik:%100 Bu isteğe bağlıdır, ancak içerik kapsayıcısının genişliğini arttırmak daha iyi olurdu, böylece içeriğiniz için size daha yatay alan sağlar. Ayrıca, iki anahtar giriş kutusuna aşağıdaki özel CSS’yi girin: Konum: Mutlak; Dolgu-Sol: 0.4EM! Önemli; Top: 0; Sol: 0; Sağ: 0; kenar boşluğu: 0 otomatik; genişlik: 0px;
Bu CSS, #2 düğme simgesini kendi başına yerleştirir.
Şimdi bölümümüzde çalışan üç düğmeniz var. #1 düğmesi, içerik alanımızda kullanım için daha ileri çalışma düğmesidir. #2 düğmesi, önceki bölüme geri dönen bir çapa bağlantısına sahip en iyi özel düğme. Ve #3 düğmesi, aşağıdaki bir sonraki bölüme otomatik olarak kaydırılacak tam genişlik başlığındaki Balowing düğmesidir.
Bu bölümün düzeninin üstün hizmetiniz için CTA oluşturmak için nasıl yararlı olabileceğini görebilirsiniz. Tek yapmanız gereken bölümü çoğaltmak ve diğer özellikleri eklemek. Bu, kullanıcıların kaydırma yapmadan kolayca tıklamalarına izin verecektir. Bölüm #3, Bölüm #3, Yinelenen Bölüm #2’yi oluşturmak için oluşturun ve tam geniş başlık ayarlarını aşağıdaki gibi güncelleyin: Başlık: Şehir URL’si Düğme #2: #dua (bu, yukarıdaki 2. bölüme bağlanacak) Arka Plan Görüntü: [[ En az 1920px kez 1080px] Arka plan görüntü boyutu: Kapak Karışık arka plan görüntüsü: Arka planın arka planını çarpın: RGBA (255,255,255,0) Başlık Seviyesi: H2 Başlık Metin Boyutu: 5VW (Masaüstü) Bir Renk Arka Plan Düğmesi: Renk Sınırı: #333333 ID CSS: Üç İhtiyaçlarınıza bağlı olarak başlık başlığının VW değeri ile oynamanız gerekebilir. Çok büyük bir monitöre ne olduğuna dikkat edin, çünkü metin büyümeye devam edecektir.
Bölüm #4’ü yapmak için #4, Bölüm #3’ü yapmak ve ardından aşağıdakileri güncellemek için: Bu bölüm için başlık metnimizde iki renk kullanacağım. Bunu yapmak için birkaç HTML kullanmamız gerekiyor. Bu, Bölüm # 3’ten kopyalanan altyazıların başlığını ve metnini kaldırın ve metin sekmesinin altındaki içerik kutusuna aşağıdaki HTML’ye yapıştırın. & lt; span style = & renk; renk: #333; & amp; Şehir
HTML aralığı, “şehir” kelimesini beyaza bırakarak “” koyu gri kelimesini vermek için kullanılır. #2 URL düğmesi: #üç (bu yukarıdaki bölüm #3’e bağlanacaktır) Sol gradyan rengi: RGBA (240,91,76,0.88) Sağ gradyan rengi: RGBA (51.51.51,0.88) Karışık arka plan görüntü karışımı: Normal Altında Tasarım sekmesi … Metin Oryantasyonu ve Logo: Orta Renk İçeriği Metin: #F05B4C İçerik Metin Boyutu: 8VW İçerik Hattı: 1.3EM Tek Metin Boyutu Düğmesi: 1.7VW Bir Düğme Arka Plan Rengi Şimdi aşağıdaki gradyan Renk Düğmesi: Bir Sol Gradyan Renk Düğmesi: RGBA (51,51,51,0.87) Bir Sol Gradyan Renk Düğmesi: RGBA (240,91,76,0,97) Gradyan yönü 90 Derece Başlangıç Konum:% 50 Nihai Konum:% 50 Bir Düğme Genişlik Sınırı: 0px Düğmesi Bir Limit yarıçapı: 15px Bir Aralık Harf Düğmesi: 1.3VW One Düğmenin Mesafesi Donanma Tasarımı değiştirmeden ekran boyutuna nasıl ayarlanır.
Ve bu dört bölüm tamamlandığı son sonuç.
Tam Ekran Nasıl Yapılır Tam Ekran sayfası için tam geniş bir başlık modülü kullanarak basitlikten kurtulmak istiyorsanız, özel bir CSS ile yapabilirsiniz. Ama sizi uyarmalıyım, bu biraz karmaşık olabilir, özellikle de tam ekranınızda çok fazla içerik (satır, modül) satırlarınız ve modülleriniz olduğunda. Bu tasarım için ilk önce hücresel hakkında düşünmelisiniz, bu nedenle cep telefonu ekranına sığabileceklerinizle sınırlısınız. Dolayısıyla, üç satır içeriğine sahip kısım kesinlikle cep telefonu ekranına sığacaktır. Şimdilik size sadece temel fikri vereceğim. Tarayıcının tam yüksekliğine ulaşmak için parçayı değiştirmek için, devam eden bölüm ayarlarında aşağıdaki CSS’yi ana eleman kutusuna ekleyebilirsiniz: Yükseklik: 100VH;
Navigasyon başlığını (ve sabit bir NAV konumunu) dikkate almak için CSS’ye küçük bir değişiklik eklemeniz gerekir. Yükseklik: Calc (100vh – 53px) Bu, sayfanın üst kısmındaki başlık navigasyonunu hesaplamak için 53 piksel bir kısmının altını kesti. Satırınızın sayfanın ortasında dikey ve yatay olarak kaldığından emin olmak için, devam eden sekme ayarlarının altındaki ana öğe giriş kutusuna aşağıdaki özel CSS eklemeniz gerekir: yükseklik:%50; genişlik:%80; konum: mutlak; Üst: 0; Sol: 0; Alt: 0; Sağ: 0; Marj: Otomatik! Önemli; Bundan sonra, içeriğin mobil cihazdaki ekranı karşılamaması için modül içeriğinizin doğru CSS birimi kullanılarak boşaltılabileceğinden emin olmanız gerekir. Aşağıda, yukarıda belirtilen özel CSS ile parçanın ve satırın kısa bir örneği verilmiştir. Neye benzediğini göstermek için Metin Modülünü ve Düğme Modülünü satırdaki ekledim. Bir -sayfa web sitesi için mükemmel, kullanıcıları tam ekran bölümünden getirmek için bir kaydırma bağlantısı kullanmanın yanı sıra, kullanıcıların herhangi bir sayfaya atlamasını sağlayacak gezinme menünüze özel bir çapa bağlantısı ekleyebilirsiniz. Bu, bir sayfa web sitesi yapmanın arkasındaki temel fikirdir. Örneğin, bu sayfayı tek sayfa bir web sitesine dönüştürmek istiyorsanız, özel bir menü oluşturabilir ve bağlantıların URL’sini her bir parçası için CSS kimliğine uyacak şekilde ayarlayabilirsiniz. Bir kaydırma bağlantısı ile kullanıcılar, büyük bir tam ekran dikey kaydırma gibi içeriğinizde kolayca gezinebilir. Zorluk, içeriğinizin iyi görünmesini sağlamak ve tüm ekran boyutlarına uymaktır ve bunu kolaylaştırmak için metin için uzun bir VW ünitesi kullanır. Her bölüm için bu yazıda kullanılan tasarım, yaratıcı meyve suyu akışına ilham vermeyi ve yapmayı amaçlamaktadır. Umudum, burada kullanılan bazı teknikleri almanız ve hepimizi kendi tasarımınıza hayran bırakmanızdır. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
