İnternet sitesi nasıl kurulur? Site açmak çok kolay! Resimli anlatım

Nasıl yapılır kategorisinin ikinci seri ile karşınızdayım. Daha önce sizlere Blog kurmasını öğretmiştim. Şimdi ise sizlere detaylı ve en kolay şekilde internet sitesi nasıl kurulur konusunu anlatıyor olacağım. Anlatımı oldukça basit olan bu sunumda hayalinizdeki bir siteyi en kolay nasıl açabileceğinizi öğreneceksiniz.

Şu anda buna benzer bir anlatımın olmadığını bilmenizi isterim ki sizlere özel bir terim açıklıyor olacağım “Visual Composer”. Bu terim (eklenti) sayesinde açamayacağınız site türü kalmayacak. Makaleyi baştan sona okuyunca, profesyonel ve görsel şölene sahip bir siteyi çok kısa sürede kurmasını öğreneceksiniz.

Blog tarzından farklı olarak bu site kurma çalışmasında biraz masraf yapıyor olacağız. Normalde bir tasarımcıya vereceğiniz 1000+ liralık ücreti göz önünde bulundurunca aslında burada yapacağımız harcama çok da göze batacak cinsten değil. Harcama yapacağımız önemli başlıklara göz atacak olursak:

Yukarıda gerekli olan harcamaları yaptıktan sonra, sürekli olarak güncellenen bir alt yapıda, güncellenen bir temaya sahip olabiliriz.

Alan adı ve hostingi daha önce de bildiğiniz üzere zaten Godaddy üzerinden alıyoruz. (Diğer pahalı firmaları da seçebilirsiniz) Tek taş ile iki kuş vurduktan sonra da son olarak WordPress kurulumunu gerçekleştirip, BeTheme ile hazır taslaklar üzerinde çalışıyor olacağız.

BeTheme nedir?

Bünyesinde Visual Composer ve birçok hazır taslağı bulunduran profesyonel WordPress temasıdır ve hayalinizdeki siteye kısa zamanda sahip olmanız için tasarlanmıştır. Sürükle-bırak mantığını ile çalışan bu temada kategorisel olarak şu anda 210+ tane profesyonel taslak bulunmakta. Diğer bir deyişle hayalinizdeki siteyi buradaki hazır taslaklara benzeterek ya da bire bir olarak kullanarak kurabilirsiniz.

Not: WordPress alt yapısında daha önce anlatılmamış bir eklentiyi sizlere sunuyor olacağım. Bu sunum yeni olduğu için dikkatli bir şekilde makaleyi okuyunuz. Eğer ki her tarz- abartmıyorum, her türlü siteyi kurmak ve yönetmek istiyorsanız, bende kalın :)

Site kurma aşamasındaki özet adımlar:

  • Alan adını ve hosting hizmetini Godaddy firmasından satın aldık.
  • CPanel kurduk ve kurulum sonrasında WordPress’i bulduk.
  • WordPress kurulumunu basit bir şekilde gerçekleştirdik ve daha önce burada tavsiye ettiğim eklentileri de yükledik.
  • Zorunlu: BeTheme temasını satın aldık… Lisanslı aldık. Para verdik yani… İnternetten null olarak indirmedik demek istiyorum burada.
  • Temayı kurduktan sonra temanın tavsiye ettiği diğer eklentileri de kurduk (Bu özel eklentiler normalde ücretlidir ancak “extended” lisanstan ötürü; tema yapımcıları bu eklentilere zaten para verdiği için, sizin de ek bir ödeme yapmanıza gerek yok.)
  • Tema yönetim panelinde tek tık ile site kurma bölümüne gelip 210+ site şeklinden bir tanesini seçtik ve kurulumu gerçekleştirdik.

Sitemizin sayfasını yenilediğimizde görsel değişikliği hemen fark edebileceksiniz. Sıra şimdi site üzerinde değişiklik yapmaya geldi. Kafanıza yatan bu taslağın üzerinde oynama yapabilmek için kullanacağımız sitemin adına- daha önce de bahsettiğim üzere, Visual Composer diyoruz. Sizlere bu eklentiyi de detaylı bir şekilde anlatıyor olacağım.


Hosting ve alan adı satın alma

