Divi 2.4'ü Keşfetmek: Özel CSS Sekmesi ve Divi Kitaplığı İş Akışınızı Nasıl Dönüştürebilir?

Geçen hafta, Divi tarihindeki en büyük yükseltme ve en popüler WordPress temamız için dev bir adım olan Divi 2.4'ü tanıttık. Bu güncellemede keşfedilecek o kadar çok harika özellik var ki, hepsini sürüm gönderisinde açıklamak zordu, bu yüzden size nasıl alınacağını öğretmeyi amaçlayan 2 haftalık bir dizi bilgilendirici blog gönderisi yapmaya karar verdik. Divi 2.4'ün tam avantajı ve yeni seçenekleri. Bu serinin onuncu bölümünde, yeni Özel CSS seçeneklerini ve bunları bir alt tema ile özel css eklemek yerine Divi Kitaplığı ile birlikte nasıl kullanabileceğinizi keşfedeceğim.

Divi 2.4 Hakkında Her Şeyi Buradan Öğrenin

Divi 2.4'teki Tüm Yeni Özel CSS Sekmeleri

Bölümler, Satırlar ve Modüllerin hepsinin Divi Builder'da kendi Özel CSS sekmeleri vardır. Bu, sayfanıza özel css eklemenize ve daha da spesifik olarak, doğrudan sayfadaki tek tek öğelere eklemenize olanak tanır. Bunu bir alt tema aracılığıyla veya Zarif Temalar ePanel içinde yapmakta yanlış bir şey yoktur, ancak parmaklarınızın ucundaki bu yeni özelliklerle kendinizi bu yöntemleri çok daha az kullanırken bulabilirsiniz.

Bölüm ve Satır Özel CSS Seçenekleri

Bölümler ve Satırlar, html'deki tüm bölüm veya satır öğesi olan ana öğe ve hem :after hem de :before sözde öğeleri için özel css tanımlamanıza izin verir. Aşağıdaki birkaç örneğe göz atın.

Bölüm Bölücü Eklemek için Sözde Öğeleri Kullanın

Sonraki bölüme işaret eden bir havuç oluşturmak için bölümün Sonra alanına CSS ekledim. Bu öğe, bölümün arka plan rengiyle aynı renkte olan ve ardından %45 döndürülen bir kare şeklinden yapılmıştır.

display: block;
position: absolute;
content: '';
width: 40px;
height: 40px;
bottom: -20px;
left: 50%;
margin-left: -20px;
background-color: #1e73be;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 1;

Bölüm Konteynerini “Ana Eleman” Alanı Üzerinden Stillendirin

Burada, bölümüme güzel bir şeffaf kenarlık efekti vermek için şeffaf bir iç gölge ekledim.

-webkit-box-shadow: inset 0px 0px 0px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: inset 0px 0px 0px 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0px 0px 0px 20px rgba(0, 0, 0, 0.3);

Özel Satır CSS'si

Satırlara özel css eklemek, sütunlarını ve modüllerini tutan kapsayıcıyı biçimlendirir. Satırın içeriğinin etrafına güzel bir kutu eklemek için basit bir kenarlık ve bazı özel dolgular ekledim.

border: 4px solid rgba(0,0,0,0.4);
padding: 40px;

Özel Modül CSS Size Her zamankinden Daha Fazla Kontrol Veriyor

Bir modülün dış kabına ve sözde öğelerine özel css ekleyebilmenin yanı sıra, bir modülün tek tek parçalarına stiller de ekleyebilirsiniz. Aşağıda birkaç örneği gözden geçireceğim ve hatta size Divi Kitaplığı'nın bu örnekleri nasıl yepyeni bir harika seviyeye taşıyabileceğini göstereceğim.

CSS ile Yuvarlak Bulanık Görüntüler Oluşturun

Bu CSS, tanıtım yazısı resmine geniş bir kenarlık yarıçapı verir ve resimleriniz başlangıçta mükemmel kareler olursa, resimlerinizi etkili bir şekilde mükemmel dairelerle sınırlandırır. Resmin alt kenar boşluğunu artırarak, tanıtıcı resim ve başlık arasına biraz boşluk bile ekledim.

line-height: 0;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
overflow: hidden;
xmax-width: 200px;
margin: 0 auto 50px;

Özel CSS ile Herhangi Bir Modüle Özel Kenarlıklar Ekleyin

Burada, metin modüllerine sadece bir üst çift kenarlık ve bazı özel dolgular ekledim. Bu, bir metin bloğuna dikkat çekmenin kolay bir yoludur.

border-top: 4px double rgba(255,255,255,0.5);
padding-top: 20px;

Herhangi Bir Modülde CSS Filtrelerini Kullanın!

CSS filtreleri, resimler, ekip üyesi portreleri ve hatta Google Haritalar gibi şeyler için harika çalışır.

