Elementor ile Web Sitesi Nasıl Oluşturulur (Kapsamlı Bir Kılavuz)

2016'da piyasaya sürülmesinden bu yana Elementor, WordPress için en popüler sayfa oluşturucu haline geldi. Elementor ile yalnızca çarpıcı web sayfaları oluşturamazsınız. Eksiksiz bir web sitesi oluşturmak için Elementor'u kullanabilirsiniz. Elementor'un pro sürümü, bir WordPress temasının özel bölümlerini oluşturmanıza olanak tanıyan bir tema oluşturucu ile birlikte gelir. Başlıktan, alt bilgiden, tek gönderi şablonundan, 404 sayfasından, arşiv sayfasından, arama sonuçları sayfasından vb. Bu yazıda size Elementor Pro kullanarak eksiksiz bir web sitesi oluşturmayı göstereceğiz.

Elementor Hakkında Kısa Bir Giriş

Eğer bilmiyorsan. Elementor, WordPress için bir sayfa oluşturucu eklentisidir. Bir sayfa oluşturucu, HTML veya CSS ile uğraşmak zorunda kalmadan güzel bir web sayfası oluşturmanıza olanak tanır. Elementor dahil bir sayfa oluşturucu, her şeyin sürüklenip bırakıldığı bir görsel düzenleyiciyle birlikte gelir.

Elementor'un kendisi bir freemium eklentisi olarak yayınlandı. Profesyonel sürüm (yıllık 49 ABD dolarıdır), aşağıdaki temel özelliklerle birlikte gelir.

• Tema Oluşturucu
• Açılır Pencere Oluşturucu
• WooCommerce Oluşturucu
• Pazarlama araçları
• Form Oluşturucu
• Ekstra widget'lar

Elementor Pro ile elde edeceğiniz avantajlar hakkında daha fazla bilgi edinmenizi sağlamak için Elementor Free ile Elementor Pro arasında bir karşılaştırma makalesi oluşturduk.

Hazırlık

Bu örnekte, bir dijital ajans web sitesinin nasıl oluşturulacağını göstereceğiz. Web sitesi aşağıdaki gibi 5 ana sayfadan oluşacaktır:

• Ana Sayfa
• Hakkında sayfası
• İletişim sayfası
• hizmet sayfası
• Müşteriler sayfası

Ayrıca 404 sayfasını, üstbilgiyi, altbilgiyi, tek bir gönderi şablonu ve bir açılır pencere oluşturacağız. Elementor'un kendisi şablon kitleri sunar. Bir şablon seti, tutarlı bir tasarım konseptine sahip bir dizi Elementor şablonudur. Bir şablon seti, belirli bir niş üzerindeki web siteleri için tasarlanmıştır. Bu örnekte Dijital Ajans şablon kitini kullanacağız.

Elementor ile bir web sitesi oluşturmaya başlamadan önce, kesinlikle bir alan adı ve barındırmaya ihtiyacınız var. Elementor ile bir web sitesi oluşturmak için hazırlamanız gereken şeyler burada.

Alan+Barındırma

Etki alanı, insanların web sitenize (yani web siteniz.com) erişebildiği bir adrestir, barındırma (daha doğrusu web barındırma) web sitenizin kurulduğu yerdir. Bir .com alan adı genellikle yıllık 8 ila 13 ABD doları arasındadır. Barındırma için ihtiyaçlarınıza göre bir plan kullanabilirsiniz.

Paylaşılan barındırmayı kullanabilseniz de, özellikle WordPress tabanlı web sitelerini yönetmek için tasarlandığından, yönetilen bir WordPress barındırma kullanmanızı şiddetle öneririz. Yönetilen bir WordPress barındırma altyapısı, sunucu yapılandırması dahil olmak üzere WordPress için optimize edilmiştir. Yönetilen bir WordPress barındırma ile, işler ilgili barındırma sağlayıcısı tarafından yapıldığından site optimizasyonunu ve güvenliğini kendiniz halletmeniz gerekmez. Bluehost, yönetilen WordPress barındırma hizmeti sunan önde gelen web barındırma sağlayıcılarından biridir.