1.Sitemizi kurma adına atacağımız ilk adım alan adını belirledikten sonra hosting seçimini gerçekleştirmek olacaktır. Yeni bir site kuracağımız için “Temel” paketi satın almak en mantıklı adım olacak. Zaten anında sitemize binlerce kişi çekemeyeceğimiz için 25.000 ziyaretçiye sahip bir paket uzun süre yeterli olacaktır.

blog acerken paket secimi

Sepete ekle adımını gerçekleştirdikten sonra ücretsiz alanımızı arayacağımız bir bölüm çıkacak. Bu alanda kayıt ettirmek istediğiniz alanı girin ve “Arama” butonuna tıklayın. Buraya firma, proje vs gibi bir alan adı yazabilirsiniz. Ayrıca .com, .co, .net gibi birçok ücretsiz seçeneğin olduğunu unutmayın.

3. Eğer alan adımız uygunsa, bu alan adını kayıt ettirebileceğiniz ve bir sonraki adıma geçebileceğinizin haberi sizlere şu şekilde verilecektir.

4. Artık alan adımızı da beğendimize göre bir sonraki adıma geçmek için “seçin ve devam edine” tıklamamız gerekecek. Karşımıza sepete neler eklediğimiz çıkacak. Burada son kontrolleri yaptıktan sonra “hesap oluştur” butonuna tıklıyoruz.

Fiyat güncellemesi - 2017.08.30Godaddy paketlerde ve fiyatlarda kur dalgalanmasından dolayı güncellemeye gitti.

5. İlk defa Godaddy’ye üye olduğunuzu farz ediyorum ve bu adımda size ilk üyelik işlemleri hakkında bilgi veriyor olacağım.

Ödeme adımına geçtikten sonra karşımıza hemen aşağıdaki gibi bir pencere açılacak. Bu pencerede yeni “Yeni müşteriler” bölümündeki “Devam” tuşuna tıklıyoruz ve üyeliğimizi oluşturma adımına geçiyoruz.

6. Yeni bir üyelik açarken dikkat etmemiz gereken en önemli nokta herhangi bir şekilde Türkçe karakterler (Ç, İ, Ş, Ü, Ğ vs…) kullanmamak olacaktır. Sistem bu harfleri kabul etmiyor. Aşağıda gördüğünüz tüm alanları doldurduktan sonra hesap adımına geçiş yapıyoruz.

Bu noktada adres bilgilerini doğru girmemiz  gerekiyor.

7. Son adımda kredi kartı bilgilerimizi giriyoruz. Kafanızı “Godaddy güvenli mi?” gibi sorular kurcalamasın. Şu anda bu sitede 60 milyondan fazla alan adı var ve her saniye bu rakam artıyor. Onca müşterinin bir bildiği olsa gerek.

8. Kredi kartı kabul edilecek ve bir sonraki adımda sözleşmeyi kabul etmemiz gerekecek. Toplamda cebimizden çıkacak olan para 70₺. Bu fiyat ile 1 yıllık wordpress hosting hizmetine ve ücretsiz alan adına sahip olacağız.

TL-USD kurundaki dalgalanmalara göre bu fiyat değişiklik gösterebilir.

9. Son adımda ise Godaddy tarafımıza bir e-posta gönderiyor. İleride sorun yaşamamak adına bu e-postayı onaylamak zorundasınız. Eğer 2 gün içerisinde onay vermezseniz, hesabınız kapatılabiliyor. Eğer firma e-postayı gönderdiği halde, tarafınızda herhangi bir şey görünmüyorsa, panel üzerinden tekrar gönderim talep edebilirsiniz. Bazen ufak sorunlar yaşandığı oluyor elbette.

Şu ana kadar attığımız adımlarla yukarıda sizlere belirttiğim önemli üç unsur olan (Alan a, hosting kaydı ve içerik yönetim sistemi)nin sadece 2 tanesini gerçekleştirmiş olduk. Artık ilk iki hizmet hazır olduğuna göre panel yönetimine geçebilir ve WordPress kurulumunun alt yapısını panel üzerinden hazırlayabiliriz.

back to menu ↑

Websitesi nasıl kurulur? İşte takip etmeniz gereken adımlar

Ödeme adımlarını attık ve hesabımıza gelen e-postayı onayladık. Sistemin sitenizi görmesi, kendi içerisinde alan adını kayıt ettirmesi ve bunu panele yansıtması yarım saat kadar sürebilir. 

