Divi Sitenizin Logo Görüntüsünü Global Önayarlarla Optimize Etme

Divi'de sitenizin logosunu optimize etmek, web sitenizin tasarımının önemli bir parçasıdır. Ancak, gizemli veya göz korkutucu bir çaba olmak zorunda değildir. Aslında Divi, Divi Tema Oluşturucu ve mevcut tüm yerleşik tasarım seçenekleriyle bunu oldukça basitleştirir.

Bu eğitimde, logolarınızı Divi'de doğru boyut, konum ve stille nasıl optimize edeceğinizi göstereceğiz. Ardından, bu tasarımları gelecekteki geliştirmeler için kullanabileceğiniz genel ön ayarlar olarak nasıl kaydedeceğinizi göstereceğiz.

Hadi atlayalım!

ÜCRETSİZ Logo Resmi Ön Ayar Düzenini İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Bu logo görüntüsü düzenini genel başlığınızda kullanmak için, önce aşağıdaki şekilde Divi Kitaplığına aktarmalısınız:

1. Divi > Divi Kitaplığı'na gidin.
2. Sayfanın üst kısmındaki içe/dışa aktar düğmesini tıklayın.
3. Taşınabilirlik açılır penceresinde İçe Aktar sekmesini seçin
4. Ön Ayarları İçe Aktar'ı seçin
5. İçe Aktar Düğmesine tıklayın

Ardından tema oluşturucuya gidin ve genel başlığı düzenleyin. Logonun olmasını istediğiniz yere bir görüntü modülü ekleyin ve logoyu uygun şekilde biçimlendirmek ve yerleştirmek için ön ayarları kullanın.

Logo Boyutları

Logo görüntüsünü Divi ile optimize etmeye başlamadan önce, bir görüntü modülüne yüklemeden önce logo görüntüsünün boyutunu optimize etmeyi düşünmek önemlidir. Bu logoyu 100 piksele 50 piksel olarak göstermeyi planlarken sitenize 1920 piksele 1080 piksellik bir logo resmi yüklemek istemezsiniz. Elbette, olaydan sonra logo görüntüsünü yeniden boyutlandırmanın yolları vardır (yani srcset ve görüntü optimizasyon eklentileri). Ancak bu, daha yavaş sayfa yükleme sürelerine yol açabileceğinden en iyi uygulama değildir. Ve kabul edelim, logonuz dağınık kısayollarla yetinemeyecek kadar önemli.

Göz önünde bulundurulması gereken yaygın logo görsel boyutlarının bir listesi:

Yatay düzen için:

• 250 piksel x 150 piksel
• 350 piksel x 75 piksel
• 400 piksel x 100 piksel

Dikey (kare) düzen için:

• 160 piksel x 160 piksel (büyük)
• 60 piksel x 60 piksel (küçük)

Düşündüğünüzden daha büyük bir logo boyutuna ihtiyacınız olabilir.

Masaüstünde daha küçük bir logoya ve tablette (hatta telefonda) daha büyük bir logoya ihtiyaç duyulur. Divi'de, sütun düzenlerinizin tablet ve telefon ekranlarında tek sütunlu bir düzende yığılması yaygındır. Ve tablet tarayıcı genişlikleri normalde maksimum 980 piksel genişliğe sahip olduğundan, logonuz için masaüstünden çok daha büyük bir kapsayıcıdır. Bu nedenle, daha büyük bir logo boyutu seçmeniz ve cihaza göre maksimum yükseklik veya genişliği ayarlamanız gerekebilir. Tablete ihtiyacınız olandan daha küçük bir logo yüklerseniz, görüntünün netliğinden ödün vermeden boyutu büyütemezsiniz. Kısacası, logonun tüm tarayıcı genişliklerinde en büyük görüntü boyutu kadar büyük olduğundan emin olun.

Global Önayarlarla Divi Sitenizin Logo Boyutunu ve Konumunu Optimize Etme

Global Başlık Logonuzu Düzenleme

Başlamak için Divi > Tema Oluşturucu'ya giderek Divi Tema Oluşturucu'ya gidin. Ardından, varsayılan web sitesi şablonunda yeni bir genel başlık oluşturmak için tıklayın.

Ardından, “Sıfırdan Oluştur” seçeneğini seçin.

Bu eğitim için Divi Theme Builder'ı kullanarak özel bir genel başlıkla birlikte verilen logoyu optimize edeceğiz. Mevcut bir üstbilgi tasarımına hoş geldiniz veya blogumuzdan önceden hazırlanmış genel üstbilgi (ve altbilgi) şablonlarımızdan birini içe aktarabilirsiniz. İşleri basit tutmak için, bir logo ve bir menü ile gerçekten basit bir başlık düzeni oluşturacağız.

Satır ve Sütun Düzeni Ekle

Genel Başlık Düzeni Düzenleyicisi'nde, dörtte biri dörtte üç sütun satırı ekleyin.

Sağdaki sütuna, başlıktaki logo yerleşimini görselleştirmemize yardımcı olacak bir yer tutucu olarak bir resim modülü ekleyin.