Elementor Pro

Özel bir üstbilgi, özel altbilgi ve yukarıda daha önce bahsettiğimiz diğer tema bölümlerini oluşturmak için profesyonel Elementor sürümünü kullanmanız gerekir. Elementor tarafından pro sürüm için sunulan beş plan vardır. Daha fazlasını öğrenmek için resmi sitesini ziyaret edebilirsiniz. Kendi işiniz için bir web sitesi oluşturmak istiyorsanız, yıllık 49 ABD Doları tutarındaki ESSENTIAL planını seçebilirsiniz.

Başlarken

WordPress'i yükleyin

Her şey hazır olduğunda, web sitenizi oluşturmaya başlayabilirsiniz. Yapmanız gereken ilk şey, oluşturacağımız web sitesinin temel bileşeni olduğu için önce WordPress'i kurmaktır. WordPress'i kurmak için ayrıntılı adımlar, barındırma sağlayıcınız tarafından sunulan panele bağlı olarak değişir.

SiteGround kullanıyorsanız, WordPress'in nasıl kurulacağını öğrenmek için bu makaleyi okuyabilirsiniz. cPanel kullanan bir barındırma sağlayıcısı kullanıyorsanız bu makaleyi okuyabilirsiniz.

Elementor Pro'yu yükleyin

Elementor Pro'yu resmi web sitesinden edinebilirsiniz. Satın alma işlemini tamamladıktan sonra Elementor Pro'nun ZIP dosyasına erişebileceksiniz. Elementor Pro'yu web sitenize kurmak için, kullanıcı adınızı ve şifrenizi kullanarak WordPress panonuza giriş yapın. Eklentiler -> Yeni Ekle'ye gidin. Üst taraftaki Yeni Ekle düğmesini tıklayın ve indirdiğiniz Elementor Pro'nun ZIP dosyasını seçin ve WordPress'inize yüklemek için Şimdi Yükle düğmesini tıklayın.

Eklentiyi kurduktan sonra hemen etkinleştirin.

Elementor Pro eklentisini etkinleştirdikten sonra, WordPress'in eklenti yöneticisine yönlendirileceksiniz ve sağ üst tarafta Bağlan ve Etkinleştir düğmesini göreceksiniz. Elementor Pro'nuzu etkinleştirmek için bu düğmeye tıklayın.

Not: Elementor Pro, Elementor Free gerektirir. Elementor Free'yi WordPress'in resmi eklenti dizininden indirebilirsiniz.

Web Sitenizin Temel Statik Sayfalarını Oluşturun

Elementor Pro'nuz aktif olduğunda, web siteniz için statik sayfalar oluşturmaya başlayabilirsiniz. Bizim durumumuzda oluşturacağımız statik sayfalar şunlardır: Ana Sayfa, Hakkında sayfası, İletişim sayfası, Müşteriler sayfası ve Hizmetler sayfası.

Ana Sayfa

Bir sayfa oluşturun ( Sayfalar -> Yeni Ekle ) ve onu Elementor ile düzenleyin. Bu sayfaya "ana sayfa", "ana sayfa" veya "ön sayfa" gibi bir ad verin.

Sol paneldeki sol alt köşedeki dişli simgesine tıklayarak sayfa düzenini ayarlayın. Sayfa düzenini Elementor Tam Genişlik olarak ayarlayın.

Web sitesini Dijital Ajans şablon setinden oluşturmak istediğimiz için, Dijital Ajans şablon setinin ana sayfa şablonunu içe aktarmak için tuval alanındaki klasör simgesine tıklayın.

Şablon kitaplığındaki Sayfalar sekmesinin altında, arama kutusuna “dijital ajans” yazın ve ana sayfa şablonunu seçin. Elementor düzenleyicide açmak için Ekle düğmesini tıklayın.

