Elementor ile Web Sitesi Ana Sayfası Nasıl Oluşturulur

Ana sayfa, bir web sitesinin en hayati öğesidir. Ziyaretçilerinizin web sitenizi ziyaret ettiklerinde gördükleri ilk şey budur. Web sitenizin ana sayfasındaki her şey, ziyaretçilerinizin işletmeniz hakkındaki algısını etkiler. Elementor ile CSS veya HTML koduyla uğraşmak zorunda kalmadan web sitenizin ana sayfasını oluşturabilirsiniz. Muhtemelen bildiğiniz gibi, Elementor, ön uçta bir web sayfası oluşturmanıza izin veren bir görsel düzenleyiciye sahiptir. Her şey sürükle ve bırak şeklindedir, tek bir kod satırı yazmaya gerek yoktur.

Elementor'da yeni misiniz? Endişelenme. Bu yazıda, dünyanın en popüler sayfa oluşturucu eklentisi ile bir web sitesi ana sayfasını nasıl oluşturacağınızı göstereceğiz. Aşağıdaki gibi bir web sitesi ana sayfası oluşturacağız.

Yukarıdaki gibi bir web sitesi ana sayfası oluşturmak için Elementor'un ücretsiz sürümünü kullanabilirsiniz. Bununla birlikte, Elementor'un pro sürümünde daha fazla özellik bulunduğundan, Elementor sürümünüzü pro'ya yükseltmek istiyorsanız kötü bir şey yoktur. Elementor Pro ile özel bir üstbilgi, özel altbilgi, özel 404 sayfası, özel tek gönderi şablonu, açılır pencere vb. oluşturabileceksiniz. Elementor Free ve Elementor Pro arasındaki farkları bulmak için burayı okuyun.

Yukarıdaki gibi bir ana sayfa oluşturmak için 4 bölüm gerekir.

• Bölüm 1: Şirket adını ve sloganı yerleştirmek için.
• Bölüm 2: Hizmet tanımını yerleştirmek için.
• Bölüm 3: Takım açıklamasını yerleştirmek için.
• Bölüm 4: Müşterilerin logo karuselini ve kapanış bölümünü yerleştirmek için ("Daha fazla ayrıntıya mı ihtiyacınız var?" cümlesi).

Başlayalım.

Öncelikle, WordPress kontrol panelinize giriş yapın ve yeni bir sayfa oluşturun ( Sayfalar -> Yeni Ekle ) ve Elementor ile Düzenle düğmesini tıklayarak bunu Elementor ile düzenleyin. Düğmeye tıkladıktan sonra Elementor düzenleyicisine yönlendirileceksiniz.

Ana sayfanızı daha sonra tanımlamanızı kolaylaştırmak için, "ana sayfa" "ön sayfa" veya benzeri bir sayfa başlığı vermenizi öneririz.

Elementor düzenleyicisini çalıştırmaya başlamadan önce, sol panelin alt tarafındaki dişli simgesine tıklayarak sayfa düzenini ayarlayın. Sayfa Düzeni seçeneğinde sayfa düzenini ayarlayın. Bu örnekte, sayfa düzenini Elementor Full Width olarak ayarladık. Bu seçenek, temanızın kenar çubuğunu (varsa) kaldırır ve yalnızca altbilgi ve üstbilgiyi korur.

Bölüm 1

• Yeni bir bölüm eklemek için artı düğmesine tıklayın. Tek sütunlu yapı seçeneğini seçin.

• Sol panele gidin. Düzen sekmesinin altındaki Düzen bölümünde, içerik genişliğini Tam Genişlik olarak ayarlayın. Ayrıca yüksekliği Ekrana Sığdır olarak ayarlayın

• Stil sekmesine gidin ve Arka Plan bölümünde arka planı ayarlayın. Üst bölümün arka planı olarak bir resim kullanacağız. Daha iyi bir sonuç için 1200px veya daha geniş boyutta büyük bir resim hazırlayabilirsiniz. Bir resim seçmek için resim seçiciye tıklayabilirsiniz.

• Yine Arka Plan bölümünde, görüntü boyutunu Kapak olarak ayarlayın.

• Şimdi Arka Plan Yerleşimi bölümüne gidin ve arka plan yerleşimini ayarlayın. Bu örnekte, degrade kaplamasını (turuncu ve siyah) kullanıyoruz. Opaklık seçeneğinde arka plan kaplama opaklığını ayarlayın.

