WordPress'te Tek Sayfa Gezinme ile Tek Sayfa Web Sitesi Oluşturun (Bonuslu)

İşletmeniz için bir web sitesi kurmak istiyor ancak büyük bir web sitesi oluşturmak için zamanınız mı yok? Veya uzun süreli web sitesi bakımı yapmaya hazır değil misiniz?

O zaman Tek Sayfa Gezinme ile Tek Sayfa Web Sitesine gitmelisiniz. Tek sayfa web sitesi, tüm bilgileri çekici bir şekilde verir ve web sitenize çarpıcı bir görünüm verir, böylece kullanıcılarınız daha fazla etkileşim kurabilir.

Bu blogda, yalnızca WordPress'te tek sayfa gezinme ile tek sayfalı web sitesi oluşturmayı değil, aynı zamanda bonus olarak bir açılır pencerede iletişim formunu nasıl ekleyeceğinizi öğreneceksiniz.

Çoğu kişi, sahibiyle iletişim kurmanın uygun bir yolunu bulamazsa web sitesini terk eder, bu nedenle bu bonus ipucu web sitenize gerçekten olağanüstü değer katacaktır.

Daha fazla zaman kaybetmeyelim ve Elementor tek sayfa gezinme ile çarpıcı görünümlü bir web sitesi oluşturma sürecine başlayalım. Aşağıdaki butondan sitenin son görünümünü kontrol edebilirsiniz:

Tek Sayfada Gezinme Nedir?

Adından da anlaşılacağı gibi tek sayfa gezinme, tek sayfalık bir web sitesinin farklı bölümlerine gitmek için özel olarak tasarlanmış bir gezinme menüsüdür. Pürüzsüz kaydırma efektine sahip tek sayfada gezinme, farklı bölümlere gitmeyi kolay ve kullanıcı dostu bir deneyim haline getirir.

“Sadelik, nihai gelişmişliktir.” - Leonardo da Vinci

Ve bu basitlik, Tek sayfa web sitelerine diğerlerine göre ihtiyaç duydukları üstünlüğü sağlar. Tek sayfalık bir web sitesi, Düğün planlamacıları, Fotoğrafçılık, Küçük Salon, Restoran vb. gibi küçük işletmeler için harikadır.

Ancak, çok fazla ürün satan veya birden fazla hizmet sağlayan ve daha büyük bir kitleye hitap etmesi gereken büyük bir e-ticaret işiniz varsa, Tek sayfa web sitesi sizin için değildir.

Tek Sayfa Gezinme ile Tek sayfa web sitesinin faydaları nelerdir?

İşletmeniz küçük olduğu için işletmeniz için tek sayfalık bir web sitesi almayı düşünmemelisiniz. Tek sayfalık bir web sitesine, özellikle de tek sayfalık bir WordPress web sitesine sahip olmanın birçok başka avantajı vardır. Bazı profesyonellere bir göz atalım:

• İlk olarak, mobil uyumludur. Bu, web sitesi SEO'su (Arama Motoru Optimizasyonu) söz konusu olduğunda dikkate alınması gereken çok önemli bir şeydir. 2021 itibariyle ABD vatandaşlarının %70'i internette arama yapmak için bir mobil cihaz kullanıyor. Bunun gibi veriler, Google'ın mobil uyumlu bir web sitesine öncelik vermesinin nedenidir. Tek sayfa tasarımıyla, web siteniz en başından itibaren Google'ın iyi kitaplarında yer alır.

• Çoğu insan, gereksiz yere uzun bir web sitesi yerine sade, güzel ve amacına uygun bir web sitesini tercih eder.
• Google, Etki Alanı ve sayfa düzeyinde bağlantı yetkisini %40 oranında sayar. Bu, tek sayfalık sitenizin avantaj sağlayacağı başka bir alandır.
• Tek sayfalı web siteleri, tonlarca sayfalı web sitelerinden daha hızlı yüklenir. Günümüzde insanların sınırsız seçeneğe sahip olduğu düşünüldüğünde, hızlı yüklenen bir siteye sahip olmak gerçekten tartışılmaz.
• Tek sayfa sitelerin bakımı kolaydır.
• Tek sayfalık bir web sitesinde tüm bilgiler tek bir sayfada bulunduğundan, kaydırmalı gezinme gezinmeyi çok daha kolay hale getirir ve pürüzsüz kaydırma efekti, kullanıcıyı rahatlatıcı bir deneyim yaşatır.

