Divi'de Öncesi ve Sonrası Sözde Öğeleri Kullanarak Benzersiz Tasarımlar Nasıl Oluşturulur
Yayınlanan: 2019-04-14Web tasarımcıları olarak her zaman oluşturduğumuz web sitelerine bireysellik katmanın yeni yollarını arıyoruz. Divi, benzersiz düzenler oluşturmak için sonsuz fırsatlar sunar, ancak bir tasarımı bir araya getirmek için ekleyebileceğimiz küçük eklemeler her zaman vardır. Burası CSS sözde öğelerinin gerçekten kullanışlı olduğu yerdir.
CSS sözde öğeleri nelerdir?
Basitçe söylemek gerekirse, bir öğenin belirli bölümlerine stil vermek için bir CSS sözde öğesi kullanılabilir. Farklı şeyler yapan beş tür sözde öğe vardır. Bu yazının amacı için ::önce ve ::sonra'ya bakacağız.
Bu iki sözde öğe, bir öğenin içeriğinden önce veya sonra bir şey eklemek için kullanılır. Bu, özellikle mevcut resimlere, metne ve diğer her şeye ekstra görsel öğeler eklemek için kullanabileceğimiz için kullanışlıdır!
Peki neden bu sözde öğeleri kullanalım? Öncesi ve sonrası, daha fazla öğe veya modül eklemeye gerek kalmadan tasarım olanaklarını ortaya çıkarmak için mükemmeldir. Aynı şekilde, html şablonlarına veya ana tema dosyalarına dokunmak zorunda kalmadan ek öğeler eklemek için de kullanışlıdırlar.
Divi ile öğelerin öncesi ve sonrası nasıl kullanılır?
Tüm bunlar şu ana kadar biraz kafa karıştırıcı geliyorsa, endişelenmeyin! CSS kodunu sıfırdan yazarken ::before ve ::after kullansaydık, biraz şöyle görünürdü:
"text-example" sınıfına sahip bir metin satırımız olduğunu hayal edin - bu satırı biçimlendirmek ve özelleştirmek için CSS:
.text-example {*This is where you add the styles*}Şimdi bir ::before veya ::after öğesi eklemek ve stil vermek istiyorsanız, CSS şöyle görünür:
.text-example::before {*This is where you add before content and styles*}.text-example::after {*This is where you add after content and styles*}Neyse ki Divi, ::before ve ::after sözde öğelere çok daha az güçlükle kolay erişim sağlar. Aslında, herhangi bir modülün özel CSS kodu eklemek için "Gelişmiş" sekmesini açtıysanız, bahsettiğimiz alanları görmüş olacaksınız.
Bu kutular, mevcut herhangi bir Divi modülünden önce ve sonra içerik eklemek ve özelleştirmek için hızlı bir kısayol sağlar ve bunları gerçekten esnek ve ilginç tasarımlar oluşturmak için kullanabiliriz.
Gizlice Bakış
Bu eğitimde oluşturacağımız şey şudur:
örnek 1
Örnek 2
Örnek 3
Başlarken
Bu eğitim için Divi temasının bir kopyasına ve boş bir sayfaya ihtiyacımız var. Başlamak için yeni bir sayfa oluşturacağız ve bir sayfa başlığı ekledikten sonra görsel oluşturucuya tıklayın.
Şimdi başlamaya hazırız!
Örnek 1: Sözde Öğeler kullanan numaralandırılmış tanıtım modülleri
Tanıtım yazısı, muhtemelen emrinizde olan en esnek Divi modüllerinden biridir. Bu örnekte, adım adım “nasıl çalışır” bölümü oluşturmak için her bir tanıtım yazısının önüne sayılar eklemek için sözde öğeler kullanacağız. Ayrıca işlemi belirtmek için sağa bir ok şekli ekleyeceğiz.
Ne oluşturacağız:
Bu tasarım herhangi bir tanıtım yazısı tasarımıyla çalışacak olsa da tanıtım yazısı bölümünü Web Ajansı Düzeninden ödünç aldık. Bunları bir başlangıç noktası olarak kullanmak isterseniz, yeni bir sayfa oluşturarak ve ön uç oluşturucuya erişerek Web Ajansı Açılış Sayfasına erişebilirsiniz.
Sayfanız yüklendiğinde, önceden hazırlanmış bir düzeni, kaydedilmiş düzenlerinizden birini kullanma veya sıfırdan oluşturma seçeneğiniz olur. Hazır düzeni seçin ve “Web Ajansı” Düzenlerini bulmak için arama çubuğunu kullanın. Bu eğitimdeki tanıtım yazısı bölümü, Açılış Sayfasında bulunabilir.
Yüklendikten sonra, hazır düzen ile örneğimiz arasındaki tek fark, her bir tanıtım yazısının arka planını, başlık ve metin yazı tipi rengini değiştirmemiz ve biraz dolgu eklememizdir.
Bu ayarları bir tanıtım yazısı üzerinde değiştirdikten sonra, modüle sağ tıklayıp diğer üçüne uygulamak için “Stilleri Genişlet” i kullanabilirsiniz.
Artık dört tanıtım modülümüzü istediğimiz gibi görünecek şekilde özelleştirdiğimize göre, numaralandırılmış öğeyi oluşturmak için biraz kod eklemenin zamanı geldi. Ancak bu tasarımın çalışması için önce Ana Öğe özel css kutusuna bir satır css eklememiz gerekiyor.
overflow: visible;
Bu, sonraki adımlarda oluşturduğumuz tüm öğelerin tanıtıcı modülümüzün kenarlarıyla örtüştüğü her yerde görünür olmasını sağlayacaktır.
Bunu yaptıktan sonra modül seçeneklerini açın ve “Gelişmiş Sekmesine” gidin. "Önce" kutusuna şu CSS pasajını ekleyin:
content: '1.'; /* Adds the number 1. as before content */ font-weight: bold; font-size: 80px; opacity: 0.7; /* Makes the number slightly transparent */ color: blue; /* Changes the color of the number text */ position: absolute; z-index: 9999; left: 0; /* Positions the content 0px away from the left border */ Top:-20px; /* Positions the content 20px above the top border */
Bu kod parçasını ekledikten sonra, numaranın tanıtım modülünün sol üst tarafında göründüğünü göreceksiniz. Bu CSS pasajında "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 tanıtım modülüne gidin ve “içerik:” satırını şu şekilde değiştirin:
içerik: '2.';
içerik: '3.';
…ve bunun gibi.
Artık numaralarımızı sıraladığımıza göre, ok şeklini oluşturmak için biraz css eklememiz gerekiyor.
Her modülü açın ve bunu Özel CSS alanındaki Sonra kutusuna girin:
content: ''; display:block; height:60px; /* Size of the shape */ width:60px; /* Size of the shape */ position:absolute; top:40%; right:-30px; z-index: -1; background-color: #e8e8e8; /* Colour of the shape */ transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg);
Şimdi dört tanıtım yazınız şöyle görünmelidir:
Örnek 2. Mevcut modüllerinize benzersiz şekiller ekleme
Bu tasarım, her metin modülündeki ::before ve ::after özel CSS kutularına eklenen basit ama etkili küçük kod parçacıklarına dayanır.
Burada sözde öğeleri kullanmanın güzelliği, sayfamıza herhangi bir ek öğe veya modül eklemeye gerek kalmadan benzersiz şekil ve nesneleri mevcut modüllerimize entegre edebilmemizdir. Bu sözde öğeler mevcut modüllerimizde yer aldığından, tasarımlarımıza fazladan alan eklemezler ve tüm cihazlarda harika görünmeye devam ederler.
Ne oluşturacağız:
İlk düzeni oluşturmak için, varsayılan genişliğe ayarlanmış üç sütunlu bir satıra sahip normal bir bölüm eklememiz gerekiyor. Bunu yaptıktan sonra, yeni sütunlardan birine bir metin modülü ekleyin.
Yine, bu metin modülünü istediğiniz gibi biçimlendirebilirsiniz, ancak takip ediyorsanız, bu tasarımı elde etmek için adımlar şunlardır:
Metin modülü seçeneklerini açın ve metin içeriğinizi ve gerektiği gibi bir arka plan görüntüsü veya arka plan rengi ekleyin. Üstünde şeffaf bir gradyan olan normal bir arka plan resmi kullandık:
Ardından, aşağıdaki tasarım seçeneklerini yapılandırın:
1.Üst dolgu: 120px ve Alt dolgu: 120px
2. Metin Hizalama: merkez ve Metin rengi: #ffffff
3. Yön Hizalaması: merkez ve Başlık rengi: #f5ee5d
Artık ilk metin modülünüz için tüm görsel unsurlara sahip olduğumuza göre, sihrin gerçekleşmesi için CSS'yi eklemenin zamanı geldi. Metin modülünün Gelişmiş sekmesinde, "önce" kutusuna aşağıdaki kodu ekleyin:
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-top: solid 3px #f5ee5d; /* change the colour to suit your design */ border-left: solid 3px #f5ee5d; /* change the colour to suit your design */ left: 20px; /* change the position to suit your design */ top: 20px; /* change the position to suit your design */
Ardından "sonra" kutusuna aşağıdaki kodu ekleyin:
content:''; height: 30px; /* change the size to suit your design */ width: 30px; /* change the size to suit your design */ display: block; position: absolute; border-bottom: solid 3px #f5ee5d; /* change the colour to suit your design */ border-right: solid 3px #f5ee5d; /* change the colour to suit your design */ right: 20px; /* change the position to suit your design */ bottom: 20px; /* change the position to suit your design */
Bu kod parçacıklarını modüle ekledikten sonra, yeni süslü şekillerimizin eklendiğini göreceksiniz.
Bu CSS'nin ne yaptığını merak ediyorsanız, aslında oldukça basit. Tek yaptığımız, metin modülünün üstünden ve solundan (ve alt ve sağından) 20 piksel uzağa yerleştirilmiş şeffaf bir kare oluşturmak. Daha sonra ok efektini oluşturmak için bu karelere iki kenarlık ekliyoruz.
Bu ilk metin modülünün görünümünden memnun olduğunuzda, diğer sütunları doldurmak ve metin içeriğini, arka planı ve stilleri uygun şekilde değiştirmek için kopyalayıp yapıştırmanız yeterlidir.
Bu yöntemin avantajı, küçük bir özelleştirme ile hemen hemen tüm Divi modülleriyle çalışacak olmasıdır. Daha gösterişli olmak istiyorsanız, ::before ve ::after öğelerini daha da döndürmek, eğmek ve özelleştirmek için ek CSS eklemeyi deneyin. İyi eğlenceler!
Örnek 3. Sekme başlıklarına simgeler ve açıklamalar ekleme
Bu tasarımda, mevcut bazı içeriğin önüne bir resim simgesi ve aşağıda küçük bir metin açıklaması ekleme yeteneğinden yararlanacağız. Bu, Divi sekmeleri modülünü normalde yapabileceğinizden biraz daha fazla özelleştirmek için mükemmeldir.
Not – CSS ile içerik eklemek tasarım için harika olsa da, arama motorları tarafından kolayca indekslenmez (her ne kadar Google aslında CSS ve Javascript içeriğini indekslese de, bu çok daha uzun sürer ve şu anda güvenilmezdir. Bing ve DuckDuckGo gibi arama motorları yapar). bu içeriği dizine eklemeyin). Bu nedenle içeriğiniz minimum düzeyde olmalı ve sıralama potansiyelinizi etkilemek için ona güvenmemelisiniz.
Ne oluşturacağız:
Her şeyden önce standart bölümümüzü ve 1 sütun satırını, ardından Divi sekmeleri modülünün kendisini eklememiz gerekiyor. Sekmeler modülünde, stilleri sonraki adımlarda ele alacağımız için her sekmeye yalnızca başlıklarımızı ve içeriğimizi eklememiz gerekiyor.
İçeriğimiz hazır olduğunda, modülün ::before öğesine içerik eklemeye başlamamız gerekir. Yukarıda izlediğimiz yöntemi kullanarak belirli sekmelere özel CSS ekleyemediğimiz için bunu biraz farklı şekilde gerçekleştirmemiz gerekecek.
Sekmeler modülü seçeneklerini açın ve Gelişmiş sekmesi içinde modüle "fantezi sekmeler" sınıfını verin.
Bu CSS sınıfını ekledikten sonra biraz hazırlık yapmamız gerekiyor. Sekme başlıklarınıza bazı simgeler veya resimler eklemek için bunları WordPress'e eklememiz gerekiyor. WordPress panosundaki Medya sekmesine gidin ve seçtiğiniz simgeleri normalde yaptığınız gibi yükleyin.
Resimlerinizi yükledikten sonra, her birine tıklamamız ve WordPress'in bizim için oluşturduğu URL'yi kopyalamamız gerekiyor. Resimlerinizin her birini gözden geçirin ve bu URL'leri kopyalayıp bir belgeye veya seçtiğiniz not uygulamasına yapıştırın.
Seçtiğiniz resimlerin URL'leri elinizin altındayken, WordPress Panosundaki Divi menüsündeki Divi Tema Seçeneklerinize gidin.
Bu sayfanın altında kendi özel CSS'nizi ekleyebileceğiniz bir kutu göreceksiniz. Bu kutunun içine bazı CSS kodlarını yapıştıracağız.
Aşağıdaki snippet, resimleri her sekme başlığının üstüne ekleyecektir. Bu pasajı kopyalayıp özel CSS kutusuna yapıştırmanız ve yıldız işaretleri arasındaki (ve dahil) içeriği (örn. *Bunu ilk resminizin URL'si ile değiştirin*) daha önce not ettiğiniz URL'lerle değiştirin.
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
Sekmeler modülünüz açık olarak sayfaya geri dönerseniz, resimlerin her başlığın üzerine eklendiğini görmelisiniz - başarı!
Peki, açıklama eklemeye ne dersiniz? Neyse ki bu da oldukça basit. Özel CSS kutunuza az önce kopyaladığınız kodun hemen altına aşağıdakini yapıştırın:
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
Daha önce resimlerinizde olduğu gibi, "bu bir açıklamadır" ifadesini kendi içeriğinizle değiştirmeniz gerekecektir. Sekmeler modülünüz ile sayfaya döndüğünüzde, artık bizim de süslü açıklamalarımız olduğunu göreceksiniz!
Son olarak, yukarıda gösterilen tasarımın tamamını elde etmek için biraz daha CSS uygulamamız gerekiyor. Yine, aşağıdaki parçacığı aynı özel CSS kutusuna kopyalayın:
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
@media (max-width: 768px) {
.fancy-tabs .et_pb_tabs_controls li {
width: 100% !important;
}
.fancy-tabs .et_pb_tabs_controls {
padding: 0 !important;
}
}
Bu kod, sekme metninizi ve resimlerinizi ortalar ve tüm modülü kapsayacak şekilde sekmelerinizin genişliğini artırır.
Ayrıca, sekmelerin tüm cihazlarda iyi görünmesini sağlamak için biraz CSS ekledik - sekmelerinizin tam genişlikte olmasını ve mobil cihazlarda istiflenmesini istemiyorsanız, geri dönüp orijinal CSS kodunu bir medya sorgusunda çevrelememiz gerekecek. Bu, tablet boyutunda ve daha geniş cihazlarda açıklamaları ve simgeleri eklediğimiz, ancak daha küçük cihazlarda Divi varsayılan stiline geri döneceğimiz anlamına gelir.
Bunu yapmak için aşağıdaki değiştirilmiş CSS kodunu kopyalayın ve Divi tema seçenekleri panelindeki özel CSS alanınıza yapıştırın:
@media (min-width: 769px) {
.fancy-tabs .et_pb_tab_0 a::before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::before {
content: url(*Replace this with the URL for your second image*);
padding-top: 20px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::before {
content: '' !important; }
.fancy-tabs .et_pb_tab_0 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_1 a::after {
content: 'this is a description';
font-size: 10px;
padding-top: 5px;
display: block;
}
.fancy-tabs .et_pb_tab_content a::after {
content: '' !important; }
.fancy-tabs .et_pb_tab_content a:after {
content: '' !important; }
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
.fancy-tabs .et_pb_tabs_controls li a {
width: 100% !important;
text-align: center;
}
}
Daha fazla sekme ekleme
Bu örnekte 2 farklı sekme içeren bir sekme modülü oluşturduk, ancak pratikte bazen bundan daha fazlasına ihtiyaç duyuyoruz. 2'den fazla sekme oluşturmak istediğiniz bir durumdaysanız, az önce eklediğiniz kodu değiştirmemiz gerekecek.
Parçacıktan görebileceğiniz gibi, Divi her sekme başlığına otomatik olarak bir sınıf atar - ilki 0 ile başlar (.et_pb_tab_0), her seferinde 1 artar (.et_pb_tab_1, .et_pb_tab_2 vb.). İlk iki sekmeyi zaten hallettik, böylece daha fazlasını eklerken her yeni sekme için kodun bir bölümünü kopyalayıp yapıştırabiliriz:
.fancy-tabs .et_pb_tab_0 a:before {
content: url(*Replace this with the URL for your first image*);
padding-top: 20px;
}
ve sınıftaki sayıyı (.et_pb_tab_0) 2, 3, 4 vb. olarak değiştirin. Aynısını açıklamalarınız için de yapmanız gerekecek.
Yapmamız gereken son değişiklik, bir CSS satırı daha ayarlamaktır. Sekmelerinizin sayısını alın ve 100'e bölün. Bu sayıyı not edin ve özel CSS'nizde aşağıdaki bölüme gidin:
.fancy-tabs .et_pb_tabs_controls li {
width: 50% !important;
}
ve %50'yi cevabınızla değiştirin. Bu, sekmelerinizin modülün genişliği boyunca eşit aralıklarla yerleştirilmesini sağlayacaktır.
Örneğin, üçüncü bir sekme oluşturuyorsanız, ihtiyacınız olan ek CSS kodu aşağıdaki gibi olacaktır:
.fancy-tabs .et_pb_tabs_controls li {
width: 33% !important;
}
kapanışta
Ve işte, yeni tasarım olanakları yaratmak için CSS ::before ve ::after öğelerini kullanmanın üç harika yolu var. Umarız bu kılavuz, gelecekteki yaratımlarınızda sözde öğeleri nasıl kullanabileceğinizi keşfetmeniz için size ilham verir - fırsatlar gerçekten sonsuzdur!