Divi ve WooCommerce ile Özel Etkinlik Listeleme ve Kayıt Sayfaları Nasıl Oluşturulur

Etkinlikler düzenleyen bir kuruluşta gönüllü çalışıyorsanız veya gönüllü çalışıyorsanız, muhtemelen çok çeşitli etkinlik planlama, yönetim ve tanıtım araçlarına aşinasınızdır. Bir etkinlik düzenleme görevine biraz farklı yaklaşımlara sahip Facebook, Meetup ve bir sürü WordPress eklentisi var.

Bu araçlar harika. Ve aklıma gelen hemen hemen her kullanım durumu için bunlardan biri mükemmel çalışıyor. Ancak bazı durumlarda, örneğin yalnızca birkaç defaya mahsus etkinlik veya az sayıda yıllık etkinlik gerçekleştiren bir kuruluş durumunda, bu seçenekler aşırıya kaçabilir. Ya da bu araçların birçoğunda tüm olaylar aynı göründüğünden, etkinliğin kuruluşunuz için ne kadar önemli olduğunu temsil etme konusunda yeterince iyi bir iş çıkarmıyor olabilirler.

Özel bir konuğu onurlandırmak için bir mezuniyet töreni veya akşam yemeği gerçekten sıradan bir aşçılık gibi görünmeli ve hissetmeli midir?

Bana sorarsanız, cevap kocaman bir hayır.

Ancak bu araçlardan hiçbiri görev için tam olarak uygun değilse, bu başka bir soruyu gündeme getirir: Bunun yerine ne yapmalıyız?

Cevabım şu: Divi ile özel etkinlik listesi ve kayıt sayfaları oluşturun!

Son Sonucun Önizlemesi

Pazartesi günü yayınladığımız Farmers Market Layout Pack'in zaten özel bir etkinlik sayfası var. Böylece bu eleman halledilir. Bu düzen paketini ücretsiz olarak indirebilir ve tasarımı olduğu gibi kullanabilir veya tercihlerinize göre ayarlayabilirsiniz.

Ancak görebileceğiniz gibi, bu etkinliklerin her birinin “Kayıt Bilgisi” yazan bir bağlantısı var. Bunu Facebook'a veya Meetup'a bağlamak istiyorsanız, iş bitti. Ancak tüm etkinlik ayrıntılarınızın tasarımı ve kayıt süreci üzerinde daha fazla kontrol sahibi olmak istiyorsanız, bunları aşağıda tasarladığım gibi web sitenizdeki bir sayfaya bağlayabilirsiniz.

Bu özel etkinlik listeleme/kayıt sayfası, etkinliğinizi, kuruluşunuzla etkileşime girenlerin yaşamasını istediğiniz deneyimi sağlayan tamamen markalı bir şekilde sunmanıza olanak tanır.

Oldukça temiz, değil mi?

İşte kendin nasıl yaratacağın!

Tasarım Varlıklarınızı Hazırlama

Bu eğitimle birlikte izlemeniz gereken birincil varlık, yepyeni (ücretsiz) Farmers Market Layout Pack'imizdir. İndirmek ve kurmak için bu gönderideki talimatları izleyin. Ardından, sitenizi bir sonraki seviyeye taşımak için bu gönderide belirtilen adımları izlemenizi şiddetle tavsiye ederim.

Ayrıca Farmers Market Layout Pack gönderisinden görüntü varlıkları klasörünü indirmek isteyeceksiniz. Yazının en altında bulunur. Orada, kullanmak isteyeceğimiz ve yerleşim paketinin kendisinde olmayan bir resim var, adı verilen farmer-market-22.jpg . Bu resmi 2496 piksele 1665 piksel tam çözünürlükten 1200 piksele 800 piksele yeniden boyutlandırdım.

Farmers Market Layout Pack'e veya resim varlıklarına henüz dahil olmayan kullandığım tek resim, tasarımın “Eğitmeninizle Tanışın” bölümü için 600 piksele 800 piksellik bir portre resmidir. Bu nedenle, takip ederken bu bölüm için kendi resminizi sağlamanız gerekecektir.