Biraz daha devam edebilirim, ancak yukarıdaki bilgilerin, işletmeniz küçükse, tek sayfa gezinme ile küçük web sitesini kullanarak büyük, aslında gerçekten büyük faydalar elde edebileceğiniz mesajını ilettiğini düşünüyorum. O halde vakit kaybetmeden asıl işleme geçelim.

WordPress'te Tek Sayfa Gezinme ile Tek Bir Web Sitesi Nasıl Oluşturulur

Bu blogda, size sadece bir web sitesinin nasıl oluşturulacağını değil, WordPress'te potansiyel müşterilerinizi etkileyecek modern görünümlü tek sayfalık bir gezinmeyi de göstereceğim. Bu eğitim için, Popüler Web Sitesi oluşturucu WordPress'i kullanacağım (başlıkta yazdığını biliyorum!)

O halde başlayalım…

Adım 1: Gerekli WordPress Eklentilerini yükleyin

Sisteminize WordPress yükledikten sonra. Aşağıdaki WordPress eklentilerini yüklemeniz gerekir:

• Elementor (Ücretsiz sürüm)
• ElementsKit (Ücretsiz ve Pro sürümü her ikisi de)
• MetForm (Ücretsiz sürüm)

Gerekli WordPress eklentilerini yüklemeyi ve etkinleştirmeyi tamamladığınızda, siteyi oluşturmanın zamanı geldi.

Adım #2: ElementsKit hazır sayfasını kullanarak bir web sitesi oluşturun

ElementsKit önceden hazırlanmış birçok sayfa, şablon ve bölüm sağlar, böylece insanlar kodlama yapmadan da istedikleri herhangi bir tasarım, düzen ve stille bir web sitesi oluşturabilirler. Bu blog için ElementsKit'in Wedding planner açılış sayfasını kullanacağım.

Web sitenizi oluşturmak için, WordPress Kontrol Panelinden Sayfalara Git ⇒ Yeni Ekle

• Ev gibi bir başlık verin, Şablon seçeneklerinden Elementor Tam Genişlik'i seçin
• Yayınlamak için tıklayın ve yayınladıktan sonra Elementor ile Düzenle'ye tıklayın

• Elementor Builder Penceresi açıldığında ElementsKit Düğmesine (EK) tıklayın

• Sayfa sekmesine gidin, Düğün Sayfasını Arayın ve Ekle'ye tıklayın

Şimdi kaydetmek için güncellemeye tıklayın

Adım #3: ElementsKit kullanarak Elementor tek sayfa gezinme nasıl eklenir

Artık web sitemize kavuştuğumuza göre, sıra tek sayfa kaydırmalı gezinmeyi ekleyen eğlenceli kısma geldi.ElementsKit Tek sayfa kaydırmalı gezinmenin kullanımı daha kolay ve sitenize çarpıcı bir görünüm kazandırıyor. ElementsKit kadar iyi başka bir tek sayfa gezinme Elementor eklentisi bulmanız pek olası değildir.

Şimdi, WordPress sitenize bir sayfa kaydırmalı gezinme bağlantısı ekleme işlemine adım adım bakalım:

3.1 Tek Sayfa Kaydırma Modülünü Açın

WordPress sitenize kaydırma navigasyonu eklemek için önce Onepage Scroll Modülünü açmamız gerekiyor.

• Git: WordPress Kontrol Paneli ⇒ ElementsKit ⇒ Modüller
• Onepage Scroll'u açın
• Güncellemek için Değişiklikleri Kaydet'e tıklayın

3.2 Sayfa ayarlarından Tek Sayfa Kaydırmayı Etkinleştir

• Elementor Panelinin sol alt köşesindeki Ayarlar simgesine tıklayın
• ElementsKit Ayarları sekmesini açın
• Tek Sayfa Kaydırma seçeneğini etkinleştir

Not: Tek Sayfa Kaydırma Ayarı seçeneğini bulamıyorsanız, muhtemelen ElementsKit Pro'nuzu etkinleştirmemişsinizdir.

3.3 Gezinme Stilini Seçin

Şimdi, navigasyon stilini seçme zamanı. ElementsKit, gezinme için size birden çok seçenek sunar. Örneğin, dairenin altında Ölçek büyüt, doldur, doldur vb. Alırsınız. Kare desen için ölçek büyütme gibi seçenekleriniz olacak ve Çizginin bir parçası olarak büyütülecek çizgi, çizgi dolgusu gibi seçenekler alacaksınız. , satır küçültme, vb.

