Divi'de Şirket Logolarını Görüntülemenin Basit ve Yaratıcı Yolları

Web sitenizde şirket logolarını görüntülemek için birçok neden vardır. Şirket logolarının "Öne Çıkanlar" bölümü, potansiyel yatırımcılar veya ortaklar için geçerli olabilir. Veya bir "Müşterilerimiz Dahil Et" bölümü, ziyaretçilerle değerli sosyal kanıtlar oluşturabilir. Ancak nedeni ne olursa olsun, bu logoları web sitenize nasıl ekleyeceğinizi bilmek önemlidir. Bu derste, Divi ile web sitenize şirket logoları eklemek için üç farklı yöntemi inceleyeceğim. Hatta size herhangi bir Divi Modülüne nasıl logo galeri ekleyeceğinizi göstereceğim!

İşte bu eğitimde ele alınacaklar:

• Logo Görsellerinizi Hazırlama
• Basit Sürükle ve Bırak ile Logoları Görüntülemek için Divi Galeri Modülünü Kullanma
• Logoları Görüntülemek için WordPress Gallery Embed'i Kullanma
• Logolar için Özel Düzen Oluşturmak için Divi Builder'ı Kullanma

Başlayalım!

Gizlice Bakış

İşte bu eğitimdeki teknikleri kullanarak mümkün olan tasarımlardan birkaçına bir göz atın.

Logo Görsellerinizi Hazırlama

Logolarınızı web sitenizde görüntülenecek şekilde hazırlarken, sitenize eklemeden önce görsellerinizi bir fotoğraf düzenleyici kullanarak boyutlandırmak için zaman ayırmanız önemlidir. Bu, logolarınızı özel genişlikler, dolgular veya kenar boşluklarıyla boyutlandırmaya ve konumlandırmaya çalışmaktan sizi kurtaracaktır. Güven Bana. Mecbur değilsen o yoldan gitmek istemezsin.

Her logonun kendine özgü bir boyutu olduğundan, hepsinin tam boyutlara sahip olmasını sağlamak neredeyse imkansızdır. Bir fotoğraf düzenleyicinin kullanışlı olduğu yer burasıdır. Örneğin, Photoshop kullanarak yeni bir dosya oluşturabilir ve belge boyutlarını tüm logo görsellerinizin (bu durumda 226 piksele 100 piksel) olmasını istediğiniz boyuta ayarlayabilirsiniz.

Ardından logo görüntüsünü belgeye ekleyin ve yeniden boyutlandırın ve görüntüyü doğrudan merkeze yerleştirin. Saydam bir arka plana sahip bir png görüntü dosyası olduğundan emin olun.

Ardından saydam arka planı korumak için görüntüyü png dosyası olarak dışa aktarın.

Ardından, logolarınızın geri kalanı için işlemi tekrarlayın.

Logonun orijinal rengini koruyabilir veya istediğiniz renge değiştirmek için bir fotoğraf düzenleyici kullanabilirsiniz. Logolarınızı bir Divi (yani resim modülü veya resim galerisi) kullanarak eklemeyi planlıyorsanız, renkleri ayarlamak için her zaman Divi'nin yerleşik filtre efektlerini kullanabilirsiniz.

Youtube Kanalımıza Abone Olun

#1 Şirket Logolarını Görüntülemek için Divi Galeri Modülünü Kullanma (basit bir sürükle ve bırak)

Divi ile sitenize şirket logoları eklemek için bu ilk yöntem, olabildiğince kolaydır. Divi'nin sürükle ve bırak özelliğini kullanarak, logolarınızı bir ızgarada görüntülemek için anında oluşturmak ve resim galerisi oluşturmak 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'ı dağıtın. “Sıfırdan Oluştur” seçeneğini seçin. Divi oluşturucu çalışmaya başladığında, tüm resimlerinizi içeren klasörü açın ve seçin. Ardından bunları Divi Builder ile tarayıcı penceresine sürükleyin.

