Webflow Tasarımcısını Kullanarak Popup Oluşturma
Webflow Tasarım paneli üzerinden bir popup nasıl oluşturulur, birlikte inceleyelim.
Bu rehber, belirli unsurları ekleyerek Webflow'da nasıl bir popup oluşturabileceğinizi gösterecek. Popup'ınızı çeşitli ihtiyaçlarınıza göre tasarlayarak ayarlayabilirsiniz.
📌 Unutmayın, Webflow'un tasarım panelinde bir popup oluşturmak Webflow bilgisi ve deneyimi gerektirir.
Bazı unsur ve stil seçeneklerini öğrenerek Webflow popup'ınızı tarzınıza ve ihtiyaçlarınıza göre özelleştirebilirsiniz.
Webflow'da basit bir popup oluşturmak için takip edebileceğiniz hızlı adımlar:
Adım 1. Webflow sitenizin tasarım paneline gidin. İlk olarak bir Div Block ekleyin. Sınıf isminizi "modal" olarak adlandırabilirsiniz.
Adım 2. Layout (Düzen) bölümünden bloğunuzun düzenini ve boyutunu ayarlayın ve pozisyonunu "Fixed" olarak belirleyin.
Adım 3. İlk eklediğiniz Div Block'un içine yeni bir Div Block ekleyin; bu modal arkaplanınız olacak.
Bunu modal arka planı veya ihtiyaçlarınıza uygun başka bir isimle adlandırabilirsiniz.
Genişlik, yükseklik ve renk ayarlamalarını yapın. Rengi optimize ederken arka plan rengine düşük opaklık verin. Böylece içeriğiniz daha çekici görünecektir.
Adım 4. Popup modal konteynırınız olarak başka bir div block ekleyin. Ardından, pozisyonunu "Absolute" olarak ayarlayın.
Boyutunu web sitenizin stil seçeneklerine göre ayarlayabilirsiniz.
Adım 5. Popup içeriklerine başlamak için, bloğunuza bir Başlık öğesi ekleyin ve kontrol panelinin sağ tarafından stilini ayarlayın.
Adım 6: Ardından, bir paragraf öğesi ekleyip stilini ayarlayabilirsiniz. Ayrıca, bir popup formu oluşturmak için bir form bloğu ekleyebilirsiniz.
Popup'ınızın tarzı ve hedeflerine göre başka öğeler, örneğin resimler ekleyebilirsiniz.
Adım 7. Bir kapatma butonu eklemek için bir Link Block (Bağlantı Bloku) öğesi ekleyin ve buna bir Text Block (Metin Bloku) bağlayın.
Metin bloğunuzu kapatma butonu için Absolute ve Sağ Üst olarak ayarlayın.
Adım 8. Popup'ı butona tıklayarak açmak ve kapatma butonunu çalıştırmak için, "Interactions" eklemeniz gerekiyor.
İlk olarak popup modal bloğunu gizleyin, sayfanızdaki butonu seçin ve "Interactions" kısmına gidin. Element trigger (Eleman tetikleyici) bölümünden "Mouse click (tıklama)" seçeneğini seçin.
Adım 9. Daha sonra, Action (hareket) olarak "Start an animation" (Animasyonu başlat) seçeneğini ve yeni bir animasyon oluşturmayı seçin. Sol taraftan modal bloğu seçin, "+" butonuna tıklayın ve "Hide/Show" (Gizle/Göster) seçeneğini seçin.
"Timing" (zamanlama) kısmına gidin ve başlatma durumu olarak ayarlayın ve Display (görüntü) bölümünden "None" (Hiçbir şey) seçeneğini seçin.
Daha sonra, ilk hareketin altına başka bir hareket ekleyin, "Hide/Show" (Gizle/Göster) seçeneğini ve Display (görüntü) bölümünden "Flex" seçeneğini belirleyin.
Bu şekilde, bir ziyaretçi butona tıkladığında popup böyle görünecektir:
Adım 10. Eklediğiniz "Kapatma butonui"ne bir hareket eklemek için "Link Block" (Bağlantı Bloku) kısmına gidin ve ardından "Interactions" kısmına gidin. "Mouse click (tıklama)" seçeneğini seçin, animasyona bir isim vererek "+" butonuna tıklayın ve "Hide/Show" (Gizle/Göster) seçeneğini belirleyin.
Adım 11. Daha sonra "Change target" (Hedefi değiştir) seçeneğine tıklayın ve sol taraftaki kontrol panelinden ana modal bloğu seçin. Display (görüntü) bölümünden "None" (Hiçbir şey) seçeneğini belirleyerek gizleyin.
Bu şekilde, ziyaretçiler kapatma butonuna tıkladığında popup gizlenecektir.
Elbette, popup'ınıza birçok farklı animasyon ekleyebilirsiniz. Tasarım ve kodlama bilginiz varsa, Webflow'da popup oluştururken bunları uygulayabilirsiniz.
Popup'ınızı Webflow'da ayarladıktan sonra sitenizi kaydetmeyi ve yayımlamayı unutmayın.
Webflow Üzerinde Popupsmart ile Popup Nasıl Oluşturulur?
Eğer tasarım veya kodlama deneyiminiz yoksa, kodsuz popup oluşturucu Popupsmart, Webflow popup'ınızı oluşturmak için harika bir çözüm olabilir.
Popupsmart'ın oluşturucusuyla Webflow siteniz için akıllı bir popup nasıl oluşturulur, birlikte göz atalım;
Adım 1. Popupsmart’a kaydolun ve Popupsmart hesabınıza giriş yapın.
Adım 2. İlk popup'ınızı oluşturmak için, sitelerinizin başlık etiketleri arasına ek kodu yüklemeniz gerekir. Kodunuzu almak için "Embed Kod"butonuna tıklayın.
Adım 3. Bir modal pencere açılacak ve Popupsmart embed kodunuz gösterilecektir. Bu kodu panonuza kopyalayın.
Ayrıca, Google Tag Manager aracılığıyla embed kodunu kolayca sitenize yerleştirebilirsiniz.
Bu tek seferlik bir zorunluluktur, bu nedenle aynı embed kodunu tüm siteleriniz ve gelecek popup kampanyalarınız için kullanabilirsiniz.
Adım 4. Webflow web sitenizin yönetici paneline erişin. Webflow Dashboard'ınızda, embed kodunuzu eklemek istediğiniz web sitesini seçin ve sol üst köşedeki Webflow simgesine tıklayarak "Project Settings" seçeneğini seçin.
“Project Settings” sayfasında “Custom Code” bölümüne tıklayın.
Sayfanın aşağısına inin ve embed kodunuzu "Footer Code" bölümüne yerleştirin. Embed kodunuz </body> etiketinden önce yerleştirilmelidir. Ardından, "Save Changes" butonuna tıklayın.
Adım 5: Popupsmart embed kodunuzu Webflow'a başarıyla ekledikten sonra, Popupsmart paneline gidip profiliniz üzerinden "Web Siteleri" bölümüne erişebilirsiniz.
Adım 6: "Yeni web sitesi" seçeneğine tıklayarak Webflow sitenizi ekleyin. Web sitenizin URL'sini "Yeni web sitesi ekle" alanına girin ve bitirdiğinizde "Kaydet" butonuna tıklayın. Webflow web sitenizi kaydettikten sonra, doğrulama işlemi gerçekleşecektir.
Adım 7: Panelde "Yeni Kampanya" butonuna tıklayın.
Adım 8: İhtiyaçlarınız ve iş hedefleriniz doğrultusunda özelleştirilebilir bir popup şablonu seçin.
Adım 9: Popup kampanyanızı tercihlerinize göre tasarlayın ve gerekli ayarlamaları yapın.
"Özelleştir" ve "Stil" adımlarını kullanarak açılır pencere tasarımınızın form alanları, yazı tipi seçenekleri, butonlar, resimler ve görünüm gibi alanlarını düzenleyin.
İpucu: "Segment" adımına giderek popup kampanyanızın segment ve hedefleme seçeneklerini ayarlayabilirsiniz.
Çıkış niyeti hedeflemesi, tıklama ile tetikleme, tarayıcı dili, trafik kaynağı, coğrafi konum hedeflemesi, URL hedeflemesi, X saniye sonra tetikleme gibi çeşitli hedefleme seçeneklerimiz bulunmaktadır!
Ardından, kampanyanızı tamamlamak için "Kaydet" ve "Yayınla" butonlarına tıklayın.
Not: Popupsmart hesabınızı uygulamalarla, örneğin MailChimp ve Zapier ile veya bir webhook ile "Entegrasyonlar" bölümünde form elemanıyla bağlayabilirsiniz.
Popup'ınızı yayımladıktan sonra, "Analitikler" bölümü üzerinden anında popup gösterimlerinizi, görüntülenme sayılarını, gerçek dönüşümleri ve kampanyanızın dönüşüm oranlarını gözlemleyebilirsiniz.
Ayrıca "Potansiyel Müşteriler" bölümüne giderek lead'leri keşfedebilirsiniz.
Leads tablosu, lead'leriniz hakkında girdiğiniz iletişim bilgileri, cihaz, ülke, şehir, tarih, tarayıcı ve daha fazlası gibi bilgileri kapsamaktadır. Bunları inceleyerek kitleniz hakkında değerli içgörüler edinebilirsiniz.
Ayrıca, popup kampanyanızın etkinliğini kolayca ölçebilirsiniz teşekkürler Popup ROI Hesaplayıcı.
📌 Web sitenize özel bir kod eklemek için, Webflow üzerinde mevcut bir ücretli site planınız olmalı veya yükseltilmiş bir hesap planına geçmelisiniz.
Webflow İçin Etkili Popup Oluşturma İpuçları
Webflow sitenizi etkileyici popuplar ile geliştirmek ve dönüşüm oranlarınızı artırmak istiyorsanız bu ipuçlarını göz önünde bulundurabilirsiniz:
- Kısa ve Öz Tutun: Net ve kısa bir mesajla dikkat çekin. Popuplarınızı gereksiz metinlerden veya öğelerden arındırın. Basit ve doğrudan olun.
- Görsel Çekicilik: Sitenizin estetiğiyle uyumlu, görsel açıdan çekici popuplar tasarlayın. Yüksek kaliteli görseller, göz alıcı renkler ve okunabilir yazı tipleri kullanarak popuplarınızı öne çıkarın.
- Hedeflenmiş Mesajlar: Popup içeriğinizi belirli kitle segmentlerine göre özelleştirin. Kullanıcı davranışları, demografi veya yönlendirme kaynakları gibi kriterlere dayalı olarak Popupsmart'ın hedefleme seçeneklerini kullanarak ilgili mesajlar gösterin.
- Değer Sunun: Ziyaretçilerinize cazip teklifler veya teşvikler sunun. İster indirim kodu, ister ücretsiz kaynak ya da özel içerik olsun, popuplarınızla onlara bir değer sunarak harekete geçmelerini sağlayın.
- Mobil Optimizasyon: Popuplarınızı mobil cihazlar için optimize edin. Akıllı telefonlar ve tabletlerde web taraması yapan kullanıcıların sayısının artmasıyla, mobil uyumlu ve duyarlı popuplar oluşturmak temel gereklilik haline gelmiştir.
- Net Bir Eylem Çağrısı: Ziyaretçileri harekete geçmeye teşvik eden net ve çekici bir eylem çağrısı (CTA) ekleyin. İster kaydolma, ister satın alma ya da daha fazla bilgi edinme olsun, CTA'nız belirgin ve ikna edici olmalıdır.
- Stratejik Zamanlama: Doğru popup zamanlamasını seçin. Ziyaretçileriniz siteye girdikleri anda onları popup yağmuruna tutmak yerine, çıkış niyetleri veya sayfada geçirilen süre gibi kullanıcı davranışlarına göre popupları tetiklemeyi düşünün.
Bu ipuçlarını takip ederek, Webflow siteniz için etkileşimi, dönüşümleri ve başarıyı artıracak etkili popuplar oluşturabilirsiniz.
Sonuç
Webflow'da açılır pencere oluşturma rehberinin, yüksek dönüşüm sağlayan açılır pencereler oluşturmanıza ve satışlarınızı maksimize etmenize yardımcı olacağını umuyorum!
Bu rehberde açıklanan iki yöntemi bilgi ve tecrübenize göre kullanabilirsiniz.
Webflow'da açılır pencereler oluşturmak biraz tecrübe ve tasarım bilgisi gerektirse de, Popupsmart sayesinde sadece dakikalar içinde açılır pencerenizi oluşturup özelleştirebilirsiniz.
Hangisinin sizin için en iyi çalıştığını görmek için her ikisini de deneyin.
Gitmeden önce diğer blog yazılarımıza da göz atın:
