Görüntünün açısını Divi ile muhteşem bir galeri kutusunda etiketleyin
Web sitenizdeki galerilerde resim göstermenin benzersiz ve güzel yollarını mı arıyorsunuz? Eğer öyleyse, bu gönderiyi beğeneceğinizden eminiz. Tüm ekran boyutlarında% 100 duyarlı kalan güzel bir tasarımın bir parçası olarak görüntünün açısını bir metin modülü ile nasıl keseceğinizi göstereceğiz. Bu, inanılmaz bir tasarım sürdürürken görüntünüze numaralı etiketler eklemenin iyi bir yoludur. JSON dosyalarını ücretsiz bir tasarım örneğinden de indirebilirsiniz. Haydi Yapalım şunu! Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım.
Ücretsiz galeri bölümünün düzenini almak için Ücretsiz Galeri bölümünün düzenini indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanallarımıza abone olun, yapmanız gereken ilk mesafenin yeni bir bölümünü oluşturmaya başlayalım, çalıştığınız sayfaya yeni bir bölüm eklemektir üzerinde. Bölümün ayarlarını açın ve varsayılan dolgunun tüm üst ve altını silin.
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Arka plan rengi bir sonraki beyaz arka plan rengini ekleyin. Arka plan rengi: #ffffff
Yapışkan, boyut ayarlarına geçer ve aşağıdaki ayarları uygulayarak sütunlar, satırlar ve bölümler arasındaki tüm boşlukları silin: Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Tüm dolguyu varsayılan olarak kaldırarak daha fazla mesafe. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 1, 2, 3 ve 4 Ana öğeler Şimdi, 4 sütunun yapısının tüm ekran boyutlarında saklanmasını sağlamak için, her sütunun aşağıdaki CSS kod satırı ekleyerek% 25 genişlik tutmasını sağlayacağız. sütun tek tek: Genişlik:%25! Önemli;
Resim Modülünü Sütun 1’e Ekleyin Şekil 1: 1 Modül eklemeye başlama zamanı! İlk sütuna yeni bir resim modülü ekleyin ve istediğiniz kare bir görüntü yükleyin (veya bu yazının başında indirebileceğiniz ZIP klasöründe bulabileceğiniz kullanın). Light Box, sonraki bağlantı ayarlarında LightBox seçeneğini etkinleştirir. LightBox’ta Aç: Evet
Yapıştırıcı Görüntünün tüm ekran boyutlarında duyarlı kalmasını sağlamak için ‘zorla tam genişlik’ seçeneğini de etkinleştireceğiz. Varsayılan filtremiz de parlaklığı değiştirir.
Parlaklık:% 50 Filtreyi yönlendirin ve imleci yönlendirirken ‘%100’ e iade edeceğiz.
Parlaklık:% 100 Varsayılan Z ineksi görünürlük ayarlarına geçer ve z indexinin varsayılan durumda ‘0’ kalmasını sağlar.
Dizin Z: 0 Z endeksine gidin, ancak imleci yönlendirirken, bir sonraki adımda ekleyeceğimiz sayı etiketi metin modülü ile örtüşmesini istiyoruz. Bunu yapmak için Z Hover endeks değerini artıracağız.
Dizin Z: 100 Klon Görüntü Modülü 3 kez ve Place Kalan sütundaki görüntü modülünü Sütun 1’deki tamamladıktan sonra üç kez klonlayabilirsiniz. Kalan üç sıra sütuna yinelenen yerleştirin.
Görüntüyü Değiştirme Görüntüyü kopya olarak değiştirin. Üst kenar boşluğunu sütun 2’deki görüntü modülüne ekleyin ve ikinci sütundaki görüntü modülüne üst kenar boşluğunu ekleyin. Üst Marj: 24.7VW Metin modülünü modülün altına ekleyin Şekil #1 Sütun 1’de ihtiyacımız olan aşağıdaki modül içeriğini ekleyin Metin modülüdür. İçerik kutusuna numara ekleyin.
Arka plan rengi bir sonraki arka plan rengini değiştirin. Bu renk, satıra ayarladığınız arka plan rengini eşleştirmelidir.
Metin yazı tipi: lora Hizalama Metni: Doğru
Metin rengi: #000000
Metin Boyutu: 3VW
Hat yüksekliği metni: 3VW
Yapıştırıcımız ayrıca modülün genişliğini azaltır.
Genişlik: 7vw Bir sonraki boşluk ayarlarında modül için bir miktar alan için mesafe.
Üst dolgu: 0.5vw Dolgu Alt: 2.5VW
Sağ dolgu: 0.9vwindex z ve z. Dizinini arttırır.
Dizin Z: 99
Klon metin modülü 3 kez metin modülü için genel adımları tamamladıktan sonra üç kez klonlayabilirsiniz. Konumlandırma kopyası uygun:
Farklı bir metin modülünü konumuna göre ayarlamaya başlamak için Metin Modülü Metin Modülü #1 üst negatif marj süresini ayarlayın! Metin modülünü sütun 1’de açın ve bazı negatif kenar boşlukları ekleyin. Üst kenar boşluğu: -5.9vw Kutumuzun gölgesi de aşağıdaki ayarları kullanarak kutunun gölgesini ekledi: Yatay Konum Gölge Kutusu: 7VW
Dikey Konum Gölge Kutusu: 5.9VW Gölge kutularının dağılımının gücü: 0px
Gölge Renk: RGBA (35,50,255,0,94)
Metin Modülü #2 İkinci sütunda metin modülünü açıp numarayı değiştirerek numaralandırmayı değiştirin.
Metnin hizalanması metin seviyesini de değiştirin.
Hizalama Metni: Sol Modüllerin hizalanması ve boyut ayarlarındaki modül seviyesini değiştirin. Modül hizalaması: doğru
Mesafe boşluk ayarlarına geçer ve bazı negatif marjlar ekler. Sağ tarafta değil, sola dolgu ekleyin. Üst kenar boşluğu: -6vw
Sol dolgu: 0.9vw Kutunun gölgesi, kutunun gölgesini ekleyerek metin modülünün tasarımını tamamlar.
Yatay Konum Gölge Kutusu: 7VW
Kutu gölgesinin dikey konumu: -6vw Gölge kutularının dağılımının gücü: 0px
Gölge rengi: #ededed
Metin Modülü #3 Sütun 3’teki numarayı metin modülüne değiştirin! İçerik kutusundaki numarayı değiştirin.
Üst negatif marj tasarım sekmesine geçer ve bazı negatif marjlar ekler.
Üst kenar boşluğu: -6vw Kutunun gölgesi kutunun gölgesini de kullanır. Yatay konum gölge kutusu: -7vw
Kutu gölgesinin dikey konumu: -6vw Gölge kutularının dağılımının gücü: 0px
Gölge Renk: #FF2323
Metin Modülü #4 Numarayı bir sonraki ve son metin modülüne değiştirin. Buradaki numarayı da değiştirin.
Hizalama Metni: Sol
Modül Hizalaması Modülün boyutu ayarlamada hizalamasını da değiştirin. Modül hizalaması: doğru Aralığı Değiştirme Sonraki boşluk ayarlarını değiştirin.
Üst Marj: 24.7VW Alt marj: -6vw
Sol dolgu: 0.9vw Kutunun gölgesini aşağıdaki ayarlarla ekleyerek metin modülünün tasarımını tamamlayın ve tamamlayın:
Yatay konum gölge kutusu: -7vw
Dikey Konum Gölge Kutusu: -5.9VW
Gölge kutularının dağılımının gücü: 0px Gölge Renk: #000000
Satırları bitirdikten sonra tüm satırları klonlar, görüntülemek istediğinize bağlı olarak istediğiniz kadar klonlayabilirsiniz.
Numaralandırma ve Görüntüyü Değiştirin Tüm resimleri ve numaraları değiştirdiğinizden ve bitirdiğinizden emin olun!
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.
Bu yazıdaki son zihin, etiketli bir görüntü açısı ile iyi görünen bir galeri nasıl yapacağınızı gösterdik. Bu, görüntülerinizi estetik ilginç bir şekilde göstermenin eşsiz bir yoludur. Öğreticinin başında JSON dosyalarını da indirebilirsiniz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve Ücretsiz Haftalık Divi Düzen Paketine erişin! YouTube kanallarımıza abone olun, yapmanız gereken ilk mesafenin yeni bir bölümünü oluşturmaya başlayalım, çalıştığınız sayfaya yeni bir bölüm eklemektir üzerinde. Bölümün ayarlarını açın ve varsayılan dolgunun tüm üst ve altını silin.
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun yapısının yeni bir satırı ekleyin. Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Arka plan rengi bir sonraki beyaz arka plan rengini ekleyin. Arka plan rengi: #ffffff
Yapışkan, boyut ayarlarına geçer ve aşağıdaki ayarları uygulayarak sütunlar, satırlar ve bölümler arasındaki tüm boşlukları silin: Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Tüm dolguyu varsayılan olarak kaldırarak daha fazla mesafe. Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 1, 2, 3 ve 4 Ana öğeler Şimdi, 4 sütunun yapısının tüm ekran boyutlarında saklanmasını sağlamak için, her sütunun aşağıdaki CSS kod satırı ekleyerek% 25 genişlik tutmasını sağlayacağız. sütun tek tek: Genişlik:%25! Önemli;
Resim Modülünü Sütun 1’e Ekleyin Şekil 1: 1 Modül eklemeye başlama zamanı! İlk sütuna yeni bir resim modülü ekleyin ve istediğiniz kare bir görüntü yükleyin (veya bu yazının başında indirebileceğiniz ZIP klasöründe bulabileceğiniz kullanın). Light Box, sonraki bağlantı ayarlarında LightBox seçeneğini etkinleştirir. LightBox’ta Aç: Evet
Yapıştırıcı Görüntünün tüm ekran boyutlarında duyarlı kalmasını sağlamak için ‘zorla tam genişlik’ seçeneğini de etkinleştireceğiz. Varsayılan filtremiz de parlaklığı değiştirir.
Parlaklık:% 50 Filtreyi yönlendirin ve imleci yönlendirirken ‘%100’ e iade edeceğiz.
Parlaklık:% 100 Varsayılan Z ineksi görünürlük ayarlarına geçer ve z indexinin varsayılan durumda ‘0’ kalmasını sağlar.
Dizin Z: 0 Z endeksine gidin, ancak imleci yönlendirirken, bir sonraki adımda ekleyeceğimiz sayı etiketi metin modülü ile örtüşmesini istiyoruz. Bunu yapmak için Z Hover endeks değerini artıracağız.
Dizin Z: 100 Klon Görüntü Modülü 3 kez ve Place Kalan sütundaki görüntü modülünü Sütun 1’deki tamamladıktan sonra üç kez klonlayabilirsiniz. Kalan üç sıra sütuna yinelenen yerleştirin.
Görüntüyü Değiştirme Görüntüyü kopya olarak değiştirin. Üst kenar boşluğunu sütun 2’deki görüntü modülüne ekleyin ve ikinci sütundaki görüntü modülüne üst kenar boşluğunu ekleyin. Üst Marj: 24.7VW Metin modülünü modülün altına ekleyin Şekil #1 Sütun 1’de ihtiyacımız olan aşağıdaki modül içeriğini ekleyin Metin modülüdür. İçerik kutusuna numara ekleyin.
Arka plan rengi bir sonraki arka plan rengini değiştirin. Bu renk, satıra ayarladığınız arka plan rengini eşleştirmelidir.
Arka plan rengi: #ffffff
Metin Ayarları Tasarım sekmesine geçer ve metin ayarlarını değiştirir.Metin yazı tipi: lora Hizalama Metni: Doğru
Metin rengi: #000000
Metin Boyutu: 3VW
Hat yüksekliği metni: 3VW
Yapıştırıcımız ayrıca modülün genişliğini azaltır.
Genişlik: 7vw Bir sonraki boşluk ayarlarında modül için bir miktar alan için mesafe.
Üst dolgu: 0.5vw Dolgu Alt: 2.5VW
Sağ dolgu: 0.9vwindex z ve z. Dizinini arttırır.
Dizin Z: 99
Klon metin modülü 3 kez metin modülü için genel adımları tamamladıktan sonra üç kez klonlayabilirsiniz. Konumlandırma kopyası uygun:
Farklı bir metin modülünü konumuna göre ayarlamaya başlamak için Metin Modülü Metin Modülü #1 üst negatif marj süresini ayarlayın! Metin modülünü sütun 1’de açın ve bazı negatif kenar boşlukları ekleyin. Üst kenar boşluğu: -5.9vw Kutumuzun gölgesi de aşağıdaki ayarları kullanarak kutunun gölgesini ekledi: Yatay Konum Gölge Kutusu: 7VW
Dikey Konum Gölge Kutusu: 5.9VW Gölge kutularının dağılımının gücü: 0px
Gölge Renk: RGBA (35,50,255,0,94)
Metin Modülü #2 İkinci sütunda metin modülünü açıp numarayı değiştirerek numaralandırmayı değiştirin.
Metnin hizalanması metin seviyesini de değiştirin.
Hizalama Metni: Sol Modüllerin hizalanması ve boyut ayarlarındaki modül seviyesini değiştirin. Modül hizalaması: doğru
Mesafe boşluk ayarlarına geçer ve bazı negatif marjlar ekler. Sağ tarafta değil, sola dolgu ekleyin. Üst kenar boşluğu: -6vw
Sol dolgu: 0.9vw Kutunun gölgesi, kutunun gölgesini ekleyerek metin modülünün tasarımını tamamlar.
Yatay Konum Gölge Kutusu: 7VW
Kutu gölgesinin dikey konumu: -6vw Gölge kutularının dağılımının gücü: 0px
Gölge rengi: #ededed
Metin Modülü #3 Sütun 3’teki numarayı metin modülüne değiştirin! İçerik kutusundaki numarayı değiştirin.
Üst negatif marj tasarım sekmesine geçer ve bazı negatif marjlar ekler.
Üst kenar boşluğu: -6vw Kutunun gölgesi kutunun gölgesini de kullanır. Yatay konum gölge kutusu: -7vw
Kutu gölgesinin dikey konumu: -6vw Gölge kutularının dağılımının gücü: 0px
Gölge Renk: #FF2323
Metin Modülü #4 Numarayı bir sonraki ve son metin modülüne değiştirin. Buradaki numarayı da değiştirin.
Hizalama Metni: Sol
Modül Hizalaması Modülün boyutu ayarlamada hizalamasını da değiştirin. Modül hizalaması: doğru Aralığı Değiştirme Sonraki boşluk ayarlarını değiştirin.
Üst Marj: 24.7VW Alt marj: -6vw
Sol dolgu: 0.9vw Kutunun gölgesini aşağıdaki ayarlarla ekleyerek metin modülünün tasarımını tamamlayın ve tamamlayın:
Yatay konum gölge kutusu: -7vw
Dikey Konum Gölge Kutusu: -5.9VW
Gölge kutularının dağılımının gücü: 0px Gölge Renk: #000000
Satırları bitirdikten sonra tüm satırları klonlar, görüntülemek istediğinize bağlı olarak istediğiniz kadar klonlayabilirsiniz.
Numaralandırma ve Görüntüyü Değiştirin Tüm resimleri ve numaraları değiştirdiğinizden ve bitirdiğinizden emin olun!
Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım.
Bu yazıdaki son zihin, etiketli bir görüntü açısı ile iyi görünen bir galeri nasıl yapacağınızı gösterdik. Bu, görüntülerinizi estetik ilginç bir şekilde göstermenin eşsiz bir yoludur. Öğreticinin başında JSON dosyalarını da indirebilirsiniz. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun! Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
