Divi'de Sabit Konumu Anlama ve Kullanma Kılavuzu

Sabit konum özelliği, doğru şekilde nasıl kullanılacağını öğrenmek için çok önemli bir konum türüdür. Sabit öğeler, web sitenizdeki kullanıcı deneyimini geliştirmek için önemlidir. Sabit başlıklar, bir web sayfasında gezinirken görüntüde kalır ve kullanıcıların sitede gezinmesini kolaylaştırır. Sabit kenar çubukları, önemli CTA'ları ve E-posta Seçeneklerini görünür tutar ve dönüşümleri artırır. Aynı şey sabit bildirim çubukları, açılır pencereler ve diğerleri için de geçerlidir. Sabit konumun nasıl çalıştığını ve Divi'de nasıl doğru şekilde kullanılacağını anladığımızda, Divi sitelerimizi bir sonraki düzeye taşımak için güçlü bir tasarım aracına sahip olacağız.

Bu yazıda şunları ele alacağız:

• Divi'nin Dört Konumlandırma Türüne Genel Bir Bakış
• Sabit Konum Divi'de Bir Öğeyi Nasıl “Konumlandırır”
• Divi'de Sabit Konum Seçeneklerini Kullanma
• Sabit Pozisyon Kullanırken Akılda Tutulması Gereken İpuçları
• Divi'de Sabit Konumu Kullanmanın 6 Faydalı Yolu

Bunu kontrol et!

Divi'nin Dört Konumlandırma Türüne Genel Bakış

Sabit konum, Divi'nin Konum Seçeneklerinde bulunan dört konum türünden biridir. Aşağıda her birine hızlı bir genel bakış verilmiştir.

Statik (Varsayılan)