Süre zarfından sonra karşınıza bloğunuzu kurabileceğiniz yönerge sayfası çıkacak.

blog kurma asamalarina giris

“Siteye tıkla” butonun tıkladıktan sonra bloğunuzu nasıl açmak istediğinizi belirtmeniz gerekiyor. Biz yen kullanıcılar olarak “Yeni bir site oluşturuyorum”u seçmeliyiz.

godaddy blog kurma yönergeleri

Bu noktada ise hayata geçirmek istediğimiz alan adını panel üzerinden seçmemiz gerekiyor. Örnek site olarak ücretsiz olarak kayıt ettirdiğimiz ucretsizalanadim.com’a kurulumu gerçekleştirmek istiyoruz ve “ileri” butonuna tıklıyoruz.

hostinge alan adi ekleme

Her ne kadar Türkiye pazarına hizmet edecek olsak da aramızda belki İngilizce odaklı farklı projeler gerçekleştirecek arkadaşlar olacaktır. Eğer ki Türkiye ve Avrupa civarından kullanıcıları çekecekseniz, önerilen Avrupa sunucusunu seçin. Yok ben Amerika merkezli çalışacağım derseniz, Kuzey Amerika sunucusunda karar kılabilirsiniz.

Sunucu seçimi sonrasında ise WordPress yönetim bilgilerini belirlememiz gerekiyor. Godaddy panelinden ziyade bu panelde sitemizin yönetiminde kullanılacak. O nedenle daha güvenli bir şifre belirlememizde fayda var.

kurulum için kullanıcı bilgilerinin girilmesi

“Yükle” butonuna tıkladıktan sonra ise, WordPress 4. aşamaya geçiyor ve yükleme gerçekleşiyor. Gariptir ki bu adım yaklaşık olarak 5 dakika kadar sürebiliyor.

wordpress yüklenirkenki adımlar

Kurulum sonrasında “WordPress başarılı bir şekilde yüklendi” ibaresi karşımıza çıkacak. Hayırlı olsun!!!

basarili bir sekilde yüklenmiş blog

Şimdi ise işin biraz daha dikkat isteyen noktasına geldik. Artık Godaddy ile işimiz bitti ve WordPress yönetimine ilk adımı atıyoruz.

Burada yer alan yönergeleri takip ederek ne tarz alt yapıya sahip olmak istediğimizi belirlememiz gerekecek.

  • Web sitesi + Blog: İmkanlar dahilinde bir tanıtım sayfası ve blog arayüzü imkanı sunacak bizlere.
  • Sadece blog: Adından da anlaşıldığı gibi sadece yazı yazıp yayınlayacağımız bir sunum ile karşımıza çıkacak.
  • Online mağaza: WordPress ile e-ticaret sitesi de açabildiğimiz için Woocommerce eklentisi ile internetten satış yapabileceğimiz bir alt yapıyı bize sunacaktır.

Biz sadece yazı yazmak istiyoruz. O nedenle seçimimizi “Sadece blog” yönünde kullanmamız gerekecek.

blog kategorilerini belirleme

Yukarıdaki adımları tamamladıktan ve blog kategorimizi seçtikten sonra karşımıza WordPress sihirbazı çıkacak. Ancak burayı geçmenizi istiyorum çünkü tüm detayları ilerleyen noktalarda anlattım.

kurulum yonergelerinin takibi

Bu aşamada ise sistemle otomatik olarak gelen WordPress iletişim eklentisi içerisine entegre olacak kullanıcı bilgilerini girmemiz gerekiyor.

Bunu dilerseniz hemen aşağıdaki formdan, dilerseniz ileride ek olarak anlattığım Contact 7 formu ile gerçekleştirmeniz mümkün.

Kullanıcı bilgileri girişi

Dilerseniz bu alana soyal medya profillerini de ekleyebiliyorsunuz.

Artık nur topu gibi bir bloğumuz oldu. Dilerseniz alan adına direkt olarak gidebilir ve bloğunuzun son haline görebilirsiniz, ya da wp-admin yönetim paneline giriş yaparak hemen aşağıdaki düzenleme adımlarına geçiş sağlayabilirsiniz.

back to menu ↑

BeTheme’in satın alınması…

