Divi’de özel bir ekran sayfası düzeni nasıl tasarlanır
Tam ekran sayfası düzeni, web tasarımı dünyasında gerçekten yararlı olabilir. Tam ekran sayfası düzeninin ana avantajlarından biri görünürlüktür. Tam ekran sayfasıyla, tüm sayfa içeriğiniz tarayıcı penceresinde kalır. Kullanıcıların hızlı bir şekilde kaydırdığı bir dünyada, ViewPort tarayıcısında yer alan tüm içeriğinizin başlangıçtan itibaren izleyiciler için ferahlatıcı olabileceği ve dönüşüm konusunda da yardımcı olabilir. Divi’ye alışkınsanız, tam ekran işlevselliğine sahip FullWidth başlık modülünü zaten bilmelisiniz. Bu, minimum içerikle dolu bir ekran sayfası oluşturmak için olağanüstü bir çözümdür. Ancak, birçok satır ve modül içeren normal bir bölüm kullanarak tam ekran sayfası düzeni oluşturmaktan yararlanmak istiyorsanız, bu sizin için bir gönderidir. Tarayıcı pencerenize göre sayfa içeriğinizi (üstbilgi ve altbilgi çubuğu bile) ve daha sonra farklı bir tarayıcı boyutunda iyice iyi sağlamak için bazı basit hileler göstereceğim.
Başlayalım. Aşağıdaki Sneak Peek, bu öğreticide yapacağımız son tam ekran sayfası düzeninin bir görüntüsüdür.
Şimdi sayfanızı sıfırdan oluşturmak için ön uçta Divi Builder’ı kullanın. Ardından, bir satır sütun ile düzenli bir parça ekleyin. Ayrıca, sayım süresi (veya herhangi bir modül) için modülü bir sütun satırına ekleyin. Her şeyi kolaylaştırmak için, geri sayımdaki arka plan rengini kaldırın ve bahçedeki parçanın yüksekliğini daha fazla tanıyabilmemiz için arka plan rengini parçaya ekleyin. Şu anda yüksek kısım içerdiği içeriğin yüksekliğine göre. Bu durumda sahip olduğumuz tek içerik, Sing modülünde bir satırdır. Şimdi bölümün ayarlarını açın ve Gelişmiş sekmesini açın ve ana öğeye aşağıdaki özel CSS ekleyin: min-yükseklik: 100VH; Ekran: Flex;
Esnek yönlendirme: sütun;
Minimum yükseklik parçanızı 100vh olarak ayarlayın (görünüm görünümünün% 100’ü), parçanızın tam bir tarayıcı penceresi (veya görünüm portu) içermesini sağlayacaktır. Özellik “Ekran: Flex”, dikey parça içeriğinize odaklanmanın hızlı ve kolay bir yoludur. VH uzun birimi hakkında daha fazla bilgi için bu kullanışlı kılavuza bakın. Sonuçları görmek için kılık değiştirmiş tarayıcıdaki doğrudan sayfanıza bakın, çünkü WordPress’e girerseniz, üst yönetici bıçakları tarayıcının yüksekliğini hafifçe azaltacaktır. Divi’de özel bir ekran sayfası düzeni nasıl yapılacağına dair temel fikir budur. Üstbilgiyi ve altbilgiyi tam ekran sayfanıza ekleyin. Üstbilgi ve alt altbilgi bıçaklarının tam ekran sayfasına dahil edilmesini istiyorsanız, küçük bir ayar yapmanız gerekir. İlk olarak, sayfanızın şablonunu sayfanızın düzenleyicisinin arkasındaki varsayılan şablona geri değiştirin. Üstbilgi ve alt altbilgi dahil, bölümün artık daha önce olduğu gibi doğru olmaması için ViewPort tarayıcınıza ek yüksekliği artıracaktır. Bunun nedeni, sayfanızın görünüm alanının yüksekliğinin% 100 yüksekliğinden ve başlığınızın ve altbilgi bıçaklarınızın yüksekliğinden oluşmasıdır. Bu çok fazla. Bunu düzeltmek için, bizim tarafımızdaki özel CSS’yi aşağıdaki gibi ayarlamamız gerekir: Min -Height: Calc (100VH – 133px); Ekran: Flex;
Esnek yönlendirme: sütun;
Tek fark minimum yükseklik değeridir. Şimdi başlık bıçaklarının ek yüksekliğini (pikselde) ve alt altbilginin toplu olarak dikkate alınan hesaplamalar var. 132px, toplam varsayılan üstbilgi (80px) ve alt altbilgi çubuğunun (53px) varsayılan yüksekliğine dayanır.
Artık Divi’de özel bir tam ekran sayfasının nasıl yapılacağına dair temel bir anlayışa sahip olduğumuza göre, daha karmaşık bir tasarıma girelim. Bu tasarımı başlatmak, yeni bir sayfa oluşturmak, sayfa başlığınızı verin ve Divi Builder’ı uygulayın. Önceden yapılmış bir düzen seçeneğini seçin ve Kütüphane açılır penceresinden yükten Fitness Gym Düzen sayfasını seçin. Ardından fiyat sayfasını kullanmak için tıklayın. Düzen üreticiye yüklendikten sonra, ön uçta (görsel oluşturucu) oluşturmak için düğmeyi tıklayın ve başlamaya hazırsınız. Önceden yapılmış düzenin yeni bir parçası yapmak, tasarımın başlamasına yardımcı olmak için oradadır. Bu düzen tasarım öğesini yol boyunca kullanacağız ve bitirdikten sonra kalan düzeni kaldıracağız. Tam ekran düzenimiz için ana kısmı oluşturmak için devam edin ve yeni bir düzenli bölüm oluşturun ve sayfanın en üstüne sürükleyin. Ardından, sıraya çeyrek çeyrek yapısının dörtte birini ekleyin. Bu tam ekran sayfamızın temeli olacaktır.
Multiseect (CTRL/CMD’yi basılı tutun ve tıklayın) kullanarak sütununuza modüller ekleyin, düzenin ilk bölümündeki ilk iki satırdaki tüm modülleri seçin ve sayfanın üst kısmındaki yeni bölümün ilk sütununa sürükleyin. Ardından, aynı düzenin ilk bölümünün üçüncü sırasındaki tüm modülleri kopyalamak için bir çoklu seçici kullanın ve sayfanın yeni kısmının ikinci sütununa ekleyin. Metin beyaz arka plan nedeniyle gizlenecek, ancak arka plan rengini daha sonra değiştireceğiz. Üçüncü sütunda kaydırıcı modülünü ekleyin. Bu değişim sonunda tam bir ekrana ulaşacak, ancak şimdilik içeriği hazırlayalım. Kaydırıcı ayarlarında, varsayılan olan iki varsayılan slayttan birini silin, ardından tek bir slayt ayarlarını açmak için tıklayın. Slayt ayarlarında, görüntünün tarayıcının tam yüksekliğine ulaşacak kadar büyük olduğundan emin olmak için bir arka plan görüntüsü ekleyin. Şimdilik ihtiyacımız olan tüm modüllerimizi ele alıyor. Tasarım ayarlarını daha sonra yeniden ziyaret edeceğiz, ancak şimdilik çizgimizi ayarlayalım. Satır Ayarlarını Ayarlayın Satır ayarlarını açın ve sütun 2’ye arka plan rengi ekleyerek başlayın: Sütun 2 Arka Plan Rengi: #2A2E40 Aşağıdaki tasarım sekmesine atlayın ve güncelleme: Bu satırı tam genişlik yapın: evet talang genişliği: 1 Eşit Sütun Yüksekliği: Evet Özel Dolgu: 0px üst, 0px aşağıda Şu anda parçamızı ayarlamak için gereken tek şeyin ayarlarını ayarlamak, varsayılan dolguyu kaldırmaktır, ancak bence ilk sütunun üstünü çerçeveleyen bir bölme parçası eklemek daha iyi olurdu. Aşağıdaki bölümleri açın ve Güncelleme: Üst Bölü Kuvveti: Üst Ekran Renk Ekranına bakın Catch: #2A2E40 Üst Sertifika Yüksekliği: 8VW Yatay Tekrar Üst Sertifika: 0.8x Flip Üst Bölücü: Dikey ve Yatay Pilding Custom: 0px üst, 0px aşağıda Bölücü, bölümün altında içerik görüntülemek için düzenlendiğinden, sütun 3’teki kaymanın arkasına gizlenir ve sütun arka plan rengiyle eşleştiği için sütun 2’de görüntülenmez. Bu, sütun 1 için iyi bir kızartma tasarım öğesi oluşturur. Bu noktada daha önce yapılan düzenin geri kalanını kaldırın, önceki düzen ile birlikte gelen tüm parçaları silebilmemiz için tam ekran sayfalarımızın düzeni için her şeye sahibiz. Sayfanızın şimdiye kadar gösterdiği şey budur. Şimdi sayfalarımızı tam bir ekran olacak şekilde ayarlamaya hazırız. Bu makalenin başında temel örneğe tam ekran sayfası oluşturmak için CSS Custom ekleyin, doğrudan bölüme özel CSS ekliyorum. Ancak, tam ekran işlevimizin yalnızca masaüstleri için geçerli olduğundan emin olmak için (ve hücreseldeki varsayılan stili kullanarak), sayfa ayarlarının altındaki CSS’ye ekleyeceğim. Bu, yalnızca bu sayfa için geçerli olan ama aynı zamanda kuvveti yalnızca masaüstüyle sınırlayan medya sorguları ekleme seçeneği sunan harici bir CSS eklememe izin verecek. Ön uç üreticinin altındaki ayarlar menüsünden sayfa ayarlarını açın. Devam sekmesinin altında, aşağıdaki özel CSS’yi girin: @media (min-width: 980px) { /*CSS kimlikleri eklenirse, bu, başlık ve alt altbilgi çubuğunu hesaba katarak tarayıcı penceresiyle aynı yüksekliği yapar*/
#Fullsection, #fullslide .et_pb_slide {
Yükseklik: Calc (100VH – 133px);} /*Bu, CSS kimliğinin uygulandığı bölümün içeriğini merkezler*/
#Fullsection {
Ekran: Flex;
Esnek yönlendirme: sütun;
Taşma: gizli;
}
/*Bu, alt altbilgi çubuğunu tam genişliği tam genişlik ile eşleştirecek şekilde yaparsa,*/#footer-bottom uygulanırsa. Kapsayıcı {
Genişlik:%100;
Max-Width:%100;
Dolgu-sağ: 30px;
Dolgu-sol: 30px;
}
}
CSS’ye alışık olmayanlarınız için, kodun tarayıcı genişliği en az 980px olduğunda stil stilini uygulayan medya sorguları tarafından sarıldığını unutmayın. Parantez ile ilk görüntüler “FullSection” adlı bir CSS kimliği ve ardından “Fullslide” adı verilen bir CSS kimliği içerir. Her iki CSS kimliğinin de hatırlanması önemlidir, çünkü onu bölümümüze ve kaydırıcımıza eklememiz gerekir. Bunu yaptıktan sonra, her iki tam ekranı (tarayıcı penceresinin tam yüksekliği dahil) yapmak için CSS “Yüksekliği: Calce (100VH – 133px)” uygulanacaktır. İkinci snippet, Flex ekran özelliğini bölüme uygulayacak ve tüm parçaları dikey olarak ortalayacak. Bununla ilgili daha fazla bilgi için, Divi’de içeriği dikey olarak nasıl uyumlu hale getireceğiniz konusundaki yazımıza bakın. Üçüncü görüntüler tamamen isteğe bağlıdır. Bu sadece altbilgi Barat’ı tasarıma biraz daha iyi eşleştirmek ve ayrıca ekleyeceğimiz tam stil stiline uyacak şekilde tam genişliği tam genişliği yapar. Artık harici bir CSS’niz olduğuna göre, CSS kimliğimizi bölümümüze ve kaydırıcımıza ekleyebiliriz. Bölüm ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin: Kimlik CSS: Tam Bölüm
Şimdi sütun 3’teki kaydırıcılar için kaydırıcı modül ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin: ID CSS: Tam Slayt
Bu noktada son dokunuş, tam ekran sayfasının işlevselliği zaten oradadır ve çalışmalıdır. Emin olmak için kılık değiştirmiş tarayıcıda kontrol edebilirsiniz. Geriye kalan tek şey birkaç son dokunuş. Sütunumuza boşluk ekleyin, Sütun 1 ve sütun 2’nin üstüne aşağıdaki gibi bir miktar dolgu eklemek için satır ayarlarınızı açın: Sütun 1 Dolgu Özel: Top 12VH, Sol 1VW, Sağ 1VW Sütun 2 Dolgu Özel: Top 12VH, Sol 1VW , doğru 1vw. Üst dolgu değeri için uzun VH ünitesini kullanıyorum. Bu, dolgunun görünüm yüksekliği ile taranmasına izin vererek tarayıcı penceresi yükseldiğinde daha fazla dolgu yapar ve tarayıcı daha kısa olduğunda daha az dolgu yapar. Sol ve sağ dolgu değeri için VW uzun ünitesini (görünüm portu genişliği) kullanıyorum, böylece tarayıcının genişliğine göre dolgu alacak. Ekran alanını en üst düzeye çıkarmak için büyük bir metne bir VH uzunluğu birimi ekleyin, gördüğünüz gibi, tarayıcı penceresi ile tamamen boşaltılmayan çok büyük bir metne sahip birkaç modül vardır. Bunu düzeltmek için metnin boyutunu VH uzunluk birimine ayarlayabiliriz. Bu, metnin daha kısa bir tarayıcı ekranında azaltılmasına izin verecektir. Sütun 1’in üst kısmındaki metin modülü ayarlarını açın ve H1 başlık metninin boyutunu 7VH (VW değil) olarak güncelleyin.
Ardından, sütun 2’nin üst kısmındaki metin modülü ayarlarını açın ve başlık 2 ila 6vh metin boyutunu güncelleyin.
Kaydırıcı tasarımını güncelleyin Tasarımı tamamlamak için düğme tasarımını sütun 2’de kopyalayabilir ve kaydırıcı düğmesi stiline ekleyebilirsiniz. Bunu yapmak için, sütun 2 ve sağ -düğün için düğme ayarlarını açın, düğme seçeneği kategorisine tıklayın ve “Stil düğmesini kopyalayın.” .
Her slayta da bir arka plan germe ekleyebilirsiniz.
Üstbilgi ve altbilgi bıçaklarının ayarlanması, altbilgimizi genişliğe genişleten küçük bir CSS parçası eklediğimizi hatırlayabilirsiniz. Bu, ana menü bıçaklarımızı da geniş hale getirmeyi beklemek içindir. Ana menü çubuğunuzu tam olarak yapmak için WordPress kontrol panelini açın ve Divi> Tema Ayarı> Başlık ve Navigasyon> Ana Menü çubuğuna gidin. Ardından tam genişlik seçeneğini kontrol edin. Alt altbilgi bıçaklarımızı tam ekran sayfamızda gösterdiğimiz için, tasarıma uyacak şekilde alt çubuğun arka plan rengini güncelleyebiliriz. Tema ayarında kalın ve alt bıçağın altına alın. Ardından arka plan rengini #2A2E40 olarak ayarlayın. Ardından değişikliklerinizi yayınlayın. Buradaki nihai sonuç son tasarım. Tarayıcı penceresinde her şeyin nasıl iyi eşleştiğine dikkat edin. Ve tarayıcıyı farklı bir boyutta ayarlarken ne tür bir şekilde görün. Ve unutmayın, çünkü özel CSS’imizi yalnızca 980px’den büyük tarayıcının genişliğine uyguluyoruz, tasarım mobil cihazlarda normale dönecektir. Burada tabletler ve akıllı telefonlarda. Son zihin, parçanın yüksekliğini birkaç CSS görüntüsü ile tarayıcınızın yüksekliğine doğru nasıl ayarlayacağınızı anladıktan sonra Divi’deki tam ekran sayfasının düzenini çok fazla değil. Ancak bir kez aldıktan sonra, Divi Builder’da sayısız tam ekran sayfası tasarımı oluşturabilirsiniz. Her şeyin tarayıcı penceresinde görünmesini planlıyorsanız, içeriği minimumda tutmaya dikkat edin. Bu tür tasarımlar kişisel siteler, promosyon teklifleri ve her türlü yön sayfası için iyi çalışır. Bu aynı zamanda biraz içeriğe sahip sayfalar için iyi bir çözümdür ve sayfanın ortasında görüntülenen alt altbilgi çubuğundan kaçınmak istersiniz. Ve Fullwidth Divi başlık modülünü kullanma seçeneğini unutmayın. Bu yazıda kullanılan yöntemle aynı esnekliğe sahip olmayacak olsanız da, bu yöntem minimum içeriğe sahip sayfalar için çok uygundur. İşte tam ekran sayfaları sorunları hakkında keyif alabileceğiniz birkaç gönderi daha. Divi ile üst ve alt kaydırma bağlantıları ekranı nasıl yapılır Animasyonlu ay düğmesine sahip benzersiz bir tam ekran divi düzeni tasarlayın ve daha fazlası Aşağıdaki yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
