Hover Araç İpuçlarını Divi ile Sayfanızın Herhangi Bir Yerine Nasıl Yerleştirirsiniz

Her hafta size bir sonraki projeniz için kullanabileceğiniz yeni ve ücretsiz Divi yerleşim paketleri sunuyoruz. Düzen paketlerinden biri için, web sitenizi bir sonraki düzeye taşımanıza yardımcı olacak bir kullanım örneği de paylaşıyoruz.

Bu hafta, devam eden Divi tasarım girişimimizin bir parçası olarak, Divi ile sayfanızda herhangi bir yere vurgulu araç ipuçlarını nasıl oluşturacağınızı ve yerleştireceğinizi göstereceğiz. Bu, yan bilgileri doğrudan sayfaya eklemeden ziyaretçilerinizle paylaşmanın harika bir yoludur.

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Hover Araç İpuçları Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz vurgulu araç ipuçları düzenine koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İ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.

Dog Walker Ana Sayfa Düzenini Kullanarak Yeni Sayfa Oluşturun

Yeni Sayfa Ekle

Yapmanız gereken ilk şey, Sayfalar > Yeni Ekle'ye giderek yeni bir sayfa oluşturmaktır. Sayfanıza bir başlık vererek, sayfayı yayınlayarak ve Visual Builder'a geçerek devam edin.

Dog Walker Açılış Sayfasını Yükle

Bir sonraki sayfanıza açılış sayfası düzenini yükleyin. Vurgulu araç ipuçları tekniğini gözden geçirmek için bu düzen paketini kullanacak olsak da, bu yaklaşımı üzerinde çalıştığınız her türlü düzende uygulayabilirsiniz.

Hover Araç İpuçları Tasarımı Oluşturun

Bölümün Altına Yeni Satır Ekle

Sütun Yapısı (İhtiyacınız Olan Araç İpuçlarına Karar Verin)

Açılış sayfası düzenini yükledikten sonra, fareyle üzerine gelme araç ipuçlarını oluşturmaya başlama zamanı. Bunları sayfada belirli bir noktaya ekleyeceğiz, ancak dönüştürme çevirme seçeneklerini kullanarak bunları istediğiniz yere yerleştirebilirsiniz. Sayfanızda aşağıdaki bölümü bulun ve altına üç sütunlu bir satır ekleyin:

Satır Maks Genişliği

Araç ipucu tasarımlarının doğru yerde göründüğünden emin olmak için, onun üstündeki satır için kullanılanla aynı satır maksimum genişliğini kullanacağız. Satırın boyutlandırma ayarlarına gidin ve maksimum genişliği buna göre ayarlayın:

• Maksimum Genişlik: 1280 piksel

aralık

Satır kapsayıcısının kapladığı alanı azaltmak için, boşluk ayarlarındaki varsayılan üst ve alt dolguyu kaldıracağız.

• Üst Dolgu: 0px
• Alt Dolgu: 0px

taşmalar

Ayrıca, satırın taşmalarının gelişmiş sekmesinde 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 İçerik Ekle

Soru İşareti Aralığı

İlk araç ipucu tasarımını oluşturmaya başlama zamanı! Bir Metin Modülü kullanacağız. İçerik kutusunun içine bir yayılma alanı (araç ipucu simgesi için) ve bir div (araç ipucu içeriği için) ekleyeceğiz. Bu bize, vurgulu araç ipucu simgesini ve araç ipucu içeriğini ayrı ayrı biçimlendirmek için daha fazla özgürlük verecektir. Yayılma alanını ekleyerek ve ona 'soru işareti' sınıfını atayarak başlayın.

İpucu Böl

'tooltip-content' sınıfıyla içerik kutusuna bir div ekleyerek devam edin. Seçtiğiniz araç ipucu içeriğini bu div'e ekleyin.

Metin Ayarları

Tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Sans'ı Aç
• Metin Rengi: #ffffff

H3 Metin Ayarları

H3 metin ayarlarını da değiştirin.