Divi, bu görüntüleri otomatik olarak yeni bir Galeri Modülüne ekleyecek ve sizin için özelleştirme sürecini hızlı bir şekilde başlatmak için Galeri Ayarları'nı açacaktır.

8 logo resmi eklediğimden ve herhangi bir başlık, resim yazısı veya sayfa numarası göstermek istemediğimden aşağıdakileri güncelleyebilirim:

Görüntü Sayısı: 8
Başlığı ve Altyazıyı Göster: HAYIR
Sayfalandırmayı Göster: HAYIR

Varsayılan olarak, galeri modülü, her görüntü için bir simge içeren bir vurgulu yer paylaşımı ekler. Yakınlaştırma simgesi rengi, vurgulu kaplama rengi veya vurgulu simgesi için kaplama ayarlarını yapabilirsiniz.

İşleri temiz ve basit tutmak için Yakınlaştırma Simgesi Rengi ve Vurgulu Yerleşim Rengi'ni saydam olarak ayarlayarak vurgulu kaplamadan kurtulabilirsiniz.

Bundan sonra, resim galeriniz için benzersiz tasarımlar oluşturmak için tüm tasarım seçeneklerini keşfedebilirsiniz. Örneğin, ince bir kutu gölgesine sahip bir kenarlık ekleyebilirsiniz.

Resim Kenarlık Genişliği: 1px
Görüntü Kenarlığı Rengi: #dddddd
Görüntü Kutusu Gölgesi: ekran görüntüsüne bakın

Son tasarımın farklı tarayıcı boyutlarında nasıl görüneceği aşağıda açıklanmıştır.

Ve bu galeri herhangi bir sütun yapısına eklenebildiğinden, şirket logolarınız için kolayca benzersiz düzenler oluşturabilirsiniz. Solda bir metin modülü ve sağda resim galerisi modülü (logolarla birlikte) bulunan iki sütunlu bir yerleşim örneği. Size farklı bir görünüm göstermek için bir arka plan gradyanı ekledim.

#2 Şirket Logolarını Görüntülemek için WordPress Galerisi Yerleştirmesini Kullanma (herhangi bir Divi Modülü ile)

WordPress Resim Galerisi kısa kodunu kullanarak web sitenize şirket logoları da ekleyebilirsiniz. Bunu yapmak şaşırtıcı derecede kolaydır ve logolar için mükemmeldir çünkü çoğu durumda resimlere özel stiller eklemeniz gerekmez. Bu yöntemin harika yanı, tarayıcı pencerenizle ölçeklenen logolarınız için 9 adede kadar sütun dağıtabilmeniz, sütun yapınızı mobilde de korumanıza olanak tanır.

İşte nasıl yapılacağı.

Divi Builder'da, dörtte biri dörtte üç sütun yapısına sahip yeni bir bölüm oluşturun.

Diyelim ki altı sütunlu bir galeride şirket logolarınızın solunda bir metin olsun istiyorsunuz. Önce sol sütuna bir metin modülü ekleyin ve aşağıdakileri güncelleyin:

İçerik: “Öne Çıktığı Gibi”
Metin Yazı Tipi: Montserrat
Metin Yazı Tipi Ağırlığı: Kalın
Metin Metin Boyutu: 26px
Metin Yönü: orta

Şimdi sağ sütuna başka bir metin modülü ekleyin. İçerik sekmesi altında, o anda orada bulunan sahte içeriği silin ve içerik düzenleyici kutusunun üst kısmındaki "Medya Ekle" düğmesini tıklayın.

Bu, Medya Galerisi açılır penceresini getirecektir. Ardından, açılır pencerenin solundaki Galeri Oluştur bağlantısını tıklayın. Ardından galeriye eklemek istediğiniz logo resimlerini seçin (bu örnek için sekiz resim kullanıyorum). Galeri Oluştur düğmesini tıklayın.

Bu, açılır pencerede Galeriyi Düzenle sayfasını getirecektir. Sağ kenar çubuğundaki Galeri ayarlarını aşağıdaki gibi güncelleyin:

Bağlantı: Yok
Sütunlar: 8 (tek satırda kalmaları için galerideki resim sayısına eşit olmalıdır)
Boyut: Tam Boy

Ardından Yeni Galeri Oluştur düğmesini tıklayın.

Bu, WordPress'te yerleşik olarak bulunan gerekli galeri kısa kodunu gömecek ve galeriyi metin modülünün içinde görüntüleyecektir.

Şimdi satır ayarlarını açın ve aşağıdakileri güncelleyin:

Bu Satırı Tam Genişlikte Yapın: EVET
Özel Oluk Genişliğini Kullan: EVET
Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: EVET

Bu kurulumla, logolarınızın nefes alması için daha fazla alana sahip olursunuz. Şimdi tek yapılması gereken soldaki metni sağdaki logolarla dikey olarak hizalanacak şekilde ayarlamak. Bunu başarmak için sol sütuna gerekli özel dolguyu ekleyebilirsiniz, ancak her iki modülün de dikey olarak merkezde kalmasını garanti etmek için, Satır Ayarları Gelişmiş sekmenizin altındaki Ana Öğeye aşağıdaki özel CSS'yi ekleyebilirsiniz.

align-items: center;

Bu CSS, Equalize Column Heights'ı EVET olarak ayarladığımız ve böylece satır için "display:flex" özelliğini etkinleştirdiğimiz için çalışır. Bununla ilgili daha fazla bilgi için Divi'de içeriği dikey olarak nasıl hizalayacağınıza bakın.

Ve resimlerimizin etrafındaki gri kenarlığı çıkarmak için sayfa ayarlarımıza aşağıdaki CSS snippet'ini eklememiz gerekiyor:

.gallery img {
border: none !important;
}

İşte son tasarım.

İşte satıra eklenen siyah bir arka plan ile.

Mobilde, sütunlar herhangi bir ekran boyutunda kırılmaz. Görüntüler basitçe daha küçük bir boyuta ölçeklenir. İtiraf ederim. Görüntüler çok küçük olduğundan, akıllı telefonda sekiz sütun muhtemelen çok fazladır.

Logo Galerilerini Herhangi Bir Divi Modülüne Göm

Bu bir kısa kod yerleştirme olduğundan, bu galeriyi birçok farklı olasılık sunan hemen hemen her Divi Modülüne ekleyebilirsiniz.

Örneğin, bir geçiş, akordeon ve hatta bir sekme modülünün içine logo görüntüleri ekleyebilirsiniz.

Logolarınızın wordpress galeri kısa kodunu iki farklı sekmeye eklediğinizde nasıl görüneceğine dair bir örnek.
Bu örnek için her galeri için 3 sütunlu 6 logo seçtim.

Bu, çok sayıda logo gerektiren siteler için kullanışlı olabilir.

#3 Şirket Logoları için Özel Düzen Oluşturmak İçin Divi Builder'ı Kullanma

Şirket logo düzenlerinizle biraz daha yaratıcı olmak istiyorsanız, hayal edebileceğiniz her şeyi tasarlamak için Divi Builder'ı kullanabilirsiniz. Divi'nin satır öğesi, çoğu şirket logosu düzeni için fazlasıyla yeterli olan 6 sütuna kadar sütun düzenlerini destekler. Logolar için en çok 6 sütun ve 4 sütun düzenini, büyük ölçüde mobilde nasıl tepki verdikleri konusunda seviyorum.

Aşağıdaki tasarımda, şirket logo düzeninizi nasıl bir sonraki seviyeye taşıyacağınız konusunda size bazı ipuçları göstereceğim.

İlk olarak, altı sütunlu bir satırla yeni bir bölüm oluşturarak başlayalım.

Sütunlarımıza herhangi bir şey eklemeye başlamadan önce, satır ayarlarına gidin ve aşağıdakileri güncelleyin:

Özel Genişlik: %90
Oluk Genişliği: 1
Sütun Yüksekliklerini Eşitle: EVET

