Divi'nin Alt Alt Bilgi Çubuğuna Yaratıcı Arka Plan Tasarımları Nasıl Eklenir

Divi'nin alt alt bilgi çubuğu, web sitenizin küçük ama önemli bir parçasıdır. Ve belirli sayfa düzenlerinde, o alt çubuğa yaratıcı bir son dokunuş eklemeniz gerekebilir.

Bu derste size Divi'nin alt alt bilgi çubuğu için özel arka plan tasarımlarının nasıl ekleneceğini göstereceğim. Alt alt bilgi çubuğunun varsayılan arka plan rengini kaldırarak ve bir bölüme bazı özel kenar boşlukları ekleyerek, harika arka plan tasarımları oluşturmak için bir bölümün tasarım ayarlarından yararlanabilirsiniz.

Başlayalım.

Gizlice Bir Bakış

İşte bu öğretici ile oluşturabileceğiniz birkaç örnek tasarıma bir göz atın.

Tema Özelleştiricide Alt Alt Bilgi Çubuğunu Özelleştirme

Alt alt bilgi çubuğumuzun arkasına özel arka planlar ekleyebilmemiz için, kullanılan varsayılan arka plan renginden kurtulmamız gerekiyor.

Tema özelleştiriciye gidin ve Alt Bilgi > Alt Çubuk'a gidin. Ardından arka plan rengini tamamen şeffaf olacak şekilde değiştirin.

Alt çubuğun arkasında hala bir altbilgi arka plan rengi bulunduğundan, önizlemede pek bir değişiklik fark etmeyebilirsiniz. Alt bilgi arka plan rengi Alt Bilgi > Düzen altında değiştirilebilir, ancak bu arka plan rengini yedek olarak etkin bırakmak iyi bir fikirdir. Özel arka plan, sayfa sayfa bir bölüm kullanılarak alt çubuğa eklenecektir. Bu nedenle, bu arka plana sahip olmak, alt çubuk içeriğinizin, özel arka plana sahip olmayan sayfalarda bir arka plana sahip olmasını sağlayacaktır.

Daha koyu bir arka plan tasarımına sahip olmayı planlıyorsanız, alt çubuk metin rengini ve sosyal simge rengini de beyaz olarak değiştirebilirsiniz. Bu, içeriğin daha okunabilir olmasını sağlayacaktır.

Alt Çubuk için Bölüm Arka Plan Tasarımını Oluşturma

Artık altbilgi alt çubuğunun şeffaf bir arka planı olduğu için, bölüm arka planımızı tasarlamaya ve çubuğun arkasına yerleştirmeye hazırız.

Henüz yapmadıysanız, yeni bir sayfa oluşturun ve “Sıfırdan Oluştur” seçeneğini seçin. Ardından, bölüm satırı için bir sütun düzeni ekleyin.

Arka plan tasarımları için sadece bölüm ve satıra ihtiyacımız olacağı için satıra modül eklemeye gerek yok.

Ardından, satır ayarlarına gidin ve aşağıdaki gibi biraz boşluk ekleyin:

Özel Kenar Boşluğu: 0px Üst, 0px Alt
Özel Dolgu (masaüstü): 80px Üst, 80px Alt
Özel Dolgu (tablet): 100 piksel Üst, 100 piksel Alt

Bu boşluk, arka plan tasarımımız için ekleyeceğimiz bölüm bölücüler için gereken alanı korurken, bölümümüze biraz yükseklik kazandırmak için gereklidir.

Şimdi bölüm ayarlarına gidin ve aralığı aşağıdaki gibi güncelleyin:

Özel Kenar Boşluğu (masaüstü): -55 piksel Alt
Özel Kenar Boşluğu (tablet): -94px Alt
Özel Dolgu: 0px Üst, 0px Alt

-55px alt kenar boşluğu, alt çubuğu bölüm alanına çeker, böylece bölümümüze eklediğimiz tasarım ne olursa olsun alt çubuğumuzun arkasına oturur. Varsayılan olarak alt çubuk, masaüstünde 54 piksel yüksekliğinde ve tablette yaklaşık 94 piksel yüksekliğindedir, bu nedenle tablet 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 bölüm ayırıcı için gereken alanı en üst düzeye çıkarır.

Alt bölücü ekleme

Ardından, alt bilgi içeriğinizi aşağıdaki gibi çerçevelemek için bölüme bir alt ayırıcı ekleyin:

Alt Bölücü Stili: ekran görüntüsüne bakın
Bölücü rengi: #121212
Bölücü Yüksekliği: 120px (masaüstü), 150px (tablet), 150px (akıllı telefon)
Bölücü Yatay Tekrar: 0,9x (masaüstü), 0,5x (tablet), 0,5x (akıllı telefon)
Bölücü Çevirme: dikey

Şu anda, alt çubuk içeriği (metin ve sosyal simgeler), bölücü düzenlemesi bölüm içeriğinin altına ayarlanmış olmasına rağmen bölücünün arkasına gizleniyor. Bunun nedeni, alt altbilginin teknik olarak bölüm içeriğinin bir parçası olmamasıdır. Bunu düzeltmek için, alt altbilginin arkasına oturması için bölümümüze özel bir z-index eklememiz gerekiyor.

Gelişmiş sekmesi altında, aşağıdaki özel CSS pasajını Ana Öğeye ekleyin:

z-index: 0;