Tek tıkla 210’den fazla hazır şablonu kullanabileceğiniz bir alt yapısı olan BeTheme’i themeforest.net’ten satın almanız gerekmekte. Şu anda 59$ olan bu temayı satın aldığınızda ömür boyu güncelleme hakkına sahip olacaksınız.

Satın alma işlemiden sonra şu adımları teker teker atmanız gerekiyor:

  • WordPress temasını codecanyon’dan indirin.
  • WordPress yönetim paneli > Görünüm > Temalara yıklayın.
  • Satın aldığımız temayı yüklemek için buradan zip dosyasını seçiyoruz ve “Yükle” butonuna tıklıyoruz.
  • Kurulum gerçekleştikten sonra hemen aşağıdaki eklentilerin kurulması tavsiye edilecek….

Temamızı satın alıp kurduktan sonra karşımıza eklenti tavsiye çıkacaktır. Öncelikle bu eklentilerin hepsini kuruyoruz.

wordpress gerkeli eklenlentilerin betheme ile beraber kurulmasıı

Resimdeki eylemi gerçekleştirdikten sonra sitemize tüm eklentiler kurulmuş olacak ancak bu yeterli değil çünkü eklentilerin aktif edilmesi gerekli. Bunu yapmak için de yine…

wordpress eklentileri nasıl aktif hale getirilir.

Buradaki eylem gerçekleştirdik ve son olarak eklentilerin hepsi aktif hale geldi. Şimdi ise tema üzerinde demo çalışmalara göz atmak var.

Size daha önce verdiğim buradaki linkte demoların hepsini görebilirsiniz. Bir demo beğendik diyelim…

Ve turizm odaklı bir site kurmak istiyorum.

Bu site tamamen eğitim amaçlıdır. Aktif değildir.

Temayı ve eklentileri aktif hale getirdikten sonra sitemizin görüntüsüne bir göz atalım.

betheme klasik wordpress goruntusu

Şimdi ise demo arayışı içine giriyoruz. Gezi odaklı bir site düşünüyorum ve burada dikkat etmem gereken en önemli nokta görsel sadelik ve siteye sonradan eklenecek blog bölümü olacaktır. Bunların hepsini göz önünde bulundurup, güzel bir seçim yapıyorum. Bunu okurken siz de hemen buradaki siteye giderek demoların hepsine göz atabilirsiniz.

Buldum buldum…

210 tane hazır şablon arasında gözüme çarpan en güzel gezi rehber sitesi olarak “Tourist” şablonunu seçtim. Şimdi…

betheme turism temasi

Atmamız gereken diğer adımlar olacak. Şu ana kadar yaptıklarımız:

  • Tema kuruldu.
  • Eklentiler hazırlandı.
  • Site konseptine uygun olarak “Tourist” şablonu seçildi.

betheme demo kurulumu

Yönetim panelinden Görünüm > BeTheme Demo Data ya tıkladıktan sonra kuruluma bir adım daha yaklaşıyoruz.

betheme demo secimi

Sonra karşımıza hemen kurmak istediğimiz şablonlar çıkmakta. A’dan Z’ye sıralamaya sahip olan bu menüden “Tourist”i seçiyoruz.

Son olarak da “Import all attachments”ı seçip “Import demo data”ya tıklıyoruz…

betheme demo kurulum son asamasi

Bu işlem tüm dosyaları farklı yerlerden çekeceği için zaman alacaktır. O nedenle lütfen sabırlı davranın. Kurulum bittikten sonra lütfen ana sayfanızı yenileyin ve karşınıza yeni arayüz çıkacaktır.

betheme wordpress son hali

Her şey yolunda gidiyor ancak küçük bir eksiğimiz var. Sitemizde yer alan slider yok. Bunu da bir demodan çekmemiz gerekiyor. Bunu yapmak için ise:

  • İndirdiğimiz tema dosyasının içerisinde “Slider revolution demo” dosyasına tıklıyoruz.
  • Ardından “Demo” dosyasını açıyoruz.
  • Burada sitemize entegre etmek istediğimiz demoyu masa üstüne atıyoruz. Ben tema olarak “Tourist”i seçtiğim için almam gereken dosya da buradaki tourist dosyası olacaktır.

