Divi ile Hover’da bir pop out hizmet açıklaması oluşturun
İmleç yönetirken açılır hizmet açıklaması oluşturmak, kullanıcıları ek bilgileri bilgilendirmek ve dahil etmek için etkili bir yol olabilir. Tıpkı araç ipucu gibi, bu açılır açıklama, imleci yönlendirirken hizmetiniz hakkında daha fazla bilgi ortaya çıkarır. Ancak Divi ile, ek özel CSS olmadan şaşırtıcı açılır tasarımlar oluşturmak için Divi üreticilerinde tam bir dizi tasarım aracı serisine sahipsiniz. Bu öğreticide, Divi web sitenizde bir açılır hizmet açıklaması yapmanın ne kadar kolay olduğunu göstereceğiz. İşin püf noktası, modülünüzü birbirlerinin arkasına kayacak şekilde konumlandırmak ve imleci yönlendirirken satırın genişliğini her ayarladığınızda çıkacak şekilde konumlandırmaktır.
Başlayalım! Gizlice göz atma
Dosyayı indir
Düzeni sayfanıza aktarmak için YouTube kanalımıza abone olun, sadece ZIP dosyasını çıkarın ve JSON dosyasını Divi Oluşturucu’ya sürükleyin. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacınız var, aşağıdakilere sahip olmalısınız:
Divi temaları yüklü ve aktif
Yeni sayfa, ön uçta başından beri oluşturuldu (görsel yapımcı)
Yapay içerik için kullanılacak görüntü. Bu öğretici için bazı yatırım şirketi düzen paketlerini kullanacağız.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak.
Pop-out hizmetinin bir açıklamasını yapmak, ilk bölüm ve satır için divi ile yönlendirilir, bir sütun satırı ile yeni bir düzenli bölüm oluşturur.
Herhangi bir modül eklemeden önce, satır ayarlarını aşağıdaki gibi güncelleyin: Koyu bir arka plan görüntüsü veya koyu arka plan rengi ekleyin. Yatırım şirketi düzeni paketinin soyut bir arka plan görüntüsünü kullanıyorum. Ancak kullanmak istemiyorsanız, #161C29 arka plan rengi ekleyebilirsiniz. Talang genişliği: 1 Genişlik:% 100
Yükseklik: 320px (masaüstü), otomatik (tablet ve cep telefonu) \ npadding: 0px üst, 0px aşağıda
Blurb modülünü ekleyin, ardından açıklama modülünü satırınıza ekleyin ve bulanık modül ayarlarını aşağıdaki gibi güncelleyin:
Başlık: Hizmet Simge: Ekran görüntüsüne bakın Ayrıca varsayılan içerik içeriğini silin.
Arka Plan Görüntüsü: Yaklaşık 320px kez 215px ölçen görüntüler ekleyin
Arka plan görüntü boyutu: uygun
Arka Plan Görüntü Pozisyonu: Üst Orta Sol renk gradyan arka plan: RGBA (31,72,192.0.61)
Sağ gradyan arka plan rengi: #161c29
Başlangıç Pozisyonu:% 34 Son pozisyon:% 71
Degradeyi arka plan görüntüsünün üzerine yerleştirin: evet
Ikon Color: #ffffff
Hizalama Metni: Orta
Yazı tipi başlığı: Archivo Başlık metin rengi: #ffffff
Başlık Metin Boyutu: 38px
Aralık mektubu başlığı: 4px
Maksimum genişlik: 320px
Modül hizalaması: orta
Yükseklik: 320 piksel
Dolgu: 68px Top
Yuvarlak açı: 10 piksel
Dizin Z: 1 Z 1 indeksinin değerini eklemek, sonunda arkasına istiflenecek başka bir modülün üzerinde sabit bir açıklama modülü sağlamak için çok önemlidir.
Davet Modülünü Ekle Bir sonraki harekete geçin.
Bu, içeriğimizin nihayetinde yüzerken görünecek iki alanından ilki olacaktır. Şimdi varsayılan arka plan rengini ortadan kaldırmamız ve tasarım ayarlarını aşağıdaki gibi güncellememiz gerekiyor:
Hizalama Metni: Sol Yazı tipi başlığı: Archivo
Başlık Metin Boyutu: 22px
Genişlik: 320 piksel
Modül hizalaması: sol (masaüstü), orta (tablet ve cep telefonu)
Yükseklik: 320px (masaüstü), otomatik (tablet ve cep telefonu)
Marj: -320px (masaüstü), 0px (tablet ve cep telefonu)
Dolgu: 40 piksel üst, 40 piksel sol, 40px sağ
Davet modülünü iki katına çıkaracak ve açıklamanın sağında görünecek ikinci bir içerik bloğu oluşturmak için sağa hizalanacak şekilde, çerçeve görüntü görüntüleme modunu uygulayabilir ve davet modülünü harekete geçirebiliriz. Ardından, yinelenen ayarları açın ve sağdaki modül seviyesini güncelleyin. Şimdiye kadar görülmesi gereken tasarım budur.
Tasarımımıza eklememiz gereken son öğe düğmesini yapmak bir düğmedir. İsterseniz hareket etmek için davet modüllerinden birine bir düğme ekleyebilirsiniz. Ancak bu tasarım için, satırımızın altında görünür kalan bir düğme eklemenin daha iyi olacağını düşünüyorum.
Bir düğme oluşturmak için, çerçeve görüntü görüntüleme modülünü uygulayın ve ikinciyi hareket ettirmek için davet modülü altına doğrudan bir düğme modülü ekleyin, böylece satır/sütundaki son modül haline gelir.
Metin Renk Düğmesi: #fffffff Arka Plan Renk Düğmesi: #1F48C0 Düğmenin sınır genişliği: 0px
Sınır sınır yarıçapı: 10px
Mektup Mesafe Düğmesi: 4px
Yazı tipi düğmesi: Archivo
Şimdi yapmamız gereken düğmemizi konumlandırmak.
Marj (masaüstü): -25px üst
Marj (tablet ve cep telefonu): 25px üst, 50 piksel aşağıda
Dizin Z: 2 Z2 dizin değeri, kalan düğmenin açıklama modülünün (AZ dizin 1’e sahip) üzerinde olmasını sağlayacaktır.
Hover Efektleri Oluşturma Pop-Out Ana Hover Etkisi Pop out hizmetlerinin açıklamasını tamamlamak için ihtiyacımız olan, yüzerken çizginin genişliğindeki değişiklikleri içerir. Bunu yapmak için bize varsayılan olarak dar bir geniş çizgi vermemiz gerekiyor. Bu, modülün birbirinin arkasında birikmesine ve açıklamanın modülünün arkasına gizli kalmasına neden olacaktır. Ardından, imleci iki gizli eylem davet modülü açığa çıkarmaya yönlendirirken satırın genişliğini genişleteceğiz. Satır ayarlarını açın ve genişliği aşağıdaki gibi güncelleyin:
Maksimum genişlik (masaüstü): 320 piksel
Maksimum genişlik (nokta imleci): 1080px
Maksimum genişlik (tablet ve cep telefonu) 1080px Ardından, son dokunuş için, sıraya sınır yarıçapını ekleyin ve düğmenin gizlenmemesi için görülecek görünürlük bolluğu seçeneğini güncelleyin.
Yuvarlak açı: 10 piksel
Yatay taşma: görünür
Dikey taşma: görünür
Nihai sonuçlar şimdiye kadar POP OUT hizmetinin açıklamasını görüyor. Ve burada tablet ve cep telefonu ekranında.
Denemek için daha fazla tasarım seçeneği, temel ayarlarımız olduğu için şimdi daha fazla tasarım seçeneğini denemek her zaman eğlencelidir. İşte POP OUT hizmet açıklamanız için deneyebileceğiniz bazı öneriler.
Arka plan renk parçaları ekleme İsterseniz, benzersiz bir açılır tasarım için arka plan rengi/satır görüntüsüne uygun parçaya bir arka plan rengi ekleyebilirsiniz. Aşağıdaki satır ayarlarını açın ve güncelleme:
Arka plan rengi: #161c29 Sonra sonuçlara bakın. Yalnızca iki modül kullanın, sadece iki modül kullanarak daha özlü bir patlama istiyorsanız, dava modüllerinden birini harekete geçirmek için silebilir ve daha sonra, imleci yönlendirirken her ikisinin de görülmesi için sola doğru hizalayabilirsiniz. Bunu yapmak için Çerçeve Görüntüleme Modunu kullanın. Ardından davet modülünü önce doğrudan açıklama modülü altında hareket ettirmek üzere silin. Bundan sonra, bulanık modülü sol modül seviyesiyle güncelleyin. Modül hizalaması: sol (masaüstü), orta (tablet)
Son olarak, imleci daha özlü hale getirmeye yönlendirirken satırın maksimum genişliğini azaltın. Aşağıdaki satır ayarlarını açın ve güncelleme:
Maksimum genişlik (nokta imleci): 700 piksel Maksimum genişlik (tablet): 700 piksel Sonuçlar aşağıdadır. Ve bu beyaz arka plan.
Son zihin, imleci yönlendirirken, ziyaretçileri içeriğinize dahil etmenin benzersiz bir yoludur. Bu işlevsellik, tüm Divi tasarım özellikleriyle dolu lüks ve bilgilendirici bir araç gibi işlev görür. Ve yapmak oldukça kolay. Modülün boyutuna ve konumuna sahip olduktan sonra, yapmanız gereken tek şey imleci işaret ederken satırın genişliğini ayarlamaktır. Daha fazla uygulama için farklı modüller ve içerik denemekte tereddüt etmeyin. Eğer varsa, umarım bu size Divi ile daha fazlasını yapmak için biraz daha fazla ilham verir. Yorumlarda sizden haber almayı umuyorum. Kızarmış ekmek!
