Divi ile Şablon Türü İnanılmaz Özel Gönderi Etkinliği Oluşturma
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, Sürdürülebilir Divi Tasarım Girişimimizin bir parçası olarak, ücretsiz bir buluşma düzeni paketi kullanarak DIVI ile inanılmaz bir tür özel posta şablonunun nasıl yapılacağını göstereceğiz. Bu kullanım vaka eğitimi, en son Divi güncellemelerinden biri olan Divi Builder Özel Gönderi Türü Destek özelliği tarafından mümkün olmuştur. Meetup düzen paketiyle eşleşecek bir şablon yapacağız. Bu şablonu oluşturduktan sonra, web sitenizde paylaştığınız tüm etkinlikler için tekrar kullanabilirsiniz.
Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce, farklı ekran boyutlarında nihai sonuçlara bakalım.
Vücut çizgisinin yüksekliği: 1.9
Editör Yazı Tipi: Roboto
Etkinlik Takvim Ayarları Olay eklentisi etkinliğinde tema ayarında da birkaç ayar vardır. Tema Ayarı> Etkinlik Takvimi> Genel Temalar> ‘nın ana menüsüne geri dönün ve aşağıdaki renkleri kullanın: Aksan rengi: #06c8ff
Önde gelen öne çıkan renkler: #06c8ff
Etkinlik Takvim Ayarları> Genel Temalar’a geri dönün ve orada bulabileceğiniz tüm seçenekler için aynı ’06C8FF’ rengini kullanın. Yeni bir etkinlik ekleyin, yeni bir etkinlik ekleyin, artık yeni bir etkinlik yapmaya hazırız. Bunu yapmak için WordPress Dashboard> Olay> Yeni Ekle’yi açın. Yeni bir etkinlik ekledikten sonra, ona başlığı da verdiğinizden emin olun. Etkinliğinizin ayrıntılarını girerek etkinlik ayrıntılarını ekleyin. Bunlar şunları içerir: Saat ve Tarih
Konum
Organizatör
Etkinlik web sitesi
Etkinlik ücreti
Üstün görüntüler ekleyin, etkinliğinize de üstün resimler ekleyin. Bu yazının ilerleyen saatlerinde bunu ön uçtan sileriz, ancak hala sosyal paylaşmak için ihtiyacımız var. Etkinliğinizin sağ köşesindeki divi sayfa ayarlarını değiştirin, Divi sayfası ayarlarını göreceksiniz. Orada, sayfa düzeni için ‘kenar çubuğu yok’ seçerek kenar çubuğunu silin. Yayıncılık Etkinliğimiz artık ön uçta çalışmaya başlamaya hazır. Etkinliğinize devam edin ve yayınlayın. Bu, görsel oluşturucuyu etkinleştirmeden varsayılan sayfa tasarımıdır: Toplantı toplantı sayfasını açın ve tasarım öğelerini kaydedin Arama ve satırları Divi kütüphanesine kaydetme, çok çalışmaktan daha önemli bir şekilde çalışın. Bu yüzden Meetup Düzen Paketinin unsurlarını yeniden kullanarak zaman ve enerji tasarrufu sağlayacağız. Divi’nin görsel oluşturucusunu kullanarak yön sayfasını açarak başlayın. Ardından, sayfanızdaki aşağıdaki satırları arayın ve Divi kütüphanenize kaydedin: Parçayı Divi Kütüphanesine Arayın ve Aşağıdaki bölüme de ihtiyacımız var, bu yüzden devam edin ve bunu da kaydedin: Şablon türü oluşturmaya başlayın Özel bir etkinlik Türü oluşturma Meetup Düzen Paketi ile eşleşmesi için özel bir CSS kod satırı ekleyin Etkinlik sayfası için Visual Builder’ı kullanabiliriz, ancak maalesef her yerde kullanamayız. Her şeyin Meetup Düzeni Paketi ile uyumlu olduğundan emin olmak için önce birkaç sıradan CSS kodu ekleyeceğiz: #trafe-etkinlikler { Marj:%5; }
.Tribe-Eevens-Single-EVENT-TITLE {
yazı tipi-ağırlık: 300;
Yazı tipi boyutu: 60px! Önemli;
}
#TRIBE-EVENCS-CONTENT A {
Font-Ailesi: Roboto! Önemli;
Yazı tipi-ağırlık: 300! Önemli;
}
.Tribe-EVENTS-EVENT-IMAGE {
Görüntü yok;
}
Visual Builder’a geçiş şimdi etkinliğimizde Visual Builder’ı kullanmaya geçebiliriz!
Arka plan görüntüsünün yeni bir bölümünü ekleyin, zaten sayfada bulunan parçalar olduğunu göreceksiniz. Sayfada değiştirebileceğimiz yer burası. Bölümün ayarlarını açarak başlayın ve ‘BG-4.PNG’ arka plan görüntüsünü ekleyin. Web sitenize bir buluşma düzeni paketi yüklediyseniz, bu resmi medya kütüphanesinde bulabilirsiniz. Arka plan görüntüsü ile birlikte aşağıdaki ayarları kullanın: Arka Plan Görüntü Boyutu: Gerçek boyut
Arka Plan Görüntü Pozisyonu: Sağ alt
Bir sonraki boşluk ayarlarınızın aralığını açın ve üst kenar boşluğuna ‘100px’ ekleyin.Sınırımız ayrıca şablonumuz için bu tür zaman çizelgesi etkisi yarattı. Sınır ayarlarınızı açın ve aşağıdaki sol limiti ekleyin:
Sol sınır genişliği: 7px Sol sınır rengi: #8301e9 Sütun yapısının yeni bir satırını ekleyin, parçanın ayarlarını değiştirmeyi bitirdikten sonra, satırlarımızı eklemeye başlayabiliriz. Aşağıdaki sütun yapısına sahip yeni bir satır ekleyin:
Yapıştırıcı Satır ayarlarınızı açın ve boyut ayarlarında ‘Bu satırı tam yap’ seçeneğini etkinleştirin. Bu, bu düzendeki her satır için yapacağımız bir şey.
Metin modülünü bir sonraki satıra ekleyin, program açıklamanızla metin modülünü ekleyin, boyut ayarlarına devam edin ve aşağıdaki genişliği kullanın: Masaüstü:% 47 Tablet ve Telefon:% 100 Satır içi içe aktarma, eklediğiniz satırın hemen altında saklanır, DIVI kitaplığınıza kaydettiğiniz satırları aktarır ve içe aktarır.
Yapıştırıcılarımızın boyut ayarlarından başlayarak bu çizgi hakkında bazı şeyleri değiştirmesi gerekir. ‘Bu çizgiyi tam olarak yap’ seçeneğini etkinleştirin.
Gövde Metin Modülünü ve Sonraki Düğme Modülünü Sil, İlk sütundaki metin modülünün ve düğme modülünün paragrafını silin. Klon metin modülünü ve ilk satırınızı klon metin modülünü silin ve ilk satıra yerleştirin ve bunu ilk sütununa yerleştirin. Yeni satırınız. Bir sonraki boyut ayarlarını açın ve masaüstüne ayarlanan genişliği silin. Saklanan bölüm ithaliz ilk kısmı değiştirmeyi bitirdi! Devam edin ve tasarruf ettiğiniz bir sonraki bölümü içe aktarın. Sınırı ekleyin Bu bölüme sol limiti de ekliyoruz: Sol sınır genişliği: 7px Sol sınır rengi: #06c8ff Her satırın boyutunu değiştirin Yeni içe aktardığınız bölümde birkaç sıra vardır. Bu satırların her biri için ‘Bu Sıra Fullwidth Ol “seçeneğini etkinleştirin. Son düğmeyi değiştirin, düğme hizalamasını sola değiştirin.
Şablonu Divi Kütüphanesine kaydedin Düzen şablonunun kütüphanesine eklenti tamamlandı! Artık Divi kütüphanenize kaydedebilir ve diğer etkinlikler için tekrar kullanabilirsiniz.
Önizleme Şimdi tüm farklı adımlardan geçtikten sonra, farklı ekran boyutlarındaki nihai sonuçlara bakalım. Bu kullanım durumunun blog yazısındaki son zihin, şaşırtıcı etkinlikler için nasıl özel bir yazı gönderme şablonu yapacağınızı gösterdik. Yaptığımız şablon, Meetup Düzen Paketi stiliyle eşleşir. Bu şablonu oluşturduktan sonra, diğer etkinlikler için de tekrar kullanabilmemiz için Divi Kütüphanesine de tutuyoruz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
