Elementor bölümlerini ve sütunlarını hizalama

Elementor ile çalışırken , bölümlerinizi ve sütunlarınızı özel olarak konumlandırmanın biraz zor olduğunu fark edeceksiniz. Duyarlı bir "dolguya kadar genişlet" düzeni elde etmek için sütunları ve bölümleri dikey ve yatay olarak hizalamanız gerekir. Bu hizalama olmadan, değişen yükseklikteki sütunların öğeleri ekranda ayarlanmayacaktır.

• Neden Hizalanmamız Gerekiyor?
• Duyarlı Tasarım için Sütunlar veya bölümler nasıl çalışır?
• Elementor bölümlerini ve sütunlarını nasıl hizalayabilirim?
• Genişlik Sorunlarını Düzeltmek için Taşma Gizli Kullanın
• Konumlandırmanın Bakımı
• Bağıl Birimler
• Z-Index Kullanarak Her Bir Elemanın Derinliğini Kontrol Edin
• Yinelenen İşlevler Hakkında Püf Nokta
• Ofsetler
• Altın kural
• Sonuç

Neden Hizalanmamız Gerekiyor?

Her bir sütun veya bölümde içerik farklı kategorilerde olabilir. Resimler, yazılar ve derecelendirmeler şeklinde olabilir. Birleştirilmiş bir görünüm için, içerik görünümünde tekdüzelik olması tavsiye edilir. Sadece oraya atılmamalı - sadece lanet olsun diye.

İyi bir hizalama ile, web sitesinin daha düzenli ve şık görünmesini sağlayabilir, böylece dağınık görünmez. Hizalama seçeneğiyle, aynı sütunda yan yana değişen boyutlarda birkaç widget'ı ayarlayabilirsiniz.

Duyarlı Tasarım için Sütunlar veya bölümler nasıl çalışır?

Elementor 2.5 , tasarımınızı ve içeriğinizi özel olarak konumlandırmanıza olanak tanır. Yeni özel konumlandırma özelliği ile widget'ları herhangi bir konuma taşıyabilirsiniz. Ancak, belirli bir bölümün ötesinde gerçekten yapamazsınız. Bu widget'lar, içinde bulundukları sütuna göredir. Bu, tasarımın yanıt verme hızında bir soruna neden olabilir.

Üç sütunlu bir düzeniniz olduğunu varsayalım. Özel konumlandırma yardımıyla, bir widget'ı sağ sütundan orta sütuna sürükleyip bırakabilirsiniz veya istediğiniz gibi bırakabilirsiniz.

Ancak bunu yapmak yalnızca masaüstü ziyaretçilere fayda sağlayacaktır çünkü onlara iyi görünecektir. Ancak, Elementor sütunları mobilde dikey olarak istiflediğinden, web sitesine mobilden erişilmesi bir soruna neden olacaktır.

Dolayısıyla, üç sütunu yan yana tutmak yerine, üç sütunun da üst üste yığılmasıyla karşılaşabilirsiniz. Öğe artık masaüstü bilgisayarlarda olduğu gibi orta sütunda görünmeyecek.

Bununla birlikte, mobil görünümü gizli bir ayarla akıllıca düzenleyebilirsiniz, ancak insanların çoğunun bulabileceğini garanti etmez. Peki, kullanıcıları neden sinirlendiriyorsunuz? Tasarımı duyarlı ve uyarlanabilir yapmak doğru çözümdür. Böylece hiçbir yere çarpmaz.

Bu nedenle, widget'ın içindeki sütunla olan ilişkisine dikkat etmeniz gerekir.

Elementor bölümlerini ve sütunlarını nasıl hizalayabilirim?

Her bölüm / sütun için düzen bölümüne gidin ve gereksinimlerinize göre aşağıdaki hizalama seçeneklerini ayarlayın:

• Dikey Hizalama: widget'ların ayarlarını aşağıdakilerden seçebilirsiniz. Ancak aklınızda bulundurmanız gereken bir şey, bir sütundaki içeriğin ilk üç sütun dikey seçeneği ile hizalanamayacağıdır (üst, orta ve alt).
• Üst
• Orta
• Alt