• Arka planı fazlasıyla ayarladıktan sonra, tuval alanına Başlık widget'ını ekleyin.

• Varsayılan metni değiştirmek için sol panele gidin. Başlık alanındaki metni değiştirebilirsiniz. Hizalama seçeneğinde (en altta) hizalamayı da ayarlayın.

• Yazı tipi rengini, yazı tipi stilini ve yazı tipi boyutunu değiştirmek için Stil sekmesine gidebilirsiniz. Yazı tipi rengini değiştirmek için Metin Rengi seçeneğindeki renk seçiciye tıklayın ve yazı tipi stilini ve boyutunu değiştirmek için Tipografi seçeneğindeki kurşun kalem simgesine tıklayın.

• Şirket sloganı için başka bir Başlık widget'ı ekleyin. Yeni Başlık pencere öğesini özelleştirmek için yukarıdaki adımları tekrarlayabilirsiniz.

Bölüm 2

• Artı düğmesine tıklayarak yeni bir bölüm ekleyin. Tek sütunlu yapı seçeneğini seçin.
• İç Bölüm widget'ını ekleyin. Bu adımdan itibaren, Bölüm 2'de iki sütununuz olacak.

• Sol sütuna Görsel widget'ını ekleyin ve kullanmak istediğiniz görseli seçin (resmi hazırladığınızdan emin olun).

• Görüntü boyutunu ayarlamak için Stil sekmesine gidin. Görüntü bölümündeki Genişlik değerini ve Maks Genişlik değerini ayarlayarak boyutu ayarlayabilirsiniz.

• Sağ sütuna Başlık widget'ını ekleyin. Yukarıdaki Bölüm 1'de yaptığınız gibi sol paneldeki Stil sekmesine giderek başlığı özelleştirin.

• Sağ sütuna Metin Düzenleyici widget'ını ekleyin. Başlık widget'ının altına yerleştirin. Varsayılan metni kendi metninizle değiştirin. Metni özelleştirmek için Stil sekmesine de gidebilirsiniz.

• Metin Düzenleyici pencere aracıyla işiniz bittiğinde, Düğme pencere aracını sağ sütuna ekleyin. Metin Düzenleyici widget'ının altına yerleştirin.

• Düğmeyi özelleştirmek için sol panele gidin. Bağlantı alanında başka bir sayfaya bağlantı ekleyebilirsiniz. Düğme boyutunu değiştirmek için Boyut seçeneğindeki açılır menüden seçim yapabilirsiniz.

• Düğme rengini ve kenarlık yarıçapını değiştirmek için Stil sekmesine geçebilirsiniz. Metin Rengi seçeneğindeki renk seçiciyi ve Arka Plan seçeneğindeki düğme arka plan rengini tıklatarak düğme metni rengini ayarlayın. Sınır yarıçapını ayarlamak için Sınır Yarıçapı seçeneğine gidebilirsiniz.

• Bölüm 1 ve Bölüm 2 arasında fazladan boşluk bırakmak için İç Bölümün üzerine Ara Parçacığı widget'ını ekleyin.

• Sol panelden boşluk değerini ayarlayın.

• İç Bölümün altına başka bir Ara Parçacık widget'ı ekleyin.

3. Bölüm

• Artı düğmesine tıklayarak yeni bir bölüm ekleyin. Tek sütunlu yapı seçeneğini seçin.
• İç Bölüm widget'ını ekleyin. Bu adımdan itibaren, bölüm 3'ün içinde iki sütununuz olacak.

• Başlık widget'ını sol sütuna ekleyin. Varsayılan metni kendi metninizle değiştirin. Başlığı özelleştirmek için sol paneldeki Stil sekmesine gidin.

• Metin Düzenleyici pencere aracını sol sütuna ekleyin ve Başlık pencere aracının altına yerleştirin. Varsayılan metni değiştirin ve metni sol paneldeki Stil sekmesinden özelleştirin.

• İkinci bölümden Düğme pencere aracını kopyalayın ve 3. bölümdeki sol panele yapıştırın (Metin Düzenleyici pencere aracının altında). Bu, yeni düğmeyi sıfırdan oluşturmak yerine size zaman kazandırabilir.

• Az önce kopyaladığınız Düğme widget'ını etkinleştirin (işleyicisine tıklayarak) ve bağlantıyı değiştirin.

