Kahve Evi: Kahve Dükkanları ve Kafeler için Ücretsiz Divi Düzen Paketi

Bugün Divi için oluşturduğum Coffee House adlı bir düzeni paylaşmaktan heyecan duyuyorum. Kahve Evi, adından da anlaşılacağı gibi, kafeler, kafeler ve benzerleri için idealdir. Mümkün olduğunca çok yönlü hale getirdim, bu yüzden estetiği seviyorsanız, düzenin bir bütün olarak veya tek tek bölümleri için birçok kullanım bulacağınızdan eminim. Eğlence!

Coffee House Layout Pack'i İndirme, Yükleme ve Ayarlama

Ücretsiz Kahve Evi Düzenini kendi Divi web sitenizde kullanmak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir.

İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak daha fazla Divi iyiliği alacaksınız.

Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. Yeniden üye olmayacaksınız.

Ardından, indirilenler klasörünüzde Coffee-house-divi-layout-by-olga-summerhayes.zip dosyasını bulun ve açın. Ardından, WordPress yöneticinizle Divi > Divi Kitaplığı'na gidin ve sayfanın üst kısmındaki "İçe Aktar ve Dışa Aktar" düğmesini tıklayın.

Taşınabilirlik modu açıldığında, içe aktarma sekmesine gidin. “Dosya seç” düğmesine tıklayın ve Coffee-House-Layout-for-Divi.json dosyasını seçin. Ardından mavi renkli “Import Divi Builder Layout” düğmesine tıklayın ve içe aktarmanın tamamlanmasını bekleyin.

İçe aktarma işlemi tamamlandıktan sonra, Kitaplıktan Yükle > Kitaplıktan Ekle'ye giderek yeni Kahve Evi Düzeninizi oluşturucu tarafından desteklenen herhangi bir sayfada yükleme olanağına sahip olacaksınız.

Kahve Evi Düzen Paketini Ayarlama

Düzenin demo gibi görünmesi için birkaç şeye dikkat etmeniz gerekecek:
Navigasyon:

Bu demo için Elegant Themes'in Divi Header Extention eklentisini kullandım. Yukarıdaki blog gönderisindeki adımları izleyerek uzantıyı web sitenize yükleyin.
Divi Header Extension'ı yükledikten sonra, WP navigasyonunuzda Divi 100 adlı yeni bir menü öğesi bulacaksınız.

Divi 100'ü açın ve aşağıdakileri seçin:

Tür Seçin: 1
Stil Seçin: 5
(İsterseniz başka bir stil seçebilirsiniz).
Varsayılan Rengi Seçin: #ffffff
Etkin Rengi Seçin: #d7bc99
"Değişiklikleri Kaydet"e tıklayın.

Divi > Tema Özelleştirici > Başlık ve Gezinme > Başlık Biçimi'ne gidin
Başlık Stili için “Tam Ekran”ı seçin.

Divi > Tema Özelleştirici > Başlık ve Gezinme > İçeri Kaydır ve Tam Ekran Başlık Ayarları'na gidin. Aşağıdaki seçenekleri kontrol edin:

“Üst çubuğu göster” seçeneğinin seçili olmadığından emin olun.

Menü Metin boyutu: 32
Harf Aralığı: 1
Yazı Tipi: PT Sans
Yazı Tipi Stili: Kalın için “B”yi ve Büyük Harf için “TT”yi seçin
Arka Plan Rengi: rgba(45,46,65,0.93)
Menü Bağlantı Rengi: #ffffff
Aktif Bağlantı Rengi: #d7bc99
"Kaydet ve Yayınla" yı tıklayın.

Kaydırdıktan sonra logonun küçülmemesini sağlamak için:

Divi > Tema Özelleştirici > Başlık ve Gezinme > Birincil Menü Çubuğu'na gidin.

"Tam Genişlik Yap" ı seçin
Menü Yüksekliği: 66
Logo boyutunu logonuza uyacak şekilde ayarlayın.

Divi > Tema Özelleştirici > Başlık ve Gezinme > Sabit Gezinme Ayarları'na geçin. Sabit Menü Yüksekliği'nin Birincil Menü Yüksekliği ile aynı olduğundan emin olun.

Sabit Menü Yüksekliği: 66

"Yüzer" düğmeler:

Bu düzen için düğmeleri yüzer gibi görünecek şekilde şekillendirdim ve fareyle üzerine gelindiğinde düğmelerin içeri itildiği yanılsamasını yarattım. Bu, kutu gölge efekti eklenerek ve fareyle üzerine gelindiğinde kutu gölgesi değerleri değiştirilerek yapılır.

Gezinme/basma efektini elde etmek için aşağıdaki css kodunu eklemeniz gerekir.

Divi > Tema Seçenekleri'ni açın > Özel CSS'ye gidin > aşağıdaki kodu ekleyin:

a.et_pb_button, a.et_pb_promo_button.et_pb_button, .et_pb_contact_submit.et_pb_button {
box-shadow: 0 8px 20px 1px rgba(0,0,0,0.3);
 }
a.et_pb_promo_button.et_pb_button:hover, a.et_pb_button:hover, .et_pb_contact_submit.et_pb_button:hover {
box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1)
}

"Değişiklikleri Kaydet"e tıklayın. Şimdi sayfanızı kontrol edin, tüm düğmeleriniz “kaymalı”.

İletişim Formu için “Gönder” düğmesinin ortalanması

Eklenecek son şey, İletişim Formu için “Gönder” düğmesini ortalayacak css kodudur.
Divi > Tema Seçenekleri > Özel CSS'yi açın > aşağıdaki kodu ekleyin:

.et_contact_bottom_container {
float: none;
text-align: center;
padding-top: 10px;
padding-bottom: 20px;
}

"Değişiklikleri Kaydet"e tıklayın. Budur.

Ücretsiz Kahve Evi Divi Düzen Paketi

Kahve Evi düzeni, yerel bir kahve mekanı için basit bir web sitesi oluşturmak için kullanılabilir. Çoğu düzende olduğu gibi, sitenizi çok sayfalı bir web sitesine genişletmek için bölümleri ve modülleri çoğaltabilir ve yeniden amaçlayabilirsiniz.

Bu düzen, Coffee House müşterileri için faydalı olacak birkaç bölüme sahiptir: “Ne hazırladık” Bölümü, mevcut kahveyi listeler ve genişletilebilir veya “menü” bölümüne dönüştürülebilir. “Çekirdeklerimizin Kökeni” bölümü, satılan kahvenin ve nereden geldiğinin bir hikayesini anlatıyor. Bu bölüm, kahve hakkında daha fazla ayrıntıya veya işletmenin kendisiyle ilgili bilgilere sahip olabileceğiniz diğer sayfalara genişletilebilir. Diğer önemli bölümler şunlardır: "Görüşler", "İletişim" ve yeni müşterilerin işletmeyi bulmasına yardımcı olacak "Harita".

Toplama

Elegant Themes bloguna uğradığınız için teşekkür ederiz. Umarım bu ücretsiz kaynağı beğenirsiniz. Kurma ve çalıştırma hakkında herhangi bir sorunuz varsa, aşağıdaki yorumlarda bana bildirin. Ayrıca, gelecekteki Divi Düzenleri için herhangi bir isteğiniz varsa, bunları da yorumlarda bırakabilirsiniz!

Ayrıca, büyük bir duyuruyu, faydalı ipucunu veya Divi freebie'sini asla kaçırmamak için e-posta bültenimize ve YouTube kanalımıza abone olmayı unutmayın!