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?

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.

ahmad

Yorumları Görüntüle

  • Bu seçenekleri nerede buluyorsunuz? Onlar yok. Bu Premium Elementor için mi? Eğer öyleyse, makalenizde bundan bahsetmelisiniz ki insanlar zamanlarını boşa harcamasın.

  • Hola,

    Estoy maquetando con Elementor Pro.
    Quiero poner dos banner, uno pegado a la izquierda ve otro pegado a la derecha de la pantalla. Ello he creado için: - una seccion para cada banner.
    - un encabezado con una frase, a la cual he puesto de fondo una Imagen.

    Una de ella deberia ir pegada a la derecha de la pantalla (margen izquierda 0 imagino). Algun consejo? Muchas gracias!

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

  • Buongiorno, tutto chiaro, grazie!
    Her şeyi değiştir. Cerco di spiegarmi meglio: vorrei bölücü una sezione nedeniyle kolonya.
    En uygun fiyata, en uygun fiyatlı akıllı telefon, eşit uzaklıkta, eşit uzaklıkta, her yerde kullanılabilir. fotoğrafta kapak. En uygun fiyat, en uygun fiyattır.
    Sono aperta bir tutti i suggerimenti
    Grazie

  • Scusate, ho appena capito come ücreti (her hata için l'ho capito). Scusate il disturbo e grazie lo stesso

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

  • Yo tengo un problema con la alineación que no logro çözücü. El contenido se queda bir un lado, la imagen, titulo y texto. Logro centrarlo yok (solo hay una columna pero es como si la mitad o más no se pudieran usar, ni poner otro cuadro de texto) Hayır me había pasado nunca nunca y no se que más probar. Bir sido al editar para tamaño móvil, se ha quedado olarak bir un lado todo cuando cambio bir escritorio! Alguien sabe que puede ser? O muhtemelen yapılacak en iyi şey en el artículo y parece que nada funciona 🤗

    • Merhaba, önce bölümler, sonra sütunlar ve içerik bloğundaki tüm hizalamalarınızı kontrol ederek başlamanız gerektiğini düşünüyorum. Temanızın CSS'sinin bu hizalamada rol oynaması da mümkündür.

  • afiyet olsun!
    je m'arrache les cheveux araba je n'arrive pas à aligner 3 kolon à l'horizontale.
    Daha fazla bilgi için en iyi seçenekler, en iyi düzenlemelerin, daha önceki değişikliklerin, daha fazlasının ve daha fazlasının haberlerinin (büyük ve büyük ölçekli) duyurulmasıdır. en iyi parfeite aligner'ın en iyileri. Yorum mu?

  • Hola, tengo tengo kurulum unsuru, yatay ve dikey yatay ve dikey olarak bağımsız ve sıfırdan bağımsızdır.
    Hay que instalar un tamamlayıcı ek? lütuflar

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

  • Hola, tengo la versiyonu pro de elementor y hiçbir figüra ninguna de las opciones sıra dışı göstergeler, sıra puede ser?

  • merhaba,

    ich habe im altbilgi verchiedene widget'ları. das oberste ist immer eine manşeti, darunter stichpunkte. da ich nicht zwei unterschiedliche textarten içinde einen kasten schreiben kann (h4 und p) muss ich das 2 bölümde machen. Wordpress bölümleri zueinander verringern'den uzak durun? est zwischen der manşet ve dem metin einfach zu viel platz.

    danke für eure hilfe

    • Merhaba, metinler arasındaki boşluğu yumuşatmak 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 üstbilgi ve altbilgi nasıl kullanılır

Bir web sitesinin üstbilgileri ve altbilgileri temel unsurlardır. Çoğu durumda, Başlık gezinme 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 ve 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şturucu ile bir e-ticaret nasıl kurulur

Bir çevrimiçi mağaza kurmak söz konusu olduğunda, WooCommerce ilk tercih edilen plugin . Bilişim Teknoloji…

4 Ekim 2021

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

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

21 Eylül 2021