Arka plan görüntüsünü divi’de çekici bir araç ipucu ile nasıl etiketleyebilirim
Arka Plan Görüntü etiketine araç ipuçları ekleyin, ziyaretçileri ürün veya hizmetiniz hakkında değerli bilgiler içeren yaratıcı bir yoldur. Temel fikir, resimde belirli bir konumun belirli bir simgesini (veya metnini) konumlandırmaktır (noktalı bir Google haritası gibi). Hover Divi efektinden yararlanırsanız, imleci çekici araç ipucuları yapmak için simgeye yönlendirirken ek metinleri ortaya çıkarabilirsiniz. Bu öğreticide, arka plan görüntüsünü ürününüz hakkında bilgilendirici bir araç ipucu olarak işlev görecek bir açıklama ile nasıl etiketleyeceğinizi göstereceğim. Bunu yapmak için, kalite fitness hakkında bilgi ile arka plan görüntülerini etiketlemek için fitness spor salonu açılış sayfasını kullanacağım.
Başlayalım. Aşağıdaki gizlice bir göz atma, bu öğreticide yapacağımız tasarımdan gizlice bir zirve.
Divi teması
Fitness Gym Fitness Spor Salonu Düzeni Paketi (Divi Builder’dan temin edilebilir) Sayfa
Arka plan görüntüsünüz için kullanılacak görüntü tam olarak 320px kez 507px. Bunu masaüstünüze sürüklemek ve bu öğretici için kullanmaktan çekinmeyin. Başlangıçta önceden hazırlayın, yeni bir sayfa oluşturun, başlığı ekleyin ve ardından görsel oluşturucuyu yayın. Ardından “Önceden Yapılmış Bir Düzen Seçin” seçeneğini seçin. Kütüphaneden yük açılır penceresinden Fitness Gym Fitness sayfasının düzeni seçin ve “Bu Düzeni Kullan” ı tıklayın. Düzen sayfaya yüklendikten sonra, sağ sütunda “Özel Program” başlığı olan iki sıra sütunla dördüncü bölüme gidin. Arka plan görüntülerimizi bu satırın sol sütununa araç ipuçlarıyla ekleyeceğiz. Sağ sütundaki başlığın başlığını “Akıllı Fitness” olarak değiştirmek için satır düzenleyicisini kullanın. Arka plan görüntüleri ekleyin ve satır ayarlarını bu tasarımla ayarlayın, boyut ve mesafe çok önemlidir ve kesin olmalıdır. Ve her şey arka plan görüntüsümüzün boyutu ile başlar. Daha önce de belirtildiği gibi, arka plan için kullandığımız görüntü 320px kat 507px olmalıdır. 320px genişliği hücresel için iyi bir başlangıç noktası olduğundan, bu, görüntümüzün boyutunu değiştirmek zorunda kalmadan hücresel dostu bir tasarım oluşturmamızı sağlayacaktır. Satır ayarlarını açın ve arka plan resimleri sütun 1’e ekleyin. Ardından aşağıdakileri güncelleyin: Sütun 1 Arka Plan Görüntü Boyutu: Sütun 1 Arka Plan Görüntü Pozisyonunun Gerçek Boyutu: Sol Orta Tekrar Sütun Görüntü 1: Tekrar yok
Sonra satıra özel bir genişlik eklememiz ve üst ve alt mesafeyi almamız gerekir. Özel Genişlik: 700px Özel Dolgu: 0px üst, 0px alt çadır genişliği 700px ila 700 piksel, tabletin durma noktasından önce satırın daha küçük ekran boyutlarında daha küçük olmamasını sağlayacaktır. Bu noktada, Sütun 1 için arka plan görüntüsünün yüksekliği ile aynı şekilde devam etmek ve belirli bir yüksekliği ayarlamak iyi bir fikir olduğunu düşünüyorum. Bu şekilde, sütunun içeriği tüm görüntüyü açığa çıkarmazsa görüntünün hala görüleceğini biliyoruz. Bunu yapmak için devam eden sekmeyi açın ve Sütun 1’in ana öğesine aşağıdaki özel CSS ekleyin: Yükseklik: 507px;
Şimdi sütunun yüksekliği görüntü yüksekliğinizle aynıdır ve hatta eklediğimiz içeriğe (veya modüle) bağlı olmaz. Arka plan görüntüsünün üzerine araç ipucu etiketi ekleme Arka plan görüntüsümüz olan bir bulanıklık kullanarak, araç ipucuları olarak işlev görecek şekilde konumlandırılacak ve düzenlenecek açıklamamızı eklemeye başlayabiliriz. Açıklama modülünü Sütun 1’e ekleyin ve aşağıdaki açıklama ayarlarını güncelleyin: Başlık: “Odak” İçindekiler: “Anahtar Başarı!” Simgeler kullanın: evet simgesi: Sadece birkaç kelimenin başlığını ve içeriğini korumak için önemli bir ekran görüntüsü görün, çünkü tüm açıklamayı arka plan görüntüsüne yükleyebiliyoruz. Ardından, tasarım ayarlarını güncelleyeceksiniz. Bu daha sofistike bir bulanıklık tasarımıdır, bu nedenle gelişim sırasında bulanıklık içeriğini ortaya çıkaracak çeşitli havada etkilerle birlikte değiştirilecek birçok seçenek vardır. Güncelleme Tasarım Ayarları Aşağıdaki açıklama: Icon Rengi: #EDF000 Daire Icon: Evet Daire Renk: RGBA (0,0,0,0) Bir daire limitini gösterin: evet dairenin rengi (varsayılan): RGBA (0.0.0,, 0) Daire Sınır Rengi (İmleci Nokta): #EDF000 Yerleştirme/Ikon: Sol Simge Yazı Tipi Boyutunu Kullan: Evet Simge Yazı Tipi Boyutu: 40 PX
Tasarım ayarlarını aşağıdaki gibi ayarlamaya devam edin: Ağır yazı tipinin başlığı: Metin Kalınlığı Rengi Başlık (Varsayılan): RGBA (0,0,0,0) Renkli Metin Başlığı (Varsayılan): #EDF000 Gövde Metin Renk (Varsayılan): RGBA (0.0.0,0) Renkli Metin Body (varsayılan): #ffffff (imleci açıklamaya yönlendirene kadar varsayılan metin renginin gizlemek için gerçekten şeffaf olduğunu unutmayın.) Özel kenar: 15px üst, 0px alt, 90px sol dolgu özel: 5px üst, 5px alt, 5px sağ (Özel kenar, açıklama simgesini resmin üstünde belirli bir konuma yerleştirme şeklidir.) Gölge kutusu: Yatay ekran yakalama gölgesi bkz. Kutu Gölgesi: -154px Dikey Konum Gölge Kutusu: 0px Gölge Renk (Varsayılan): RGBA (0,0,0,0) Gölge Renk (nokta İmleç): #1E2441 (Kutu Gölgesi, içeriklerin arkasına arka plan renkleri eklemenin yaratıcı bir yoludur Varsayılan, kutunun gölgesi gerçekten şeffaftır, ancak imleci işaret ederken iyi bir mavi renk gösterecektir.)
Şimdi gidip gelme ve tasarım efektlerinin doğru olduğundan emin olmak için ilk açıklamanızın nihai sonuçlarını kontrol edin.
Ayrıca, ikinci etiket araç ipucumuzu oluşturmak için açıklama modülünü çoğaltabiliriz. Açıklamayı çoğalttıktan sonra, içeriği istediğiniz metne (kısa) güncelleyebilirsiniz. Yani yapmanız gereken, araç ipucunu aşağıdaki gibi farklı bir marj kullanarak konumlandırmaktır:
Özel kenar: 0px üst, 0px aşağıda, 15px kaldı
Ayrıca, kutunun gölgesini soldan çıkacak şekilde ayarlamamız gerekiyor: Kutunun gölgesinin yatay konumu: 150px Şimdi doğrudan sitedeki ters araç ipucunu doğrudan kontrol edin.
Son açıklama için, sütunun üst kısmındaki ilk açıklamayı kopyalayın ve üçüncü açıklamanın altına yapıştırın. Ardından marjı aşağıdaki gibi güncelleyin: Özel kenar: 0px üst, 100 piksel kaldı Şimdi tasarımın nihai sonucuna bakın! Ve Hover araç ipucu efektine bakın! Duyarlı olan nedir? Bu tasarım, en başından beri mobile göz önünde bulundurularak inşa edilmiştir. Görüntü, çoğu küçük akıllı telefonun genişliği olan 320px genişliğine sahiptir. Ve her şeyi piksel uzunluğu birimini kullanarak ölçtüğümüz ve konumlandırdığımız için, tarayıcının boyutunu ayarladığımızda tasarım (araç ipuçları dahil) hareket etmiyor.
Ancak, küçük bir cep telefonu ekranında görüntünün genişliğini sağlamak ve en üst düzeye çıkarmak için yapmanız gereken bir şey daha var. Varsayılan olarak, hattınızın hücreselde%80 genişliğine sahip olacaktır, bu nedenle%100 yapmak için, hatınızın ana unsurlarına özel bir CSS olarak ekleyebilirsiniz: genişlik:%100;