Statik öğeler, sayfadaki öğelerin normal akışı veya düzeniyle kaldıkları ve diğer konumlandırılmış öğeler gibi üst, sağ, alt ve sol özelliklere yanıt vermedikleri için teknik olarak “konumlandırılmazlar” (bu nedenle statik/varsayılan konumdaki öğeler için Divi'de ofsetler mevcuttur). Divi'de bir modül için varsayılan konumu seçtiğimizde, statik konumu seçiyoruz. Divi'deki bazı öğelerin (satırlar ve bölümler gibi) varsayılan olarak göreceli bir konuma sahip olacağını (statik konum değil) belirtmekte fayda var.

Akraba

Göreceli olarak konumlandırılmış öğeler, sayfanın normal akışını takip ettikleri için statik öğelere benzer. Temel fark, göreceli olarak konumlandırılmış öğelerin üst, alt, sol ve sağ özellikleri kullanılarak konumlandırılabilmesidir. Ayrıca statik elemanlardan farklı olarak Z İndeksi özelliği kullanılarak da konumlandırılabilirler.

Daha fazla bilgi için Divi'deki göreli konumu anlama ve kullanma kılavuzumuza bakın.

mutlak

Kesinlikle konumlandırılmış bir öğe, normal belge akışından ayrılır ve bu nedenle, öğe için sayfada gerçek bir alan oluşturulmaz. Sayfada gerçek yer kaplayan diğer öğelerin üzerinde yüzen bir öğe olarak düşünebiliriz. En yakın konumlandırılmış ana konteynere göre konumlandırılacaktır.

Daha fazla bilgi için Divi'deki mutlak konumu anlama ve kullanma kılavuzumuza göz atın.

Sabit

Mutlak konum gibi, sabit konumlu öğeler de sayfanın normal akışının dışına çıkar ve sayfa içinde gerçek bir boşluk oluşturulmaz. Mutlak ve sabit arasındaki temel fark, sabit konumun tarayıcı penceresine veya görünüm alanına göre olmasıdır. Başka bir deyişle, öğe sayfanın normal akışı içinde nerede olursa olsun, bir kez sabit bir konum verildiğinde, konumu artık doğrudan tarayıcı penceresiyle ilgili olacaktır. Öğeyi görünüm penceresi içinde konumlandırmak için üst, alt, sol ve sağ özelliklerini kullanabiliriz. Sabit öğeler genellikle sayfadaki diğer öğelerin arkasında veya önünde duracağından, Z İndeksi sabit öğeleri diğerlerinin üzerinde sıralamaya yardımcı olur.

NOT: CSS'de yapışkan olarak adlandırılan başka bir konumlandırma türü vardır. Yapışkan konumlu bir öğe, biz kapsayıcısına (en üst değer tarafından belirlenen bir noktada) kaydırılana kadar nispeten konumlanmış bir öğe gibi davranır. Ardından, kullanıcı kapsayıcının sonuna gelene kadar öğe sabitlenir (veya takılı kalır). Bununla birlikte, diğer faktörler işlevselliği engelleyebileceğinden, yapışkan konum biraz tahmin edilemez olabilir. Yakın gelecekte Divi'ye sabit konumlandırma eklenecektir.

Sabit Konum, Divi'de bir öğeyi nasıl "konumlandırır"?

Genel bakışta belirtildiği gibi, öğe belgenin normal akışından (sayfadaki HTML) ayrıldığından, sabit konum türü mutlak konuma benzer. Belge akışının kesilmesi, öğenin sayfada orijinal olarak bulunduğu yerde gerçek alanı geride bırakmayacağı anlamına gelir. Burada, göreli konumun sabit bir konuma değiştirildiği bir modülün bir resmi verilmiştir. Sütun içinde orijinal olarak oluşturduğu/işgal ettiği alanın şimdi nasıl kaybolduğuna ve modülün artık tarayıcı penceresinin sol üst kısmına sabitlendiğine dikkat edin.

Sabit ve mutlak arasındaki en büyük fark, ana kapsayıcısına göre mutlak konumun aksine, sabit konumun tarayıcı penceresine veya görünüm alanına göre olmasıdır. Bu nedenle, kullanıcı bir sayfayı aşağı kaydırdığında sabit öğelerin görünümde olduğunu söyler ve mutlak konumlandırılmış öğeler olmayabilir.

Aşağıda, sayfayı aşağı kaydırırken üç konumun (göreli, mutlak ve sabit) nasıl çalıştığını gösteren bir örnek verilmiştir. Kullanıcı kaydırdıkça sabit modülün yerinde kaldığına (tarayıcıya göre konumlandırıldığına) dikkat edin.

Divi'de Sabit Konum Seçeneklerini Kullanma

Divi'de, Gelişmiş sekmesi altındaki Konum seçeneği grubu geçişinde sabit konum seçeneğini seçerek herhangi bir öğeye sabit bir konum verebilirsiniz. Göreceli konum seçildikten sonra ek sabit konum seçeneklerini de (konum, ofsetler, z indeksi) bulacaksınız.

Sabit Konumun Temel Konumunu Ayarlama

Sabit konumu seçtikten sonra, görsel konum arayüzünü kullanarak bir temel konum seçebilirsiniz. Hangi temel konumu seçtiğinize bağlı olarak, yeni X ve Y Ofset kontrolleri kullanılabilir hale gelecektir.

Ofsetleri Sabit Konumda Kullanma

Dikey ve Yatay Ofset kontrolleri, sabit öğenizin temel konumunu konum ekseni boyunca daha fazla ayarlamanıza olanak tanır.

Ofset Origin ve Offset değerleri, öğemizi tarayıcı görünümü içinde istediğimiz herhangi bir yere konumlandırmak için birlikte çalışacaktır. Bu örnekte, sabit bir konuma, sol üst öteleme orijine, 50 piksel dikey kaydırmaya ve 50 piksel yatay kaydırmaya sahip bir modülümüz var. Ofset değerlerinin elemanı yatay ve/veya dikey olarak (tarayıcının sol üst köşesinden uzağa) ofset orijininden nasıl uzaklaştıracağına dikkat edin.

Sabit bir öğe için Divi'de (CSS'deki üst, alt, sol ve sağ özellikler gibi) yatay ve dikey ofset değerlerini kullanırken, bu değerlerin öğeyi tarayıcı görünüm alanına göre konumlandıracağını hatırlamak önemlidir. Z İndeksi özelliği, sabit bir elemanla da kullanışlıdır. Çoğu zaman bu sabit öğelerin sayfadaki diğer öğelerin önünde kalmasını istediğiniz için, ona yüksek bir Z İndeksi değeri vermeniz gerekecektir (9999 gibi).

