Elementor ile bir web sitesi nasıl oluşturulur (Kapsamlı Kılavuz)
2016 yılında piyasaya sürüldüğünden beri Elementor, WordPress için en popüler sayfa üreticisi olarak patladı. Elementor ile sadece muhteşem web sayfaları oluşturmakla kalmaz. Tam bir web sitesi oluşturmak için bir Elementor kullanabilirsiniz. Pro Elementor sürümü, WordPress temasının özel bir bölümünü oluşturmanızı sağlayan bir tema üreticisi ile birlikte gelir. Başlıklardan, altbilgiden, tek yazı şablonundan, sayfa 404, arşiv sayfaları, arama sonuçları sayfaları vb. Bu yazıda, Elementor Pro kullanarak nasıl eksiksiz bir web sitesi oluşturacağınızı göstereceğiz.
İçindekiler
Elementor hakkında kısa giriş
Hazırlık
Etki Alanı+Hosting
Pro Elementor
Başlama
WordPress’i yükleyin
Pro Elementor’u yükleyin
Web sitenizin temel statik bir sayfası oluşturun
Ana sayfa
Sayfalar hakkında
İletişim sayfası
Müşteri sayfası
Hizmet sayfası
Tema bölümünü oluşturun
başlık
dipnot
404 sayfa
Tek yazı şablonu
Haber sayfası
Belli olmak
Altını çizmek
Henüz bilmiyorsanız Elementor hakkında kısa giriş. Elementor, WordPress için bir sayfa yapımcıları eklentisidir. Sayfa üreticisi, HTML veya CSS ile uğraşmak zorunda kalmadan güzel bir web sayfası oluşturmanıza olanak tanır. Sayfa üreticileri – elementler dahil – her şeyin sürüklendiği ve gevşek olduğu görsel editörlerle birlikte gelir.
Elementor’un kendisi bir freemium eklentisi olarak yayınlandı. Pro versiyonu (yılda 49 $ maliyetle), aşağıdaki ana özelliklerle birlikte gelir.
Tema üreticisi
Pop -up üreticisi
WooCommerce Maker
Pazarlama araçları
Form Maker
Ek widget
Elementor Free ile Elementor Pro arasında Elementor Pro ile alacağınız faydalar hakkında daha fazla bilgi edinmenizi sağlayacak bir karşılaştırma makalesi yaptık. Hazırlıklar Bu örnekte, size bir dijital ajans web sitesi nasıl oluşturulacağını göstereceğiz. Web sitesi aşağıdaki gibi 5 ana sayfadan oluşacak:
Sayfalar hakkında
İletişim sayfası
hizmet sayfası
müşteri sayfası
Ayrıca sayfa 404, başlıklar, altbilgiler, tek post şablonlar ve açılır pencereler yapacağız. Elementor’un kendisi bir şablon kiti sunar. Şablon Kiti, tutarlı bir tasarım konseptine sahip bir dizi element şablonudur. Şablon kiti belirli nişlerde web siteleri için tasarlanmıştır. Bu örnekte dijital ajans şablon kitini kullanacağız. Bir Elementor ile bir web sitesi oluşturmaya başlamadan önce, elbette bir alan adına ve önce barındırmaya ihtiyacınız var. Elementor ile bir web sitesi oluşturmak için hazırlanmak için ihtiyacınız olan şeyler. Etki Alanı+Barındırma Etki Alanı, kullanıcıların web sitenize erişebileceği adrestir (yani web siteniz.com), barındırma (daha kesin web barındırma) web sitenizi yüklemek için bir yerdir. Domain .com genellikle yılda 8 ila 13 $ arasında. Barındırma için ihtiyaçlarınıza göre bir paket kullanabilirsiniz.
Birlikte barındırmayı kullanabilmenize rağmen, WordPress tabanlı web sitelerini işlemek için özel olarak tasarlandığı için yönetilen bir WordPress barındırma kullanmanızı şiddetle tavsiye ediyoruz. WordPress Barındırma Altyapı Yönetilen Sunucu Yapılandırması dahil WordPress için optimize edilmiştir. Yönetilen bir WordPress barındırma ile kendi optimizasyonunuzu ve güvenliğinizi ele almanıza gerek yoktur, çünkü çalışma ilgili barındırma sağlayıcısı tarafından ele alınır. Bluehost, yönetilen WordPress barındırma sunan önde gelen web barındırma sağlayıcılarından biridir.
Elementor Pro Özel bir başlık, özel altbilgi ve daha önce bahsettiğimiz diğer tema bölümleri oluşturmak için Elementor Pro sürümünü kullanmanız gerekir. Elementor tarafından Pro sürümü için sunulan beş paket vardır. Daha fazla bilgi edinmek için resmi web sitesini ziyaret edebilirsiniz. Kendi işiniz için bir web sitesi oluşturmak istiyorsanız, yıllık 49 $ maliyetle önemli bir paket seçebilirsiniz.
Elementor Pro’yu indir
WordPress’i yüklemeye başlayın Her şey hazır olduktan sonra web sitenizi oluşturmaya başlayabilirsiniz. Yapmanız gereken ilk şey önce WordPress’i yüklemektir, çünkü bu, yapacağımız web sitesinin temel bileşenidir. WordPress’i yüklemek 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’i nasıl yükleyeceğinizi öğ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 Resmi web sitesinde bir Elementor Pro alabilirsiniz. Satın alma işlemini tamamladıktan sonra Zip Elementor Pro dosyasına erişiminiz olacak. Elementor Pro’yu web sitenize yüklemek için, kullanıcı adınızı ve şifrenizi kullanarak WordPress kontrol panelinizi girin. Eklentiye gidin -> Yeni eklendi. Üst taraftaki Yeni Ekle düğmesini tıklayın ve indirdiğiniz Pro Elementor’dan ZIP dosyasını seçin ve WordPress’inize yüklemek için şimdi Yükle düğmesini tıklayın. Yüklendikten hemen sonra eklentiyi etkinleştirin.
Elementor Pro eklentisini etkinleştirdikten sonra, WordPress eklentisi yöneticisine geri yönlendirileceksiniz ve sağ üst taraftaki Connect & Etkinate düğmesini göreceksiniz. Pro Elementor’unuzu etkinleştirmek için bu düğmeyi tıklayın.
Not: Pro Elementor ücretsiz Elementor gerektirir. Ücretsiz Elementor’u WordPress Resmi Eklenti Dizini’nden indirebilirsiniz. Web sitenizin temel statik bir sayfası oluşturun Pro Elementor’unuz etkin olduktan sonra, web siteniz için statik bir sayfa oluşturmaya başlayabilirsiniz. Bizim durumumuzda, oluşturacağımız statik sayfalar şunlardır: ev, sayfa hakkında, iletişim sayfaları, istemci sayfaları ve hizmet sayfaları.
Varsayılan içeriği kendi içeriğinizle değiştirerek içeriği ayarlayın. Düzenlemek için her widget’ı tıklayabilirsiniz, ardından içeriği düzenlemek için sol panele gidebilirsiniz. Widget’ı tıklamak, Düzenleme Moduna dönüştürür. İçeriği tamamladıktan sonra, sayfayı yayınlamak için sol paneldeki yayın düğmesini tıklayın. Göz simgesine tıklayarak önce yolu da yapabilirsiniz. Ana sayfanız yayınlandıktan sonra ayarları açın -> Oku. Ana sayfa ekranını statik sayfaya ayarlayın ve aşağı indirme menüsünden yeni oluşturduğunuz ana sayfayı seçin ve Değiştir düğmesini tıklayın. Sayfa Hakkında Yeni bir sayfa oluşturun (sayfalar -> Yeni Ekle) ve Elementor ile düzenleyin. Bu sayfaya “Hakkında” veya “Hakkımızda” gibi bir isim verebilirsiniz. Sol paneldeki dişli simgesini tıklayın ve sayfa düzenini tam genişlik elementine ayarlayın. Tuval alanındaki klasör simgesini tıklayın. Sayfa sekmesinin altına, arama kutusuna “Dijital Ajans” yazın. Hakkında sayfayı seçin ve Elementor Düzenleyicisi’nde açmak için Ekle düğmesini tıklayın. Verandada yaptığınız gibi içeriği ayarlayın ve sayfalar yayınlayın. Yeni bir sayfa için iletişime geçin ve Elementor ile düzenleyin. Bu sayfaya “İletişim” veya “Bize Ulaşın” gibi bir isim verebilirsiniz. Sayfanın düzenini tam genişlik elementine ayarlayın. Şablon kitaplığını açmak için tuval alanındaki klasör simgesini tıklayın. Şablon kitaplığındaki sayfa sekmesi altında, arama kutusuna “Dijital Ajans” yazın. Kişisel sayfayı seçin ve Elementor Düzenleyicisi’nde açmak için Ekle düğmesini tıklayın. İçeriği ayarlayın. Bittiğinde, istemci sayfasını yayınlayın Müşteri sayfası, şirketinizle çalışan istemcileri görüntülemek için kullanılır. Yeni bir sayfa oluşturun ve Elementor ile düzenleyin. Bu sayfaya “Müşteri” veya “Mutlu Müşteri” gibi bir ad verin. Sayfanın düzenini tam genişlik elementine ayarlayın. Şablon kitaplığını açmak için tuval alanındaki klasör simgesini tıklayın. Sayfa sekmesinin altına, arama kutusuna “Dijital Ajans” yazın. İstemci sayfasını seçin ve Elementor Düzenleyicisi’nde açmak için Ekle düğmesini tıklayın. İçeriği ayarlayın. Bittiğinde sayfayı yayınlayın. Hizmet sayfaları hizmet sayfaları, şirketiniz tarafından sunulan hizmetleri görüntülemek için kullanılır. Yeni bir sayfa oluşturun ve Elementor ile düzenleyin. “Hizmet” veya “Hizmetimiz” gibi bu sayfa adlarını verin. Sayfanın düzenini tam genişlik elementine ayarlayın. Şablon kitaplığını açmak için tuval alanındaki klasör simgesini tıklayın. Sayfa sekmesi altında “Dijital Ajans” yazın. Hizmet sayfasını seçin ve Elementor Düzenleyicisi’nde açmak için Ekle düğmesini tıklayın. İçeriği ayarlayın. Bittiğinde sayfayı yayınlayın. Tema bölümünü oluşturun Dikkat ederseniz, çoğu WordPress teması aşağıdaki bölümlerden oluşur: başlık dipnot 404 sayfa Tek yazı şablonu Bazı temaların temanın karmaşıklığına bağlı olarak başka bölümleri olabilir. Elementor Tema özelliği, yukarıdaki parçaları oluşturmanıza olanak tanır ve oluşturduğumuz web sitesinde yapacağız. Buna ek olarak, tek bir yazı ve açılır şablon da yapacağız. Site logosunu ve ana menüyü yerleştirmek için bir başlık kullanacağız. Bir başlık yapmaya başlamadan önce, önce bir menü yapmanız gerekir. Bunu yapmak için görünümü açın -> menü. Yeni bir menü oluşturmak için yeni bir menü için bağlantıyı tıklayın.
Yeni menünüzü adlandırın ve Menü Oluştur düğmesini tıklayın.
Öğeyi menüde menünüze ekleyin Menü öğesini ekleyin. Menünüze sayfalar, yayınlar, kategoriler veya özel URL’ler ekleyebilirsiniz. Menünüze öğe eklemek için, eklemek istediğiniz öğeyi kontrol edin ve menüye ekle düğmesini tıklayın. Yukarıda oluşturduğunuz sayfayı ekleyin. Yeni menünüzü kaydetmek için Menü Kaydet düğmesini tıklamayı unutmayın.
Bir menü oluşturmayı bitirdikten sonra şablonları açın -> Tema Oluşturucu. Tema Maker ekranında, sol paneldeki başlık sekmesini tıklayın ve yeni bir başlık oluşturmak için yeni ekle düğmesine tıklayın.
Şablon Kütüphanesi penceresindeki Blok sekmesinin altına, Dijital Ajans Şablon Kitini bulmak için arama kutusuna “Dijital Ajans” i yazın. Elementor Düzenleyicisi’nde açmak için Ekle düğmesini tıklayın.
Varsayılan site logosunu kendi site logomuzla değiştirin. Bunu yapmak için, düzenleme moduna dönüştürmek için resim widget’ını tıklayın. Sol paneldeki resmin seçmenlerini tıklayarak logonuzu yükleyin.
Ardından, varsayılan menüyü yeni oluşturduğunuz menü ile değiştirin. Bunu yapmak için, düzenleme moduna dönüştürmek için NAV menüsü widget’ını 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’yi seçin.
Başlığınızı yayınlamak için sol paneldeki alt taraftaki yayın düğmesini tıklayın. Ekran koşullarını ayarlamanız istenecektir. Ekran koşullarını ayarlamak için Koşul Ekle düğmesini tıklamanız yeterlidir. Varsayılan olarak, başlık şablonunuz tüm web sitelerine uygulanır. Başlık şablonunuzun tüm web sitelerine uygulanmasını istiyorsanız, Kaydet ve Kapat düğmesini tıklayabilirsiniz. Tersine, başlığın belirli bir sayfaya veya yayınla uygulanmasını istiyorsanız, kaydet düğmesini tıklamadan önce sayfayı veya aşağı indirme menüsünden gönderin ve kapatın Dipnotlar başlıklarla aynıdır, bir altbilgi yapmak için şablonlara gidebilirsiniz -> Tema Oluşturucu. Sol paneldeki altbilgi sekmesini açın ve yeni bir altbilgi oluşturmak için yeni ekle düğmesine tıklayın. Şablonun kütüphane penceresindeki blok sekmesinin altında, bir dijital ajansın altbilgisi kitini bulmak için arama kutusuna “Dijital Ajans” yazın. Elementor Düzenleyicisi’nde açmak için Ekle düğmesini tıklayın. Bir altbilgi şablonu bulamazsanız, farenizi aşağı kaydırın. Altbilgi Kiti Şablonu Dijital Ajansı site logoları, e -posta abonelik formları ve sosyal medya simgelerinden oluşur. Yukarıdaki başlık şablonunda yaptığınız gibi varsayılan site logosunu değiştirin. Ardından, sosyal medya simgesi URL’sini düzenleyin. Bunu yapmak için, düzenleme moduna dönüştürmek için simge listesi widget’ını tıklayın. Sol paneldeki her sosyal medya platformunun URL’sini ekleyin. Düzenleme modunu değiştirmek ve ayarları ayarlamak için Form Widget’ı 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 edeceğiniz hakkında daha fazla bilgi edinmek için bu yayını okuyabilirsiniz. Altbilgi şablonunuzu yayınlamak için yayın düğmesine tıklayın ve görüntüleme koşullarını ayarlamak için Koşul Ekle düğmesini tıklayın. Tıpkı bir başlık gibi, altbilgi şablonunuz da varsayılan olarak tüm sitelere uygulanır. Altbilgi şablonunuzu belirli bir sayfaya uygulamak veya yayınlama menüsünden sayfayı veya (yayın) seçin ve Kaydet düğmesini tıklayın ve yayınlayın. 404 Sayfa Sayfa 404, Açık Şablonlar -> Tema Oluşturucu. Tema Maker ekranında, sol paneldeki 404 Hata sekmesini açın ve yeni eklenen düğmesini tıklayın. Şablon kitaplığındaki blok sekmesinin altındaki “Dijital Ajans” i yazın. Elementor Düzenleyicisi’nde açmak için Ekle düğmesini tıklayın. Yayınla düğmesini tıklayın ve görüntüleme koşulunu ayarlayın. Sayfa 404’ü seçtiğinizden emin olun ve Kaydet ve Yayınla düğmesini tıklayın. Tek yazı şablonu şablonlara gider -> tek bir yazı şablonu oluşturmak için tema oluşturucu. Tema Maker ekranında, sol paneldeki tek gönderi sekmesini açın ve yeni Ekle düğmesini tıklayın. Şablonun kütüphane penceresindeki blok sekmesinin altına, dijital ajans şablon kitinden tek bir posta şablonu bulmak için arama kutusuna “Dijital Ajans” yazın. Elementor Düzenleyicisi’nde açmak için Ekle düğmesini tıklayın. Yayınla düğmesini tıklayın ve görüntüleme koşulunu ayarlayın. Varsayılan olarak, bu şablon tüm web sitelerine uygulanır. Bu aynı zamanda yeni bir blog yazısı yazdığınızda, bu tek yazı şablonuyla yeni blog yayınlarının yayınlanacağı anlamına gelir. Herhangi bir nedenden dolayı, belirli bir kategori için tek bir yazı şablonu uygulamak istiyorsanız, S Ave & Close düğmesini tıklamadan önce gerilme menüsünün kategorisini seçin. Haber sayfamız, web sitenizdeki en son blog yayınlarını görüntülemek için haber sayfasını kullanacaktır. İsterseniz bu sayfa için herhangi bir adı kullanabilirsiniz. “Blog”, örneğin. Bu sayfayı oluşturmak için şablonları açın -> Tema Oluşturucu. Sol paneldeki Arşiv sekmesini açın ve yeni eklenen düğmesini tıklayın. Blok sekmesinin altına, dijital ajans şablonu kiti dosyasını bulmak için arama kutusuna “Dijital Ajans” i yazın. Elementor Düzenleyicisi’nde açmak için Ekle düğmesini tıklayın. Yayınla düğmesini tıklayın ve görüntüleme koşulunu ayarlayın. Görünüm koşullarını ayarlayarak bu sayfada görünen arşiv türünü kontrol edebilirsiniz. Örneğin, yalnızca post arşivini görüntülemek istiyorsanız, ekranın durumunu arşive ayarlayabilirsiniz. Ve Kaydet ve Kapat düğmesini tıklayın. Dikkat ederseniz, her bir şablon sayfası kiti şablonu dijital ajansının sol alt köşede bir zarf simgesi vardır. Bu simge, açılır kit şablonunu görüntülemek için kullanılır. Popup’ın kendisi potansiyel müşteri verilerinizi toplamayı amaçlamaktadır. Bu açılır pencereye ihtiyacınız yoksa, her sayfa şablonundaki zarf simgesini silebilirsiniz. Tersine, açılır pencere kullanmak istiyorsanız, önce açılır pencereyi yapabilirsiniz.Bunu yapmak için şablonu açın -> açılır.Yeni Ekle düğmesini tıklayın, açılır pencerenizi adlandırın ve Şablon Oluştur düğmesini tıklayın. Açılır sekmesinin altına, dijital ajans şablonunun şablonunu bulmak için arama kutusuna “Dijital Ajans” yazın.Elementor Düzenleyicisi’nde açmak için Ekle düğmesini tıklayın. Yayın düğmesini tıklayın.Görünen açılır pencerede, tetiği ayarlamak için bir sonraki düğmeye tıklayın. Pop -up’ı görüntülemek için tıklarken tetiği kullanacağız, böylece Kaydet ve Kapat’ı tıklatıp tıklatırken seçeneği etkinleştireceğiz. Pop -up’ınız kullanıma hazır.Ardından, oluşturduğunuz sayfalardan birini (ana sayfa, sayfa hakkında, sayfalar, hizmet sayfaları veya istemci sayfaları) Elementor ile düzenleyin ve düzenleme moduna dönüştürmek için zarf simgesini tıklayın.Bağlantı bölümünün altındaki İngilizce Anahtar simgesini tıklayın ve yeni oluşturduğunuz ortaya çıkışı seçin. Sayfaları güncelleyin. Pop -up’ı görüntülemek istediğiniz başka bir sayfadaki adımları tekrarlayın. Mutlu! Web sitenizi yeni oluşturdunuz. Elementor’un alt çizgisi, WordPress ile bir web sitesi oluşturmak için iyi bir sayfa üreticisidir. Ücretsiz olarak kullanabilmenize rağmen, Pro sürümü kullanarak alacağınız birçok avantaj vardır. Elementor’un Pro sürümü, kodlamadan bir WordPress teması oluşturmanıza izin veren bir tema üreticisi, ek eklentiler yüklemeden pop -up yapmak için bir pop -up üreticisi ve diğer birçok özellik ile birlikte gelir. Pro sürümü ayrıca daha fazla widget ve şablona erişim sağlar. WordPress temasının özel bir bölümünün nasıl oluşturulacağı hakkında daha ayrıntılı talimatlar yazdık. Daha fazla bilgi edinmek için aşağıdaki makaleyi ziyaret edebilirsiniz. Elementor ile WordPress’te özel bir başlık nasıl yapılır Elementor ile WordPress’te özel bir altbilgi nasıl yapılır Elementor ile WordPress’te özel bir tek yazı şablonu nasıl oluşturulur Elementor ile WordPress’te özel bir sayfa 404 nasıl oluşturulur Elementor için tamamen yeniyseniz, yazdığımız Elementor için yeni başlayan kılavuzunu okuyabilirsiniz.
