Divi'de Özel Tam Ekran Sayfa Düzenleri Nasıl Tasarlanır

Tam Ekran sayfa düzenleri, web tasarımı dünyasında gerçekten kullanışlı olabilir. Tam ekran sayfa düzeninin ana avantajlarından biri görünürlüktür. Tam ekran sayfalarda, tüm sayfa içeriğiniz tarayıcı penceresinde kalır. Kullanıcıların hızlıca kaydırabildiği bir dünyada, tüm içeriğinizin en başından itibaren tarayıcı görünümünde yer alması izleyici için canlandırıcı olabilir ve dönüşümlere de yardımcı olabilir.

Divi'ye aşinaysanız, yerleşik tam ekran işlevine sahip tam genişlikte başlık modülünü zaten biliyor olmalısınız. Bu, minimum içerikle tam ekran sayfalar oluşturmak için harika bir çözümdür. Ancak, birden fazla satır ve modül içeren normal bir bölüm kullanarak tam ekran sayfa düzeni oluşturmanın avantajlarından yararlanmak istiyorsanız, bu gönderi tam size göre. Sayfa içeriğinizin (hatta üstbilgi ve altbilgi çubuğu bile) tarayıcı pencerenize sığdığından emin olmak için size birkaç basit numara göstereceğim ve ardından farklı tarayıcı boyutlarında güzel bir şekilde ölçeklendireceğim.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde oluşturacağımız son tam ekran sayfa düzenine kısa bir bakış.

Her şeyin yerinde kalması için sayfa yüksekliğinin tarayıcı penceresinin yüksekliğine nasıl ayarlandığına dikkat edin.

Neye ihtiyacın var

Bu eğitim için gerçekten ihtiyacınız olan tek şey Divi. Divi Builder'dan erişilebilen Fitness Salonu Düzen paketini de kullanacağım.

Youtube Kanalımıza Abone Olun

Divi'de Özel Tam Ekran Sayfası nasıl yapılır

Bu öğreticinin ana tasarımına geçmeden önce, size Divi'de tam ekran sayfa oluşturmanın ardındaki temel fikri göstereceğimi düşündüm. Sonuçta, ne kadar basit olabileceğine şaşırabilirsiniz.

Açıklanan temel fikir

Yeni bir sayfada boş sayfa şablonunu seçin. Bu, ana üstbilgi ve alt altbilgi çubuğunun sayfada görünmesini durduracaktır (bunları daha sonra nasıl ekleyeceğinizi size göstereceğim).

Şimdi sayfanızı sıfırdan oluşturmak için Divi Builder'ı ön uçta dağıtın. Ardından, bir sütun satırı olan bir normal bölüm ekleyin.

Ardından, bir sütun satırına bir geri sayım sayacı modülü (veya herhangi bir modül) ekleyin.

Gözü kolaylaştırmak için geri sayım sayacındaki arka plan rengini çıkarın ve bölüme bir arka plan rengi ekleyin ki bölümün sayfadaki yüksekliğini daha iyi anlayabilelim. Şu anda bölümün yüksekliği, içerdiği içeriğin yüksekliğine göredir. Bu durumda elimizdeki tek içerik, şarkı modülüne sahip tek bir satırdır.

Şimdi bölüm ayarlarını açın ve gelişmiş sekmeye gidin ve Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

min-height: 100vh;
display: flex;
flex-direction: column;

Bölümünüzün minimum yüksekliğini 100vh'ye (görünüm alanı yüksekliğinin %100'ü) ayarlamak, bölümünüzün tüm tarayıcı penceresini (veya görünüm penceresini) kapsamasını sağlayacaktır. "display:flex" özelliği, bölümünüzün içeriğini dikey olarak ortalamanın hızlı ve kolay bir yoludur.

vh uzunluk birimi hakkında daha fazla bilgi için bu yararlı kılavuza göz atın.