Hatta, orada ^* gerçekten kullanışlı beğeninize göre içeriği hizalamak yapmak üç yeni seçenekler.

• ^*Aradaki Boşluk - sütunun kenarındaki başlangıç ​​ve bitişteki widget'lar arasındaki boşluğu ayarlar. Widget'lar eşit aralıklıdır, yani aralarında eşit boşluk vardır.
• ^*Etrafında Boşluk - widget'lar arasındaki boşluk eşittir ve kenarlar widget'lar arasındaki boşluğun yarısı kadardır.
• ^*Eşit Alan - Widget'lar arasındaki boşluk eşittir - onlardan önce, sonra ve sonra eşittir.

• Yatay hizala: bu seçenekle satır içi konumlandırma gerçekleştirebilir ve aynı satırda bulunan satır içi widget'ları yatay olarak hizalayabilirsiniz. Şu seçenekleri kullanarak sütunların içeriğini yatay olarak hizalayabilirsiniz:
• Başlat - tüm simgeleri sola hizalar
• Orta: simgeleri sütunun ortasına konumlandırır
• End- tüm simgeleri sağa ayarlar
• Aradaki Boşluk - sütunun kenarında başlangıçta ve sonda widget'lar arasındaki boşluk. Widget'lar eşit aralıklıdır, yani aralarında eşit boşluk vardır
• Etrafında Boşluk - widget'lar arasındaki boşluk eşittir ve kenarlar, widget'lar arasındaki boşluğun yarısı kadardır
• Eşit Boşluk - widget'lar arasındaki boşluk tek tiptir - aralarında, öncesinde ve sonrasında eşittir

Genişlik Sorunlarını Düzeltmek için Taşma Gizli Kullanın

Bir web sitesinin mobil cihazlardaki görünümü söz konusu olduğunda, özel konumlandırmaya sahip bir widget'ın bir sütunun genişliğini aştığı bir sorunla karşılaşma olasılığınız yüksektir.  

Bu, mobil ziyaretçiler için yatay olarak kaydırma yapabildikleri gerçekten sinir bozucu bir duruma neden olur. Ve bu web siteniz için istediğiniz bir şey değil. Bu, şu şekilde düzeltilebilir:

Düzen Ayarları > Taşma seçeneğini Gizli

Bunu yaparak, aşan alan kesilecek ve yatay kaydırmaya gerek kalmayacaktır.

Konumlandırmanın Bakımı

Ayrıca sütunların yerleştirilmesine de dikkat etmeniz gerekir. mutlak ve sabit olarak özel konumlandırma ayarlayabilirsiniz

Mutlak konum, öğenin içinde bulunduğunuz bölüm veya sütuna göre konumlandırılmasıdır. Bu nedenle, bir öğe veya bölüm için mutlak konumlandırma kullanırsanız, o bölüm ziyaretçinin penceresi boyunca hareket etmeyecektir.

Sabit konum, bölümün / öğenin ziyaretçinin bakış açısına sabit kalmasına izin verdiği için mutlaktan farklıdır. Dolayısıyla, kullanıcı sayfayı kaydırırsa, öğe orada kalacaktır.

Bağıl Birimler

Web sayfanızı tasarlarken, öğeleri konumlandırmanın birden çok yolu olduğunu göreceksiniz. Mutlak konumlandırma için, farklı ekran boyutları söz konusu olduğunda duyarlı tasarımı daha işlevsel hale getireceğinden göreceli birimler kullanmak iyi bir fikirdir.

Bağıl birim, ekranın göreli genişliğine ve yüksekliğine göre kendini ayarlar, böylece öğelerin veya bölümlerin kendilerini yeniden boyutlandırmasına ve daha iyi duyarlı bir tasarıma izin verir. Piksel kullanmayı tercih ederseniz, farklı ekran boyutları için birden fazla duyarlı bölüm oluşturmanız gerekir.

Z-Index Kullanarak Her Bir Elemanın Derinliğini Kontrol Edin