Özel Dolgu: 4vw Üst, 4vw Alt

Ayarları kaydet.

Ardından ilk sütununuza bir resim modülü ekleyin ve ardından logo resimlerinizden birini seçin.

Ardından, her sütuna aşağıdaki gibi bir logo resmi eklemeye devam edin:

Sütun 1: 1 logosu
Sütun 2: 2 logo
Sütun 3: 3 logo
Sütun 4: 3 logo
Sütun 5: 2 logo
Sütun 6: 1 logo

Şimdi bu kurulumla, bir özel CSS pasajı kullanarak dikey hizalamayı ayarlayabilirsiniz. İçeriği dikey olarak ortalamak istiyorsanız, yukarıdaki #2'deki logo galerisinin yanına metnimizi dikey olarak ortalamak için eklediğimiz CSS snippet'inin aynısını ekleyebilirsiniz. Satır ayarlarını açın ve aşağıdaki CSS'yi Ana Öğeye ekleyin.

align-items: center;

Gördüğünüz gibi, bu logolar için yuvarlak bir düzen oluşturur.

Ancak bu düzen için modülleri satırın altına hizalayacağım. Bu nedenle, "align-items: center" snippet'ini aşağıdakiyle değiştirin:

align-items: flex-end;

Bu, tüm modülleri, ekleyeceğimiz Bölücüler bölümüyle iyi çalışacak olan satırın altına hizalar.

Artık bölümümüzü özelleştirmeye hazırız. Bölüm ayarlarını açın ve aşağıdakileri güncelleyin:

Arka plan: #2a3443

Üst Bölücü Stili: ekran görüntüsüne bakın
Üst Bölücü Rengi: rgba(255,255,255,0.03)
Üst Bölücü Yüksekliği: 13vw
Üst Bölücü Çevirme: dikey

Özel dolgu: 0 piksel üst, 0 piksel alt

Başlığımız için yeni bir bölüm oluşturacağız ve yeni oluşturduğumuz bölümün üstüne yerleştireceğiz. Tek sütunlu satır yapısına sahip yeni bir normal bölüm oluşturun.

Bölüm ayarlarını aşağıdaki gibi güncelleyin:

Arka Plan Rengi: #2a3443

Alt Bölücü Stili: ekran görüntüsüne bakın
Alt Bölücü Rengi: rgba(238,238,238,0,09)
Alt Bölücü Yüksekliği: 13vw

Özel Dolgu: 0px alt

Şimdi ayarlarınızı kaydedin ve satıra bir Metin Modülü ekleyin ve aşağıdakileri güncelleyin:

İçerik için şunları ekleyin:

<h2>As Featured In</h2>

Başlık 2 Yazı Tipi: Montserrat
Başlık 2 Yazı Tipi Ağırlığı: Kalın
Başlık 2 Metin Hizalama: orta
Başlık 2 Metin Rengi: #ffffff
Başlık 2 Metin Boyutu: 32px

Özel kenar boşluğu: 0 piksel alt

Son olarak, metin modülünün altına, diğerlerinden öne çıkmasını istediğiniz şirket logolu bir resim modülü ekleyin. Ardından aşağıdakileri güncelleyin:

Görüntü Hizalama: merkez
Özel Kenar Boşluğu: -75px

Nihai sonucu kontrol edin.

Son düşünceler

Web sitenizde şirket logoları için bir bölüm oluşturmak aslında oldukça basittir. Bir fotoğraf düzenleyici kullanarak logo resimlerini uygun şekilde boyutlandırdıktan sonra Divi gerisini halledebilir. Bu eğitimde ele alınan yöntemler, minimum çabayla elde etmek istediğiniz düzeni oluşturmak için ihtiyacınız olan her şeyi sağlamalıdır. Ve köşenizde Divi'nin gücü varken, kendinize ait bazı benzersiz düzenleri yaratırken biraz eğlenmelisiniz.

Yorumlarda sizden haber bekliyorum.

Şerefe!