Logo Görüntüsünü Görüntülemek için Görüntü Modülünü Ekleyin

Sol sütuna bir görüntü modülü ekleyin.

Logolar için Görüntü Modülünü Kullanma

Daha geleneksel başlık tasarımları için logonuzu görüntülemek için Divi'nin menü modülünden yararlanabilirsiniz. Ancak Divi'nin dinamik içerik yetenekleriyle, istediğiniz sayıda Divi modülünü kullanarak sitenizin logosunu görüntüleyebilirsiniz. Temel olarak, Divi'de bir görüntüyü görüntüleyebileceğiniz her yerde logonuzu görüntüleyebilirsiniz. Örneğin, site logosunu bir tanıtıcı modül resminde veya isterseniz arka plan resmi olarak görüntülemeyi seçebilirsiniz. Bu eğitimde, site logosunu görüntülemek için resim modülünü kullanmaya odaklanacağız. Bu, logonun tamamen ayrı bir öğe olmasına izin verir (menü modülü veya tanıtım modülü gibi bir modüldeki diğer öğelerle bağlantılı değildir). Ayrıca, görsel modülü görsellere stil kazandırmak için oluşturulmuştur ve bu da bize logo görselimizi biçimlendirmek için birçok ek tasarım seçeneği sunar. Dinamik resim olarak site logosunun nasıl ekleneceği hakkında daha fazla bilgi için makalenin sonuna atlayın.

Birkaç farklı logo görsel boyutunu test edeceğimiz için, örneklerimiz için dinamik site logosu yerine normal görseller yapıştıracağız.

Örnek 1: Sola Hizalanmış Logo Global Ön Ayarı Oluşturma

Bu ilk örnek için, 60 piksele 60 piksel olan sola hizalı bir logo için basit bir ön ayar oluşturacağız.

Görüntü modülü ayarlarını açın ve görüntü modülüne 60 piksele 60 piksel logo görüntüsü yükleyin.

Görüntü tasarımı ayarlarını aşağıdaki gibi güncelleyin:

• Görüntü Hizalama: Merkez
• Maksimum Genişlik: 60 piksel
• Modül Hizalama (masaüstü): Sol
• Modül Hizalama (tablet ve telefon): Merkez

Bu, sola hizalanmış bir logo tasarımı olsa da, görüntü hizalaması modül hizalamasından farklı olduğu için görüntü hizalaması ortaya ayarlanır. Görüntü hizalaması modül içinde ortalanır. Modülün maksimum genişliği 60 piksel olduğundan, görüntü hizalaması gerçekten önemli değil çünkü modül hizalaması artık logo görüntüsünün hizalamasını belirleyecektir.

Bu, logoya bir arka plan resmi eklemek veya kabı yuvarlak hale getirmek istediğinizde yararlıdır. Esasen bu, logo görüntüsü kapsayıcısını logo görüntüsünün kendisiyle aynı boyutta yapar.

Sütunlar mobilde yığılacağından modül hizalamasının tablette ortalanacak şekilde değiştirildiğine dikkat edin.

Mevcut Stillerden Yeni Hazır Ayar Oluştur

Artık logo tasarımı bittiğinde, hazır ayar açılır menüsünü tıklayıp “Geçerli Stillerden Yeni Hazır Ayar Oluştur” öğesini seçerek görüntü modülü için genel bir ön ayar oluşturabilirsiniz.

Logo görüntüsü ön ayarına benzersiz bir ad verin. Bu durumda, ön ayarı kullanmayı seçerken tam olarak hangi boyutta görüntünün kullanılacağını ve logonun nasıl hizalanacağını bize bildirmek için “Logo Left (60px x 60px)” adını verebiliriz.

Örnek 2: Sağa Hizalanmış Logo Global Ön Ayarı Oluşturma

Bu sonraki örnek için, sağa hizalanmış bir logo global ön ayarı oluşturacağız. Mevcut tasarımımız ve hazır ön ayarımızla bunu yapmak kolay olacaktır. Sütun düzenini dörtte üçü dörtte bir olarak değiştirin, menüyü sol sütuna taşıyın ve logoyu sağ sütuna taşıyın.

Yeni oluşturduğumuz logo görüntüsü ön ayarını içeren görüntü modülünün ayarlarını açın.

Ardından, modül hizalamasını sağa değiştirmek için tasarım ayarlarını güncelleyin.

Yeterince basit. N0w ön ayar açılır menüsünü tıklayın ve mevcut stillerden yeni bir ön ayar oluşturun.

Ön ayara "Logo Right (60px x 60px)" adını verin.

Örnek 3: Ortalanmış Logo Global Ön Ayarı Oluşturma

Bu sonraki örnek için, ortalanmış bir logo global ön ayarı oluşturacağız. Bu ortalanmış bir logo olduğu için örneğimiz için daha büyük bir logo kullanabiliriz.

İlk olarak, logo için ortada daha büyük bir sütununuz olması için sütun düzenini 0 dörtte bir buçuk dörtte bir yapıyla değiştirin. Ardından logoyu orta sütuna taşıyın

