Divi ve Wooocommerce ile Özel Etkinlikler ve Kayıt Sayfaları Nasıl Yapılır
Etkinliklerde bulunan bir kuruluşta gönüllü olarak çalışırsanız veya yardım ederseniz, çeşitli planlama, yönetim ve promosyon araçlarına aşina olabilirsiniz. Etkinlikler düzenleme görevi için biraz farklı bir yaklaşıma sahip Facebook, Meetup ve birçok WordPress eklentisi var. Bu araçlar çok iyi. Ve düşünebileceğim hemen hemen her kullanım vakası için, biri mükemmel çalışıyor. Ancak bazı durumlarda, sadece birkaç etkinlik veya az sayıda yıllık etkinlik yürüten bir kuruluşta olduğu gibi, bu seçenek aşırı olabilir. Ya da belki de etkinliğin kuruluşunuz için ne kadar önemli olduğunu temsil edecek kadar iyi iş yapmazlar, çünkü bu araçların çoğunda tüm etkinlikler aynı görünür.
Mezuniyet veya akşam yemeği töreni, özel konukların gerçekten sıradan pişirme etkinlikleriyle aynı görünmesi ve hissetmesi gerekir mi? Bana sorarsanız, cevap hayır. Ancak görev için uygun bir araç yoksa, başka bir soruyu gündeme getiriyor: Ne yapmalıyız? Cevabım: Divi ile özel etkinlikler ve kayıt sayfaları listesi oluşturun! Pazartesi günü yayınladığımız Çiftçi Pazarı Düzen Paketinin nihai sonuçlarını önceden özel bir etkinlik sayfası vardı. Böylece element korunur. Düzen paketini ücretsiz olarak indirebilir ve tasarımı olduğu gibi kullanabilir veya tercihlerinize göre ayarlayabilirsiniz.
Kullandığım tek resim, Çiftçi Piyasası Düzeni Paketine veya Görüntü Varlığı’na dahil edilmemiştir, tasarımdan “Eğitmeninizle Toplantı” için 600 piksel 800 piksel bir portre görüntüsüdür. Bunu takip ettiğinizde bu bölüm için kendi imajınızı vermeniz gerekir. (Veya daha önce yayınlanan seyahat düzeni paketinden kullandığımı alın.) Divi ve woocommerce ile özel etkinliklerin ve kayıt sayfalarının bir listesi nasıl oluşturulur YouTube kanallarına abone olun Divi’de özel bir etkinlik kayıt sayfası oluşturuyoruz, hadi bir Yeni sayfa sayfalara girişe göre> WordPress yöneticisine yeni ekleyin. Liste sayfamızdan kayıt sayfasını yapacağım etkinlik, Eylül ayında gerçekleşmesi gereken organik bir pişirme sınıfıdır. Bu yüzden yeni sayfamı “Organik Pişirme Sınıfı Eylül” diyeceğim. Ardından, Divi Builder’ı kullanın Mor düğmesine tıklamamız gerekir.
Başlamak için parça ayarlarınızı açmak için Blue Dear simgesini tıklayın. Arka planın altında Resim sekmesine tıklayın ve boyutu değişen çiftçi-pazar-22.jpg resmini ekleyin. Ardından, arka plan görüntüsü karışımını kaplamaya ayarlayın. Ardından, hala arka plan ayarında, Renk sekmesine atlayın ve arka plan rengini RGBA’ya (0.0,0,0.0.47) ayarlayın. Ayarlarınızı kaydedin. Ardından, sayfa başlığımızı ekleme zamanı. Bu satır için sütun tercihinizi seçmek için yeşil hattın ortasındaki (altında değil) Yeşil Plus simgesini tıklayın. Bir sütun seçin. Daha sonra modüle girmeniz istenecektir. Metin modülünü girin. “Eylül Organik Pişirme Sınıfı” metnini girin ve paragraf stilinizi H1 olarak ayarlayın. Ardından metin modülünüzün tasarım sekmesine atlayın ve başlık metni için tasarım ayarlarını açın. Aşağıdaki Ayarları Yapılandırma: Yazı Tipi Başlık: Lato Ağırlık Mektubu Başlık: Tesviye Kalınlığı Metin Başlık: Orta Metin Boyutu Başlık: 46px Renk Metin Başlık: #fffffff Ardından, boşluk seçeneğine gidin. Aşağıdaki ayarları yapılandırın. Üst Pilding: 100 piksel dolgu aşağıda: 75px Bu ayarı kaydedin ve ardından yeni bir düzenli bölüm (mavi) oluşturun. Satırınız için aynı iki sütun seçeneğini seçin. Sol sütunda görüntü modülünü ekleyin. Kullandığım görüntünün 1.4.jpg ürettiği söyleniyor ve Çiftçi Pazarı Düzeni paketini kullandığınız için medya kütüphanenizde olması gerektiği söyleniyor. İkinci satır sütununa metin modülünü ekleyin. Aşağıdaki metni yazın: “Bugün Yerinizi Sipariş Edin Eylül Organik Yemek Sınıfımızda yerinizi sipariş etti. Bu satın alma, size sınırlı sınıf yerlerinden birini ve takip etmeniz gereken tüm malzemeleri sunar. Sadece kendini getir! ” Paragraf stilinizi kullanarak “Bugün Yerinizi Sipariş” metnini H2’ye ayarlayın. Ayarlarınızı kaydedin. Şimdi böyle görünen bir parçanız/satırınız olmalı. Şimdi ayarlama zamanı! Hattan başlayalım. Öne çıkmak istiyoruz çünkü bu ana kayıt sayfasını harekete geçirme daveti. Satırın arka plan rengini #E55039 olarak ayarlayın. Şimdi Hat Tasarım sekmemize girelim. Alan seçeneğini açın ve aşağıdaki ayarları yapılandırın: Özel Dolgu: Tüm seçenekler için 0px. Sütun 2 Dolgu Özel: Üst: 60px Sağ: 25px Alt: 25px Sol: 25px Ayarları kaydedin. Şimdi tasarım modülü tasarım ayarlarını açın. Boyutun altında, tam geniş zorla alt altta evet seçin. Alanın altında, aşağıdaki ayarları yapılandırın. Özel Marj: Üst: -40px Aşağıda: -40px Dolgu Özel: Sol: 60 PX
Son olarak, animasyon tasarımı ayarlarını açın ve bu ayarı yapılandırın. Animasyon Stili: Slayt Animasyon Yönü: Animasyon Yoğunluğu için:% 8 Animasyon Başlangıç Opaklığı:% 100 Ayarları kaydedin. Şimdi ikinci sıra sütunumuzda çalışma zamanı. Mevcut metin modülü ile başlayarak. Metin modülü ayarlarını açın ve tasarım sekmesini açın. Metnin altında, aşağıdaki ayarları yapılandırın. Metin Rengi: Metin Yazı Tipi Işık: Montserrat Metin Boyutu Metin: Metin Satırının 18px Yüksekliği: 1.8m Metin Oryantasyonu: haklı (metin yönünü ayarlamak için metin gölge ayarlarında aşağı kaydırın.). Başlık Tasarım Ayarları altında, aşağıdakileri H2 başlığı başlığına uygulayın. Başlık 2 Yazı Tipi: Lato Başlık 2 Metin Seviyesi: Orta Başlık 2 Metin Boyutu: 36px POS 2 Satır Yüksekliği: 1.8EM Ardından, alanın altında, aşağıdaki ayarları uygulayın.
Özel Dolgu: Üst: 10 piksel Sağ: 60 Piksel Alt: 10 piksel Sol: 0px Şimdi düğmemizi eklememiz gerekiyor. Yeni düzenlediğimiz metin modülünün altında, metin modülünün altındaki Icon Plus gri kayan tıklayarak yeni bir düğme modülü ekleyin. Bir düğme metni olarak “Biletinizi Satın Alın” girin ve doğrudan Tasarım Ayarları sekmesine gidin. Düğmelerinizi ortada ayarlayın. Ardından, düğme seçeneğine geçin ve düğme için özel düğme stillerini kullanın. Bu ayarı düğmenize uygulayın. Metin Boyutu Düğmesi: 18px Renk Metin Düğmesi: #FFFFFF Renk Arka Plan Anahtarları: #07C907 Düğme Limitinin Genişliği: 8px Renk Düğmesi Sınırı: RGBA (0,0,0,0) Bu özel düğme ayarlarını uygulamaya devam edin. Sınır Yarıçap Düğmesi: 0px Cepheler Mektubu Kest: 1px Yazı Tipi Yazı Tipleri: Lato Loogy Mektuplar: Bight Ardından, Düğme Tasarım sekmesinin ayarlarını alana indirin. Bu ayarı uygulayın. Doğru Özel Kenar: 60px Kaydet ayarları. Ana oyunculuk davetiniz şimdi tamamlandı, ancak yapılandırdığımız ayarlar bu bölümü biraz dar hissettirdi. Bölüm ayarlarımıza dönelim ve Alan seçeneğimize aşağıdakileri ekleyelim. Özel Dolgu: Üst: 110 piksel Alt: 100px Ayarları kaydedin.
Şimdi bir sonraki bölüme devam edebiliriz. Diğer sıradan mavi parçalar ekleyin ve iki sütun daha seçin. Soldaki ilk sütunda metin modülünü girin. Aşağıdaki metni ekleyin: “Eğitmeniniz Mus Duis Eros Lectus Rhoncus NEC, Odio Risus, Tortor, Dignissim Tumpor UT. Habitasse rhoncus? Elementum Mass Odio phacellus cras augue magna odio arcu odio ultrisilleri lorem. Quis Integer, Sed, Habitasse Nunc Cras, Placerate EgestaS Proin! Magnis Phacellus, Dictumst, Sessiz Urna’da rahibe? Aug Odio urna ut ve plata tamsayı placerace, tritique amet porttitor sagittis aenean ac, tritimue magnis enim tortor ultrices sed. Tritique Nascetur. Lorem, Turpis Cras’ta AC! Dapibus Enim, Dignissim Velit’teki UT Platosu, UNA ARCU TORTOR, NEC. ” Üstteki “Eğitmeninizle Toplama” satırını H2’ye ayarlayın. Ardından metin modülü tasarımının tasarımına gidin. Metin tasarımı seçeneği altında, aşağıdaki ayarları yapılandırın: Metin Yazı Tipi: Montserrat Metin Boyutu Metin: 16px Metin Hattı Yüksekliği: 1.8 Enstığı Metin: Ayrıca, aşağıdaki başlık için başlık tasarım ayarlarına kadar ve H2 metniniz için yapılandırın. Başlık 2 Yazı Tipi: Lato Başlık 2 Yazı Tipi Ağırlık: Kalın Başlık 2 Metin Boyutu: 36px POS 2 Satır Yüksekliği: 2.7EM Kaydet ayarları. Şimdi portre görüntülerimizi ikinci sütunumuza yeni satırımızdan eklemenin zamanı geldi. Görüntü modülünü ekleyin, portre resminizi seçin ve aşağıdaki tasarım ayarlarını yapılandırın. Deneyim: Genişlik Boyut Merkezi:% 75 Kaydet ayarları.
Tamam, bu bölümle neredeyse bittik. Bölümün ayarlarına sadece birkaç son dokunuş vermemiz gerekiyor. Mavi dişli simgesine tıklayın ve arka planın altında resim seçeneğini seçin. Arka Plan-Texture.png adlı bir resim ekleyin. Ardından, Tasarım sekmesine atlayın ve aşağıdaki ayarları yapılandırın: Mesafe: Üst: 60px Alt: 60px Animasyon: Animasyon Stili: Slayt Animasyon Yönü: Üst Animasyon Gecikmesi: 200ms Animasyon Yoğunluğu:% 2 Kaydet Aces. . Diğer normal mavi parçayı, bu sefer bir satır sütunla ekleyin. Metin modülünü satırınıza ekleyin ve içinde “Ne Yapacağımız” yazın. Metni H2 olarak ayarlayın ve Tasarım sekmesine atlayın. Başlık metninin (elbette H2) altındaki aşağıdaki ayarları yapılandırın. Başlık 2 Yazı Tipi: Lato Başlık 2 Yazı Tipi Ağırlık: Kalınlık Başlık 2 Metin Seviyesi: Orta Başlık 2 Metin Boyutu: 36 Ayar Kaydet.
Üzerinde çalıştığımız diğer tek sütun satırlarını ekleyin. Bu sefer galeri modülünü ekleyin. Resim numaranızı 8 olarak değiştirin ve medya galerinizden sekiz resim seçin. Element altında iki seçeneği kapatın, böylece başlık, bilgi veya sayfalandırma görüntülenir. Ardından, Tasarım sekmesine atlayın ve renk kaplamasını #0dc20d olarak değiştirin. Ayarlarınızı kaydedin. Şimdi Galeri Modül Satır Ayarlarını açın. Tasarım sekmesini ve alanın altında olukların genişliğini ayarlayın. Ayarları kaydedin. Son olarak, bu bölümün tasarım sekmesini açın ve alanın altında 80px üst dolgunun tüm bölümlerini verin. Ardından yeni bir mavi düzenli bölüm oluşturun. Bu sayfanın son kısmı olacak. Yeni bir tek sütun satırı ekleyin. Boş bir modül girmek yerine, metin modülünü yukarıdaki bölümden kopyalayın (“ne yapacağımız” yazan kısım). Bunu doğru tutarak ve kopya modülünü seçerek yapabilirsiniz. Yeni çizginize yapıştırın. Doğrudan metne tıklayın ve “Ne Öğreneceksiniz” ile değiştirin. Yeni metninizin altına iki yeni sütun ekleyin. Sol sütunda görüntü modülünü ekleyin. Medya kütüphanenizden dikey odaklı kesme tahtası seçin. Tasarım Modülü Tasarım sekmesinde, hizalamayı ortaya ve boyutları%90 olarak ayarlayın. Ardından, aşağıdaki ayarları animasyon bölümüne uygulayın. Animasyon Stili: Slayt Animasyon Yönü: Doğru Animasyon Yoğunluğu:% 5 Kaydet ayarları. Sağ sütunda açıklama modülünü ekleyin. İçerik ayarlarının altında, tanımlayıcı başlığınızı ve metninizi ekleyin. Ardından simgeni görüntü ve simgenin altına etkinleştirdiğinizden emin olun. Bir onay işareti simgesi kullanmayı seçtim. Görüntü ve simgenin altındaki bulanıklık modülünün tasarım sekmesinde, simgenin rengini #07C907 olarak değiştirin ve görüntü/simgenin sola yerleştirilmesi. Vücudun metninin altında, çizgi yüksekliğinizi 1.8m’ye ayarlayın. Ardından, animasyon seçeneğine gidin ve aşağıdaki ayarları uygulayın. Animasyon Stili: Slayt Animasyon Yönü: Sol Animasyon Yoğunluğu:% 5 Kaydet ayarları. Ardından, açıklamanızı iki kez kopyalayıp yapıştırın. İçeriği değiştirebilirsiniz, ancak bu tasarım ayarlarınızı her açıklamayı yeniden oluşturmaktan çok daha kolaydır. Eklemek için bir çizgimiz daha var, ancak yapmadan önce yaptığımız iki sütun sırasına biraz dolgu ekleyelim. Satır ayarlarını açın. Tasarım sekmesini açın ve alanın altındaki sütun 2’nin üstüne 50 piksel ekleyin. Sayfanın üstünde bunun için zaten bir düğmemiz olduğundan, bu kolay olacaktır. Yeni bir tek sütun satırı ekleyin. Yeni bir düğme modülü eklemek yerine, daha önce yaptığımız düğmeyi kopyalayın ve buraya yapıştırın. Ardından, düğme ayarlarını açın. Metni “Bugün olduğunuz yerde mesaj” olarak değiştirin. Ardından tasarım sekmesine gidin. Alanın altında zaten var olan özel marjı silin ve 100 piksel üst kenar ekleyin. Ayarlarınızı kaydedin. Ve son olarak, son kısmınız için tasarım ayarlarını girin ve üst dolgunun 80 piksel parçalarını ve 60 piksel dolgu altını verin. Ayarları kaydedin. Sayfa ayarlarınızı kaydedin. Ve görsel yapımcının dışında. Son tasarımınız böyle görünecek. Kayıt sayfanızı WooCommerce “Bilet” e bağlayın Bu noktada iyi görünen bir kayıt sayfamız var. Ama bu hiçbir şeye bağlı değil! Elbette düzeltebiliriz. Bu yol. Biletlerimizi satmak için WooCommerce’de sanal ürünler yapacağız. WooCommerce için bir bilet uzantısı var, ancak amacımız için bu iyi çalışacaktır. Eklentiler için WordPress Yöneticinize gidin> Yeni Ekleyin. Wooocommerce’i arayın ve yükleyin/etkinleştirin. Başlangıç kılavuzunu takip edin. Sonuna sorulduğunda, yeni bir ürün oluşturmak için seçin. Ürününüzün başlığını ekleyin, sayfa düzeninizi tam olarak değiştirin, tüm ürün açıklamanızı ekleyin, ürününüzü sanal olarak ayarlayın, fiyatınızı ayarlayın, ürün kategorisini ekleyin, girin Kısa bir ürün açıklaması, ardından ürününüzün üstün bir görüntüsünü ekleyin. Her şeyin doğru görüntülenmesini sağlamak için önizleme ve ardından yeni “bilet” ürününüzü yayınlayın. Artık yeni ürününüzü yukarıda oluşturduğumuz düğmeye bağlayabilirsiniz. Ayarlanacağından emin olmak istediğiniz bir başka bağlantı, etkinlik sayfasındaki “Kayıt Bilgisi” bağlantısı yeni kayıt sayfanıza. Büyük bir olay düzenleme düşüncesi çok fazla iş gerektirir. Bu yüzden, düşünme tarzıma göre, giymek için çok fazla iş yaptıysanız, halka sunarken ekstra çalışmalısınız. Böyle bir çözüm çok uygun. Umarım yardım hissedersiniz ve bir sonraki büyük etkinliğiniz büyük bir başarıdır! Yukarıda kullanılan yürütme veya araçlar hakkında sorularınız varsa, aşağıdaki yorumlarda iletmekten çekinmeyin.