Dosyamız masa üstüne geldikten sonra sırası ile şu adımları atmamız gerekmekte.

Yönetim paneli > Slider Revolution > Import slider’a tıkladıktan sonra “Import slider”a tıklıyoruz ve bu işlemi de burada bitiriyoruz. Örneği hemen aşağıdan kontrol edebilirsiniz.

wordpress sitede slider ekleme

Bu adımı sonrasına ana sayfanızı yenileyin ve karşınızda sorunsuz ve sliderı olan bir site çıkacaktır.

Slider Revolution kullanması çok kolay bir eklentidir. Slider’ların üzerine gelerek resimlere ve yazılara tıklayabilir ve rahatlıkla oynama yapabilirsiniz. Bu konuya fazla değinmeyeceğim. Detaylı bir video bulabilirsem, sizlerle elbette paylaşırım ya da ilerleyen dönemlerde bu konu hakkında kendim bir video hazırlayabilirim.

Bunları da tamamladıktan sonra bir sorun daha çıkıyor karşımıza. Hazır şablonda yer alan bileşenlerin varlığı şu anki tema ile çakışmakta. Bu nedenle burada atmamız gereken adım; sitemizden bu bileşenlerin kaldırılması olacaktır.

Burada dikkat etmemiz gereken nokta bileşenlerin “Footer” kısmında olması. O nedenle çıkarmaların hepsini footer kısmında gerçekleştirmemiz gerek. Alt resimde 4 adet footer bulunmakta. Bunların hepsini bileşenlerde bulacağız ve gerekli adımları atacağız. Bunun için…

wordpress site kurarken karsilasilacak sorunlar

  • Yönetim paneli.
  • Görünüm.
  • Bileşenlere tıkladıktan sonra karşımıza şu pencere çıkacaktır.

wordpress footer duzenleme

Buradan sıra sıra tüm footerlera tıklayıp, bileşenleri teker teker kaldırmamız gerekmekte. Bu adımı da gerçekleştirdikten sonra ana sayfaya gelip f5 yapın ve sitemizin daha düzenli hali karşımıza çıkacaktır.

Elbette bu kısma eklemek istediğiniz daha güzel bileşenler varsa, mutlaka bunu da değerlendirmelisiniz. Ancak bunu zamana bırakabilir ve güzel içerikler üretmeye başlayınca bu konu hakkında daha iyi bir değerlendirme yapabilirsiniz.

back to menu ↑

WordPress | BeTheme genel ayarlar hakkında

Normal WordPress temalarından ayrı olarak BeTheme kendi özel yönetim panelini sunmakta. Bu panel sayesinde site üzerinde dilediğiniz gibi oynama yapabilirsiniz. Dikkat etmeniz gereken noktalar aslında çok basit. Şu anda bizi demo olarak yukarıda kurduğumuz sitenin ayarları idare edecektir ancak sitede yer alan İngilizce menüleri ve diğer ayarları düzenlememiz gerek.

Menü düzenleme konusunda detaylı bilgi almak isteyenler varsa lütfen daha önce yazdığım blog makalesinde menü bölümüne göz atsınlar.

Daha önce eleştiri geldi. Çok fazla bilgi aşılaması var. Hepsini bir anda alamıyoruz diye. O nedenle bazı yerleri atlamak zorunda kalıyorum. Alakalı makaleler yazdığım için gerekli yönlendirmeler o makalelere gerçekleştirilecektir.

