15%

Tüm Hosting Hizmetlerinde %15 indirim

Becerilerini test et ve herhangi bir hosting planında İndirim kazan

Kodu kullanın:

Skills
Başlayın
01.11.2024
3 +1

WordPress ve Divi’de Sayfalarla Nasıl Çalışılır: Eksiksiz Adım Adım Rehber

WordPress, internetin %43’ünden fazlasını güçlendirmektedir — ve bunun iyi nedenleri vardır. Sezgisel arayüzü, geniş eklenti ekosistemi ve esnek içerik yönetimi yetenekleri, onu solo blogculardan kurumsal düzey işletmelere kadar herkes için tercih edilen CMS haline getirmektedir. WordPress’i Elegant Themes tarafından sunulan Divi teması ile birleştirdiğinizde, tek bir kod satırı yazmadan etkileyici, profesyonel sayfalar tasarlamanıza olanak tanıyan sürükle-bırak görsel bir oluşturucu kilidini açarsınız.

Bu kapsamlı kılavuzda, Divi Builder kullanarak WordPress’te sayfaları tam olarak nasıl oluşturacağınızı, özelleştireceğinizi, düzenleyeceğinizi ve yayınlayacağınızı öğreneceksiniz. İlk web sitenizi oluşturuyor olsanız da mevcut bir siteyi geliştiriyor olsanız da, bu öğretici bilmeniz gereken her şeyi kapsamaktadır.

WordPress’te Sayfalar Nedir? (Ve Yazılardan Nasıl Farklıdırlar)

Teknik adımlara dalmadan önce, bir WordPress sayfasının gerçekte ne olduğunu — ve bir blog yazısından nasıl farklı olduğunu anlamak önemlidir.

ÖzellikSayfalarYazılar
İçerik türüStatik, kalıcıZamana bağlı, dinamik
OrganizasyonHiyerarşik (üst/alt)Kronolojik (tarihe göre)
Tipik kullanım durumlarıHakkında, İletişim, Ana Sayfa, HizmetlerBlog makaleleri, haber güncellemeleri
RSS beslemesinde görünürHayırEvet
Kategorileri/etiketleri desteklerHayırEvet

Sayfalar web sitenizin yapısal omurgasıdır. Sık sık değişmeyen ve kategorize edilmesi veya etiketlenmesi gerekmeyen içeriği tutarlar. Hakkımızda, İletişim, Hizmetler veya Ana Sayfanızı düşünün — bunların tümü WordPress sayfalarının klasik örnekleridir.

Bu ayrımı anlamak, içeriğinizi nasıl düzenleyeceğiniz ve sunacağınız hakkında daha akıllı kararlar almanıza yardımcı olur.

Ön Koşullar: Başlamadan Önce Neye İhtiyacınız Var

Bu kılavuzu takip etmek için aşağıdakilerin yerinde olduğundan emin olun:

  • Güvenilir bir barındırma ortamında canlı bir WordPress kurulumu
  • Divi teması yüklü ve etkinleştirilmiş (Elegant Themes’ten mevcuttur)
  • WordPress panonuza yönetici erişimi
  • Web sitenizin yapısı ve hedefleri hakkında temel bir anlayış

Barındırma ortamınızı hala ayarlıyorsanız, AlexHost’tan VPS Barındırması düşünün — tam kök erişimi, özel kaynakları ve WordPress’i optimal hızda çalıştırma esnekliği sunan yüksek performanslı, ölçeklenebilir bir çözüm. Daha küçük projeler veya kişisel siteler için, Paylaşılan Web Barındırması WordPress ile tamamen uyumlu olan uygun fiyatlı ve başlangıç dostu bir alternatiftir.

Adım 1: WordPress Panonuza Giriş Yapın

Tercih ettiğiniz web tarayıcısını açarak ve WordPress yönetici paneline giderek başlayın. Varsayılan URL şudur:

http://yourdomain.com/wp-admin

Kullanıcı adınızı ve şifrenizi girin, ardından Giriş Yap‘ı tıklayın. WordPress Panosuna — tüm web siteniz için merkezi kontrol paneline — ineceksiniz.

> Pro İpucu: Birden fazla WordPress sitesini yönetiyorsanız veya daha akıcı bir yönetici deneyimine ihtiyacınız varsa, merkezi sunucu ve site yönetimi için cPanel’li VPS kullanmayı düşünün.

Adım 2: Yeni Bir WordPress Sayfası Oluşturun

Pano içinde olduğunuzda, yeni bir sayfa oluşturmak için şu adımları izleyin:

  1. Sol taraftaki navigasyon menüsünde, Sayfalar‘ı bulun ve tıklayın
  2. Sayfalar listesinin üst kısmında Yeni Ekle‘yi tıklayın (veya üst yönetici çubuğunda + Yeni > Sayfa kısayolunu kullanın)
  3. WordPress blok editörüne (Gutenberg) götürüleceksiniz

Başlık ve Temel İçerik Ekleme

  • Üst kısımdaki “Başlık ekle” alanına tıklayın ve sayfa adınızı yazın (örn. *Hakkımızda*, *İletişim*, *Hizmetler*)
  • Aşağıdaki içerik alanında, Gutenberg blok editörünü kullanarak metin blokları, resimler, başlıklar, düğmeler ve diğer öğeler ekleyebilirsiniz
  • Editörde herhangi bir blok türünü hızlı bir şekilde aramak ve eklemek için “/” kısayolunu kullanın

Bu aşamada, standart WordPress editörü ile çalışıyorsunuz. Ancak, gelişmiş görsel özelleştirme istiyorsanız — ve Divi kullanıyorsanız — sonraki adımda Divi Builder’ı etkinleştirmek isteyeceksiniz.

Adım 3: Divi Builder’ı Etkinleştirin ve Kullanın

Divi Builder, standart WordPress editörünü güçlü, görsel sürükle-bırak tasarım ortamına dönüştürür. İşte nasıl etkinleştireceğiniz ve kullanacağınız:

Divi Builder’ı Etkinleştirme

Sayfanızı editörde açtıktan sonra, içerik alanının üst kısmında belirgin bir düğme göreceksiniz:

“Divi Builder’ı Etkinleştir” — tıklayın.

WordPress sizi üç başlangıç seçeneği ile uyaracaktır:

SeçenekEn İyi Kullanım
Sıfırdan OluşturTam yaratıcı kontrol ile özel düzenler
Önceden Yapılmış Düzen SeçDivi’nin 800+ şablon kütüphanesini kullanarak hızlı başlangıçlar
Mevcut Sayfayı KlonlaZaten oluşturduğunuz bir sayfanın tasarımını çoğaltma

Projenize en uygun seçeneği seçin ve İnşa Etmeye Başla‘yı tıklayın.

Divi Builder Yapısını Anlama

İçerik eklemeden önce, Divi’nin düzenini nasıl organize ettiğini anlamak yardımcı olur:

Section
  └── Row
        └── Column
              └── Module
  • Bölümler en büyük konteynerlerdir — sayfanın tam genişliğine yayılırlar
  • Satırlar bölümlerin içinde yer alır ve sütun yapısını tanımlar (1, 2, 3 sütun vb.)
  • Sütunlar bir satır içindeki bireysel dikey bölünmelerdir
  • Modüller gerçek içerik öğeleridir (metin, resimler, düğmeler, formlar vb.)

Adım 3a: Bölümler ve Satırlar Ekleme

  1. Tuval altındaki mavi “+” simgesini tıklayarak yeni bir Bölüm ekleyin
  2. Bir bölüm türü seçin: Normal, Tam Genişlik veya Özel
  3. Bölüm içinde, “+” simgesini tıklayarak bir Satır ekleyin
  4. Tercih ettiğiniz sütun düzenini seçin (örn. iki sütunlu tasarım için 1/2 + 1/2)

