İşbir Op)k İnternet Sitesi Yapım Kılavuzu 2017

Transkript

1 İşbir Op)k İnternet Sitesi Yapım Kılavuzu 2017

2 Öncelikler size özel belirlenen internet sitesi adresi, kullanıcı adı ve şifre ile giriş yapabilirsiniz. Yukarıdaki ekran görüntüsünde User Name kısmına size tanımlanan Kullanıcı Adını yazmalı ve hemen alhndaki Password kısmına gene size tanımlanan şifre ile giriş yapabilirsiniz. Site yapımı çok kolay olup tamamen sürükle bırak sitemi ile çalışmaktadır.

3 Siteye giriş yaphktan sonra sol üst köşedeki sayfa oluşturucu menüsüne Hklayın. Bu kısma Hklayınca sağ tarla bir menü bar açılıyor. Bu menüde tasarımımızı oluşturmaya yarayacak içerikler bulunmak. Öncelikle açılan menüde TEMALAR sekmesine Hklıyoruz.

4 Açılan pencerede tasarımın ana şoblonunu şekillendirecek temalar bulunmakta Boş şablon Yardımcı içerikleri kullanarak kendi tasarımınızı oluşturabilirsiniz. Bu içeriğin alhnda programın bize sunduğu hazır tema şablonları bulunmakta. Bu hazır temalardan birini seçip sonrasında tema üzerinde kendi içeriklerinizi kullanarak kendinize özel tasarım yapabilirsiniz. İşbir OpBk Şablon 1 Bu hazır şablon üzerinde kendi içeriklerinizi kullanarak özel tasarım yapabiirsiniz. İşbir OpBk Şablon 2 Bu hazır şablon üzerinde kendi içeriklerinizi kullanarak özel tasarım yapabiirsiniz. Örnek olması için hazır tema şablonlarından 1. tasarım üzerinde anlahm yapacağız. Tasarımda oluşturacağımız temayı belirledikten sonra yapmamız gereken bu temayı şablon olarak kaydetmek bunun için;

5 Sağ üst köşedeki menüden ARAÇLAR kısmına Hklıyoruz. Açılan pencerede ŞABLONU KAYDET seçeneğini seçiyoruz ve Şablonumuza bir isim veriyoruz ÖR: DEMO OPTİK ve kaydediyoruz.

6 Tekrar Sağ üst köşedeki menüden TEMALAR kısmına Hkladığımızda açılan pencerede oluşturduğumuz temamızın ismini göreceğiz. İsminin hemen yanındaki DÜZENLE kısmına Hklayarak tasarımımızı oluşturmaya başlayabiliriz.

7 Temamızı seçip kaydezkten sonra sağ üst köşede içerik ekle kısmı cıkıyor. Bu kısma Hklayınca bir tablo açılıyor ve bu tablo içerisinde tasarımımızda kullanılacak içerik menüleri açılıyor. Simdi bu menüleri tek tek tanıyalım. SaHr düzenlemeri alhndaki sutun içerikleri, tasarımda kullanılacak sutun adetlerini belirlememize yarar. Ör: 4 sutun seçeneğinin üzerine Hklayıp, tasarımda koymak istediğimiz yere sürükle bırak seçeneği ile uygulayabiliyoruz. Yukarıda görüldüğü gibi 4 sütündan oluşan bir alan oluşturulmuş oldu. Bu sutunda yapmak istediğimiz değişiklikleri ve eklemek istediğimiz içerikleri mavi zeminli sahrdaki anahtar simgesine Hklayarak yapabiliriz.

8 Menü Yapımı 1 Temel Modüller alhnda ise tasarıma eklemek istediğimiz, Düğme, Fotoğraf, Video ve benzeri içerikleri koymak için menüler bulunmakta. Gene aynı şekilde bu tanımlara Hklayarak tasarıma içerik ekleyebiliriz. Örnek: Düğme ile daha önce oluşturduğumuz 4 sutuna aşağıdaki ekran görüntüsündeki gibi içerik tanımlaması ekleyebiliriz. Yapmamız gereken düğme simgesini tutup sürükleyerek istediğimiz sutunun içerisene bırakmak. Açılan pencerede sutuna isim verebilir, rengini değiş)rebiliriz. Kendimize özel menüler yaratabiliriz.