Soldan sağa, css filtreleri aşağıdaki gibidir: Gri Tonlama, Sepya, Doygunluk, Bulanıklaştırma, Ters Çevir. Bu efektlerin farklı düzeylerini elde etmek için parantez içindeki değerleri değiştirebilirsiniz. Herhangi bir modülün Ana Öğe CSS alanına aşağıdaki stillerden herhangi birini eklemeniz yeterlidir.

-webkit-filter: grayscale(1);
filter: grayscale(1);

-webkit-filter: sepia(1);
filter: sepia(1);

-webkit-filter: saturate(2);
filter: saturate(2);

-webkit-filter: blur(5px);
filter: blur(5px);

-webkit-filter: invert(1);
filter: invert(1);

Geliştirme Süresini Azaltmak için Divi Kitaplığıyla Özel Modül CSS'yi Kullanma

Gri tonlamalı filtre veya dairesel bulanık görüntü gibi özel css ile harika bir efekt elde ederseniz ve onu tekrar kullanabileceğinizi düşünüyorsanız, daha sonra kullanmak üzere Divi Kitaplığınıza kaydetmeniz yeterlidir. Kaydetmek istediğiniz tek şey özel css ise, sizden istendiğinde yalnızca Özel CSS Sekmesini kaydetmeyi seçin.

Bu efekte sahip bir modül eklemek istediğinizde, onu kitaplığınızdan sayfaya eklemeniz yeterlidir ve o modüle hangi içeriği yerleştirirseniz yerleştirin, özel css'niz etkili olmaya devam eder. Bu kaydedilmiş css'i yolda bile düzenleyebileceğinizi düşünüyorsanız, onu global bir modül olarak ayarlayabilirsiniz. Ardından, CSS'yi düzenlemeniz gerektiğinde, bunu yalnızca bir kez yapmanız gerekir.

Adım Adım Örnek

Portreyi bir referans modülünde gri tonlamalı yapmak için bazı özel css eklediğimi varsayalım. Şimdi, sayfama yeni bir referans modülü eklediğimde bu etkinin tüm web sitemde gerçekleşmesini istiyorum. Bunu Özel CSS ve Divi Kitaplığı kullanarak nasıl ayarlayacağım.

Adım 1. Bir Referans Modülü Oluşturun

Bu, Divi Kitaplığınızın içinden veya gerçek bir sayfada yapılabilir. Ya yapacak. Bunu Divi Kütüphanesi üzerinden yapacağım çünkü henüz sitemi oluşturmaya başlamadım. Divi Yönetici Sekmesine gittikten sonra, Divi Kitaplığı bağlantısını seçin ve Yeni Ekle'yi seçin.

Ayarlarınızı Seçin – Modülümü uygun şekilde adlandırdım, kütüphaneye bir modül yapmak istediğimi, yalnızca Özel CSS sekmesini eklemek istediğimi ve Global olmasını istediğimi söyledim (referans portre filtremi güncellemek istersem). gelecekte).

Gönder ve Yapılandır – Gönderdikten sonra bir modül seçmem isteniyor (bir referans modülü seçtim) ve ardından senkronize etmeyi seçtiğim tek sekme olduğu için hemen CSS sekmesine yönlendiriliyorum. Css filtremi Tanıklık Portresi alanına yerleştirdikten sonra yeni kitaplık öğemi kaydedip güncelleyebilirim.

2. Adım. Kaydedilen Kitaplık Öğesini Düzene Ekleyin

Bu modülü Divi Kütüphanesi içinden oluşturduğum için referanslarım için yeni bir sayfa açmam gerekiyor. Üç referans eklemek istiyorum, bu yüzden yeni global modülümü 3 sütunlu bir satırın her sütununa ekledim.

Adım 3. Harika Çalışmanızı Kaydedin ve Önizleyin!

Gözden Geçirme & Değiştirme – Bunlara baktıktan sonra, resimlerin biraz daha renge ihtiyacı olduğunu düşünüyorum, bu yüzden filtre seviyesini %50'ye düşüreceğim. Tek yapmam gereken bir referans modülünün ayarlarını açmak ve filtre miktarımı 0,5 olarak değiştirmek. CSS Sekmesinin yeşil olduğunu ve bana bunun bu modüldeki tek global sekme olduğunu söylediğini unutmayın.

Modülü kaydettikten ve sayfamı güncelledikten sonra, genel referans modülümün tüm örneklerinin %50 gri tonlamalı filtreli portre resimleri olduğunu görebiliyorum. Güzel.

Yukarıdakilerin Hepsi Divi'den Ayrılmadan

Tüm bunları yerel Divi araçlarıyla yaptığımıza inanmak zor. Bu, iş akışınızı geliştirmek için Özel CSS'yi ve Divi Kitaplığını nasıl kullanabileceğinizin yalnızca bir örneğidir. Divi Kitaplığınızı diğer web sitelerinde kullanmak üzere dışa aktarabildiğinizden bahsetmiyorum bile.