Divi ile Hover'da Açılır Servis Açıklamaları Oluşturma
Yayınlanan: 2019-07-20Fareyle üzerine gelindiğinde açılır hizmet açıklamaları oluşturmak, kullanıcıları ek bilgilerle bilgilendirmenin ve etkileşimde bulunmanın etkili bir yolu olabilir. Bir araç ipucuna çok benzeyen bu açılır açıklamalar, fareyle üzerine gelindiğinde hizmetiniz hakkında daha fazla bilgi ortaya çıkaracaktır. Ancak Divi ile, herhangi bir ek özel CSS olmadan çarpıcı açılır tasarımlar oluşturmak için Divi oluşturucuda bulunan eksiksiz tasarım araçları paketine sahipsiniz.
Bu eğitimde, Divi web sitenizde açılır servis açıklamaları oluşturmanın ne kadar kolay olduğunu göstereceğiz. İşin püf noktası, modüllerinizi birbirinin arkasında kayacak ve fareyle üzerine gelindiğinde satırın genişliğini her ayarladığınızda dışarı çıkacak şekilde konumlandırmaktır.
Başlayalım!
Gizlice Bakış
Düzeni ÜCRETSİZ İndirin
Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.
Ücretsiz İndir
Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.
Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!
Youtube Kanalımıza Abone Olun
Düzeni sayfanıza aktarmak için zip dosyasını çıkarın ve json dosyasını Divi Builder'a sürükleyin.
Hadi öğreticiye geçelim mi?
Başlamak için Gerekenler
Başlamak için aşağıdakilere sahip olmanız gerekir:
- Divi Teması yüklü ve etkin
- Ön uçta sıfırdan oluşturmak için oluşturulan yeni bir sayfa (görsel oluşturucu)
- Sahte içerik için kullanılacak resimler. Bu eğitim için Yatırım Şirketi yerleşim paketinden bir çift kullanacağız.
Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi ile Hover'da açılır Servis Açıklamaları oluşturma
Bölümü ve satırı oluşturun
İlk olarak, tek sütunlu bir satırla yeni bir normal bölüm oluşturun.
Herhangi bir modül eklemeden önce satır ayarlarını aşağıdaki gibi güncelleyin:
Koyu arka plan resmi veya koyu arka plan rengi ekleyin. Yatırım Şirketi Düzen Paketinden soyut bir arka plan resmi kullanıyorum. Ancak bunu kullanmak istemiyorsanız, #161c29 arka plan rengini ekleyebilirsiniz.
- Oluk Genişliği: 1
- Genişlik: %100
- Yükseklik: 320 piksel (masaüstü), otomatik (tablet ve telefon)\
- Dolgu: 0 piksel üst, 0 piksel alt
Bir Bulanıklık Modülü Ekle
Ardından satırınıza bir tanıtıcı modül ekleyin.
Ve tanıtıcı modül ayarlarını aşağıdaki gibi güncelleyin:
- Başlık: Hizmet
- Simge: ekran görüntüsüne bakın
Varsayılan gövde içeriğini de silin.
- Arka Plan Resmi: yaklaşık 320 piksele 215 piksel boyutunda bir resim ekleyin
- Arka Plan Resmi Boyutu: Sığdır
- Arka Plan Resmi Konumu: Üst Merkez
- Arka Plan Gradyanı Sol Renk: rgba(31,72,192,0.61)
- Arka Plan Gradyanı Sağ renk: #161c29
- Başlangıç Konumu: %34
- Bitiş Konumu: %71
- Gradyanı Arka Plan Resminin Üstüne Yerleştir: EVET
- Simge Rengi: #ffffff
- Metin Hizalama: orta
- Başlık Yazı Tipi: Arşiv
- Başlık Metin Rengi: #ffffff
- Başlık Metin Boyutu: 38px
- başlık Harf Aralığı: 4px
- Maksimum Genişlik: 320 piksel
- Modül Hizalaması: merkez
- Yükseklik: 320 piksel
- Dolgu: 68 piksel üst
- Yuvarlatılmış Köşeler: 10px
- Z İndeksi: 1
Z dizini 1 değerini eklemek, tanıtım modülünün, sonunda arkasında yığılacak olan diğer modüllerin üzerinde kalmasını sağlamak için çok önemlidir.
Harekete Geçirici Mesaj Modülü ekleyin
Ardından, tanıtım modülünün soluna yerleştirilecek bir harekete geçirici mesaj modülü eklememiz gerekiyor.
Bu, sonunda fareyle üzerine gelindiğinde ortaya çıkacak iki içerik alanından ilkimiz olacak.
Şimdi varsayılan arka plan rengini çıkarmamız ve tasarım ayarlarını aşağıdaki gibi güncellememiz gerekiyor:
- Metin Hizalama: Sol
- Başlık Yazı Tipi: Arşiv
- Başlık metni Boyut: 22px
- Genişlik: 320 piksel
- Modül Hizalaması: Sol (masaüstü), orta (tablet ve telefon)
- Yükseklik: 320 piksel (masaüstü), otomatik (tablet ve telefon)
- Marj: -320px (masaüstü), 0px (tablet ve telefon)
- Dolgu: 40 piksel üst, 40 piksel sol, 40 piksel sağ
Harekete Geçirici Mesaj Modülünü çoğaltın ve sağa hizalayın
Tanıtım yazısının sağında görünecek olan ikinci içerik bloğunu oluşturmak için tel çerçeve görüntüleme modunu dağıtabilir ve harekete geçirici mesaj modülünü çoğaltabiliriz. Ardından kopyanın ayarlarını açın ve modül hizalamasını sağa güncelleyin.
İşte tasarımın şimdiye kadar nasıl görünmesi gerektiği.
Düğmeyi Oluşturma
Tasarımımıza eklememiz gereken son eleman ise buton. İsterseniz, harekete geçirici mesaj modüllerinden herhangi birinin içine bir düğme ekleyebilirsiniz. Ancak bu tasarım için, satırımızın en altında görünen bir düğme eklemenin daha iyi olacağını düşündüm.
Düğmeyi oluşturmak için tel kafes görünüm modülünü dağıtın ve ikinci harekete geçirici mesaj modülünün hemen altına bir düğme modülü ekleyin, böylece satır/sütundaki son modül olur.
Düğme modülü ayarlarını açın ve ardından düğmeyi görsel olarak düzenlemek için masaüstü görünüm modunu değiştirin.
"Daha Fazla Bilgi Edinin" düğme metnini ekleyin.
Ardından düğme stilini aşağıdaki gibi güncelleyin:
- Düğme Hizalama: merkez
- Düğme Metin Rengi: #ffffff
- Düğme Arka Plan Rengi: #1f48c0
- Düğme Kenar Genişliği: 0px
- Düğme Sınır Yarıçapı: 10px
- Düğme Harf Aralığı: 4px
- Düğme Yazı Tipi: Arşiv
Şimdi tek yapmamız gereken düğmemizi konumlandırmak.
- Kenar boşluğu (masaüstü): -25 piksel üst
- Kenar boşluğu (tablet ve telefon): 25 piksel üst, 50 piksel alt
- Z İndeksi: 2
2'nin z dizin değeri, düğmenin tanıtım modülünün (az dizini 1 olan) üzerinde kalmasını sağlar.
Pop-out vurgulu efekti oluşturma
Açılır servis açıklamalarını gerçekleştirmek için ihtiyaç duyduğumuz ana vurgulu etkisi, vurgulu sırasında satırın genişliğini değiştirmeyi içerir. Bunu yapmak için, satırımıza varsayılan olarak dar bir genişlik vermemiz gerekecek. Bu, modüllerin birbiri ardına yığılmasına ve tanıtım modülünün arkasında gizli kalmasına neden olur. Ardından, iki gizli eylem çağrısı modülünü ortaya çıkarmak için fareyle üzerine gelindiğinde 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 (vurgulu): 1080 piksel
- Maksimum Genişlik (tablet ve telefon) 1080 piksel
Ardından son bir dokunuş için satıra bir kenarlık yarıçapı ekleyin ve düğmenin gizlenmemesi için görünürlük taşması seçeneğini görünür olarak güncelleyin.
- Yuvarlatılmış Köşeler: 10px
- Yatay Taşma: görünür
- Dikey Taşma: görünür
Son sonuç
Şimdiye kadar açılan servis açıklamalarına göz atın.
Ve işte tablet ve telefon ekranında.
Denenecek Daha Fazla Tasarım Seçeneği
Artık temel kuruluma sahip olduğumuza göre, daha fazla tasarım seçeneğiyle denemeler yapmak her zaman eğlencelidir. Açılır kapanır hizmet açıklamalarınız için deneyebileceğiniz birkaç öneri.
Bölüm Arka Plan Rengi Ekleme
Dilerseniz benzersiz bir pop-out tasarımı için satırın arka plan rengi/resmi ile eşleşen bölüme arka plan rengi ekleyebilirsiniz.
Satır ayarlarına gidin ve aşağıdakileri güncelleyin:
- Arka Plan Rengi: #161c29
Ardından sonucu kontrol edin.
Sadece İki Modül Kullanmak
Yalnızca iki modül kullanarak daha kompakt bir açılır pencere istiyorsanız, harekete geçirici mesaj modüllerinden birini silebilir ve ardından tanıtım modülünü sola hizalayarak ikisinin üzerine gelindiğinde görünür hale gelmesini sağlayabilirsiniz.
Bunu yapmak için tel kafes görünüm modunu dağıtın. Ardından, doğrudan tanıtım modülünün altındaki ilk harekete geçirici mesaj modülünü silin.
Bundan sonra, tanıtım modülünü sol modül hizalaması ile güncelleyin.
- Modül Hizalama: Sol (masaüstü), Merkez (tablet)
Son olarak, daha kompakt hale getirmek için fareyle üzerine gelindiğinde satırın maksimum genişliğini azaltın. Satır ayarlarını açın ve aşağıdakileri güncelleyin:
- Maksimum Genişlik (vurgulu): 700 piksel
- Maksimum Genişlik (tablet): 700 piksel
İşte nihai sonuç.
Ve işte beyaz bir arka plan üzerinde.
Son düşünceler
Fareyle üzerine gelindiğinde açılır hizmet açıklamaları oluşturmak, içeriğinizle ziyaretçilerin ilgisini çekmenin benzersiz bir yoludur. Bu işlevsellik, Divi'nin tüm tasarım yetenekleriyle dolu süslü ve bilgilendirici bir araç ipucu gibi çalışır. Ve bunu yapmak oldukça kolaydır. Modülleri boyutlandırıp konumlandırdıktan sonra, yapmanız gereken tek şey fareyle üzerine gelindiğinde sıranın genişliğini ayarlamaktır. Daha da fazla uygulama için farklı modüller ve içeriklerle deneme yapmaktan çekinmeyin. Bir şey olursa, umarım bu size Divi ile daha fazlasını yapmak için biraz daha ilham verir.
Yorumlarda sizden haber bekliyorum.
Şerefe!