Divi ile Çarpıcı Etkinlik Özel Yazı Tipi Şablonları Oluşturma

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, ücretsiz Meetup Layout Pack'i kullanarak Divi ile nasıl çarpıcı etkinlik özel gönderi türü şablonları oluşturacağınızı göstereceğiz. Bu kullanım örneği öğreticisi, Divi'nin son güncellemelerinden biri olan Divi Builder Özel Gönderi Türü Desteği özelliği ile mümkün hale getirilmiştir. Meetup Layout Pack ile eşleşecek bir şablon oluşturacağız. Bu şablonu oluşturduktan sonra, web sitenizde paylaştığınız tüm etkinlikler için yeniden kullanabileceksiniz.

Hadi hadi bakalım!

Ön izleme

Öğreticiye dalmadan önce, farklı ekran boyutlarındaki nihai sonuca bir göz atalım.

Etkinlik Takvimi Eklentisini Yükleyin

Eklentilere Git ve Yeni Bir Eklenti Ekle

Web sitemize özel etkinlik gönderi türleri eklemek için Etkinlik Takvimi eklentisini kullanacağız. Bu, WordPress panonuz > Eklentiler > Yeni Ekle > Etkinlik Takvimi eklentisini arayarak bulabileceğiniz ücretsiz bir eklentidir .

Eklentiyi Etkinleştir

Eklentiyi yükledikten sonra, kullanmaya başlayabilmeniz için hemen etkinleştirdiğinizden emin olun.

Tema Özelleştirici Ayarlarını Değiştirin

Tipografiyi Değiştir

Şimdi bir etkinlik oluşturmadan önce, web sitemizin temellerini doğru bir şekilde alarak başlayalım. WordPress panonuz > Görünüm > Özelleştir seçeneğine giderek Tema Özelleştiricinizi açın. Sonraki Genel Ayarlar > Tipografi seçeneğine giderek web sitenizin tipografisine gidin. Oradayken, aşağıdaki ayarları uygulayın:

• Gövde Metin Boyutu: 16
• Gövde Çizgisi Yüksekliği: 1,9
• Başlık Yazı Tipi: Roboto

Etkinlik Takvimi Ayarları

Etkinlik Takvimi eklentisinin Tema Özelleştirici'de de kendi ayarları vardır. Tema Özelleştirici > Etkinlik Takvimi > Genel Tema > ana menüsüne dönün ve aşağıdaki renkleri kullanın:

• Vurgu Rengi: #06c8ff
• Öne Çıkan Vurgu Rengi: #06c8ff

Etkinlik Takvimi > Genel Tema ayarlarına geri dönün ve orada bulabileceğiniz tüm seçenekler için aynı '#06c8ff' rengini kullanın.

Yeni Etkinlik Ekle

Yeni Etkinlik Ekle

Artık yeni bir etkinlik oluşturmaya hazırız. Bunu yapmak için WordPress panonuz > Etkinlikler > Yeni Ekle'ye gidin . Yeni bir etkinlik ekledikten sonra, ona bir başlık da verdiğinizden emin olun.

Etkinlik Ayrıntılarını Ekle

Etkinlik detaylarınızı girerek devam edin. Bu içerir:

• Saat ve Tarih
• Konum
• Organizatörler
• Etkinlik Web Sitesi
• Etkinlik Maliyeti

Öne Çıkan Görsel Ekle

Etkinliğinize de öne çıkan bir resim ekleyin. Bu gönderide daha sonra, bunu ön uçtan kaldıracağız, ancak yine de sosyal paylaşım için buna ihtiyacımız olacak.

Divi Sayfa Ayarlarını Değiştir

Etkinliğinizin sağ köşesinde Divi Sayfa Ayarlarını göreceksiniz. Orada, Sayfa Düzeni için 'Kenar Çubuğu Yok'u seçerek kenar çubuğunu kaldırın.

Etkinliği Yayınla

Artık ön uç üzerinde çalışmaya başlamaya hazırız. Devam edin ve etkinliğinizi yayınlayın.

Bu, Visual Builder'ı etkinleştirmeden varsayılan sayfa tasarımıdır:

Meetup Açılış Sayfasını Açın ve Tasarım Öğelerini Kaydedin

Divi Kitaplığına Satırı Bul ve Kaydet

Verimli çalışmak, çok çalışmaktan daha önemlidir. Bu nedenle Meetup Layout Pack öğelerini yeniden kullanarak zamandan ve emekten tasarruf edeceğiz. Divi's Visual Builder'ı kullanarak açılış sayfasını açarak başlayın. Ardından sayfanızda aşağıdaki satırı bulun ve Divi Kitaplığınıza kaydedin:

Bölümü Bul ve Divi Kitaplığına Kaydet

Ayrıca aşağıdaki bölüme de ihtiyacımız olacak, bu yüzden devam edin ve bunu da kaydedin:

Etkinlik Özel Tür Şablonu Oluşturmaya Başlayın

Meetup Düzen Paketine Uygun Özel CSS Kod Satırları Ekleyin

