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 "doldurmak için genişlet" düzeni elde etmek için sütunları ve bölümleri dikey ve yatay olarak hizalamanız gerekir. Bu hizalama olmadan, farklı yüksekliklere sahip sütunların elemanları ekran üzerinde ayarlanamayacaktır.

Neden Hizalamamız Gerekiyor?

Her sütunda veya bölümde içerik farklı kategorilerde olabilir. Resimler, metinler ve derecelendirmeler şeklinde olabilir. Birleştirilmiş bir görünüm için içerik görünümünde tekdüzelik olması önerilir. Sırf öyle olsun diye oraya atılmamalı, çöpe atılmamalı.

İyi bir hizalamayla, web sitesinin daha düzenli ve şık görünmesini sağlayabilirsiniz, böylece darmadağın görünmez. Hizalama seçeneğiyle, aynı sütunda yan yana, farklı boyutlardaki birkaç widget'ı ayarlayabilirsiniz.

Duyarlı Tasarımda 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ğiyle widget'ları istediğiniz konuma taşıyabilirsiniz. Ancak belli bir bölümün ötesinde bunu gerçekten yapamazsınız. Bu widget'lar içerdikleri sütuna göredir. Bu, tasarımın yanıt vermesinde bir soruna neden olabilir.

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

Ancak bunu yapmak yalnızca masaüstü ziyaretçilerine fayda sağlayacaktır çünkü onlara uygun görünecektir. Ancak Elementor sütunları mobilde dikey olarak istiflediğinden web sitesine mobilden erişilmesi sorun yaratacaktır.

Yani üç sütunun yan yana olması yerine, üç sütunun da üst üste yığıldığını görebilirsiniz. Öğ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 ayarlayabilirsiniz, ancak insanların çoğunluğunun onu bulabileceğinin garantisi yoktur. Peki neden kullanıcıları hayal kırıklığına uğratıyorsunuz? Tasarımı duyarlı ve uyarlanabilir hale getirmek doğru çözümdür. Hiçbir yere çarpmasın diye.

Bu nedenle widget'ın içinde bulunduğu sütunla 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ğıdan seçebilirsiniz. Ancak aklınızda bulundurmanız gereken bir husus, bir sütundaki içeriğin ilk üç sütun dikey seçeneğiyle (üst, orta ve alt) hizalanamayacağıdır.
  • Tepe
  • Orta
  • Alt

Bu bağlamda, içeriği beğeninize göre hizalamayı gerçekten kolaylaştıran üç yeni seçenek var

  • *Arasındaki Boşluk – sütunun kenarındaki başlangıçtaki ve sondaki 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ındaki 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 tekdüzedir; aralarında, öncesinde ve sonrasında eşittir.
  • Yatay hizalama: 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
  • Tüm simgeleri sağa doğru ayarlar
  • Arasındaki Boşluk – sütunun kenarındaki başlangıçtaki ve sondaki widget'lar arasındaki boşluk. Widget'lar eşit aralıklıdır, yani aralarında eşit boşluk vardır
  • Etrafındaki 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 tekdüzedir; aralarında, öncesinde ve sonrasında eşittir

Duyarlı Genişlik Sorunlarını Düzeltmek İçin Gizli Taşma'yı Kullanın

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

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

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

Bu sayede aşan alan kesilecek ve yatay kaydırmaya gerek kalmayacaktır.

Konumlandırmaya Dikkat Edilmesi

Ayrıca sütunların konumlandırılmasına da dikkat etmeniz gerekir. Elementor 2.5 ile mutlak ve sabit olarak özel konumlandırma ayarlayabilirsiniz .

Mutlak konumlandırma, öğenin içinde bulunduğunuz bölüm veya sütuna göre konumlandırılmasıdır. Dolayısıyla, bir öğeye veya bölüme 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 göre sabit kalmasını sağladığından mutlak konumdan farklıdır. Yani kullanıcı sayfayı kaydırırsa öğe orada kalacaktır.

Göreli Birimler

Web sayfanızı tasarlarken öğeleri konumlandırmanın birden fazla 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 birimlerin kullanılması iyi bir fikirdir.

İlgili birim, ekranın göreceli 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 yanıt veren bir tasarıma olanak tanır. Piksel kullanmayı tercih ederseniz farklı ekran boyutları için birden fazla duyarlı bölüm oluşturmanız gerekir.

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

