herhangi bir sahibi için web sitesi, rekabette öne çıktığınızı bilmek çoğu zaman önemlidir. Divi benzersiz düzenler oluşturmak için sayısız olasılık sunar, ancak her zaman biraz daha fazla kazma ile daha benzersiz bir şey yaratabiliriz. Burası, CSS sözde öğelerinin gerçekten işe yaradığı yerdir.
Sözde CSS öğeleriyle ne demek istiyoruz?
Basitçe ifade etmek gerekirse, bir CSS sözde öğesi, bir öğenin belirli kısımlarını biçimlendirmek için kullanılabilir. Farklı şeyler yapan beş tür sözde öğe vardır. Bu makalenin amaçları doğrultusunda, sadece: öncesi ve: sonrası hakkında konuşacağız.
Bu iki sözde öğe, bir öğenin önüne veya arkasına bir şey eklemek için kullanılır. içindekiler bir elementin. Bu özellikle kullanışlıdır çünkü bunları mevcut görsellere, metinlere ve diğer öğelere ek görsel öğeler eklemek için kullanabiliriz!
Öyleyse neden bu sözde unsurları kullanalım? Önce ve Sonra, daha fazla öğe veya modül eklemeye gerek kalmadan tasarım olasılıklarının kilidini açmak için mükemmeldir. Aynı şekilde, ana html şablonlarına veya tema dosyalarına dokunmak zorunda kalmadan ek öğeler eklemek için kullanışlıdırlar.
Divi ile öncesi ve sonrası unsurları nasıl kullanıyorsunuz?
Tüm bunlar şimdiye kadar biraz kafa karıştırıcı görünüyorsa, endişelenmeyin! CSS kodunu sıfırdan yazmak için :: before ve :: after kullansaydık, biraz şöyle görünürdü:
"Example-text" sınıfına sahip bir metin satırımız olduğunu varsayalım - bu satırı biçimlendirmek ve özelleştirmek için CSS şu şekilde olacaktır:
.example-text {* tarzınızı buraya ekleyin *}
Şimdi, bir :: before veya :: after öğesini eklemek ve stillendirmek istiyorsanız, CSS şöyle görünür:
.example-text :: before {* buradaki öğeden önce stilinizi ekleyin *} .example-text :: after {* buradaki öğeden sonra stilinizi ekleyin *}
Neyse ki, Divi ::before ve ::after sözde öğelere çok daha az güçlükle kolay erişim sağlar. Aslında, özel CSS eklemek için "Gelişmiş" sekmesini açtıysanız, bahsettiğimiz alanları zaten görmüşsünüzdür.
Bu alanlar, eklemek ve özelleştirmek için hızlı bir kısayol sağlar. içindekiler herhangi bir modülden önce ve sonra Divi mevcut ve bunları gerçekten esnek ve ilginç tasarımlar yaratmak için kullanabiliriz.
anket
İşte bu derste yaratacağımız şey:
Örnek 1
başlangıç
Bu eğitim için Görsel Oluşturucu modunda başlayacağız. Bu nedenle, yeni bir sayfadayken "Visual Builder" a tıklamalısınız.
Şimdi başlamaya hazırız!
Örnek 1: Sözde unsurları kullanan Numaralandırılmış Blurb modülleri
Tanıtım yazısı muhtemelen kullanabileceğiniz en esnek Divi modüllerinden biridir. Bu durumda, ayrıntılı bir "Nasıl çalışır" bölümü oluşturmak için her sunumdan önce sayılar eklemek için sözde öğeler kullanacağız. Süreci belirtmek için sağa bir ok şekli de ekleyeceğiz.
Ne yaratacağız:
Bu tasarım tüm sunum tasarımları ile çalışırken, sunum için özel bölümü web ajansından ödünç aldık. Bunları bir başlangıç noktası olarak kullanmak istiyorsanız, yeni bir sayfa oluşturarak ve ön uç oluşturucuya giderek web ajansı açılış sayfasına gidebilirsiniz.
Sayfanız yüklendiğinde, önceden tanımlanmış bir düzeni, kaydedilmiş düzenlerinizden birini kullanma veya yeni bir yapı oluşturma seçeneğiniz vardır. Önceden tanımlanmış düzeni seçin ve "Web Agency" düzenlerini bulmak için arama çubuğunu kullanın. Bu eğiticinin genel bakış bölümü açılış sayfasındadır.
Yüklendikten sonra, önceden tanımlanmış düzen ile örneğimiz arasındaki tek fark, her sunum metninin arka planını, metnin başlığını ve yazı tipi rengini değiştirip küçük bir dolgu ekledik.
Bu ayarları bulanıklaştırdıktan sonra, modüle sağ tıklayıp diğer üçe uygulamak için "genişletilmiş stilleri" kullanabilirsiniz.
Artık dört Blurb modülümüzü istediğimiz gibi görünecek şekilde özelleştirdiğimize göre, numaralı öğeyi oluşturmak için biraz kod eklemenin zamanı geldi. Ancak, bu tasarımın çalışması için, öncelikle Ana Öğenin özel CSS kutusuna bir CSS satırı eklememiz gerekiyor.
taşma: görünür
Bu, aşağıdaki adımlarda yarattığımız öğelerin sunum modülümüzün kenarlarıyla çakıştığı her yerde görünmelerini sağlar.
Tamamlandığında, modülün seçeneklerini açın ve "Gelişmiş sekmesine" gidin. "Önce" alanına şu CSS pasajını ekleyin:
içerik: '1.'; / * "1" sayısını ekleyin. içerikten önce * / font-weight: kalın; yazı tipi boyutu: 80px; opaklık: 0.7; / * sayıyı biraz şeffaf yap * / color: blue; / * sayının yazı tipi rengini değiştirir * / position: mutlak; z-endeksi: 9999; sol: 0; / * içeriği 0px olarak içeriğin en soluna yerleştir * / top: -20px; / * İçeriği üst sınırın 20 piksel üstüne yerleştirir * /
Bu pasajı ekledikten sonra, sayının Blurb bölmesinin sol üst kısmında göründüğünü göreceksiniz. Bu CSS pasajındaki "sol:" ve "üst:" satırlarını değiştirerek veya sayının rengini ve yazı tipi boyutunu değiştirerek sayının konumunu değiştirebilirsiniz.
Bunu ilk modül için tamamladığınızda, üç yeni blurb modülüne gidin ve "content:" satırını şuraya değiştirin:
içindekiler: '2.';
içerik: '3.';
... vb.
Şimdi sayılarımızı sıraladık, ok şeklini oluşturmak için bir miktar CSS eklememiz gerekiyor.
Her bir modülü açın ve özel CSS kutusunun Sonra kutusuna yazın:
content:''; display:block; height:60px; width:60px; position:absolute ; top:40%; right:-30px; z-index:-1; background-color:#e8e8e8; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
Şimdi, dört tanıtım notunuz şöyle görünmelidir:
Hepsi bu eğitim için, umarım sözde öğeleri Divi tarafından sunulan seçeneklerle daha iyi kullanmanıza izin verir.
