Web Ajansı Düzenini Kullanarak Sitenize Maliyet Tahmin Formu Nasıl Eklenir

Her web ajansı, tahminleri nasıl ele almak istedikleri konusunda kritik bir karar vermek zorundadır. Müşterilerin yeni bir web sitesi ararken bilmek istedikleri hemen hemen ilk şeydir.

Yeni Web Ajansı Düzen Paketinin piyasaya sürülmesiyle, size bir maliyet tahmin formunun nasıl entegre edileceğini göstermek için ilham aldım. Bunu yapmak için WP Cost Estimation & Payment Form adlı popüler bir eklentiye karar verdim. Bu eklenti, birçok harika özelleştirme özelliği ile birlikte gelir. Bu eklenti, kullanıcı tarafından yapılan belirli seçimlere dayalı olarak maliyeti hesaplamakla kalmaz, aynı zamanda bu ödemeleri de işleyebilir. Eklenti, formu gömmek için kısa kodlar kullandığından, Divi Builder'ı kullanarak formu sayfamın herhangi bir yerine gömebilirsiniz.

Bu eğitim için, size profesyonel bir maliyet tahmin formunu nasıl kolayca tasarlayabileceğinizi ve Web Ajansı Düzen Paketini kullanarak web sitenize nasıl ekleyebileceğinizi göstereceğim. Hatta size formu sitenizin tasarımına uyacak şekilde nasıl özelleştirebileceğinizi göstereceğim.

Başlayalım.

gizli zirve

Web ajansı düzeninde formun gizli bir zirvesine göz atın.

Kurulum

Zamanın hatırına, bu eğitime aşağıdaki adımlar zaten tamamlanmış olarak başlayacağım:

1. Divi Temasını kurun ve etkinleştirin
2. WP Maliyet Tahmini ve Ödeme Formu eklentisini kurun ve etkinleştirin.
3. Web Ajansı Düzen Paketini indirin ve Web-Agency_All.json dosyasını Divi Tema Kitaplığınıza aktarın.
4. Her düzen için yeni sayfalar oluşturun.
5. Birincil menünüzü oluşturun.

Yukarıda listelenen kurulum konusunda kafanız karıştıysa, yeni projeniz için bir yerleşim paketi kullanmak için bu 10 adımı kontrol ederek yerleşiminizi nasıl düzgün bir şekilde kuracağınız konusunda daha ayrıntılı talimatlar bulabilirsiniz.

Yukarıdaki adımları tamamladıktan sonra başlamaya hazırsınız.

Not: Yalnızca maliyet tahmini formu işlevselliğinin entegrasyonuyla ilgileniyorsanız ve yerleşim paketiyle pek ilgili değilseniz, yine de öğreticiyi takip edebilir ve herhangi bir web sitesine form eklemek için eklentiyi nasıl kullanacağınızı öğrenebilirsiniz.

Web Ajansı Düzenini Kullanarak Sitenize Maliyet Tahmin Formu Nasıl Eklenir

Youtube Kanalımıza Abone Olun

Örnek Formları İçe Aktar

Bazı örnek formlara başlamak için örnek verileri içe aktarmanız gerekir. Eklentinizin indirme klasörünüzde “ example_data_can_be_imported.zip “ adlı bir dosya bulunur. Örnek formları içe aktarmak için ihtiyacınız olacak şey budur.

E&P Form Oluşturucu'ya gidin ve sayfanın üst kısmındaki sarı Formları İçe Aktar düğmesini tıklayın. Açılan Verileri İçe Aktar kutusunda example_data_can_be_imported.zip dosyasını yükleyin ve ardından yeşil İçe Aktar düğmesini tıklayın. Örnek formların göründüğünü görmelisiniz. eklenti zip dosyanızı bulduğunuz eklenti indirme klasöründe sağlanır.

Tahmin Formu Örneğimi Çoğalt

Ardından, listedeki formun yanındaki çoğalt simgesine tıklayarak Tahmin Formu Örneğimi çoğaltın.

Genel Ayarlar

Form Ayarı altında, Genel Sekmesinde aşağıdakileri güncelleyin.