Widget'lar için 'mutlak' veya 'sabit' konumlandırmayı kullanacaksanız, iki veya daha fazla widget'ın üst üste gelebileceği, yani birbirlerinin "üstünde" istiflenebileceği pek çok durum olacaktır. Normal Z-endeksi ayarını kullanarak bunu önleyebilirsiniz. Bu, derinliği kontrol etmenize ve hangi widget'lerin ön planda görüneceğini seçmenize olanak tanır.

Yinelenen İşlevselliğin Püf Noktası

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

Ama durun. Bu doğru değil. Kopyalama işlevi gayet iyi çalıştı ve öğeyi kopyaladı. Her öğe tam olarak aynı özel konumlandırmaya sahip olduğundan, kopyalanan öğe diğer öğenin TAM OLARAK üzerine istiflenir (hiçbir kopyanın oluşturulmadığı izlenimini verir).

Basit bir ifadeyle, bir sütunu başarıyla oluşturursanız, gerektiğinde sütunu çoğaltabilirsiniz. Ayrıca oluşturduğunuz sütunların özel konumlandırma kullanmadığından emin olun. Böyle bir durumda sağ tıklama seçeneğiyle çoğaltma çalışmayacaktır. Ancak sınırlamayı aşmak ve sütunu kopyalamak için yineleme işlevini kullanabilirsiniz.

Üstteki öğeyi biraz sürükleyin, diğerini ortaya çıkaracaktır. Her iki unsur da orada çok fazla. Ayrıca, bir sütunu çoğalttığınızda eskisinin üzerine yığılacaktır. Kafanız karışabilir. Ancak endişelenmeyin, basitçe sürükleyip web sayfanızın tasarımında kullanabilirsiniz.

Ofsetler

Web sayfası içeriğinize göre uzaklıklar ayarlamanız gereken durumlar vardır. Elementor ile ofseti kolayca ayarlayabilirsiniz. Dolayısıyla, soldan 500 piksellik bir uzaklık ayarlarsanız, girişinize bağlı olarak içeriğin çevresinde boşluk kalacaktır. Benzer şekilde sağ tarafta ofseti de ayarlayabilirsiniz. İçerik ekranda düzgün şekilde hizalanacağı için hem sol hem de sağ uzaklığı benzer bir değere ayarlamak iyi bir uygulamadır.

Web sayfası içeriğinize göre uzaklıklar ayarlamanız gereken durumlar vardır. Elementor ile ofseti kolayca ayarlayabilirsiniz. Dolayısıyla, soldan 500 piksellik bir uzaklık ayarlarsanız, girişinize bağlı olarak içeriğin çevresinde boşluk kalacaktır. Benzer şekilde sağ tarafta ofseti de ayarlayabilirsiniz. İçerik ekranda düzgün şekilde hizalanacağı için hem sol hem de sağ uzaklığı benzer bir değere ayarlamak iyi bir uygulamadır.

Altın kural

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

Çözüm

Elementor , süper kullanıcı dostu bir web sitesi oluşturucusudur. Web sitesine cep telefonundan veya tabletten erişilmesi bazen web sitesinin görüntülenmesinde zorluklara neden olabilir. Bölüm ve sütun hizalamanın yardımıyla web sitelerinizi gerçekten kolaylıkla mükemmel hale getirebilirsiniz.

Ahmed