• Başlık 3 Yazı Tipi: Amatic SC
• Başlık 3 Metin Rengi: #ffffff
• Başlık 3 Metin Boyutu: 30px

boyutlandırma

Ayrıca vurgulu efekti oluşturmak için modülün genişliği ve yüksekliği ile oynuyoruz.

• Genişlik: 300 piksel
• Yükseklik: 42 piksel

aralık

Biraz üst dolgu da ekleyin.

• Üst Dolgu: 10px

Varsayılan Görünürlük

Şimdi, varsayılan durumda, araç ipucu simgesinin altına giden her şeyin gizlenmesini istiyoruz. Bu yüzden gelişmiş sekmesindeki taşmaları gizleyeceğiz.

• Yatay Taşma: Gizli
• Dikey Taşma: Gizli

Fareyle Görünürlük

Ancak fareyle üzerine gelindiğinde her şeyin görünmesini istiyoruz. Bunu, fareyle üzerine gelindiğinde taşmaları görünür hale getirerek yapacağız.

• Yatay Taşma: Görünür
• Dikey Taşma: Görünür

Metin Modülünün Altına Kod Modülü Ekle

Modülün stilini oluşturduğumuza göre, ona atadığımız CSS sınıflarını kullanarak içerik kutusunun içindeki yayılma ve div'i yine de stillendirmemiz gerekiyor. Araç ipucu Metin Modülünün hemen altına bir Kod Modülü ekleyin.

Metin Modülünde Stil Div'lerine CSS Kodu Ekleme

Metin Modülünün farklı bölümlerine stil vermek için aşağıdaki CSS kodu satırlarını ekleyin:

<style>
.question-mark {
background-color: #000;
padding: 10px 16px 10px 16px;
border-radius: 500px;
}

.tooltip-content {
background-color: #ee6a5b;
padding: 20px;
border-radius: 5px;
}</style>

Araç İpucu Metin Modülünü İki Kez Klonla ve Kalan Sütunlara Yerleştir

İlk sütunu tamamladıktan sonra, Metin Modülü araç ipucunu iki kez kopyalayabilir ve kopyaları satırın kalan iki sütununa yerleştirebilirsiniz.

Araç İpucu İçeriğini Değiştir

Her kopyanın araç ipucu içeriğini değiştirdiğinizden emin olun.

Araç İpucu Konumunu Değiştirin (Dönüştür Çevirmeyi Kullanarak)

İpucu #1

Son olarak, araç ipuçlarını sayfada istediğimiz yerde yeniden konumlandırmamız gerekecek. Bu gönderinin önizlemesinde gösterilenle aynı sonucu elde etmek için, ilk araç ipucu Metin Modülünü açın ve aşağıdaki dönüştürme çevirme değerlerini uygulayın:

• Sağ: -450px (Masaüstü), -2000px (Tablet), -1900px (Telefon)

İpucu #2

İkinci sütundaki Metin Modülü araç ipucuna gidin ve transform translate değerlerini aşağıdaki gibi değiştirin:

• Sağ: -400px (Masaüstü), -1300px (Tablet), -1250px (Telefon)

İpucu #3

Aynı şeyi 3. sütundaki Metin Modülü araç ipucu için de yapın ve işiniz bitti!

• Sağ: -500px (Masaüstü), -600px (Tablet ve Telefon)

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, ek bir eklentiye ihtiyaç duymadan fareyle üzerine gelme araç ipuçlarını nasıl oluşturacağınızı ve sayfanızın herhangi bir yerine nasıl yerleştireceğinizi gösterdik. Bu, doğrudan sayfanıza eklemeden ek bilgi eklemenin harika bir yoludur. Bu kullanım örneği öğreticisi, her hafta tasarım araç kutunuza fazladan bir şey koymaya çalıştığımız devam eden Divi tasarım girişimimizin bir parçasıdır. Herhangi bir sorunuz varsa, aşağıdaki yorum bölümüne bir soru bıraktığınızdan emin olun!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.