Divi Galeri Modülleri Dolu Geniş Bir Galeri Nasıl Yapılır
Bu yazı, 5 etkileyici Divi Galeri Düzenleri ve Nasıl Yapılacağı Mini Serimizde 5. Bölüm. Galeri ve öğretici modüllerinin nasıl başarılacağına dair beş benzersiz örneğini dört gözle bekleyin!
Galeri, mevcut web tasarımındaki en önemli araçlardan biridir. İster işinizi göstermek isteyen bir tasarımcı olun, fotoğraflarınızı görüntülemek isteyen bir fotoğrafçı veya önde gelen bir portföy isteyen bir işletme-çevrimiçi galerilerin devam etmesi. Divi Galeri modülü ile, ziyaretçileri web sitemize çekecek çekici ve çekici bir galeri yapabiliriz.
Bu Divi Mini serisinde, 5 etkileyici Divi Galeri düzeni ve nasıl yapılacağını tartışacağız. Bu örneklerden bazıları oldukça basit olacak ve yalnızca Divi modül ayarlarında bazı ayarlamalar gerektirecektir. Diğerleri biraz daha gelişmiş olacak ve biraz CSS ve diğer ayarlamalar gerektirecektir. Umudum, Divi ve Web Tasarımında yeni başlayan kişi olup olmadığınız veya deneyimli bir Divi uzmanıysanız, bu fikirleri uygulayabileceksiniz ve Divi Galerinizi bir sonraki seviyeye getirmek için ilham alacaksınız! Bugün ve Sonra Bugün: Divi Galeri Modülü Başlamadan önce, Divi Varsayılan Galeri modülüne ve bu öğreticinin sonunda neleri değiştireceğimize bakalım.
Divi Galerisi modülüne resim eklediğinizde ve başka bir şey yapmadığınızda, elde edersiniz. Varsayılan Galeri Modülü İmleç ve Üstü
Varsayılan olarak, modül fotoğraf etiketleri görüntüleyen fotoğraflar arasında birkaç dolgu vardır ve 4 sütun halinde hizalanır. İmleç simgesi ana temanın rengini çekecek ve şeffaf bir beyaz esneme olacaktır. Alışılmadık bir şey için fena değil, ama galerimizi “pop” yapmanın bazı yollarını keşfedelim. Bugün öğreticimizin sonunda, aşağıda görebileceğiniz gibi güzel bir Fullwidth Galerisi alacağız. Örnek 1 – Tam Geniş Galeri Puan İmleci YouTube Kanallarımıza ve İlham Modülümüze Abone Olan Divi Galeri Modülleri Dolu Geniş Bir Galeri Nasıl Yapılır Tam Galeri Tam Galeri Çevrimiçi her yerde mevcuttur, ancak Divi kullanan bazı kişilerin galeride bazı basit değişiklikler yapabileceklerini bilemeyebileceğini anlıyorum modül ve aynı etkiyi elde edin. Tasarım öğelerinizi hazırlayın Aşağıdaki öğreticiye dalmadan önce, başarılı tasarım uygulaması için kendinizi ve tasarım öğelerinizi hazırlamak için aşağıdakileri yapmalısınız.
1) Bir çevrimiçi galeri oluşturduğunuzda, önceden yapılacak en önemli şey, yüklemeden önce görüntünüzün (tasarım veya fotoğraf) dosya boyutunuzu mümkün olduğunca küçük sağlamaktır. Bu, sayfanızı açma zamanına yardımcı olacaktır ve web sitenize büyük dosyalar tarafından sıkışmaması için yardımcı olacaktır. Görüntüleri kameradan bilgisayarınıza indirdiğinizde, genellikle dosya boyutu çok büyüktür ve aynı şey birçok tasarım dosyası için de geçerlidir. Özellikle galeriniz 20 veya daha fazla resim içeriyorsa, web için resminizi optimize etmek çok önemlidir. Genellikle Adobe Bridge veya Adobe Photoshop kullanıyorum, ancak web sitesine yüklemeden önce resimlerinizi optimize etmeye yardımcı olacak birçok program var. Ayrıca https://www.jpeg.io/ ve https://compressor.io/ gibi bir dizi ücretsiz çevrimiçi araç da vardır. Yaklaşık 1200 piksel genişlik boyutu iyi ekran ve dikey görüntüler için, yaklaşık 1000 piksel yüksekliği geçmemenizi öneririm. 2) Galeri oluştururken dosyalarınızı iyi bir şekilde etiketleyin, görüntü dosyanızı uzun bir kamera dosyası uzantısı olmayacak şekilde etiketlemektir. Bu sadece dosya yönetiminize (ve fotoğrafları sıralarken akıl sağlığınıza) yardımcı olmakla kalmaz, aynı zamanda SEO için de iyidir. İnsanlar işinizi ve hizmetlerinizi izlediğinde, iyi etiketlenmiş görüntüler genellikle ilk görünen şey olacaktır. Bu da sitenize veya müşterinize trafiği yönlendirmeye yardımcı olabilir.
3) Görüntünüzün telif hakkı içermediğinden emin olun Galeri ve tasarım öğelerinizdeki görüntünün telif hakkı içermediğinden emin olun. Davalar çevrimiçi görüntüler şakalar değildir, bu nedenle kullanma izniniz olmadığı sürece gösterdiğiniz iş veya görüntülerin kendiniz olduğundan emin olun. Bu öğretici uğruna, https://unsplash.com adresinden telifsiz bir görüntü kullanıyorum. Divikami’de tam geniş bir galeri modülü tasarımı uygulamak, bu alandaki ayarları ayarlayacaktır.
Bu tasarım için Divi Galerisi modülünü kullanacağız ve bu 3 alanda ayarlamalar yapacağız: – Genel Ayarlar – Gelişmiş Tasarım Ayarları – CRSS Ayarları
Başlamak için, bir satır ve tek bir galeri modülü ile bir parça yapın. Yapmamız gereken ilk çizgiyi ayarlamak, çizgi modülünü “tam geniş” olarak ayarlamak ve olukları, görüntünün yastık olmadan yan yana dizilmesi için ayarlamaktır. Genel Ayarlar: Bu çizgiyi tam genişlik yapın: Evet Özel Talang Genişliği Kullanın: Evet Talang Genişliği: 0 Hücreselde Özel Dolgu Kaydet: Evet Kaydet ve Çıkış Satır Ayarlarını Aç
Kanalizasyon ayarlarını ayarlayın.
Galeri Modülü Ayarları Şimdi Galeri Modülünün kendisine geçebilir ve tam geniş tasarımımızı elde etmek için gereken değişiklikleri yapabiliriz.
Gelişmiş Tasarım Ayarları: Zoom Icon Renk: #FFFFFF NOKTASI Renk Kaplaması: RGBA (28,28,28.0.81) Seçmenler Ikon Yakın: Artı işaretli büyüteç simgesi, resmi kaydırırken göreceğiniz şeydir. Kullanıcılara bu resimde “daha yakından görünmek” hakkında düşünmek için büyüteç simgesi kullanmayı seçtim. Tasarımınızda istediğiniz simgeyi deneyebilirsiniz. Ayrıca varsayılan tasarımı tersine çevirdim ve daha koyu bir arka planı kaplayan beyaz bir simge kullandım.
Gelişmiş Tasarım Ayarları CSS Custom Divi Tema Seçeneğinde Bir Görüntüyü açtığınızda, görüntünün başlığının görüntünün sol alt köşesinde görüntülendiğini göreceksiniz. 10 kişiden 9’u, müşteri benden silmemi ister. Bu yüzden şimdi sadece standart uygulamayı yapıyorum. Bu etkiyi bu mini dizideki tüm galerilere ekleyeceğim.
Resim Başlıkını Sil
Etiketi silmek için, Divi> Tema seçeneğine giderek Divi Tema Seçenek Panelini açın ve CSS Custom’a gidin ve şu kodu girin: .mfp-title { Görüntü yok;
} Kullanıcı görüntüyü açtığında dosya adını siler.
Son tasarımınız, Divi Galeri Modülü ile dolu geniş bir galeri!
İşte buyur!Tam geniş bir galeri yaparak galerinizi standart ekrandan ayırt etmenin hızlı ama etkili yolu.En iyi bölüm – bu ekranı yalnızca ek kod veya CSS olmadan bazı standart Divi modül ayarlarını değiştirerek elde edebiliriz!Yarın: Özel dolgulu bir kiremit galerisi yapmak için Divi Galerisi modülünü kullanmak!Yarın Örnek 2 için tekrar kontrol edin – Nerede sadece dolgu ayarlayarak sıkı bir karo tarzı galeriyi nasıl yapacağımızı keşfedeceğiz!Müşterilerimin çoğunluğu bu görünümden hoşlanıyor ve size nasıl gerçekleşeceğinizi göstermeye hevesliyim! Örnek 2 – Rulman ile sıkı karo galerisi
Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