Yorumları Görüntüle

  • Bu seçenekleri nerede buluyorsunuz? Onlar mevcut değil. Bu Premium Elementor için mi? Eğer öyleyse, makalenizde bundan bahsetmelisiniz, böylece insanlar onu okuyarak zaman kaybetmezler.

  • Merhaba,

    Elementor Pro ile makyaj yapın.
    Daha sonra pankartlar, bir pankart ve bir başkası pantalla ile süslendi. Merhaba, şunu yarattı: - her banner için bir bölüm.
    - bir cümleyle kapatılmış, bir resmin arkasında yer alan bir kelime.

    Bir de ella deberia ir pegada a la derecha de la pantalla (kenar boşlukları 0 hayalinde). Algun consejo? Teşekkürler!

  • Merhaba, ilk bakacağım şey bu yazının ilk bölümünde açıklanan sütun dikey hizalama ayarı olacaktır.
    Şerefe,

  • Buongiorno, tutto chiaro, Grazie!
    Çoğu zaman, iki sütunun altına doğru bir şekilde (bir alt basışla) yerleştirilebilir. Bir bölümün gerektiği şekilde bölünmesini sağlar.
    Kapaklı bir fotoğraf ve sürekli bir nabız (unsopra l'altro) ile bir sinistra sütunu durumunda, sinistra sütun dizisinin eşit mesafeli ve merkezi konumu, kalitesine göre akıllı telefon modeliyle birlikte Rimandano ve stok durumu fotoğrafta yer almaktadır. Sto cercando ovunque, ma non trovo che indichi che si possa ücret.

    Grazie'yi öneriyorum

  • Kusura bakmayın, ho appena capito Come Fare (l'ho capito per errore). Rahatsız etmekten vazgeçin ve stesso'yu sevin

    • Merhaba, tamam harika, elbette mümkün, hatta her sütundaki içeriği dikey olarak ortalayabilirsiniz

  • Logo solventinin bulunmadığı paragrafta sorun var. İçerik, resim, başlık ve metinle birlikte sunulur. Çok fazla zaman yok (yalnızca bir sütun var, ancak daha fazla kullanılmadığında veya daha fazla kullanılmadığında, başka bir metinden başka bir şey düşünmediğimde) Hiç bir alışkanlığım yok ve daha fazla olması mümkün değil. Zaten tamaño móvil tarafından düzenlenmiş olduğundan hem bir quedado hem de bir lado todo cuando cambio a escritorio! Bunu yapabilir misin? İşini ve articulo ve parece que nada funciona'yı yapmaya çalıştı 🤗

    • Merhaba, sanırım bölümlerdeki tüm hizalamalarınızı, ardından sütunları ve ardından içerik bloğunu kontrol ederek başlamalısınız. Temanızın CSS'sinin de bu uyumda rol oynaması mümkündür.

  • günaydın!
    Arabayı yatay olarak hizalamak için 3 sütunu hizalayamazsınız.
    Tasarımı mükemmel bir hizalamayla çevreleyerek, vincin göstergesinde değişiklikleri, sonradan takılan imbriklere sahip sütunları ve farklı bel çizgilerini (daha büyük ve daha uzun) görselleştirebilirsiniz. seçiminiz vücudun şekli ve hizalayıcının şeklidir. Yorum adil mi?

  • Merhaba, yatay ve dikey paragraf seçeneklerini paylaşmadığınız bir bölümü kabul ettiğinizde öğeyi yükleyin.
    Tamamlayıcı bir eklentiyi nasıl kurdunuz? Teşekkürler

    • Merhaba, Elementor'un ücretsiz veya Pro sürümüne sahip misiniz? Belki de sorun budur.

  • Merhaba, öğenin sürümüne baktınız ve gösterebileceğiniz seçeneklere dair bir rakam yok mu?

  • Merhaba,

    Altbilgide birkaç widget'ım var. Bu her zaman bir manşettir, daha cesur bir noktadır. Bu şekilde, 2 bölüme yazmadığım sürece, yazılmamış metinleri tek bir kutuya (h4 ve p) yazmak zorunda değilim. Şimdi sonraki wordpress bölümlerini nasıl bulabilirim? Başlığın ve metnin görünmesi için hala yer var.

    Yardımlarınız için teşekkür ederim

    • Merhaba, metinler arasındaki boşluğu düzenlemek için birkaç seçenek vardır: bölüm, sütun veya widget kenar boşluğu veya dolgu olabilir VEYA satır yüksekliği gibi yazı tipi seçeneği olabilir.

yakın zamanda Gönderilenler

Elementor ile üstbilgiler ve altbilgiler nasıl kullanılır?

Bir web sitesinin üstbilgileri ve altbilgileri temel unsurlardır. Çoğu durumda, Başlık gezinmeyi sağlar…

6 Ocak 2022

WordPress tema karşılaştırması: Astra vs OceanWP

Piyasadaki en popüler WordPress temalarından ikisi Astra ve OceanWP'dir. Profesyonel…

2 Ocak 2022

WordPress haber teması karşılaştırması: Gazete vs. Astra

Mükemmel bir haber sitesi oluşturmak, web tasarımcısı olmanızı gerektirmez. Biz…

25 Ekim 2021

Gazete Teması ile haberlerle ilgili bir web sitesi oluşturun

Gazete teması, tagDiv tarafından tasarlanan en önemli WordPress temalarından biridir.

18 Ekim 2021

Avada WooCommerce oluşturucuyla bir e-Ticaret nasıl oluşturulur?

Çevrimiçi bir mağaza kurmaya gelince, WooCommerce başvurulacak plugin . BT…

4 Ekim 2021

Elementor ile yapışkan başlık ve kaydırma efektleri nasıl kullanılır?

Başlık genellikle bir kişinin web sitenizi ziyaret ettiğinde gördüğü ilk şeydir,…

21 Eylül 2021