• Başlık: Maliyet Tahmin Formu (veya ne istersen)
• Maksimum Fiyat: boş bırakın (bu nedenle maksimum maliyet otomatik olarak hesaplanacaktır)
• Otomatik Sonraki Adım: EVET (Bu, belirli adımlarda sonraki adım düğmesine tıklama ihtiyacını ortadan kaldırır)
• Animasyon hızı: 0.1 (Bunun nedeni yalnızca varsayılan hızın çok yavaş olduğunu düşünüyorum)

Değişiklikleri Kaydet

Tasarım Ayarları

Şimdi Tasarım sekmesine tıklayın, böylece web ajansı düzenimizin tasarımına uyacak şekilde formda bazı ayarlamalar yapabiliriz.

Aşağıdakileri güncelleyin:

• Ana Renk: #4046B9
• Metin Rengi: #2a3443
• Giriş başlığı ve araç ipuçları rengi: #2a3443
• Google yazı tipi adı: Montserrat (bu, web ajansı düzenindeki başlıklarla eşleşmek içindir)
• Düğmelerde parlama efekti: HAYIR (yine bu site tasarımına uygun)

Değişiklikleri Kaydet

Diğer Önemli Ayarları Doldurun

Bu form gerçekten güçlüdür ve siteniz için bir form oluştururken kendi zamanınızda yapmak isteyeceğiniz tonlarca ayara sahiptir. Form Ayarları altındaki diğer sekmelere tıklayarak bu ayarları değiştirebilirsiniz.

Metin Ayarları

Metin ayarları sekmesi altında, formunuz aracılığıyla kullanılan tüm kopya ve metin etiketlerini düzenleyebilirsiniz.

e mail ayarları

Formunuzu Mailchimp ile entegre etme seçeneği de dahil olmak üzere, E-posta sekmesinde bildirim e-postalarını nasıl ele almak istediğinizi de özelleştirebilirsiniz.

Son adım

Burada formunuzun son adımı için ayarları özelleştirebilirsiniz. Bu, genellikle tahmininizin nihai fiyatını görüntüleyen ve kullanıcıya bir harekete geçirici mesaj veren adımdır. Kullandığımız örnek için, ana harekete geçirici mesaj, e-posta adresini girmektir, ancak bu son adım için istediğiniz alanları ekleyebilirsiniz.

Ayrıca, ödemeleri işlemek için burada ödeme ağ geçidinizi kurmayı da seçebilirsiniz. Bu, kullanıcının tahmini fiyatı o anda ve orada ödemesine yol açacaktır.

Özet Ayarlar

Ayrıca, Özet sekmesi altındaki son adımda bir özet sunmayı da seçebilirsiniz. Bu, kullanıcının ödemeden önce incelemesini istediğiniz çok sayıda bilgi içeren gelişmiş tahminler için faydalı olacaktır.

İndirim kuponları

İndirim Kuponları ayarları altından yeni kupon kodları oluşturup formunuza atayabilirsiniz.

Form Adımlarını Özelleştirme

Bu, önceden oluşturulmuş bir formun kopyası olduğundan, Adımlar yöneticisi bölümünde zaten görüntülenen farklı mantıksal atlamalarla bağlantılı adımları göreceksiniz.

İlk adım

