Crafto dokümantasyonu

Hero (üst bölüm) içeriğini düzenleme

Ana görsel alanı, sayfanın en üstündeki full-screen bölüm ve arka plan deseniyle başlar. Başlıkta hareketli bir metin efekti bulunur ve iki buton yer alır.

Arka plandaki desen, renk gradyanı ve sağ taraftaki görselleri dilediğiniz gibi değiştirebilirsiniz.

1. HTML: index.html dosyasını açın. <!-- start banner --> ile başlayan section içinde arka plan desenini style="background-image: url('assets/images/demo-marketing-dot.svg')" bölümünden değiştirin.
2. HTML: Aynı bölümde başlığı oluşturan fancy-text-style-4 ve data-fancy-text özniteliklerini bulun; "strategy, approach, planning" metinlerini kendi kelimelerinizle güncelleyin.
3. HTML: Açıklama metnini (We do our best...) ve buton yazılarını "Discover crafto" ve "Get started" metinlerinden dilediğiniz şekilde düzenleyin; buton linklerini href ile kendi sayfalarınıza yönlendirin.
4. HTML: Sağdaki görselleri assets/images/demo-marketing-home-01.png ve demo-marketing-home-02.jpg dosyalarıyla tanımlıdır; aynı isimleri koruyup görselleri değiştirin veya kaynak yolunu güncelleyin.
5. HTML: Üstteki koyu/yeşil gradyanı değiştirmek için aynı bölümdeki <div class="bg-gradient-black-green ..."> sınıfını temanızdaki başka bir arka plan sınıfıyla değiştirin veya kaldırın.
6. WordPress (Elementor dahil): Yönetim > Sayfalar > Ana sayfa > Düzenle üzerinden başlık, açıklama ve buton widget’larını güncelleyin. Arka plan görselini bölüm ayarlarından; buton linklerini buton ayarlarından değiştirin.
7. Shopify: Online Store > Themes > Customize > Home page bölümünden kahraman (hero) bölümünü seçip başlık, açıklama, arka plan görseli ve buton linklerini düzenleyin.

“Marketing solutions for all” bloğunu özelleştirme

Bu kısım, başlık, iki adet özellik kutusu ve iki butondan oluşur. Görseller ve metinler assets/images klasöründeki ilgili dosyalardan gelir.

Bölüm bağlantıları “Learn more” ve “Our services” butonlarıyla sayfa içi gezinmeyi destekler.

1. HTML: index.html içinde <!-- About marketing agency --> satırının hemen altındaki h3 başlığı (Marketing solutions for all ...) ve altındaki iki feature-box içindeki başlık/metinleri düzenleyin.
2. HTML: Görselleri assets/images/demo-marketing-home-04.jpg ve demo-marketing-home-05.jpg ile belirlenmiştir; dosyaları değiştirin veya kaynak yolunu güncelleyin.
3. HTML: "Learn more" ve "Our services" butonlarının href değerlerini sitenizdeki ilgili sayfalara yönlendirin.
4. WordPress (Elementor dahil): Sayfalar > Ana sayfa’dan ilgili bölümü düzenleyin; başlık, metin ve görsel alanlarını güncelleyin. Buton linklerini buton ayarlarından değiştirin.
5. Shopify: Customize ekranında bu bölüme ait section’ı seçerek başlık/metin ve görselleri, buton linklerini düzenleyin.

Portfolyo kartları ekleme ve filtreleri yönetme

Portfolyo alanı Isotope tabanlı filtrelerle çalışır. Üstteki filtre menüsü (All, Selected, Digital, Branding, Web) altındaki kartları sınıflarına göre gösterir.

Her kart bir görsel, başlık ve kategori bilgisinden oluşur.

1. HTML: index.html’da <!-- filter navigation --> listesindeki filtreleri güncelleyin. Yeni bir kategori ekleyecekseniz <li class="nav"><a data-filter=".yeni-kategori">Etiket</a></li> şeklinde ekleyin.
2. HTML: Aşağıdaki <ul class="portfolio-simple portfolio-wrapper ..."> içinde yeni bir kart eklemek için <li class="grid-item ..."> bloğunu kopyalayın.
3. HTML: Kartın kategori sınıflarını güncelleyin (ör. digital, branding, web, selected). Yeni kategori eklediyseniz aynı sınıfı burada da kullanın.
4. HTML: Kart görsel yolunu <img src="assets/images/portfolio-xxx.jpg"> içinde değiştirin; başlığı ve kategori metnini .portfolio-caption içinde güncelleyin.
5. HTML: Portfolyo düzeninin düzgün çalışması için vendors.min.js ve main.js dosyalarının sayfanın sonunda yüklü olduğundan emin olun.
6. WordPress (Elementor dahil): Portfolyo alanını ilgili widget/şablon içinden düzenleyin; kart eklemek için yeni öğe ekleyip kategori etiketlerini atayın.
7. Shopify: Customize > Anasayfa > Portfolyo/Çalışmalar bölümünde yeni kart (block) ekleyin, görsel ve başlık girin; etiket/filtresi varsa ilgili alana kategori sınıfını yazın.

Accordion style 02 (01-02-03) içeriklerini değiştirme

Akordeon bileşeni Bootstrap collapse yapısını kullanır ve varsayılan açık öğe active-accordion sınıfıyla belirlenir.

Başlık ikonları veri öznitelikleriyle otomatik yönetilir.

