Divi ile sayfanızda herhangi bir yere gelme araç ipuçları nasıl yerleştirilir
Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz bir Divi düzen paketi veriyoruz. Bir düzen paketi için, web sitenizi bir sonraki seviyeye getirmenize yardımcı olacak kullanım durumlarını da paylaşıyoruz. Bu hafta, devam eden Divi Tasarım Girişimimizin bir parçası olarak, size Divi ile sayfanızın herhangi bir yerinde araç ipuçlarının nasıl oluşturulacağını ve yerleştirileceğini göstereceğiz. Bu, yan bilgileri doğrudan sayfaya dahil etmeden ziyaretçilerinizle paylaşmanın iyi bir yoludur. Haydi Yapalım şunu!
Önizleme Öğreticiyi girmeden önce sonuçlara çeşitli ekran boyutlarında bakalım. Masaüstü
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Takip et ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve düzen paketine erişmek için İndir’i tıklayın. Başarılı bir şekilde abone oldunuz. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve ÜCRETSİZ DIVI Düzen Paketine erişin!
Köpek Walker Home Düzenini kullanarak yeni bir sayfa oluşturun Yeni bir sayfa ekle Yapmanız gereken ilk şey sayfaları açarak yeni bir sayfa oluşturmak> Yeni Ekle. Sayfanızda bir başlık vererek, sayfayı yayınlayarak ve görsel oluşturucuya geçerek devam edin.
Landing Dog Walker sayfasını yükleyin Sayfaların düzenini bir sonraki sayfanıza yükleyin. Bu düzen paketini Hover Araç İpuçları Tekniği aracılığıyla kullanacak olsak da, bu yaklaşımı üzerinde çalıştığınız her türlü düzen için geçerli hale getirebilirsiniz. Bir Hover Araç İmparı Tasarımı Oluşturun Sütun yapısının altına yeni bir satır ekleyin (Kaç Araç İpucu İhtiyacınız Olduğunu Belirleyin) Sayfaların düzenini yükledikten sonra, araç ipuçları havada kalmaya başlama zamanı. Sayfadaki belirli bir yere ekleyeceğiz, ancak çeviri değiştirme seçeneğini kullanarak herhangi bir yere yerleştirebilirsiniz. Sayfanızda aşağıdaki bölümleri bulun ve alt kısma üç sütun ekleyin: Maksimum Genişlik Araç ipucu tasarımının doğru yerde görünmesini sağlamak için, yukarıdaki satırlar için kullanılan satırın aynı maksimum genişliğini kullanacağız. Satır boyutu ayarlarını açın ve uygun maksimum genişliği ayarlayın: maksimum genişlik: 1280px Sıra kabı tarafından kullanılan alanı azaltmak için mesafe, boşluk ayarlarında üst ve alt dolguyu sileceğiz.
Üst dolgu: 0px Aşağıda dolgu: 0px
Taşma Ayrıca, satır taşmasının gelişmiş sekmede görünür olmasını sağlıyoruz.
Yatay taşma: görünür Dikey taşma: görünür
Araç İpucu Metin Modülünü Sütun 1’e Ekle İçerik kutusuna içerik ekle Soru işareti zamanı, ilk araç ipucu tasarımını yapmaya başlamanın zamanıdır! Metin modülünü kullanacağız. İçerik kutusuna span (araç ipucu simgesi için) ve div (içerik araç ipucu için) ekleyeceğiz. Bu bize araç ipucu ve içerik araç ipucu bireylerin simgesini düzenlemek için daha fazla özgürlük sağlayacaktır. Sınıfı ekleyerek ve sınıfın ‘soru işaretini’ kendisine ayarlayarak başlayın.
DIV Araçları Bölümü, ‘Araç İpucu-İçeriği’ sınıfı ile içerik kutusuna DIV ekleyerek devam eder. Bu div’e seçtiğiniz içerik araç ipucu içeriğini ekleyin. Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin: Metin yazı tipi: SANS’ı aç Metin rengi: #ffffff
H3 metin ayarları ayrıca metin ayarlarını değiştirir H3.
Başlık 3 Yazı Tipi: ANSI SC Başlık 3 Renk Metni: #ffffff
Başlık 3 Metin Boyutu: 30px
Yapıştırıcımız ayrıca bir havada bir kayma efekti oluşturmak için modülün genişliği ve yüksekliği ile oynadı.
Genişlik: 300 piksel Yükseklik: 42px
Mesafe biraz dolgu ekleyin.
Üst dolgu: 10 piksel Varsayılan görünürlük Şimdi, varsayılan durumda, araç ipucu simgesinin altındaki her şeyin gizlenmesini istiyoruz. Bu yüzden gelişmiş sekmedeki taşmayı gizleyeceğiz. Yatay
Dikey taşma: gizli Doğrudan görünürlük, ancak imleci yönlendirirken, her şeyin görünmesini istiyoruz. Yüzerken outbursu yaparak yapacağız.
Yatay taşma: görünür
Dikey taşma: görünür Kod modülünü şimdi metin modülünün altına ekleyin Modülü düzenledikten sonra, ayarladığımız CSS sınıfını kullanarak içerik kutusunda açıklık ve diva düzenlememiz gerekiyor. Kod modülünü araç ipucu metin modülünün hemen altına ekleyin.
CSS kodunu ekleyin Metin modülündeki stil div’e, metin modülünün farklı bölümlerini düzenlemek için aşağıdaki CSS kod satırlarını ekleyin: .soru işareti { Arka Plan rengi: #000;
Dolgu: 10px 16px 10px 16px;
Border-Radius: 500 piksel;
}
.tooltip-consent {
Arka plan-rengi: #ee6a5b;
Dolgu: 20px;
Border-Radius: 5 piksel;
} </tyl
Araç İpucu Metin Modülü İki kez yerleştirin ve ilk sütunu tamamladıktan sonra kalan sütuna yerleştirin, araç ipucu metin modülünü iki kez klonlayabilir ve kopyayı kalan iki satır sütuna yerleştirebilirsiniz.
Araç İpucu İçeriğini Değiştirme Araç İpucu İçeriğini her bir kopyadan değiştirdiğinizden emin olun.
Araç İpucu Konumunu değiştirin (Çevirme Dönüşümünü kullanarak) Araç #1'in açıklaması son fakat en azından, sayfada istediğimiz yerde araç ipuçlarını yeniden konumlandırmamız gerekir. Bu yayının önizlemesinde gösterildiği gibi aynı sonuçları elde etmek için, ilk araç ipucu metin modülünü açın ve aşağıdaki dönüşüm değerini uygulayın: Sağ: -450px (masaüstü), -2000px (tablet), -1900px (cep telefonu) Açıklama Aracı #2 İkinci sütundaki Araç İpucu Metin Modülüne taşıyın ve çevirme dönüşüm değerini aşağıdaki gibi değiştirin: sağ: -400 piksel (masaüstü), -1300px (tablet), -1250px (cep telefonu) Açıklama Aracı #3 Sütun 3’teki Araç İpucu Metin Modülü için aynı şeyi yapın ve bitti!
Sağ: -500px (masaüstü), -600 piksel (tablet ve cep telefonu) Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel Bu yazıdaki son zihin, ek eklentilere ihtiyaç duymadan sayfanızın herhangi bir yerinde araç ipuçlarının nasıl oluşturulacağını ve yerleştirileceğinizi gösterdik. Bu, doğrudan sayfanıza koymadan ek bilgi eklemenin iyi bir yoludur. Bu kullanım vaka öğreticisi, her hafta tasarım ekipmanı kutunuza ekstra bir şey koymaya çalıştığımız devam eden Divi Tasarım Girişimimizin bir parçasıdır. Bir sorunuz varsa, soruyu aşağıdaki yorumlar bölümünde bıraktığınızdan emin olun!
Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
Köpek Walker Home Düzenini kullanarak yeni bir sayfa oluşturun Yeni bir sayfa ekle Yapmanız gereken ilk şey sayfaları açarak yeni bir sayfa oluşturmak> Yeni Ekle. Sayfanızda bir başlık vererek, sayfayı yayınlayarak ve görsel oluşturucuya geçerek devam edin.
Landing Dog Walker sayfasını yükleyin Sayfaların düzenini bir sonraki sayfanıza yükleyin. Bu düzen paketini Hover Araç İpuçları Tekniği aracılığıyla kullanacak olsak da, bu yaklaşımı üzerinde çalıştığınız her türlü düzen için geçerli hale getirebilirsiniz. Bir Hover Araç İmparı Tasarımı Oluşturun Sütun yapısının altına yeni bir satır ekleyin (Kaç Araç İpucu İhtiyacınız Olduğunu Belirleyin) Sayfaların düzenini yükledikten sonra, araç ipuçları havada kalmaya başlama zamanı. Sayfadaki belirli bir yere ekleyeceğiz, ancak çeviri değiştirme seçeneğini kullanarak herhangi bir yere yerleştirebilirsiniz. Sayfanızda aşağıdaki bölümleri bulun ve alt kısma üç sütun ekleyin: Maksimum Genişlik Araç ipucu tasarımının doğru yerde görünmesini sağlamak için, yukarıdaki satırlar için kullanılan satırın aynı maksimum genişliğini kullanacağız. Satır boyutu ayarlarını açın ve uygun maksimum genişliği ayarlayın: maksimum genişlik: 1280px Sıra kabı tarafından kullanılan alanı azaltmak için mesafe, boşluk ayarlarında üst ve alt dolguyu sileceğiz.
Üst dolgu: 0px Aşağıda dolgu: 0px
Taşma Ayrıca, satır taşmasının gelişmiş sekmede görünür olmasını sağlıyoruz.
Yatay taşma: görünür Dikey taşma: görünür
Araç İpucu Metin Modülünü Sütun 1’e Ekle İçerik kutusuna içerik ekle Soru işareti zamanı, ilk araç ipucu tasarımını yapmaya başlamanın zamanıdır! Metin modülünü kullanacağız. İçerik kutusuna span (araç ipucu simgesi için) ve div (içerik araç ipucu için) ekleyeceğiz. Bu bize araç ipucu ve içerik araç ipucu bireylerin simgesini düzenlemek için daha fazla özgürlük sağlayacaktır. Sınıfı ekleyerek ve sınıfın ‘soru işaretini’ kendisine ayarlayarak başlayın.
DIV Araçları Bölümü, ‘Araç İpucu-İçeriği’ sınıfı ile içerik kutusuna DIV ekleyerek devam eder. Bu div’e seçtiğiniz içerik araç ipucu içeriğini ekleyin. Metin Ayarları Tasarım sekmesine geçin ve uygun metin ayarlarını değiştirin: Metin yazı tipi: SANS’ı aç Metin rengi: #ffffff
H3 metin ayarları ayrıca metin ayarlarını değiştirir H3.
Başlık 3 Yazı Tipi: ANSI SC Başlık 3 Renk Metni: #ffffff
Başlık 3 Metin Boyutu: 30px
Yapıştırıcımız ayrıca bir havada bir kayma efekti oluşturmak için modülün genişliği ve yüksekliği ile oynadı.
Genişlik: 300 piksel Yükseklik: 42px
Mesafe biraz dolgu ekleyin.
Üst dolgu: 10 piksel Varsayılan görünürlük Şimdi, varsayılan durumda, araç ipucu simgesinin altındaki her şeyin gizlenmesini istiyoruz. Bu yüzden gelişmiş sekmedeki taşmayı gizleyeceğiz. Yatay
Dikey taşma: gizli Doğrudan görünürlük, ancak imleci yönlendirirken, her şeyin görünmesini istiyoruz. Yüzerken outbursu yaparak yapacağız.
Yatay taşma: görünür
Dikey taşma: görünür Kod modülünü şimdi metin modülünün altına ekleyin Modülü düzenledikten sonra, ayarladığımız CSS sınıfını kullanarak içerik kutusunda açıklık ve diva düzenlememiz gerekiyor. Kod modülünü araç ipucu metin modülünün hemen altına ekleyin.
CSS kodunu ekleyin Metin modülündeki stil div’e, metin modülünün farklı bölümlerini düzenlemek için aşağıdaki CSS kod satırlarını ekleyin: .soru işareti { Arka Plan rengi: #000;
Dolgu: 10px 16px 10px 16px;
Border-Radius: 500 piksel;
}
.tooltip-consent {
Arka plan-rengi: #ee6a5b;
Dolgu: 20px;
Border-Radius: 5 piksel;
} </tyl
Araç İpucu Metin Modülü İki kez yerleştirin ve ilk sütunu tamamladıktan sonra kalan sütuna yerleştirin, araç ipucu metin modülünü iki kez klonlayabilir ve kopyayı kalan iki satır sütuna yerleştirebilirsiniz.
Araç İpucu İçeriğini Değiştirme Araç İpucu İçeriğini her bir kopyadan değiştirdiğinizden emin olun.
Araç İpucu Konumunu değiştirin (Çevirme Dönüşümünü kullanarak) Araç #1'in açıklaması son fakat en azından, sayfada istediğimiz yerde araç ipuçlarını yeniden konumlandırmamız gerekir. Bu yayının önizlemesinde gösterildiği gibi aynı sonuçları elde etmek için, ilk araç ipucu metin modülünü açın ve aşağıdaki dönüşüm değerini uygulayın: Sağ: -450px (masaüstü), -2000px (tablet), -1900px (cep telefonu) Açıklama Aracı #2 İkinci sütundaki Araç İpucu Metin Modülüne taşıyın ve çevirme dönüşüm değerini aşağıdaki gibi değiştirin: sağ: -400 piksel (masaüstü), -1300px (tablet), -1250px (cep telefonu) Açıklama Aracı #3 Sütun 3’teki Araç İpucu Metin Modülü için aynı şeyi yapın ve bitti!
Sağ: -500px (masaüstü), -600 piksel (tablet ve cep telefonu) Önizleme Şimdi tüm adımlardan geçtikten sonra, çeşitli ekran boyutlarındaki nihai sonuçlara bakalım. Masaüstü
Hücresel Bu yazıdaki son zihin, ek eklentilere ihtiyaç duymadan sayfanızın herhangi bir yerinde araç ipuçlarının nasıl oluşturulacağını ve yerleştirileceğinizi gösterdik. Bu, doğrudan sayfanıza koymadan ek bilgi eklemenin iyi bir yoludur. Bu kullanım vaka öğreticisi, her hafta tasarım ekipmanı kutunuza ekstra bir şey koymaya çalıştığımız devam eden Divi Tasarım Girişimimizin bir parçasıdır. Bir sorunuz varsa, soruyu aşağıdaki yorumlar bölümünde bıraktığınızdan emin olun!
Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz divi almak istiyorsanız, YouTube Bülteni ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriğin faydalarını bilen ve elde eden ilk kişilerden biri olacaksınız.
