Altbilgi çubuğu divi’ye yaratıcı bir arka plan tasarımı nasıl eklenir
Divi’nin alt altbilgisi çubuğu web sitenizin küçük ama önemli bir parçasıdır. Ve belirli bir sayfa düzeni ile, alt bıçağa yaratıcı bir son dokunuş eklemeye ihtiyaç olabilir. Bu öğreticide, altbilgi çubuğunun altındaki divi için nasıl özel bir arka plan tasarımı ekleyeceğinizi göstereceğim. Alt altbilgi bıçaklarından varsayılan arka plan rengini kaldırarak ve bölüme bazı özel marjlar ekleyerek, serin bir arka plan tasarımı oluşturmak için bölümün tasarım ayarlarını kullanabilirsiniz. Başlayalım. Buradaki bir göz atma, bu öğretici ile yapabileceğiniz bazı tasarım örneklerinin bir görüntüsü.
Alt altbilgi bıçaklarını tema ayarındaki ayarlayarak, alt altbilgi çubuğumuzun arkasına özel bir arka plan eklemeden önce, kullanılan varsayılan arka plan renginden kurtulmamız gerekir. Tema ayarını açın ve alt bıçağa alt bıçağa gidin. Ardından arka plan rengini tamamen şeffaf olacak şekilde değiştirin. Önizlemede pek çok değişiklik göremeyebilirsiniz, çünkü aşağıdaki bıçakların arkasında altbilginin arka plan rengi vardır. Altbilginin arka plan rengi altbilgi> düzeni altında değiştirilebilir, ancak arka plan renginin bir geri dönüş olarak aktif olmasına izin vermelisiniz. Sayfa sayfasına göre bölüm kullanılarak alt bıçaklara özel arka plan eklenecektir. Yani bu arka plana sahip olmak, alt bıçaklarınızın özel bir arka planı olmayan bir sayfada bir arka planı olmasını sağlayacaktır.Daha koyu bir arka plan tasarımına sahip olmayı planlıyorsanız, alt çizim metninin rengini ve sosyal simgenin rengini Beyaz olarak da değiştirebilirsiniz. Bu, içeriğin okunması daha kolay olmasını sağlayacaktır. Alt bıçakların alt bıçağının alt bıçağının şeffaf bir arka plana sahip olduktan sonra alt bıçakların arka plan tasarımını yapmak, parçamızın arka planını tasarlamaya ve çubuğun arkasına konumlandırmaya hazırız . Yapmadıysanız, yeni bir sayfa oluşturun ve “Başından Uyan” ı seçin. Ardından, parçanın satırı için bir sütunun düzenini girin. Satırlara modül eklemeye gerek yok çünkü arka plan tasarımı için yalnızca parçalara ve satırlara ihtiyacımız var. Ardından, satır ayarlarını açın ve bazı boşluklar aşağıdaki gibi ekleyin: Özel kenar boşluğu: 0px üst, 0px alt özel dolgu (masaüstü): 80px üst, 80px alt özel dolgu (tablet): 100px üst, 100 piksel aşağıda 100px
Arka plan tasarımımıza ekleyeceğimiz parçayı bölmek için gereken alanı korurken, bu mesafe bizim tarafımıza bir yükseklik sağlamak için gereklidir. Şimdi, bölüm ayarlarını açın ve boşluğu aşağıdaki gibi güncelleyin: Özel kenar boşluğu (masaüstü): -55px daha düşük özel marj (tablet): -94px daha düşük özel dolgu: 0px üst, 0px aşağıda Alt marj -55px, alt çubuğu alana çeker, böylece parçaya ne tasarladığımız kısım alt bıçaklarımızın arkasında olacağız. Varsayılan alt bıçaklar masaüstünde 54 piksel yüksekliğindedir ve tablette yaklaşık 94px yüksekliğindedir, böylece tabletler için daha büyük bir negatif kenar boşluğuna ihtiyacınız vardır. Üst ve alt dolgudan kurtulmak, daha sonra ekleyeceğimiz parçaları bölmek için gereken alanı en üst düzeye çıkarır. Bir sonraki alt bölücüyü ekleyin, alt bölüme alt bölücüyü aşağıdaki gibi çerçevelemek için bölüme ekleyin: alt bölücü kuvvet: bkz. Ekran yakalama renk taraması: #121212 uygarlık: 120 piksel (masaüstü), 150 piksel (tablet), 150 piksel (150 piksel (150 piksel (tablet) Akıllı Telefonlar) Yatay Bölü Tekrar: 0.9x (masaüstü), 0.5x (tablet), 0.5x (akıllı telefon) Geriye doğru bölücü: Bu olduğunda dikey, alt bıçak içeriği (metin ve sosyal simge) bölücünün arkasına gizlenir. alt içeriğe ayarlanmıştır. Bunun nedeni, alt altbilginin teknik olarak içerik bölümünün bir parçası olmamasıdır. Bunu düzeltmek için, alt altbilginin arkasında olacak şekilde kendi parçamıza özel bir dizin eklememiz gerekir.
Devam sekmesinin altına, ana öğeye aşağıdaki özel CSS görüntüsünü ekleyin: z-index: 0; Şimdi altbilgi bıçaklarınız sizin tarafınızın üstünde olacak ve altbilgi bıçaklarınızı çerçeveleyen iyi bir arka plan tasarımınız var.
Ve cep telefonunda da iyi ayarlanacak. Bu temel yapı ile inşa etmek için iyi bir tasarım tasarımına sahipsiniz. Bunu hatırlayarak, bu yapıyı şu anda keşfetmek için bir başlangıç noktası olarak kullanabilmeniz için bu bölümü kütüphanenize devam edin ve kaydedin. Şimdi yeni bir tasarımı keşfetmeye hazırsınız. Sayısız arka plan çerçevesi tasarımları yapmak için alt bölücüyü farklı stiller ve renklerle değiştirebilirsiniz. Bölücünün yüksekliğine bir ayar eklemeniz gerekebilir ve yatay tekrarlama değeri, seçtiğiniz bölme kuvvetine bağlıdır. İşte bazı örnekler. Üst bölücüyü, alt altbilginiz için arka plan çerçevesi tasarımınız olarak tek bir alt bölücüyü kullanarak özel bir arka plan gradyanı ile kullanmak biraz sınırlayıcıdır. Ancak üst bölücüyü çerçeve tasarımınız olarak kullanıyorsanız, kendi parçanız için özel bir arka plan gradyanı kullanabilirsiniz. Bu keşfetmek için yeni bir kapı açacaktır. Bölüm ayarlarınızı açın ve düşük bölücü stilinizi yok olacak şekilde ayarlayın. Ardından arka plan gradyanını arka planınız olarak ekleyin. Artık yeni bir görünüm oluşturmak için üst tarafı stilini kendi tarafınıza ekleyebilirsiniz.
İşte sadece gradyan ve bölücü stilinin arka planını değiştirerek olabilecek bazı tasarım örnekleri. Divisors’ı renkli sınır çerçevesinin tasarımı için bir arka plan gradyanıyla birleştirmek, onu artırma zamanıdır. Unutmayın, parçalarda ve sıralarda benzersiz arka plan tasarımları oluşturmak için birçok olasılık var. Bu son örnek için, gerçekten benzersiz bir tasarım oluşturmak için bu özellikleri nasıl birleştireceğinizi göstereceğim. Bu tasarımı başlatmak için, görsel yapımcıya yeni bir parça eklemek için tıklayarak kütüphanenize kaydettiğiniz kısmı kullanın ve Kütüphane sekmesinden eklemeyi seçin ve bölümün düzenini seçin. Bölüm sayfaya eklendikten sonra ayarlamaya hazırız. Yeni başlayanlar için, aşağıdaki bölüm ayarlarını açın ve aşağıdakileri güncelleyin: Arka plan gradyanının sol rengi: #29C4A9 Sol renk gradyan arka plan: #2B87DA gradyan yönü: 90 derece Başlangıç Pozisyonu:% 50 Nihai Konum:% 0% 0 Şimdi üst bölücüyü aşağıdaki gibi ekleyin: üst bölücü kuvvet: ekran ekran renk yakalama: #fffffff Yüksek bölücü: 120 piksel (masaüstü), 150 piksel (tablet), 150 piksel (akıllı telefonlar) yatay bölücüler tekrar: 0.9x (masaüstü) , 0.5x (tablet), 0.5x (akıllı telefon) Geri bölücü: Dikey Bu bölücü ayarları, alt bölücüyü çevreleyen sınırı oluşturmak için alt bölücüyü tamamen yansıtır. Bölücünün kendisi beyaz olduğu için, bu, arka plan gradyanının alt bölücünün bir uzantısı olduğu izlenimini bırakır. Şimdi satır ayarlarını açın ve arka plan gradyanını aşağıdaki gibi ekleyin: gradyan arka planın sol rengi: #df52ff sol renk gradyan arka plan: #2B87DA Yön Yasası: 90 derece Başlangıç Konumu:% 50 Son Pozisyon:% 0 Arka planınız için her renk segmentinin genişliğini eşitlemek için, satırda% 50 özel genişlik verin.
İşte son tasarım! Son zihin, divi altbilgisi için özel bir arka plan tasarımına sahiptir Bilah, sayfanız için ferahlatıcı bir ek olabilir. İhtiyaç duyulan tek şey sayfanın alt kısmında birkaç ayardır. Ne yazık ki, tasarım bir sayfa ile sınırlıdır ve site boyunca uygulanamaz. Bu yüzden arka plan altbilgisi rengi bir geri dönüş olarak kullanılır. Ancak bölümü kütüphanenize sakladıktan sonra, istediğiniz herhangi bir sayfaya kolayca koyabilirsiniz. Bir sonraki projenizde kullanmak için hazır düzenlerimizden birine bile ekleyebilirsiniz. Tek yapmanız gereken, bölümü sayfanızın altına eklediğinizden emin olmaktır. Faydalı olabilir!
