Tasarımın 4 temel taşı

Webflow'u ilk açtığında kafa karışıklığı genelde şuradan gelir: "hangi kutu neyi kapsıyor, hangi ayar nereyi etkiliyor?" Bu bölümde bu karışıklığı çözecek dört temel kavramı, sade benzetmelerle anlatıyorum. Bunları anladıktan sonra Webflow'da neredeyse her şey bu dördünün kombinasyonu.

1. Section: sayfanın yatay dilimleri

Bir sayfayı yukarıdan aşağı yatay şeritlere ayırdığını düşün: üstte bir "hero" (giriş) alanı, altında "hizmetler" alanı, altında "hakkımda", en altta "iletişim". İşte her bir şerit bir section. Section'lar sayfanın büyük yapı taşları, birbirinin altına dizilirler.

Bir siteyi tasarlarken önce hangi section'ların olacağına karar vermek, boş bir sayfayı doldurmaktan çok daha az kafa karıştırıcı. "Bu sayfada üç bölüm olacak" demek, "bu sayfa nasıl bir şey olacak" sorusundan daha somut.

2. Container: içeriğin ortalandığı çerçeve

Section geniş, tüm ekran genişliğinde bir şerit. Ama içindeki metni, görseli ekranın her iki ucuna kadar yaymak istemezsin, genelde ortada, belli bir genişlikte dursun istersin. İşte container tam bunu yapıyor: section'ın içine yerleşen, içeriği ortalayan ve maksimum genişliğini sınırlayan bir çerçeve.

Bunu bir resim çerçevesi gibi düşün: section duvar, container o duvara astığın çerçeve. Duvar (section) tüm genişliği kaplar, ama çerçeve (container) içindeki resmi belli bir alanda tutar.

3. Div: her şeyin küçük kutusu

Container'ın içinde asıl içeriğini (başlık, metin, görsel, buton) yerleştirdiğin en küçük yapı taşı div (kısaca "kutu" diyebiliriz). Bir div içine başka div'ler koyabilirsin; yani bir başlık ve altındaki metni tek bir div içinde grupla, o div'i de container'ın içine yerleştir.

Bunu iç içe kutular gibi düşün: en büyük kutu section, onun içinde container, onun içinde küçük div'ler, div'lerin içinde de metin/görsel gibi gerçek içerik. Bu iç içe yapı, sayfanı düzenli tutmanı sağlıyor.

4. Class sistemi: bir kez tanımla, her yerde kullan

Bu dördü içinde en kritik olanı bu. Webflow'da bir elemana stil (renk, boyut, yazı tipi, boşluk) verdiğinde, bunu bir "class" adı altında kaydediyorsun. Class, bir stil paketinin ismi. Aynı class'ı başka bir elemana da uyguladığında, o elemanın da aynı stili alması.

Bunun gücü şurada: diyelim ki sitende on tane "buton" var ve hepsinin aynı görünmesini istiyorsun. Her birini tek tek ayarlamak yerine, bir tane "buton" class'ı tanımlıyorsun (renk, yazı boyutu, köşe yuvarlaklığı gibi). Sonraki her butona bu class'ı uyguluyorsun. Bir gün buton rengini değiştirmek istersen, tek bir yerde (o class'ın tanımında) değiştiriyorsun, hepsi otomatik güncelleniyor.

Bunu bir kıyafet etiketi gibi düşün: "resmi gömlek" diye bir etiket tanımlarsan (belli bir kumaş, belli bir kesim), o etiketi taşıyan her gömlek aynı özelliklere sahip olur. Etiketin tanımını değiştirirsen, o etiketi taşıyan her gömlek değişir; her birini tek tek dikmene gerek kalmaz.

Kaynak: help.webflow.com, erişim Temmuz 2026.

Yazı ve renk stilleri

Class mantığı yazı tipleri ve renkler için de aynı şekilde işliyor. Başlıklarının hepsi aynı yazı tipini, boyutunu taşısın istiyorsan, bunu bir başlık class'ı ya da Webflow'un "stil kılavuzu" (style guide) yaklaşımıyla merkezi bir yerde tanımlarsın. Renk paletini de benzer şekilde, tek tek her elemanda renk kodu yazmak yerine, bir kere tanımlayıp tekrar kullanırsın. Böylece sitenin her yerinde tutarlı bir görünüm elde etmiş olursun, tek tek her elemanı hatırlayıp güncellemek zorunda kalmadan.

Responsive kırılımlar: farklı ekranlar için farklı görünüm

Sitene masaüstünden bakan biriyle telefondan bakan biri farklı boyutta bir ekran görüyor. Webflow, bunun için "breakpoint" (kırılım noktası) dediğimiz farklı ekran boyutlarına göre ayrı ayrı görünüm ayarlamanı sağlıyor: masaüstü, tablet, telefon (yatay), telefon (dikey).

Mantık şöyle işliyor: önce en geniş ekran (masaüstü) için tasarımını yaparsın. Sonra daha dar bir kırılıma geçip, sadece o kırılımda farklı olması gereken şeyleri (örneğin yan yana duran iki kutunun telefonda alt alta durması) değiştirirsin. Masaüstünde yaptığın temel stil, sen özellikle değiştirmediğin sürece diğer kırılımlara da taşınıyor; yani her kırılımda sıfırdan başlamıyorsun, sadece farkları ayarlıyorsun.

Bu dördü bir araya koyunca

Özetle: section'lar sayfanı yatay bölümlere ayırır, container o bölümlerin içeriğini ortalar, div'ler asıl içeriğini gruplar, class sistemi bu içeriklere tutarlı bir stil verir ve responsive kırılımlar bu görünümü her ekran boyutuna uyarlar. Bu dördünü anladıktan sonra, Webflow'daki her yeni sayfa aslında bu kalıbın bir varyasyonu.

Bölüm kontrol listesi

• Section, container ve div arasındaki hiyerarşiyi (büyükten küçüğe iç içe kutular) anladım
• Class sisteminin "bir kez tanımla, her yerde kullan" mantığını kavradım
• Responsive kırılımların, masaüstü tasarımının üzerine sadece farkları eklediğini anladım

Sonraki bölümde bu temel taşların üzerine içerik ekliyoruz: blog, portfolyo ya da ürün listesi gibi tekrar eden içerikleri CMS ile nasıl yöneteceğini gösteriyorum.