Divi'de İlgi Çekici Araç İpuçları ile Arka Plan Resmi Nasıl Etiketlenir

Bir arka plan resmini etiketlemek için araç ipuçları eklemek, ürün veya hizmetiniz hakkında değerli bilgilerle ziyaretçilerin ilgisini çekmenin yaratıcı bir yoludur. Temel fikir, simgeleri (veya metni) görüntü üzerinde belirli konumlara yerleştirmektir (noktaları olan bir google haritası gibi). Divi'nin vurgulu efektlerinden yararlanırsanız, ilgi çekici araç ipuçları oluşturmak için bir simgenin üzerine geldiğinizde ek metin gösterebilirsiniz.

Bu eğitimde, ürününüz hakkında bilgilendirici araç ipuçları olarak hizmet edecek bir arka plan resmini tanıtım yazılarıyla nasıl etiketleyeceğinizi göstereceğim. Bunu yapmak için, kaliteli fitness hakkında bilgi içeren bir arka plan resmini etiketlemek için Fitness Salonu Açılış sayfasını kullanacağım.

Başlayalım.

Gizlice Bir Bakış

İşte bu eğitimde inşa edeceğimiz tasarımın bir özeti.

Neye ihtiyacın var

Bu eğitim için aşağıdakilere ihtiyacınız olacak:

• Divi Teması
• Fitness Salonu Düzen Paketindeki Fitness Salonu Açılış Sayfası (Divi Builder'dan edinilebilir)
• Tam olarak 320 piksele 507 piksel olan arka plan resminiz için kullanılacak bir resim. Bunu masaüstünüze sürüklemekten çekinmeyin ve bu eğitim için kullanın.
  

Hazır Düzenin Hazırlanması

Başlamak için yeni bir sayfa oluşturun, bir başlık ekleyin ve ardından Visual Builder'ı dağıtın. Ardından “Önceden Hazırlanmış Bir Düzen Seçin” öğesini seçin. Kütüphaneden yükleme açılır penceresinden Fitness Salonu Açılış Sayfası düzenini seçin ve “Bu Düzeni Kullan”a tıklayın.

Düzen sayfaya yüklendikten sonra, sağ sütunda “Öne Çıkan Programlar” başlığına sahip iki sütun satırı ile dördüncü bölüme gidin. Bu satırın sol sütununa araç ipuçlarıyla birlikte arka plan resmimizi ekleyeceğiz.

Sağ sütundaki başlık metnini “Smart Fitness” olarak değiştirmek için satır içi düzenleyiciyi kullanın.

Arka Plan Resmini Ekleme ve Satır Ayarlarını Özelleştirme

Bu tasarımda, boyutlandırma ve aralık çok önemlidir ve kesin olması gerekir. Ve her şey arka plan resmimizin boyutuyla başlar. Daha önce de belirtildiği gibi arka plan için kullandığımız resim 320px x 507px olmalıdır. 320px genişlik mobil için iyi bir başlangıç ​​noktası olduğundan, bu, görselimizin boyutunu değiştirmek zorunda kalmadan tasarımı mobil uyumlu hale getirmemizi sağlayacaktır.

Satır ayarlarını açın ve arka plan resmini sütun 1'e ekleyin. Ardından aşağıdakileri güncelleyin:

Sütun 1 Arka Plan Resmi Boyutu: Gerçek Boyut
Sütun 1 Arka Plan Resmi Konumu: Orta Sol
Sütun 1 Arka Plan Resmi Tekrarı: Tekrar Yok

Ardından, satıra özel bir genişlik eklememiz ve üst ve alt boşlukları çıkarmamız gerekiyor.

Özel Genişlik: 700 piksel
Özel Dolgu: 0 piksel üst, 0 piksel alt

Genişliği 700 piksele ayarlamak, tablet kesme noktasından önce satırın daha küçük ekran boyutlarında küçülmemesini sağlar.

Bu noktada, 1. sütun için arka plan görüntüsünün yüksekliğine eşit belirli bir yükseklik ayarlamanın iyi bir fikir olduğunu düşünüyorum. Bu şekilde, sütunun içeriği görüntünün tamamını göstermiyorsa görüntünün görünür kalacağını biliyoruz. Bunu yapmak için gelişmiş sekmeye gidin ve Sütun 1 Ana Öğesine aşağıdaki özel CSS'yi ekleyin:

height: 507px;

Artık sütunun yüksekliği resminizin yüksekliğine eşittir ve satıra eklediğimiz içeriğe (veya modüllere) bağlı olmayacaktır.

Bulanıklıkları Kullanarak Arka Plan Resminin Üzerine Araç İpucu Etiketlerini Ekleme

Arka plan resmimiz yerindeyken, araç ipuçları olarak işlev görecek şekilde konumlandırılacak ve şekillendirilecek tanıtım yazılarımızı eklemeye başlayabiliriz. Devam edin ve sütun 1'e bir tanıtım yazısı modülü ekleyin ve aşağıdaki tanıtım yazısı ayarlarını güncelleyin:

Başlık: "Odaklanmak"
İçerik: “Başarının anahtarı!”
Simgeyi Kullan: Evet
Simge: ekran görüntüsüne bakın

Başlığı ve içeriği yalnızca birkaç kelimeyle tutmak önemlidir, çünkü tüm tanıtım metnini arka plan resminin içine sığdırmak istiyoruz.

Ardından, tasarım ayarlarını güncelleyeceksiniz. Bu, bir tanıtım yazısının daha gelişmiş bir tasarımıdır, bu nedenle, vurgulu tanıtım yazısının içeriğini ortaya çıkaracak birkaç vurgulu efektle birlikte değiştirilecek birçok seçenek vardır. Aşağıdaki tanıtıcı tasarım ayarlarını güncelleyin:

Simge Rengi: #edf000
Daire Simgesi: EVET
Daire Rengi: rgba(0,0,0,0)
Daire Kenarlığını Göster: EVET
Daire Kenarlığı Rengi (varsayılan): rgba(0,0,0,0)
Daire Kenarlığı Rengi (fareyle üzerine gelin): #edf000
Resim/Simge Yerleşimi: Sol
Simge Yazı Tipi Boyutunu Kullan: EVET
Simge Yazı Tipi Boyutu: 40px

Tasarım ayarlarını aşağıdaki gibi yapmaya devam edin:

Başlık Yazı Tipi Ağırlığı: Kalın
Başlık Metin Rengi (varsayılan): rgba(0,0,0,0)
Başlık Metin Rengi (varsayılan): #edf000
Gövde Metni Rengi (varsayılan): rgba(0,0,0,0)
Gövde Metni Rengi (varsayılan): #ffffff

(Varsayılan metin renklerinin, siz tanıtım yazısının üzerine gelene kadar onları gizlemek için tamamen şeffaf olduğuna dikkat edin.)

Özel Kenar Boşluğu: 15 piksel üst, 0 piksel alt, 90 piksel sol
Özel Dolgu: 5 piksel üst, 5 piksel alt, 5 piksel sağ

(Özel kenar boşluğu, tanıtım yazısı simgesini görüntünün üzerinde belirli bir konuma nasıl yerleştirdiğinizdir.)

Kutu Gölgesi: ekran görüntüsüne bakın
Kutu Gölgesi Yatay Konumu: -154px
Kutu Gölge Dikey Konumu: 0px
Gölge Rengi (varsayılan): rgba(0,0,0,0)
Gölge Rengi (fareyle üzerine gelme): #1e2441

(Kutu gölgesi, tanıtım yazısının içeriğinin arkasına bir arka plan rengi eklemenin yaratıcı bir yoludur. Varsayılan olarak, kutu gölgesi tamamen şeffaftır ancak üzerine gelindiğinde hoş bir mavi renk gösterecektir.)

Şimdi gidin ve vurgulu efektin ve tasarımın doğru olduğundan emin olmak için ilk tanıtımınızın nihai sonucunu kontrol edin.

Ardından, ikinci araç ipucu etiketimizi oluşturmak için tanıtıcı modülünü çoğaltabiliriz. Açıklama metnini çoğalttıktan sonra, içeriği istediğiniz metne güncelleyebilirsiniz (kısa tutun). Ardından yapmanız gereken tek şey, araç ipucunu aşağıdaki gibi farklı bir özel kenar boşluğu kullanarak konumlandırmaktır:

Özel kenar boşluğu: 0 piksel üst, 0 piksel alt, 15 piksel sol

Üçüncü tanıtıcı metni oluşturmak için ikinci tanıtıcı metni çoğaltabilirsiniz.

Bu üçüncü tanıtım yazısı için, görselimizin sağ tarafında yer kalmayacak, böylece içerik için gerçekten fazla yerimiz olmayacak. Tanımlamayı görüntünün dışına genişletmek için negatif kenar boşluğu kullanabiliriz, ancak bu aynı zamanda mobil cihazlarda 320 piksel ekran boyutunun ötesine geçer. Bu nedenle, tanıtıcı içeriğimizi döndürmek için birkaç küçük kod parçacığı tanıtacağız, böylece simge sağda ve metin solda olacak. Bunu yapmak için tanıtım yazısı ayarlarını açın ve Gelişmiş sekmesinin altına aşağıdaki özel CSS'yi ekleyin.

Ana Öğe CSS'si:

direction: rtl;

Bulanık Resim CSS'si:

padding-left: 15px;

Fark etmediyseniz, simge şimdi sağda. Şimdi yapmanız gereken tek şey, aşağıdaki özel kenar boşluğunu kullanarak tanıtım yazısını konumlandırmak:

Özel Kenar Boşluğu: 35 piksel üst, 0 piksel alt, 0 piksel sol

Ayrıca kutu gölgesini aşağıdaki gibi sağdan değil soldan gelecek şekilde ayarlamamız gerekiyor:

Kutu Gölgesi Yatay Konum: 150px

Şimdi canlı sitede tersine çevrilmiş araç ipucuna bakın.

Son tanıtım yazısı için, sütunun üstündeki ilk tanıtım yazısını kopyalayın ve üçüncü tanıtım yazısının altına yapıştırın.

Ardından, kenar boşluğunu aşağıdaki gibi güncelleyin:

Özel Kenar Boşluğu: 0 piksel üst, 100 piksel sol

Şimdi tasarımın nihai sonucunu kontrol edin!

Ve bu araç ipucu vurgulu efektlerine göz atın!

Duyarlı mı?

Bu tasarım, en başından beri mobil cihazlar düşünülerek inşa edilmiştir. Görüntü, çoğu küçük akıllı telefonun genişliği olan 320 piksel genişliğe sahiptir. Ve her şeyi piksel uzunluk birimleri kullanarak boyutlandırıp konumlandırdığımız için, tarayıcı boyutunu ayarlarken tasarım (araç ipuçları dahil) hareket etmiyor.

Ancak küçük telefon ekranlarında görüntünün genişliğini en üst düzeye çıkarmak için yapmanız gerekebilecek bir şey daha var. Varsayılan olarak, satırınız mobilde %80 genişliğe sahip olacaktır, bu nedenle bunu %100 yapmak için Satırınızın ana öğesine özel CSS olarak ekleyebilirsiniz:

width: 100%;

700 piksellik özel genişliğiniz masaüstünde maksimum genişlik olarak kullanılmaya devam edecek, ancak artık mobilde %100 olacak.

Son düşünceler

Bir arka plan resmini bunun gibi araç ipuçları ve fareyle üzerine gelme efektleriyle etiketlemek, hedef kitlenizi faydalı bilgilerle meşgul eden profesyonel bir tasarım unsuru ekleyebilir. Ve eminim ki bu konsepti diğer kullanım durumları için kullanmanın birden fazla yolu vardır. Ancak tasarımı mobilde de tutmayı planlıyorsanız, zorluklarla birlikte gelir. İşin püf noktası, önce mobil düşünmek ve ileriyi planlamaktır. Umarım bu, gelecekteki projeler için ilham kaynağı olur. Bir şey varsa, en azından bir simgeyle veya sağla nasıl bir tanıtım yazısı oluşturacağınızı biliyorsunuz :).

Aşağıdaki yorumlarda sizden haber bekliyorum.

Şerefe!