Özel bir restoran menüsü oluşturmak için geçiş yapmak için bir divi galerisi nasıl yerleştirilir
Web sayfanızda bir anahtar kullanmak, içeriğinizi temiz ve özlü bir şekilde yönetmenin iyi bir yoludur. Bu, ruloları azaltarak ve kullanıcılara sayfanızda görmek istedikleri üzerinde daha fazla kontrol sağlayarak kullanıcı deneyimini geliştirmeye yardımcı olabilir. Çevrimiçi restoran menüsü, iyi çalışabileceğiniz iyi bir örnektir. Kullanıcılar, istedikleri menü öğelerini kolayca bulabilir ve daha fazla bilgi için öğeye tıklayabilir. Bu öğreticide, bir divi anahtarı kullanarak restoran menünüz için nasıl sezgisel ve hücresel anahtarlar yapacağınızı göstereceğim. Hatta bazı şaşırtıcı fotoğrafları görüntülemek için Switch içeriğinize mobil ve divi resim galerisine geçişinizi nasıl optimize edeceğinizi bile göstereceğim.
Başlayalım. Aşağıdakilerden önce ve sonra yapacağımız restoran menüsünün tasarımından önce ve sonra gizlice göz atın. Önceki
$ 8.00
Ardından anahtar ayarlarını aşağıdaki gibi güncellemeye başlayın: Renk simgesi: #A06D51 Başlangıç Metin Rengi: #333333Metin rengi kapalı kaydırılır: #333333
Kapalı geçiş arka plan rengi: #ffffff
Yazı Tip Başlığı: Patua One
Ağır yazı tipi başlığı: kalın
Stil yazı tipi başlığı: TT
Başlık Aralığı: 1 piksel
Yüksek çizgi başlığı: 4em
Pilding Custom: 0px üst, 0px aşağıda
Tıklanabilen geçiş başlık alanını artırmak için, başlık satırının yüksekliği artar ve üst ve alt dolgu çıkarılır. Şimdi anahtarımıza sol limiti ekleyelim.
Sol sınır genişliği: 5px
Divi Tema seçeneğinde Divi Galerisi seçeneğini etkinleştirdiğinizde, WordPress Galerisi’ni gömme Divi Galerisi stilini alacaktır. Bu, Divi tarzı resim galerisini herhangi bir modüle sabitlemenizi sağlar. Bu örnek için, bazı restoran menü öğelerini görüntülemek için geçiş modülüne bazı resimler eklemek istiyoruz. Bunu yapmak için, anahtar ayarlarını açın ve içerik kutusundaki ortam düğmesini tıklayın.
Medya Kütüphanesi açılır penceresinde, soldaki galeri için sekmeyi seçin. Ardından, galeri için kullanmak istediğiniz resmi seçin ve “Yeni Bir Galeri Oluştur” u tıklayın. Pop -up’ın Düzenleme Galeri bölümünde, Divi Galeri stili bu WordPress Galeri Ayarları’na geleceği için Galeri Ayarlarını yok say. Ardından Galeri Ekle düğmesini tıklayın. Bu, anahtar modülünün içeriğine kısa bir galeri kodu yerleştirir. Geçerli içerik metninden sonra bir galerinin görüntülenmesini istiyorsanız, içerikten sonra kısa bir kod yerleştirdiğinizden emin olun. Akıllı telefon içeriği için dolgu hattının ayarlanması, mevcut hazır düzen mesafesi ile çok sıkı olacaktır. Akıllı telefonunuzda daha fazla yer açmak için satır ayarlarını güncellememiz gerekiyor. Bunu yapmak için, restoran menü anahtarınızı içeren çizgi ayarlarını açın ve aşağıdakileri güncelleyin: Pilding Custom (telefon): 0px sol, 0px sağ Daha fazla menü öğesi eklemek için gerektiği gibi geçiş yapın, geçiş modülünü çoğaltın ve içeriği gerektiği gibi yeni metin ve galeri ile güncelleyin. Bundan sonra, daha önce yapılmış düzene dahil olan orijinal menü öğesini silebilirsiniz. Nihai sonuçlar şimdi tasarımın nihai sonuçlarını kontrol edelim. Galerideki sütun sayısını değiştirme Varsayılan olarak, galeri tüm genişlik ve tarayıcı cihazında üç sütuna kalan bir düzen vardır. Ancak, LightBox efektiyle, kullanıcılar galeri öğesini tıklarken daha büyük bir sürüm görebilecektir. Böylece, daha küçük görüntüler yine de çalışabilir. Ancak, sütun sayısını değiştirmek istiyorsanız, her zaman küçük CSS parçaları ekleyebilirsiniz. Bu örnek için, görüntüleri iki sütuna görüntülemek için galeriyi değiştireceğim. Bunu yapmak için, önce anahtar ayarlarını açın ve özel CSS sınıfını aşağıdaki gibi ekleyin: CSS Sınıfı: İki-Col.
Ardından sayfa ayarlarını açın ve aşağıdaki özel CSS’yi ekleyin: .two-col-gal .et_gallery_item { Genişlik:%50; Dolgu:%2;
Marj: 0; Temiz: Yok! Önemli;
}
Modül ayarlamasındaki resim galerisinin rengini değiştirin Galeri kaplama imlecinizin rengini özel bir CSS kullanmak zorunda kalmadan değiştirmek istiyorsanız, modül ayarındaki 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ünü tıklayın ve imlecin rengini istediğiniz şekilde değiştirin.
Son zihin, umarım bu öğretici, bazı şaşırtıcı restoran menüleri yapmak için Divi geçiş modülünü nasıl kullanacağına ilham verecektir. Bir bonus olarak, bazı divi galerilerini istediğiniz modüle sabitlemek için yeni hileler öğrenmiş olabilirsiniz (sadece kapanmakla kalmaz). Tek sınır, Galeri Gömülü’nünüzde görüntülemek istediğiniz sütun sayısını ayarlamaktır. Ancak, sizi doğru yola yerleştirmek için özel bir küçük CSS parçası ekleyebilirsiniz.
Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