Beğendiğiniz herhangi bir stili seçebilirsiniz, bu blog için özel simgeyi seçeceğim. Bir Özel simge seçtiğinizde, Tek Sayfa Kaydırma Gezinme Stili seçeneği için bir simge seçme seçeneğine sahip olacaksınız. Simge kitaplığından bir simge seçebilir veya özel bir SVG simgesi yükleyebilirsiniz.

Özel bir simge seçmek için

• Gezinme stili açılır menüsünden Özel Simge seçeneğini seçin
• Gezinme simgesinin üzerine gelin ve Simge kitaplığına tıklayın
• Beğendiğiniz Simgeyi Arayın ve Ekleyin

3.4 Diğer Navigasyon ayarlarını yapın

Bir gezinme stili seçtiğinizde, aşağıdaki ayarlara erişebilirsiniz:

• Navigasyon Konumu: Navigasyon konumunu üst, sağ, alt veya sol olarak ayarlayabilirsiniz.
• Navigasyon Pozisyon Ofseti: Burada navigasyon pozisyonu ofset değerini seçebilirsiniz.
• Gezinme Aralığı: Her gezinme simgesi arasında istediğiniz boşluğu seçin.
• Gezinme Rengi: Gezinme simgesi için bir renk seçin.
• Araç İpucu Tipografisi: Burada araç ipucu için aile, yazı tipi boyutu, ağırlık dönüşümü, stil, dekorasyon ve satır yüksekliğini seçebilirsiniz.

3.5 Gezinme bağlantılarına sayfa bölümleri ekleyin

Artık tüm ayarlar yapıldıktan sonra, navigasyonda görünmesini istediğiniz bölümleri eklemenin zamanı geldi. Böyle yaparak

• Bölümün üzerine gelin ve Bölümü Düzenle simgesine tıklayın
• Gelişmiş sekmesine gidin
• ElementsKit Onpage Scroll seçeneğini genişletin
• Bölümü görünür hale getirmek için bölümü etkinleştirin
• Bu bölümü gezinme bağlantılarından biri olarak eklemek için etkinleştirme seçeneğini açın
• Araç ipucu metni için bir ad sağlayın. Birisi bağlantının üzerine geldiğinde araç ipucu metni görünecek
• Son olarak, kaydetmek için güncellemeye tıklayın

Navigasyona istediğiniz tüm bölümleri eklemek için yukarıda belirtilen işlemi tekrarlayabilirsiniz.

Not: Navigasyona iç kısım değil, kısım ekleyebilirsiniz. Bu nedenle, iç bölüm veya başka herhangi bir widget için gelişmiş sekmenin altında ElementsKit Onpage Scroll seçeneğini bulamazsınız.

Tüm navigasyonu yaptıktan sonra, WordPress'te bir sayfa navigasyonunun önizlemesini görmek ve ayrıca navigasyon menüsü bağlantılarını kontrol etmek için güncelleyin ve tıklayın .

Adım #4: ElementsKit hazır üstbilgi altbilgi bölümünü kullanarak Üstbilgi Altbilgisi ekleyin

Pekala, şimdi WordPress'te bir sayfa gezinme web siteniz var, ancak web sitenizi tamamlamak için hala bir üstbilgi altbilgisine ihtiyacınız var. Bir web sitesinin Üstbilgi ve Altbilgi bölümleri, müşterilerinizin kolayca görebilmesi için logonuzu ve önemli bilgilerinizi görüntülemek için çok önemlidir.

ElementsKit, aralarından seçim yapabileceğiniz birçok hazır Üstbilgi ve Altbilgi bölümü sağlar. ElementsKit Üst Bilgi Alt Bilgisini kullanmak için:

• ElementsKit'e gidin ⇒ Üstbilgi Altbilgisi ⇒ Yeni Ekle'ye tıklayın

• Başlık olarak Tür, Tüm Site Olarak Koşullar'ı seçin, Etkinleştir/Devre Dışı Bırak seçeneğini açın ve son olarak Değişiklikleri kaydet'e tıklayın .

• Şimdi başlık bölümü eklemek için oluşturduğunuz menüde Düzenle'yi tıklayın.
• İçeriği Düzenle'ye tıklayın
• EK düğmesine tıklayın ve Bölümler sekmesine gidin
• Beğendiğiniz başlık tasarımını seçin ve ekle'ye tıklayın

Web siteniz için güzel bir üstbilgi altbilgisi oluşturmak için aşağıdaki videoyu izleyebilirsiniz.

Not: ElementsKit tarafından Hazırlanmış bölümleri kullanarak web siteniz için bir Altbilgi bölümü oluşturmak için Üstbilgi ile aynı adımları uygulayabilirsiniz.