Varsayılan içeriği kendi içeriğinizle değiştirerek içeriği özelleştirin. Düzenlemek için her bir widget'a tıklayabilir ve ardından içeriği düzenlemek için sol panele gidebilirsiniz. Bir widget'ı tıklamak, onu bir düzenleme moduna dönüştürecektir.

İçeriği uyarlamayı bitirdikten sonra, sayfayı yayınlamak için sol paneldeki YAYINLA düğmesine tıklayın. Ayrıca göz simgesine tıklayarak da önizleyebilirsiniz.

Ana sayfanız yayınlandıktan sonra Ayarlar -> Okuma bölümüne gidin. Ana sayfa görüntüsünü statik bir sayfaya ayarlayın ve açılır menüden yeni oluşturduğunuz ana sayfayı seçin ve Değişiklikleri Kaydet düğmesini tıklayın.

Sayfa Hakkında

Yeni bir sayfa oluşturun ( Sayfalar -> Yeni Ekle ) ve bunu Elementor ile düzenleyin. Bu sayfaya "hakkında" veya "hakkında" gibi bir ad verebilirsiniz. Sol paneldeki dişli simgesini tıklayın ve sayfa düzenini Elementor Tam Genişlik olarak ayarlayın.

Tuval alanındaki klasör simgesini tıklayın. Sayfalar sekmesinin altında, arama kutusuna "dijital ajans" yazın. Hakkında sayfasını seçin ve bunu Elementor düzenleyicide açmak için Ekle düğmesini tıklayın.

İçeriği ana sayfada yaptığınız gibi özelleştirin ve sayfayı yayınlayın.

İletişim sayfası

Yeni bir sayfa oluşturun ve Elementor ile düzenleyin. Bu sayfaya “iletişim” veya “bize ulaşın” gibi bir ad verebilirsiniz. Sayfa düzenini Elementor Tam Genişlik olarak ayarlayın.

Şablon kitaplığını açmak için tuval alanındaki klasör simgesine tıklayın. Şablon kitaplığındaki Sayfalar sekmesinin altında, arama kutusuna “dijital ajans” yazın. Kişi sayfasını seçin ve bunu Elementor düzenleyicide açmak için Ekle düğmesini tıklayın.

İçeriği özelleştirin. Bittiğinde, sayfayı yayınlayın

Müşteriler Sayfası

Müşteriler sayfası, şirketinizin birlikte çalıştığı müşterileri sergilemek için kullanılır. Yeni bir sayfa oluşturun ve Elementor ile düzenleyin. Bu sayfaya "Müşteriler" veya "Mutlu Müşteriler" gibi bir ad verin. Sayfa düzenini Elementor Tam Genişlik olarak ayarlayın.

Şablon kitaplığını açmak için tuval alanındaki klasör simgesine tıklayın. Sayfalar sekmesinin altında, arama kutusuna "dijital ajans" yazın. İstemciler sayfasını seçin ve bunu Elementor düzenleyicide açmak için Ekle düğmesini tıklayın.

İçeriği özelleştirin. Bittiğinde, sayfayı yayınlayın.

Hizmetler Sayfası

Hizmetler sayfası, şirketiniz tarafından sunulan hizmetleri görüntülemek için kullanılır. Yeni bir sayfa oluşturun ve Elementor ile düzenleyin. Bu sayfaya "hizmetler" veya "hizmetlerimiz" gibi bir ad verin. Sayfa düzenini Elementor Tam Genişlik olarak ayarlayın.

Şablon kitaplığını açmak için tuval alanındaki klasör simgesine tıklayın. Sayfalar sekmesinin altına "dijital ajans" yazın. Hizmetler sayfasını seçin ve bunu Elementor düzenleyicide açmak için Ekle düğmesini tıklayın.

İçeriği özelleştirin. Bittiğinde, sayfayı yayınlayın.

Tema Parçalarını Oluşturun

Fark ettiyseniz, çoğu WordPress teması aşağıdaki bölümlerden oluşur:

• başlık
• altbilgi
• 404 Sayfa
• Tek Gönderi Şablonu

