Fullwidth Menu modülünüze duyarlı bir logo eklemek ister misiniz? Divi böylece mobildeki görünüme uyum sağlar mı?
%50'den fazlasının olduğunu biliyor muydunuz? trafik İnternet mobil cihazlardan mı geliyor? Bu, cihazınızın mobil sürümünün Site Web son derece önemlidir ve birisinin sayfanızı ziyaret etmesinin ana yolu bile olabilir.
Emin ol Site Web duyarlı ve mobil uyumlu olması, bir web sitesi tasarlamanın önemli bir adımıdır. Site Web.
Bu öğreticide, yerleşik yanıt seçeneklerini kullanarak Tam Genişlik Menü modülünüze nasıl duyarlı bir logo ekleyeceğinizi göstereceğiz. Divi.
Bu, daha büyük ekranlarda görünecek daha büyük veya daha karmaşık bir logo ve daha küçük ekranlarda görünecek daha küçük veya daha basit bir logo eklemenize olanak tanır.
Hadi başlayalım!
anket
İşte tasarlayacağımız şeyin bir önizlemesi. Web sitesinin masaüstü versiyonu ek metin içeren genişletilmiş bir logoya sahip olacak ve logonun mobil versiyonu sadece temel logo markasına sahip olacak.
Başlamak için neye ihtiyacınız var?
Tüm önce Divi temasını kurun ve etkinleştirin ve en son sürüme sahip olduğunuzdan emin olun. Divi Web sitenizde. Daha sonra, logonuzun en az iki versiyonuna sahip olduğunuzdan emin olun: biri sitenizin masaüstü görünümü için, diğeri mobil görünüm için. Son olarak şablonu indirin Divi's High School Layout Pack için Üstbilgi ve Altbilgi Şablonları.
Artık başlamaya hazırsınız!
Divi'deki Tam Genişlikli Başlık Modülünüze Duyarlı Bir Logo Nasıl Eklenir
Fullwidth Header modülünü oluşturun
Ayrıca Oku: Divi: Fullwidth Header modülü tam ekranda nasıl görüntülenir?
Tam genişlik bölümü ekle
Orijinal menü standart bir menü modülüyle oluşturulduğundan, bir Tam Genişlik Üstbilgi modülü eklemek için düzeni değiştirmemiz gerekecek.
İlk önce, tam genişlikte bir bölüm ekleyin (Tam genişlik) mevcut menünün altındaki genel başlığa.
Tam genişlik bölümü ayarlarında, şuraya gidin: gelişmişSonra Kaydırma Efektleri.
- Yapışkan Konum: En Üstte Yapış
Ardından, arka plan rengini ekleyin.
- Arka plan: #f5f0eb
Yapışkan durumda arka plan için farklı bir renk ekleyin.
- Arka Plan (Yapışkan): #ffffff
Tam Genişlikli Başlık modülü ekleyin
Şimdi Fullwidth Header modülünü ekleyelim.
Modül ayarlarını açın ve arka planı kaldırın.
Orijinal menünün görünümünü kolayca çoğaltmak için, bazı özel ayarları kopyalamak için Stilleri Kopyala özelliğini kullanabiliriz.
Ayrıca bakınız: Divi: Fareyle üzerine gelindiğinde arka planın gradyanı nasıl değiştirilir?
Ana menü ayarlarını açın, ardından sağ tıklayın Menü Metni ve seç Menü Metin Stillerini Kopyala.
Kopyalandıktan sonra, Fullwidth Header modülünün üç noktasına tıklayın, ardından Geçmiş Menü Metin Stilleri.
Şimdi aşağı açılır menü ayarları ile aynı adımları tekrarlayacağız.
Simgeler için bir kez daha tekrarlayın.
Metin hizalamasını sağa ayarlayın.
- Metin Hizalama: sağ
Altındaki logonun maksimum yüksekliğini ayarlayın DizaynO zaman Boyutlandırma.
- Logo Maksimum Yüksekliği: 50px
Bölüme aşağıdaki CSS'yi ekleyin Bağlantı menüsü Özel CSS altında.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
Son olarak, üst ve alt dolguyu ayarlayın.
- Dolgu-Üst: 10px
- Dolgu-Alt: 10px
Şimdi orijinal menü bölümünü silin.
Duyarlı logo ekle
Şimdi duyarlı logoyu ekleyeceğiz. Neyse ki Divi, yerleşik duyarlı seçeneklerle bunu kolaylaştırıyor.
Sous içerik, logo ayarlarını açın ve logonuzun masaüstü sürümünü yükleyin.
Duyarlı seçenekleri kullanmak için mobil mod simgesini seçin, ardından mobil logoyu duyarlı logonuzla değiştirin.
Önceden tanımlanmış bir düzen ile yeni bir sayfa oluşturun
Duyarlı logolu tam genişlikli menüyü çalışırken görmek için Divi kitaplığından önceden tanımlanmış bir düzen ile yeni bir sayfa oluşturalım.
Bu tasarım için lise ana sayfasını kullanacağız. Lise düzeni paketi üstbilgi ve altbilgiyi eşleştirmek için.
Web sitenize yeni bir sayfa ekleyin ve ona bir başlık verin, ardından seçeneği seçin Divi Builder'ı kullanın. Üstbilgi ve altbilgi düzenini genel üstbilgi ve altbilgi olarak içe aktardığımız için bu sayfa için varsayılan düzeni kullanın.
Bu örnek için Divi kitaplığından önceden hazırlanmış bir düzen kullanacağız, bu nedenle Düzenlere Göz Atın.
Düzeni bulun ve seçin Lise Ana Sayfası.
seçmek Bu Düzeni Kullan sayfanıza düzeni eklemek için.
Nihai sonuç
Şimdi son tasarımımıza bir göz atalım.
DIVI'yı şimdi indirin!!!
Sonuç
Mobil uyumlu ve duyarlı bir web sitesine sahip olmak her zamankinden daha önemli. Divi'nin yerleşik duyarlı seçenekleri sayesinde, bir tane oluşturmak her zamankinden daha kolay!
Duyarlı bir logo ile marka kimliğiniz, ekran boyutundan bağımsız olarak her zaman net olacaktır.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