Sayfadaki Sabit Öğeleri Yeniden Konumlandırmak için Sürüklenebilir Bağlantıları Kullanın

Bir öğenin konumunu Sabit olarak değiştirdiğinizde, öğenin üzerine geldiğinizde sürüklenebilir bir bağlantı görünür. Bu, konumunu değiştirmek için öğeyi sürüklemenize olanak tanır. Öğeyi yeniden konumlandırdığınızda, X ve Y Ofseti modül ayarlarında ayarlanır.

Sabit Konumlandırmayı Kullanmak İçin Birkaç İpucu

Mobil için Sabit Öğeleri Ayarlayın

Duyarlı tasarımlar için farklı cihaz ekranlarında farklı konumlar ve ofsetler ayarlayabileceğinizi unutmayın. Örneğin, masaüstünde sabit bir üstbilgi isteyebilirsiniz, ancak mobilde değil. Sabit kenar çubukları masaüstü için anlamlıdır, ancak cep telefonu ekranında pek mümkün değildir. Geçiş yapmak için tablet ve telefonda Divi'deki konum seçeneğini Göreceli olarak ayarlayabilirsiniz. Bu, belgenin akışı içindeki orijinal konumuna geri yapıştıracaktır.

Sabit Elemanlar için Alan Yaratın

Sabit konum, öğeleri belge akışının dışına yerleştirdiğinden, sayfadaki içeriğin üzerinde bulunurlar. Dolayısıyla, sabit öğenin içeriği gizlemesini istemiyorsanız, sabit öğe için alan oluşturmanız gerekir. Bu, birkaç yolla yapılabilir, ancak genellikle sayfa düzenine dolgu veya kenar boşluğu eklenerek gerçekleştirilir.

İyi bir örnek, sabit bir kenar çubuğudur. Divi'deki sayfa şablonunuza sabit bir kenar çubuğu eklemek istiyorsanız, sabit kenar çubuğu için gerekli alanı oluşturmak için öncelikle ana içerik alanının genişliğinin azaltıldığından emin olmanız gerekir. Dolayısıyla, kenar çubuğunu oluşturmak için bir bölüm kullanıyorsanız, bölüme sabit bir konum, %100 yükseklik ve 300 piksel genişlik verebilirsiniz.

Ardından, sayfanın sol tarafındaki kenar çubuğunun genişliğini yerleştirmek için içerik sonrası modülünü (sayfanın ana içerik alanı) tutan diğer bölüme 300 piksellik bir sol kenar boşluğu vermeniz gerekir.

Sabit Elemanlar için Daha Yüksek Z İndeksi Kullanın

Sayfanızda sabit öğeye yeterli alan verilmediği sürece, sayfadaki diğer içerikle örtüşecektir. Çoğu durumda, kaydırma sırasında sayfadaki diğer öğelerle çarpıştığı için sabit öğenin görünür (üstte) kalmasını istersiniz. Bunu yapmak için, sabit öğenize Z alanındaki diğer tüm içeriğin üzerinde kaldığından emin olmak için daha yüksek bir Z İndeksi ekleyebilirsiniz. Hangi değeri vereceğinizi bilmiyorsanız 9999 gibi büyük bir sayı ekleyebilirsiniz.

Sabit Pozisyonu Kullanmanın 6 Yolu

#1 Sabit Başlıklar

Yeni sabit konum seçeneklerinin en iyi kullanımlarından biri, sabit başlıkların oluşturulmasıdır. Divi Theme Builder'ı kullanarak tamamen özel bir başlık oluşturabilir ve tüm bölümü düzeltebilirsiniz.