Adım 3b: Modüller Ekleme

Modüller, her Divi sayfasının içerik yapı taşlarıdır. Bir tane eklemek için:

  1. Bir sütun içindeki gri “+” simgesini tıklayın
  2. Bir modül kütüphanesi görünecek — ihtiyacınız olan modülü arayın veya göz atın
  3. Düzeninize eklemek için modülü tıklayın

Yaygın olarak kullanılan Divi modülleri şunları içerir:

  • Metin Modülü — paragraflar, başlıklar ve biçimlendirilmiş kopya için
  • Resim Modülü — fotoğraflar, grafikler ve çizimler için
  • Düğme Modülü — CTA’lar ve navigasyon bağlantıları için
  • Kaydırıcı Modülü — hero resim döngüleri için
  • İletişim Formu Modülü — müşteri adayı yakalama ve sorgulamalar için
  • Blurb Modülü — simge + metin özellik kutuları için
  • Video Modülü — gömülü video içeriği için
  • Testimonial Modülü — sosyal kanıt ve incelemeler için
  • Kod Modülü — özel HTML, CSS veya JavaScript parçacıkları için

Adım 3c: Modülleri Özelleştirme

Herhangi bir modülün ayarlar panelini açmak için kalem (düzenle) simgesini tıklayın. Ayarlar üç sekmeye ayrılmıştır:

#### 1. İçerik Sekmesi

Modülün gerçek içeriğini yapılandırın — metin, resimler, bağlantılar, düğme etiketleri, form alanları vb.

#### 2. Tasarım Sekmesi

Modülün görsel görünümünü kontrol edin:

  • Tipografi — yazı tipi ailesi, boyutu, ağırlığı, satır yüksekliği, harf aralığı
  • Renkler — arka plan, metin, kenarlık, simge renkleri
  • Boşluk — doldurma ve kenar boşluğu kontrolleri (duyarlı kesme noktaları ile)
  • Kenarlıklar ve Gölgeler — yuvarlatılmış köşeler, kutu gölgeleri, kenarlık stilleri
  • Boyutlandırma — genişlik, yükseklik, maksimum genişlik kısıtlamaları

#### 3. Gelişmiş Sekme

Geliştirici düzeyinde ayarlara erişin:

  • CSS Sınıfları ve Kimlikler — özel stil kancaları için
  • Özel CSS — modüle özgü CSS’yi doğrudan yazın
  • Görünürlük — modülü masaüstü, tablet veya mobil cihazda göster/gizle
  • Animasyonlar — giriş animasyon efektleri ve zamanlaması

> Tasarım İpucu: Divi’nin duyarlı kontrolleri, masaüstü, tablet ve mobil görünümleri için farklı değerler ayarlamanıza olanak tanır. Yayınlamadan önce sayfanızı her üç kesme noktasında da önizleyin.

Adım 4: Sayfalarınızı Hiyerarşilerle Düzenleyin

Web siteniz büyüdükçe, sayfaları düzenli tutmak hem kullanıcı deneyimi hem de SEO için kritik hale gelir. WordPress, ilgili sayfaları ortak bir üst sayfa altında iç içe geçirmenize olanak tanıyan üst-alt sayfa hiyerarşilerini destekler.

Üst-Alt Sayfa İlişkisi Oluşturma

  1. Bir sayfayı düzenlerken, blok editöründeki sağ taraftaki kenar çubuğuna bakın
  2. Sayfa ayarları panelini genişletmek için Sayfa‘yı tıklayın
  3. Sayfa Özellikleri bölümünü bulun
  4. Üst Sayfa altında, açılır menüyü tıklayın ve üst olarak atamak istediğiniz sayfayı seçin

Örnek hiyerarşi:

Services (parent)
  ├── Web Design (child)
  ├── SEO Consulting (child)
  └── Content Marketing (child)

Bu yapı daha temiz URL’ler oluşturur (örn. yoursite.com/services/web-design/) ve arama motorlarının sitenizin içerik mimarisini daha iyi anlamasına yardımcı olur.

Adım 5: Sayfaları Navigasyon Menünüze Ekleyin

Bir sayfa oluşturmak, onu otomatik olarak web sitenizin navigasyonuna eklemez. Bunu manuel olarak bir menüye eklemeniz gerekir.

  1. WordPress panosunda, Görünüm > Menüler‘e gidin
  2. Mevcut bir menüyü seçin veya Yeni Menü Oluştur‘u tıklayın
  3. Sol taraftaki Sayfalar panelinde, eklemek istediğiniz sayfaların yanındaki kutuyu işaretleyin
  4. Menüye Ekle‘yi tıklayın
  5. Menü öğelerini yeniden sıralamak veya açılır alt menüler oluşturmak için sürükle ve bırak
  6. Bittiğinde Menüyü Kaydet‘i tıklayın

> En İyi Uygulama: Birincil navigasyon menünüzü en önemli sayfalarınıza odaklanmış tutun. Ziyaretçileri bunaltmamak için maksimum 5–7 üst düzey öğeyi hedefleyin.

Adım 6: SEO ve Performans için Sayfa Ayarlarını Yapılandırın

Yayınlamadan önce, hem arama motoru görünürlüğünü hem de kullanıcı deneyimini etkileyen temel sayfa ayarlarını yapılandırmak için bir dakika ayırın.

Kalıcı Bağlantı (URL Slug)

  • Blok editörü kenar çubuğunda, Kalıcı Bağlantı bölümünü bulun
  • URL slug’ını kısa, açıklayıcı ve anahtar kelime açısından zengin olacak şekilde düzenleyin
  • Numaralarla otomatik oluşturulan slug’lardan kaçının (örn. /?p=123)
  • İyi örnek: yoursite.com/about-us/
  • Kötü örnek: yoursite.com/?page_id=47

Öne Çıkan Resim

  • Sosyal paylaşım görünümünü iyileştirmek ve görsel tutarlılığı sağlamak için ilgili bir öne çıkan resim atayın

Sayfa Şablonu

  • Bazı temalar (Divi dahil) birden fazla sayfa şablonu sunar (örn. tam genişlik, kenar çubuğu yok)
  • Sayfa Özellikleri > Şablon altında uygun şablonu seçin

SEO Meta Verileri

  • Yoast SEO veya Rank Math gibi bir SEO eklentisi kullanıyorsanız, şunları doldurun:
  • Meta başlığı — birincil anahtar kelimenizi ekleyin
  • Meta açıklaması — ilgi çekici 150–160 karakterlik bir özet yazın
  • Odak anahtar kelimesi — hedef arama teriminizi ayarlayın

Adım 7: Sayfanızı Kaydedin, Önizleyin ve Yayınlayın

Sayfa tasarımınız ve ayarlarınızdan memnun olduğunuzda, canlı yayına çıkma zamanı gelmiştir.

Divi Builder’da Kaydetme Seçenekleri

Divi Builder arayüzünün sağ üst kısmında şunları bulacaksınız:

  • Taslağı Kaydet — çalışmanızı kamuya açık hale getirmeden kaydeder
  • Önizle — sayfanızın canlı bir önizlemesini yeni bir sekmede açar
  • Yayınla/Güncelle — sayfayı web sitenizde canlı hale getirir

Blok Editöründen Yayınlama

Divi Builder’dan çıkıp standart blok editörüne dönüşürseniz:

  1. Yayınlamadan kaydetmek için
15%

Tüm Hosting Hizmetlerinde %15 indirim

Becerilerini test et ve herhangi bir hosting planında İndirim kazan

Kodu kullanın:

Skills
Başlayın