Divi’deki parçanın arka planına kaydırmak için animasyon simgeleri nasıl eklenir
Kaydırma animasyonlarını simgelerle birleştirmek, web sitesi tasarımınızı benzersiz bir şekilde geliştirebilir. Bu öğreticide, Divi’nin arka planına kaydırmak için animasyonlu simgelerin nasıl ekleneceğini keşfedeceğiz. Divi’de mevcut olan ve birçok doğuştan gelen animasyon efekti ile seçim yapabileceğiniz yüzlerce simge ile, tasarımımızı tamamen yeni bir seviyeye getirmek için sayısız arka plan animasyonu yapabileceğinizi göstereceğiz. Başlayalım! Aşağıdaki gizlice göz atma, bu öğreticide yapacağımız tasarımın bir bakış. Ve bu, bazı ayarlamalarla neler yapılabileceğini gösteren bir bonus tasarımıdır.
Bu öğreticiden bir tasarım almak için düzeni ücretsiz indirin, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmelere erişmek için, aşağıdaki formu kullanarak Divi Daily E -posta listemize abone olmanız gerekir. Yeni bir müşteri olarak, her Pazartesi daha fazla Divi’nin iyi ve ücretsiz Divi düzen paketleri alacaksınız! Zaten listede iseniz, e -posta adresinizi aşağıya girin ve İndir’i tıklayın. “Abone olmayacak” veya ek e -postalar almayacaksınız.
Dosyayı indir
Divi bültenine katılmak için ücretsiz indirin ve en iyi divi düzen paketinin kopyasına bir e -posta göndereceğiz, ayrıca birçok kaynak, ipucu ve olağanüstü ve ücretsiz divi hileleri. Birlikte takip edin ve kısa sürede bir divi ustası olacaksınız. Abone olduysanız, e -posta adresinizi aşağıya yazın ve Düzen Paketine erişmek için İndir’i tıklayın.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve bölümün düzenini Divi kütüphanenize aktarmak için Divi kütüphanesine gidin. İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacın var Başlamak için aşağıdakileri yapmanız gerekir: Değilse, divi temasını yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
“Başından Uyan” seçeneğini seçin.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak.
Divi Anahtar Konseptindeki parçanın arka planına kaydırmak için animasyonlu simgeler nasıl eklenir. Bölümün arka planına 4 ana parçayı içeren bir kaydırma animasyonu simgesi ekleme işlemi kısaca açıklanmaktadır. 1: İlk tam ekran tuvalini yapın, parçaları, satırları ve sütunları ayarlayarak tam ekran tuval yapmamız gerekir, böylece her biri geniş ve yüksek bir tam tarayıcıyı kapsar. Bu bize simgelerle doldurmamız gereken engeller olmadan bir tür yaratıcı alan verecektir.
2: Geçerli simgeyi ekleyip konumlandırarak, animasyonlu simgenin arka plan tasarımını oluşturmak için stratejik simgeyi tam ekran tuvaline (veya sütuna) yerleştirebiliriz. 3: Icon yerine animaiton kaydırma ekleyin, her simgeye bir kaydırma dönüşümü efekti (veya animasyon) ekleyebiliriz. 4: İçerik ekle Ön plana ekleyin Arka plan tasarımı bir kaydırma animasyonu simgesi ile bitirildikten sonra, ihtiyacımız olan içeriği pencereye ön satırlara ekleyebiliriz. Bölüm 1: Tam ekran tuval yapın (Parçalar, Satırlar ve Sütunlar Hazırlayın) Normal bölüme bir satır sütunu ekleyerek başlayalım. Bölüm Ayarlama Bölüm ayarlarını açın ve arka plan rengini aşağıdaki gibi ekleyin: Arka plan rengi: #000 Tasarım sekmesi altında, parçanın görünüm planının tam yüksekliğine ulaşmasını sağlamak için minimum 100VH yükseklik ekleyin.
Min yüksekliği: 100vh (masaüstü), 600 piksel (tablet ve cep telefonu) Bir sonraki satır ayarları, satır ayarlarını açın ve boyutlarını da görünümün/görünüm alanının genişliğini ve yüksekliğini içerecek şekilde güncelleyin.
Özel Talang genişliği kullanın: evet Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Yükseklik:% 100
Dolgu: 0px üst, 0px aşağıda
Devam sekmesinin altında, mutlak bir konum satırı verin.
Pozisyon: Mutlak Parçalarımızdan ve satırlarımızın mevcut olan mevcut sütun sütunu, parça/görünüm alanının tam ve tam yüksekliğini kapsayacak şekilde minimum% 100 yüksekliğe sahip bir sütun sağlamak önemlidir.
Bu noktada, temelde sütunu bir simge ile doldurmamıza izin veren tam bir ekran tuvali yaptık. Bölüm 2: İkonları sütundaki yap ve konumlandırın Şimdi simgeleri sütunlarla yapmaya ve konumlandırmaya başlamaya hazırız. Fikir, animasyonlu simgemizin bir arka plan tasarımını oluşturmak için bu tam ekran sütununa stratejik olarak bir simge yerleştirmektir. Yapma ve Konumlandırma Simgesi 1 İlk ikonumuzu yaparak başlayacağız ve ardından bir Divi Builder kullanarak konumlandıracağız. Simge modülünü sütuna ekleyin. Simge ayarını açın ve simgeden simgeyi seçin. Tasarım sekmesinin altında, simgenin rengini ve boyutunu aşağıdaki gibi güncelleyin: Ikon Color: #fff Ikon Boyutu: 3VW (masaüstü), 40px (tablet), 30px (cep telefonu) Gelişmiş sekmesi altında, konumu güncelleyin ve aşağıdaki gibi dengeleyin:
Pozisyon: Mutlak
Konum: sol alt Dikey ofset:% 10
Yatay ofset:% 10
Not: Buradaki uzun yüzde ünitesinin alt ve sol CSS özelliklerine göre olduğunu unutmayın. Bu durumda,%10 dikey ofset CSS’de “aşağıda%10” a eşdeğerdir ve “sol:%10” a eşdeğer yatay ofset. Sütunumuz tam bir ekran olduğundan, tarayıcının yüksekliğini ve genişliğini ayarlarken simge duyarlı kalacaktır. Başka bir deyişle, farklı ekran boyutlarında konumlarını koruyacaklardır.
İkinci bir simge yapmak için simgeyi yap ve konumlandırın, mevcut simgeleri çoğaltın. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin:
Dikey ofset:% 30
Yatay ofset:% 40 Üçüncü bir simge yapmak için Icon 3’ü yapın ve konumlandırın, önceki simgeleri çoğaltın. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin:
Dikey ofset:% 20
Yatay ofset:% 30 Dördüncü simgeyi yapmak için 4 simgesini yap ve konumlandırın, önceki simgeleri kopyalayın. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin:
Dikey ofset:% 70
Yatay ofset:% 40
Yatay ofset:% 60
Yedinci bir simge yapmak için Icon 7’yi yapın ve konumlandırın, önceki simgeleri çoğaltın. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin: Dikey ofset:% 28
Yatay ofset:% 70
Sekizinci, yinelenen simgeyi daha önce yapmak için simge 8 yapmak ve konumlandırma. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin: Dikey ofset:% 50
Yatay ofset:% 80
Dokuzuncu ve son simgeleri yapmak için 9. simgeyi yapmak ve konumlandırma, önceki simgeleri kopyalayın. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin: Dikey ofset:% 15
Yatay ofset:% 90
Bölüm 3: Simge stratejik olarak konumlandıktan sonra simgeye animasyonlu kaydırma ekleyin, her simgeye animasyonlu kaydırma eklemeye hazırız. Bir simgeyi çok takas Bu örnek için, dokuz simgeye aynı kaydırma animasyonunu ekleyeceğiz. Ancak, isterseniz her birine ayrı ayrı benzersiz kaydırma animasyonları sağlamayı seçebilirsiniz. Tüm simgelere aynı anda animasyonlu kaydırma eklemek için, sütundaki tüm simgeleri seçmek için çoklu seçilmiş (bir simge modülü seçerken CTRL veya CMD’yi basılı tutun) kullanın. Ardından seçilen modüllerden birinin ayarlarını açın.
Bu, unsurların sermaye düzenlemesini gündeme getirecektir. Gelişmiş sekmesinin altında, kaydırma seçenek grubu anahtarını açın. Orada kaydırma dönüşümünün etkisini göreceksiniz. Mevcut altı etkinin hepsini (dikey hareketler, yatay hareketler, soluk içeri ve dışarı, aşağı ve aşağı ölçeklendirme, dönme ve bulanıklık) ekleyeceğiz. Dikey Hareket Kaydırma Dönüşümünün Etkisi Ekleme Dikey hareket sekmesinin seçildiğinden ve güncellendiğinden emin olun: Dikey Hareketi Etkinleştir: Evet
İlk ofset: 2 (%0) Son ofset: -2 (%100) Tablet ekranı için ofset’i şu şekilde güncelleyin: İlk ofset: 1 (%0)
Son ofset: -1 (%100)
Mobil görüntüleme için ofset’i şu şekilde güncelleyin:
İlk ofset: 0.5 (%0)
Son ofset: -0.5 (%100)
Sonraki Yatay Hareket, aşağıdaki Yatay Hareket sekmesini ve güncellemesini seçin:
Yatay hareketleri etkinleştirin: evet
İlk ofset: -1 (%0)
Son ofset: 1 (%100)
Tablet ekranı için ofset’i şu şekilde güncelleyin: İlk ofset: 0 (%0)
Son ofset: 0 (%100)
Solun ve sonra çıkın, solma giriş ve çıkış sekmesini seçin ve aşağıdakileri güncelleyin:
Solmayı etkinleştirin ve çıkış: Evet
Orta Opaklık:% 50 (% 50)
Sonraki üst ve alt serpin, ölçeklendirme yukarı ve aşağı sekmesini seçin ve aşağıdakileri güncelleyin:
Yukarı ve aşağı ölçeklendirmeyi etkinleştirin: evet Başlangıç Ölçeği:% 0 (% 0)
Orta ölçek:% 50 (% 50)
İleri Döndürme, Dönen sekmesini seçin ve aşağıdakileri güncelleyin: Dönüşü Etkinleştir: Evet
Rotasyon Başlangıç:% 0 (% 0)
Orta -Rotation:% 90 (% 50)
Nihai rotasyon:% 180 (% 100) Sonraki, Blur sekmesini seçin ve bulanıklık etkisini etkinleştirin:
Bulanıklık Etkinleştir: Evet
Aşağıdaki önizleme, hareket halindeki animasyon simgesinin bir görünümüdür. Bölüm 4: İçerik Ekle Ön plana şimdi arka planımız için bir kaydırma animasyonlu simgemiz var, görüntülemek istediğimiz içeriği ön hatlara eklemeye hazırız. Fikir, satırı (sütunlar ve simgelerle) arka planın önünde göstermek istediğimiz her bir ek satırın arkasında tutmaktır. Bu örnekte, basit bir başlıklı bir satır bir sütun ekleyeceğiz. İlk olarak, doğrudan mevcut satırın altına yeni bir sütun satırı ekleyin.
Mevcut çizgi mutlak bir konuma sahiptir, böylece diğer satır eklemek, hattı beklendiği gibi parçanın üstüne yerleştirir. Yeni satırda metin modülünü ekleyin.
Metin ayarlarını açın ve içerik içeriğine aşağıdaki HTML’yi ekleyin: & h1 & gt; divi & lt;/h1 & gt; Tasarım sekmesi altında, başlık metin stilini aşağıdaki gibi güncelleyin:
Yazı Tip Başlığı: Poppins Hizalama Metin Başlığı: Orta Başlık Metin Boyutu: 8VW (masaüstü), 40px (tablet ve cep telefonu) Satırın (ve başlık) bölümün ortasına yerleştirilmesini sağlamak için satırın konumu, satır ayarlarını açın ve konumu aşağıdaki gibi güncelleyin: Pozisyon: Mutlak Konum: Merkez
Son dokunuş: Arka plan görüntüsü ve taşma tasarımı tamamlamak, bölümün ayarlarını açmak ve arka plan görüntüsünü ekleyin. Bu örnek için, ev yapımı istihbarat düzeni paketlerimizden görüntüler kullanıyorum.
Devam sekmesi altında, görünürlük seçeneğini güncelleyerek taşmanın gizlendiğinden emin olun:
Yatay taşma: gizli Dikey taşma: gizli
Bu, simge dışarıda belirtildiğinde dikey kaydırma çubuğunun görünmemesini sağlayacaktır.
Abone olmayı başardınız. Aboneliğinizi onaylamak için lütfen e -posta adresinizi kontrol edin ve bölümün düzenini Divi kütüphanenize aktarmak için Divi kütüphanesine gidin. İçe Aktar düğmesini tıklayın. Taşınabilirlik açılır penceresinde, İçe Aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin. Ardından İçe Aktar düğmesini tıklayın.
Bittiğinde, parçanın düzeni Divi Builder’da mevcut olacak. Doğrudan öğreticiye mi gidiyorsunuz? Başlamak için neye ihtiyacın var Başlamak için aşağıdakileri yapmanız gerekir: Değilse, divi temasını yükleyin ve etkinleştirin.
WordPress’te yeni bir sayfa oluşturun ve ön taraftaki sayfaları düzenlemek için Divi Builder’ı kullanın (görsel yapımcı).
“Başından Uyan” seçeneğini seçin.
Bundan sonra, Divi’de tasarım yapmaya başlamak için boş bir tuvaliniz olacak.
Divi Anahtar Konseptindeki parçanın arka planına kaydırmak için animasyonlu simgeler nasıl eklenir. Bölümün arka planına 4 ana parçayı içeren bir kaydırma animasyonu simgesi ekleme işlemi kısaca açıklanmaktadır. 1: İlk tam ekran tuvalini yapın, parçaları, satırları ve sütunları ayarlayarak tam ekran tuval yapmamız gerekir, böylece her biri geniş ve yüksek bir tam tarayıcıyı kapsar. Bu bize simgelerle doldurmamız gereken engeller olmadan bir tür yaratıcı alan verecektir.
2: Geçerli simgeyi ekleyip konumlandırarak, animasyonlu simgenin arka plan tasarımını oluşturmak için stratejik simgeyi tam ekran tuvaline (veya sütuna) yerleştirebiliriz. 3: Icon yerine animaiton kaydırma ekleyin, her simgeye bir kaydırma dönüşümü efekti (veya animasyon) ekleyebiliriz. 4: İçerik ekle Ön plana ekleyin Arka plan tasarımı bir kaydırma animasyonu simgesi ile bitirildikten sonra, ihtiyacımız olan içeriği pencereye ön satırlara ekleyebiliriz. Bölüm 1: Tam ekran tuval yapın (Parçalar, Satırlar ve Sütunlar Hazırlayın) Normal bölüme bir satır sütunu ekleyerek başlayalım. Bölüm Ayarlama Bölüm ayarlarını açın ve arka plan rengini aşağıdaki gibi ekleyin: Arka plan rengi: #000 Tasarım sekmesi altında, parçanın görünüm planının tam yüksekliğine ulaşmasını sağlamak için minimum 100VH yükseklik ekleyin.
Min yüksekliği: 100vh (masaüstü), 600 piksel (tablet ve cep telefonu) Bir sonraki satır ayarları, satır ayarlarını açın ve boyutlarını da görünümün/görünüm alanının genişliğini ve yüksekliğini içerecek şekilde güncelleyin.
Özel Talang genişliği kullanın: evet Talang genişliği: 1
Genişlik:% 100
Maksimum genişlik:% 100
Yükseklik:% 100
Dolgu: 0px üst, 0px aşağıda
Devam sekmesinin altında, mutlak bir konum satırı verin.
Pozisyon: Mutlak Parçalarımızdan ve satırlarımızın mevcut olan mevcut sütun sütunu, parça/görünüm alanının tam ve tam yüksekliğini kapsayacak şekilde minimum% 100 yüksekliğe sahip bir sütun sağlamak önemlidir.
Bu noktada, temelde sütunu bir simge ile doldurmamıza izin veren tam bir ekran tuvali yaptık. Bölüm 2: İkonları sütundaki yap ve konumlandırın Şimdi simgeleri sütunlarla yapmaya ve konumlandırmaya başlamaya hazırız. Fikir, animasyonlu simgemizin bir arka plan tasarımını oluşturmak için bu tam ekran sütununa stratejik olarak bir simge yerleştirmektir. Yapma ve Konumlandırma Simgesi 1 İlk ikonumuzu yaparak başlayacağız ve ardından bir Divi Builder kullanarak konumlandıracağız. Simge modülünü sütuna ekleyin. Simge ayarını açın ve simgeden simgeyi seçin. Tasarım sekmesinin altında, simgenin rengini ve boyutunu aşağıdaki gibi güncelleyin: Ikon Color: #fff Ikon Boyutu: 3VW (masaüstü), 40px (tablet), 30px (cep telefonu) Gelişmiş sekmesi altında, konumu güncelleyin ve aşağıdaki gibi dengeleyin:
Pozisyon: Mutlak
Konum: sol alt Dikey ofset:% 10
Yatay ofset:% 10
Not: Buradaki uzun yüzde ünitesinin alt ve sol CSS özelliklerine göre olduğunu unutmayın. Bu durumda,%10 dikey ofset CSS’de “aşağıda%10” a eşdeğerdir ve “sol:%10” a eşdeğer yatay ofset. Sütunumuz tam bir ekran olduğundan, tarayıcının yüksekliğini ve genişliğini ayarlarken simge duyarlı kalacaktır. Başka bir deyişle, farklı ekran boyutlarında konumlarını koruyacaklardır.
İkinci bir simge yapmak için simgeyi yap ve konumlandırın, mevcut simgeleri çoğaltın. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin:
Dikey ofset:% 30
Yatay ofset:% 40 Üçüncü bir simge yapmak için Icon 3’ü yapın ve konumlandırın, önceki simgeleri çoğaltın. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin:
Dikey ofset:% 20
Yatay ofset:% 30 Dördüncü simgeyi yapmak için 4 simgesini yap ve konumlandırın, önceki simgeleri kopyalayın. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin:
Dikey ofset:% 70
Yatay ofset:% 40
Beşinci simgeyi yapmak için Icon 5 yap ve konumlandırın, önceki simgeleri çoğaltın. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin: Dikey ofset:% 60
Yatay ofset:% 50
Yapma ve Konumlandırma Simgesi 6 Altıncı Simgeler yapmak için, önceki yinelenen simgeler. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin:
Yatay ofset:% 60
Yedinci bir simge yapmak için Icon 7’yi yapın ve konumlandırın, önceki simgeleri çoğaltın. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin: Dikey ofset:% 28
Yatay ofset:% 70
Sekizinci, yinelenen simgeyi daha önce yapmak için simge 8 yapmak ve konumlandırma. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin: Dikey ofset:% 50
Yatay ofset:% 80
Dokuzuncu ve son simgeleri yapmak için 9. simgeyi yapmak ve konumlandırma, önceki simgeleri kopyalayın. Ardından, yinelenen simge ayarlarını açın ve konum ayarlarını aşağıdaki gibi güncelleyin: Dikey ofset:% 15
Yatay ofset:% 90
Bölüm 3: Simge stratejik olarak konumlandıktan sonra simgeye animasyonlu kaydırma ekleyin, her simgeye animasyonlu kaydırma eklemeye hazırız. Bir simgeyi çok takas Bu örnek için, dokuz simgeye aynı kaydırma animasyonunu ekleyeceğiz. Ancak, isterseniz her birine ayrı ayrı benzersiz kaydırma animasyonları sağlamayı seçebilirsiniz. Tüm simgelere aynı anda animasyonlu kaydırma eklemek için, sütundaki tüm simgeleri seçmek için çoklu seçilmiş (bir simge modülü seçerken CTRL veya CMD’yi basılı tutun) kullanın. Ardından seçilen modüllerden birinin ayarlarını açın.
Bu, unsurların sermaye düzenlemesini gündeme getirecektir. Gelişmiş sekmesinin altında, kaydırma seçenek grubu anahtarını açın. Orada kaydırma dönüşümünün etkisini göreceksiniz. Mevcut altı etkinin hepsini (dikey hareketler, yatay hareketler, soluk içeri ve dışarı, aşağı ve aşağı ölçeklendirme, dönme ve bulanıklık) ekleyeceğiz. Dikey Hareket Kaydırma Dönüşümünün Etkisi Ekleme Dikey hareket sekmesinin seçildiğinden ve güncellendiğinden emin olun: Dikey Hareketi Etkinleştir: Evet
İlk ofset: 2 (%0) Son ofset: -2 (%100) Tablet ekranı için ofset’i şu şekilde güncelleyin: İlk ofset: 1 (%0)
Son ofset: -1 (%100)
Mobil görüntüleme için ofset’i şu şekilde güncelleyin:
İlk ofset: 0.5 (%0)
Son ofset: -0.5 (%100)
Sonraki Yatay Hareket, aşağıdaki Yatay Hareket sekmesini ve güncellemesini seçin:
Yatay hareketleri etkinleştirin: evet
İlk ofset: -1 (%0)
Son ofset: 1 (%100)
Tablet ekranı için ofset’i şu şekilde güncelleyin: İlk ofset: 0 (%0)
Son ofset: 0 (%100)
Solun ve sonra çıkın, solma giriş ve çıkış sekmesini seçin ve aşağıdakileri güncelleyin:
Solmayı etkinleştirin ve çıkış: Evet
Orta Opaklık:% 50 (% 50)
Sonraki üst ve alt serpin, ölçeklendirme yukarı ve aşağı sekmesini seçin ve aşağıdakileri güncelleyin:
Yukarı ve aşağı ölçeklendirmeyi etkinleştirin: evet Başlangıç Ölçeği:% 0 (% 0)
Orta ölçek:% 50 (% 50)
İleri Döndürme, Dönen sekmesini seçin ve aşağıdakileri güncelleyin: Dönüşü Etkinleştir: Evet
Rotasyon Başlangıç:% 0 (% 0)
Orta -Rotation:% 90 (% 50)
Nihai rotasyon:% 180 (% 100) Sonraki, Blur sekmesini seçin ve bulanıklık etkisini etkinleştirin:
Bulanıklık Etkinleştir: Evet
Aşağıdaki önizleme, hareket halindeki animasyon simgesinin bir görünümüdür. Bölüm 4: İçerik Ekle Ön plana şimdi arka planımız için bir kaydırma animasyonlu simgemiz var, görüntülemek istediğimiz içeriği ön hatlara eklemeye hazırız. Fikir, satırı (sütunlar ve simgelerle) arka planın önünde göstermek istediğimiz her bir ek satırın arkasında tutmaktır. Bu örnekte, basit bir başlıklı bir satır bir sütun ekleyeceğiz. İlk olarak, doğrudan mevcut satırın altına yeni bir sütun satırı ekleyin.
Mevcut çizgi mutlak bir konuma sahiptir, böylece diğer satır eklemek, hattı beklendiği gibi parçanın üstüne yerleştirir. Yeni satırda metin modülünü ekleyin.
Metin ayarlarını açın ve içerik içeriğine aşağıdaki HTML’yi ekleyin: & h1 & gt; divi & lt;/h1 & gt; Tasarım sekmesi altında, başlık metin stilini aşağıdaki gibi güncelleyin:
Yazı Tip Başlığı: Poppins Hizalama Metin Başlığı: Orta Başlık Metin Boyutu: 8VW (masaüstü), 40px (tablet ve cep telefonu) Satırın (ve başlık) bölümün ortasına yerleştirilmesini sağlamak için satırın konumu, satır ayarlarını açın ve konumu aşağıdaki gibi güncelleyin: Pozisyon: Mutlak Konum: Merkez
Son dokunuş: Arka plan görüntüsü ve taşma tasarımı tamamlamak, bölümün ayarlarını açmak ve arka plan görüntüsünü ekleyin. Bu örnek için, ev yapımı istihbarat düzeni paketlerimizden görüntüler kullanıyorum.
Devam sekmesi altında, görünürlük seçeneğini güncelleyerek taşmanın gizlendiğinden emin olun:
Yatay taşma: gizli Dikey taşma: gizli
Bu, simge dışarıda belirtildiğinde dikey kaydırma çubuğunun görünmemesini sağlayacaktır.