Widget'lar için 'mutlak' veya 'sabit' konumlandırma kullanacaksanız, iki veya daha fazla widget'ın üst üste gelebileceği, yani birbirlerinin "üstüne" yığıldıkları birçok durum olacaktır. Normal Z-endeksi ayarını kullanarak bundan kaçınabilirsiniz. Bu, derinliği kontrol etmenize ve ön planda hangi widget'ların görüneceğini seçmenize olanak tanır.

Yinelenen İşlevler Hakkında Püf Nokta

Özel konumlandırmalı bir öğeyi çoğaltmak için sağ tıklamayı kullanıyorsanız, sağ tıklama işe yaramamış gibi görünebilir.

Ama bakın. Bu doğru değil. Yinelenen işlevsellik mükemmel bir şekilde çalıştı ve öğeyi kopyaladı. Sadece, her bir öğe tam olarak aynı özel konumlandırmaya sahip olduğundan, yinelenen öğe TAM OLARAK diğer öğenin üstüne yığılır (yinelenen öğe oluşturulmadığı izlenimi verir.).

Basit bir ifadeyle, başarılı bir şekilde bir sütun oluşturursanız, gerektiğinde sütunu çoğaltabilirsiniz. Ayrıca, oluşturduğunuz sütunların özel konumlandırma kullanmadığından emin olun. Varsa, sağ tıklama seçeneği ile çoğaltma çalışmayacaktır. Bununla birlikte, sınırlamanın üstesinden gelmek ve sütunu kopyalamak için yinelenen işlevi kullanabilirsiniz.

En üstteki öğeyi biraz sürükleyin ve diğerini ortaya çıkaracaktır. Her iki unsur da oradadır. Ayrıca, bir sütunu çoğalttığınızda, eskisinin üzerine yığılır. Kafanız karışabilir. Ancak endişelenmeyin, basitçe sürükleyebilir ve ardından web sayfası tasarımınızda kullanabilirsiniz.

Ofsetler

Web sayfası içeriğinize göre dengelemeniz gereken durumlar vardır. Elementor ile ofseti kolayca ayarlayabilirsiniz. Dolayısıyla, soldan 500px'lik bir uzaklık ayarlarsanız, girişinize bağlı olarak içeriğin çevresinde boşluk bırakılacaktır. Benzer şekilde, sağ tarafta da ofseti ayarlayabilirsiniz. İçerik ekranda doğru şekilde hizalanacağından, hem sol hem de sağ ofseti benzer bir değere ayarlamak iyi bir uygulamadır.

Web sayfası içeriğinize göre dengelemeniz gereken durumlar vardır. Elementor ile ofseti kolayca ayarlayabilirsiniz. Dolayısıyla, soldan 500px'lik bir uzaklık ayarlarsanız, girişinize bağlı olarak içeriğin çevresinde boşluk bırakılacaktır. Benzer şekilde, sağ tarafta da ofseti ayarlayabilirsiniz. İçerik ekranda doğru şekilde hizalanacağından, hem sol hem de sağ ofseti benzer bir değere ayarlamak iyi bir uygulamadır.

Altın kural

Daha iyi yanıt veren tasarım için göreli birimleri kullanın. Bunun nedeni, web sitesine farklı bir platformdan erişildiğinde mutlak konumlandırmanın zor olabilmesidir. Bölümlerinizi tasarlamak için göreli birimleri kullanmak daha duyarlı bir tasarımla sonuçlanacaktır. Genişlikteki değişim, göreceli birimler yardımıyla mükemmel bir şekilde ele alınabilir. "Göreli" ile, pikseller gibi birimleri sabitlemek yerine, yüzde veya görünüm genişliği (VW) gibi değişen birimleri kastediyoruz.

Sonuç

Elementor , süper kullanıcı dostu bir web sitesi oluşturucusudur. Bazen, web sitesine mobil cihazdan veya tabletten erişilirse, web sitesi ekranında zorluklar ortaya çıkabilir. Bölüm ve sütun hizalama yardımı ile web sitelerinizi gerçek kolaylıkla mükemmel hale getirebilirsiniz.