Opaklık, Doldurma ve Negatif Kenar Boşlukları Divi Modüllerini Katmanlamak İçin Nasıl Kullanılır

Divi'nin en az kullanılan ve az kullanılan özelliklerinden biri opaklık kaydırıcısıdır. Bunu, oluşturucuda birçok farklı yerde bulabilir ve tüm modüllerinizin ve öğelerinin yanlarındaki diğerlerine göre tam olarak nasıl göründüğü üzerinde tam olarak kontrol sahibi olabilirsiniz. Divi'nin opaklık özelliklerinin yanı sıra görüntülerdeki (PNG'ler) saydamlığı da birleştirerek sitenizin öğelerine üst üste yığılmış gibi bir izlenim verebilirsiniz. Hepsinden iyisi, CSS şamandıra ve z ekseninin somun ve cıvatalarıyla uğraşmak zorunda kalmadan yapabilirsiniz.

Bu öğreticide, Divi Builder'ın bu öğeleri kendi web sitenize uyarlayabileceğiniz oldukça düzgün bölümler veya modül kombinasyonları halinde birleştirmek için nasıl kullanılabileceğini göstermek istiyorum.

Son Sonucun Önizlemesi

İşte bu eğitimden sonra neler başarabileceğinize dair bazı örnekler. Örnekler, işlevsel bir site olarak değil, diğer öğeler ve arka planlarla nasıl etkileşime girdiklerini göstermek için bölümler halinde düzenlenmiştir.

İlk Bölümü Oluşturma

WordPress kontrol panelinizde yeni bir sayfa oluşturarak ve Boş Sayfa şablonunu seçerek başlayın. Mavi vitese basarak Bölüm Ayarları'nı açmanız gerekecek.

Ardından Arka Plan sekmesine tıklayın ve arka plan resmi eklemek için üçüncü sekmeyi seçin. Seçiminizi yükleyin ve Kapatılacak Arka Plan Resmi Boyutuna sahip olduğunuzdan emin olun.

Bundan sonra, Tasarım sekmesinin Aralık bölümünde Özel Dolguyu şu şekilde değiştireceksiniz:

• Üst: 55 piksel
• Alt: 255 piksel

Artık, yığınlayacağınız modüllerin öğelerini eklemeye başlayabilirsiniz. İlk önce, yeni bir çift sütunlu satır ekleyin ve ayarlara gidin. Buradan, Tasarım sekmesi altında Hizalama'yı Sağa ve Özel Kenar Boşluğu'nu %10'a ayarlayın.

Tek sütunlu satırın içine, üstüne bir Görüntü modülü (yukarıdaki resimde A) ve altına bir Eylem Çağrısı modülü (B) ekleyin. Önce Görüntü modülünün ayarlarına gidin ve Tasarım sekmesinde bu değerleri değiştirin:

• Kutu Gölgesi: Seçenek 2
• Boyutlandırma, Genişlik: 60%
• Filtreler, Karışım Modu: Yer Paylaşımı

Karışım modu filtresi inanılmaz derecede önemlidir, çünkü görüntünün altındaki herhangi bir öğenin (bu durumda CTA modülü) üst üste binmesini ve görüntünün üzerinde kalmasını bu şekilde sağlarsınız. Float ve z ekseni CSS'sinden bu şekilde kaçınıyorsunuz. Filtre, görünürlük ve renklendirmeye yardımcı olurken, negatif kenar boşlukları ve dolgu, konumlandırmayı etkiler.

Metin Modülü Ayarları

Metin modülü ayarlarında birçok şeyi ayarlayacaksınız.

1. İçerik sekmesi: Bir başlık için istediğiniz herhangi bir başlığı, trafiğinizi dönüştürmek için düğme metnini doldurun ve içerik alanı, görüntünün üzerine bindirilmesini istediğiniz herhangi bir kopya olacaktır.
2. Arka plan: rgba(57.37,145,0.43). Önemli kısım 0.43 veya en sağdaki kaydırıcıdır. Bu, opaklık yüzdesi veya arka planda ne kadar görebileceğinizdir.
3. Tasarım sekmesi altında, metin rengi Açık olmalıdır
4. Aralık: CTA kutusunu resmin altından taşımak için -%30 Üst kenar boşluğu ve %30 sağ kenar boşluğu yapacaksınız. Şimdi üst üste bindirilmelidirler.
5. Boyutlandırma, Genişlik: 60%
6. Kutu gölgesi: ikinci seçenek
7. Düğme: Özel stil kullanın, ardından metni beyaza (#ffffff) ve düğme kenar rengini #8BD9D5 olarak ayarlayın, bu da ikinci bölümümüzün arka planıyla aynı renk olacaktır. Yani bunu değiştiriyorsanız, bunu da değiştirin.
8. Düğme hizalaması sola doğru olmalıdır.

Son olarak, Bölüm ayarlarınıza geri dönecek ve bir alt ayırıcı ayarlayacaksınız. Açılır menüden (eğimli) en iyi seçeneği seçecek, ayırıcıyı ters çevirecek ve gelecek bölümle eşleşmesi için rengi #8BD9D5 olarak ayarlayacaksınız. Bölücü Düzenlemesinin "Bölüm İçeriğinin Altında" olarak ayarlandığından emin olun, böylece siz onların kenar boşluklarını ayarlarken bir sonraki bölümünüzün içeriği de onun üzerinde görünür. Bu bir kez yerleştirildiğinde, CSS'siz ilk çok seviyeli şeffaf kaplamanızla işiniz bitti! Tebrikler! Bunları farklı z ekseni değerleri ve diğer konumlandırma kodları kullanarak hizalamış gibi görünmelisiniz.

İkinci Bölüm Oluşturma

İlk olarak, orta bölümü oluşturmak tam olarak birincisi gibidir. Yine de ayarlardayken arka planla biraz oynuyoruz.

• İlk sekmenin altındaki arka plan rengini #8BD9D5 olarak ayarlayın.
• Arka plan resminizi üçüncü sekmenin altına ekleyin. Saydam bir arka plana sahip tek bir nesnenin basit bir görüntüsünü kullanın ve boyutunuz olarak Kapak'ı kullanın.
• Renkleri eşleştirmek için Arka Plan Görüntüsü Karışımınız olarak Parlaklık'ı seçin (paralaks kullanmayı seçtiyseniz, renk karışımı çalışmaz).
• Tasarım sekmesi altında, Aralık altında 60px Üst Dolgu bölümünü verin.

1. sıra

Şimdi, solda bir görüntü modülü ve sağda kaydırıcı bulunan çift sütunlu bir satır eklemeniz gerekecek. Bunlar eklendiğinde, Satır Ayarlarına gidin.

Burada yalnızca iki değişikliğiniz var: arka planı %38 opaklıkla siyah yapın ve öncekiyle aynı kutu gölgesini ekleyin.

Köşe Resmi

Şimdi köşede yüzen görüntüyü kurmanın zamanı geldi. Resim modülünün ayarları içinde resminizi yükleyin. Yine, bu, yalnızca efekt için şeffaf bir PNG ile en iyi şekilde çalışır. Görüntüyü köşeye bindireceğiz, bu nedenle 90 derecelik açı dışındaki bir şekil çok daha iyi bir görünüm olacaktır. Bu yapıldıktan sonra Tasarım sekmesi sizi bekliyor.

1. Görüntü Hizalama: Sol
2. Görüntüyü Mobil Cihazda Her Zaman Ortala: Evet (çok daha iyi görünüyor ve üst katmanı koruyor)
3. Üst Marj: -%25, Alt Marj: %15, Sol Marj: -%25

Bu negatif kenar boşlukları, o görüntüyü sayfada ihtiyacınız olan her yerde almanızı sağlar ve ayırıcıyı içeriğin altında olacak şekilde ayarladığınızdan, bunun da üzerinde kayar.

Kaydırıcı Modülü

Slider Modülü için bu biraz daha zor çünkü kendi görüntüleri ve benzerleri ile ayrı slaytlar eklemeniz gerekiyor. Yine de o kadar da kötü değil. Eğer dikkat etmek isteyeceksiniz ana şey Slider ayarları veya bireysel Slide ayarlarına geldikten olup olmadığıdır.

Genel Kaydırıcı ayarlarında endişelendiğiniz birincil öğe, Tasarım sekmesinin altındaki Özel Kenar Boşluğu'dur. -%30'a ayarlayın. Slayt resimleriniz bu şekilde her zaman satırın arka planının biraz yukarısına doğru itilir ve bunlara genellikle kaydırıcılardan daha fazla dikkat çekilir.

1. Slayt ekleyin. İçerik sekmesi altında, başlık ve düğme metni çok önemlidir. Açıklayıcı bir kopya istiyorsanız, bunu içerik kutusuyla yapın.
2. İçerik sekmesine de bir Slayt resmi eklemeniz gerekir. Burada da tek bir odak öğesinin şeffaf PNG'si olmak iyidir. Yuvarlak görüntüler burada da işe yarar. Kare kenarlı olanlar yerinde görünmüyor.
3. Slayt ayarları altında, her bir slaytın arka planını değiştirebilirsiniz. Yapma. Yapmak istediğiniz, opaklık kaydırıcısını %0'a düşürmek. Diğer her şey satırın arka planıyla çatışacaktır.
4. Başlık metnini küçük büyük harf olacak şekilde ayarlayın.
5. Düğmeyi de küçük büyük harflere ayarlayın.

2. sıra

Bana sorarsan bir sonraki sıra oldukça havalı. Burada birkaç farklı bindirme efekti elde etmek için metin ve resimlerin yanı sıra bir Referans modülünü kullanacağız. Bir modülü sınırlarının ötesine genişletmek için dolgu ekleyeceğiz, başka bir resim çekerken ve onu yeni dolgunun üzerine yerleştirip figürün kenarda oturuyormuş gibi görünmesini sağlayacağız.

Bu satır için gerçekten değiştirmeniz gereken tek ayar Tasarım sekmesinin altındadır. "Bu Satırı Tam Genişlikte Yap" geçişinin açık olduğundan emin olun. Bu tek seçeneğin boşluk için yaratabileceği fark şaşırtıcı.

İki Resim, Benzer Ayarlar

Bu satırdaki iki resim çok benzer ayarlara sahip. Bindirmeleri de çalıştırmak için oldukça basitler.

1. Genişlik: Soldaki resim için %85, sağdaki resim için %100
2. Soldaki resim için -160px Alt ve -210px Sol Kenar Boşlukları ve sağ için varsayılan olarak bırakın
3. Her iki resim de sola hizalanmalı ve her zaman mobilde ortalanmalıdır.
4. Soldaki görüntü için kesme noktası aralığını ayarlamanız gerekecektir. Bunun için, %-13'lük bir alt marj olacaktır. Doğru olanda herhangi bir değişiklik yapılması gerekmeyecektir.

Referans Modülü

Testimonial modülünde çok sayıda hareketli parça bulunur, ancak bunların hiçbiri gerçekten zor değildir. Her şeyi hizalamak için onunla oynamak zorundasın. İsterseniz, bunun çoğunu metin modülüyle de yapabilirsiniz, ancak kişisel olarak referansın stilini seviyorum.

1. Referans yazarının adını ve bilgilerini doldurun. Referansın kendisi içerik kutusuna gidecek.
2. Metin alanının altında, kararlarınıza bağlı olarak alıntı simgesini açıp kapatabilirsiniz. Metinle ortalanarak hizalanır.
3. Tasarım sekmesinde, modülün soluna %60 Dolgu ekliyorsunuz. Marj değil . Bu %60 Dolgu , Silent McCroft'un yukarıdaki resimde oturduğu yerdir.
4. Gövde Metni altında, tekrar Küçük Büyük Harfler ile gidin ve isterseniz bir Kutu Gölgesi ekleyebilirsiniz. Ben de öyle yaptım.
5. Blend Mode Filter ile bu sefer “Lighten” kullanacaksınız. Referansın arka planının şeffaflığı, öğelerin z eksenini gerçekten ayarlamadığımıza dikkat çekiyor. Renklerin birbirine karışmasını önlemek için Açıklaştır filtresini kullanırız ve görüntünün yeniden renklendirilmek yerine üstte işlendiği yanılsamasını veririz.
6. Arka planın kendisi için, arka plan rengi yerine yalnızca degrade sekmesini (ikincisi) kullanıyoruz. Gerekirse, arka planı eskisi gibi %0 opaklığa ayarlayın. Aksi takdirde, sadece 155 derece Gradyan Yönü, %8 Başlangıç ​​Konumu ve %100 Bitiş Konumu olan bir Doğrusal Gradyan kullanın.
7. İlk renk %50 opaklıkla Siyah (#000000) ve ikincisi %100 opaklıkla Mor (#392591) olmalıdır.

Metin Modülü

Son olarak, sağda metin modülümüz var. İşletmeniz için bir referans yerine, belki de bunu öne çıkan bir etkinlik bölümü veya hatta bir ekip üyesi biyografisi olarak kullanmak istedim. Şekillendirme, referansa çok benzer. Aynı degrade arka plan renklerini kullanır, böylece bunları modül ayarlarına kopyalayıp yapıştırabilirsiniz. Neredeyse tamamladınız!

1. Metin alanını istediğiniz gibi doldurun. İsim ve konum gibi farklı başlıklar ve alt başlıklar vermek için H2 ve H3 etiketlerini kullandım. Ardından içerik alanına hızlı bir açıklama yazdım.
2. Metnin tasarımı için hepsini Açık renkli ve bir kez daha Küçük Büyük Harfler yaptım.
3. Aynı kutu gölgesi modülün etrafında döner.
4. Boşluk alanı, işlerin eğlenceli hale geldiği yerdir. Modülü yığıldığı görüntüyle aynı hizaya getiren -200 pikselin üzerinde negatif bir kenar boşluğu istiyoruz. Bu, metni okunaksız hale getirecektir. Biz de bir 200px Geciktirme eklemek Kaptan Runnerpants ve onun Dikkatlilik Stick görüntüsünün ardındaki degrade arka plan tutarken kelimeler, orijinal pozisyonda geri koymak gerekir Yani. Ayrıca Sol ve Sağa 45px dolgunun yanı sıra altta 15-25px dolgu eklemelisiniz. Bu, onu birden fazla ekran boyutunda güzel ve kararlı tutacaktır.

Son olarak, bölümün kendisine bir alt ayırıcı ekleyeceksiniz. Bu sefer, en üstteki iki bölümün daha yumuşak hissine zıt olarak, düz siyah bir eğim ve düz bir siyah bölüm arka planı ile gittim.

Son Bölüm

Üçüncü ve son bölüm, yerleşik asetatları kullanarak katmanlamak istedim. Üst üste yığılmış öğelerle birleşen arka planları her zaman sevmişimdir, bu yüzden şeffaf bir kadın arka planıyla bir resim çektim ve üzerine Divi iletişim formunu bindirmek istedim.

Kelimenin tam anlamıyla, bölüm ayarlarında yaptığımız tek değişiklik, ona siyah bir arka plan vermek. O yüzden önce bunu yap. O zaman tek sütunlu bir satıra ihtiyacınız var ve ayarlara dokunmanıza bile gerek yok. Rica ederim. Şimdi tek yapmanız gereken bir Resim modülü ve bir İletişim Formu modülü eklemek. Bunu yaptığınızda, Görüntü ayarlarını açın. Burada sadece tek bir seçeneği değiştireceksiniz: alt kenar boşluğu.

• Masaüstü: -350 piksel
• Tablet: -100 piksel
• Akıllı telefon: -50 piksel

Bu kadar. Onları sıraya sokmak için çok fazla ince ayar yapmaya bile gerek yok. İletişim Formunun Hanımı'nın kurulumu kolaydır. Ve İletişim Formu ayarlarına gelince? Bir şey yapmak gerekmez. Bu örnekte yalnızca varsayılan stil kullanılmıştır. Düzene eklendiğinde şeffaf olduğu için PNG arka planı hemen karışır.

Ancak, iletişim formuna çok ince bir görsel geçiş yapmak istiyorsanız, Tasarım sekmesine gidin ve Karışım Modu Filtresini "Ekran" olarak değiştirin. Bunu yapmak, firmadaki alanları çok hafif yarı saydam hale getirecek, böylece arkasındaki görüntünün soluk bir hayaletini göreceksiniz. Bunlar site ziyaretçilerini gülümseten efekt türleridir. Tam bir mikro etkileşim değil, ama aynı türden bir etkiye sahip.

Biraz temiz, ha?

İşte bu ve hepsi bu!

Umarım, hepiniz bunun benim kadar eğlenceli olduğunu düşünmüşsünüzdür. CSS olmadan bindirmeler ve çok katmanlı tasarımlar gibi harika şeyler yapabilmek çok havalı. Bu nedenle, tasarımlarınızı renklendirmenin bir yolunu arıyorsanız, şeffaf şeyler yapmayı düşünün. Negatif kenar boşlukları olan görselleri ve öğeleri dolaşın ve tasarımlarınızı tamamen yeni bir düzeye taşıma yolunda ilerlemiş olacaksınız.

Öğelerin yeni ve ilginç şekillerde etkileşime girmesini sağlamak için kullandığınız bazı tasarım püf noktaları nelerdir?