İlk adım yeşil renkle belirtilir (fareyle adımın üzerine gelip bayrak simgesine tıklayarak bir adımı ilk adım olarak belirleyebilirsiniz). Adımın üzerine gelin ve bir açılır navigasyon menüsü göreceksiniz (Divi'de bir modülün üzerine geldiğinizde olduğu gibi), size onu düzenleme, çoğaltma, silme veya başka bir adıma bağlama yeteneği verir.

Adım ayarlarını düzenlemek için düzenle simgesine tıklayın.

Adım seçenekleri altında, adımın başlığının “Mobil veya Web Sitesi?” Olduğunu göreceksiniz. Bunu "Mobil Uygulama mı Web Sitesi mi?" olarak değiştirin. daha fazla netlik için. Ayrıca bu adıma, doğrudan Seçenek Başlığı metninin altında görüntülenecek bir açıklama da ekleyebilirsiniz.

Öğe Listesi bölümünün altında, kullanıcının bu adımı tamamlamak için seçeceği öğeleri veya seçenekleri göreceksiniz. Örnekte, seçenekler Web Sitesi veya Mobil Uygulama'dır. Web sitesi listesi öğesini düzenlemek için tıklayın.

Bir öğeyi düzenlemek için tıkladığınızda, çok sayıda mevcut seçeneği görebilirsiniz.

Tür seçeneğine dikkat edin. Herhangi bir form oluşturucuda olduğu gibi, görüntülemek istediğiniz öğenin türünü değiştirebilirsiniz. Şimdilik Görüntü türünü korumak istiyorum.

Ayrıca Grup adına da dikkat edin. Aynı gruptaki öğelerden yalnızca biri seçilebilir. Öğeleri aynı gruba atamak (aynı grup adını vererek), yalnızca birinin seçilebileceği bir seçenekler listesi sağlamanıza olanak tanır. "Web sitesi" ve "mobil uygulama" liste öğelerinin her ikisi de aynı "web_veya_website" grup adına sahip olduğundan, canlı formda bu öğelerden yalnızca birini seçebilirsiniz. Ve genel ayarlarımızda “otomatik sonraki adımlar” seçeneğini seçtiğimiz için, kullanıcı gruptaki liste öğelerinden birini seçtiğinde, otomatik olarak bir sonraki adıma geçecektir.

Görüntü Türü seçiliyken, liste öğemiz olarak hizmet etmek üzere özel bir resim yükleme seçeneğimiz var. Bu, web ajansı düzeninde sağlanan görsellerimizden birini eklemek için harika bir fırsat. Bunu yapmak için görsel yükle'yi tıklamanız ve medya kitaplığınızdan yeni görseli eklemeniz yeterlidir.

Renk tonu görüntüsü seçeneği, genel form ayarlarındaki ana renk kümesiyle eşleşmeleri için tüm resimlerinize bir renk katmanı eklemenize olanak tanır. Resmin orijinal rengini korumak istiyorsanız, bu seçeneği “Hayır” olarak değiştirirsiniz.

Bu öğeye buradan bir fiyat değeri de ekleyebilirsiniz. Seçildiğinde fiyat değeri forma eklenecektir. Bu durumda, sadece bir web sitesi isteyip istemediklerini netleştirdiğimiz için bu seçime bir fiyat eklemek istemiyoruz.

Kaydet'i tıklayın

Özellikler Adımı

Adım yöneticisine geri dönün ve "özellikler" adımını bulun. Bu adım, bir kullanıcının yeni sitesi için ihtiyaç duyacağı tüm özelliklerin maliyetini hesaplamak için seçeceği öğelerin listesini içerir. Üzerine gelin ve düzenle'ye tıklayın.

Öğe Listesi altında listelenen özelliklere dikkat edin. Burası, sunmak istediğiniz tüm farklı özellikleri ekleyeceğiniz ve ardından her birine fiyat atayacağınız yerdir. Buradaki örnek liste öğeleri, ilk adımdaki önceki öğeler gibi tüm görüntü türleridir. Dikkat edin, öncekiler gibi aynı grubun parçası değiller. Bu, kullanıcının bir sonraki adıma geçmek için tıklamadan önce herhangi bir sayıda seçeneği seçmesini sağlar.

Başlık Analizi ile ilk liste öğesini düzenlemek için tıklayın. Bir fiyat olduğuna dikkat edin
kendisine atanan “150”. Bu, forma, bu belirli öğe seçildiğinde bunu toplam fiyat değerine eklemesini söyleyecektir.

Diğer üç öğeyi düzenlemek için tıklarsanız, her birinin kendilerine atanmış bir fiyatı olduğunu göreceksiniz, böylece bu adımda birden fazla özelliğe/öğeye tıklarsanız, her bir ek fiyat değeri de toplam fiyata eklenecektir. .

Adımları Bağlama

Adım Yöneticisine geri dönün ve ilk adımın Özellikler adımıyla bağlantılı olduğunu fark edin. Bir adımı başka bir adıma bağlamak için adımın üzerine gelin, bağlantı simgesine tıklayın ve ardından bağlanmak istediğiniz adıma tıklayın. Her bağlantı belirli bir koşullu mantıkla filtrelenebilir ve kullanıcıların belirli öğelerin seçimlerine göre belirli adımlar atmasına olanak tanır.

İlk adımımızı özellikler adımımıza bağlayan bağlantı koşullarına bakalım. İki adımı birleştiren satırdaki bağlantı simgesine tıklayın. Eklenen yalnızca bir koşul olduğuna dikkat edin. Bu koşul, forma kullanıcıyı
Özellikler adımı, ilk adımda “Web sitesi” öğesi seçilirse.

Adımları kendi kullanımınız için gerektiği gibi düzenleyin

Kullanmakta olduğumuz örnek formdan devralınan tüm adımları ve özellikleri kendi ihtiyaçlarınıza uyacak şekilde gözden geçirmeniz ve özelleştirmeniz gerekecektir. Bu formu kopyalamak, topun biraz daha hızlı yuvarlanmasını sağlamanın bir yoluydu.

Hizmetler Sayfasına Maliyet Tahmini Formunun Eklenmesi

Formu web sitenizde yayınlamanın üç yolu vardır. Formu bir sayfaya gömebilirsiniz. Tüm bir sayfayı kaplayacak formun tam ekran sürümünü gömebilirsiniz. Veya bir sayfadaki bir bağlantıya veya düğmeye tıkladığınızda formu açılır pencere olarak kullanabilirsiniz. Her üç yol da kısa kodların kullanılmasını gerektirir.

Bu örnek için, size web ajansı düzeninin Hizmetler sayfasındaki yeni bir bölüme formu nasıl gömeceğinizi göstereceğim.

Kısa Kodu alın

İlk olarak, kısa kodu almamız gerekiyor. Form düzenleyiciden sayfanın üst kısmındaki gri Kısa Kod düğmesine tıklayın ve formu bir sayfaya entegre edecek kısa kodu kopyalayın.

Yeni Bölüm olarak Hizmetler Sayfasına Kısa Kod Ekle

Artık kısa kodunuz olduğuna göre, form ayarlarınızı kaydettiğinizden ve Hizmetler sayfanıza gittiğinizden emin olun. Visual Builder'ı dağıtın ve sayfanın en altına gidin. İletişim formunu içeren bölümü silin.

Ardından, tek sütunlu bir düzen ile yeni bir normal bölüm ekleyin ve satıra bir metin modülü ekleyin.

Metin modülü ayarlarında, kısa kodu içerik kutusuna gömün.

Şimdi Tasarım sekmesi altındaki H2 ayarlarını aşağıdaki şekilde güncelleyin:

• Başlık 2 Yazı Tipi: Montserrat
• Başlık 2 Yazı Tipi Stili: TT (büyük harf)

Bu kadar.

Artık web sayfanızda harika görünen bir Maliyet Tahmini formunuz var. Renk ve yazı tipi de sitenizin tasarımına uygun.

Fena değil!

Form Tasarımcısını Unutmayın

Bu eğitimde form tasarımcısını ele almamış olsam da, formunuzun her öğesini özelleştirmenize/tasarlamanıza izin veren kullanışlı bir özelliktir. Temelde eklentinin bir görsel oluşturucu versiyonudur. Formun belirli öğelerini seçebilir ve ardından o belirli öğenin tasarımını değiştirebilirsiniz. Bu form tasarımcısının benzersiz bir yönü, durumuna göre (varsayılan, fareyle üzerine gelindiğinde veya odakla) bir öğenin stilini değiştirebilme yeteneğidir. Hatta Divi'nin görsel oluşturucusu gibi, formunuzun mobil cihazlarda nasıl görüneceğini test edebilirsiniz.

Form düzenleyicinin üst kısmındaki düğmeyi tıklayarak form tasarımcısına istediğiniz zaman erişebilirsiniz.

Son düşünceler

Bir web ajansı olarak bir Maliyet Tahmini formuna sahip olmak, dönüşümleri artırmanın harika bir yolu olabilir. WP Maliyet Tahmini ve Ödeme Formu Eklentisi ile oluşturmak kolaydır. Mevcut çok çeşitli seçenekler, siteniz için mükemmel formu oluşturmanıza olanak tanır. Ve sadece birkaç ince ayar ile genel tasarım, web ajansı düzeniyle mükemmel bir şekilde eşleşebilir.

Umarım bu maliyet tahmin formunu kendi siteniz için faydalı bulursunuz.

Şerefe!