Nasıl Yapılır Yayını

Divi'de nasıl sabit bir başlık oluşturulacağına dair bir yazı:

• Divi'nin Konum Seçenekleriyle Sabit Bir Başlık Nasıl Oluşturulur

#2 Sabit Altbilgi Çubukları

Sabit üstbilgilere çok benzer şekilde, bazı web siteleri de sabit altbilgilerden veya altbilgi çubuklarından yararlanır. Bu, kullanıcıların göze çarpan bilgileri daha ince bir konumda ön planda tutmasına olanak tanır. Sabit altbilgi çubukları, cep telefonları için harikadır çünkü bir düğmeye basmak için can atan baş parmaklara çok yakındırlar.

Nasıl Yapılır Gönderileri

Divi'de sabit bir alt bilgi çubuğunun nasıl oluşturulacağına dair birkaç gönderi:

• Divi Temanız için Sabit Bir Altbilgi Çubuğu Nasıl Oluşturulur
• Divi ile Sabit Mobil Altbilgi Çubukları Nasıl Oluşturulur
• Divi'de (sabit) Mobil İletişim Çubuğu Nasıl Oluşturulur

#3 Sabit Kenar Çubukları/Dikey Menüler

Sabit kenar çubukları, menüler, e-posta tercihleri ​​ve CTA'lar gibi şeyleri sitenizde gezinirken ziyaretçilerin kolayca erişebilmesini sağlar. Ve isterseniz, tonlarca içeriğe sahip güzel bir kaydırılabilir sabit kenar çubuğuna sahip olmak için sabit kenar çubuğuna taşma kaydırma ekleyebilirsiniz.

Nasıl Yapılır Gönderileri

Divi'de sabit bir kenar çubuğunun nasıl oluşturulacağına dair bir yazı:

• Divi ile Düzgün Kaydırılan Bağlantı Bağlantıları ile Duyarlı Sabit Kenar Çubuğu Nasıl Oluşturulur
• Divi Web Siteniz için Dikey (sabit) Navigasyon Menüsü Nasıl Oluşturulur

#4 Sabit Başa Dön Düğmeleri

Başa Dön düğmeleri genellikle bir web sitesinin sağ alt kısmında sabitlenir ve kullanıcıların sayfanın başına geri göndermek için tıklamaları için her zaman kullanılabilir.

Divi'de sabit tepeden tırnağa düğmelerin nasıl oluşturulacağına dair bir yazı:

• Divi ile Özel Yapışkan (Sabit) En Başa Dön Tasarımları Nasıl Oluşturulur

#5 Sabit Menüler

Kaydırılan veya açılan çoğu menünün sabit bir konumu vardır. Bunlar mobil için de harika.

Divi'de sabit bir menünün nasıl oluşturulacağına dair bir yazı:

• Divi's Theme Builder ile Duyarlı Bir Kaydırmalı Menü Nasıl Oluşturulur

#6 Sabit Bildirim kutuları, Harekete Geçirici Mesajlar, E-posta Tercihleri ​​vb.

Divi'de sabit bir bildirim kutusunun nasıl oluşturulacağına dair bir yazı:

• Divi'de Sayfa Şablonunuzun Herhangi Bir Köşesine Kapatılabilir Bir Harekete Geçirici Mesaj Nasıl Eklenir

Son düşünceler

Sabit konumu kullanma ihtiyacıyla karşılaşmadan önce web geliştirmede çok ileri gitmeyeceksiniz. Bir web sitesini oluşturan birçok temel unsurda kullanılır. Divi'de sabit konum yalnızca bir tık ötededir, ancak onu iyi kullanmak için nasıl çalıştığını anlamak önemlidir. Umarım bu makale, bir sonraki projenizi yeni zirvelere taşıyabilmeniz için Divi'deki sabit konumu nasıl daha iyi kullanacağınızı anlamanıza yardımcı olmuştur.

Sabit pozisyon türüyle ilgili deneyiminiz nedir?

Yorumlarda sizden haber bekliyorum.

Şerefe!