Divi’de şirket logolarını göstermenin basit ve yaratıcı yolu
Web sitenizde şirket logolarını görüntülemek için birçok neden var. Şirketin logosunun “Üstün” bölümü potansiyel yatırımcıları veya ortakları etkileyebilir. Veya “Müşterimizi Dahil” ziyaretçilerle değerli sosyal kanıtlar oluşturabilir. Ancak nedeni ne olursa olsun, bu logoyu web sitenize nasıl ekleyeceğinizi bilmek önemlidir. Bu öğreticide, web sitenize Divi ile şirket logoları eklemek için üç farklı yöntemi tartışacağım. Herhangi bir divi modülüne nasıl bir logo galerisi ekleyeceğinizi bile göstereceğim! Bu öğreticide tartışılacak olan budur:
Logo resminizi hazırlayın
Logoyu sürükle ve basit gevşek görüntülemek için Divi Galerisi modülünü kullanın
Logoyu görüntülemek için sabitlenmiş WordPress Galerisi’ni kullanarak
Logo için özel bir düzen oluşturmak için Divi Builder’ı kullanın
Başlayalım! Sneak Peek İşte bu öğretici teknikleri kullanabilecek bazı tasarımlar.
Her logo benzersiz bir boyuta sahip olduğundan, her şeyin doğru boyutlara sahip olması neredeyse imkansızdır. Yararlı bir fotoğraf editörü burası. Örneğin, Photoshop kullanarak yeni bir dosya oluşturabilir ve belgelerin boyutlarını tüm logo resimleriniz için istediğiniz boyuta ayarlayabilirsiniz (bu durumda 226px kez 100px). Ardından logo görüntüsünü belgeye ekleyin ve boyutunu değiştirin ve görüntüyü doğrudan ortada konumlandırın. Şeffaf bir arka plana sahip bir PNG görüntü dosyası olduğundan emin olun. Ardından şeffaf bir arka planı korumak için görüntüyü bir PNG dosyası olarak dışa aktarın. Ardından logonuzun geri kalanı için işlemi tekrarlayın.
Logonun orijinal rengini koruyabilir veya istediğiniz renge dönüştürmek için bir fotoğraf editörü kullanabilirsiniz. Divi (IE görüntü modülü veya resim galerisi) kullanarak loganızı eklemeyi planlıyorsanız, rengi ayarlamak için Divi’nin varsayılan filtre efektini her zaman kullanabilirsiniz. Şirket logosunu görüntülemek için Divi Galerisi modülünü kullanarak YouTube kanalımıza abone olun (sürükleme ve basit sürüm) Sitenize Divi ile bir şirket logosu eklemek için ilk yöntem oldukça kolaydır. Divi Drag ve Drop özelliğini kullanarak, logonuzu kutuda görüntülemek için doğrudan Galeriler oluşturmak ve görüntülemek için tüm şirket logolarını Divi Builder’a sürükleyebilirsiniz.
Bunu yapmak için yeni bir sayfa oluşturun ve ön uçta oluşturmak için Divi Builder’ı kullanın. “Başından Uyan” seçeneğini seçin. Divi üreticisi etkin ve çalıştırıldıktan sonra, tüm resimlerinizi içeren klasörü açın ve seçin. Ardından Divi Builder ile tarayıcı penceresine sürükleyin. Divi, görüntüleri otomatik olarak yeni galeri modülüne ekleyecek ve sizin için ayarlama işlemini başlatmak için galeri ayarlarını açacaktır. 8 logo görüntüsü eklediğim ve herhangi bir başlık, açıklama veya sayfa görüntüleme görüntülemek istemediğim için aşağıdakileri güncelleyebildim: Resim Numarası: 8 Göster Başlık ve Açıklama: Sayma Göster: Hayır Varsayılan olarak, Galeri modülü her görüntü için bir simge içeren bir kaplama farı ekleyecektir. Zoom Icon Rengi, Overlay Hover Rengi veya Hover simgesi için kaplama ayarlarını ayarlayabilirsiniz. Her şeyi temiz ve basit tutmak için, Zoom Icon Rengini ayarlayarak kaplama kalemini ortadan kaldırabilirsiniz. Bundan sonra, fotoğraf galeriniz için benzersiz tasarımlar oluşturmak için tüm tasarım seçeneklerini keşfedebilirsiniz. Örneğin, pürüzsüz bir kutu gölgesine sahip bir sınır ekleyebilirsiniz. Görüntü Sınırı Genişliği: 1px Renk Görüntü Sınırı: #DDDDD Gölge Görüntü Kutusu: Ekran görüntüsüne bakın Son tasarımın farklı tarayıcı boyutlarında nasıl görüleceği aşağıda açıklanmıştır. Ve bu galeri herhangi bir sütun yapısına eklenebileceğinden, şirketinizin logosu için kolayca benzersiz bir düzen oluşturabilirsiniz. Aşağıda, soldaki metin modülü ve sağdaki resim galerisi modülü (logo ile) ile iki sütunun düzeni örneğidir. Size farklı bir görünüm göstermek için bir arka plan gradyanı ekledim. #2 Bir şirket logosunu (herhangi bir divi modülüyle) görüntülemek için WordPress Galerisi’ni kullanarak WordPress resim galerisi kısa kodunu kullanarak web sitenize bir şirket logosu ekleyebilirsiniz. Bunu yapmak çok kolaydır ve logo için çok uygundur, çünkü birçok durumda görüntüye özel bir stil eklemenize gerek yoktur. Bu yöntemle ilgili harika olan, tarayıcı pencerenizle logo ölçeğiniz için en fazla 9 sütun kullanabilmenizdir, sütun yapınızı da mobil olarak tutmanıza izin vermenizdir. İşte nasıl yapılacağı. Divi Builder’da, çeyrek çeyrek çeyrek sütun yapısı ile yeni bir parça oluşturun. Önce metin modülünü sola ekleyin ve aşağıdakileri güncelleyin: içerik: “” Metin yazı tipinde gösterildiği gibi: Montserrat Ağırlık Yazı Tipi Metin: Metin Boyutu Metin Boyutu: 26px Metin Oryantasyonu: Orta
Şimdi sağ sütuna başka bir metin modülü ekleyin. İçerik sekmesi altında, şu anda var olan yapay içeriği silin ve içerik düzenleyicisi kutusunun üst kısmındaki “Ortam Ekle” düğmesini tıklayın. Bu, medya galerisi açılır penceresini getirecek. Ardından, açılır pencerenin solundaki galeri için bağlantıyı tıklayın. Ardından galeriye dahil etmek istediğiniz logo görüntüsünü seçin (bu örnek için sekiz resim kullanıyorum). Galeri düğmesini tıklayın. Bu, açılır penceredeki Galeri Düzenleme sayfasını getirecektir. Galeri ayarlarını sağ taraftaki aşağıdaki gibi güncelleyin: Bağlantı: Sütun yok: 8 (bu, galerideki görüntü sayısıyla aynı olmalı, böylece bir satırda kalır) Boyut: Tam Boyut
Ardından yeni bir galeri oluşturmak için düğmeyi tıklayın. Bu, WordPress’e varsayılan olarak gereken galerinin kısa kodlarını sabitleyecek ve metin modülündeki galeriyi görüntüleyecektir.
Şimdi satır ayarlarını açın ve aşağıdakileri güncelleyin: Bu çizgiyi tam genişlik yapın: Evet Özel olukların genişliğini kullanın: Evet Talang Genişliği: 1 Eşit Sütun Yüksekliği: Evet Bu ayarla, nefes almak için logonuz için daha fazla alana sahipsiniz. Şimdi sağdaki logoya dikey olarak paralel hale getirmek için soldaki metni ayarlayın. Bunu başarmak için sol sütuna ihtiyaç duyulan özel bir dolgu ekleyebilirsiniz, ancak iki modülün orta düzeyde dikey olarak kaldığını garanti etmek için, satır ayarlarınızın devam eden sekmesi altındaki ana öğeye aşağıdaki özel CSS ekleyebilirsiniz. : Merkez;
Bu CSS işlev görür, çünkü sütun yüksekliklerini Eşitleştirmeyi Evet olarak ayarladığımız için, böylece çizgi için “Ekran: Flex” özelliğini etkinleştiririz. Bununla ilgili daha fazla bilgi için, Divi’de içeriği dikey olarak nasıl uyumlu hale getireceğinize bakın. Ve resmimizin etrafındaki gri sınırı ortadan kaldırmak için, sayfa ayarlarımıza aşağıdaki CSS parçalarını eklememiz gerekir: .Gallery img {Sınır: Yok! Önemli;
} İşte son tasarım.
Burada sıraya siyah bir arka plan eklendi.
Hücresel olarak, sütun herhangi bir ekran boyutunda kırılmaz. Görüntüler yalnızca daha küçük boyutlara ölçeklenir. İtiraf ederim. Görüntü çok küçük hale geldiği için sekiz sütun bir akıllı telefonda çok fazla olabilir. Logo galerisini tüm divi modüllerine sabitleyin çünkü bu kısa bir kod olduğundan, bu galeriyi birçok farklı olasılık açan hemen hemen tüm Divi modüllerine ekleyebilirsiniz. Örneğin, anahtarlara, akorlara ve hatta sekme modüllerine logo görüntüleri ekleyebilirsiniz. Logonuzdan iki farklı sekmeye kısa bir kod eklediğinizde ekranın bir örneği. Bu örnek için, her galeri için 3 sütunlu 6 logo seçtim. Bu, birçok logo gerektiren siteler için yararlı olabilir. #3 Şirket logosu için özel bir düzen oluşturmak için divi Builder kullanın, şirket logonuzun düzeni ile biraz daha yaratıcı istiyorsanız, hayal edebileceğiniz her şeyi tasarlamak için Divi Builder’ı kullanabilirsiniz. Divi hat öğeleri, şirketin logo düzeninin çoğu için 6 sütuna kadar sütunların düzenini destekler. 6 sütun düzeni seviyorum ve logo için en iyi 4 sütun çoğunlukla hücresellere yanıt verdikleri içindir. Aşağıdaki tasarımda, şirket logonuzun düzeninin bir sonraki seviyeye nasıl getirileceğine dair bazı ipuçları göstereceğim. İlk olarak, altı sütun satırı ile yeni bir rol yaparak başlayalım. Sütunumuza bir şey eklemeye başlamadan önce, satır ayarlarını açın ve aşağıdakileri güncellemeden önce: Özel genişlik:% 90 oluk genişliği: 1 Eşit sütun yüksekliği: Evet dolgu özelliği: 4VW’nin altında, 4VW’nin altında Ayarları kaydedin. Ardından görüntü modülünü ilk sütununuza ekleyin ve ardından logo resimlerinizden birini seçin. Ardından, her sütuna logo görüntüsünü aşağıdaki gibi ekleyerek devam edin: Sütun 1: 1 Sütun Logosu 2: 2 Sütun Logosu 3: 3 Sütun Logosu 4: 3 Sütun Logosu 5: 2 Sütun Logosu 6: 1 LogoSarang Bu ayarlarla ayarlayabilirsiniz, ayarlayabilirsiniz Dikey seviyeler özel CSS parçaları kullanır. İçeriği dikey olarak odaklamak istiyorsanız, metni yukarıdaki 2 numaralı logo galerisinin dikey olarak odaklamak için eklediğimiz aynı CSS görüntüsünü ekleyebilirsiniz. Satır ayarlarını açın ve aşağıdaki CSS’yi ana öğeye ekleyin. Hizalama-öğeler: merkez; Gördüğünüz gibi, bu logo için yuvarlak bir düzen oluşturur. Ancak bu düzen için modülü hattın altına hizalayacağım. Bu nedenle, “Hizalama: Center” görüntülerini aşağıdakilerle değiştirin: Hizalama: Flex-end; Bu, tüm modülleri, ekleyeceğimiz bölücü ile iyi çalışacak çizginin altına hizalar. Şimdi rolümüzü ayarlamaya hazırız. Aşağıdaki bölümleri açın ve güncelleme: Arka plan: #2A3443 Üst Sertifika: Bkz. Üst Yetiştirme Renk Ekranı Yakalama: RGBA (255,255,255,0.03) Yüksek Böcek Yüksekliği: 13VW Geri Parçalar: Dikey Pilding Custom, 0px Top, 0px Aşağıda Başımız için yeni bir rol oynayacağız ve yeni yaptığımız parçanın üzerine yerleştireceğiz. Sütun satırı yapısına sahip yeni bir düzenli bölüm oluşturun. Bölümün ayarlarını şu şekilde güncelleyin: Arka Plan Rengi: #2A3443 Alt Bölü Kuvveti: Bkz. Alt Ekran Renk Ekranı Yakalama: RGBA (238,238,238.0.09) Alt Bölücü Yükseklik: 13VW Palding Özel: 0px daha düşük Şimdi ayarlarınızı kaydedin ve metin modülünü aşağıdaki satıra ekleyin ve güncelleme:
Başlık 2 Yazı Tipi’nde gösterildiği gibi: Montserrat Başlık 2 Yazı Tipi Ağırlığı: Kalınlık Başlık 2 Metin Seviyesi: Orta Başlık 2 Metin Rengi: #FFFFFF Başlık 2 Metin Boyutu: 32px Özel Marj: 0px Aşağıda
Son olarak, görüntü modülünü metin modülünün altına, diğerlerinin üstünde görüntülemek istediğiniz şirket logosuyla ekleyin. Ardından aşağıdakileri güncelleyin: Görüntünün Aydınlanması: Orta Özel Kenar: -75px Sonuç’a bakın. Son zihin, şirketin logosu için web sitenizdeki rolü aslında oldukça basit hale getiriyor. Bir fotoğraf editörü kullanarak doğru boyutta bir logo görüntüsünüz var, Divi geri kalanıyla ilgilenebilir. Bu öğreticiye dahil olan yöntem, elde etmek istediğiniz düzeni biraz çaba ile yapmak için ihtiyacınız olan her şeyi vermelidir. Ve köşedeki Divi’nin gücü ile, kendi benzersiz düzeninizi yapmak için eğlenmelisiniz. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!