ev borcu WordPress sitesi
Beaver Themer Layout Header'da bir içerik açılır penceresi yerleşimi oluşturun
Bu, sizi Beaver Builder'da gizli içeriğe tıkladığınızda bir bindirme açılır penceresiyle çalışmaya başlamanızı sağlayacak bir başlangıç kılavuzudur – gerçekten de Beaver Builder'a özel bir şey yoktur, bunun dışında, bindirme içeriğini oluşturucunun kendisinde oluşturmak, normal olarak görüntülemek BB düzenleme ekranında, ancak bindirme içeriği genel görünümünü gösterin/gizleyin.
Bu, herhangi bir tema çerçevesine kolayca uygulanabilir.
Her bir başlığın tablet ve mobil boyutta nasıl davrandığına ilişkin tasarım faktörleri vardır, bu nedenle kılavuz masaüstünde iyi çalışacaktır ancak içeriğinize bağlı olarak mizanpajlarınızın daha küçük boyutlarda çalışması için biraz daha CSS Medya Sorgusu eklemeniz gerekecektir.
Kılavuz, yerleşik Beaver Themer düzeni JS ve CSS sekmelerine ekleyebileceğiniz bazı JS ve CSS kodları verir ve bunlar Themer başlığını görüntülediğiniz her yere çıkar.
BB ekosisteminde, zaten açılır ve üst üste binen bazı modüller vardır, ancak bunlar yalnızca menüler için olma eğilimindedir – bu , mevcut herhangi bir BB modülünden içeriğin eklenmesine izin verir.
Sonunda, tüm kodla doğrudan içe aktarabileceğiniz şablon dosyası da eklenmiştir.
Bir Beaver Themer başlık düzeni oluşturun, onu yapışkan hale getirin ve 2 satır oluşturun, biri asıl başlık ve ikincisi açılır penceredir, ikinci satıra bir CSS sınıfı verin. kaplama
Her iki satırı da içeriğinizle doldurun.
İçeriği aç/kapat geçiş düğmesi
Asıl başlıkta, açılır pencereyi değiştiren bir düğme/bağlantı tetikleyicisi oluşturmanız gerekir – bu HTML bloğu örneği kullanılır.
<div class="open-close-flyout">
<button class="overlay-but">Menü</button>
<a href="#" class="overlay-close">×</a>
</div>
Animasyonlu örnekte düğme, ana başlıktaki üçüncü sütundaki bir HTML modülüdür, burada bir düğme istemeyebilirsiniz, bunun yerine bir simge, işaretlemeyi uygun şekilde değiştirin.
Javascript'e ekleyin
(işlev($){
$(işlev() {
openOverlay();
kapatOverlay();
});
işlev openOverlay() {
$('.overlay-but').on('click', function() {
$('body').addClass('overlay-active');
$('.overlay').css("yükseklik", "100vh"); // Bindirmenin görünüm alanını ele geçirmesini istediğiniz yüksekliği ayarlayın, px, % vb. kullanabilirsiniz.
yanlış döndür;
});
}
işlev kapatOverlay() {
$('.overlay-close').on('click', function() {
$('body').removeClass('overlay-active');
$('.overlay').css("yükseklik", "0%"); // Kapatıldığında yükseklik sıfırdır
yanlış döndür;
});
}
})(jQuery);
JS'de değiştirilecek şey, bindirmenin görüntü alanı yüksekliğidir – ilk tıklama 100vh yüksekliğini oluşturacak ve ikinci tıklama yüksekliği %0'ı kaldıracaktır.
CSS'ye ekleyin
/* Yer Paylaşımı (arka plan) değiştirildiğinde nasıl göründüğü*/
.kaplama {
/* Yükseklik ve genişlik, bindirmeyi nasıl ortaya çıkarmak istediğinize bağlıdır (bkz. JS ) */
yükseklik: 0; /* JS'de kontrol edilen bindirme yüksekliği */
genişlik: %100;
pozisyon: sabit;
z-endeksi: 1; /* En üste otur */
sağ: 0;
üst: 128 piksel; /* Sayfanın en üstünden ne kadar uzakta görünecek - burada başlık 128 piksele sabitlendi */
arka plan rengi: rgba(255,255,255, .9); /* Yer paylaşımı bg */
taşma-y: gizli; /* Yatay kaydırmayı devre dışı bırak */
geçiş: 0,5 sn; /* Bindirmeyi içeri kaydırmak veya aşağı kaydırmak için 0,5 saniyelik geçiş efekti (açıklığa bağlı olarak yükseklik veya genişlik) */
}
.overlay .fl-satır-sabit genişlik {
maksimum genişlik: yok;
}
.aç-kapat-açılır {
ekran: esnek;
esnek akış: sıra Nowrap;
haklı içerik: merkez;
}
.overlay-close {
yazı tipi boyutu: 30 piksel;
satır yüksekliği: 1;
görüntü yok;
}
.overlay-active .overlay-ama{
görüntü yok;
satır yüksekliği: 1;
}
.overlay-active .overlay-close {
ekran: satır içi blok;
pozisyon: göreceli;
}
Her düzen farklıdır – bu nedenle değiştirilmesi gereken en önemli şey – ilk olarak başlığın yüksekliğidir – başlık takılı kalmaktır, böylece kaplama bunun altında görünür – bu örnekte 128 piksel – başlığınız orta ve küçük boyutlarda yüksekliği değiştirirse o zaman bazı medya sorgularına ihtiyaç duyulacaktır.
Ayrıca, yapışkan başlıklar için, BB varsayılan olarak yalnızca büyük görünüm penceresini yapar – tablet ve mobil cihazlarda yapışkan başlıklar yaparak bu sorunu çözebilirsiniz 0 veya daha küçük boyutlarda hiç olmamasını sağlayabilirsiniz.
Şablon dosyası.
Tam Ekran Yer Paylaşımı
Başlık ofseti değil, tam ekran kaplaması için sadece birkaç ince ayara ihtiyacınız var, CSS'yi 2 bildirimde en üst konumda değiştirin…
.admin-bar .overlay {
üst: 32 piksel; /* Yönetici çubuğu - 32 piksel */
}
.kaplama {
üst: 0;
}
Ardından, açma/kapama geçişinin ilk yükte açık ve bindirmede kapalı olarak ayrılması gerekir.
Üst bilgi satırı…
<div class="open-close-flyout">
<button class="overlay-but">Menü</button>
</div>
Yer paylaşımlı içerik satırı…
<div class="open-close-flyout">
<a href="#" class="overlay-close">×</a>
</div>
Bunları ihtiyaç duyduğunuz şekilde hizalamak için daha fazla CSS ayarlaması gerekecektir.
Kaydırılacak animasyonu kontrol etme
Şimdiye kadar animasyon aşağı kayar, birkaç ince ayar ile sağdan soldan kaymasını sağlayabilirsiniz, CSS'yi ayarlayın
.kaplama {
yükseklik: %100;
genişlik: 0;
pozisyon: sabit;
z-endeksi: 1;
sol: 0;
üst: 0;
arka plan rengi: rgba(0,0,0,.5);
taşma-y: gizli;
geçiş: 0,5 sn;
}
Javascript'te kontrol edilecek olan genişliği 0 olarak değiştirin, yüksekliği %100 olarak değiştirin – başlangıç slaydını yandan kontrol etmek için sola:0 veya sağa:0 ayarlayın.
Javascript'i değiştir…
(işlev($){
$(işlev() {
openOverlay();
kapatOverlay();
});
işlev openOverlay() {
$('.overlay-but').on('click', function() {
$('body').addClass('overlay-active');
$('.overlay').css("genişlik", "%100");
yanlış döndür;
});
}
işlev kapatOverlay() {
$('.overlay-close').on('click', function() {
$('body').removeClass('overlay-active');
$('.overlay').css("genişlik", "0%");
yanlış döndür;
});
}
})(jQuery);
İşte bu – şimdi kayar – hızı değiştirmek için CSS'deki geçiş özelliğini ayarlayın.
Tam ekran kaplama kullanmıyorsanız, geçiş geçişini de canlandırabilirsiniz – daha fazla bilgi burada.