Divi ve GiveWP sayfaları ile Salı günü nasıl yapılır
Bunu hiç duymadıysanız, burada zarif temalarda devasa bir Kara Cuma ve Cyber Pazartesi kampanyası başlatmaya hazırlanıyoruz. Ama bu yıl gerçekleşen başka harika şeyler de var. Buna Salı (bu yıl 28 Kasım’da düşüyor) olarak adlandırılır ve dünyadaki kar amacı gütmeyen bir kuruluşun herkese kişisel alışveriş için cüzdanlar verdiklerinde, gerekli insanlara bağış yapmayı düşünebileceklerini hatırlatma girişimidir. İyi fikir! Topluluk güçlendirme işimize dahil olduğumuz için, divi (veya ekstra) kullananlara yardım etmenin ve kar amacı gütmeyen kuruluşların mümkün olan en iyi verilen bağış sayfalarını oluşturması için iyi bir fikir olacağını düşünüyoruz.
İşte bugün ne yapacağımıza bir bakış. Bugünün gönderisindeki nihai sonuçların önizlemesi, görsel olarak şaşırtıcı (ve elbette işlevsel) bir bağış formu ile tamamlanmış güzel bir Salı günleri oluşturacağız.
Ardından, bağış formu seçeneğini göreceksiniz. Demi sekmesini çalıştıralım. Bağış seçeneği olarak adlandırılan ilk sekmede, aşağıdaki ayarları üstte yapılandırın. Bağış seçeneği: Çok seviyeli bağış bağış ekranı: Özel numara düğmesi: Bağış seviyesinde etkinleştirilen, aşağıdaki bağış seviyesini ayarlayın: 1 $, 5 $, 10 $, 25 $, 50 $, 100 $. Yeni varsayılan olarak 5,00 $ bağış seviyesi ayarladığınızdan emin olun. Şimdi Form Ekran sekmesine geçin. Burada yapmanız gereken tek şey, görünüm seçenek ayarlarını sermaye olarak değiştirmektir. Hedef sekmesi bağışında önce hedef bağış seçeneğini etkinleştirin. Bunu bitirdikten sonra hedefinizi ayarlayın. Benimkini 1.000 dolara ayarladım. Hedef biçimi de yüzdeye ayarladım. Bu, izleyicilere topladığımız gerçek para miktarını değil, elde ettiğimiz hedeflerimizin yüzdesini bilmesini sağlayacaktır. Ve son olarak, ilerleme bıçaklarının rengini tüm web sitelerimde kullanılan aynı yeşil renge uyacak şekilde değiştirdim (#07C907). Son olarak, bazı form içeriği eklememiz gerekir. Form İçeriği sekmesinde, görüntüleme içeriğini etkinleştirin. Ardından, içerik alanına biraz metin ekleyin. Bu öğreticinin amaçları doğrultusunda, yapılandırmamız gereken formu belirler. Yayın düğmesini tıklayın ve daha sonra bu bağış formunun kısa bir koduna ihtiyacınız olacağına dikkat edin. Bu formu gerçek olarak ayarlarken, bir bağış> ayarlar açmanız ve ödeme kapıları, e -posta vb. Gibi şeyleri yapılandırmanız gerekir. Resim Varlıklarınızı Hazırlayın Form bölümümüz için de özel bir arka plan resmine ihtiyacımız olacak. Bu elbette isteğe bağlıdır, formun çalışma şeklini etkilemez. Ancak harika görünüyor ve çiftçi pazar örnekleri için iyi bir tasarım ekliyor. Bu resmi yapmak için Photoshop kullanıyorum, ancak GIMP adlı ücretsiz bir yazılım da kullanabilirsiniz. Bu, aynı özelliklerin çoğuna sahip açık kaynaklı bir araçtır. İşte nasıl yapılacağı. İlk olarak, kendinize kâr amacı gütmeyen kuruluşunuzla ilgili unsurlara sahip bir resim bulun. Kullandığım örnek çiftçi pazarı için olduğu için sebze kullanmaya karar verdim. “İzole sebzeler” için web sitesi stok web sitesinde arama yaptım. Genellikle, görüntü stok web sitesinin görüntüsündeki “izole” terimi, beyaz arka plana sahip öğeleri ifade eder. Bu, arka planı çıkararak onları kolayca izole eder. Tam olarak ne yaptığım. İşte bulduğum resimler. Daha sonra resmi Photoshop’ta açtım.
Başlangıç katman varsayılan olarak kilitlendiğinden, üzerinde sağlanarak ve “yinelenen katman” seçerek kopya. Ardından, yanındaki göz simgesine tıklayarak ilk katmanı gizleyin. Ardından, sebze elementindeki ve çevresindeki tüm beyaz boşluğu seçmek için sihirli bir çubuk kullanın. Silmek için geri adım düğmesine basın. Ardından, resim> tuval boyutu için üst menünüzde gidin ve tuval boyutunuzu 1920×1080 olarak değiştirin. Bunu yaptığınızda, öğenizin yeni tuvalinize kıyasla çok büyük olması muhtemeldir. Klavyenizde+T’ye basın veya Düzenle> Transform> ölçeğine gidin. Yeni tuval boyutuna uyacak şekilde izole edilmiş eleman katmanınızın boyutunu değiştirin. Bu, şimdilik bu resimde yapacağımız kadarıyla. Bu yeni Photoshop dosyasını kaydettiğinizden emin olun. Boyut referansı olarak yeni bir bağış formumuz var. Divi’de bir tasarım yapın, eğer bunu yapmadıysanız, yeni çiftçiler pazar düzeni paketimizi (ücretsiz) indirebilir ve yükleyebilirsiniz. Düzen paketini yüklemek için yayındaki talimatları izleyin. Kurulduktan sonra, sitenizi burada tartışacağımız bir sonraki ayarlama aşamasına hazırlamak için bu blogun yayınındaki talimatları izleyin. Hazır olduğunuzda, bağış sayfanıza gidin ve görsel üreticiyi etkinleştirmek için sayfanın üstünde Botton kullanın. Sizi sayfanın altına götüreceğim, zamanla ayarlamalar yapacağım. Bu sayfayı Salı Verme Kampanyası için hazırladığımız için, hemen yukarıda bahsetmemiz gerekebilir. Bu yüzden imleci kahramanınıza gidin ve gri modül kontrolündeki dişli simgesini tıklayarak modül ayarlarını açın.
Ardından, hala içerik sekmesindeyken, aşağı kaydırın ve bağlantı ayarlarını açın. Başlık Sütunu #1 URL’de “#donation” metnini yerleştirin. Bu, aşağıda yapacağımız formun bir çapa bağlantısı olarak işlev görecektir. Son olarak, Tasarım sekmesine gidin ve alt başlık ayarlarını açın. Alt başlık yazı tipi ağırlığını kalın olarak ayarlayın. İlk bölüm bitti. Üçüncü bölüme kaydırın (büyük bir alıntı görüntüler) ve mavi kontroldeki dişli simgesini tıklayın. Arka plan rengini #f6f6f6 olarak ayarlayın.
Ardından, alıntı metin modülü için modül ayarlarını açın. Arka planı #f6f6f6 olarak da değiştirin. Bu bölüm de şimdi tamamlandı. Aşağıdaki dördüncü bölüme geçin. Bu bağış formumuzun bir parçası. Bu bölüm düzen paketinde olduğundan, bu daha çok insanların size ne kadar vermek istediklerini vaat etmek için iletişim formunu kullanabileceği bir “vaat” kısmıdır. Ancak bunu doğrudan para alabileceğimiz gerçek bir bağış biçimine dönüştüreceğiz.
Parça ve iş ayarlarıyla başlayalım. İlk olarak, arka plan rengini değiştirmemiz gerekiyor. Yukarıdakilerle aynı #f6f6f6 olarak ayarlayın. Ardından, Tasarım sekmesinde boşluk seçeneğini açın. Aşağıdaki özel dolguyu ekleyin: Üst: 250 piksel sağ: 40 piksel dip: 250 piksel sol: 40 piksel
Son olarak, hala bölümü ayarlarken, Gelişmiş sekmesine gidin ve CSS ID & Class Control’ü açın. CSS kimliği altında “Bağış” kelimesini yazın. Yeni ayarlarınızı kaydedin. Şimdi vaat formumuzdan kurtulmamız gerekiyor. İki metin modülü ve temas formu modüllerinden oluşur. Lütfen ve sil. Bunun yerine, metin modülünü ekleyin. Yeni test modülüne, daha önce yaptığımız bağış formu için kısa bir kod yerleştirin. Arka planı katı beyaza (#ffffff) ayarlayın. Şimdi tasarım sekmesine gidin. Bilinen küçük bir sır, üçüncü tarafların kısa kodu tarafından üretilen öğelerin metin modülünün tasarım ayarları kullanılarak belirli bir dereceye kadar ayarlanabileceğidir. Metin seçeneği altında, aşağıdaki ayarları yapılandırın: Metin Boyutu: 18px Metin Hattı Yüksekliği: 1.8EM H2 için metin seçeneği başlığı altında, aşağıdaki ayarları yapılandırın: Başlık 2 Metin Boyutu: 36px POS 2 Hat Yüksekliği: 1.5EM Alan seçeneği altında , Aşağıdaki ayarları yapılandırın: Dolgu özel: 50xp (tüm alanlar için) Kutu Gölge seçeneği altında, üst satırdaki son seçeneği seçin (en sağda). Daha sonra bu seçeneği yapılandırın: Gölge Kutusunun Dağıtımının Mukavemeti: -2px Son, animasyon seçeneği altında, bu ayarı yapılandırın: Animasyon Stili: Bounce Animasyon Yönü: Animasyon Süresi: 800ms Gecikme Animasyon: 400ms Animasyon Başlangıç Opaklığı:% 100% Tüm ayarları yapılandırdıktan sonra. Bu tasarım, kaydedin. Bağış formunuz şimdi böyle görünecek. Tabii ki bu çok kabul edilebilir bir form. Ama bence bu biraz sıkıcı. Onu baharatlamak için yapmak istediğim iki şey var. İlk olarak, bağış düğmesi stilini şimdi tüm web sitelerindeki diğer bağış düğmeleri ile eşleştirmek için eşleştireceğiz. Divi> Divi Kütüphanesi’ni girerek tema seçeneklerinize gidin> Genel CSS kutusuna gidin ve stil düğmesini yapıştırın: /* Stil eklentisini verin* /.Give-btn.give-btn-modal { Arka plan: #07C907; Sınır: Yok;
Border-Radius: 0px; Renk: #fff;
Dolgu: 20px;
İmleç: işaretçi;
Çizgi yüksekliği: 1.2em;
yazı tipi boyutu: 18px;
Yazı tipi-ağırlık: kalın;
}
#-satın alma-button.give-submit.give-btn {
Arka plan: #07C907;
Sınır: Yok;
Border-Radius: 0px;
Renk: #fff;
Dolgu: 20px;
İmleç: işaretçi;
Çizgi yüksekliği: 1.2em;
yazı tipi boyutu: 18px;
Yazı tipi-ağırlık: kalın;
}
Değişikliklerinizi kaydedin ve bağış sayfanıza geri dönün. Yenileyin ve formunuzu görün. Şimdi böyle görünmeli.
Şimdi bir yere gidiyoruz! Son bir dokunuş ekleyelim. Daha önce yapmaya başladığımız parçanın arka plan görüntüsü. Tamamlamak için tarayıcı pencerenizin boyutunu 1920 × 1120 olarak değiştirin. WhatsMybrowYertine.com gibi web sitelerini kullanabilirsiniz. Ardından, yeni formumuz ortada bağış sayfanızın ekran görüntüsünü alın. Böyle görünmeli.
Bu yeni ekran görüntüsünü Photoshop’ta daha önce oluşturduğumuz Photoshop dosyasıyla birlikte açın. Formunuzu seçmek için Dikdörtgen seçim çerçevesini kullanın. Ardından, formunuz hariç her şeyi seçmek için> Ters’i seçin. Yeni seçiminizi silin. Artık buna benzeyen bir tuvaliniz olmalı.
Artık arka plan görüntüsünüz için bir referans olarak kullanabileceğiniz doğru “Mockup” şekline sahipsiniz. Her iki Photoshop dosyası da açıkken, izole edilmiş formunuzu içeren Photoshop katmanını arka plan görüntü dosyanıza sürükleyin. Katman panelinizde form opaklık katmanınızı%50 olarak ayarlayın. Ardından, daha sonra hala seçildiğinde, kilit ve kilit simgesini tıklayın. Şimdi böyle görünmeli.
Artık katman panelinde sebze katmanınızı seçebilirsiniz. Tek tek öğeleri seçmek ve istediğiniz yapılandırmayı elde edene kadar bunları tekrar düzenlemek için bir laso aracı kullanın. Son yapılandırmam böyle görünüyor. Kendi son yapılandırmanızdan sonra Dosya> Dışa Aktar> Dışa Aktarma AS’ye gidip PNG’yi şeffaf bir arka planı korumak için seçeceksiniz. Şimdi resmi bağış sayfamızdaki bağış formu bölümüne Divi web sitemize geri ekleyebiliriz. Bölüm ayarlarını açın. Arka planın altında, daha önce ayarladığımız rengi bırakın ve resim seçeneğini seçin. Yeni arka plan resminizi buraya ekleyin. Ardından aşağıdaki ayarları yapılandırın: Arka plan görüntü boyutu: arka planın gerçek boyutu görüntü konumu: Orta
Bu ayarı kaydedin. Form bölümünüz şimdi tamamlanmalıdır. Tasarımınızı tamamen tamamlamak için (tam sayfalarımızı yazının başlangıcından itibaren eşleştirmek için), geri kalan sayfanın arka plan rengini ekran görüntülerinde eşleşecek şekilde değiştirin. Gri (#f6f6f6) veya beyaz (#ffffff) kullanacaksınız. Bağış toplama için tebrikler! Divi ve eklenti verildiği kadar güçlü ile, Salı günü çabalarınızın kesinlikle büyük bir başarı olacağından eminiz. Takip ettiğin için teşekkürler. Bu öğreticide kapsanan her şeye dair hala yardıma ihtiyacınız varsa, bugün doğrudan saat 15: 00’de Facebook sayfamızda ve YouTube kanalında tüm süreci bir alarak göstereceğim. Yürürken de sorular soracağım. Orada görüşmek dileğiyle!
