Divi modülünü kaplamak için opaklık, dolgu ve negatif marj nasıl kullanılır
Divi’nin en nadiren ve hafife alınan özelliklerinden biri kaydırıcı opaklığıdır. İnşaatçının birçok farklı yerinde bulabilirsiniz, tüm modüllerinizin ve öğelerinizin yakınlarındaki diğer kişilerle ilişkili olarak nasıl göründüğü konusunda bir dakika kontrolü sağlar. Ayrıca, divi opaklık özelliklerini, birbirleriyle yığılmış illüzyonun site öğelerinizi sağlamak için görüntülerde (PNG) şeffaflık ile birlikte birleştirebilirsiniz. En iyisi, somunları kurcalamak ve CSS cıvataları ve eksen-Z yüzmek zorunda kalmadan yapabilirsiniz. Bu öğreticide, bu öğeleri kendi web sitenize ayarlayabileceğiniz bazı oldukça düzgün parçalar veya modül kombinasyonlarında birleştirmek için Divi Builder’ın nasıl kullanılabileceğini göstermek istiyorum.
Aşağıdaki nihai sonuçlar, bu öğreticiden sonra neler başarabileceğinize dair bazı örneklerdir. Örnekler, diğer unsurlarla ve arka planlarla nasıl etkileşime girdiklerini göstermek için bölüme yerleştirilmiştir, ancak fonksiyonel siteler olarak değil.
Üst: 55px
Aşağıda: 255px Şimdi, derleyeceğiniz modüle öğeler eklemeye başlayabilirsiniz. İlk olarak, yeni bir çift sütun satırı ekleyin ve ayarları girin. Oradan, sağ ve özel kenar boşluğuna hizalamayı tasarım sekmesinin% 10’un altına ayarlayın. Tek sütun satırında yukarıdaki görüntü modülünü (yukarıdaki resimde A) ve aşağıdaki davet modülü (b) hareketleri ekleyin. Önce görüntü modülü ayarlarını girin ve tasarım sekmesinde bu değerleri değiştirin: Gölge Kutusu: Seçenek 2
Boyut, genişlik:% 60
Filtre, Karışık Mod: Geniş
Karışık mod filtreleri çok önemlidir, çünkü resmin altındaki herhangi bir unsurun (bu durumda CTA modülü) kaplanmasını ve resmin üstünde kalmasını sağlar. CSS şamandıra ve Z ekseninden bu şekilde kaçınırsınız. Filtre görünürlük ve renklendirmeye yardımcı olurken, negatif marjlar ve dolgu pozisyonu etkiler.
Ayarlar Metin modülü metin modülü ayarlarında, birçok şeyi ayarlayacaksınız. İçerik sekmesi: Ana başlık için istediğiniz başlık, trafiğinizi dönüştürmek için metin düğmesini doldurun ve içerik alanı, resmin üzerinde birikmek istediğiniz her şeyin bir kopyası olacaktır.
Arka plan: RGBA (57,37,145.0.43). Önemli kısım 0.43 veya en sağa kaydırıcıdır. Bu opaklığın yüzdesi veya arka planın kendisinden ne kadar görebileceğinizdir.
Tasarım sekmesinin altında, metin rengi hafif olmalı
Alan: CTA kutusunu resmin altından hareket ettirmek için% -30 en iyi marj ve% 30 sağ yapacaksınız. Şimdi kaplanmalıdırlar.
Boyut, genişlik:% 60
Kutu Gölgesi: İkinci Seçenek
Düğme: Özel bir stil kullanın, ardından metni Beyaz (#FFFFFF) ve düğmenin rengini, ikinci bölümümüzün arka planıyla aynı renkte olacak #8bd9d5 olarak ayarlayın. Bunu değiştirirseniz, bunu da değiştirin. Düğme sola bırakılacaktır.
Ve son olarak, rolünüzün ayarlarına dönecek ve alt bölücüyü ayarlayacaksınız. Açılır listenin en iyi seçimini seçecek, bölücüyü tersine çevirecek ve önümüzdeki bölüme uyacak şekilde rengi #8bd9d5 olarak ayarlayacaksınız. Kenar boşluğunu ayarladığınızda, bölücü ayarının “daha düşük içeriğe” ayarlandığından emin olun, böylece içeriğin bir sonraki kısmı da üzerinde görünür. Bundan sonra, CSS olmadan ilk çok seviyeli şeffaf genişliğinizle bitirdiniz! Mutlu! Farklı bir Z ekseni değeri ve diğer konumlandırma kodu kullanarak bunu uyumlu hale getirmiş gibi görünmelidir.
İlk iki parçayı yapın, ortayı tam olarak birincisi gibi hale getirin. Ancak, ayarlarda olduğunuzda, küçük bir arka planla oynarız. İlk sekmenin altındaki arka plan rengini #8bd9d5 olarak ayarlayın. Arka plan görüntüsünüzü üçüncü sekmenin altına ekleyin. Şeffaf bir arka plana sahip bir konunun basit bir görüntüsünü kullanın ve kapağı boyutunuz olarak kullanın.
Karışımınızın arka plan görüntüsünü renge uyacak şekilde seçin (paralaks kullanmayı seçerseniz, renk kombinasyonu çalışmaz).
Tasarım sekmesinin altında, alanın altındaki 60px üst dolgu bölümünü verin.
Satır 1 Şimdi, soldaki görüntü modülü ve sağda kaydırılmış bir çift sütun satırı eklemeniz gerekir. Eklendiğinde, satır ayarlarını girin.
Burada sadece iki değişikliğiniz var:% 38 opaklık ile siyah bir arka plan yapın ve daha önce olduğu gibi aynı kutudaki gölgeleri ekleyin. Mevcut köşe görüntüleri köşede yüzen görüntüleri ayarlama zamanıdır. Görüntü modülü ayarlarında görüntünüzü yükleyin. Bir kez daha, bu sadece efektler için şeffaf PNG ile en iyi şekilde çalışır. Görüntüyü açıyla kaplayacağız, böylece 90 derecelik bir açı dışındaki şekil çok daha iyi görünecektir. Bittiğinde tasarım sekmesi bekliyor. Görüntü Tesviye: Sol Her zaman hücresel görüntülere odaklanın: Evet (sadece çok daha iyi görünüyor ve kaplamayı koruyun) Üst kenar boşluğu:%-25, alt marj:%15, sol marj: -25%
Negatif marj, görüntüyü sayfada ihtiyacınız olan her yere almanıza olanak tanır ve bölücüyü içeriğin altına ayarladığınız için, üzerinde yüzer.
Kaydırıcı modülü için kaydırıcı modülü, bu biraz daha karmaşıktır, çünkü görüntüyle kendiniz ve benzerleri ile bireysel bir slayt eklemeniz gerekir. Bu çok kötü değil. Dikkat etmek istediğiniz en önemli şey, kaydırıcı ayarlarında mı yoksa tek tek slayt ayarlarında olup olmadığınızdır.
Genel kaydırıcı ayarında endişelendiğiniz ana öğe, tasarım sekmesi altında özel marjdır. %-30 olarak ayarlayın. Slayt görüntüsünüz her zaman bu şekilde satırın arka planının biraz üzerine çıkacak ve genellikle kaydırıcının genellikle aldığından daha fazla dikkat çekecektir.
Slayt ekleyin. İçerik sekmesi altında, düğmenin başlığı ve metni en önemlisidir. Açıklayıcı bir kopya istiyorsanız, bir içerik kutusu ile yapın. İçerik sekmesine slayt resimleri eklemeniz de gerekir. Burada da bir odak öğesinin şeffaf bir PNG’si olmak güzel. Yuvarlak görüntüler de burada iyi çalışıyor. Kare -Ened yerinde görülmemiştir. Slayt ayarlarının altında, her slaytın arka planını değiştirebilirsiniz. Yapma. Yapmak istediğiniz şey, opaklık kaydırıcısını%0 olarak ayarlamaktır. Başka bir şey sıranın arka planına karşı çatışacak.
Küçük harflere sahip olacak şekilde başlığın başlığını ayarlayın.
Düğmeyi de küçük harfe ayarlayın.
Bana sorarsanız, sonraki 2 satır oldukça havalı. Bazı farklı yer paylaşımı efektleri elde etmek için burada bir referans modülü, metin ve görüntüler kullanacağız. Modülleri sınırlarının ötesine genişletmek için dolgu ekleyeceğiz, başka bir resim çekip yeni bir dolgu üzerine koyacağız, böylece resim kenarda oturuyor gibi görünüyor.
Bu çizgi için gerçekten değiştirmeniz gereken tek ayar tasarım sekmesinin altındadır. “Bu çizginin genişliğini dolu” aktif hale getirdiğinden emin olun. Mesafe için bu tek seçenek tarafından yapılabilecek fark olağanüstü.
İki resim, benzer ayarlar Bu satırdaki iki görüntü çok benzer ayarlara sahiptir. Onların bindirme işlevini de yapacak kadar basittir.
Genişlik: Sol görüntü için% 85, doğru görüntü için% 100
Alan -160px alt ve -210px sol kenar boşluğu sol görünüm için ve sağ için varsayılan olarak bırakın
Her iki görüntü de sola ve her zaman cep telefonunun ortasında olmalıdır Sol görüntü için kesme noktası mesafesini ayarlamanız gerekir. Bunun için%-13’ün altında bir marj olacak. Sağda yapılması gereken bir değişiklik yoktur.Referans modülü referans modülünün birçok hareketli parçası vardır, ancak hiçbir şey gerçekten karmaşık değildir. Sadece her şeyi uyumlu hale getirmek için oynamanız gerekir. İsterseniz, bunun çoğunu bir metin modülü ile de yapabilirsiniz, ancak kişisel olarak referans tarzını seviyorum. Referansın kendisi içerik kutusuna girecektir.
Metin alanı altında, kararınıza bağlı olarak teklif simgesini etkinleştirebilir veya devre dışı bırakabilirsiniz. Bu metinle ortaya paraleldir.
Tasarım sekmesinde, modülün soluna% 60 dolgu eklersiniz. Marj değil. % 60 dolgu sessiz McCroft’un yukarıdaki resimde oturduğu yerdir.
Vücut metninin altında, bir kez daha küçük kapaklar kullanın ve isterseniz bir kutu gölgesi ekleyebilirsiniz. Yaptım, ben de yaptım. Bir karışım modu filtresi ile bu sefer “Light” kullanacaksınız. Referans arka plan şeffaflığı, Z elemanı eksenini gerçekten ayarlamadığımız gerçeğine dikkat çeker. Renginin karıştırılmasını önlemek için bir hafif filtre kullanırız, renkli olmak yerine yukarıda işlenen görüntünün yanılsamasını veririz.
Arka planın kendisi için, yalnızca arka plan rengi yerine gradyan sekmesini (ikinci) kullanırız. Gerekirse, arka planı eskisi gibi% 0 opaklık olarak ayarlayın. Değilse, sadece 155 derecelik gradyan yönüne sahip doğrusal bir gradyan kullanın, başlangıç konumu%8 ve son pozisyon%100’dür.
İlk renk%50 opaklıklı siyah (#000000) olmalı ve ikincisi%100 opaklık ile mor (#392591) olmalıdır.
Son metin modülü, sağda bir metin modülümüz var. İşletmeniz için tanıklıklar yerine, bunu üstün etkinliğin veya hatta ekip üyelerinin biyografisinin bir parçası olarak kullanmak istiyorum. Stil, referanslara çok benzer. Aynı gradyan arka plan rengini kullanır, böylece modül ayarlarına kopyalayabilir/ekleyebilirsiniz. Neredeyse bitmişsiniz! Metin alanını istediğiniz gibi doldurun. Adlar ve pozisyonlar gibi farklı başlıklar ve altyazılar vermek için H2 ve H3 etiketlerini kullandım. Sonra içerik alanında kısa bir açıklama yazdım.
Metin tasarımları için her şeyi parlak ve bir kez daha küçük kapaklar yapıyorum.
Modülün etrafındaki aynı kutunun gölgesi.
Aralık alanı her şeyin eğlenceli olduğu bir yerdir. Modülü görüntü yığınlarına paralel olarak yönlendiren -200 piksel üzerinde negatif bir marj istiyoruz. Bu metni okunamaz hale getirecektir. Bu nedenle, kelimeleri orijinal konumuna geri döndürmek için 200px dolgu eklememiz gerekirken, kaptan runnerpants ve farkındalık çubuk görüntülerinin arkasındaki gradyanın arka planını korur. Ayrıca sola ve sağa 45 piksel dolgu ve altta 15-25 piksel dolgu eklemeniz gerekir. Çeşitli ekran boyutlarında iyi ve sabit tutacaktır.
Son olarak, alt bölücüyü parçanın kendisine ekleyeceksiniz. Bu sefer, en iyi iki parçadan daha yumuşak duygularla kontrast olarak kalın bir siyah eğim ve jet siyah kısmının arka planı kullandım. Üçüncü ve son bölümün son kısmı konjenital bir şeffaflık kullanarak kaplamak istiyorum. Her zaman onunla istiflenmiş unsurlarla entegre olan arka planı seviyorum, bu yüzden bir kadının şeffaf arka planıyla fotoğraf çekiyorum ve üzerine divi temas formunu kaplamak istiyorum. Kelimenin tam anlamıyla, ayarlarda yaptığımız tek değişiklik ona siyah vermektir arka plan. Öyleyse önce bunu yap. O zaman tek bir sütun satırına ihtiyacınız var ve ayarlara dokunmanıza bile gerek yok. Rica ederim. Şimdi tek yapmanız gereken bir görüntü modülü ve bir iletişim formu modülü eklemek. Bittiğinde görüntü ayarlarını açın. Burada yalnızca bir seçeneği değiştireceksiniz: daha düşük marj.
Masaüstü: -350px
Tablet: -100px
Akıllı telefon: -50px
İşte burada. Onları sıralamak için çok fazla ayarlamaya bile gerek yok. Leydi temas formlarının hazırlanması kolaydır. Ve iletişim formu ayarları için? Hiçbir şey yapmana gerek yok. Bu örnek yalnızca varsayılan stili kullanır. Düzene eklendiğinde şeffaf olduğu için, PNG’nin arka planı doğrudan kaynaşmıştır. Ancak, iletişim formunda çok iyi bir görsel değişiklik istiyorsanız, tasarım sekmesini girin ve karışım filtresi modunu “ekran” olarak değiştirin. Bunu yapmak, firmada alanı biraz yarı saydam hale getirecektir, böylece arkasındaki resimden hafif bir gölge görürsünüz. Bu, site ziyaretçilerini gülümseten bir tür etkidir. Bu mikro etkileşim değildir, ancak aynı etkiye sahiptir.