9 Burada dikkat etmemiz gereken bu imgelere Hkladığımızda, gitmesini istediğimiz yere, yönlendirme yapacağımız düğme menüsü içerisindeki bağlanh kısmına, önce KARE işare) koyarak (#anasayfa) düğmenin ismini yazıp kaydetmeliyiz. Temel modüller alhndaki diğer içerikleri incelersek. Fotoğraf: Fotoğraf, resim ve görseller ekleyebiliriz. HTML: html kod ekleyebiliriz. Heading: Başlık ekleyebilir ve üzerinde düzeltmeler yapabiliriz. MeBn düzenleyici: İçerik me)nlerini ekleyip, renk, font gibi özellikleri kullanarak düzenleme yapılabilir. Seperator: İçerikleri birbirinden ayırmak için ayraçlar eklemeye yarar. Ses: Ses dosyaları, mp3 gibi içerik eklemeye yarar. Video: Video, film, animasyon eklemeye yarar. Tüm bu modüller sürükle bırak yöntemi ile tasarıma uygulanabilir.

10 Menü Yapımı 2 Bu menü yapımı biraz daha zahmetli ama temalar alhnda kayıtlı mevcut parallax prallax_full- temalarında hazır yapılmış menü üzerinde kolayca revizyon yapılabilir. Öncelikle yapmamız gereken Ana sayfada sağ üst köşedeki Merhaba İşbir test kısmını Hklayıp işbir tes sekmesine Hklamak. Sağ taralaki gibir pencere açılacak. Burada Görünün > Menüler kısmına Hklamamız gerek. Bu pencerede menü düzenlemek için Sistemde kayıtlı Top Nav ya da Top Nav2 menülerinden birini seçebilirsiniz. Her iki menüce seçim yapıldıktan sonra menü yapısı kısmında içerikleri görünecek)r.

11 Menü seçimini yaphktan sonra menü yapısı alhnda görünen sekmelerin üzerlerine Hklayarak içerikleri düzenlenebilir. Diğer Menü 1 yapımında olduğu gibi bu menüde de dikkat edilmesi gereken bu imgelere Hklandığında, gitmesini istediğimiz yere, önce KARE işare) koyarak (#hakkımızda) ismini yazmalı, Dolaşım e)ke) kısmınada menünün ismi (Hakkımızda) belir)lmelidir. Ayrıca menüler kısmının hemn yanındaki Canlı ön izleme ile yönet seçeneği ile hazırlanan menünün tasarımı izlenebilir, düzeltmeler yapılabilir.

12 Gelişmiş Modüller alhnda tasarımımıza eklemek için farklı modüller bulunmaktadır. Accordion: Gene sürükle bırak yöntemi ile tasarım üzerine bırakhğımızda, bize önce başlığı gösteren, Hkladığımızda aşağıya doğru açılarak detayları gösteren bir modüldür. Modülün üzerine fare ile geldiğimizde ortaya çıkan mavi banlaki anahtar simgesine Hkladığımızda bize içeriği düzenlememize yardıcı olacak pencere açılır. Bu pencereyi kullanarak istediğimiz kadar içerik ekleyebiliriz. Aynı şekilde Düzenle Item seçeneğine Hkladığımızda da bize eklediğimiz içerikleri düzenlemek için bir pencere açılır.

13 Kayıt işleminden sonra sayfayı kapahp yeni bir sayfada size özel belirlenen internet sitesi adresi, kullanıcı adı ve şifre ile yeniden giriş yapılmalıdır. Sayfanın sol üst köşesinden sayfa düzenleyiciye Hklanmalıdır. Mevcut İşbir Op)k temasında bulunan menülere Hklandığında gitmesini istediğimiz içeriğin sayfa ayarlarına gitmeli ve sayfa ayarlarında ID kısmına Hakkımızda yazıp kaydetmeliyiz. Bu sayede menü kısmında hakkımızda kısmına Hklandığınca tasarım doruca sizi hakkımızda kısmına yönlendirecek)r.

14 Call to AcBon: Sürükle bırak yöntemi ile tasarımımızın üzerine bırakhğımızda, bize başlığı, içerik ve yönlendirme sekmesini gösteren bir modüldür. Bu modül ile me)n ve görsel ekleyebilir, link kısmına gitmesi istenilen web adresi yazılabilir. Callout: Call to Ac)on menüsü ile aynı manhkta bir modüldür. Gene sürükle bırak yöntemi ile tasarımın üzerine bırakıldığında, bize başlık, içerik ve yönlendirme sekmesini gösteren bir modüldür. Bu modülede me)n ve görsel ekleyebiliriz link kısmına gitmesini istediğimiz web adresini yazabiliriz.