BeTheme genel ayarlar ve tüm özellikleri. Sırası ile…

  • Global ayarlar: Site üzerindeki arayüz, logo ve özel sliderları düzenleyebileceğiniz yerdir.
  • Header: Sitenin üst başlık bölümündeki alanları düzenleyebilir ve menü tasarımı üzerinde oynayabilirsiniz.
  • Menü: Genel menü ayarlarını buradan gerçekleştirebilirsiniz. Tasarım üzerinde oynama yapamazsınız.
  • Sidebar: Sitede sağda ya da solda yer alan; bileşenlerin yerleştirildiği yan alanları oluşturabilirsiniz. BeTheme düz wordpress mantığı ile çalışmaz bu nedenle her bir alana özel sidebar atamanız gerekecektir.
  • Blog: Sitenizin blogunun görsel ayarlarını burada gerçekleştirip, yazı tarzları hakkında atamalar yapabilirsiniz. Paylaşım kutucukları vs koymak mümkün.
  • Pages: Klasik sayfalar üzerinde düzenlemeler yapabilirsiniz.
  • Footer: Bildiğiniz gibi yukarıda düzenleme yaptığımız alan. Bu alanda footer tarzını belirleyebilir ve telif hakkı yazıları yazabiliriz.
  • Responsive: Sitemizin telefonlarda ve tabletlerde de güzel görünmesi için kullanacağımız menüdür. Bu menüde herhangi bir değişik yapmanızı tavsiye etmiyorum.
  • SEO: Site Arama Motoru optimizasyonu ayarlarını yapmak için kullanacağımız menüdür. Burada düzenleme yaparken dikkatli olmanızda fayda var. Sayfa optimizasyonu ile site optimizasyonu genelde karıştırılıyor. Buradaki ayarlar sadece sitenizin genel ayarlarını oluşturacaktır. Sayfa ya da makale ayarları hakkında bir düzenleme yapamazsınız çünkü her bir sayfanın ya da makalenin kendine özel optimizasyonu olacaktır. Bunlara ek olarak sitenize Google analitik kodları yerleştirebilir ve sitenizin takibini kolay bir şekilde gerçekleştirebilirsiniz.
  • Social: Eğer sosyal sayfalarınız varsa buradan giriş yapabilirsiniz.
  • Colour: Site renkleri ile oynamanız mümkün. Hatta sitedeki her bir özel bölüm için renk ataması gerçekleştirebilirsiniz ki bu sitenin genel renk ruhunu bozacaktır. O nedenle tavsiye etmiyorum.
  • Fonts: Sitedeki yazı karakterlerini değiştirebilirsiniz ve kalınlık atayabilirsiniz. Yazı karakterlerin Türkçe dil desteklemediğini unutmayın. Bu nedenle karakter seçimi yaparken Ş, Ç, Ü vs… bunlara dikkat etin.
  • Translate: Sitede yer alan bazı alanların İngilizce’den Türkçe’ye çevrilmesi için kullanabileceğiniz yerdir. Buradaki çevirilerin mutlaka hepsini tamamlayın. “Portfolio” çevirisi yapmasanız da olur.
  • Custom CSS: Site görselleri ile özel olarak oynamak istiyorsanız, buradaya CSS kodlarını yerleştirebilirsiniz. Ayrıca Java Script de yerleştirmeniz mümkün. Bu tarz kodlar sitede yavaşlamaya neden olduğu için dikkatli kullanılmalı.
  • Backup – Reset: Tema ayarlarını baştan sona yedeklemenizi ya da resetlemenizi sağlar. Bu işlemi gerçekleştirirken birkaç yüz kat dikkatli olun. Her şeyi silebilirsiniz…

Temanın genel özelliklerini öğrendik. Eğer kafanıza takılan bir şeyler olursa, lütfen buradan ya da iletişim sayfasından bana yazın. Elimden geldiğince size yardımcı olmaya çalışırım.

back to menu ↑

Visual Composer nasıl kullanılır?

Sürükle bırak mantığına dayalı olarak hareket eden eklentilerden bir tanesi olan Visual Composer ile işleriniz ciddi anlamda çok kolay. Normalde kodlama ile yapacağınız tüm işlemleri sürükleyerek yapabiliyor ve site üzerinde çok kolay değişimler gerçekleştirebiliyorsunuz.

Şu anda sahip olduğumuz ana sayfaya bakalım. Gezi görünümlü olan bu sayfa üzerinde düzenleme yapmak için:

  • Sayfalar
  • Tüm sayfalar
  • “Home” yani ana sayfaya tıklıyoruz.

Karşımıza aşağıdaki gibi bir içerik düzenleme sayfası çıkacaktır.

wordpress visual composer sayfasi

Evet başta bu sistem size bir karışık gelebilir ancak hiç de öyle değil. Ana sayfaya bakıp buradaki girişleri karşılaştırınca çıkarım yapmak daha da kolaylaşacaktır.

Slider altında yer alan iki resme bakalım beraber…

visual composer ana sayfa duzenleme

Hemen çıkarım olarak bu resmin 1/2 dilimindeki “Hover Box” olduğunu anlayabiliriz. Diğer bir deyişle bu resimde bir değişim gerçekleştirmek istiyorsak, burada yer alan ayarları düzenlememiz gerekecektir.

