Hiç bir ürün kartı oluşturmayı sunmak istediniz mi? Elementor ?
Bu eğitimde size göstereceğimiz şey budur. Bugün ne hakkında konuşacağımız hakkında oldukça kesin bir fikir edinmek için sizi aşağıdaki videoyu izlemeye davet ediyoruz:
Bu eğitim, ayakkabı olan ürünleri bedenlerini, renklerini ve her birinin satın al düğmesini vurgulayarak sunmakla ilgilidir. Kartların her birinin üzerine geldiğinizde, bu bilgi görünecektir. İşte yapacaklarımızın kısa bir özeti.
Bu öğreticiyi takip etmek için sizi ayakkabı resimlerini bulmaya ve Elementor'un Pro sürümü. Henüz sahip değilseniz, almak için bu bağlantıya tıklayın.
Ama gelelim ne için burada olduğumuza.
Bir sayfa oluşturalım ve ile değiştirelim Elementor.
Bunda 3 sütunlu bir yapı seçelim. halledelim yükseklik uzeri minimum yükseklik , VH'deki minimum yükseklik ve imleci 100
Stil sekmesinde, arka plan rengini seçin. #130640
Orta sütuna bir Resim widget'ı kitaplığınızdan bir ayakkabı resmi seçerek.
Stil sekmesine gidin ve görüntü özelliğinde genişliği 80 olarak ayarlayın
sonra sürükleyin Başlık widget'ı ve başlığı girin Nike ayakkabı - Bu bir örnek, tamamen başka bir marka olabilir -
Ayrıca okuyun: Elementor ile Web Sitenizin Düzenini Nasıl Optimize Edebilirsiniz?
HTML Etiketini H3'e ayarlayın ve hizalamayı ortalayın
Stil sekmesine gidin ve metin rengini beyaz renge değiştirin
Tipografiyi de değiştirin
sonra sürükleyin İç Bölüm widget'ı altında Başlık widget'ı yukarıda eklediğiniz
Varsayılan olarak bu widget size 2 sütun sunacaktır, bunlardan birini silin. Bunda İç Bölüm widget'ı, Ekle Başlık widget'ı.
başlık olarak ver Kesmek : ve HTML Etiketini Açıklık.
Stil sekmesinde Başlık rengini, Boyut'u 15 ve Yağ'ı 300 olarak değiştirin.
Gelişmiş sekmesinde, yalnızca Sağ kenar boşluğunu 5 olarak ayarlayın ve özellikte konumlandırma seçmek Satır içi (Otomatik).
Aynı İç Bölüme, Metin 8 için bir Düğme widget'ı ve 0'da simge aralığı ekleyin.
Ayrıca Oku: Elementor ile uzun bir portföy görüntüsü nasıl kaydırılır
Stil sekmesinde, düğmenin metin rengini ve arka plan rengini sırasıyla Siyah ve Beyaz olarak değiştirin ve Dahili Kenar Boşluğu'nda Dahili Üst-Sağ-Alt kenar boşlukları -Sol için sırasıyla 6-10-6-10 girin.
Gelişmiş sekmesinde yalnızca sol kenar boşluğunu 5'e ayarlayın ve Konumlandırma özelliğinde Satır İçi (Otomatik) öğesini seçin.
Bu düğmeyi 3 kez çoğaltın ve son 3 düğmenin metnini 9,10,11 olarak değiştirin - bunu S, M, L, XL, XXL harflerini kullanarak da yapabilirsiniz-
Düzenleme bölümünü tıklayın ve Yatay Hizalamayı Merkez olarak ayarlayın
Sonra bu Dahili bölümü -İç Bölüm- çoğaltın ve Renge Göre Boyutlandır'ı değiştirin 3 düğmeyi kaldırın ve kalanlarda düğme metnini silin.
Sekmede içindekiler Düğmenin simgesini seçin, simge kitaplığından Daire simgesini seçin, düğmeye eklemek için Ekle'yi tıklayın.
Stil sekmesinde, tipografiye 24 boyutu verin ve İç kenar boşluklarını bağlayın ve 0 girin. Arka plan renginde şeffaflığı min olarak ayarlayın ve ardından örneğin metnin rengini mavi olarak değiştirebilirsiniz.
Ardından bu düğmeyi 3 kez çoğaltın ve diğer ikisinin renklerini sarı ve kırmızı olarak değiştirin. Ardından düzenlemek için iç bölüme tıklayın ve Gelişmiş sekmesinde Üst ve Alt kenar boşluklarını -5 ve 10 olarak ayarlayın.
Şimdi ikinci İç Bölüm Widget'ının altına bir Düğme widget'ı ekleyeceğiz, metin olarak girin Achetez Bakım ve Merkeze Hizalama. Stil sekmesinde düğmeyi Beyaz ve düğme metnini Siyah olarak ayarlayın, ardından tüm kenarlık yarıçaplarını 20'ye ayarlayın.
Üzerinde çalıştığımız ana sütunu seçin ve hizalamayı ayarlayın Dikey uzeri Çevre, Stil sekmesinde Arka Plan türünü şu şekilde seçin: bozulmuş ve Tip olarak seçin Radyal sonra ana renkte şeffaflığı ve konumu ayarlayın 94. İkinci renk için konumu 77 ve kenarların yarıçapı 10'un üzerindedir.
Gelişmiş sekmesinde, kenar boşluklarını 0-35-0-35 ve iç kenar boşluklarını 50-20-50-20 olarak ayarlayın.
Ardından, çalışmanızın nasıl göründüğünü görmek için paneli gizleyebilirsiniz. Kartınızın çok güzel olduğunu göreceksiniz ama belli bölümleri canlandırarak onu hayata geçireceğiz. Bunun için Boyut, Renk ve satın al butonunu canlandıracağız.
Ayrıca bakınız: Elementor'da sayfa kaydırmada başlık nasıl değiştirilir?
İlk olarak ürünün boyutunu gösteren ilk Dahili bölümü keselim ve Gelişmiş sekmesinde tanımlayın. Yukarı Fade Hareket Etkisi olarak - Giriş Animasyonu ve animasyon gecikmesi açık 300.
Aynı işlemi renkleri gösteren iç kısım için de animasyon gecikmesi 800 olacak şekilde yapalım. Satın al butonu için gecikmesi 1000 olacaktır.
Şimdi sınıfı atayacağız önce saklan İç Bölüm ve Satın Al Düğmesi. İlk İç Bölümü seçin, Gelişmiş sekmesinde ve Gelişmiş özelliğinde CSS Sınıfları alanına önce gizle yazın. Diğer İç Bölüm ve satın al düğmesi için de aynısını yapın.
Bu nedenle, tüm sütunu canlandıracak CSS kodunu ekleyeceğiz. Aşağıdaki kodu kopyalayın:
seçici {
yüksekliği: 400px;
ekran: esnek;
}
/ * Göster / Gizle için CSS * /
seçici .hide-first {
display: none;
}
seçici: üzerine gelin .hide-first {
Ekran bloğu;
}
/ * Görüntü Dönüşümü * /
seçici görüntü {
geçiş: kolaylık .5s;
}
seçici: fareyle üzerine gelin {
dönüştür: çevir (-20 piksel, -40 piksel) döndür (-25 derece) ölçek (1.4);
}
/ * Mobil genel bakış * /
@media (maksimum genişlik: 767 piksel) {
seçici: fareyle üzerine gelin {
dönüştür: çevir (-20 piksel, 0 piksel) döndür (-10deg) ölçek (1);
}
seçici {
kenar boşluğu: 50 piksel 10 piksel;
}
}
Değiştirilecek sütunu seçin ve Gelişmiş sekmesine gidin ve Özel CSS alanına bu kodu yapıştırın.
Not: Bu seçeneğin yalnızca Pro sürümüne sahipseniz kullanılabileceğini bilmelisiniz.Elementor.
Bu yapılırsa, varsayılan olarak boyutları, renkleri ve satın al düğmesini gizlerken haritanız fareyle üzerine gelindiğinde canlandırılır.
Kodun açıklaması ile ilgili olarak, yorum bölümü bir genel bakış sunar. Ancak değerleri değiştirerek her talimatın ne için olduğunu anlayacaksınız.
Ayrıca bakınız: Aynı sütunda yan yana iki düğme nasıl eklenir Elementor ile
Her şey normal çalışıyorsa, bu sütunu iki kez çoğaltın ve diğer boş sütunları silin.
Tek yapmanız gereken diğer blokların resimlerini ve başlıklarını değiştirmek ve son olarak çalışmanızın önizlemesini yapmak.
Az önce güzel bir ürün kartı oluşturdunuz.
Elementor Pro'yu Hemen Alın!
Sonuç
Böyle ! Elementor ile nasıl ürün kartı yapılacağını gösteren bu eğitim için bu kadar. Oraya nasıl gideceğinizle ilgili herhangi bir endişeniz varsa, bize bildirin. Yorumlar.
Ancak, ayrıca kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