Sonucu görmek için canlı sayfanızı gizli bir tarayıcıda görüntüleyin çünkü WordPress'te oturum açtıysanız, üst yönetici çubuğu tarayıcının yüksekliğini biraz düşürür.

İyi gidiyorsun. Divi'de özel bir tam ekran sayfa düzeni oluşturmanın temel fikri budur.

Üstbilgi ve Altbilgiyi Tam Ekran Sayfanıza dahil etme.

Tam ekran sayfasına üst bilgi ve alt bilgi çubuğunun dahil edilmesini istiyorsanız, küçük bir ayar yapmanız gerekecektir. İlk olarak, sayfa şablonunuzu sayfa düzenleyicinizin arka ucundaki varsayılan şablonla değiştirin.

Üstbilgi ve alt altbilgiyi dahil etmek, tarayıcı görünüm alanınıza ek yükseklik katacaktır, böylece bölüm artık eskisi gibi mükemmel bir şekilde sığmayacaktır. Bunun nedeni, sayfanızın artık görüntü alanı yüksekliğinin %100'ü olan bir bölüm yüksekliğinden ARTIK üst bilgi ve alt bilgi çubuğunuzun yüksekliğinden oluşmasıdır. Bu çok fazla. Bunu düzeltmek için bölümümüzdeki özel CSS'yi aşağıdaki şekilde ayarlamamız gerekiyor:

min-height: calc(100vh - 133px);
display: flex;
flex-direction: column;

Tek fark minimum yükseklik değeridir. Şimdi, üstbilgi ve alt altbilgi çubuğunun ek yüksekliğini (piksel cinsinden) toplu olarak hesaba katan bir hesaplama var.

132 piksel, üstbilginin varsayılan yüksekliğinin (80 piksel) ve alt altbilgi çubuğunun varsayılan yüksekliğinin (53 piksel) toplamını temel alır.

Artık Divi'de özel bir tam ekran sayfasının nasıl oluşturulacağına dair temel bir anlayışa sahip olduğumuza göre, daha karmaşık bir tasarıma geçelim.

Tam Bir Tam Ekran Sayfa Tasarımı Oluşturma

Bu tasarımı başlatmak için yeni bir sayfa oluşturun, sayfanıza bir başlık verin ve Divi Builder'ı dağıtın. Hazır Düzen Seç seçeneğini belirleyin ve Kütüphaneden Yükle Açılır Penceresinden Fitness Salonu Düzeni sayfasını seçin. Ardından Fiyatlandırma Sayfasını kullanmak için tıklayın.

Düzen oluşturucuya yüklendiğinde, ön uçta (Görsel Oluşturucu) oluşturmak için düğmeye tıklayın ve başlamaya hazırsınız.

Yeni Bölüm Oluşturma

Önceden hazırlanmış düzen, tasarımın başlatılmasına yardımcı olmak için orada. Bu düzen tasarım öğelerini yol boyunca kullanacağız ve işimizi bitirdikten sonra düzenin geri kalanını sileceğiz. Tam ekran düzenimiz için ana bölümü oluşturmak için devam edin ve yeni bir normal bölüm oluşturun ve onu sayfanın en üstüne sürükleyin. Ardından satıra dörtte bir dörtte bir yarım sütun yapısı ekleyin. Bu, tam ekran sayfamızın temeli olacaktır.

Sütunlarınıza Modül Ekleme

Multiselect'i kullanarak (ctrl/cmd tuşunu basılı tutun ve tıklayın), mizanpajın ilk bölümündeki ilk iki satırdaki tüm modülleri seçin ve bunları sayfanın üst kısmındaki yeni bölümün ilk sütununa sürükleyin.

Ardından, mizanpajın aynı ilk bölümünün üçüncü satırındaki tüm modülleri kopyalamak için çoklu seçimi kullanın ve bunları sayfanın üst kısmındaki yeni bölümün ikinci sütununa yapıştırın.