Bazı temaların, temanın karmaşıklığına bağlı olarak birkaç bölümü daha olabilir. Elementor'un tema oluşturucu özelliği, yukarıdaki parçaları oluşturmanıza olanak tanır ve bunları, oluşturduğumuz web sitesinde oluşturacağız. Ayrıca, tek bir gönderi şablonu ve bir açılır pencere de oluşturacağız.

başlık

Site logosunu ve ana menüyü yerleştirmek için başlığı kullanacağız. Başlığı oluşturmaya başlamadan önce, önce bir menü oluşturmanız gerekir. Bunu yapmak için Görünümler -> Menü'ye gidin. Yeni bir menü oluşturmak için yeni bir menü oluştur bağlantısını tıklayın.

Yeni menünüze bir ad verin ve Menü Oluştur düğmesini tıklayın.

Menü öğeleri ekle bölümünde öğeleri menünüze ekleyin . Menünüze sayfalar, gönderiler, kategoriler veya özel URL'ler ekleyebilirsiniz. Menünüze öğe eklemek için eklemek istediğiniz öğeleri işaretlemeniz ve Menüye Ekle düğmesini tıklamanız yeterlidir. Yukarıda oluşturduğunuz sayfaları ekleyin. Yeni menünüzü kaydetmek için Menüyü Kaydet düğmesine tıklamayı unutmayın.

Menüyü oluşturmayı bitirdikten sonra Templates -> Theme Builder'a gidin. Tema Oluşturucu ekranında, sol paneldeki Başlık sekmesine tıklayın ve yeni bir başlık oluşturmak için Yeni Ekle düğmesine tıklayın.

Şablon kitaplığı penceresindeki Bloklar sekmesi altında, Dijital Ajans şablon kitinin başlığını bulmak için arama kutusuna “dijital ajans” yazın. Elementor düzenleyicide açmak için Ekle düğmesini tıklayın.

Varsayılan site logosunu kendi site logonuzla değiştirin. Bunu yapmak için, bir düzenleme moduna dönüştürmek üzere Görüntü widget'ına tıklayın. Sol paneldeki resim seçiciye tıklayarak logonuzu yükleyin.

Ardından, varsayılan menüyü yeni oluşturduğunuz menüyle değiştirin. Bunu yapmak için, bir düzenleme moduna dönüştürmek üzere Gezinme Menüsü widget'ına tıklayın. Sol paneldeki Menü bölümündeki açılır menüden menünüzü seçin.

Başlıktaki telefon numarasını silmek istiyorsanız, sağ tıklayın ve Sil öğesini seçin.

Başlığınızı yayınlamak için sol panelin alt tarafında bulunan YAYINLA düğmesini tıklayın. Görüntüleme koşulunu ayarlamanız istenecektir. Görüntü koşulunu ayarlamak için KOŞUL EKLE düğmesini tıklamanız yeterlidir.

Varsayılan olarak, başlık şablonunuz tüm web sitesine uygulanacaktır. Başlık şablonunuzun tüm web sitesine uygulanmasını istiyorsanız, KAYDET ve KAPAT düğmesini tıklamanız yeterlidir. Tersine, başlığınızın belirli sayfalara veya gönderilere uygulanmasını istiyorsanız, KAYDET ve KAPAT düğmesini tıklamadan önce açılır menüden sayfaları veya gönderileri seçin.

altbilgi

Başlıkla aynı şekilde, alt bilgiyi oluşturmak için Şablonlar -> Tema Oluşturucu'ya gidebilirsiniz. Sol paneldeki Altbilgi sekmesine gidin ve yeni bir altbilgi oluşturmak için Yeni Ekle düğmesini tıklayın.

Şablon kitaplığı penceresindeki Bloklar sekmesi altında, Dijital Ajans şablon kitinin alt bilgisini bulmak için arama kutusuna “dijital ajans” yazın. Elementor düzenleyicide açmak için Ekle düğmesini tıklayın.

Altbilgi şablonunu bulamazsanız, farenizi aşağıya doğru kaydırın. Dijital Ajans şablon setinin altbilgisi site logosu, e-posta abonelik formu ve sosyal medya simgelerinden oluşur.

Varsayılan site logosunu, yukarıdaki başlık şablonunda yaptığınız gibi değiştirin. Ardından, sosyal medya simgelerinin URL'lerini düzenleyin. Bunu yapmak için, bir düzenleme moduna dönüştürmek üzere Simge Listesi widget'ına tıklayın. Sol panele her bir sosyal medya platformunun URL'sini girin.

Bir düzenleme moduna dönüştürmek ve ayarları uyarlamak için Form widget'ını tıklayın. Elementor, Mailchimp, MailerLite ve GetResponse dahil olmak üzere çeşitli e-posta pazarlama hizmetleriyle entegrasyonu destekler. Elementor'u bir e-posta pazarlama aracıyla nasıl entegre edebileceğiniz hakkında daha fazla bilgi edinmek için bu gönderiyi okuyabilirsiniz.

Altbilgi şablonunuzu yayınlamak için YAYINLA düğmesini tıklayın ve görüntüleme koşulunu ayarlamak için DURUM EKLE düğmesini tıklayın. Üstbilgi ile aynı şekilde, altbilgi şablonunuz da varsayılan olarak sitenin tamamına uygulanacaktır. Altbilgi şablonunuzu belirli sayfalara veya gönderilere uygulamak için açılır menüden sayfaları veya gönderileri seçin ve KAYDET & YAYINLA düğmesini tıklayın.

404 Sayfa

404 sayfasını oluşturmak için Şablonlar -> Tema Oluşturucu'ya gidin. Tema Oluşturucu ekranında, sol paneldeki Hata 404 sekmesine gidin ve Yeni Ekle düğmesine tıklayın.

Şablon kitaplığındaki Bloklar sekmesi altında, Dijital Ajans şablon setinin 404 sayfasını bulmak için arama kutusuna “dijital ajans” yazın. Elementor düzenleyicide açmak için Ekle düğmesini tıklayın.

YAYINLA düğmesine tıklayın ve görüntüleme koşulunu ayarlayın. 404 Sayfa'yı seçtiğinizden emin olun ve KAYDET & YAYINLA düğmesini tıklayın.

Tek Gönderi Şablonu

Tek gönderi şablonunu oluşturmak için Şablonlar -> Tema Oluşturucu'ya gidin. Tema Oluşturucu ekranında, sol paneldeki Tek Gönderi sekmesine gidin ve Yeni Ekle düğmesine tıklayın.

Şablon kitaplığı penceresindeki Bloklar sekmesi altında, Dijital Ajans şablon kitinin tek gönderi şablonunu bulmak için arama kutusuna “dijital ajans” yazın. Elementor düzenleyicide açmak için Ekle düğmesini tıklayın.

YAYIN düğmesine tıklayın ve görüntüleme koşulunu ayarlayın. Varsayılan olarak, bu şablon tüm web sitesine uygulanacaktır. Bu aynı zamanda her yeni blog yazısı yazdığınızda, yeni blog yazısının bu tek yazı şablonuyla yayınlanacağı anlamına gelir. Belirli bir nedenle, belirli bir kategori için tek gönderi şablonunu uygulamak istiyorsanız, KAYDET ve KAPAT düğmesine tıklamadan önce açılır menüden kategoriyi seçmeniz yeterlidir.

Haber Sayfası

Web sitenizdeki en son blog gönderilerini görüntülemek için Haberler sayfasını kullanacağız. İsterseniz bu sayfa için herhangi bir isim kullanabilirsiniz. Örneğin “Blog”.

Bu sayfayı oluşturmak için Şablonlar -> Tema Oluşturucu'ya gidin. Sol paneldeki Arşiv sekmesine gidin ve Yeni Ekle düğmesini tıklayın.

Bloklar sekmesi altında, Dijital Ajans şablon kitinin arşiv sayfasını bulmak için arama kutusuna “dijital ajans” yazın. Elementor düzenleyicide açmak için Ekle düğmesini tıklayın.