250 piksele 150 piksel boyutunda yeni bir logo resmi yükleyin.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Maksimum Genişlik: 250 piksel
• Modül Hizalaması: Merkez

Ardından mevcut stillerden yeni bir genel hazır ayar ekleyin.

Ve buna “Logo Merkezi (250 piksele 150 piksel)” adını verin.

Örnek 4: Sola Hizalanmış Büyük Logo Global Ön Ayarı Oluşturma

Bu sonraki örnek için, daha büyük sola hizalanmış logo (400 piksele 100 piksel) için bir ön ayar oluşturacağız.

Logo 400 piksel genişliğinde olacağından, logoya ihtiyaç duyduğu alanı verecek bir sütun yapısı istiyoruz.

Soldaki logo ve sağdaki menü ile iki sütunlu bir yapıya geri dönelim. Ancak, yapıyı üçte bir üçte iki olarak değiştirelim.

Varsayılan satır maksimum genişliğini 1080 piksel olarak korursak, bu bize kabaca 320 piksel genişliğinde bir sütun verecektir.

Görüntü modülü ayarlarını açın ve 400 piksele 100 piksel boyutunda bir logo görüntüsü ekleyin.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Maksimum Genişlik: 400 piksel
• Modül Hizalama (masaüstü): sol
• Modül Hizalama (tablet): merkez

Bahsettiğim gibi, sütun maksimum 320 piksel genişliğe sahiptir, bu da logo görüntüsünün masaüstünde tam genişliğine yayılamayacağı anlamına gelir. Ancak, sütunlar yığıldığında tablet üzerinde mümkün olacaktır. Bu nedenle görüntünün maksimum genişliğini 400 piksel olarak ayarlamak istiyoruz.

Artık logo tablette biraz daha büyük ve ortalanmış.

Ardından mevcut stillerden yeni bir genel hazır ayar ekleyin.

“Logo Left (400px x 100px)” adını verin ve ön ayarı kaydedin.

Örnek 5: Hover Effects Global Preset ile Sola Hizalanmış Logo Oluşturma

Bu son örnek için, sola hizalanmış bir logoya bazı vurgulu efektleri ekleyeceğiz ve onu yeni bir genel ön ayar olarak kaydedeceğiz.

Normalde insanlar logolarını ana sayfaya bağlarlar. Fareyle üzerine gelme efekti eklemek, tıklanabilirliğini daha belirgin hale getirerek UX'i iyileştirebilir.

Bu örnek için, “Logo Left (60px x 60px)” ön ayarıyla 60px x 60px logo görüntüsünü kullanacağız. Görüntü ayarlarını açın ve listeden ön ayarı seçin.

Şimdi, yeni bir hazır ayar olarak kaydetmeden önce bazı vurgulu efekt stilleriyle ön ayarı değiştirebiliriz.

Aşağıdakileri güncelleyin:

• Yuvarlatılmış Köşeler: %50

• Kutu Gölgesi: ekran görüntüsüne bakın
• Kutu Gölgesi Yatay Konumu: 0px
• Kutu Gölge Dikey Konumu: 0px (masaüstü) 5px (fareyle üzerine gelin)
• Gölge Rengi: #ac3cf7

Ardından, fareyle üzerine gelindiğinde aşağıdaki dönüşüm dönüşünü ekleyin:

• Dönüştür Döndür Z Ekseni (vurgulu): 90deg

Ardından, mevcut stillerden yeni bir hazır ayar oluşturun ve buna “Hover ile Sol Logo (60px x 60px)” adını verin.

İşte sonuç.

Resim Modülüne Dinamik Site Logosu Ekleme

Site logonuzu görüntü modülüne dinamik olarak eklemek için öncelikle Divi Tema Seçenekleri altında site logosunu emin olmanız ve yüklemeniz gerekir.

Seçtiğiniz logonun boyutunu unutmayın.

Ardından global ön ayarınızın bulunduğu görüntü modülüne gidin ve ayarları açın. Geçerli görüntüyü silin ve ardından dinamik içerik simgesini tıklayın. Açılır menüden Site Logosu'nu seçin.

Artık resim modülünüz sitenizin logosunu dinamik olarak çekecektir.

Logoya dinamik bir ana sayfa bağlantısı da eklemeyi unutmayın.

Son düşünceler

Umarım bu eğitim, Divi başlıklarınıza logo ekleme sürecini kolaylaştırmaya yardımcı olur. Divi temasına bile yüklemeden önce logo resminizin boyutunu optimize etmekle başlar. Ardından, farklı sütun düzenleri ve farklı cihazlar için görüntünün boyutunu ve konumunu ayarlamak için Divi'nin yerleşik tasarım ayarlarını kullanabilirsiniz.

Tabii ki, her web sitesi kendi benzersiz stiline ihtiyaç duyacaktır ve bunlardan bazıları bu örneklerde belirtilen yönergelerin dışına çıkacaktır. Ancak birkaç ince ayar ile herhangi bir benzersiz düzen için kolaylıkla yeni ön ayarlar oluşturabileceğinizden eminim!

Yorumlarda sizden haber bekliyorum.

Şerefe!