• Sağ sütuna Görsel widget'ını ekleyin ve kullanmak istediğiniz görseli seçin (resmi hazırladığınızdan emin olun).

• Görüntü boyutunu ayarlamak için sol paneldeki Stil sekmesine gidin.

• İşleyicisine tıklayarak İç Bölümün sol sütununu etkinleştirin ve sol paneldeki Gelişmiş sekmesine gidin. Hafifçe sağa kaydırmak için sol kenar boşluğunu yaklaşık 40 olarak değiştirin.

• İşleyicisine tıklayarak bölümü (bölüm 3) etkinleştirin ve Stil sekmesine gidin. Arka planı beğeninize göre değiştirin. Bu örnekte yumuşak mavi düz bir arka plan seçiyoruz.

• Ara Parçacığı pencere öğesini İç Bölüm pencere öğesinin üstüne ve altına ekleyin. Boşluk değerini yaklaşık 40 olarak değiştirin.

Bölüm 4

• Artı düğmesine tıklayarak yeni bir bölüm ekleyin. Tek sütunlu yapı seçeneğini seçin.
• Başlık widget'ını ekleyin. Varsayılan metni değiştirin ve hizalamayı sağa ayarlayın. Başlığı özelleştirmek için sol paneldeki Stil sekmesine gidin.

• Image Carousel'i ekleyin ve onu Başlık widget'ının altına yerleştirin.

• Sol panele gidin ve görüntüleri seçin. Bu durumda görseller müşterilerinizin şirketinin logolarıdır.

• Karuseli özelleştirmek için sol panele gidin. Slayt başına görüntü sayısını Gösterilecek Slaytlar seçeneğinde, Görüntü Boyutu seçeneğinde görüntü boyutunu ve Gezinme seçeneğinde gezinme stilini ayarlayabilirsiniz. Karuseli özelleştirmek için sol panelle oynayabilirsiniz.

• İç Bölüm ekleyin ve bunu Image Carousel widget'ının altına yerleştirin. Sütun oranını yaklaşık %70:30% olarak ayarlayın.

• Yukarıda eklediğiniz İç Bölümün sol sütununa Başlık widget'ını ekleyin. Varsayılan metni değiştirin ve başlığı özelleştirmek için Stil sekmesine gidin.

• İç Bölümün sol sütununa Metin Düzenleyici widget'ı ekleyin. Başlık widget'ının altına yerleştirin. Varsayılan metni değiştirin ve metni özelleştirmek için Stil sekmesine gidin.

• Bölüm 3'ten (veya bölüm 2) Düğme pencere aracını kopyalayın ve İç Bölüm pencere aracının sağ sütununa yapıştırın.

• İşleyicisine tıklayarak az önce kopyaladığınız Düğme widget'ını etkinleştirin ve sol panele gidin. İçerik sekmesinin altındaki Bağlantı alanındaki bağlantıyı değiştirin.

• Gelişmiş sekmesine geçin ve üst kenar boşluğunu yaklaşık 60'a ayarlayın.

• Spacer widget'ını ekleyin ve onu İç Bölüm widget'ının üzerine yerleştirin. Boşluk değerini yaklaşık 40 olarak ayarlayın.

Tamamlandı!

Artık sol panelin alt kısmındaki YAYINLA düğmesine tıklayarak sayfanızı yayınlayabilirsiniz. Sayfanızı yayınlamadan önce göz simgesine tıklayarak da önizleyebilirsiniz. Cihaz simgesini tıklayarak sayfanızı masaüstünde, tablette ve akıllı telefonda önizleyebilirsiniz.

WordPress'inizde ana sayfa nasıl kullanılır?

Sayfanızı yayınladıktan sonra yapmanız gereken sonraki adım, onu WordPress sitenizde kullanmaktır. Az önce oluşturduğunuz ana sayfayı WordPress sitenizin ana sayfası olarak ayarlamak için, Elementor editörünün sol üst köşesindeki üç çizgili simgeye tıklayarak WordPress panosuna dönün ve DASHBOARD'A ÇIK öğesini tıklayın.

WordPress panosunda Ayarlar -> Okuma seçeneğine gidin.

Ana sayfanız görüntüler seçeneğinde, Statik bir sayfa olarak ayarlayın (aşağıdan seçin) ve Ana Sayfa seçeneğindeki açılır menüden az önce oluşturduğunuz ana sayfayı seçin.