hayatınıza başka bir boyut kazandırmak ister misiniz? web sitesi arka plan maskesi ile Divi Yapışkan?
yapışkan seçenekleri Divi web siteleriniz için tonlarca farklı tasarım oluşturmanıza olanak tanır. Bugünün öğreticisi, yapabileceğiniz şeylerin listesini ekler. Umarım bu, yaratıcılığınızı ateşlemenize yardımcı olur.
Yapışkan bir arka plan maskesinin nasıl oluşturulacağını göstereceğiz.
Bu eğitim, yapışkan seçeneklerini birleştirir Divi filtre karıştırma modları ile.
anket
Bu öğreticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.
ofis
Telefon
Divi'de bir tasarım oluşturun
Yeni bölüm ekle
Arka plan resmi
Üzerinde çalıştığınız sayfaya yeni bir bölüm ekleyerek başlayın.
- Seçtiğiniz bir arka plan resmini yükleyin.
- Arka Plan Resmi Boyutu : Kapak
aralık
Bölüm Tasarımı sekmesine geçin ve aşağıdaki varsayılan boşluk ayarlarını kaldırın:
- Dolgu (Üst ve Alt): 0 piksel
taşmalar
Ardından sekmedeki bölümün taşmalarını gizleyin gelişmiş.
- Yatay Taşma: Gizli
- Dikey Taşma: Gizli
1. satırı ekle
Sütunun yapısı
Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:
boyutlandırma
Herhangi bir modül eklemeden hat ayarlarını açın ve boyutlandırma ayarlarını buna göre değiştirin:
- Genişlik: %100
- Maksimum Genişlik: %100
aralık
Ayrıca tüm varsayılan kenar boşluklarını kaldırın.
- Dolgu (Üst ve Alt): 0 piksel
Filtres
Bu satıra bir de harmanlama modu ekliyoruz. Bu karıştırma modu, eğitimde daha sonra bir maske oluşturmamıza yardımcı olacaktır.
- Karışım Modu: Ekran
Z-endeksi
Bu satırın bölüme ekleyeceğimiz ikinci satırın altında kalması için sekmedeki z-index'i değiştiriyoruz. gelişmiş.
- Z İndeksi: 9
Sütun parametreleri
Ardından, sütun ayarlarını açacağız.
Arka plan rengi
Tamamen beyaz bir arka plan rengi kullanıyoruz.
- Arka Plan Rengi: #ffffff
CSS ana elemanı
Ayrıca sekmedeki ana öğeye bir yükseklik değeri ekliyoruz gelişmiş.
height: 100vh;
Satıra bir "Metin" modülü ekleyin
İçerik alanını boş bırakın
Satır ayarlarıyla işiniz bittiğinde, sütununa bir Metin modülü ekleyin.
Alanı terk et içindekiler boş. Bunun yerine bu modülü, bölümün arka plan görüntüsünün bir kısmını ortaya çıkaran bir şekil oluşturmak için kullanırız.
Arka plan rengi
Bu modül için daha koyu bir arka plan rengi kullanacağız.
- Arka Plan Rengi: #0b3835
boyutlandırma
Sonra sekmeye erişeceğiz Dizayn ve boyutlandırma parametrelerini aşağıdaki gibi değiştirin:
- Genişlik:
- Masaüstü: 20vw
- Tablet ve Telefon: 70 vw
- Yükseklik:
- Masaüstü: 30vh
- Tablet ve Telefon: 10vh
aralık
Üst kenar boşluğu da ekliyoruz.
- Marj (Üst): 3vh
Sınır
Ve yuvarlatılmış köşeleri dahil edeceğiz.
- Yuvarlatılmış Köşeler: 15px
2. satırı ekle
Sütunun yapısı
Aşağıdaki sütun yapısını kullanarak bölüme başka bir satır ekleyerek devam edin:
boyutlandırma
Hat ayarlarını açın ve seçeneklerde aşağıdaki değişiklikleri yapın Boyutlandırma takip etme:
- Genişlik: %100
- Maksimum Genişlik: %100
Z-endeksi
Ayrıca satırın z indeksini de artırın. Bu, aşağıdakilerin sağlanmasına yardımcı olacaktır: içindekiler satırın değeri önceki satırın üzerinde kalır.
- Z indeksi: 12
Satıra bir "Metin" modülü ekleyin
H2 içeriği ekle
Aşağıdakileri içeren ilk Metin modülünden başlayarak modül ekleme zamanı geldi: içindekiler H2 sizin seçiminiz.
H2 metin ayarları
H2 metin ayarlarını aşağıdaki gibi özelleştirin:
- Yazı Tipi: Playfair Ekranı
- Metin Hizalama: Ortalanmış
- Metin Rengi: #0b3835
- Boyut :
- Masaüstü: 150 piksel
- Tablet ve Telefon: 45px
- Satır Yüksekliği: 1,2 em
boyutlandırma
Ardından, boyutlandırma ayarlarına gidin ve aşağıdaki ayarları uygulayın:
- Maksimum Genişlik: 980 piksel
- Hizalama Modülü: Merkez
aralık
Ayrıca negatif bir üst kenar boşluğu ekleyin.
Satıra bir "Düğme" modülü ekleyin
Düğmeye içerik ekle
Bu satırda ihtiyacımız olan sonraki ve son modül bir Düğme modülüdür. Seçtiğiniz içeriği ekleyin.
Düğme hizalama
Sekmeye geç Dizayn modülün ve düğmenin hizalamasını değiştirin.
- Düğme Hizalama: Merkez
Düğme ayarları
Ardından, düğme ayarlarına gidin ve aşağıdaki stilleri uygulayın:
- Düğme için özel stiller kullanın: Evet
- Düğme metin boyutu: 15 piksel
- Düğme metin rengi: #ffffff
- Düğme arka plan rengi: #000000
- Düğme kenarlık genişliği: 0 piksel
- Düğme Sınır Yarıçapı: 100 piksel
- Düğme Yazı Tipi: Montserrat
- Düğme Yazı Ağırlığı: Yarı Kalın
- Yazı Tipi Stili: TT
aralık
Ayrıca boşluk ayarlarına özel kenar boşluğu ve dolgu değerleri de ekliyoruz.
- Kenar Boşluğu (Alt): 60vh
- Dolgu (Üst ve Alt): 15 piksel
- Dolgu (Sol ve Sağ): 40 piksel
Yapışkan efektler uygula
1. satırı aç
Tasarımımızın temelini oluşturduğumuza göre, şimdi yapışkan stilleri uygulama zamanı. İlk satır ayarlarını açın.
Yapışkan seçenekleri uygula
Sekmeye git gelişmiş ve aşağıdaki kalıcı ayarları uygulayın:
- Yapışkan Konum: Yukarıya Yapış
- Alt Yapışkan Limit: Bölüm
- Çevreleyen Yapışkan Elemanlardan Ofset: VAR
- Geçiş Varsayılanı ve Yapışkan Stiller: VAR
Metin Modülü Yapışkan Seçenekleri
Artık satır Yapışkan olduğundan, satır içindeki Metin modülüne stiller uygulayabiliriz. Modül ayarlarını açın.
Yapışkan Boyut
Ardından, boyutlandırma ayarlarına gidin ve aşağıdaki boyutlandırma değerlerini uygulayın:
- Genişlik (Yapışkan): 80 vw
- Yükseklik (Yapışkan): 90vh
Geçiş süresi
Son olarak, sekmeye gidin gelişmiş ve geçiş süresini artırın.
- Geçiş Süresi: 500ms
anket
Artık tüm adımları attığımıza göre, farklı ekran boyutlarında sonuca son bir göz atalım.
ofis
DIVI'yı Şimdi İndirin !!!
Telefon
DIVI'yı Şimdi İndirin !!!
Sonuç
Bu yazıda, Divi'nin yapışkan seçenekleriyle nasıl yaratıcı olabileceğinizi bir kez daha gösterdik.
Spesifik olarak, Divi'nin filtre ayarlarını ve yapışkan seçeneklerini nasıl birleştireceğinizi gösterdik.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz 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ş.
...
