Arayüzler, sürümler ve fiyatlar sık değişir. Adımlar tarihindeki duruma göredir; güncel bilgi için aracın resmi sayfasını da kontrol edin.
Elementor’un ücretsiz sürümüyle sıfırdan tek sayfa bir web sitesi kurmanın yolu, önce Hello Elementor teması ve global renk/font ayarlarıyla bir tasarım sistemi belirlemek, ardından hero banner, hakkımızda, hizmetler, referanslar ve iletişim bölümlerini aynı boşluk ve renk kurallarıyla tutarlı şekilde konteynerlerle inşa edip son olarak sayfa içi bağlantılarla (anchor link) çalışan bir header/footer eklemektir. Bu rehberde boş bir WordPress kurulumundan başlayarak, dijital ajans temalı örnek bir tek sayfa sitenin tamamının nasıl kurulduğunu video eşliğinde adım adım inceliyorum.
Kuruluma Başlamadan Önce Hangi Temel Ayarlar Yapılmalı?
Tasarıma geçmeden önce birkaç temel adım sitenin geri kalanını kolaylaştırıyor:
- Hosting’in varsayılan gelen gereksiz eklentilerini (kullanılmayacaksa) temizleyin.
- Hello Elementor temasını kurup etkinleştirin, hafif ve Elementor ile tam uyumlu bir başlangıç temasıdır.
- Elementor eklentisini kurun; tema “Elementor eklentisi de kurulmalı” uyarısı verirse onaylayın.
- Tema ayarlarından “Sayfa Başlığını Gizle” (Hide Page Title) seçeneğini aktif edin, aksi halde her sayfanın üstünde, Elementor’la tasarladığınız hero alanının üzerine binen otomatik bir başlık çıkar.
- Ayarlar > Genel bölümünden site başlığı ve sloganı, Ayarlar > Kalıcı Bağlantılar’dan “yazı adı” formatını, Ayarlar > Okuma’dan da ana sayfa olarak göstereceğiniz sabit sayfayı belirleyin.
Global Tasarım Sistemi Neden En Baştan Kurulmalı?
Site Ayarları > Global Renkler ve Global Fontlar bölümünden, sitenin tamamında kullanacağınız 2 ana rengi (örn. ana marka rengi + ikincil vurgu rengi) ve 2 yazı tipini (başlıklar için biri, gövde metni için diğeri) baştan tanımlamak, ilerleyen her adımda zaman kazandırıyor. Bir rengi veya font stilini bir kere “global” olarak kaydettiğinizde, sonraki her widget’ta o rengi/fontu listeden tek tıkla seçebiliyorsunuz, tekrar tekrar aynı hex kodunu veya font adını girmenize gerek kalmıyor. Aynı mantık boşluk sistemi için de geçerli: konteyner dolgularını, boşluklarını ve kenar boşluklarını başta sıfırlayıp yalnızca 4 veya 8’in katları (8, 16, 24, 32, 48 piksel gibi) kullanmak, sayfanın genelinde fark edilir bir görsel tutarlılık sağlıyor.
Hero Banner (Giriş Alanı) Nasıl Kurulur?
İlk ekranda görünecek hero banner için tipik adımlar şöyle:
- Yüksekliği ekranın %90’ı (veya %100’ü) kaplayan, içeriği dikey ve yatay olarak ortalanmış bir konteyner oluşturun.
- Arka plana bir görsel ekleyin ve üzerine koyu bir kaplama (overlay) vererek beyaz metnin okunabilir olmasını sağlayın.
- Ana başlığı H1 etiketiyle ekleyin, bu, sayfanın en önemli SEO başlığıdır ve sitede yalnızca bir kez kullanılmalıdır.
- Altına kısa bir açıklama metni ve yan yana iki düğme (birincil + ikincil eylem) ekleyin. İki düğmeyi yan yana dizmek için düğmeleri ayrı bir yatay konteynerin içine almanız gerekir.
- Düğmelerden birini dolu arka planlı (birincil eylem, örn. “Hizmetlerimiz”), diğerini yalnızca kenarlıklı (ikincil eylem, örn. “İletişim”) yaparak görsel bir önem hiyerarşisi kurun, ikisi aynı ağırlıkta görünürse kullanıcı hangisine tıklaması gerektiğini anlayamaz.
Görselleri Siteye Yüklemeden Önce Neden Sıkıştırmalısınız?
Videoda dikkat çeken önemli bir detay: indirilen bir PNG arka plan görseli 1,8 MB büyüklüğündeyken, WebP formatına dönüştürüldükten sonra yaklaşık 18 KB’a (yaklaşık %99 küçülme) düşüyor. Sıkıştırılmamış büyük görseller sayfa yükleme hızını doğrudan etkiler; hem kullanıcı deneyimi hem de Google’ın Core Web Vitals sıralama sinyalleri için her görseli yüklemeden önce WebP’ye çevirmek, ücretsiz bir dönüştürme aracıyla bile olsa gözden kaçırılmaması gereken bir adımdır.
Hakkımızda, Hizmetler ve Referanslar Bölümleri Nasıl Kurgulanır?
Bu üç bölüm de aynı iki temel prensiple inşa ediliyor: tutarlı boşluk (her bölümde aynı üst/alt dolgu, örn. 5em/1em) ve tutarlı tipografi hiyerarşisi (H1 sadece hero’da, diğer bölüm başlıkları H2, alt başlıklar H3).
- Hakkımızda: Solda başlık + açıklama metni, sağda kurumsal bir görsel olacak şekilde iki sütunlu bir konteyner. Tek sayfalık bir sitede ayrı bir “devamını oku” butonuna gerek yoktur.
- Hizmetler: Üstte başlık + kısa açıklama, altında 3 hizmetin görsel + başlık + açıklama üçlüsüyle yan yana dizildiği bir grid/flexbox yapı. Her hizmet kartına, üzerine gelindiğinde hafif yukarı kayma ve renk değişimi veren bir hover efekti eklemek (Elementor’un ücretsiz sürümündeki “Dönüştür” ayarlarıyla mümkün) sayfaya profesyonel bir his katıyor.
- Referanslar: Müşteri yorumlarının yan yana 3 kart halinde dizildiği bir bölüm, isim, unvan ve kısa bir yorum metninden oluşur; sosyal kanıt (social proof) sağlayarak ziyaretçinin güvenini artırır.
Call to Action (CTA) Alanı Neden Ayrı Bir Bölüm Olmalı?
Hizmetler ve referanslardan sonra, koyu arka planlı ve dikkat çekici tek bir CTA bölümü eklemek, ziyaretçiyi harekete geçirme şansını artırıyor. Bu bölümde kısa, net bir başlık (“Hemen İletişime Geçelim” gibi), tek cümlelik bir açıklama ve doğrudan arama başlatan (tel: bağlantılı) veya WhatsApp’a yönlendiren bir düğme yeterli. Sayfanın ortasında, hizmetler bölümünden hemen sonra konumlandırmak, ziyaretçi henüz ilgisi yüksekken harekete geçme fırsatı sunuyor, sayfanın en altına kadar beklemek dönüşüm oranını düşürebiliyor.
İletişim Bölümü ve Google Haritası Nasıl Eklenir?
İletişim bölümü solda adres/telefon/e-posta ikon listesi, sağda bir Google Haritası olacak şekilde iki sütunlu kurulabilir. Harita için ayrı bir eklentiye gerek yok: Google Haritalar’da konumunuzu seçip “Haritayı Yerleştir” seçeneğinden aldığınız HTML kodunu, Elementor’un yerleşik HTML widget’ına yapıştırmanız yeterli. Yerleştirilen kodun genişlik/yükseklik değerlerini (örn. yükseklik 250px) sayfanızın tasarımına göre elle düzenleyebilirsiniz.
Tek Sayfalık Sitede Header/Footer ve Menü Nasıl Çalışır?
Ayrı sayfalarınız olmadığı için header menüsündeki bağlantılar başka bir sayfaya değil, aynı sayfanın farklı bölümlerine gitmeli. Bunun için:
- Her bölümün ana konteynerine Gelişmiş sekmesinden benzersiz bir CSS ID verin (örneğin “hizmetlerimiz”, Türkçe karakter kullanmadan).
- Header’daki menü öğesinin bağlantısına, o CSS ID’nin başına # işareti ekleyerek yazın (örneğin
#hizmetlerimiz). - Header konteynerine HTML etiketi olarak “header” atayın, bu, header/footer’ı ayrı bir eklentiyle değil sayfa içinde manuel oluşturduğunuz durumlarda Google’a sayfa yapısını doğru bildirmek için gereklidir.
- Header’ın diğer içeriklerin altında kalmaması için Z-index değerini yükseltin (örn. 99).
Footer’da ise genellikle logo, kısa bir slogan, sosyal medya ikonları ve aynı anchor menüsünün küçük bir tekrarı yer alır; üst kenarlığa ince bir çizgi (border-top) vermek footer’ı ana içerikten görsel olarak ayırıyor.
Duyarlı (Responsive) Tasarım Sona Bırakılınca Ne Değişiyor?
Masaüstü tasarımı bittikten sonra tablet ve mobil görünümlere ayrı ayrı geçilmesi öneriliyor, çünkü her cihazda farklı ince ayarlar gerekiyor:
- Tablet: H1 başlık boyutu genelde bir kademe küçültülür (örn. 64’ten 56 veya 48’e); yan yana dizilen hizmet kartları çoğu zaman aynı kalabilir, sadece dar alanlarda dikey konteynerlere çevrilir.
- Mobil: H1 daha da küçültülür (örn. 40’a), gövde metni 16’dan 14 piksele iner, hizmetler grid’i tek sütuna düşer ve düğmeler genelde tam genişlik alacak şekilde ayarlanır.
Global font boyutlarını değiştirmek bazen tüm cihazlarda otomatik yansımıyor olabilir, bu durumda ilgili widget’ı elle seçip o cihaz sekmesinde boyutu tekrar girmeniz gerekebilir.
| Bölüm | Masaüstü Yerleşimi | Mobil Değişikliği |
|---|---|---|
| Hero Banner | Ortalı, tam ekran yükseklik | Başlık boyutu küçülür, düğmeler alt alta sığabilir |
| Hakkımızda | İki sütun (metin + görsel) | Tek sütun, görsel altta veya üstte |
| Hizmetler | 3 sütun yan yana | Tek sütun, alt alta sıralı |
| İletişim | İki sütun (bilgi + harita) | Tek sütun, harita altta |
Not: Elementor Pro mu, ücretsiz sürüm mü diye düşünüyorsanız Elementor rehberime bakabilirsiniz. Rehberdeki Elementor bağlantıları ortaklık bağlantısıdır; satın alırsanız komisyon alabilirim, sizin için fiyat değişmez.
Sık Sorulan Sorular
Elementor’un ücretsiz sürümüyle tam bir site kurmak gerçekten mümkün mü?
Evet, bu rehberde gösterildiği gibi hero banner, hakkımızda, hizmetler, referanslar, CTA ve iletişim bölümlerinin tamamı, hover efektleri dahil, Elementor’un ücretsiz sürümüyle kurulabiliyor; Elementor Pro yalnızca daha gelişmiş widget’lar (form, popup gibi) gerektiğinde devreye giriyor.
Tek sayfa site mi, çok sayfalı site mi daha uygun?
Hizmet sayınız azsa ve tek bir hedefiniz varsa (arama, form doldurma ya da WhatsApp mesajı) tek sayfa yeterli ve hızlı bir başlangıçtır. Birden fazla hizmetiniz varsa ve her biri için Google’da ayrı aramalarda görünmek istiyorsanız, her hizmete ayrı sayfa veren çok sayfalı bir site daha uygundur.
Header menüsündeki bağlantılar neden aynı sayfa içinde gezinmeli?
Tek sayfalık bir sitede ayrı alt sayfalar olmadığı için, menü CSS ID tabanlı anchor bağlantılarla (#bölüm-adı) aynı sayfanın ilgili bölümüne kaydırma yapar; bu, ekstra bir eklenti gerektirmeyen basit ve hızlı bir gezinme yöntemidir.
Konteyner boşluklarını (padding/margin/gap) sıfırlamak neden önemli?
Elementor’un varsayılan boşlukları fark edilmeden kalıp tasarımın tutarsız görünmesine yol açabilir; boşlukları en baştan sıfırlayıp yalnızca kendi belirlediğiniz bir ölçekle (örn. 8’in katları) yeniden vermek, sayfa genelinde görsel bir ritim sağlar, bu konudaki tüm ayarları Elementor konteyner, flexbox ve grid ayarları rehberimde daha detaylı bulabilirsiniz.
Bu şekilde kurulan bir site gerçekten profesyonel görünür mü?
Videoda da vurguladığım gibi kullanılan görseller ve renkler rastgele/örnek amaçlıdır; gerçek bir markada özenle seçilmiş görseller, markaya uygun renk paleti ve profesyonel metinlerle aynı yapı çok daha güçlü bir sonuç verir, yapının kendisi (boşluk tutarlılığı, hiyerarşi, hover efektleri) zaten profesyonel standartlara uygundur.