(Ya da daha önce yayınladığımız Travel Layout Pack'ten kullandığımı alın.)

Divi ve WooCommerce ile Özel Etkinlik Listeleme ve Kayıt Sayfaları Nasıl Oluşturulur

Youtube Kanalımıza Abone Olun

Divi'de Özel Etkinlik Kayıt Sayfası Oluşturma

Öncelikle WordPress Admin'de Sayfalar > Yeni Ekle'ye giderek yeni bir sayfa oluşturalım. Listeleme sayfamızdan bir kayıt sayfası oluşturacağım etkinlik, Eylül ayında gerçekleşmesi beklenen Organik Aşçılık Kursu. Bu yüzden yeni sayfama “Eylül Organik Yemek Kursu” adını vereceğim. Ardından mor Use Divi Builder butonuna tıklamamız gerekiyor.

Şimdi, Use Visual Builder yazan mavi butona tıklayarak tasarım çalışmalarımız için işleri web sitesinin ön ucuna taşıyabiliriz.

İşleri başlatmak için bölüm ayarlarınızı açmak için mavi dişli simgesine tıklayın. Arka plan altında, resim sekmesine tıklayın ve yeniden boyutlandırılmış çiftçi-market-22.jpg resmimizi ekleyin. Ardından, arka plan Görüntü Karışımını Kaplama olarak ayarlayın.

Ardından, hala arka plan ayarlarında, renk sekmesine atlayın ve arka plan rengini rgba(0,0,0,0.47) olarak ayarlayın. Ayarlarınızı kaydedin.

Ardından, sayfa başlığımızı ekleme zamanı. bu satır için sütun tercihlerinizi seçmek için yeşil satırın ortasındaki (altındaki değil) yeşil artı simgesini tıklayın. Tek sütun seçin. Daha sonra bir modül eklemeniz istenecektir. Bir metin modülü ekleyin.

“Eylül Organik Aşçılık Kursu” metnini girin ve paragraf stilinizi h1 olarak ayarlayın.

Ardından metin modülünüzün tasarım sekmesine geçin ve Başlık Metni için tasarım ayarlarını açın. Aşağıdaki ayarları yapılandırın:

Başlık Yazı Tipi: Lato

Başlık Yazı Tipi Ağırlığı: Kalın

Başlık Metni Hizalama: Orta

Başlık Metni Boyutu: 46px

Başlık Metni Rengi: #ffffff

Ardından, Aralık seçeneklerine ilerleyin. Aşağıdaki ayarları yapılandırın.

Dolgu Üstü: 100px

Alt Dolgu: 75px

Bu ayarları kaydedin ve ardından yeni bir normal bölüm (mavi) oluşturun. Satırınız için iki eşit sütun seçeneğini belirleyin. Soldaki sütuna bir görüntü modülü ekleyin. Kullandığım görüntünün adı Produce-14.jpg ve Farmers Market Layout Pack'i kullandığınız için medya kitaplığınızda zaten olması gerekiyor.

İkinci satır sütununa bir metin modülü ekleyin. Aşağıdaki metni yazın:

“Bugün Yerinizi Ayırın

Eylül Organik Aşçılık Kursumuzda yerinizi ayırtın. Bu satın alma, size sınırlı sınıf noktalarından birini ve takip etmeniz gereken tüm malzemeleri sağlar. Sadece kendini getir!”

Paragraf stillerinizi kullanarak “Bugün Yerinizi Ayırın” metnini h2'ye ayarlayın. Ayarlarınızı kaydedin. Şimdi buna benzeyen bir bölüm/satırınız olmalıdır.

Şimdi özelleştirme zamanı! Sırayla başlayalım. Bu, kayıt sayfamızın birincil harekete geçirici mesajı olduğu için öne çıkmasını istiyoruz. Satır arka plan rengini #e55039 olarak ayarlayın.

Şimdi sıramızın tasarım sekmesine geçelim. Aralık seçeneklerini açın ve aşağıdaki ayarları yapılandırın:

Özel Dolgu: Tüm seçenekler için 0 piksel.

Sütun 2 Özel Dolgu:

Üst: 60 piksel

Sağ: 25 piksel

Alt: 25 piksel

Sol: 25 piksel

Ayarları kaydet.

Şimdi görüntü modülü tasarım ayarlarını açın. Boyutlandırma altında, Tam Genişliğe Zorla altında Evet'i seçin. Aralık altında aşağıdaki ayarları yapılandırın.

Özel Kenar Boşluğu:

Üst: -40 piksel

Alt: -40 piksel

Özel Dolgu:

Sol: 60 piksel

Son olarak Animasyon tasarım ayarlarına gidin ve bu ayarları yapılandırın.

Animasyon Stili: Slayt

Animasyon Yönü: Yukarı

Animasyon Yoğunluğu: %8

Animasyon Opaklığı Başlatma: %100

Ayarları kaydet.

Şimdi ikinci satır sütunumuz üzerinde çalışma zamanı. Zaten orada olan metin modülüyle başlayarak. Metin modülü ayarlarını açın ve tasarım sekmesine gidin. Metin altında aşağıdaki ayarları yapılandırın.

Metin Rengi: Açık

Metin Yazı Tipi: Montserrat

Metin Metin Boyutu: 18px

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

Metin Yönü: Yaslanmış

(Metin Yönlendirmesini ayarlamak için Metin Gölgesi ayarlarını geçerek aşağı kaydırın.)

Başlık Metni tasarım ayarları altında, aşağıdakileri h2 başlık stillerine uygulayın.

Başlık 2 Yazı Tipi: Lato

Başlık 2 Metin Hizalama: Orta

Başlık 2 Metin Boyutu: 36px

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

Ardından, Aralık altında aşağıdaki ayarları uygulayın.

Özel Dolgu:

Üst: 10 piksel

Sağ: 60 piksel

Alt: 10 piksel

Sol: 0 piksel

Şimdi butonumuzu eklememiz gerekiyor. Az önce şekillendirdiğimiz metin modülünün altına, metin modülünün altında kayan gri artı simgesine tıklayarak yeni bir düğme modülü ekleyin. Düğme metni olarak "Biletinizi Satın Alın"ı girin ve doğrudan tasarım ayarları sekmesine gidin.

Düğme hizalamanızı merkeze ayarlayın. Ardından, Düğme seçeneklerine gidin ve Düğme için Özel Düğme Stillerini Kullan'ı seçin. Bu ayarları düğmenize uygulayın.

Düğme Metin Boyutu: 18px

Düğme Metin Rengi: #ffffff

Düğme Arka Plan Rengi: #07c907

Düğme Kenar Genişliği: 8px

Düğme Kenar Rengi: rgba(0,0,0,0)

Bu özel düğme ayarlarını uygulamaya devam edin.

Düğme Sınır Yarıçapı: 0px

Düğme Harf Aralığı: 1px

Düğme Yazı Tipi: Lato

Yazı Ağırlığı: Kalın

Ardından, Düğme Tasarım Sekmesi ayarlarını Boşluk'a taşıyın. Bu ayarları uygulayın.

Özel Kenar Boşluğu Sağ: 60px

Ayarları kaydet.

Birincil harekete geçirici mesajınız şimdi tamamlandı, ancak bunun için yapılandırdığımız ayarlar bölümü biraz sıkışık hissettirdi. Bölüm ayarlarımıza geri dönelim ve Aralık seçeneklerimize aşağıdakileri ekleyelim.

Özel Dolgu:

Üst: 110 piksel

Alt: 100 piksel

Ayarları kaydet.

Şimdi bir sonraki bölüme geçebiliriz. Başka bir normal mavi bölüm ekleyin ve tekrar iki sütunlu bir satır seçin. Soldaki ilk sütuna bir metin modülü ekleyin.

Aşağıdaki metni ekleyin:

“Eğitmeninizle Tanışın

Mus duis eros lectus rhoncus nec, odio risus, tortor, dignissim tempor ut. Habitasse ronkus? Massa elementum odio Phasellus cras augue magna odio arcu odio ultricies lorem. Quis tamsayı, sed, habitasse nunc cras, placerat egestas proin! Nunc in magnis Phasellus, dictumst, diam urna?

Augue odio urna ut et platea tamsayı placerat, tristique amet porttitor sagittis aenean ac in, tristique magnis enim totor ultrices sed. Tristique nascetur. Lorem, turpis cras'ta ac! Dapibus enim, ut plata in dignissim velit, urna arcu tortor, nec.”

En üstteki “Eğitmeninizle Tanışın” satırını h2 olarak ayarlayın. Ardından metin modülünün tasarım ayarlarına gidin.

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

Metin Yazı Tipi: Montserrat

Metin Metin Boyutu: 16px

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

Metin Yönü: Yaslanmış

Ardından, Başlık Metni tasarım ayarlarına gidin ve h2 metniniz için aşağıdakileri yapılandırın.

Başlık 2 yazı tipi: Lato

Başlık 2 Yazı Tipi Ağırlığı: Kalın

Başlık 2 Metin Boyutu: 36px

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

Ayarları kaydet.

Şimdi yeni sıramızın ikinci sütununa portre resmimizi ekleme zamanı. Bir görüntü modülü ekleyin, portre görüntünüzü seçin ve aşağıdaki tasarım ayarlarını yapılandırın.

Hizalama: Merkez

Boyutlandırma Genişliği: %75

Ayarları kaydet.

Tamam, bu bölümü neredeyse bitirdik. Sadece bölüm ayarlarına birkaç son dokunuş yapmamız gerekiyor. Mavi dişli simgesine tıklayın ve arka planın altında görüntü seçeneklerini seçin. background-texture.png adlı resmi ekleyin. Ardından Tasarım sekmesine geçin ve aşağıdaki ayarları yapılandırın:

boşluk:

Üst: 60 piksel

Alt: 60 piksel

Animasyon:

Animasyon Stili: Slayt

Animasyon Yönü: Yukarı

Animasyon Gecikmesi: 200ms

Animasyon Yoğunluğu: %2

Ayarları kaydet.

Tamam, iki bölümümüz kaldı. Bu sefer tek bir sütun satırıyla başka bir mavi normal bölüm ekleyin. Satırınıza bir metin modülü ekleyin ve içine “Neyle Çalışacağız” yazın. Metni bir h2'ye ayarlayın ve tasarım sekmesine atlayın. Başlık Metni (elbette h2) altında aşağıdaki ayarları yapılandırın.

Başlık 2 Yazı Tipi: Lato

Başlık 2 Yazı Tipi Ağırlığı: Kalın

Başlık 2 Metin Hizalama: Orta

Başlık 2 Metin Boyutu: 36

Ayarları kaydet.

Üzerinde çalışmayı yeni bitirdiğimiz satırın hemen altına başka bir tek sütun satırı ekleyin. Bu sefer ona bir galeri modülü ekleyin. Resim numaranızı 8 olarak değiştirin ve medya galerinizden sekiz resim seçin. Öğeler altında her iki seçeneği de kapatın, böylece hiçbir başlık, resim yazısı veya sayfa numarası gösterilmez.

Ardından, tasarım sekmesine gidin ve kaplama rengini #0DC20D olarak değiştirin. Ayarlarınızı kaydedin.

Şimdi galeri modülünün satır ayarlarını açın. Tasarım sekmesine gidin ve Aralık altında cilt payı genişliğini 1 olarak ayarlayın. Ayarları kaydedin.

Son olarak, bu bölümlerin tasarım sekmesini açın ve boşlukların altında tüm bölüme 80 piksellik bir üst dolgu verin. Ardından yeni bir mavi normal bölüm oluşturun. Bu, sayfanın son bölümü olacaktır.

Yeni bir tek sütun satırı ekleyin. Yine de boş bir modül eklemek yerine, yukarıdaki bölümden metin modülünü kopyalayın (“Neyle Çalışacağız” yazan). Bunu, üzerine sağ tıklayıp Modülü Kopyala'yı seçerek yapabilirsiniz. Yeni satırınıza yapıştırın.

Doğrudan metne tıklayın ve “Ne Öğreneceksiniz” ile değiştirin.

Yeni metninizin altına iki sütunlu yeni bir satır ekleyin. Sol sütuna bir görüntü modülü ekleyin. Medya kitaplığınızdan dikey olarak yönlendirilmiş kesme tahtası görüntüsünü seçin.

Görüntü modülü tasarımı sekmesinde, Hizalama'yı merkeze ve Boyutlandırma'yı %90'a ayarlayın. Ardından, Animasyon bölümüne aşağıdaki ayarları uygulayın.

Animasyon Stili: Slayt

Animasyon Yönü: Sağ

Animasyon Yoğunluğu: %5

Ayarları kaydet.

Sağdaki sütuna bir tanıtım yazısı modülü ekleyin. İçerik ayarları altında başlığınızı ve açıklayıcı metninizi ekleyin. Ardından, Görüntü ve Simge altındaki simgenizi açtığınızdan emin olun. Onay işareti simgesini kullanmayı seçtim.

Görüntü ve Simge altındaki tanıtıcı modül tasarımı sekmesinde, Simge Rengini #07c907 ve Görüntü/Simge Yerleşimini Sola değiştirin. Gövde Metni altında, satır yüksekliğinizi 1.8em olarak ayarlayın. Ardından, Animasyon seçeneklerine ilerleyin ve aşağıdaki ayarları uygulayın.

Animasyon Stili: Slayt

Animasyon Yönü: Sol

Animasyon Yoğunluğu: %5

Ayarları kaydet.

Ardından, tanıtım yazınızı iki kez kopyalayıp yapıştırın. İçeriği değiştirebilirsiniz, ancak bu, tasarım ayarlarınızı her bir tanıtım yazısının yeniden oluşturulmasından çok daha kolay bir şekilde taşıyacaktır.

Eklenecek bir satırımız daha var, ancak bunu yapmadan önce, üzerinde çalıştığımız iki sütun satırına biraz dolgu ekleyelim. Satır ayarlarını açın. Tasarım sekmesine gidin ve Aralık altında yalnızca 2. sütunun üstüne 50 piksel ekleyin.

Sayfamıza eklememiz gereken son tasarım öğesi, son bir harekete geçirici mesaj düğmesidir. Sayfanın üst kısmında bunun için zaten bir düğmemiz olduğundan, bu kolay olacaktır.

Yeni bir tek sütun satırı ekleyin. Buna yeni bir buton modülü eklemek yerine daha önce oluşturduğumuz butonu kopyalayıp buraya yapıştırın. Ardından, düğme ayarlarını açın.

Metni "Bugün Yerinizi Ayırın" olarak değiştirin. Ardından Tasarım sekmesine gidin. Boşluk altında, zaten orada bulunan özel kenar boşluğunu kaldırın ve 100 piksel üst kenar boşluğu ekleyin. Ayarlarınızı kaydedin.

Son olarak, son bölümünüzün tasarım ayarlarına gidin ve tüm bölüme 80 piksel üst dolgu ve 60 piksel alt dolgu verin. Bu ayarları kaydedin. Sayfa ayarlarınızı kaydedin. Ve görsel oluşturucudan çıkın.

Son tasarımınız böyle görünmelidir.

Kayıt Sayfanızı WooCommerce “Biletine” Bağlama

Bu noktada güzel görünen bir kayıt sayfamız var. Ama hiçbir şeye bağlanmıyor! Bunu elbette düzeltebiliriz. İşte nasıl.

Biletlerimizi satmak için WooCommerce'de sanal bir ürün oluşturacağız. WooCommerce için biletleme uzantıları var, ancak bizim amaçlarımız için bu da işe yarayacak. WordPress Yöneticinizde Eklentiler > Yeni Ekle seçeneğine gidin. WooCommerce'i arayın ve kurun/etkinleştirin. Başlatma sihirbazını izleyin. Sonunda istendiğinde, yeni bir ürün oluşturmayı seçin.

Ürün başlığınızı ekleyin, sayfa düzeninizi tam genişliğe getirin, tam ürün açıklamanızı ekleyin, ürününüzü sanal olarak ayarlayın, fiyatınızı belirleyin, bir ürün kategorisi ekleyin, kısa bir ürün açıklaması girin ve ardından ürününüzün öne çıkan resmini ekleyin. Her şeyin doğru görüntülendiğinden emin olmak için önizleyin ve ardından yeni "bilet" ürününüzü yayınlayın.

Artık yeni ürününüzü yukarıda oluşturduğumuz butonlara bağlayabilirsiniz. Ayarladığınızdan emin olmak isteyeceğiniz başka bir bağlantı, Etkinlikler sayfasındaki yeni Kayıt Sayfanıza giden “Kayıt bilgileri” bağlantısıdır.

Son düşünce

Büyük bir olay atmak çok iştir. Bu yüzden, benim düşünceme göre, bir şeyi koymak için zaten çok fazla iş yapıyorsanız, onu halka sunarken ekstra yol kat edebilirsiniz. Böyle bir çözümün mükemmel olduğu yer burasıdır. Umarım faydalı bulmuşsunuzdur ve bir sonraki büyük etkinliğiniz büyük bir başarıdır! Yukarıda kullanılan uygulama veya araçlar hakkında herhangi bir sorunuz varsa, lütfen bunları aşağıdaki yorumlara bırakmaktan çekinmeyin.