Divi’de sahte önce ve sonra öğeleri kullanarak benzersiz bir tasarım nasıl yapılır
Bir web tasarımcısı olarak, her zaman oluşturduğumuz web sitesine bireysellik eklemenin yeni yollarını arıyoruz. Divi, benzersiz bir düzen üretmek için sınırsız bir fırsat sağlar, ancak tasarımı birleştirmek için her zaman dahil edebileceğimiz hafif bir ek vardır. Pseudo CSS öğesinin çok yararlı olduğu yer burasıdır. Sahte eleman CSS nedir? Basitçe söylemek gerekirse, sözde CSS öğesi bir elemanın belirli bölümlerini organize etmek için kullanılabilir. Farklı şeyler yapan beş tür sahte unsur vardır. Bu yazının amacı için :: Önceden ve :: sonra göreceğiz. Bu sahte öğelerin her ikisi de bir elemanın içeriğinden önce veya sonra bir şey eklemek için kullanılır. Bu çok kullanışlıdır çünkü görüntülere, metne ve diğerlerine ek görsel öğeler eklemek için kullanabiliriz!
Öyleyse neden bu sahte öğeyi kullanıyoruz? Daha önce ve sonra, daha fazla unsur veya modül eklemeye gerek kalmadan tasarım olasılığını açmak için mükemmeldir. Aynı, HTML şablonlarına veya çekirdek tema dosyalarına dokunmak zorunda kalmadan ek öğeler eklemek için yararlıdır. Divi’den önce ve sonra öğeleri nasıl kullanıyorsunuz? Şimdiye kadar tüm bunlar biraz kafa karıştırıcı geliyorsa, endişelenmeyin! Başından beri CSS kodu yazarken :: Önceden ve :: kullanırsak, şöyle görünecektir: Bu satırı organize etmek ve ayarlamak için “metin -örnek” sınıfı – css ile bir metin satırımız olduğunu düşünün:
.Text-example {*Burası stil eklediğiniz yerdir*} Şimdi Elements eklemek ve ayarlamak istiyorsanız :: Önceden veya :: Sonra, CSS şöyle görünecektir: İçerik ve stillerden önce ekleyin*}. Text-exchange: : {*sonra içerik ve stil sonrası eklediğiniz yer*} Neyse ki divi :: Önceden ve :: :: :: :: :: :: daha az karmaşıklığa sahip sahte öğeye kolay erişim sağlar. Aslında, herhangi bir modülün özel bir CSS kodu eklemesi için “Devam” sekmesini daha önce açtıysanız, kastettiğimiz alanı göreceksiniz. Bu kutular, mevcut Divi modülünden önce ve sonra içeriği eklemek ve ayarlamak için hızlı bir kısayol sağlar. Ve bunu çok esnek ve çekici tasarımlar yapmak için kullanabiliriz.
Örnek 2 Örnek 3 Bu öğretici için başlayarak sadece divi ve boş taş temasının bir kopyasına ihtiyacımız var. Başlamak için yeni bir sayfa oluşturacağız ve sayfa başlığını ekledikten sonra görsel üreticiyi tıklayın. Şimdi başlamaya hazırız! Örnek 1: Sözde öğeleri kullanan numaralı açıklama modülü Bu açıklama, istediğiniz en esnek divi modüllerinden biri olabilir. Bu örnekte, adım adım “işe yaradığı yol” oluşturmak için her açıklamadan önce sayılar eklemek için sahte bir öğe kullanacağız. Süreci göstermek için okun şeklini sağa ekleyeceğiz. Ne yapacağız:
Her ne kadar bu tasarım herhangi bir açıklama tasarımı ile çalışacak olsa da, web ajansının düzeninin açıklamasını ödünç aldık. Bunu bir başlangıç noktası olarak kullanmak istiyorsanız, yeni bir sayfa oluşturarak ve ön uç üreticisine erişerek Web Ajansı yön sayfasına erişebilirsiniz. Sayfalarınız yüklendiğinde, daha önce olan düzeni kullanma seçeneğiniz olacaktır. Yaratılan, kaydettiğiniz veya başlangıçtan itibaren oluşturduğunuz düzenlerden biri. Daha önce oluşturulan düzeni seçin ve “Web Agent” düzenini bulmak için arama çubuğunu kullanın. Bu öğreticinin açıklama bölümü açılış sayfasında bulunabilir. Yüklendikten sonra, önceden hazırlanmış düzen ve örneğimiz arasındaki tek fark, metin yazı tipinin her bir açıklamasının, başlığının ve renginin arka planını değiştirmiş ve biraz dolgu eklememizdir. Bu ayarı bir açıklamada değiştirdikten sonra, modülün üzerinde doğru tıklayabilir ve diğer üçüne uygulamak için “Kuvveti Genişlet” i kullanabilirsiniz. Şimdi, istediğimiz gibi görünmesi için açıklamanın dört modülünü ayarladık, numaralandırılmış öğeyi yapmak için bazı kodlar ekleme zamanı. Ancak bu tasarımın işlev görmesi için, önce CSS Kustom ana eleman kutusuna bir satır CSS eklememiz gerekiyor. Taşma: Görünür; Bu, yalnızca bir sonraki adımda yaptığımız unsurların modülümüzün kenarıyla örtüştüğü her yerde görülebilir. Bunu bitirdikten sonra modül seçeneğini açın ve “Gelişmiş sekmesine” gidin. “Önce” kutusunda, bu CSS görüntülerini ekleyin: İçerik: ‘1.’; / * 1 numarayı ekler. İçerikten önce olduğu gibi */
Yazı tipi-ağırlık: kalın; yazı tipi boyutu: 80px;
Opaklık: 0.7; / * Sayıyı biraz şeffaf hale getirir */ renk: mavi; / * Metnin sayısının rengini değiştirir */
Pozisyon: Mutlak;
Z-endeks: 9999;
Sol: 0; / * İçeriği 0 piksel sol sınırdan uzağa konumlandırır */
Üst: -20px; / * İçeriği 20 piksel üst sınırın üstünde konumlandırır */
Bu kodun görüntülerini ekledikten sonra, numaranın açıklama modülünün sol üst kısmında göründüğünü göreceksiniz. “Sol” ve “ve” veya “veya bu CSS snippet’teki yazı tipi numarasının rengini ve boyutunu değiştirerek sayı konumunu değiştirebilirsiniz. Bunu ilk modül için bitirdikten sonra, üç yeni açıklama modülünü girin ve “içerik” satırını değiştirin: içerik: ‘2.’; İçindekiler: ‘3.’; …vb.
Artık numaramız sıralandığına göre, bir ok yapmak için biraz CSS eklememiz gerekiyor. Her modülü açın ve CSS özel alanından sonra bunu kutuya koyun:
İçerik: ”; Ekran bloğu; Yükseklik: 60px; / * Şeklin boyutu */
Genişlik: 60px; / * Şeklin boyutu */
Pozisyon: Mutlak;
EN İYİ 40%;
Sağ: -30px;
Z -index: -1;
Arka plan-rengi: #e8e8e8; / * Şeklin rengi */
Dönüşüm: döndür (45deg);
-Ms-transform: rotate (45deg);
-Webkit-Transform: Rotate (45deg);
Şimdi dört açıklamanız şöyle görünecek:
Örnek 2. Modüle bir tasarıma sahip benzersiz bir şekil eklemek, özel CSS kutusuna eklenen basit ama etkili küçük kod snippet’lerine bağlıdır :: Önceki ve :: her metin modülünden sonra. Burada sahte öğeler kullanmanın güzelliği, benzersiz şekilleri ve nesneleri, sayfamıza ek öğeler veya modüller eklemeye gerek kalmadan mevcut modüllere entegre edebilmemizdir. Bu sahte öğe mevcut modülümüzde yer aldığından, tasarımımıza ekstra alan eklemiyorlar ve hala tüm cihazlarda iyi görünüyorlar. Ne yapacağımız:
Bir başlangıç düzeni oluşturmak için, varsayılan genişliğe ayarlanmış üç sütun satırı ile düzenli bir bölüm eklememiz gerekir. Bunu bitirdikten sonra metin modülünü yeni sütunlardan birine ekleyin. Bir kez daha, bu metin modülünü isteklerinize ayarlayabilirsiniz, ancak takip ederseniz, bu tasarımı elde etmek için adımlar şunlardır: Metin Modülü seçeneğini açın ve metin içeriğinizi ve arka plan görüntüsünüzü veya arka plan renginizi gerektiği gibi ekleyin. Yukarıda şeffaf bir gradyanla normal bir arka plan görüntüsü kullandık: Ardından, aşağıdaki tasarım seçeneklerini yapılandırın:
1. Üst Dolgu: 120 piksel ve aşağıda dolgu: 120px 2. Metin Tedarimi: Orta ve Renk Metin: #ffffff 3. Leling Başlık: Orta ve Renk Başlığı: #F5EE5D Artık ilk metin modülünüz için tüm görsel yönlere sahip olduğumuza göre, şimdi mucizeleri gerçekleştirmek için CSS eklemenin zamanı geldi. Gelişmiş Metin Modülü sekmesine, “Önce” kutusuna aşağıdaki kodu ekleyin: İçerik: ”;
Yükseklik: 30px; / * Tasarımınıza uyacak şekilde boyutu değiştirin */ Genişlik: 30px; / * Tasarımınıza uyacak şekilde boyutu değiştirin */ Ekran bloğu; Pozisyon: Mutlak;
Sınır üstü: katı 3px #f5ee5d; / * Rengi tasarımınıza uyacak şekilde değiştirin */ Border-sol: Katı 3px #F5EE5D; / * Tasarımınıza uyacak şekilde rengi değiştirin */
Sol: 20px; / * Tasarımınıza uyacak konumu değiştirin */
Üst: 20px; / * Tasarımınıza uyacak konumu değiştirin */
Ve ardından “After” a: içerik: ”;
Yükseklik: 30px; / * Tasarımınıza uyacak şekilde boyutu değiştirin */
Genişlik: 30px; / * Tasarımınıza uyacak şekilde boyutu değiştirin */
Ekran bloğu;
Pozisyon: Mutlak;
Sınır dip: Sağlam 3px #F5EE5D; / * Tasarımınıza uyacak şekilde rengi değiştirin */
Border-Right: Katı 3px #F5EE5D; / * Tasarımınıza uyacak şekilde rengi değiştirin */
Sağ: 20px; / * Tasarımınıza uyacak konumu değiştirin */
Alt: 20px; / * Tasarımınıza uyacak konumu değiştirin */
Bu kodun parçasını modüle ekledikten sonra, yeni lüks şeklimizin eklendiğini göreceksiniz. Bu CSS’nin ne yaptığını merak ediyorsanız, aslında oldukça basittir. Tek yaptığımız, metin modülünün üst ve soldan (ve alt ve sağ) 20 piksel konumlandırılmış şeffaf bir kutu yapmak. Daha sonra bir ok efekti oluşturmak için bu kutuya iki sınır ekleriz. Bu ilk metin modülünün görüntülenmesinden memnunsanız, başka bir sütunu doldurmak ve metnin, arka planın ve uygun kuvvetin içeriğini değiştirmek için kopyalayıp yapıştırın.
Bu yöntemin bonusu, biraz ayarla neredeyse tüm Divi modülleriyle çalışmasıdır. Daha lüks olmak istiyorsanız, Elements :: Önceden ve ::: daha sonra öğeleri döndürmek, eğmek ve ayarlamak için bazı ek CSS eklemeyi deneyin. İyi vakit geçir! Örnek 3. Sekme başlığına simgeler ve açıklamalar ekleyin Bu tasarımda, aşağıdaki küçük metnin mevcut içeriğinden ve açıklamasından önce görüntü simgeleri ekleme yeteneğinden yararlanacağız. Bu, Divi sekme modülünü normalden biraz daha fazla ayarlamak için mükemmeldir. Not – CSS aracılığıyla içerik eklemek tasarım için çok iyi olsa da, arama motorları tarafından dizine eklemek kolay değil (Google aslında CSS ve JavaScript içeriğini dizine eklese de, daha uzun sürüyor ve şu anda güvenilir değil. Bing ve gibi arama motorları DuckDuckgo DO DEME DEĞİŞTİRME Bu içerik tamamen). Bu nedenle içeriğiniz minimum olmalı ve sıralama potansiyelinizi etkilemek için buna güvenmemelisiniz. Ne yapacağımız: Öncelikle standart bir parça ve satır 1 sütunu, ardından divi sekmesi modülünün kendisi eklememiz gerekiyor. Sekme modülünde, bir sonraki adımda stili işleyeceğimiz için yalnızca her sekmeye başlıklar ve içerik eklememiz gerekir.
İçeriğimiz var olduktan sonra, modülden önce :: öğesine içerik eklemeye başlamamız gerekir. Yukarıda izlediğimiz yöntemi kullanarak belirli bir sekmeye özel CSS ekleyemeyeceğimiz için, bunu biraz farklı bir şekilde yapmalıyız. Sekme modülü seçeneğini açın ve Gelişmiş sekmesinde “Lüks sekmesi” sınıf modülünü verin.
Bu CSS sınıfını ekledikten sonra biraz hazırlık yapmamız gerekiyor. Sekme başlığınıza birkaç simge veya resim eklemek için, açıkça WordPress’e eklememiz gerekir. WordPress kontrol panelindeki Medya sekmesini açın ve her zamanki gibi seçim simgeni yükleyin. Görüntünüz yüklenirken, birbirimizi tıklamamız ve WordPress’in bizim için yaptığı URL’yi kopyalamamız gerekir. Her bir görüntüünüzü keşfedin ve bu URL’yi kopyalayın ve not seçeneğinizin belgesine veya uygulamasına yapıştırın. Bu sayfanın altında, kendi özel CSS’nizi ekleyebileceğiniz kutuyu göreceksiniz. Bu kutuya bazı CSS kodunu ekleyeceğiz.
Aşağıdaki görüntüler resmi her sekme başlığının üzerine ekleyecektir. Bu örneği özel bir CSS kutusuna kopyalayıp yapıştırın ve daha önce kaydettiğiniz URL ile yıldızın işaretini (örneğin *ilk resminiz için URL ile değiştirin) arasındaki içeriği (ve içerir) değiştirin. .fancy-rebs .et_pb_tab_0 a :: Önce {
Ekran bloğu;
}
.Fance-BS .ET_PB_TAB_CONTENT A :: Önce {
İçerik: ”! Önemli; }
Aktif sekme modülü ile sayfaya geri dönerseniz, şimdi görüntünün her başlığın üzerine eklendiğini göreceksiniz – başarı!
Peki bir açıklama eklemeye ne dersiniz? Neyse ki bu da oldukça basit. Kodun hemen altında, özel CSS kutunuza kopyalamanız, aşağıdakileri yapıştırın:. Fancy-ays .et_pb_tab_0 a :: {content: ‘bu bir açıklama’;
yazı tipi boyutu: 10px;
Dolgu Top: 5 piksel;
Ekran bloğu;
}
.fancy-tabs .et_pb_tab_1 a :: sonra {
İçerik: ‘Bu bir açıklama’; yazı tipi boyutu: 10px;
Dolgu Top: 5 piksel;
Ekran bloğu;
}
.fancy-rebs .et_pb_tab_content A :: sonra {
İçerik: ”! Önemli; }
Daha önce olduğu gibi, görüntünüzde olduğu gibi, “Bu bir açıklama” nı kendi içeriğinizle değiştirmelisiniz. Sekme modülünüzle sayfaya geri dönersek, şimdi iyi bir açıklamamızın da olduğunu göreceksiniz!
Son olarak, yukarıda gösterilen tam tasarımı elde etmek için sadece daha fazla CSS uygulamamız gerekir. Bir kez daha, aşağıdaki görüntüleri aynı özel CSS kutusuna kopyalayın:. Fancy-ays .et_pb_tab_content A:
İçerik: ”! Önemli; }
.Fance-Tabs .et_pb_tabs_controls li {
Genişlik:%50! Önemli;
}
.Fance-Tabs .et_pb_tabs_controls li A {
Genişlik:%100! Önemli; Metin-align: merkez; }
@Media (Max-Width: 768px) {
.Fance-Tabs .et_pb_tabs_controls li {
Genişlik:%100! Önemli;
}
.Fance-Tabs .et_pb_tabs_controls {
Dolgu: 0! Önemli;
}
}
Bu kod metin ve sekme resminize odaklanır ve tüm modülü kapsayacak şekilde sekme genişliğinizi artırır.
Ayrıca, sekmenin tüm cihazlarda iyi görünmesini sağlamak için bazı CSS ekledik – hücreselde tam genişlik ve sekme yığınına sahip olmamayı tercih ediyorsanız, medya sorgusundaki orijinal CSS kodunu geri döndürmeli ve çevrelemeliyiz. Bu, tablet boyutunda bir cihazda ve daha geniş açıklamalar ve simgeler eklediğimiz anlamına gelir, ancak daha küçük bir cihazda varsayılan divi stiline geri döneceğiz. Bunu yapmak için, CSS kodunu kopyalayın ve divi tema seçeneği panelindeki özel CSS alanınıza yapıştırın: @media (min-width: 769px) {.Fance-BABS .ET_PB_TAB_0 A :: Önceden {
İçerik: URL (*İlk resminiz için URL ile değiştirin*);
Dolgu Top: 20px;
Ekran bloğu;
}
.fancy-tabs .et_pb_tab_1 A :: Önce {
İçerik: URL (*İkinci resminiz için URL ile değiştirin*);
Dolgu Top: 20px; Ekran bloğu;
}
.Fance-BS .ET_PB_TAB_CONTENT A :: Önce {
İçerik: ”! Önemli; }
.Fance-BS .et_pb_tab_0 a :: sonra {
İçerik: ‘Bu bir açıklama’;
yazı tipi boyutu: 10px;
Dolgu Top: 5 piksel;
Ekran bloğu;
}
.fancy-tabs .et_pb_tab_1 a :: sonra {
İçerik: ‘Bu bir açıklama’;
yazı tipi boyutu: 10px;
Dolgu Top: 5 piksel;
Ekran bloğu;
}
.fancy-rebs .et_pb_tab_content A :: sonra {
İçerik: ”! Önemli; }
.fancy-rebs .et_pb_tab_content A: sonra {
İçerik: ”! Önemli; }
.Fance-Tabs .et_pb_tabs_controls li {
Genişlik:%50! Önemli;
}
.Fance-Tabs .et_pb_tabs_controls li A {
Genişlik:%100! Önemli;
Metin-align: merkez;
}
}
Bu örnekte daha fazla sekme ekleyin 2 farklı sekme içeren bir sekme modülü yaptık, ancak pratikte bazen bundan daha fazlasına ihtiyacımız var. 2’den fazla sekme yapmak istediğiniz bir konumdaysanız, yeni eklediğiniz kodu değiştirmemiz gerekir. Çekimlerden görebileceğiniz gibi, Divi her sekme başlığı için otomatik olarak bir sınıf ayarlar – birincisi 0 (.et_pb_tab_0) ile başlar, her seferinde 1’i artırır (.et_pb_tab_1, .et_pb_tab_2 vb.). İlk iki sekmeyi ele aldık, bu yüzden daha fazla ekleme yaparken, kod bölümünü her yeni sekmeye kopyalayıp ekliyoruz:. Fancy-ays .et_pb_tab_0 A: Önce {Content: url (*Bunu ilk resminiz için URL ile değiştirin *);
Dolgu Top: 20px;
}
ve sınıftaki (.et_pb_tab_0) sayısını 2, 3, 4 vb. Değiştirin. Ayrıca açıklamanız için de aynı şeyi yapmanız gerekir. Yapmamız gereken son değişiklik bir CSS hattını daha ayarlamaktır. Sekme numaranızın sayısını alın ve 100 ile paylaşın. Bu numarayı kaydedin ve özel CSS’nizde aşağıdaki bölüme gidin:. Fancy-ays .et_pb_tabs_controls li {
Genişlik:%50! Önemli;
}
ve cevabınızla% 50 değişim. Bu, sekmenin modülün tüm genişliğinde aynı mesafeye sahip olduğundan emin olacaktır. Örneğin, üçüncü bir sekme yaparsanız, ihtiyacınız olan ek CSS kodu aşağıdaki gibidir:. Fancy-ays .et_pb_tabs_controls li {
Genişlik:%33! Önemli;
}
