Birçok acemi, bilgisayarda tasarlanan sayfaların cep telefonunda metinlerin birbirine sıkıştığını ve resimlerin yanlış yerleştirildiğini fark eder. Bunun nedeni "uyumlu tasarım"ın yeterince iyi yapılmamış olmasıdır. Elementor, güçlü bir uyumlu düzenleme özelliğine sahiptir ve basit ayarlamalarla web sitesinin bilgisayarda, tablettte ve cep telefonunda güzel ve kullanışlı bir şekilde görüntülenmesini sağlayabilir.
Tepkisel tasarım nedir?
Basitçe söylemek gerekirse,Tepkisel tasarım, aynı web sayfasının cihaz ekran boyutuna göre otomatik olarak düzenini ayarlamasıdır.：
- Bilgisayarda (büyük ekran), içerik yan yana görüntülenebilir (örneğin üç sütunlu resimler);
- Tablette (orta ekran), otomatik olarak iki sütuna dönüşür;
- Cep telefonunda (küçük ekran), metin çok küçük olmaması veya içeriğin taşmaması için otomatik olarak tek bir sütuna düzenlenir.
Elementor, çoğu senaryoya otomatik olarak uyum sağlar, ancak yine de her cihaz için en iyi deneyimi sağlamak için detayları manuel olarak optimize etmeniz gerekir.
İlk adım: Elementor'un tepkisel düzenleme modunu tanıyın.
Elementor düzenleme arayüzüne girdikten sonra, üst menü çubuğunun sağ tarafında üç simge bulunur ve bunlar sırasıyla üç farklı cihaz görünümüne karşılık gelir:
- 🖥️ Masaüstü görünümü.(Varsayılan görüntüleme)
- 📱 Tablet görünümü.(Yaklaşık 768 piksel genişliğinde)
- 📱 Cep telefonu görünümü.(Yaklaşık 375 piksel genişliğinde)
İşlem yöntemi.İlgili simgeye tıklayarak, cihazın Önizleme moduna geçebilirsiniz. Tüm stil değişiklikleri (font boyutu, boşluk, düzen gibi) bireysel cihazlar için ayrı ayrı ayarlanabilir ve birbirlerini etkilemez.
İkinci adım: Tepkisel tasarımın temel ayarları (3 zorunlu adım).
Metin boyutu: Telefonda metin çok küçük ya da çok büyük olmamasına dikkat edin.
Bilgisayarda uygun görünen metin, telefonda okunaksız (çok küçük) veya satır atlamaları karışık (çok büyük) olabilir ve ayrıca ayarlanması gerekir:
- Metin modüllerini (başlıklar, paragraflar vb.) seçin ve sağ taraftaki "Stil" paneline gidin.
- "Yazı tipi boyutu" ayarını bulun ve değerin yanındaki "Tepkisel simgeye" (küçük bilgisayar simgesi) tıklayın. Tıkladığınızda sırasıyla masaüstü/tablet/telefon için üç giriş kutusu görünecek.
- "Mobil görünüme" geçin ve doğrudan uygun boyutları girin (örneğin, başlık telefonda 24-32 px, paragraf 14-16 px olarak ayarlanır).
bir şeye dikkat çekmek.Metin boyutu, "Ekran ne kadar küçükse, metin çok büyük olmamalı fakat net olmalı" şeklinde olmalıdır. Böylece telefonda herhangi bir yakınlaştırma olmadan metni okumak mümkün olacaktır.
Resimler ve modül genişliği: Ekranı aşmamaya dikkat edin.
Bilgisayarda "80% genişliği" olarak ayarlanmış bir resim, telefonda hala çok geniş görünebilir veya kenarlarında çok fazla boşluk olabilir:
- Resmi/modülü seçin ve sağ taraftaki "Stil" paneline gidin (resim "Stil" → "Genişlik" bölümünde, diğer modüller ise "Gelişmiş" → "Genişlik" bölümünde olabilir).
- "Genişlik" değerinin yanındaki "Tepkisel simgeye" tıklayın ve "Mobil görünüme" geçin.
- Genişliği "100%" olarak ayarlayın (resim/modülün cep telefonu ekranının genişliğini doldurmasını sağlayın ve kenarlarda boşluk bırakmayın) veya ihtiyaç duyulduğunda ayarlayın (örneğin 90% biraz boşluk bırakır).
Dikkat edin.Eğer resmin boyutu kendiliğinden çok küçükse, 100%'ye ayarlandığında bulanık olur. Önceden yüksek çözünürlüklü resimler hazırlamak önerilir (en az 1000 piksel genişliğinde).
Boşluklar ve kenarlıklar: İçeriğin birbirine sıkışmasını önleyin.
Cep telefonu ekranlarının sınırlı alanı vardır. Modüller arasındaki çok büyük boşluklar alanı boşa harcar ve çok küçük boşluklar ise kalabalık görünmesine neden olur.
- Herhangi bir modülü (örneğin düğme, paragraf) seçin ve sağ taraftaki "Gelişmiş" paneline gidin.
- "Dış kenarlık"ı (modülün diğer öğelerle olan uzaklığı) veya "iç kenarlık"ı (modülün içeriğinin çerçeveyle olan uzaklığı) bulmak için, değerin yanındaki "Tepkisel simgesine" tıklayın.
- Mobil görünüme geçin ve değerleri azaltın (örneğin, üst kenar boşluğunu 50 pikselden 20 piksele düşürün, böylece modül daha kompakt olur).
Teknikler.：Basılı tutun. Ctrl Birden fazla modülü aynı anda seçin ve aralıkları toplu olarak ayarlayın, böylece daha verimli çalışabilirsiniz.
Üçüncü adım: Düzenleme ayarları (sütun düzeninin cep telefonunda optimize edilmesi)
Eğer ana sayfanızda "çok sütunlu bir düzen" kullanıyorsanız (örneğin 3 sütunlu hizmet tanıtımları, 2 sütunlu resim-metin kombinasyonları), bu mobil cihazlarda birbirinin üzerine binebilir. Bunun yerine tek bir sütuna geçmeniz gerekir:
- Çok sütun içeren bir "Bölüm" bulun (modülün dışındaki mavi kesikli çerçeveye tıklayarak tüm bölümü seçin).
- Sağ taraftaki "Düzenleme" paneline gidin ve "Sütunlar" ayarını bulun (örneğin, mevcut ayar "3 sütun").
- Sütun değerlerinin yanındaki "Tepkisel simgeye" tıklayın ve "Mobil görünüme" geçin.
- Sütun sayısını "1 sütun" olarak değiştirin, bu durumda içerik daha net olacak ve telefonda otomatik olarak tek bir sütuna düzenlenecek.
Örnek.Bilgisayarda 3 ürün sütunu görüntülenir, tabletta 2 sütuna dönüşür ve telefonda 1 sütuna dönüşür. Böylece hem büyük ekran alanını kullanır hem de küçük ekranın okunabilirliğini sağlar.
Dördüncü adım: Gereksiz elementleri gizle (küçük ekranlar için)
Bazı öğeler bilgisayarda sayfayı zenginleştirir, ancak telefonda gereksiz görünebilir (örneğin karmaşık dekoratif simgeler, uzun açıklama metinleri). Bunlar telefonda gizlenebilir:
- Gizlemek istediğiniz modülü seçin ve sağ taraftaki "Gelişmiş" paneline gidin.
- "Tepkisel" ayarlara inin ve "mobil cihazlarda gizle" seçeneğini bulun (veya sırasıyla "masaüstünde gizle" ve "tablette gizle" seçeneklerini işaretleyin).
- "Mobil cihazlarda gizle" seçeneğini işaretlerseniz, modül otomatik olarak telefon görünümünde kaybolur ve bilgisayar ve tablet görüntülerini etkilemez.
Uygulanabilir SenaryolarDekoratif yan menü simgeleri, bilgisayar tarafından kullanılmak üzere özel iletişim formları (telefonlarda daha basit formlarla değiştirilebilir).
Adım: Önizleme ve test (önemli bir adım)
Ayarlar tamamlandıktan sonra, gerçek cihazda test etmelisiniz (veya Elementor'un önizleme özelliğini kullanarak dikkatlice kontrol edin):
- Elementor içindeki önizleme.Sırasıyla "Masaüstü → Tablet → Telefon" simgelerine tıklayın ve her modülü incelemek için sayfayı kaydırın:
- Metin tam olarak görüntüleniyor mu (kesinti yok, üst üste binen yok)?
- Resimler net ve ekranı tamamen kaplıyor mu (büzülme veya deformasyon olmadan)?
- Düğme yeterince büyük mü (telefonda en az 44x44 piksel, tıklamayı kolaylaştırmak için)?
- Gerçek cihaz testi.Cep telefonunuzla Elementor'un üstündeki "QR kodunu" tarayın, sayfayı kendi telefonunuzda açın, gerçek düğmeleri ve giriş kutularını kullanın ve kaydırma akıcılığını hissedin.
- Yaygın sorunları giderme.：
- Eğer metin satır atlamaları karışık ise: Mobil cihazda yazı tipi boyutunu küçültün veya modül genişliğini artırın.
- Eğer resim deforme olursa: Mobil cihazda "Nesne Uyarlaması"nı "Kapla" olarak ayarlayın (Resim → Stil → Nesne Uyarlaması).
- Eğer düğme çok küçükse: Mobil cihazda düğmenin "iç boşluğunu" artırın (en az 15 piksel yukarı ve aşağı, en az 20 piksel sağ ve sol).
Yeni başlayanların hatırlaması gereken duyarlı tasarım ilkeleri.
- Mobil öncelikli.Tasarım sırasında önce mobil görünümü düşünün, sonra bilgisayara genişletin (sonradan büyük değişiklikler yapmaktan kaçının).
- Az, daha fazla demektir.Cep telefonu ekranı sınırlı olduğundan, yalnızca temel içeriği koruyun ve gereksiz öğeleri silin.
- Tutarlılık.Renkler ve yazı tipi stili, ziyaretçilerin kafa karışıklığını önlemek için tüm cihazlarda birbirinin aynısı olmalıdır.
- Düzenli kontroller.Her yeni modül ekledikten sonra, görüntünün normal şekilde görüntülendiğinden emin olmak için telefon görünümüne geçin.
Yukarıdaki adımları takip ederek, web siteniz bilgisayarlarda, tabletlerde ve telefonlarda profesyonel bir şekilde görüntülenecektir. Tepkisel tasarım karmaşık görünebilir, ancak Elementor ile birkaç kez uyguladıktan sonra 90%'nin görüntüleme sorununu çözmek için farklı cihazlar için birkaç anahtar parametreyi ayarlamanız gerektiğini fark edeceksiniz. Daha fazla alıştırma ve test yaparak kısa sürede bunu ustaca yapabilirsiniz!
Türkçe