Özel Restoran Menüsü Oluşturmak için Divi Galerilerini Geçişlere Nasıl Gömülür

Web sayfanızda geçişleri kullanmak, içeriğinizi temiz ve özlü bir şekilde düzenlemenin harika bir yoludur. Bu, kaydırmayı azaltarak ve kullanıcıya sayfanızda görmek istedikleri üzerinde daha fazla kontrol sağlayarak kullanıcı deneyimini artırmaya yardımcı olabilir. Çevrimiçi bir restoran menüsü, geçişlerin iyi çalışabileceği iyi bir örnektir. Kullanıcı, beğendiği menü öğesini kolayca bulabilir ve daha fazla bilgi için öğeye tıklayabilir.

Bu eğitici yazıda, Divi geçişlerini kullanarak restoran menünüz için bazı sezgisel ve mobil uyumlu geçişlerin nasıl oluşturulacağını göstereceğim. Hatta belirli yemeklerin çarpıcı fotoğraflarını sergilemek için geçişinizi mobil için nasıl optimize edeceğinizi ve geçişli içeriğinizin içine Divi resim galerilerini nasıl yerleştireceğinizi göstereceğim.

Başlayalım.

Öncesi ve Sonrası

Yapacağımız restoran menü tasarımının öncesi ve sonrasının bir ön incelemesi.

Önce

Sonrasında

Başlarken

WordPress Galeri Ekranını Divi Galeri Ekranıyla Değiştirme

Divi, varsayılan WordPress Galerisi ekranını bir Divi Galerisi ekranıyla değiştirmenize olanak tanır. Bu nedenle, bir WordPress galerisi oluşturup sayfanıza gömdüğünüzde, galeri Divi Galeri Modülü kullanılarak bir galeri gibi görüntülenir. Bu, Divi Builder'daki herhangi bir modüle Divi resim galerileri eklemenize olanak tanır (bununla ilgili daha fazla bilgi ileride anlatılacaktır). Bu değişikliği uygulamak için Divi > Tema Seçenekleri'ne gidin. Genel sekmesi altında, Divi Galerisi seçeneğini etkinleştirmek için tıklayın.

Tema Vurgu Renginizi Ayarlama (isteğe bağlı)

Geçiş modülüne bir Divi galerisi ekleyeceğimizden, galerideki bir görüntünün üzerine geldiğinizde gösterilen simge rengi otomatik olarak Divi teması için ayarladığınız vurgu rengini devralır. Tema vurgu rengini, Divi > Tema Özelleştirici > Genel Ayarlar > Düzen Ayarları'na giderek WordPress Kontrol Panelinizden ayarlayabilirsiniz. Düzen Ayarları altında, tema erişim rengini aşağıdaki şekilde güncelleyin:

Tema Vurgu Rengi: #a06d51

Bu eğitim için kullanacağımız Fırın Menü Düzeni ile eşleşen renk budur.

Modül Özelleştiricide (isteğe bağlı) Varsayılan Geçiş Simgesi Boyutunu Güncelleme

Bu tasarım için Divi Toggle modülünü kullanırken daha büyük bir geçiş simgesi göstermenin faydalı olacağını düşündüm. Geçiş Modülünün varsayılan boyutunu Divi > Modül Özelleştirici'ye giderek değiştirebilirsiniz. Ardından listeden Geçiş Modülünü seçin ve simge boyutunu aşağıdaki gibi güncelleyin:

Simge Boyutunu Değiştir: 32

Fırın Menüsü Sayfa Düzeni ile Yeni Sayfanızı Ayarlama

Yeni başlayanlar için yeni bir sayfa oluşturmanız, sayfanıza bir başlık vermeniz ve Divi Builder'ı dağıtmanız gerekecek. “Hazır Düzen Seçin” seçeneğini seçin.

Kitaplıktan yükleme açılır penceresinden Fırın Düzen Paketini seçin ve ardından Fırın Menüsü Sayfa Düzenini kullanmak için tıklayın.

Düzen sayfaya yüklendikten sonra sayfanızı yayınlayın. Ardından “Ön Uçta Oluştur” düğmesine tıklayın. ve ardından sayfanızı yayınlayın. Ardından ön uçta oluşturmak için tıklayın.

İşiniz bittiğinde, menüyü tasarlamaya hazırsınız!

Divi Geçişleri ve Resim Galerileri ile Özel Restoran Menü Tasarımını Uygulama

Menü Öğesi Değiştirme Tasarlama

Divi Builder ön uçta etkinken, metin modülünün altına "Tatlı Diş" yazan alt başlığı olan bir Toggle modülü ekleyin.

Şimdilik, Başlık ve Gövde İçeriği için kullanılan varsayılan sahte içeriği bırakabilirsiniz. Ancak, sekmenin gövde içeriği içindeki menü öğesi için bir fiyat eklemeniz gerekecektir. Metin sekmesini (Görsel yerine) tıklayın ve mevcut varsayılan metnin altına aşağıdaki html'yi ekleyin.

<h5>$8.00</h5>

Ardından, geçiş ayarlarını aşağıdaki gibi güncellemeye başlayın:

• Simge Rengi: #a06d51
• Metin Rengini Aç/Kapat: #333333
• Kapalı Geçiş Metin Rengi: #333333
• Kapalı Geçiş Arka Plan Rengi: #ffffff

• Başlık Yazı Tipi: Patua Bir
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: TT
• Başlık Harf Aralığı: 1px
• Başlık Satırı Yüksekliği: 4em
• Özel Dolgu: 0 piksel üst, 0 piksel alt

Geçiş başlığının tıklanabilir alanını artırmak için başlık satırı yüksekliği artırılarak üst ve alt dolgu çıkarılır.

Şimdi toggle'ımıza bir sol kenarlık ekleyelim.

• Sol Kenar Genişliği: 5px
• Sol Kenar Rengi: #a06d51

Geçiş Modülüne Resim Galerisi Ekleme

Daha önce de belirtildiği gibi, Divi Tema Seçeneklerinde Divi Galeri seçeneğini etkinleştirdiğinizde, bir WordPress Galerisi gömülü bir Divi Galerisi stilini alacaktır. Bu, Divi tarzı bir resim galerisini herhangi bir modüle gömmenizi sağlar. Bu örnekte, belirli bir restoran menü öğesinin bazı resimlerini görüntülemek için geçiş modülünün içine bazı resimler eklemek istiyoruz. Bunu yapmak için geçiş ayarlarını açın ve içerik kutusunun üzerindeki Medya Ekle düğmesini tıklayın.

Medya Kitaplığı açılır penceresinde, soldaki Galeri Oluştur sekmesini seçin. Ardından galeri için kullanmak istediğiniz görselleri seçin ve “Yeni Galeri Oluştur”a tıklayın.

Açılır pencerenin Galeriyi Düzenle bölümünde, Divi Galeri stilleri bu WordPress Galerisi ayarlarını geçersiz kılacağından galeri ayarlarını yok sayın. Ardından Galeri Ekle düğmesini tıklayın.

Bu, geçiş modülü içeriğine bir galeri kısa kodu yerleştirir. Galerinin geçerli gövde metninden sonra görüntülenmesini istiyorsanız, kısa kodu içerikten sonra yerleştirdiğinizden emin olun.

Akıllı Telefon için Satır Dolgusunu Ayarlama

İçerik, önceden hazırlanmış düzenin mevcut aralığı ile oldukça sıkılaşacaktır. Akıllı telefonda daha fazla alan yaratmak için satır ayarlarını güncellememiz gerekiyor. Bunu yapmak için, restoran menü geçişlerinizi içeren satırın ayarlarını açın ve aşağıdakileri güncelleyin:

• Özel Dolgu (telefon): 0 piksel sol, 0 piksel sağ

Geçişi Gerektiğinde Çoğalt

Daha fazla Menü Öğesi eklemek için Geçiş modülünü çoğaltın ve içeriği gerektiği gibi yeni metin ve resim galerileriyle güncelleyin. Bundan sonra, önceden hazırlanmış düzen ile gelen orijinal menü öğelerini silebilirsiniz.

Son sonuç

Şimdi tasarımın nihai sonucunu kontrol edelim.

Galerideki Sütun Sayısını Değiştirme

Varsayılan olarak galeri, tüm tarayıcı genişliklerinde ve cihazlarda üç sütun olarak kalan bir düzene sahiptir. Ancak ışık kutusu efekti ile kullanıcılar galeri öğesine tıkladıklarında daha büyük bir sürümünü görebilecekler. Böylece, daha küçük görüntüler hala çalışabilir. Ancak, sütun sayısını değiştirmek isterseniz, her zaman küçük bir CSS parçacığı ekleyebilirsiniz. Bu örnek için, galeriyi resimleri iki sütun halinde gösterecek şekilde değiştireceğim. Bunu yapmak için önce geçiş ayarlarını açın ve aşağıdaki gibi özel bir CSS Sınıfı ekleyin:

CSS Sınıfı: iki-kol-gal

Ardından sayfa ayarlarını açın ve aşağıdaki Özel CSS'yi ekleyin:

.two-col-gal .et_gallery_item {
width: 50%;
padding: 2%;
margin: 0;
clear: none !important;
}

Modül Özelleştirici'de Resim Galerisi kaplama rengini değiştirme

Özel CSS kullanmak zorunda kalmadan galeri öğesi vurgulu yer paylaşımınızın rengini değiştirmek istiyorsanız, Modül Özelleştirici'de Galeri Modülü için varsayılan ayarları değiştirebilirsiniz. Bunu yapmak için Divi > Modül Özelleştirici'ye gidin. Ardından Galeri Modülüne tıklayın ve vurgulu kaplama rengini istediğiniz şekilde değiştirin.

Son düşünceler

Umarım bu eğitim, harika restoran menüleri oluşturmak için Divi Geçiş Modülünün nasıl kullanılacağına dair ilham verir. Bonus olarak, bazı Divi galerilerini istediğiniz herhangi bir modüle gömmek için yeni bir numara öğrenmiş olabilirsiniz (sadece geçişleri değil). Tek sınırlama, galeri yerleştirmenizde görüntülemek istediğiniz sütun sayısını özelleştirmektir. Ancak, sizi doğru yola sokmak için küçük bir özel CSS pasajı ekleyebilirsiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!