Adım #5: İletişim formunu Modal Popup (BONUS) olarak ekleyin

Potansiyel müşterilerinizin sizinle iletişim kurmasını kolaylaştırmak için web sitenize bir iletişim formu eklemenin zamanı geldi. Bir açılır pencere kullanarak bir iletişim formu eklemek, ihtiyacınız olan çok gerekli formun yanı sıra tek sayfalık web sitenize daha çekici bir görünüm verir.

Kalıcı bir açılır pencere eklemek için, LCV butonunu bir açılır pencere moduyla değiştireceğim ve ona bir iletişim formu ekleyeceğim.

• ElementsKit'e gidin ⇒ Widget'lar ⇒ Açılır pencere modunu açın ⇒ Değişiklikleri kaydet'e tıklayın

• Tüm Sayfanıza gidin ⇒ ana sayfanıza (veya sayfanıza ne ad verdiyseniz) ve Elementor ile Düzenle'ye tıklayın

• Düzenleme modunda, LCV bölümüne gidin ve LCV butonunu silin
• RSVP düğmesinin yerine modal açılır penceresini sürükleyip bırakın

• Kalıcı düğme metnini değiştirmek için İçerik ⇒ Geçiş Düğmesi ⇒ Etiket'e gidin ve “Kipli Aç” ı RSVP (veya istediğiniz herhangi bir şey) olarak değiştirin.

• Hem normal hem de vurgulu görünüm için düğme arka plan rengini, metin rengini, kenarlık yarıçapını ve diğer ayarları değiştirmek için Stil sekmesi ⇒ Geçiş Düğmesi'ne gidin.

• Şimdi İçeriğe gidin ve İletişim formumuzu ekleyebilmemiz için Şablonu Etkinleştir modunu açın.
• Pop-up düğmesine tıklayın. Bir kez açıldığında, Elementor düzenleyicisini açmak için gövdedeki düzenle simgesine tıklayın

• Metform'u arayın, widget'ı sürükleyip bırakın
• İletişim formunu seçmek için Düzenle formuna tıklayın
• Listeden istediğiniz formu seçin ve kaydet ve kapat'a tıklayın.
• Son olarak, kaydetmek için güncellemeye tıklayın

Not: LCV formunu Metform kullanarak zaten hazırlamıştım ve ayrıca kullandığımız açılış sayfası şablonuna uyması için rengi ve stili biraz değiştirdim. Metform kullanarak iletişim formlarının nasıl oluşturulacağı ve biçimlendirileceğiyle ilgili bloga göz atabilirsiniz.

Metform kullanarak özel bir iletişim formunun nasıl oluşturulacağına ilişkin talimatlar için aşağıdaki videoyu da izleyebilirsiniz.

Adım #6: Tek Sayfa Gezinme ile Tek web sitesi önizlemesini güncelleyin ve görün

Her şey yapıldı. Şimdi son adıma, en kolay ve en heyecan verici adıma. Yukarıda belirtilen tüm özelleştirme ve adımları tamamladıktan sonra, her şeyi kaydetmek için Güncelle düğmesine tıklayın ve sitenizi görmek için Önizleme düğmesine tıklayın .

Tüm adımları doğru bir şekilde izlemeniz koşuluyla, WordPress'te aşağıdaki gibi tek sayfa gezinme özelliğine sahip tek sayfalı bir web sitesi edinmelisiniz:

Sarmak

Kendine sırtını sıvazla! Çünkü Elementor ve ElementsKit kullanarak tek sayfa gezinme ile modern görünümlü güzel bir web sitesini başarıyla oluşturdunuz. Tek sayfalık bir web sitesi kullanan müşteriler, işletmeniz hakkında bilgi edinmek için web sitenizin farklı bölümlerine kolayca gidebilir. Ve iletişim formuyla birlikte bu tek tıklamalı kalıcı açılır pencere, iletişimi gerçekten sadece bir tıklama uzağınızda yapar!

Oluşturduklarınızdan etkilendiyseniz, o zaman daha da fazla şaşırmaya hazır olun çünkü ElementsKit, WordPress ve Elementor kullanıcılarının harika görünümlü bir web sitesi denemesi ve oluşturması için sınırsız olanaklar sunar. Bu nedenle, ElementsKit'in diğer gelişmiş widget'larını ve modüllerini kontrol etmek için zaman ayırın.

WordPress, Elementor ve büyülü ElementsKit kullanarak web sitesi oluşturma hakkında daha fazla bilgi edinmek için bizi sosyal medya hesaplarımızdan takip edin.