15 Contact Form: Tasarıma ile)şim modülü eklemeye yarar. Gene sürükle bırak yöntemi ile tasarımın üzerine bırakhğımızda, asağıdaki modül belirir. Modülün üzerine fare ile geldiğimizde ortaya çıkan mavi banlaki anahtar simgesine Hklandığında, içeriği düzenlemeye yardıcı olan pencere açılır. Content Slider: Geçişli resimler, haberler veya içerik eklemeye yarayan modüldür. Ayarlar kısmından fotoğrafların geiş süreleri ve içerik düzenlemesi yapılabilir. Countdown: Geri sayım modülü eklemeye yarar. Bu özellik ile aşağıdaki modülü oluşturabilirsiniz.

16 Galery: Resim galerisi oluşturmaya yarar. Tasarıma uygulandığında açılan pencerede Galeri Oluşturun kısmına Hklayarak kendi seç)ğimiz fotoğraları yükleyerek bir görsel içerik kısmı oluşturulabilir. Icon / Icon Group: Tasarıma iconlar eklemeye yarayan modüllerdir. Daha sonrasında iconlar kendi içerisinde düzenlenebilir ve link eklenebilir. Map: Harita, yani adresinizi Google harita üzerinde göstermeye yarayan modüldür. Açılan pencerede adresinizi yazıp kaydet seçeneği Hklandığında yukarıdaki görüntü ortaya çıkar.

17 Menü: Tasarımda belirlenecek ana menü modülüdür. Üst kısımda, solda, sağda yada sayfanın alhnda yer alabilir. İçeriğe tanımlanacak kısa yollar ile istenilen yere hızlıca gitme inkanı sunar. Number Counter: Tasrımın yüklenme hızını gösteren bir animasyondur. 100% Priceing Table: Bize fiyat tablosu yapmaya yardımci bir modüldür. Gene sürükle bırak yöntemi ile tasarımın üzerine bırakıldığında, asağıdaki modül belirir. Modülün üzerine fare ile geldiğimizde ortaya çıkan mavi banlaki anahtar simgesine Hklandığında, içeriği düzenlemeye yardıcı olan pencere açılır. Slideshow: Fotoğrafların, içeriğin belirli bir hız içerişinde sürekli değişmesini sağlayan modüldür. Fotoğrafların, hızını büyüklüğünü ve değişkenliği gibi detayları ayarlanabilir.

18 Social Bu`ons: Sosya medya hesaplarına kısa yoldan ulaşılmasını sağlayan modüldür. İçerisindeki ayarlardan size veya firmanıza ait sosyal medya hesaplarını eklenebilir ve bu hesaplara link verilebilir. Subscribe Form: Kayıt modülü. İnterner sitenizi ziyaret edenlerin daha sonrasında yapılacak bir kampanya, duyuru ve benzeri durumlar için bilgilerinin kayıt edelimesini sağlayan modüldür. Tabs: Yan yana açılan bir menü görünümünde Hklandığında açıklamaların, görsellerin yapılabileceği bir modüldür. İstenilen miktarda sekme eklenebilir. TesBmnials: Geçişli içerik, haber reklam, bilgi ve benzeri içerikleri belirli bir düzen içerisinde yapılmasına yarar. Farklı Içerik eklenebilir. Menü oluştuğunda sağ tarlaki oklar yardımı ile hızlı geçişler sağlanabilir.

19 ÖZET: 1. Tasarımı yapmak çok basit olup, kullanım manhğı sürükle bırak şeklindedir. Sağ taralaki menüden dilediğiniz modülü sürükleyip tasarımda koymak istediğiniz yere bırakın. 2. Her modülün içerisinde düzenleme menüsü vardır. 3. Mouse ile o modülün üzerine gelin sol yukarı kısımda beliren anahtar simgesine Hklayın, açılan pencerede gerekli düzenlemeleri yaparak kaydedin. 4. Modülleri kolayca ekleyip silebilirsiniz buda sizlere deneme yanılma yöntemiyle modülleri tanımanıza ve uygulamanıza yardımcı olacakhr. 5. Fotoğraf galerisi oluşturmak için kendi arşiviniz olan fotoğraflar eklemelisiniz. 6. Unutulmaması gereken en önemli nokta, modüller üzerinde yapılan her değişiklik sonunda mutlaka değişiklikler kaydetdilmelidir.