Kesme noktaları, masaüstü, tablet ve mobil gibi farklı cihazların genişliğine karşılık gelen piksel aralıklarıdır. Bir cihazın genişliği önceden tanımlanmış bir piksel aralığında olduğunda, sitenin düzeni ayarlanır, böylece içerik ve tasarım bu cihaz boyutu ve yönü için optimize edilir. Örneğin, bir siteyi masaüstü bilgisayarda görüntülüyorsam site menüsünün tamamını görüntüleyebiliyorum, ancak siteyi mobil cihazımda görüntülediğimde bunun yerine bir hamburger menü görüyorum.
Aşağıda editörde sunulan kesme noktaları yer almaktadır:
-
Masaüstü (1025px-1399px). Bu varsayılan kesme noktasıdır.
-
Tablet (768px-1024px)
-
Mobil (767 piksel ve altı). Mobil kesme noktası değişikliklerini masaüstü ekranını yeniden boyutlandırmak yerine her zaman bir mobil cihazda kontrol etmenizi öneririz.
Varsayılan masaüstü kesme noktasında tasarım, düzen veya içerik değişiklikleri yaparsanız, değişiklikler otomatik olarak diğer kesme noktalarına uygulanır. Bir pencere öğesi eklemek, metni düzenlemek veya bir bölüm eklemek ya da silmek gibi bir içerik değişikliği yaparsanız, değişikliğin hangi kesme noktasında yapıldığına bakılmaksızın değişiklik otomatik olarak diğer tüm kesme noktalarına uygulanır. Örneğin, tablet kesme noktasına bir widget eklerseniz, widget diğer tüm kesme noktalarına da eklenecektir.
Ancak, belirli kesme noktalarında bir öğenin konumunda veya boyutunda değişiklik yaparsanız, değişiklikler diğer kesme noktalarına uygulanmaz. Örneğin, mobil kesme noktasındaki bir öğenin boyutunu değiştirirseniz, değişiklik yalnızca mobil ve mobil yatay kesme noktalarına uygulanır ve başka hiçbir kesme noktasına uygulanmaz.
Üstbilgi ve altbilgi hariç editördeki hemen hemen her şey, içeriği o cihaza özgü hale getirerek cihaz başına ayrı olarak düzenlenebilir.
Cihaz başına içeriği düzenlemek için:
-
Cihaza özgü olmasını istediğiniz içeriği kopyalayın. Widget'a sağ tıklayın, kopyala'ya tıklayın ve ardından yapıştır'a tıklayın.
-
Widget'lardan birine sağ tıklayın, Cihazda gizle öğesini seçin, ardından widget'ın gizlenmesini istediğiniz cihazı seçin. Örneğin, bir düğmeyi Masaüstünde Gizle olarak ayarlamak, düğmeyi masaüstünden kaldırır, ancak düğmeyi tablet ve mobil sitelerde görüntüler.
-
Orijinal içeriğe tıklayın ve Cihazda gizle öğesini seçin, ardından bu içeriği değiştirmek istemediğiniz cihaz(lar)daki içeriği gizleyin. Örneğin, kopyalama düğmenizi Masaüstünde Gizle olarak ayarlarsanız, orijinal düğmeyi Tablette Gizle ve Mobilde Gizle olarak ayarlarsınız. Bu şekilde, biri masaüstünüzde, diğeri tabletinizde ve mobil cihazınızda gösterilen iki farklı düğmeye sahip olursunuz.
-
İçeriğin üç cihazda da farklı olmasını istiyorsanız, içeriği tekrar kopyalayabilirsiniz (böylece aynı içeriğin toplam üç kopyasına sahip olursunuz) ve her cihazda farklı bir düğme görüntülenir.
-
Artık her biri farklı bir cihazda görüntülenen iki (veya üç) özdeş ancak farklı içerik parçasına sahipsiniz. Bu içerikte yapılan başka değişiklikler yalnızca üzerinde gösterilecek şekilde ayarlanmış olan cihazı etkiler.
Gizli içerik canlı sitenin kodunda görünmeye devam edebilir (yayınladıktan/yeniden yayınladıktan sonra). Bu beklenen bir durumdur ve kullanılan teknolojiden kaynaklanmaktadır. Bir widget'ı, bölümü veya düzenleyicideki herhangi bir içeriği belirli bir cihazda gizlediğinizde, CSS Medya Sorgularını kullanarak gizleriz. Bunun anlamı, HTML'nin (web sitesinde gizli olmasına rağmen) bir izleyici içeriğe baktığında web sayfasında hala var olduğudur. Bu durum bazen web sitesini tarayan bir denetim aracının, siz sayfadan kaldırıldığını düşünseniz bile bu gizli içeriği tespit etmesi gibi bir soruna neden olabilir.
Duyarlı web siteleri masaüstü, tablet ve mobil cihazlarda çalışır. Bu nedenle, duyarlı editörümüz düzenleme yaparken siteyi bu görünümlerin her birinde önizlemenizi sağlar. Bu sayede yayınlamadan önce sitenizin farklı cihazlarda nasıl göründüğünü kontrol edebilir ve müşterilerinizin siteyi görüntülemek için hangi cihazı kullanıyor olurlarsa olsunlar olumlu bir deneyim yaşamalarını sağlayabilirsiniz.
Cihaz görünümleri arasında geçiş yapmak için üst gezinme çubuğundaki cihaz düğmelerinden birine tıklayın:
Farklı cihaz görünümleri sitenizin ayrı sürümleri değildir. Bir ögeyi bir görünümde (örneğin mobil) silmek, bu ögeyi sitenin tamamından (masaüstü, tablet ve mobil) kaldırır. Silmek yerine, ögeye sağ tıklayın ve belirli bir cihazdaki bir ögeyi gizlemeyi seçin.
Aygıt önizlemeleri, gerçek bir cihazda gördüğünüzü her zaman tam olarak yansıtmaz. Yazı tipleri, aygıt penceresinin boyutu, kullanıcı arabyüzü ve tarayıcı davranışı gibi özellikler, bu önizlemelerin çeşitli derecelerde yanlış olmasına neden olabilir. Sitenin en doğru sürümü için gerçek bir cihazda kontrol edin.
Bir cihazda yapılan düzenlemeler tüm cihazlarda görünür. Örneğin, sitenizin tablet görünümünde bir satır silindiğinde, bu satır sitenizin masaüstü ve mobil görünümlerinde de eksik olacaktır. Bunun nedeni, içeriğin tüm cihazlarda paylaşılabilmesidir. Ancak, hangi içeriğin hangi cihazlarda görüneceğini farklılaştırmak isteyebilirsiniz. Bunu gerçekleştirmek için cihaza göre düzenleme özelliklerimizi kullanabilir ve ziyaretçilerinize sitenize eriştikleri cihaza uygun içerik sunabilirsiniz.
Belirli bir cihazda düzenleme yaparken, genellikle görünümleri değiştirmek gerekir. Daha fazla bilgi için Anahtar Görünümleri bölümüne bakın.
Birçok ayar hangi cihazları etkilediğini gösterir. Örneğin, bir ayarda cihazları temsil eden bir simgeyle birlikte Masaüstü ve tableti etkiler yazabilir.
Editörde, cep telefonunu etkilemeden değiştirilebilecek birkaç düzenleme vardır. Bunlar:
-
Aralıklar (Kenar boşlukları ve dolgu)
-
Pozisyon
-
Genişlik
-
Yükseklik
-
Site arkaplanı
-
Yazı tipi boyutu (daha önce mobil cihazda düzenlenen metni etkilemez)
-
Tablet görünümünde üstbilgi ve altbilgide yapılan değişiklikler masaüstü ve mobil görünümü etkilemez
Her bir cihaz görünümünde yaptığınız diğer tüm düzenlemeler diğer cihazları etkileyecektir.
Bazı widget'lar tüm cihazlarda iyi çalışsa da, cihaz başına farklı özellikler veya tasarım tercihlerine ihtiyaç duyan cihazlar arasında bazı önemli farklılıklar vardır.
Aşağıda, belirli cihazlarda belirli widget'ları uyarlamak için tasarım önerileri ve notlar içeren widget'ların bir listesi bulunmaktadır.
Arkaplan Resimleri
Cihazlar arasındaki en boy oranlarındaki büyük farklılıklar nedeniyle web sitenizdeki görüntüleri nasıl tasarladığınıza özel özen göstermeniz önemlidir. Örneğin, bir satırdaki tam sayfa arka planı bir masaüstü cihazında harika görünebilir, ancak bir mobil cihazda korkunç olabilir. Bunun sebebi, masaüstü aygıtlarının daha büyük genişlikte görüntülere daha uygun olması, mobil cihazın tam tersi olması olabilir. Site teması ayarlarında cihaz başına farklı bir Sayfa arka planı ayarlayabilirsiniz. Masaüstü için geniş bir arka plan görüntüsü ve mobil veya tablet için dar bir arka plan görüntüsü kullanmanız önerilir.
Kaydırıcı Widget'ı
Arka plan görüntüsünde olduğu gibi, kaydırıcı widget'ının masaüstü sürümü için seçtiğiniz görüntüler tablet veya masaüstü için çok iyi görünmeyebilir. Şunlar tavsiye edilir:
-
Kaydırıcının çerçeve boyutunu mobil cihazlara sığacak şekilde ayarlayın veya
-
Masaüstünde kaydırıcıyı gizleyin ve bunun yerine mobil cihazlar için özel bir sürüm oluşturun.
Görseller ve Simge Widget'ı
Görüntü widget'ının boyutu mobil sürümde otomatik olarak ayarlanmaz. Sığacak gerekli ayarlamaları yapmak için görüntü widget'ının kullanıldığı mobil cihazlarınızı kontrol etmeniz önemlidir.
Mobil veya Tablet Üzerinde Hover Efektleri
Masaüstü cihazlarla karşılaştırıldığında, tablet ve mobil cihazlarda hover etkisi hiç yoktur. Üzerine gelinen herhangi bir düzen veya seçenek tablet/mobil cihazlarda devre dışı bırakılır.
Harita widget'ı
Harita widget'ının ne zaman düğme veya harita olarak gösterileceğine ilişkin cihaza özel seçenekleri vardır.
İletişim Formu Widget'ı
İletişim formları mobil cihazlarda her zaman satır başına bir girdi olarak görünecektir.
vCita Widget'ı
Vcita çevrimiçi randevu planlama widget'ında, seçtiğiniz cihazda yalnızca bir düğme gösterme seçeneği vardır.
Apple'ın iPad'ler (iPadOS) için yayınladığı sürüm nedeniyle iPad' ler masaüstü ile aynı görünümü gösterir. Ancak, tüm özelleştirmelerin canlı sitelerde görünür olmasını sağlamak için Duyarlı masaüstü-tablet düzenine geçebilirsiniz.
Duyarlı düzen, daha büyük masaüstü bilgisayarlarda üst gezinme başlığını gösterir ve ekran boyutu 1024 piksel ve altında olduğunda otomatik olarak hamburger menü başlığına geçer. Gerekirse küçük ekran düzeni özelleştirilebilir.
Not
-
Çoğu sitede bu özellik otomatik olarak etkinleştirilir ve aşağıda belirtilen geçiş kullanılamaz.
-
Bunun açılmadığı siteler için, bir kez açıldığında, kapatma seçeneği kaldırılacaktır.
-
Klasik düzenleyicide oluşturulan bir sitenin mobil görünümü, başlık da dahil olmak üzere, tarayıcı penceresinin boyutuna göre değil kullanılan cihaza göre belirlenir. Sonuç olarak, mobil görüntü alanını simüle etmek için masaüstü tarayıcınızı yeniden boyutlandırmak, sitenin veya başlığın gerçek mobil cihazlarda nasıl göründüğünü doğru bir şekilde temsil etmeyecektir. Başlık da dahil olmak üzere sitenin gerçek mobil sunumunu görmek için bunları doğrudan bir mobil cihazda görüntülemek en iyisidir.
Duyarlı site düzenlerini kullanmak için:
-
Site düzenini tıklayın.
-
Masaüstü altında Duyarlı Düzen geçişine tıklayın. Aşağıdaki seçeneklere sahipsiniz:
-
1024 pikselin üzerinde bir site düzeni seçin.
-
1024 piksel ve altı için bir site düzeni seçin.
-
Duyarlı site düzenlerine geçtikten sonra, Büyük Masaüstü (1024 pikselin üzerinde), Küçük Masaüstü/Tablet (1024 piksel ve altında) ve Mobil'i göstermek için üst gezinmedeki görünümleri değiştirebilirsiniz. Daha fazla bilgi için Anahtar Görünümleri bölümüne bakın.
Aşağıda duyarlı tablet hakkında ek bilgiler yer almaktadır:
-
CSS hem Büyük Masaüstü hem de Küçük Masaüstü/Tablet kesme noktaları için aynıdır ve Tablet CSS'si görmezsiniz.
-
Geçişler daha yumuşaktır ve Kullanıcı Aracılarına dayalı değildir.
-
Sitenizde gizli öğeler varsa, Duyarlı Düzeni açmadan önce bunların görünür olduğundan emin olun. Düzeltmek için Duyarlı Düzeni kapatın ve tüm gizli öğeleri gösterin. Ardından Duyarlı Düzeni açabilir ve gizli öğeleri yeniden gizleyebilirsiniz.
-
Kişiselleştirme artık bir tablet cihazı göstermiyor. Masaüstünü seçmek, tablet görünümlerini de etkiler.
-
Aşağıdaki tablet özelleştirmelerinin masaüstü düzenini otomatik olarak görüntülediğini ve bunları özelleştirmeye gerek olmadığını unutmayın:
-
Fotoğraf galerisi düzenleri
-
Tablet kişiselleştirme kuralları
-
Animasyonlar
-