Aynı şekilde bu uygula diğerleri için de geçerli.

Visual Composer’ın sürükle bırak olarak birçok özelliği bulunmakta. Bunlara ek olarak farklı eklentiler de kurabilir ve bu özellikleri daha da arttırabilirsiniz.
Tema özelliği olan Muffin Builder ile Visual composer aynı şey değildir. Site üzerinde oynama yaparken lütfen buna dikkat etin. Bizim temamız ana hatları ile Muffin builder ile oluşturulmuştur ancak bu builder Visual Composer içerisindeki basit bir eklentidir. Yani yapabilecekleriniz bu siteden çok daha fazlasıdır.
back to menu ↑

Visual Composer ile sayfa oluşturma…

Yeni sayfa ekleye tıkladıktan sonra sırası ile:

  • Backend editor.
  • Add element’e tıklıyoruz.

Burada karşımıza sayfaya ekleyebileceğimiz birçok seçenek çıkmakta. Bu seçeneklere göz atacak olursak…

visual composer elementleri

Elbette buradaki özelliklerin hepsini teker teker sizlere açıklayamam ancak burada dikkat etmemiz gereken nokta elementleri nasıl yerleştireceğimiz olacaktır. Bu ana mantığı anladıktan sonra dilediğimiz sayfayı oluşturmak mümkün olacaktır.

Hatta ve hatta hazır şablon üzerinde oynama yaparak çok fazla zahmet vermemenizi tavsiye ederim. En başından kurulum gerçekleştirip, şablon oluşturmak evet kolay ancak optimizasyon ayarları biraz vaktinizi alacaktır.

Dikkat edilecek noktalar (lütfen burayı atlamadan çok iyi okuyunuz):

  • Elementleri + işaretine tıklayarak ekleyebiliyoruz.
  • Elementleri tek tık ile eklemeden önce üzerinde oynama yapmamız gerek.
  • Veri girişini gerçekleştirmek için çok az İngilizce yardımı almanız gerekecektir. Google translate kullanabilirsiniz.

Sitede girdiğiniz elementlerin ne kadar yer kaplamasını belirlemek için hemen aşağıdaki düzenlemeye göz atın…

visual composer element buyuklugu

Burada örnek olarak ben sol tarafa “İletişim kutusu” koymak istiyorum. Hemen sol taraftaki arama kutusunda “Contact” kelimesini aradıktan sonra karşıma Contact Form 7 çıkıyor.

visual composer ile iletisim sayfasi yaratmak

Burada küçük bir sorun ile karşılaşıyorum. Yeni ıoluşturduğum sayfadaki iletişim kutusunun tam sayfa kaplaması çok gereksiz. Çünkü hemen sol tarafta Google haritası ve iletişim bilgilerini de sunmak istiyorum.

O nedenle sayfayı bu elementi ikili şekilde bölmem gerek. Bunu da yapabilmek için.

visual composer element bolme

Sayfa bölme sekmesinden 1/2 + 1/2 olacak şekilde seçim yapıyoruz. Eğer bu düzenleme 1/3 + 1/3 + 1/3 olsaydı, sayfamız 3 eşit parçaya ayrılacaktı.

Element mantığını da anladık. Geriye bir şey kalmadı demektir. Sitemize blog sayfası yerleştirmek!

back to menu ↑

Site üzerine Blog nasıl kurulur?

WordPress normalde blog içerik yönetimlerinden bir tanesidir. Ancak sizlere bu sunumda basit bir şekilde WordPress’i nasıl site kurma aracı olarak kullanabileceğimizi anlattım.

Elbette WordPress’i site için kullanabilir ve elbette site üzerine de blog sistemini ekleyebiliriz. Bu işlemleri gerçekleştirmek çok basit. Atacağımız birkaç kolay adımda blog sayfasını sitemize gömmüş olacağız.

Şu anda sitemizde yer alan “news” menüsünü kaldırıp oraya bir blog sayfası yerleştirmek istiyorum. Atmam gereken adımlar şu şekilde olacaktır:

  1. Yönetim paneli.
  2. Sayfalar.
  3. “News” sayfasına tıklıyoruz.

sitede blog sayfasi olusturmak

