WordPress'de Sıfırdan Tema Yapımı! (Elementor)

'Chan

Uzman üye
1 Nis 2020
1,801
1,458
Shibuya
logo.png






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.






5aE7rL.png






ezit6jm.png




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.





8vs75gf.png





5aE7rL.png





ip3kro4.png





5aE7rL.png






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.




d9lakwc.png





5aE7rL.png





ccfurf3.png





5aE7rL.png






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.




ln4iydh.png





5aE7rL.png






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.




nr0ssew.png





5aE7rL.png





knrvqas.png





5aE7rL.png






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.




m8c32am.png





5aE7rL.png





ugp7219.png





5aE7rL.png





c8ych03.png





5aE7rL.png






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.




gzznlkb.png





5aE7rL.png





r9ylf6k.png





5aE7rL.png






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.




m1e22wk.png





5aE7rL.png





7obkl96.png





5aE7rL.png





7vvp4z3.png





5aE7rL.png





9202czh.png





5aE7rL.png






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.




9h7f49i.png





5aE7rL.png





k7dhe3a.png





5aE7rL.png





hdc3mzb.png





5aE7rL.png






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.




rgguazb.png





5aE7rL.png





fchtuvv.png





5aE7rL.png






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.




afkxnz9.png





5aE7rL.png





gfjspxd.png





5aE7rL.png





9je0egh.png





5aE7rL.png






11. Adım: Header oluşturma işlemimiz, başarıyla "çok şükür" bitti. Şimdi "panoya çık" diyoruz.




bdza6kr.png





5aE7rL.png






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)




q5zt5ih.png





5aE7rL.png





n3vugf9.png





5aE7rL.png






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.




19sh7p7.png





5aE7rL.png





6n4q4q0.png





5aE7rL.png






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)




qegdeua.png





5aE7rL.png





67bs6da.gif





5aE7rL.png





1b6juot.gif





5aE7rL.png





7ghfh17.gif





5aE7rL.png






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.




czoyowl.png





5aE7rL.png






16. Adım: Ben daha fazla düzenleme yapmak istemiyorum. Bu nedenden dolayı yaptığım işlemleri kaydederek, panoya çık diyorum.




ksqprie.png





5aE7rL.png






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.




nop20q7.png





5aE7rL.png





ipn0fpe.png





5aE7rL.png







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.





5aE7rL.png



Temanın son hali







5aE7rL.png





n9ie9f0.png





İyi forumlar dilerim.
 

Kodomarso

Uzman üye
3 Tem 2020
1,041
797
Macintosh
Ellinize, emeğinize sağlık hocam. Görseller ve videolu sunum, anlatımınıza ayrı bir renk katmış, tekrardan elinize sağlık. 😊
 

TOZQOPARAN

Uzman üye
3 Nis 2021
1,258
678
Eski Anka Underground Tim



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.






5aE7rL.png






ezit6jm.png




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.





8vs75gf.png





5aE7rL.png





ip3kro4.png





5aE7rL.png






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.




d9lakwc.png





5aE7rL.png





ccfurf3.png





5aE7rL.png






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.




ln4iydh.png





5aE7rL.png






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.




nr0ssew.png





5aE7rL.png





knrvqas.png





5aE7rL.png






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.




m8c32am.png





5aE7rL.png





ugp7219.png





5aE7rL.png





c8ych03.png





5aE7rL.png






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.




gzznlkb.png





5aE7rL.png





r9ylf6k.png





5aE7rL.png






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.




m1e22wk.png





5aE7rL.png





7obkl96.png





5aE7rL.png





7vvp4z3.png





5aE7rL.png





9202czh.png





5aE7rL.png






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.




9h7f49i.png





5aE7rL.png





k7dhe3a.png





5aE7rL.png





hdc3mzb.png





5aE7rL.png






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.




rgguazb.png





5aE7rL.png





fchtuvv.png





5aE7rL.png






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.




afkxnz9.png





5aE7rL.png





gfjspxd.png





5aE7rL.png





9je0egh.png





5aE7rL.png






11. Adım: Header oluşturma işlemimiz, başarıyla "çok şükür" bitti. Şimdi "panoya çık" diyoruz.




bdza6kr.png





5aE7rL.png






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)




q5zt5ih.png





5aE7rL.png





n3vugf9.png





5aE7rL.png






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.




19sh7p7.png





5aE7rL.png





6n4q4q0.png





5aE7rL.png






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)




qegdeua.png





5aE7rL.png





67bs6da.gif





5aE7rL.png





1b6juot.gif





5aE7rL.png





7ghfh17.gif





5aE7rL.png






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.




czoyowl.png





5aE7rL.png






16. Adım: Ben daha fazla düzenleme yapmak istemiyorum. Bu nedenden dolayı yaptığım işlemleri kaydederek, panoya çık diyorum.




ksqprie.png





5aE7rL.png






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.




nop20q7.png





5aE7rL.png





ipn0fpe.png





5aE7rL.png







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.





5aE7rL.png



Temanın son hali







5aE7rL.png





n9ie9f0.png





İyi forumlar dilerim.
Eline sağlık güzel insan, çok güzel konu
 

UZAY 52

Uzman üye
14 Ağu 2021
1,299
842
Ddos
logo.png






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.






5aE7rL.png






ezit6jm.png




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.





8vs75gf.png





5aE7rL.png





ip3kro4.png





5aE7rL.png






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.




d9lakwc.png





5aE7rL.png





ccfurf3.png





5aE7rL.png






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.




ln4iydh.png





5aE7rL.png






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.




nr0ssew.png





5aE7rL.png





knrvqas.png





5aE7rL.png






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.




m8c32am.png





5aE7rL.png





ugp7219.png





5aE7rL.png





c8ych03.png





5aE7rL.png






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.




gzznlkb.png





5aE7rL.png





r9ylf6k.png





5aE7rL.png






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.




m1e22wk.png





5aE7rL.png





7obkl96.png





5aE7rL.png





7vvp4z3.png





5aE7rL.png





9202czh.png





5aE7rL.png






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.




9h7f49i.png





5aE7rL.png





k7dhe3a.png





5aE7rL.png





hdc3mzb.png





5aE7rL.png






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.




rgguazb.png





5aE7rL.png





fchtuvv.png





5aE7rL.png






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.




afkxnz9.png





5aE7rL.png





gfjspxd.png





5aE7rL.png





9je0egh.png





5aE7rL.png






11. Adım: Header oluşturma işlemimiz, başarıyla "çok şükür" bitti. Şimdi "panoya çık" diyoruz.




bdza6kr.png





5aE7rL.png






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)




q5zt5ih.png





5aE7rL.png





n3vugf9.png





5aE7rL.png






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.




19sh7p7.png





5aE7rL.png





6n4q4q0.png





5aE7rL.png






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)




qegdeua.png





5aE7rL.png





67bs6da.gif





5aE7rL.png





1b6juot.gif





5aE7rL.png





7ghfh17.gif





5aE7rL.png






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.




czoyowl.png





5aE7rL.png






16. Adım: Ben daha fazla düzenleme yapmak istemiyorum. Bu nedenden dolayı yaptığım işlemleri kaydederek, panoya çık diyorum.




ksqprie.png





5aE7rL.png






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.




nop20q7.png





5aE7rL.png





ipn0fpe.png





5aE7rL.png







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.





5aE7rL.png



Temanın son hali







5aE7rL.png





n9ie9f0.png





İyi forumlar dilerim.
Elinize sağlık
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.