YAYINLA düğmesine tıklayın ve görüntüleme koşulunu ayarlayın. Görüntüleme koşulunu ayarlayarak bu sayfada görünen arşiv türlerini kontrol edebilirsiniz. Örneğin, yalnızca gönderi arşivini görüntülemek istiyorsanız, görüntüleme koşulunu Gönderiler Arşivi olarak ayarlayabilirsiniz. Ve KAYDET & KAPAT düğmesine tıklayın.

Aniden belirmek

Dikkat ederseniz Dijital Ajans şablon setinin her sayfa şablonunda sol alt köşede bir zarf simgesi vardır. Bu simge, şablon kitinin açılır penceresini görüntülemek için kullanılır. Pop-up'ın kendisi, potansiyel müşterilerinizin verilerini toplamayı amaçlamaktadır. Bu açılır pencereye ihtiyacınız yoksa, her sayfa şablonundaki zarf simgesini silebilirsiniz.

Tersine, açılır pencereyi kullanmak istiyorsanız, önce açılır pencereyi oluşturabilirsiniz. Bunu yapmak için Şablonlar -> Açılır Pencereler'e gidin. Yeni Ekle düğmesini tıklayın, açılır pencerenize bir ad verin ve ŞABLON OLUŞTUR düğmesini tıklayın.

Pop-up'lar sekmesi altında, Dijital Ajans şablon kitinin açılır şablonunu bulmak için arama kutusuna "dijital ajans" yazın. Elementor düzenleyicide açmak için Ekle düğmesini tıklayın.

YAYINLA düğmesine tıklayın. Görünen açılır pencerede, tetiği ayarlamak için İLERİ düğmesine tıklayın.

Açılır pencereyi görüntülemek için tıklama tetikleyicisini kullanacağız, bu nedenle Tıklandığında seçeneğini etkinleştirin ve KAYDET ve KAPAT'ı tıklayın.

Pop-up'ınız kullanıma hazır. Ardından, oluşturduğunuz sayfalardan birini (ana sayfa, hakkında sayfası, iletişim sayfası, hizmetler sayfası veya müşteriler sayfası) Elementor ile düzenleyin ve düzenleme moduna dönüştürmek için zarf simgesine tıklayın. Bağlantı bölümünün altındaki İngiliz anahtarı simgesini tıklayın ve az önce oluşturduğunuz açılır pencereyi seçin.

Sayfayı güncelleyin. Açılır pencereyi görüntülemek istediğiniz diğer sayfalardaki adımları tekrarlayın.

Tebrikler! Web sitenizi yeni oluşturdunuz.

Alt çizgi

Elementor, WordPress ile bir web sitesi oluşturmak için harika bir sayfa oluşturucudur. Ücretsiz olarak kullanabilirsiniz, ancak pro sürümünü kullanarak elde edeceğiniz başka avantajlar da vardır. Elementor'un pro sürümü, kodlama yapmadan bir WordPress teması oluşturmanıza olanak tanıyan bir tema oluşturucu, fazladan bir eklenti yüklemeden açılır pencereler oluşturmak için bir açılır pencere oluşturucu ve diğer birçok özellik ile birlikte gelir. Profesyonel sürüm ayrıca daha fazla widget'a ve şablona erişmenizi sağlar.

Bir WordPress temasının özel bölümlerinin nasıl oluşturulacağı hakkında daha ayrıntılı talimatlar yazdık. Daha fazlasını öğrenmek için aşağıdaki makaleleri ziyaret edebilirsiniz.

• Elementor ile WordPress'te özel bir başlık nasıl oluşturulur
• Elementor ile WordPress'te özel bir altbilgi nasıl oluşturulur
• Elementor ile WordPress'te özel bir tek gönderi şablonu nasıl oluşturulur
• Elementor ile WordPress'te özel bir 404 sayfası nasıl oluşturulur

Elementor'da tamamen yeniyseniz, yazdığımız Elementor başlangıç ​​kılavuzunu okuyabilirsiniz.