Divi ve GiveWP ile Salı Günü Açılış Sayfası Nasıl Oluşturulur

Duymadıysanız, Elegant Themes'ta devasa bir Kara Cuma ve Siber Pazartesi kampanyası başlatmaya hazırlanıyoruz. Ama yılın bu zamanında gerçekleşen başka bir harika şey daha var. Buna Salı Günü (bu yıl 28 Kasım'a denk geliyor) deniyor ve dünyanın kâr amacı gütmeyen kuruluşlarının herkese, kişisel alışveriş için cüzdanlarını çıkarmış olsalar da, bağış yapmayı düşünebileceklerini herkese hatırlatma çabası. da gerek. Ne güzel bir fikir! Topluluğumuzu güçlendirme işinde olduğumuzdan, Divi (veya Ekstra) kullanan ve kâr amacı gütmeyen kuruluşlar için çalışanların en iyi Salı Günü Bağışları açılış sayfasını yapmalarına yardımcı olmanın iyi bir fikir olacağını düşündük. yapabilen.

İşte bugün oluşturacağımız şeye hızlı bir bakış.

Son Sonuç Önizlemesi

Bugünün gönderisinde, görsel olarak çarpıcı (ve elbette işlevsel) bir bağış formuyla tamamlanmış güzel bir Salı Günü Verme açılış sayfası oluşturacağız.

GiveWP Eklentisini Kurun ve Yeni Bir Form Oluşturun

Bu eğitimde kullanacağımız bağış formu, GiveWP eklentisi tarafından oluşturulmuştur. Yüklemek için WordPress Yöneticinizde Eklentiler > Yeni Ekle seçeneğine gidin. Orada, Give eklentisini bulmak için arama özelliğini kullanın. “Şimdi Kur” düğmesine tıklayın ve ardından etkinleştirin.

Ardından, Bağışlar > Form Ekle'ye gidin. Bir form başlığı girin. “Yerel Çiftçinizi ve Sürdürülebilir Tarımı Destekleyin”i seçtim.

Ardından, Bağış Formu Seçeneklerini göreceksiniz. Sekme sekme üzerinden geçelim.

Bağış Seçenekleri adlı ilk sekmede, üst bölümde aşağıdaki ayarları yapılandırın.

Bağış seçeneği: Çok Seviyeli Bağış

Bağış Ekranı: Düğmeler

Özel Tutar: Etkin

Bağış Düzeyi bölümünde şu bağış düzeylerini ayarlayın: 1$, 5$, 10$, 25$, 50$, 100$. Yeni varsayılanınız olarak 5,00 ABD doları bağış düzeyini ayarladığınızdan emin olun.

Şimdi Form Görüntüleme sekmesine geçin. Burada yapmanız gereken tek şey Görüntü Seçenekleri ayarını Modal olarak değiştirmek.

