Elementor İle Web Sitesi Yapılır mı?
Direkt olarak bu soru ile beraber başlamayacaktım ama ilk önce bir özet geçmek istedim. Elementor, WordPress altyapısı içerisinde "eklenti" olarak kullanılan kolay, hızlı ve kısmen kod kullanmadan (%70-80) web sitesi oluşturabileceğiniz bir eklentidir. Ayrıca Elementor sayesinde oluşturduğunuz "benzersiz" temalarınızı satışa da çıkarabilirsiniz. Bazı kişiler "kardeşim, eklenti ile yapılan tema satılır mı?" diyebilirim ama evet,satılıyor. Webmaster forumlarına girerek bakabilirsiniz. Yukarıda söylediğim kullanımı kolay cümlesini biraz açayım; Elementor eklentisini web sitenize kurduktan sonra yeni bir sayfa oluşturuyorsunuz, oluşturduğunuz sayfada "elementor ile düzenle" gibisinden bir seçenek çıkıyor.
Bu seçeneğe tıkladıktan sonra sayfamız önizleme gibisinden açılıyor. Sol tarafta ise Elementor içerisinde hazır olarak gelen makale, resim slider'i, yazı alanı, kategori alanı, HTML kod alanı, CSS kod alanı ve daha birçok hazır şablonlar yer alıyor. Bu arada şablon demişken, Elementor eklentisi içerisinde hazır olarak da temalar geliyor, onları direkt olarak "demo import" eder gibi ediyoruz ve üzerinde düzenlemeleri kolayca yapıyoruz.
Elementor İle Web Sitesi Nasıl Yapılır?
Yukarıdaki açıklamadan sonra bir eklenti ile web site yapmanın mümkün olmadığını düşünenlerin olduğunu varsayıyorum. Bu sebepten dolayı 3-5 bir şeyden bahsederek konuya giriş yapacağım. Bu konuda WordPress altyapısını sitemize kurduktan sonra Elementor'u yüklediğimizi varsayarak anlatımlar yapılmaktadır. Eklenti kurulumunu öğrenmek için Youtube veya Google'a "WordPress'de eklenti nasıl kurulur" şeklinde arama yapabilirsiniz. Ben Elementor'un "PRO" sürümünü kullanacağım. Ne yani, ücretli mi? Ne yazık ki öyle. Free sürümüde bulunuyor ama hazır kullanacağınız alanlar, temalar vs. Çok az. Bu nedenden dolayı "PRO" sürümünü kullanıyoruz. Web sitenize virüs bulaştırabileceğinden ve açıklara yol açabileceğinden nulled tavsiye etmiyorum ama kullanacak arkadaşlar Google'dan bulabilir.
1. Adım: Eklentimizi yükledikten ve etkinleştirdikten sonra sayfalar >> yeni ekle alanına gelerek ana sayfa olarak kullanacağımız sayfamızı oluşturuyoruz ve sağ tarafta bulunan "şablon" alanından "elementor tam genişlik" seçeneğini seçiyoruz. Daha sonra sayfamızı "herkese açık" olarak yayımlıyoruz. Ana sayfa şeklinde adlandırmamızın nedeni her sayfanın birbirine karışmaması ve düzenli çalışmak. Ben THT blog tarzı bir web site oluşturmak istiyorum. Bu arada aslında bu adımı anlatmayarak, direkt olarak diğer adımlara geçecektim ama bilmeyenlerde olabilir diyerek bu basit adımlarıda anlatmaya karar verdim.
2. Adım: WordPress panelimize geri dönüyoruz ve ayarlar >> okuma bölümüne giriyoruz. Ana sayfa olarak oluşturduğumuz sayfayı seçerek değişiklikleri kaydediyoruz. Yazı sayfasını seçme bölümünden seçim yapmayınız, select olarak kalsın.
3. Adım: Bu işlemleri yaptıktan sonra "Hello Elementor" isimli temayı sitemize kuruyoruz. Web sitemizi bu tema üzerinden oluşturacağımızdan dolayı yeni bir tema ekleyerek onu aktifleştirdik.
4. Adım: Şablonlar >> Yeni alanına gelerek bir adet header ekliyoruz. (Görsellere bakınız) Baştan sona doğru ilerleyeceğimiz sebebiyle ilk header kısmını oluşturacağız denebilir. Ayrıca Header'a bir adet isim vermemiz gerekiyor ben direkt olarak "header" yazıyorum. Daha sonra "şablon oluştur" butonuna basıyorum.
5. Adım: Yeni açılan "kütüphane" ekranından direkt olarak işlem yapabiliriz ama ben sıfırdan yapmayı tercih ediyorum. Açılan kütüphane ekranını kapatarak işlemimize başlıyoruz. Ben heading alanında 2 ayrı alan bulunmasını ve sol tarafta logomuzun yer almasını istiyorum bu nedenle widget alanına tıklayarak 2. Seçeneği ekliyorum. Daha sonra başlık ekleyeceğim için sol taraftan başlığı seçerek sol tarafta bulunan alana sürükleyerek bırakıyorum. (Bu işlemleri yapmadan önce veya şu an normal WordPress'in "özelleştir" bölümüne girerek 1 adet site logosunu ayarlamanızı tavsiye ederim.) Bu arada aşağıdaki resimde yazdığı gibi bu işlemler sizin hazırlayacağınız web siteye göre değişiklik gösterir. Bu nedenden dolayı tüm konuyu okuduktan sonra tema yapımına başlamanızı tavsiye ederim.
6. Adım: Aşağıdaki resimden de anlayacağınız üzere tek renk olmasından vazgeçerek geçişli bir renk yapacağım. Bunun için eklediğimiz widget'de 2 ayrı alan olduğu için sağ ve sol üst köşede ayrı alanlar bulunuyor. İlk sol tarafta düzenleme yapacağımdan ona tıklayarak "Biçim" alanına geliyorum ve Gradyan'ı seçerek, renk kodlarımı veriyorum. Benim kullandığım renklerden dolayı pek belli olmuyor geçişli olduğu ama siz daha basit renkler kullanırsanız belli olacaktır.
7. Adım: Başlığımızın ne olduğuna karar vererek onu ve metin boyutumuzu içerik alanından ayarlıyoruz. Daha sonra biçim alanından metnimizin rengini belirliyoruz. Gelişmiş alanından ise yazımızı sağa veya solo yaslayabiliyoruz. Ben uygun bir konum ayarlıyorum. (Mavi ile işaretlediğim alanın işaretini kaldırmazsanız, yazınızla beraber otomatik o alan büyüyecektir.) Bu arada 4. Resimde göreceğiniz gibi "ögeyi incele" yaparak, örnek alacağınız sitenin renklerini öğrenebilirsiniz.
8. Adım: Header alanımızın sağ üst köşesinde boş alanımız kalmıştı. (Ben buraya siber güvenlik yazacakken vazgeçerek arama butonu koymayı planlamıştım.) Bu alana bir adet arama bölümü eklemek için "+" simgesine tıklayarak, sol taraftan "search" şeklinde arama yapıyorum ve sürükleyerek alanıma ekliyorum. 3. Resimde gördüğünüz gibi önceki yerlerde yaptığımız arka plan rengini ayarlamayı yeniden tekrarlıyoruz. Google'da "Dark gradient" şeklinde arama yaparak geçişli renkler bulabilirsiniz.
9. Adım: Ben sol tarafa logo ekleyeceğim için yine bir ikili widget oluşturuyorum. (Oluşturma aşaması önceki ile aynı bu sebepten görsel koymayacağım) Daha sonra sol tarafta bulunan alandan "site logo" alanını sürükleyerek ekleyeceğim alanın üzerine getiriyorum. Otomatik olarak site logomuz ekleniyor. (Bu hoş durmadı. Bu nedenden dolayı %90 değiştiririm konu sonlarına doğru) 2. Resimde gördüğünüz gibi bir adette oraya menü ekledim. Bunu sol tarafta bulunan "nav menu" kısmını sürükleyerek alanıma attım ve o şekilde yaptım.
10. Adım: Aşağıdaki resimlerden anlayacağınız gibi biraz fazla işlem yaptım. Öncelikle yukarıda bulunan yazının üst kısmına tıklayarak, sayfanın en yukarısından biraz aşağı indirdim. (1. Resim) Sonra logomun üstüne tıklayarak onu da yukarı çekerek konumunu ayarladım.(2. resim.) En son menümüzün üstüne tıklayarak, gelişmiş bölümünden ve içerik alanından menümüzün arasını açarak, başlığımız ile arasını ayarladım. Buna da 3. Resimden bakabilirsiniz.
11. Adım: Header oluşturma işlemimiz, başarıyla "çok şükür" bitti. Şimdi "panoya çık" diyoruz.
12. Adım: WordPress panelimize geliyoruz ve şablonlar "theme builder" alanına giriyoruz. Aşağıdaki görselde de göreceğiniz üzere oluşturduğumuz header karşımızda duruyor. Dilersek, daha sonra oluşturacağımız temalarımızda kullanmak için header'ın üzerine gelerek "şablonu dışarı aktar" diyebiliriz. Ben dışarı aktarmadan işlemlerimize devam etmek istiyorum çünkü 4-5 saattir uğraşıyorum. Sayfalar alanına giriyoruz ve daha önce oluşturduğumuz ana sayfamızın içerisine giriyoruz, elementor ile düzenle butonuna basıyoruz. (2. Resim)
13. Adım: Web sitemizin header bölümünü oluşturduk. Şimdi geri kalan kısımlarına geldik. Ben widget alanından yine 2 ayrı sütunlu seçeneği seçiyorum ve sol tarafa bir adet slider (Resim döngüsü) ekliyorum.
14. Adım: Slider'ın sağ tarafına "kategoriler" bölümü eklemek istiyorum ve her kategori için ayrı bir icon eklemek istiyorum. Bu alana 1 adet görseli ve başlığı sürükleyerek aktarıyoruz. İlk olarak görseli atıyoruz, altına da başlığı koyuyoruz. (1. Resim) Daha sonra eklediğimiz 1 adet görsele sağ tık yaparak "çoğalt" yazısına basıyoruz. Aynı işlemi başlık için yapıyoruz. . (2. Resim) Daha sonra sütünün yanında bulunan alana sağ tık yaparak, sütundan 3 adet kopyalıyoruz ve çoğalttığımız resimleri teker teker değiştiriyoruz. (3. Resim)
15. Adım: Genel olarak mantığını anlamışsınızdır. Şimdi Widget alanından 2 sütün ekliyorum ve sol tarafa yazılarımızın olduğu bir alan, sağ tarafa ise Facebook sayfamızdan içerikleri çekerek web sitemizde gösteren bir öğe ekliyorum. Dilerseniz ayarlardan kaç adet yazı görüneceğini, kaç adet paylaşım görüneceğini, kategorilerin hangi renk olacağını vs. Ayarlayabiliyorsunuz.
16. Adım: Ben daha fazla düzenleme yapmak istemiyorum. Bu nedenden dolayı yaptığım işlemleri kaydederek, panoya çık diyorum.
17. Adım: Merak etmeyin, bu son işlemimiz. Footer alanını oluşturmak için şablonlar >> yeni bölümüne giriyoruz ve footer'a tıklayarak, yeni diyoruz. Ben ismini footer olarak kaydediyorum ve "şablon oluştur" butonuna tıklıyorum. Önümüze boş bir sayfa geliyor ve widgets alanından 3 sütunlu bir şey seçiyorum. Daha sonra sol alandan eklemek istediklerimi seçiyorum. Sürükleyerek alanıma taşıyarak bırakıyorum. Ben Başlık, görsel, metin, Google haritalar, Twitter ekledim ve sosyal medya hesapları için takip edin butonu koydum. Yaptığınız işlemler bittikten sonra "güncelleyin ve "panoya çık" butonuna tıklayınız. Otomatik olarak ana sayfamızda oluşturduğumuz footer yer bulacaktır.
Konumuz burada sona eriyor. Bu konuda Elementor eklentisini kullanarak "sıfırdan" bir tema oluşturduk. Yapacağınız ve yapılması gerekenleri anlattığımı düşünüyorum ama konu altından sorunuz veya elentilerinizi bekliyorum. Aşağıdaki GİF'de gördüğünüz gibi temamız gayet güzel görünüyor. Aslında önce bir tema tasarımı yaparak, onu yapsaydım daha güzel bir tema ortaya çıkabilirdi ama tamamen anlatım konusu olduğundan dolayı anlatıma daha çok önem vermek istedim.
Temanın son hali
İyi forumlar dilerim.