Artık alt bilgi çubuğu içeriğiniz bölümünüzün üzerine oturacak ve alt bilgi çubuğunuzu çerçeveleyen hoş bir arka plan tasarımına sahip olacaksınız.

Ve mobilde de güzel bir şekilde uyum sağlayacaktır.

Bu temel yapı ile, üzerine inşa edilecek güzel bir bölüm tasarımına sahip olursunuz. Bunu akılda tutarak, devam edin ve bu yapıyı şimdiki tasarımları keşfetmek için bir başlangıç ​​noktası olarak kullanabilmeniz için bu bölümü kitaplığınıza kaydedin.

Artık yeni tasarımları keşfetmeye hazırsınız. Sayısız arka plan çerçeve tasarımı oluşturmak için alt bölücüyü farklı stil ve renklere değiştirebilirsiniz. Seçtiğiniz bölücü stiline bağlı olarak bölücü yüksekliğini ve yatay tekrar değerlerini ayarlamanız gerekebilir.

İşte birkaç örnek.

Üst Bölücüyü Özel Arka Plan Gradyanı ile Kullanma

Alt altbilginiz için arka plan çerçeve tasarımınız olarak tek bir alt ayırıcı kullanmak biraz sınırlayıcıdır. Ancak çerçeve tasarımınız olarak bir üst ayırıcı kullanırsanız, bölümünüz için özel bir arka plan gradyanı kullanabilirsiniz. Bu, keşfedilecek yeni kapılar açacaktır.

Bölüm ayarlarınıza gidin ve alt ayırıcı stilinizi yok olarak ayarlayın. Ardından, bölüm arka planınız olarak bir arka plan gradyanı ekleyin.

Artık yepyeni bir görünüm oluşturmak için bölümünüze bir üst ayırıcı stili ekleyebilirsiniz.

Burada, yalnızca gradyan arka planı ve ayırıcı stili değiştirilerek yapılabilecek birkaç örnek tasarım verilmiştir.

Çok Renkli Bir Kenar Çerçevesi Tasarımı için Bölücüleri Arka Plan Gradyanlarıyla Birleştirme

Şimdi bir çentik atmanın zamanı geldi. Bölümler ve satırlar içinde benzersiz arka plan tasarımları oluşturmak için birçok olasılık olduğunu unutmayın. Bu son örnek için, tamamen benzersiz bir tasarım oluşturmak için bu özellikleri nasıl birleştireceğinizi göstereceğim.

Bu tasarımı hızlı bir şekilde başlatmak için devam edin ve görsel oluşturucuda yeni bir bölüm eklemek için tıklayarak, kitaplıktan ekle sekmesinden ve bölüm düzenini seçerek kitaplığınıza kaydettiğiniz bölümü kullanın.

Bölüm sayfaya eklendikten sonra özelleştirmeye hazırız.

Yeni başlayanlar için bölüm ayarlarına gidin ve aşağıdakileri güncelleyin:

Arka Plan Gradyanı Sol Renk: #29c4a9
Arka Plan Gradyanı Sol Renk: #2b87da

Gradyan Yönü: 90deg
Başlangıç ​​pozisyonu: %50
Bitiş konumu: %0

Şimdi aşağıdaki gibi bir üst ayırıcı ekleyin:

Üst Bölücü Stili: ekran görüntüsüne bakın
Bölücü rengi: #ffffff
Bölücü Yüksekliği: 120px (masaüstü), 150px (tablet), 150px (akıllı telefon)
Bölücü Yatay Tekrar: 0,9x (masaüstü), 0,5x (tablet), 0,5x (akıllı telefon)
Bölücü Çevirme: dikey

Bu Bölücü ayarları, alt bölücüyü çevreleyen bir kenarlık oluşturacak şekilde alt bölücüyü tamamen yansıtır. Ayırıcının kendisi beyaz olduğundan, bu, arka plan gradyanının alt ayırıcının bir uzantısı olduğu izlenimini bırakır.

Şimdi satır ayarlarına gidin ve aşağıdaki gibi bir arka plan gradyanı ekleyin:

Arka Plan Gradyanı Sol Renk: #df52ff
Arka Plan Gradyanı Sol Renk: #2b87da

Gradyan Yönü: 90deg
Başlangıç ​​pozisyonu: %50
Bitiş konumu: %0

Arka planınız için her bir renk segmentinin genişliğini eşitlemek için satıra %50'lik özel bir genişlik verin.

İşte son tasarım!

Son düşünceler

Divi'nin alt alt bilgi çubuğu için özel bir arka plan tasarımına sahip olmak, sayfanıza canlandırıcı bir katkı olabilir. Tek gereken, sayfanın altında oturan bir bölümde birkaç özelleştirme. Ne yazık ki, tasarım tek bir sayfa ile sınırlıdır ve site genelinde uygulanamaz. Bu nedenle altbilgi arka plan rengi bir geri dönüş olarak kullanılır. Ancak bölümü kitaplığınıza kaydettikten sonra istediğiniz sayfaya kolayca bırakabilirsiniz. Bir sonraki projenizde kullanmak üzere önceden hazırlanmış düzenlerimizden herhangi birine bile ekleyebilirsiniz. Yapmanız gereken tek şey, bölümü sayfanızın en altına eklediğinizden emin olmaktır. Umarım, faydalı bulacaksınız!

Ayrıca, benzer bir teknik kullanarak gezinme menünüzü çerçevelemek ilginizi çekebilir.

Yorumlarda sizden haber bekliyorum.

Şerefe!