Web Ajansı düzenini kullanarak sitenize tahmini maliyet formu nasıl eklenir
Her web temsilcisi, tahminleri nasıl ele almak istedikleri konusunda önemli kararlar vermelidir. Müşterilerin yeni bir web sitesi ararken bilmek istedikleri ilk şey budur. Yeni Web Ajansı düzeni paketinin piyasaya sürülmesiyle, tahmini bir maliyet formunu nasıl entegre edeceğinizi göstermek için ilham aldım. Bunu yapmak için WP Tahmini Maliyet ve Ödeme Formu adlı popüler bir eklenti seçtim. Bu eklenti birçok harika özelleştirme özelliğiyle birlikte gelir. Bu eklenti yalnızca kullanıcı tarafından yapılan belirli seçeneklere göre maliyetleri hesaplamakla kalmaz, aynı zamanda ödemeyi de işleyebilir. Eklenti bir form gömmek için kısa bir kod kullandığından, temel olarak Divi Builder’ı kullanarak sayfamın herhangi bir yerine formları yerleştirebilirsiniz.
Bu öğretici için, profesyonel bir maliyet tahmin formu tasarladığınızı ve web ajansı düzeni paketini kullanarak web sitenize eklediğinizi size göstereceğim. Hatta formu sitenizin tasarımına uyacak şekilde nasıl ayarlayabileceğinizi bile göstereceğim. Başlayalım. Puncak, web ajansının düzeni hakkında kısa bir forma gizlice girer.
Divi temasını yükleyin ve etkinleştirin
WP Eklentisi Tahmini Maliyet ve Ödeme Formunu yükleyin ve etkinleştirin.
Web ajansı düzeni paketini indirin ve Web-Agency_all.json’u Divi Tema Kütüphanenize içe aktarın.
Her düzen için yeni bir sayfa oluşturun.
Ana menünüzü oluşturun.
Yukarıda listelenen ayarlarla karıştırılıyorsanız, yeni projeniz için düzen paketini kullanmak için bu 10 adımı kontrol ederek düzeninizi nasıl doğru ayarlayacağınız hakkında daha ayrıntılı talimatlar bulabilirsiniz. Yukarıdaki adımları tamamladıktan sonra, başlamaya hazırsınız. . Not: Düzen paketinin değil, yalnızca maliyet tahmin formunun işlevselliğinin entegrasyonuyla ilgileniyorsanız, yine de öğreticiyi takip edebilir ve herhangi bir web sitesine form eklemek için eklentiyi nasıl kullanacağınızı öğrenebilirsiniz. Web Ajansı aboneliğinin düzenini kullanarak Sitenize Tahmini Maliyet Formu Nasıl Eklenir YouTube Kanalı İçe Aktarma Örnek Formumuza birkaç örnekle başlamak için örnek verileri içe aktarmanız gerekir. Eklenti indirme klasörünüze “example_data_can_be_imported.zip” adlı bir dosya bulunur. Örnek formunu içe aktarmak için ihtiyacınız olan şey budur.
E&P formunun üreticisine gidin ve sayfanın üst kısmındaki Sarı Form İçe Aktar düğmesini tıklayın. Görünen veri içe aktarma kutusunda, örnek_data_can_be_imported.zip dosyasını yükleyin ve ardından Yeşil İçe Aktar düğmesini tıklayın. Örnek formunun göründüğünü göreceksiniz. ZIP eklenti dosyanızı bulduğunuz eklenti indir klasöründe sağlanır. Bir sonraki tahmin formumun yinelenen örneği, listedeki formun yanındaki yinelenen simgeyi tıklayarak tahmini formumu yinelenen örnek. Genel Ayarlar Form ayarları altında, genel sekmede aşağıdakileri güncelleyin. Başlık: Tahmini maliyet formu (veya ne istersen)
Maksimum fiyat: boş bırakın (bu, maksimum maliyet otomatik olarak hesaplanacak şekilde)
Bir sonraki adım otomatik: Evet (bu, belirli adımlarda bir sonraki adım düğmesini tıklama ihtiyacını ortadan kaldırır) Animasyon Hızı: 0.1 (Bunun nedeni, sadece varsayılan hız çok yavaş olmasıdır)
Değişikliği kaydet
Tasarım Ayarları Artık Web Ajansı Düzenimizin tasarımına uyacak şekilde formda bazı ayarlamalar yapabilmemiz için Tasarım sekmesini tıklayın. Aşağıdakileri güncelleyin:
Ana renk: #4046b9 Metin rengi: #2A3443
Başlık Giriş ve Renk Araç İpuçları: #2A3443
Google yazı tipi adı: Montserrat (Bu, web ajansının düzenindeki başlıklarla eşleşecek)
Düğme üzerinde parlayan efekti: hayır (bir kez daha, bu site tasarımıyla eşleşecek)
Değişikliği kaydet
Diğer önemli ayarları doldurun Bu form çok güçlüdür ve siteniz için bir form oluştururken geçmek istediğiniz birçok ayara sahiptir. Form ayarlarının altındaki diğer sekmelere tıklayarak bu ayarı değiştirebilirsiniz.
Metin Ayarları Metin Ayarları sekmesi altında, formunuz aracılığıyla kullanılan tüm kopyaları ve metin etiketlerini düzenleyebilirsiniz. E -posta ayarlarınız, formunuzu MailChimp ile entegre etme seçeneği de dahil olmak üzere e -posta bildirimini e -posta sekmesindeki nasıl işlemek istediğinizi de ayarlayabilir. Buradaki son adım, formunuzun son adımı için ayarları ayarlayabilirsiniz. Bu, genellikle tahminlerinizin nihai fiyatını gösteren ve kullanıcıya harekete geçmesi için davet veren bir adımdır. Kullandığımız örnek için ana oyunculuk davetiyesi e -posta adreslerini girmektir, ancak bu son adım için istediğiniz alanı ekleyebilirsiniz.
Ödeme ağ geçidinizi ödemeleri işlemek için burada ayarlamayı da seçebilirsiniz. Bu, kullanıcıyı o zaman tahmini fiyatı gerçekten ödemeye yönlendirecektir. Özet ayarlarınız, Özet sekmesinin altındaki son adımda bir özet vermeyi de seçebilir. Bu, ödemeden önce gözden geçirmek istediğiniz çok fazla bilgiye sahip olan diğer tahminler için yararlı olacaktır. İndirim kupon ayarları altında indirim kuponları yeni bir kupon kodu oluşturabilir ve formunuza ayarlayabilirsiniz. Formun biçimini ayarlayarak, bu ön yapma formundan kopya olduğu için, Step Manager bölümünde görüntülenen farklı mantık atlamalarına bağlı adımları göreceksiniz. İlk adım ilk adım yeşil olarak işaretlenir (imleci adıma yönlendirerek ve bayrak simgesini tıklayarak adımı ilk adım olarak ayarlayabilirsiniz). İmleci adımlara gidin ve açılır navigasyon menüsünü (imleci Divi’deki modüle yönlendirdiğinizde olduğu gibi) göreceksiniz. Adım ayarlarını düzenlemek için Düzenle simgesini tıklayın. Adım seçeneği altında, adımın başlığının “hücresel mi yoksa web sitesi” olduğunu göreceksiniz. Bunu “hücresel uygulama veya web sitesi?” daha açık için. Bu adıma doğrudan seçeneğin metin başlığı altında görüntülenecek bir açıklama da ekleyebilirsiniz. Öğeler listesi altında, kullanıcının bu adımı tamamlamayı seçeceği öğeyi veya seçeneği göreceksiniz. Örnekte, seçim bir web sitesi veya hücresel uygulamadır. Web sitesi listesi öğesini düzenlemek için tıklayın.
Öğeleri düzenlemek için tıkladıktan sonra, bir dizi kullanılabilir seçeneği görebilirsiniz. Tür seçeneğine dikkat edin. Herhangi bir form üreticisi için olduğu gibi, görüntülemek istediğiniz öğe türünü değiştirebilirsiniz. Şimdilik görüntü türünü korumak istiyorum. Ayrıca grubun adına da dikkat edin. Aynı gruptaki yalnızca bir öğe seçilebilir. Aynı gruba öğeler oluşturun (aynı grup adını vererek), yalnızca birinin seçilebileceği seçeneklerin bir listesini sunmanızı sağlar. “Web Sitesi” ve “Hücresel Uygulama” listelerinin her ikisi de aynı grup adına “Web_OR_Website” olduğundan, bu öğelerden yalnızca birini doğrudan formda seçebilirsiniz. Ve genel ayarlarımızdaki “Otomatik Adım” seçeneğini seçtiğimiz için, kullanıcı gruptaki liste öğelerinden birini seçtikten sonra, bunları otomatik olarak bir sonraki adıma getirecektir. Seçilen görüntü türü ile, liste öğemiz olarak kullanılacak özel resimleri yükleme seçeneğimiz var. Bu, Web Ajansı düzeninde sağlanan resimlerimizden birini eklemek için iyi bir fırsattır. Bunu yapmak için, resimler yükleyin ve medya kitaplığınızdan yeni resimler eklemeniz yeterlidir. Ton görüntüsü seçeneği, genel form ayarlarında ayarlanan ana renkle eşleşecek şekilde tüm resimlerinize renk genişliği eklemenizi sağlar. Görüntünün orijinal rengini korumak istiyorsanız, bu seçeneği “hayır” olarak yönlendirebilirsiniz.
Bu öğenin fiyat değerini de buraya ekleyebilirsiniz. Seçildiğinde, fiyat değeri forma eklenecektir. Bu durumda, bu seçeneğe fiyat eklemek istemiyoruz çünkü yalnızca bir web sitesi isteyip istemediklerini açıklıyoruz. Özellikleri Step Manager’a döndürmek için Adımları Kaydet’i tıklayın ve “Özellik” adımlarını bulun. Bu adım, kullanıcıların yeni siteleri için ihtiyaç duydukları tüm özelliklerin maliyetini hesaplamayı seçecekleri öğelerin bir listesini içerir. İmleçte gezinin ve Düzenle’yi tıklayın. Öğeler listesi altında listelenen özelliklere dikkat edin. Bu, sunmak istediğiniz tüm farklı özellikleri ekleyecek ve ardından her özellik için fiyatları ayarlayacaksınız. Buradaki öğelerin bir örneği, ilk adımda önceki öğe gibi her türlü görüntü türüdür. Daha önce olduğu gibi aynı grubun bir parçası olmadıklarını unutmayın. Bu, kullanıcıların bir sonraki adıma geçmek için tıklamadan önce bir dizi seçenek seçmelerine olanak tanır. Başlık Analytics ile ilk liste öğesini düzenlemek için tıklayın. “150” fiyatının kendisine verildiğini unutmayın. Bu, formun, bu özel öğenin her seçtiğinde toplam fiyat değerine eklemesini söyleyecektir. Diğer üç öğeyi düzenlemek için tıklarsanız, her birinin onlar için belirli bir fiyatı olduğunu görürsünüz, böylece bu adımda birden fazla özellik/öğe tıklarsanız, her ek fiyat değeri de toplam fiyata eklenir. Adımları Step Manager’a geri bağlayın ve özellik adımlarıyla ilgili ilk adıma dikkat edin. Bir adımı diğerine bağlamak için imleci adıma yönlendirin, bağlantı simgesini tıklayın, ardından bağlamak istediğiniz adımları tıklayın. Her bağlantı, kullanıcıların belirli öğelerin seçimine göre belirli adımlar atmasına olanak tanıyan belirli koşullu mantıkla filtrelenebilir. İlk adımımızı özelliklerimize bağlayan bağlantının durumunu kontrol edelim. İki adımı bağlayan satırdaki bağlantı simgesine tıklayın. Sadece bir koşul eklendiğini unutmayın. Bu koşul, ilk adımda “Web Sitesi” öğesi seçilirse, formun kullanıcıyı adım özelliğine getirmesini söyler.
Adımları Düzenle Kendi kullanımınız için ihtiyaçlara göre, kendi ihtiyaçlarınıza uyacak şekilde kullandığımız örnek formunun devralındığı tüm adımları ve özellikleri geçmeli ve ayarlamanız gerekir. Bu formu çoğaltmak, topun biraz daha hızlı yuvarlanmasının bir yoludur. Hizmet sayfasına tahmini bir ücret formu eklemek, web sitenizde form yayınlamanın üç yolu vardır. Formu sayfadaki sabitleyebilirsiniz. Sayfanın tamamını karşılayacak formun tam ekran sürümünü sabitleyebilirsiniz. Veya sayfadaki bir bağlantı veya düğmeye tıklarken formu sembulan olarak kullanabilirsiniz. Bu üç yol kısa kodların kullanılmasını gerektirir. Bu örnek için, formları Web Ajansı Düzeni Hizmeti sayfasındaki yeni bir bölüme nasıl yerleştireceğinizi göstereceğim. İlk kısa kodu al, kısa bir kod almamız gerekiyor. Form Düzenleyicisi’nden, sayfanın üst kısmındaki Gri Kısa Kod düğmesini tıklayın ve sayfaya formu entegre edecek kısa kodu kopyalayın. Kısa kodu yeni bir parça olarak hizmet sayfasına ekleyin, kısa bir kod aldıktan sonra , form ayarlarınızı kaydettiğinizden ve hizmet sayfanıza bıraktığınızdan emin olun. Görsel oluşturucu uygulayın ve sayfanın altına kaydırın. Kontak formunu içeren bölümü silin. Ardından bir sütun düzeni içeren yeni bir normal bölüm ekleyin ve metin modülünü satıra ekleyin. Metin modülünü ayarlarken, kısa kodu içerik kutusuna sabitleyin.
Şimdi tasarım sekmesinin altındaki H2 ayarlarını aşağıdakilere güncelleyin: Başlık 2 Yazı Tipi: Montserrat Başlık 2 Yazı Tipi Stili: TT (Coper) İşte burada. Artık web sayfanızda iyi görünen bir maliyet tahmin formunuz var. Ve renk ve yazı tipi sitenizin tasarımıyla eşleşiyor. Kötü değil! Form tasarımcısını unutmayın Bu öğreticide formun tasarımcısını tartışmamama rağmen, bu, formunuzun her öğesini ayarlamanızı/tasarlamanızı sağlayan kullanışlı bir özelliktir. Bu temelde görsel yapımcının eklenti sürümüdür. Formdan belirli öğeleri seçebilir ve ardından bu özel öğelerin tasarımını değiştirebilirsiniz. Bu form tasarımcısının benzersiz yönü, durumuna göre öğelerin stilini değiştirme yeteneğidir (varsayılan, fare-over veya odak). Formlarınızın görsel divi üreticileri gibi mobil cihazlarda nasıl görüleceğini bile test edebilirsiniz. Form tasarımcısına, şekillendiricinin üst kısmındaki düğmeyi tıklayarak istediğiniz zaman erişebilirsiniz. Bir web aracısı, dönüşümü artırmak için iyi bir yol olabileceğinden, son zihin bir maliyet tahmin formuna sahiptir. Ve tahmini maliyet eklentisi ve WP ödeme formu ile yapılması kolay. Mevcut çeşitli seçenekler, siteniz için mükemmel bir form oluşturmanıza olanak tanır. Ve sadece birkaç ayarla, genel tasarım web ajansının düzenini mükemmel bir şekilde eşleştirebilir. Umarım bu tahmini maliyet formu kendi siteniz için yararlıdır. Kızarmış ekmek!