Bağış Hedefi sekmesinde, önce Bağış Hedefi seçeneğini etkinleştirin. Bunu yaptıktan sonra hedef tutarınızı belirleyin. Benimkini 1000 dolara ayarladım. Ayrıca Hedef Formatını yüzde olarak ayarladım. Bu, form izleyicilerinin, topladığımız gerçek para miktarını değil, ulaştığımız hedefin yüzdesini bilmesini sağlar. Ve son olarak, ilerleme çubuğu rengini web sitemin geri kalanında kullanılanla aynı yeşille (#07c907) eşleşecek şekilde biraz değiştirdim.

Son olarak, bazı form içeriği eklememiz gerekiyor. Form İçeriği sekmesinde, İçeriği Görüntüle'yi etkinleştirin. Ardından, içerik alanına biraz metin ekleyin.

Bu öğreticinin amaçları doğrultusunda, yapılandırmamız gereken tüm Give form ayarları bunlardır. Yayınla düğmesini tıklayın ve bu bağış formunun kısa koduna daha sonra ihtiyacınız olacağını unutmayın.

Bu formu gerçek olarak ayarlarken, Bağışlar > Ayarlar'a gitmeniz ve Ödeme Ağ Geçitleriniz, E-postalarınız vb. gibi şeyleri yapılandırmanız gerekir.

Görüntü Varlıklarınızı Hazırlayın

Ayrıca form bölümümüz için özel bir arka plan resmine ihtiyacımız olacak. Bu elbette isteğe bağlıdır, formun nasıl çalıştığını etkilemez. Ancak havalı görünüyor ve çiftçi pazarı örneğimize güzel bir tasarım bağlantısı ekliyor.

Bu görüntüyü oluşturmak için Photoshop kullandım ama muhtemelen Gimp adlı ücretsiz bir yazılım da kullanabilirsiniz. Aynı özelliklerin çoğuna sahip açık kaynaklı bir araçtır.

İşte nasıl oluşturulacağı.

İlk olarak, kendinize kar amacı gütmeyen kuruluşunuzla ilgili unsurlar içeren bir resim bulun. Kullandığım örnek bir çiftçi pazarı için olduğu için sebze kullanmaya karar verdim. “İzole sebzeler” için bir stok görsel web sitesinde arama yaptım. Tipik olarak, bir stok görüntü web sitesindeki "izole" terimi, beyaz bir arka plan üzerindeki öğeleri ifade eder. Bu, arka planı silerek onları izole etmeyi kolaylaştırır. Bu tam olarak yaptığım şey.

İşte bulduğum görüntü.

Sonra o resmi photoshopta açtım.

İlk katman varsayılan olarak kilitli olduğundan, üzerine sağ tıklayıp “Katmanı Çoğalt” seçeneğini seçerek çoğaltın. Ardından, yanındaki göz simgesine tıklayarak ilk katmanı gizleyin.

Ardından, sebze öğelerinin etrafındaki ve içindeki tüm beyaz alanı seçmek için sihirli değnek aracını kullanın. Silmek için geri al tuşuna basın.

Ardından, üst menünüzde Görüntü > Tuval Boyutu seçeneğine gidin ve tuvalinizi 1920×1080 olarak yeniden boyutlandırın. Bunu yaptığınızda, öğeleriniz yeni, daha küçük tuvalinize kıyasla muhtemelen çok büyük olacaktır.

Klavyenizde komut+T tuşlarına basın veya Düzen > Dönüştür > Ölçek seçeneğine gidin . Yalıtılmış öğeler katmanınızı yeni tuval boyutuna sığacak şekilde yeniden boyutlandırın.

Şimdilik bu görüntü üzerinde gideceğimiz yer bu kadar. Bu yeni photoshop dosyasını kaydettiğinizden emin olun. Beden referansı olarak yeni bağış formumuzu aldıktan sonra aşağıdan devam edeceğiz.

Divi'de Tasarım Oluşturma

Henüz yapmadıysanız, yepyeni (ücretsiz) Farmers Market Layout Pack'imizi indirip kurmak isteyeceksiniz. Düzen paketini yüklemek için bu gönderideki talimatları izleyin. Yüklendikten sonra, burada ele alacağımız özelleştirmenin bir sonraki aşaması için sitenizi ayarlamak için bu blog gönderisindeki talimatları izleyin.

Hazır olduğunuzda, Bağışta Bulun sayfanıza gidin ve görsel oluşturucuyu etkinleştirmek için sayfanın üst kısmındaki düğmeyi kullanın. Sizi sayfa bölüm bölüm alıp, ilerledikçe özelleştirmeler yapacağım.

Bu sayfayı Salı Günü kampanyası için hazırladığımıza göre, muhtemelen en üstte bundan bahsetmeliyiz. Bu yüzden kahraman bölümünüzün üzerine gelin ve gri modül kontrollerindeki dişli simgesine tıklayarak modül ayarlarını açın.

Ardından, İçerik sekmesindeyken aşağı kaydırın ve bağlantı ayarlarını açın. Alan başlığı Düğme #1 URL'sine “#donate” metnini yerleştirin. Bu, aşağıda oluşturacağımız forma bir bağlantı bağlantısı olarak işlev görecektir.

Son olarak, Tasarım sekmesine gidin ve Alt Başlık Metni ayarlarını açın. Alt Başlık Yazı Tipi Ağırlığını kalın olarak ayarlayın.

İlk bölüm şimdi tamamlandı. Üçüncü bölüme (büyük bir alıntı içeren) ilerleyin ve mavi bölüm kontrollerindeki dişli simgesine 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. Bunun arka planını da #F6F6F6 olarak değiştirin.

Bu bölüm de artık tamamlandı. Hemen altındaki dördüncü bölüme geçin. Burası bağış formu bölümümüz.

Bu bölüm yerleşim paketinde bulunduğundan, daha çok insanların ne kadar vermeyi düşündükleri konusunda size bir rehin göndermek için iletişim formunu kullanabilecekleri bir “rehin” bölümüdür. Ama bunu doğrudan para kabul edebileceğimiz gerçek bir bağış formuna dönüştüreceğiz.

Bölüm ayarları ile başlayalım ve çalışalım. Öncelikle arka plan rengini değiştirmemiz gerekiyor. Yukarıdaki bölümle aynı #F6F6F6'ya ayarlayın.

Ardından, Tasarım sekmesinde, Aralık seçeneklerini açın. Aşağıdaki özel dolguyu ekleyin:

Üst: 250 piksel

Sağ: 40 piksel

Alt: 250 piksel

Sol: 40 piksel

Son olarak, hala bölüm ayarlarındayken Gelişmiş sekmesine gidin ve CSS Kimliği ve Sınıfları kontrollerini açın. CSS kimliğinin altına “bağış” kelimesini yazın.

Yeni ayarlarınızı kaydedin.

Artık rehin formumuzdan kurtulmamız gerekiyor. İki metin modülünden ve bir iletişim formu modülünden oluşur. Devam et ve onları sil. Onların yerine bir metin modülü ekleyin.

Yeni test modülünde, daha önce oluşturduğumuz Bağış bağış formunun kısa kodunu yerleştirin. Arka planı düz beyaza ayarlayın (#ffffff).

Şimdi Tasarım sekmesine gidin. Az bilinen bir sır, üçüncü taraf kısa kodları tarafından oluşturulan öğelerin, metin modülünün tasarım ayarları kullanılarak bir dereceye kadar özelleştirilebilmesidir.

Metin seçenekleri altında aşağıdaki ayarları yapılandırın:

Metin Metin Boyutu: 18px

Metin Satır Yüksekliği: 1.8em

H2 için Başlık metni seçenekleri altında aşağıdaki ayarları yapılandırın:

Başlık 2 Metin Boyutu: 36px

Başlık 2 Çizgi Yüksekliği: 1.5em

Aralık seçenekleri altında aşağıdaki ayarları yapılandırın:

Özel Dolgu: 50xp (tüm alanlar için)

Kutu Gölgesi seçenekleri altında, üst sıradaki (en sağda) son seçeneği seçin. Ardından bu seçeneği yapılandırın:

Kutu Gölge Yayılma Gücü: -2px

Son olarak, Animasyon seçenekleri altında şu ayarları yapılandırın:

Animasyon Stili: Sıçrama

Animasyon Yönü: Yukarı

Animasyon Süresi: 800ms

Animasyon Gecikmesi: 400ms

Animasyon Opaklığı Başlatma: %100

Tüm bu tasarım ayarlarını yapılandırdığınızda, kaydedin. Bağış formunuz şimdi böyle görünmelidir.

Elbette bu tamamen kabul edilebilir bir formdur. Ama bence biraz sıkıcı. Tatlandırmak için yapmak istediğim iki şey var. İlk olarak, Şimdi Bağış Yap düğmesi stilini web sitesindeki diğer Bağışta Bulun düğmeleriyle eşleştirmek için eşleştireceğiz.

Divi > Divi Kitaplığı > Genel seçeneğine giderek tema seçeneklerinize gidin ve Özel CSS kutusuna gidin ve takip düğmesi stillerini buraya yapıştırın:

/*Give Plugin Styles*/

.give-btn.give-btn-modal {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

#give-purchase-button.give-submit.give-btn {
    background: #07C907;
    border: none;
    border-radius: 0px;
    color: #fff;
    padding: 20px;
    cursor: pointer;
    line-height: 1.2em;
    font-size: 18px;
    font-weight: bold;
}

Değişikliklerinizi kaydedin ve bağış sayfanıza geri dönün. Yenileyin ve formunuza bir göz atın. Şimdi böyle görünmelidir.

Şimdi bir yere varıyoruz! Son dokunuşu ekleyelim. Daha önce oluşturmaya başladığımız bölüm arka plan görüntüsü.

Bunu tamamlamak için tarayıcı pencerenizi 1920×1120 olarak yeniden boyutlandırın. whatsmybrowsersize.com gibi bir web sitesi kullanabilirsiniz.

Ardından, ortalanmış yeni formumuzla bağış sayfanızın ekran görüntüsünü alın. Bu gibi görünmelidir.

Bu yeni ekran görüntüsünü daha önce oluşturduğumuz photoshop dosyasıyla birlikte Photoshop'ta açın.

Formunuzu seçmek için Dikdörtgen Seçim Çerçevesi aracını kullanın. Sonra, her şeyi ama şeklinizi seçmek için Seç> Inverse gidin. Yeni seçiminizi silin. Şimdi buna benzeyen bir tuvaliniz olmalı.

Artık arka plan resminiz için referans olarak kullanabileceğiniz doğru boyutta bir "form maketiniz" var. Her iki photoshop dosyası da açıkken, izole formunuzu içeren photoshop katmanını arka plan resim dosyanıza sürükleyin.

Katmanlar panelinizde form katmanınızın opaklığını %50'ye ayarlayın. Ardından, form daha sonra seçiliyken kilit simgesine tıklayın ve kilitleyin. Şimdi böyle görünmelidir.

Artık katmanlar panelinde sebze katmanınızı seçebilirsiniz. Tek tek öğeleri seçmek için kement aracını kullanın ve beğendiğiniz bir yapılandırma elde edene kadar bunları silin veya yeniden düzenleyin. Son yapılandırmam şöyle görünüyordu.

Kendi son yapılandırmanıza sahip olduğunuzda, şeffaf arka planı korumak için Dosya > Dışa Aktar > Farklı Dışa Aktar'a gidecek ve PNG'yi seçeceksiniz.

Şimdi bu resmi Divi web sitemizdeki Bağış sayfamızın Bağış Formu bölümüne ekleyebiliriz.

Bölüm ayarlarını açın. Arka Plan altında, daha önce belirlediğimiz rengi kendi haline bırakın ve görüntü seçeneğini seçin. Yeni arka plan resminizi buraya ekleyin. Ardından aşağıdaki ayarları yapılandırın:

Arka Plan Resmi Boyutu: Gerçek Boyut

Arka Plan Resmi Konumu: Merkez

Bu ayarları kaydedin. Form bölümünüz şimdi tamamlanmış olmalıdır.

Tasarımınızı tamamen tamamlamak için (gönderinin başından itibaren tam sayfa önizlememizle eşleşmesi için), kalan sayfa bölümlerinin arka plan renklerini ekran görüntüsündekilerle eşleşecek şekilde değiştirmeniz yeterlidir. Gri (#F6F6F6) veya beyaz (#ffffff) kullanacaksınız.

Mutlu Bağış Toplama!

Divi ve Give kadar güçlü bir eklenti ile Giving Salı çabalarınızın büyük bir başarı elde edeceğinden eminiz. Takip ettiğiniz için teşekkürler. Bu eğitimde ele alınan herhangi bir konuda hala yardım istiyorsanız, bugün saat 15:00'te Facebook sayfamızda ve YouTube Kanalımızda tüm bu süreci tek seferde göstereceğim bir canlı yayın yapacağım. Ayrıca ilerledikçe soruları çözeceğim. Orada görüşmek dileğiyle!