Elementor’da konteyner (container), sayfadaki başlık, görsel ve metin gibi tüm öğeleri içine aldığınız bir kutudur; bu kutunun flexbox veya grid (ızgara) düzeniyle yön, hizalama, boşluk ve duyarlı (responsive) davranışını ayarlayarak profesyonel, tutarlı bir sayfa yapısı kurarsınız. Bu rehberde Elementor’un konteyner sisteminin tüm ayarlarını — yön, hizalama, boşluk, dolgu, kenar, taşma ve grid farkı dahil — video anlatımı eşliğinde adım adım inceliyoruz.

Elementor’da Konteyner (Container) Nedir?

Konteyner, Elementor’da bir sayfa oluştururken kullandığınız temel yapı taşıdır — teknik olarak bir div’dir ve içine eklediğiniz başlık, metin, görsel, düğme gibi her widget’ı barındırır. Eski bölüm (section) + sütun (column) yapısının yerini alan konteyner sistemi, tek bir kutu içinde hem düzen (flexbox/grid) hem de iç içe konteynerler kurmayı mümkün kılıyor. Bir sayfadaki her ayrı alan (hero banner, hizmetler bloğu, iletişim alanı gibi) genellikle kendi konteynerine sahip olur.

Flexbox Konteynerde Yön (Direction) Ayarı Ne İşe Yarar?

Konteynerin “Yön” ayarı, içine eklediğiniz widget’ların hangi sırayla ve hangi eksende dizileceğini belirler. Dört seçenek vardır:

• Yatay (Row): Widget’lar soldan sağa doğru yan yana dizilir — örneğin önce başlık, sonra metin.
• Dikey (Column): Widget’lar yukarıdan aşağıya sıralanır.
• Ters Yatay (Row Reverse): Aynı sıralama mantığı korunur ama widget’lar sağdan sola doğru dizilir.
• Ters Dikey (Column Reverse): Sıralama aşağıdan yukarıya döner.

Pratikte en sık kullanılan iki seçenek yatay ve dikeydir; ters seçenekler çok özel durumlar dışında nadiren tercih edilir.

İçeriği Yasla ve Öğeleri Hizala Arasındaki Fark Nedir?

Bu iki ayar birbirine karıştırılan ama farklı işler yapan iki farklı hizalama kontrolüdür:

• İçeriği yasla (justify-content): Widget’ların ana eksen boyunca (yatay konteynerde soldan sağa) nasıl dağıldığını kontrol eder — sola yaslı, ortalı, sağa yaslı, aralarında boşluklu, çevresi boşluklu veya eşit boşluklu.
• Öğeleri hizala (align-items): Widget’ların çapraz eksende (yatay konteynerde yukarı-aşağı) nasıl konumlandığını kontrol eder — başlangıç, orta, son veya uzat.

İkisini birlikte kullanarak bir kutunun tam ortasına, sol üst köşesine veya istediğiniz herhangi bir noktasına widget yerleştirebilirsiniz. Örneğin içeriği ortala + öğeleri ortala kombinasyonu, widget’ı konteynerin tam merkezine oturtur.

Boşluk (Gap), Dolgu (Padding) ve Kenar (Margin) Nasıl Ayarlanır?

Konteyner içindeki widget’lar ve konteynerin kendisi arasındaki boşluklar üç farklı ayarla kontrol edilir:

• Boşluk (Gap): Konteyner içindeki widget’lar arasındaki mesafedir; “satır” (yatay eksendeki boşluk) ve “sütun” (dikey eksendeki boşluk) olarak ayrı ayrı ayarlanır. Varsayılan değer genelde 20 pikseldir.
• Dolgu (Padding): Konteynerin kendi kenarlarıyla içindeki widget’lar arasındaki iç boşluktur.
• Kenar (Margin): Konteynerin dışından, komşu konteynerlere olan dış boşluktur.

Deneyimli tasarımcıların çoğu bu boşlukları rastgele değil, belirli bir sisteme göre verir — örneğin sadece 8, 16, 24, 32, 48 piksel gibi 8’in katları kullanmak, sayfanın genelinde görsel bir tutarlılık (ritim) sağlar. Bu, video anlatımında da vurgulanan, profesyonel arayüzlerin ortak bir özelliğidir: rastgele 13, 27, 35 piksel gibi değerler yerine sabit bir ölçek kullanmak, gözle fark edilmese bile sayfayı daha “doğru” gösterir.