Beyaz arka plan nedeniyle metin gizlenecek ancak arka plan rengini daha sonra değiştireceğiz.

Üçüncü sütuna bir kaydırıcı modülü ekleyin. Bu kaydırıcı sonunda ekranın tüm yüksekliğini kaplayacak, ancak şimdilik sadece içeriği ayarlayalım. Kaydırıcı ayarlarında, varsayılan olarak orada bulunan iki varsayılan slayttan birini silin ve ardından tek slaydın ayarlarını açmak için tıklayın.

Slayt ayarlarında, tarayıcının tüm yüksekliğini kaplayacak kadar büyük olduğundan emin olarak bir arka plan resmi ekleyin.

Bu, şimdilik ihtiyacımız olan tüm modüllerimizle ilgilenir. Tasarım ayarlarına daha sonra tekrar bakacağız ama şimdilik sıramızı özelleştirelim.

Satır Ayarlarını Özelleştirme

Satır ayarlarını açın ve 2. sütuna arka plan rengi ekleyerek başlayın:

2. Sütun Arka Plan Rengi: #2a2e40

Tasarım sekmesine geçin ve aşağıdakileri güncelleyin:

Bu Satırı Tam Genişlikte Yapın: EVET
Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: EVET
Özel Dolgu: 0px Üst, 0px Alt

Bölüm Ayarlarını Özelleştirme

Bu noktada bölüm ayarlarımız için gerekli olan tek şey, herhangi bir varsayılan dolguyu çıkarmaktır, ancak ilk sütunun üst kısmını çerçeveleyen bir bölüm ayırıcı eklemenin güzel olacağını düşündüm. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: #2a2e40
Üst Bölücü Yüksekliği: 8vw
Üst Bölücü Yatay Tekrar: 0.8x
Üst Bölücü Çevirme: dikey ve yatay

Özel Dolgu: 0 piksel üst, 0 piksel alt

Bölücü, bölüm içeriğinin altında gösterecek şekilde ayarlandığından, sütun 3'teki kaydırıcının arkasına gizlenecek ve sütun arka planının rengiyle eşleştiği için sütun 2'de gösterilmeyecektir. Bu, 1. sütun için güzel bir çerçeveleme tasarım öğesi oluşturur.

Önceden hazırlanmış düzenin geri kalanını silin

Bu noktada, üst bölümümüz tam ekran sayfa düzenimiz için her şeye sahiptir, böylece önceden hazırlanmış düzen ile gelen kalan tüm bölümleri silebiliriz. Sayfanız şimdiye kadar böyle görünmelidir.

Artık sayfamızı tam ekran olacak şekilde özelleştirmeye başlamaya hazırız.

Sayfayı Tam Ekran Yapmak için Özel CSS Ekleme

Bu makalenin başındaki temel örnekte, özel css'yi doğrudan bölüme ekledim. Ancak, tam ekran işlevimizin yalnızca masaüstü için geçerli olduğundan (ve mobil cihazlarda varsayılan stile başvurduğundan) emin olmak için, sayfa ayarları altında CSS'ye ekleyeceğim. Bu, yalnızca bu sayfa için geçerli olan harici CSS eklememe izin verecek, ancak aynı zamanda stili yalnızca masaüstüyle sınırlayan bir medya sorgusu ekleme seçeneği de sunuyor.

Ön uç oluşturucunun altındaki ayarlar menüsünden sayfa ayarlarını açın. Gelişmiş sekmesi altında aşağıdaki özel CSS'yi girin:

@media (min-width: 980px){

/*If CSS IDs are added, this makes the element the same height as the browser window taking into account the header and the bottom footer bar*/
  #fullsection, #fullslide .et_pb_slide {
    height: calc(100vh - 133px);
  }
/*This centers the content of the section when the CSS ID is applied*/
  #fullsection { 
    display: flex;
    flex-direction:column;
    overflow: hidden;
  }
