Duyarlı WordPress Elementor siteleri oluşturmanın kolay yolları

Çoğu kullanıcı mobil cihazları kullanarak İnternet’e erişirken, web siteniz gerçekten tepkisiz olabilir mi?
Duyarlı tasarım nedir?
Dolayısıyla, bir web sitesi bağlamında, duyarlı, sitenin farklı cihazlarda aynı görülmeyen, ancak ziyaretçilerin cihazlarında ayarlanan çeşitli yönlerine tepki verdiği anlamına gelir. 2019 yılında, daha fazla kullanıcı mobil cihazlarını kullanarak İnternet’e masaüstü bilgisayarlardan daha erişebilir, ancak hücresel – özellikle hücresel kullanıcıları dikkate alarak web sitelerini pratik yapan tasarımlar – daha uzun süredir.
Duyarlı bir Elementor tasarımıyla, temel olarak boyutunu değiştirir ve web sitenizin tüm bileşenlerini farklı ekran ekranlarına – masaüstleri, tabletler (768px) ve hücresel (360px) eşleştirecek şekilde yeniden düzenlersiniz ve herhangi bir kaliteyi kaybetmezsiniz. Ve en popüler içerik yönetim sistemi olarak WordPress ile, bu kadar çok geliştiricinin duyarlı WordPress temaları oluşturmak için çok uğraşması şaşırtıcı değildir, ancak bu da bir garanti değildir.
Elementor’daki farklı düzenlere nasıl erişebilirim?
Ekran simgesini sol alt köşede bulacaksınız. Seçmek bir önizleme alt menüsü açacaktır. Orada tabletler ve hücresel düzenler için önizlemeler için seçenekler bulacaksınız.

Masaüstü ekranı varsayılandır, ancak kolayca değiştirebilirsiniz. Önizleme değişikliklerini daha küçük aygıtla eşleşecek ve farklı bir en boy oranıyla farklı şekilde düzenleyecek şekilde değiştirdiğinizde, web sitenizin düzeninin her cihazda nasıl göründüğünü hissedebileceğinizi fark etmelisiniz.

Hatırlamanız gereken önemli şey, herhangi bir şekilde tablet veya hücresel modda, masaüstü modunda kozmetik tasarım seçeneğini değiştirmeniz ve düzeninizin hala etkilenmemesidir. Bu şekilde, herhangi bir düzen kaybedilen için bir iş yoktur. Hangi öğeyi ayarlayabilirim?

Başka bir şeyden önce, bir şeyi açıklığa kavuşturalım – aşağıda gösterilen simge ile işaretlenen her öğeyi ayarlayabilirsiniz. Bu eleman için, masaüstü, tablet ve hücresel formatlar için her öğenin değerini ayrı ayrı ayarlayabiliriz.
yazı tipi

Ziyaretçilerinizin metin öğenizi görme şekli çok önemlidir. Yazı tipiniz hücresel dostu değilse, ziyaretçileriniz web sitelerinin okunamayacağını bulabilir, bu da SEO’nuzu (Arama Motoru Optimizasyonu) etkileyecektir. Ziyaretçileriniz tarafından yalnızca metin yoluyla elde edilen bilgi miktarı ile bu görmezden gelemeyeceğiniz bir şeydir. Okuyan web sitesi temiz, temiz ve profesyonel görünüyor.
Örneğin bu itirafa bakın:
Bu, masaüstü düzeninde, özellikle büyük ekranla çok iyi görünüyor. Ancak daha küçük bir cihazda, özellikle portre oryantasyonunda görüntülendiğinde, metnin yatay seven tüm kısımları pürüzsüz ve okunamaz görünecektir. Düzeni değiştirmek istediğiniz cihazı seçerek düzeltebilirsiniz. Varsayılan seçenekten (masaüstü) memnunsanız, tabletler ve cep telefonları için yönetilecek bazı ayarlarınız var. Herhangi bir unsur gibi, metinsel öğelerin de öznitelikleri vardır. Hatırlanması gereken ilk şey HTML etiketidir. HTML etiketlerini değiştirmeyin. Bu SEO için çok önemlidir ve düzgün bir şekilde düzenlendikten sonra değiştirilmemelidir. Metnin boyutunu değiştirmek için stil sekmesini görmek istersiniz. Tipografik bir ayar bulun. Orada yazı tiplerini, boyutu, ağırlığı, çizginin yüksekliğini ve harfleri değiştirebilirsiniz. Metin seviyesini değiştirmek istiyorsanız, içerik sekmesini seçerek seçeneği bulabilirsiniz.