1. HTML: index.html içinde <div class="accordion accordion-style-02" id="accordion-style-02"> bloğunu bulun.
2. HTML: Her bir öğedeki başlığı .accordion-title içindeki span metninden, içeriği ise .accordion-body içindeki paragraftan düzenleyin.
3. HTML: Varsayılan açık öğeyi değiştirmek için istediğiniz .accordion-item öğesine active-accordion sınıfını ekleyin; ilgili .accordion-collapse öğesine de class="accordion-collapse collapse show" verin.
4. HTML: Yeni bir satır eklemek için mevcut .accordion-item bloğunu kopyalayın ve id değerlerini benzersiz yapın (ör. accordion-style-02-04). data-bs-target ve href atıflarını yeni id ile eşleştirin.
5. WordPress (Elementor dahil): Akordeon widget’ını açıp öğe başlığı ve içeriklerini düzenleyin; varsayılan açık öğeyi widget ayarlarından seçin.
6. Shopify: Customize ekranında akordeon/SSS bölümünde her bir öğe (block) başlık ve içerik alanlarını düzenleyin; yeni öğe ekleyerek dördüncü maddeleri ekleyin.

Fiyatlandırma tabloları ve $250 planını güncelleme

Fiyat kartları "Standard ($250)", "Business ($350)", "Ultimate ($450)" olarak hazır gelir. Her kartta özellik listesi ve paket butonu bulunur.

İhtiyacınıza göre fiyatları, özellikleri ve buton linklerini özelleştirebilirsiniz.

1. HTML: index.html’da <!-- Predictable pricing plans --> bölümünde her bir <div class="pricing-table ..."> bloğunu düzenleyin.
2. HTML: Fiyatı <h2> içindeki rakamlardan (ör. $250) değiştirin; altındaki <ul class="list-style-01"> içindeki özellik metinlerini güncelleyin.
3. HTML: "Choose package" butonunun href değerini ilgili ödeme/satın alma sayfanıza yönlendirin.
4. HTML: Bir planı öne çıkarmak isterseniz ona görsel vurgular ekleyebilir veya sırasını değiştirebilirsiniz.
5. WordPress (Elementor dahil): Fiyat tablosu widget’ında plan başlığı, fiyat, özellik listesi ve buton linkini düzenleyin.
6. Shopify: Customize > Pricing (veya benzeri) bölümde her plan için fiyat, özellikler ve buton linklerini güncelleyin.

Abonelik popup’ı (#subscribe-popup) ve alt bilgi bülteni

Tema, sayfa içinde gizli bir abone ol popup’ı (mfp-hide) ve alt bilgi (footer) bülten formu içerir. Açılır pencere Magnific Popup sınıflarıyla çalışır.

Form alanları e-posta girişi, gönder butonu ve geri bildirim için .form-results bloğunu içerir.

1. HTML (Popup): index.html’da <!-- start subscription popup --> içinde id="subscribe-popup" bloğunu açın. Başlığı, açıklamayı ve buton metnini düzenleyin.
2. HTML (Popup form): <form action="#" method="post"> satırındaki action="#" kısmını kendi abonelik/otomasyon hizmetinizin form işlem URL’siyle değiştirin. input name="email" değerini koruyun.
3. HTML (Footer bülten): Alt bilgi bölümündeki newsletter-style-02 formunda da action="#" kısmını aynı şekilde güncelleyin ve placeholder metinlerini düzenleyin.
4. HTML (Açılışı kapatma): Popup’ın otomatik açılışını kapatmak isterseniz #subscribe-popup bloğunu tamamen kaldırın veya assets/js/main.js içinde popup başlatma satırını devre dışı bırakın.
5. WordPress (Elementor dahil): Site bülteni ve popup’ı ilgili form/popup şablonundan düzenleyin; gönderim (action) adresini entegrasyon ayarlarında yapılandırın.
6. Shopify: Customize > Theme settings veya Home page bölümlerinde bülten/popup ayarlarını açıp başlık, metin ve başarı/başarısızlık mesajlarını ve kayıt hedefini (list/URL) ayarlayın.

Menü ve sosyal bağlantıları değiştirme

Üst menü şeffaf başlık üzerinde yer alır ve mobilde hamburger düğmesiyle açılır. Üst kısımda sosyal ikonlar, alt kısımda ise metin tabanlı sosyal bağlantılar bulunur.

Aynı menü bağlantıları alt bilgi (footer) içerisinde de tekrar eder.

1. HTML (Üst menü): index.html’da <!-- start navigation --> altında <ul class="navbar-nav"> içindeki bağlantı metinlerini ve href adreslerini düzenleyin.
2. HTML (Sosyal ikonlar): <div class="header-social-icon icon"> içindeki Facebook/Instagram/Twitter linklerini kendi sayfalarınızla değiştirin.
3. HTML (Footer menü): Footer’daki <ul class="footer-navbar"> içindeki bağlantıları güncelleyin.
4. HTML (Footer sosyal): .elements-social .social-text-style-01 listesindeki Fb., Ig., Tw., Be. linklerini kendi profillerinizle değiştirin.
5. WordPress (Elementor dahil): Görünüm > Menüler’den menü öğelerini düzenleyin. Sosyal bağlantıları tema ayarları veya ilgili header/footer şablonlarından güncelleyin.
6. Shopify: Online Store > Navigation’dan menü öğelerini düzenleyin; sosyal bağlantıları Customize > Theme settings bölümünden veya footer/üst bilgi section’larından değiştirin.

Renkleri değiştirmek

Temada en çok kullanılan renkler: #0d6efd, #222222, #6c757d, #333333, #ffd658. Bunlar assets/css altındaki ana stil dosyasında tanımlıdır.

1. assets/css altındaki ana stil dosyasını (çoğunlukla main.css / style.css) bir kod düzenleyicide açın.
2. Değiştirmek istediğiniz renk kodunu tüm dosyada aratıp yenisiyle değiştirin (Bul ve değiştir).
3. WordPress'te değişiklikleri Görünüm > Tema dosya düzenleyicisi yerine bir alt tema (child theme) ile yapmanız, güncellemelerde kaybolmalarını önler.