/*This makes the bottom footer bar fullwidth to match the fullwidth header if applied*/
  #footer-bottom .container {
    width: 100%;
    max-width: 100%;
    padding-right: 30px;
    padding-left: 30px;
  }
}

CSS'ye aşina olmayanlarınız için, kodun, tarayıcı minimum 980 piksel genişlikte olduğunda stili uygulayan bir medya sorgusu ile sarıldığına dikkat edin. Köşeli parantezlerle birlikte ilk snippet, "fullsection" adlı bir CSS kimliğini ve ardından "fullslide" adlı bir CSS kimliğini içerir. Bu iki CSS kimliğini hatırlamak önemlidir çünkü bunları bölümümüze ve kaydırıcımıza eklememiz gerekecek. Bunu yaptığımızda, css “height: calce(100vh – 133px)” uygulanarak her ikisini de tam ekran (tarayıcı penceresinin tüm yüksekliğini kapsayan) yapacaktır.

İkinci snippet, bölüme display flex özelliğini uygulayarak tüm bölüm içeriğini dikey olarak ortalar. Bununla ilgili daha fazla bilgi için Divi'de içeriğin dikey olarak nasıl hizalanacağına ilişkin yayınımıza göz atın.

Üçüncü snippet tamamen isteğe bağlıdır. Bu, alt alt bilgi çubuğunun tasarıma biraz daha iyi uyması ve ayrıca ekleyeceğimiz tam genişlikte başlık stiliyle eşleşmesi için tam genişlikte olmasını sağlar.

Artık harici CSS'ye sahip olduğunuza göre, CSS ID'lerimizi bölümümüze ve kaydırıcımıza ekleyebiliriz. Bölüm ayarlarına gidin ve aşağıdaki CSS kimliğini ekleyin:

CSS kimliği: tam bölüm

Şimdi 3. sütundaki kaydırıcı için Sürgü Modülü ayarlarını açın ve aşağıdaki CSS kimliğini ekleyin:

CSS kimliği: tam slayt

Son dokunuşlar

Bu noktada, tam ekran sayfa işlevi yerinde ve çalışıyor olmalıdır. Emin olmak için gizli bir tarayıcıda kontrol edebilirsiniz. Geriye sadece birkaç son dokunuş kaldı.

Sütunlarımıza boşluk ekleyin

Sütun 1 ve sütun 2'nin üstüne biraz dolgu eklemek için satır ayarlarınızı aşağıdaki gibi açın:

Sütun 1 Özel Dolgu: 12vh Üst, 1vw Sol, 1vw Sağ
Sütun 2 Özel Dolgu: 12vh Üst, 1vw Sol, 1vw Sağ

Üst dolgu değerlerim için vh uzunluk birimini kullandığıma dikkat edin. Bu, dolgunun görünümün yüksekliğiyle ölçeklenmesini, tarayıcı penceresi büyüdükçe daha fazla dolgu oluşturmasını ve tarayıcı kısaldıkça daha az dolgu oluşturmasını sağlar. Sol ve sağ dolgu değerlerim için vw (görünüm alanı genişliği) uzunluk birimini kullandım, böylece dolgu tarayıcının genişliğine göre ölçeklenir.

Görüntüleme Alanını En Üst Düzeye Çıkarmak için Büyük Metne vh Uzunluk Birimleri Ekleyin

Gördüğünüz gibi, gerçekten büyük metin içeren ve tarayıcı penceresiyle gerçekten ölçeklenmeyen birkaç modül var. Bunu düzeltmek için metin boyutunu vh uzunluk birimine ayarlayabiliriz. Bu, metnin daha kısa tarayıcı ekranlarında küçülmesine olanak tanır.

1. sütunun üstündeki metin modülünün ayarlarını açın ve h1 başlık metni boyutunu 7vh (vw değil) olarak güncelleyin.

