Örtüşme noktası divi ile referanslar için benzersiz bir imleç nasıl yapılır
Referanslar birçok web sitesi için büyük bir sorundur. Uzmanlık gösterirler ve ziyaretçiler genellikle bir şirketin veya kişinin ne kadar güvenilir olduğunu bilmek istiyorlarsa onları ararlar. Bu nedenle, web sitenizde referansları görsel olarak nasıl sunduğunuzu düşünmek önemlidir. Divi ile referanslarınızı tam olarak istediğiniz gibi gösterebilirsiniz. Size ilham vermek için, zammı üst üste binmeyi kullanarak referansları göstermenin inanılmaz ve benzersiz bir yolunu nasıl yapacağınızı göstereceğiz. Haydi Yapalım şunu! Önizleme Eğiticiye girmeden önce, sonuçta bakalım.
Yeni bir parça ekleyin, başlayalım! Yeni bir sayfayı ekleyin veya mevcut olanı açın ve yeni bir düzenli bölüm ekleyin. Yeni bir satır 1 sütun yapısı ekleyin Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin: Herhangi bir modül eklemeden yapıştırıcı, satır ayarlarını açın ve boyut ayarlarını değiştirin.Bu çizgiyi tamamen genişletin: evet
Özel Talang genişliği kullanın: evet
Talang genişliği: 1 Mesafe Bazı özel alan değerleri de ekleyin.
Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 2 Sol: 2VW (masaüstü), 3VW (tablet ve cep telefonu)
Sütun 2 Dolgu Sağ: 11VW (masaüstü), 3VW (tablet ve cep telefonu) Resim Modülünü Sütun 1’e ekleyin Çeşitli modülleri eklemeye başlama zamanını yükleyin! İlk sütunda görüntü modülü ile başlayın. Seçim portresini yükleyin. İmplantasyon Resimleri Görüntü ayarlarını açın ve görüntü seviyesini değiştirin.
Görüntü Tesviye: Sol Yapıştırıcı Bir sonraki boyut ayarlarını değiştirin.
Genişlik:% 78 (masaüstü),% 70 (tablet ve cep telefonu)
Modül hizalaması: sol TOPLAR Üst üste binme metin modülünü Sütun 1’e ekleyin İçeriği görüntü modülünün hemen altına ekleyin, metin modülünü ekleyin. Kişinin ayrıntılarını içerik kutusuna yerleştirin. Varsayılan arka plan bir arka plan rengi ekleyerek devam edin. Arka plan rengi: RGBA (255,255,255.0)
Arka plana gidin İmleciyi yönlendirirken diğer arka plan rengini ekleyin. Arka plan rengi: #0f1bff
Varsayılan metin ayarları Daha sonra metin ayarlarını değiştirin. Metin rengi: #ffffff
Metin Boyutu: 0px
Hat yüksekliği metni: 0px
İmleçi yönlendirirken metin ayarları için bazı ayarlamalar için doğrudan metin ayarları. Metin Boyutu: 19px
Hat yüksekliği metni: 2em
Başlık Metin Ayarları Varsayılan başlık metin ayarlarının da değiştirilmesi gerekir. Başlık 3 Font Ağırlığı: Ultra Kalın
Başlık 3 yazı tipi stili: büyük harf
Başlık 3 Renk Metni: #ffffff
Başlık 3 Metin Boyutu: 0px
3 satır yüksekliği: 0EM
Başlığın metin ayarlarına gidin, imleci yönlendirirken farklı notlar ekleyin. Başlık 3 Metin Boyutu: 35px
3 satır yüksekliği: 1.1em
Sonraki mesafe, açık alan ayarları ve birkaç değer ekleyin. Üst Marj: -100 piksel
Sol kenar boşluğu: 50 piksel
Sağ kenar boşluğu: 50 piksel
Üst dolgu: 40 piksel
Dolgu Alt: 60 piksel
Metin yönünü metin ayarlarına geri değiştirin ve metin yönünü değiştirin. Metin Oryantasyonu: Orta
Varsayılan kutunun gölgesi daha sonra, varsayılan kutunun gölgesini metin modülüne ekleyin. Bu kutunun gölgesi tüm tasarımın bir parçası olacak. Yatay konum gölge kutusu: 1000 piksel
Dikey Konum Gölge Kutusu: -400 piksel
Bulanık Güç Gölgesi Kutusu: 0px
Gölge kutularının dağılımının gücü: 250 piksel
Gölge Renk: RGBA (175,175,175,0.13)
Kutunun gölgesini yönlendirin Özel bir vuruş örtüşme efekti oluşturmak için, ayrıca havza kutusunun gölgesini de ekleyin. Yatay konum gölge kutusu: -73px Kutu gölgesinin dikey konumu: -49px
Bulanık Güç Gölgesi Kutusu: 0px
Gölge kutularının dağılımının gücü: 10 piksel
Gölge Renk: RGBA (255,182,12,0.53)
Geçiş Düzgün bir geçiş yapmak için, Gelişmiş sekmesindeki geçiş süresini değiştirin.
Geçiş süresi: 1000ms Metin Modülünü Sütun 2’ye Ekleyin İkinci sütunda içeriği ekleyin, ihtiyacımız olan ilk şey metin modülünün başlığıdır. Lütfen ve bir referans özeti ekleyin.
Başlık Metin Ayarları Ardından, başlık metin ayarlarını değiştirin. Başlık 3 Yazı Tipi: Goudy Bookletter 1911 Başlık 3 Metin Seviyeleri: Sol
Başlık 3 Metin Boyutu: 3.5VW (masaüstü), 40 piksel (tablet), 30px (telefon)
3 satır yüksekliği: 1.1em
Bazı özel alan değerleri ekleyerek daha fazla mesafe.
Üst kenar: 7VW (masaüstü), 100px (tablet), 50px (telefon) Açıklama Metin Modülünü Sütun 2’ye Ekle Dolgu Ekle Ekle Metin modülünün başlığının hemen altındaki tüm referanslarla başka bir metin modülü ekleyin.
Metin Ayarları Referanslar ekledikten sonra, devam edin ve metin ayarlarını değiştirin.
Yüksek çizgi metin: 2.2em
Metin Oryantasyonu: SolMesafe Özellik üzerine bazı kenar boşlukları da ekleyin.
Üst kenar: 4VW (masaüstü), 50px (tablet ve cep telefonu) Geçerli sütun yapısının yeni bir satırını ekleyin Birinci satırı bitirdikten sonra, aşağıdaki sütun yapısını kullanarak ikinci satırı ekleyelim:
Yapıştırıcı Satır ayarlarını açın ve boyut ayarlarını değiştirin. Bu çizgiyi tamamen genişletin: evet Özel Talang genişliği kullanın: evet
Talang genişliği: 1
Mesafe Bir sonraki özel alan değerleri ekleyin.
Üst kenar boşluğu: 100 piksel Üst dolgu: 0px
Aşağıda dolgu: 0px
Sütun 1 Sol: 11VW (Masaüstü), 3VW (Tablet ve Cep Telefonu) Sütun 1 Dolgu Sağ: 2VW (masaüstü), 3VW (Tablet ve Cep Telefonu)
Sütun 1’deki önceki satır ve yerdeki klon metin modülü, önceki satıra ve sütun 2’deki ikinci klon modülüne döner. Bunu yaptıktan sonra, yeni satırın ilk sütununa kopya yerleştirin.
Metin Oryantasyonunu Değiştir İki modülün metin yönünü değiştirin.
Metin Oryantasyonu: Doğru Resim Modülünü Sütun 2’ye ekleyin Bir sonraki görüntüyü yükleyin, görüntü modülünü ikinci sütuna ekleyin ve yeni bir portre görüntüsü yükleyin. Görüntülerin tesviye edilmesi modül görüntülerinin seviyesini değiştirir.
Aydınlanma Görüntüsü: Doğru Yapıştırıcı boyut ayarlarını değiştirerek devam edin. Genişlik:% 78 (masaüstü),% 70 (tablet ve cep telefonu)
Modül hizalaması: doğru Mesafe Bazı özel alan değerleri de ekleyin.
Üst kenar: 50px (tablet ve cep telefonu)
Geri Yükleme Metin Modülünü Sütun 2’ye Ekleyin Bu tasarımı tamamlamak için gereken son modülün içeriğini ekleyin Görüntü modülünün altındaki metin modülüdür. Kişinin ayrıntılarını içerik kutusuna ekleyin. Arka plan varsayılan daha sonra, modüle bir arka plan görüntüsü ekleyin.
Arka plan rengi: RGBA (255,255,255.0) Yüzerken arka plan rengini değiştirmek için arka plana gidin. Arka plan rengi: #690CFF
Varsayılan metin ayarları Sonraki metin ayarlarını değiştirin. Metin rengi: #ffffff
Metin Boyutu: 0px Hat yüksekliği metni: 0px
Metin Oryantasyonu: Orta
İmleçi yönlendirirken bazı ayarlamalar için metin ayarlarını işaret edin.
Metin Boyutu: 19px
Hat yüksekliği metni: 2em Başlık metin ayarları varsayılan başlık metin ayarlarını da değiştirin.
Başlık 3 Font Ağırlığı: Ultra Kalın
Başlık 3 Renk Metni: #ffffff Başlık 3 Metin Boyutu: 0px
3 satır yüksekliği: 0EM
Yükseklikte birkaç küçük ince ayar içeren başlık metin ayarlarına gidin. Başlık 3 Metin Boyutu: 35px
3 satır yüksekliği: 1.1em
Uzay ayarlarına girerek ve bazı özel değerler ekleyerek daha fazla mesafe. Üst kenar: -80px
Sol kenar boşluğu: 50 piksel
Sağ kenar boşluğu: 50 piksel Üst dolgu: 40 piksel
Dolgu Alt: 60 piksel
Varsayılan kutunun gölgesi, varsayılan kutunun gölgesini metin modülüne ekleyin.
Yatay konum gölge kutusu: -1000px
Kutu gölgesinin dikey konumu: -420px
Bulanık Güç Gölgesi Kutusu: 0px Gölge kutularının dağılımının gücü: 250 piksel
Gölge Renk: RGBA (175,175,175,0.13)
Kutunun gölgesini yönlendirin ve gelgitteki kutunun gölgesini değiştirin.
Yatay konum gölge kutusu: -73px
Kutu gölgesinin dikey konumu: -49px
Bulanık Güç Gölgesi Kutusu: 0px Gölge kutularının dağılımının gücü: 10 piksel
Gölge Renk: RGBA (12.255.238.0.53)
Son fakat en az değil, geçiş süresini değiştirerek sorunsuz bir geçiş yapın.
Geçiş süresi: 1000ms
Önizleme Şimdi tüm adımlardan geçtik, sonucuna bakalım!
Son zihnimiz, bu yazının size Hover örtüşmesini kullanarak inanılmaz bir referans bölümü oluşturmanıza ilham vermesini umuyor! Gerçekten çok fazla zaman kodlama veya öğrenmek zorunda kalmadan web sitenize başka bir boyut eklemenize yardımcı olurlar. Sorularınız veya önerileriniz varsa, aşağıdaki yorumlar bölümünde bir yorum bıraktığınızdan emin olun!