Etkinlik sayfaları için Visual Builder'ı kullanabiliriz ama ne yazık ki her yerde kullanamıyoruz. Her şeyin Meetup Layout Pack ile uyumlu olduğundan emin olmak için önceden birkaç CSS kod satırı ekleyeceğiz:

#tribe-events {
margin: 5%;
}
.tribe-events-single-event-title {
font-weight: 300;
font-size: 60px !important;
}
#tribe-events-content a {
font-family: Roboto !important;
font-weight: 300 !important;
}
.tribe-events-event-image{
display: none;
}

Visual Builder'a geçin

Artık etkinliğimizde Visual Builder'ı kullanmaya geçebiliriz!

Yeni Bölüm Ekle

Arka plan görüntüsü

Sayfada zaten bir bölüm olduğunu göreceksiniz. Sayfada değiştirebileceğimiz yer orası. Bölüm ayarlarını açarak başlayın ve ' bg-4.png ' arka plan resmini ekleyin. Meetup Layout Pack'i web sitenize zaten yüklediyseniz, bu resmi Medya Kitaplığınızda bulabilirsiniz. Arka plan resmiyle birlikte aşağıdaki ayarları kullanın:

• Arka Plan Resmi Boyutu: Gerçek Boyut
• Arka Plan Resmi Konumu: Sağ Alt

aralık

Daha sonra bölümünüzün Aralık ayarlarını açın ve üst kenar boşluğuna '100px' ekleyin.

Sınır

Ayrıca şablonumuz için bu tür bir zaman çizelgesi efekti yaratıyoruz. Kenarlık ayarlarınıza gidin ve aşağıdaki sol kenarlığı ekleyin:

• Sol Kenar Genişliği: 7px
• Sol Kenar Rengi: #8301e9

Yeni Satır Ekle

Sütun Yapısı

Artık bölüm ayarlarını değiştirmeyi bitirdiğimize göre, satırlarımızı eklemeye başlayabiliriz. Aşağıdaki sütun yapısına sahip yeni bir satır ekleyin:

boyutlandırma

Satırınızın ayarlarını açın ve Boyutlandırma ayarlarında 'Bu Satırı Fulliwdth Yap' seçeneğini etkinleştirin. Bu, bu düzen içindeki satırların her biri için yapacağımız bir şey.

Satıra Metin Modülü Ekle

boyutlandırma

Ardından, etkinliğinizin açıklamasını içeren bir Metin Modülü ekleyin, Boyutlandırma ayarlarına gidin ve aşağıdaki Genişliği kullanın:

• Masaüstü: %47
• Tablet ve Telefon: %100

Kaydedilen Satırı İçe Aktar

Eklediğiniz satırın hemen altında, devam edin ve kaydettiğiniz satırı Divi Kitaplığınıza aktarın.

boyutlandırma

Boyutlandırma ayarlarından başlayarak bu satırla ilgili bazı şeyleri değiştirmemiz gerekecek. 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

Gövde Metni Modülünü ve Düğme Modülünü Çıkarın

Ardından, ilk sütundaki Metin Modülü ve Düğme Modülünün paragrafını kaldırın.

Metin Modülünü Klonla ve Boyutlandırmayı Kaldır

Devam edin ve Metin Modülünü ilk satırınıza kopyalayın ve yeni satırınızın ilk sütununa yerleştirin. Sonraki Boyutlandırma ayarlarını açın ve masaüstü için özelleştirilmiş Genişliği kaldırın.

Kaydedilen Bölümü İçe Aktar

İlk bölümü değiştirmeyi bitirdik! Devam edin ve daha sonra kaydettiğiniz bölümü içe aktarın.

Kenarlık Ekle

Bu bölüme de bir sol kenarlık ekliyoruz:

• Sol Kenar Genişliği: 7px
• Sol Kenar Rengi: #06c8ff

Her Satırın Boyutlandırmasını Değiştir

Az önce içe aktardığınız bölümde birkaç satır var. Bu satırların her biri için 'Bu Satırı Tam Genişlik Yap' seçeneğini etkinleştirin.

Düğme Hizalamasını Değiştir

Son olarak, Düğme Hizalamasını da sola değiştirin.

Şablonu Divi Kitaplığına Kaydet

Kütüphaneye ekle

Düzen şablonu tamamlandı! Artık onu Divi Kitaplığınıza kaydedebilir ve diğer etkinlikler için yeniden kullanabilirsiniz.

Ön izleme

Artık tüm farklı adımlardan geçtik, şimdi sonuca farklı ekran boyutlarında son bir göz atalım.

Son düşünceler

Bu kullanım örneği blog gönderisinde, size çarpıcı olay özel gönderi türü şablonlarının nasıl oluşturulacağını gösterdik. Oluşturduğumuz şablon, Meetup Layout Pack'in stiliyle eşleşiyor. Bu şablonu oluşturduktan sonra, diğer etkinlikler için de yeniden kullanabilmemiz için Divi Kitaplığı'na da kaydettik. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne bir yorum bıraktığınızdan emin olun!