Başlıktaki ve linkteki “News” kelimelerini “Blog” olarak değiştiriyoruz ve güncellemeyi kayıt ediyoruz.

Önceki yazımda menü yönetiminden detaylıca bahsetmiştim. Güncelleme sonrasında ana sayfadaki “News” otomatikman “Blog” kelimesi ile değişecektir. Buraya kadar her şey harika. Bence öyle yani :)

Sitemizin ana sayfasından “Blog” sayfasına geçiş yapınca karşımıza bomboş bir sayfa çıkacak. Peki buraya yazılan yazıları nasıl entegre ederiz.

Şu anda sahip olduğumuz sistemin “Sürükle-Bırak” mantığı ile çalıştığını biliyoruz. Normalde blog alt yapısını site kurmak için kullandığımızı da biliyoruz. E o zaman?

Boş olan blog sayfasını blog görünümüne büründürmek için de bir şeyleri sürükleyip bırakmamız gerek değil mi? Bu düzenlemeleri yapmak için yine Yönetim paneli > Sayfalar > Blog sayfasına tıklıyoruz.

visual composer ile blog sayfasi olusturma

Buradan “Backend Editor”e tıklıyoruz ve element ekleme sayfasına geliyoruz.

Visual Composer ile sürükleyip bıraktığımız her şey bir elementti değil mi? O zaman burada yapmamız gereken sayfamıza bir blog elementi eklemek olacaktır.

visual composer blog eklemek

Elementi ekledikten sonra blogumuzun nasıl görünmesi gerektiğini soran bir menü çıkacak karşımıza.

wordpress blog gorunumu

Count: Blog sayfasında görünmesini istediğimiz yazı sayısı.

Category: Hangi kategorilerin bu blogda görünmesini istiyoruz.

Style: Blog görünüm tarzını belirleyebilirsiniz. Hangisi hoşunuza gidiyorsa, onu seçin. Tabi teker teker denemeniz gerekmekte. Benim hoşuma giden tarz “Timeline” tarzı.

 

wordpresste blog gorunumunu degistirmek

Burada küçük bir düzenleme daha yapmamız gerek. Sağ tarafta yer alan kategori, etiket bulutu ve arşivleri kaldırmak ya da buraya bir ekleme yapmak için “Blog”a çevirdiğimiz “News” bileşenini kullanmamız gerekecek. Bu bileşen için de Görünüm > Bileşenlere tıklamak ve dilediğimiz şeyi sürükle bırak ile “News” bileşeninin içerisine bırakmak yeterli olacaktır.
back to menu ↑

Toparlayacak olursak…

Bu yazımızda normalde blog alt yapısı olarak kullanılan WordPress’i site kurmak ve üzerine harika bir blog eklemek için kullandık. Basitleştirilmiş eklentiler sayesinde dakikalar içerisinde mükemmel görünümlü şablonlara sahip olabilecek ve site/blog üzerinde kolaylıkla düzenleme yapabileceksiniz.

Bu sunumda anlatım basit bir şekilde sizlere sunulmuştur ve genellikle blog kurulumu sırasındaki adımları tekrar anlatmaktan kaçınılmıştır. Bu konuda daha fazla detay almak isteyen okuyucular olursa, lütfen buradaki makaleye de göz atsınlar.

Site kurmayı gözünüzde büyütmeyin. Sizlere basit bir dille sunduğum bu adımlar teker teker atarsanız, profesyonellerin eline su dökebilirsiniz. Ancak kolaylığın üzerimize yüklediği tek şey ödemek zorunda kaldığımız bazı ücretler olacaktır.

Sitenize eklemek istediğiniz diğer özellikler eğer ücretli diğer bir eklenti gerektiriyorsa, masrafta bir artış söz konusu olabilir. Masraftan kısmak için kesinlikle paralı eklentileri internet üzerinden ücretsiz indirmeye çalışmayın!

2 Comments
  1. Visual compressor harika bir eklenti kendi sitem olan mumince.com da kullanıyorum çok faydasını görüyorum biraz kurcalayıp öğrendikten sonra harika işler çıkarabiliyor tavsiye ederim

  2. Mukemmel bir aciklama tutorial visual composer ile alakali internet te turkce icerik neredeyse yok tesekkurler

    Leave a reply

    İnceleCo