Ardından, 2. sütunun üstündeki metin modülünün ayarlarını açın ve Başlık 2 Metin boyutunu 6vh olarak güncelleyin.

Kaydırıcı Tasarımını Güncelle

Tasarımı bitirmek için 2. sütundaki düğmenin düğme tasarımını kopyalayabilir ve kaydırıcının düğme stillerine yapıştırabilirsiniz. Bunu yapmak için, 2. sütundaki düğmenin düğme ayarlarını açın ve düğme seçeneği kategorisine sağ tıklayın ve “düğme stillerini kopyala” seçeneğine tıklayın.

Bundan sonra, kaydırıcı ayarlarını açın ve düğme stillerini kaydırıcının düğme seçenekleri kategorisine yapıştırın.

Ayrıca tek tek slaytlara bir arka plan kaplaması da ekleyebilirsiniz.

Üstbilgi ve Alt Altbilgi Çubuğu Ayarları

Altbilgimizi tam genişliğe genişleten küçük bir özel CSS pasajı eklediğimizi hatırlayabilirsiniz. Bu, birincil menü çubuğumuzu da tam genişlikte yapma beklentisiyle yapıldı. Birincil menü çubuğunuzu tam genişlikte yapmak için WordPress panosuna gidin ve Divi > Tema Özelleştirici > Başlık ve Gezinme > Birincil Menü Çubuğu'na gidin. Ardından Tam Genişlik Yap seçeneğini işaretleyin.

Tam ekran sayfamızda alt alt bilgi çubuğumuzu görüntülediğimiz için Alt Çubuk arka plan rengini tasarıma uyacak şekilde güncelleyebiliriz. Tema Özelleştirici'de kalın ve Alt Bilgi > Alt Çubuk'a gidin. Ardından arka plan rengini #2a2e40 olarak ayarlayın.

Ardından değişikliklerinizi yayınlayın.

Nihai Sonuç

İşte son tasarım. Tarayıcı penceresine her şeyin nasıl güzel bir şekilde oturduğuna dikkat edin.

Ve tarayıcıyı farklı boyutlara ayarlarken nasıl göründüğüne bakın.

Ve unutmayın, özel CSS'mizi yalnızca 980 pikselden büyük tarayıcı genişliklerine uyguladığımız için, tasarım mobil cihazlarda normale dönecek.

İşte tablet ve akıllı telefonda.

Son düşünceler

Divi'de özel bir tam ekran sayfa düzeni oluşturmak, bölümünüzün yüksekliğini birkaç CSS parçacığıyla tarayıcınızın yüksekliğine nasıl düzgün bir şekilde ayarlayacağınızı anladıktan sonra o kadar da zor değil. Ancak bunu bir kez yaptıktan sonra Divi Builder'da sayısız tam ekran sayfa tasarımı oluşturabilirsiniz. Her şeyi tarayıcı penceresinde görünür tutmayı planlıyorsanız, içeriği minimumda tutmaya dikkat edin.

Bu tür bir tasarım, kişisel siteler, promosyon teklifleri ve her türlü açılış sayfası için iyi sonuç verir. Ayrıca, içeriği az olan ve alt alt bilgi çubuğunun sayfanın yarısında görüntülenmesini önlemek istediğiniz sayfalar için de harika bir çözümdür.

Divi'nin Tam Genişlik Başlık Modülünü kullanma seçeneğini de unutmayın. Bu gönderide kullanılan yöntemle aynı esnekliğe sahip olmayacak olsanız da, minimum içeriğe sahip sayfalar için mükemmeldir.

İşte tam ekran sayfalar konusunda beğenebileceğiniz birkaç gönderi daha.

• Divi ile Üst ve Alt Kaydırma Bağlantıları ile Tam Ekran Bölümleri Nasıl Oluşturulur
• Hareketli Kaydırma Düğmesiyle Eşsiz Tam Ekran Divi Düzeni Tasarlayın
• ve dahası

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!