Grid (Izgara) Konteyner Flexbox’tan Nasıl Farklıdır?

Flexbox tek eksende (satır ya da sütun) sıralama yaparken, grid konteyner içeriği hem satır hem sütun bazında ızgara şeklinde diziyor. Grid, özellikle birbirine eşit boyutta ve düzenli aralıklarla dizilmesi gereken içerikler için (referans/müşteri logoları, ürün kartları, ikon listeleri gibi) flexbox’a göre daha az manuel ayarla daha tutarlı bir sonuç verir. Grid ayarlarında istediğiniz sütun ve satır sayısını doğrudan belirleyebilir, “ızgara ana hatları göster” seçeneğiyle de yerleşimi düzenlerken ızgara çizgilerini görünür kılabilirsiniz.

Özellik	Flexbox Konteyner	Grid Konteyner
Eksen	Tek eksen (satır veya sütun)	İki eksen (satır ve sütun birlikte)
En uygun kullanım	Header, buton grupları, hero banner içerikleri	Logo/ikon listeleri, ürün kartları, referans blokları
Düzen kontrolü	Sıra ve hizalamayla dolaylı kontrol	Sütun/satır sayısıyla doğrudan kontrol
Duyarlılık (responsive)	Sarmalı dönüş (wrap) ile esnek	Sütun sayısı cihaza göre elle azaltılır

Sıra (Order) ve Sabit Konum (Position) Ayarları Nasıl Kullanılır?

Gelişmiş sekmesindeki iki ayar, konteynerlerin standart akışını değiştirmenize izin verir:

• Sıra (Order): Bir konteynerin, HTML’deki gerçek ekleme sırasından bağımsız olarak görsel sırasını değiştirmenizi sağlar. Örneğin ilk eklediğiniz bir konteyneri “Son” olarak işaretlerseniz, ekranda sona geçer; ikinci konteyneri “Başlat” yaparsanız o da başa gelir. Bu, özellikle mobilde görsel sırayı masaüstünden farklı kurgulamak istediğinizde işe yarar.
• Konum (Position): Varsayılan “statik” dışında “kesin” (absolute) ve “sabit” (fixed) seçenekleri de vardır. Kesin konum, bir konteyneri sayfanın normal akışından çıkarıp piksel bazında elle konumlandırmanızı sağlar; sabit konum ise sayfa kaydırılsa bile konteynerin ekranda aynı yerde kalmasını sağlar (örneğin sabit bir bildirim kutusu). Elementor’un kendisi de bu iki ayarın duyarlı tasarımda sorun yaratabileceği için dikkatli kullanılması gerektiğini belirtiyor — çoğu proje için gerekmez, yalnızca özel durumlarda tercih edilmeli.

Taşma (Overflow) ve HTML Etiketi Ayarları Ne İşe Yarar?

Konteynerin “Ek Seçenekler” bölümünde iki önemli ayar daha bulunuyor:

• Taşma (Overflow): İçeriği bir konteynerin sığdığı alandan taşan widget’lar bazen mobilde yatay bir kaydırma çubuğu oluşturur — bu, duyarlı tasarım açısından istenmeyen bir durumdur. Taşmayı “gizli” olarak ayarlamak, sığmayan öğeleri görünmez yaparak bu kaydırma çubuğunu ortadan kaldırır.
• HTML Etiketi: Konteynerin arka planda hangi semantik HTML etiketiyle (header, footer, main, section, article) render edileceğini belirler. Bu, Google’ın sayfa yapısını daha iyi anlamasına yardımcı olan bir teknik SEO detayıdır — özellikle header/footer’ı ayrı bir eklentiyle değil, sayfa içinde manuel olarak oluşturduğunuz tek sayfalık sitelerde önemlidir.

Sık Yapılan Hatalar Nelerdir?

Konteyner ayarlarında en sık karşılaşılan üç hata şunlardır:

1. Boşlukları sıfırlamadan başlamak: Elementor’un varsayılan dolgu/boşluk değerleri (genelde 8-10 piksel) fark edilmeden kalır ve tasarımın satır satır tutarsız görünmesine yol açar. Site Ayarları > Yerleşim bölümünden bu varsayılanları sıfırlayıp boşlukları tamamen kendiniz belirlemek daha kontrollü bir sonuç verir.
2. Grid’i flexbox gerektiren yerlerde kullanmak: Örneğin bir buton grubunu grid ile dizmeye çalışmak, gereksiz karmaşıklık yaratır; flexbox bu tür tek eksenli düzenler için daha basittir.
3. Duyarlılığı en sona bırakmayı unutmak: Masaüstünde mükemmel görünen bir konteyner, tablet ve mobilde taşma veya orantısız boşluk sorunları yaşayabilir; her önemli bölümü bitirdikten sonra üç cihaz görünümünü de kontrol etmek gerekir.

Konteyner Tasarımında Hangi Yapı Ne Zaman Kullanılmalı?

Pratikte konteyner kararları genellikle şu senaryolara göre şekilleniyor:

• Hero banner (giriş alanı): Tek bir dikey konteyner, içinde ortalı başlık + açıklama + yan yana iki düğmeyi barındıran ikinci bir yatay konteyner.
• Hizmetler/özellikler listesi: 3-4 eşit genişlikte kartın yan yana dizildiği, sarmalı dönüşü (wrap) açık bir flexbox konteyner — mobilde otomatik alt satıra geçer.
• Logo/referans şeridi: Çok sayıda eşit boyutlu öğenin düzenli aralıklarla dizilmesi gerektiğinde grid konteyner, flexbox’a göre daha az manuel ayarla daha tutarlı sonuç verir.
• İletişim alanı: Solda metin/ikon listesi, sağda harita veya form olacak şekilde iki sütunlu bir yatay konteyner; mobilde bu konteynerin yönü dikeye çevrilerek sütunlar alt alta sıralanır.

Bu dört senaryo, tek sayfalık bir sitenin neredeyse tüm bölümlerini kapsıyor — konteyner mantığını bir kez oturttuğunuzda, farklı sayfa tiplerine de kolayca uyarlayabilirsiniz.

Sık Sorulan Sorular

Elementor’da konteyner ile eski bölüm/sütun yapısı arasında ne fark var?

Konteyner, bölüm ve sütunu tek bir esnek kutuda birleştirir; iç içe konteynerler oluşturmayı ve flexbox/grid düzenini doğrudan kullanmayı mümkün kılar, bu yüzden Elementor artık yeni sayfalarda varsayılan olarak konteyner sistemini öneriyor.

Boşluk, dolgu ve kenar ayarları için piksel mi yoksa em mi kullanmalıyım?

İkisi de geçerlidir; piksel daha öngörülebilir sonuç verirken, em (yaklaşık 1em = 16px) yazı tipi boyutuna göre orantılı ölçeklenme istediğinizde daha esnek bir seçenektir.

Grid konteynerde sütun sayısını cihaza göre nasıl değiştiririm?

Grid ayarlarını düzenlerken üstteki masaüstü/tablet/mobil kesme noktası sekmelerine geçip her cihaz için ayrı sütun sayısı belirleyebilirsiniz — örneğin masaüstünde 4, tablette 2, mobilde 1 sütun.

Konteynerdeki taşma sorunu (mobilde yatay kaydırma çubuğu) nasıl çözülür?

Öncelikle sarmalı dönüş (wrap) ayarını aktif ederek sığmayan öğelerin alt satıra geçmesini sağlayın; bu yeterli olmazsa Ek Seçenekler’den taşmayı “gizli” olarak ayarlayarak taşan kısmı görünmez hale getirebilirsiniz.

---

Elementor Konteyner Ayarlarını Profesyonel Bir Projede Uygulamak İster misiniz?

Bu rehberdeki konteyner, flexbox ve grid mantığını gerçek bir projede sıfırdan uygulanırken görmek isterseniz Elementor ile sıfırdan tek sayfa site yapımı rehberimize göz atabilirsiniz. Elementor’un temellerini henüz öğrenmediyseniz önce Elementor nedir, nasıl kurulur rehberimizi okumanızı öneririz. Kendi projenizde bu düzenleri doğru kurmak için profesyonel destek isterseniz web tasarımı hizmetlerime göz atabilir ya da doğrudan WhatsApp’tan ulaşabilirsiniz.