Büyük harf dönüşümleri gibi bazı değişikliklerin diğer cihazlarda da görüleceğini unutmayın. Tipografik seçenekler özel cihazlardır. Metin öğesinin orantılı olarak ayarlanması gerektiğini hatırlamak da önemlidir. Dikkat etmek istediğiniz şey, tüm metin öğelerinin boyut oranıdır. Bu orantılı olarak değiştirilen kısımdır:

Çizginin Yüksekliği

Elementor, bölümleri veya satırları kullanarak içeriğiniz için temel yapıyı düzenler. Bu nedenle yüksek çizgiler çok önemlidir. Ayarlandıktan sonra, satırın yüksekliği her cihaza ayarlanabilir. Dikkat etmek istediğiniz şey, eleman içeriğiniz ile satırın kenarları arasındaki mesafedir.

Masaüstü cihazlarda iyi görünen şey, cep telefonları ve tabletlerde çok fazla dikey alan gerektirir. Satırın yüksekliğini ayarlamak için satırı seçin, ardından Düzenle seçeneğini seçin. Düzen sekmesini seçin ve istediğiniz gibi minimum yükseklik kaydırıcısını ayarlayın. Farklı ekran düzenleri için farklı yüksekliklere sahip olabilirsiniz. Yazı tipinizin boyutunu da ayarlarsanız bu çok önemlidir.
Marj ve dolgu

Ayrıca düşünmeniz gereken şey marj ve dolgu. Marj elemanlar arasında bir boşluktur, dolgu, elemanın kenarı ile içeriği arasındaki boşluktur. Web sitenizi en başından itibaren inşa edip etmemenin yanı sıra veya Elementor için bitmiş bir şablon üzerinde çalışıyorsanız, öğelerde gezmekte zorluk çekmeyeceksiniz. Seçilen bölümdeki her öğe, yayınlandığında mavi limiti görüntüler – farenizi bir elemanın üstüne taşıyın ve sınırı göreceksiniz. Bu, parçanın yapısını hissetmenin iyi bir yoludur.

Öğeyi seçin, ardından Gelişmiş sekmesini seçin. Dolgu ve marj için dört seçenek bulacaksınız: üst, sağ, alt ve sol. Burası dolgu ve marj değerlerinizi girdiğiniz yerdir. Alt menüsünün sağ tarafındaki bağlantı simgesi, birbiriyle bir ilişki içinde kilitler: her şeyin aynı değere sahip olmasını veya her marj veya dolgu için farklı bir değeri olmasını seçebilirsiniz.

kolon
Bir sütun yapmak, farklı cihazlar için optimize edilmezse görüntüleme sorunlarına neden olabilir. Seçim ayarlarınız sütun sayısına ve içeriğine bağlı olacaktır.

Varsayılan olarak, Elementor mobil cihazda diğerinin altında sütun biriktirir. Bu, sütunların bir araya gelmeyeceği ve içeriğin hala okunacağı anlamına gelir. Sütunu hücresel kullanıcılar tarafından daha kolay görülmesi için, herhangi bir satırda sütun sırasını çevirebilirsiniz-sadece parçayı seçin, sonra devam eden sekmeyi seçebilirsiniz. , Duyarlı alt menü ve tablet ve hücresel düzeni için sütunun arka düğmesini istendiği gibi değiştirin.

Örneğin, masaüstü ekranındaki öğeleri seçerseniz, Gelişmiş sekmesini seçin, duyarlı alt menü seçin, üç görüntüleme/gizleme anahtarı görürsünüz: mobil cihazlar, tabletler ve masaüstü bilgisayarlar için. Bunu, görmek için kullanılan cihaz türüne bağlı olarak öğeleri veya parçaları görüntülemek veya gizlemek için kullanabilirsiniz. Bu seçenek, isterseniz, kullandıkları cihaza bağlı olarak, ziyaretçileriniz tarafından çekici veya yabancı olarak kabul edilebilecek bazı unsurlar veya parçalar için pratiktir.
Sonuç olarak

İşte: Web sayfası tasarımınızı hücresel ve tablet için uyarlamak – ya da tam tersi – asla bu kadar kolay. Duyarlı bir Elementor web sitesinin oluşturulmasının birçok Elementor özelliğinden sadece biri olduğunu unutmayın. Bunu keşfetmenize yardımcı olmak için buradayız.

Bu makalenin yararlı olduğunu umuyoruz. Eğer isterseniz, bu makalelerin bazılarını okumaktan çekinmeyin!

Web sitenizi geliştirmesi için öğeler için önemli eklentiler

WordPress Elementor Eklentisi: Bu ne kadar güçlü?
İnanılmaz WordPress Elementor Teması

Duyarlı WordPress Elementor siteleri oluşturmanın kolay yolları