Şekillendirebileceğiniz 3 Potansiyel Olarak Gözden Kaçan Divi Modül Öğesi (ve Nasıl)

Mevcut Divi kullanıcıları, modül sistemine zaten aşina olacaklardır. Her seviyeden kullanıcının karmaşık ve şık web siteleri tasarlamasına yardımcı olmak için sorunsuz ancak güçlü bir yoldur. Bununla birlikte, her modülde paketlediğimiz seçeneklerin sayısı göz önüne alındığında, anahtar öğelerinden bir veya ikisini kaçırdığınız için affedilirsiniz.

Bu yazıda, gözden kaçırmış olabileceğiniz üç küçük (ancak önemli) Divi modülü öğesini tanıtacağız. Size daha iyi web siteleri oluşturmanıza nasıl yardımcı olabileceklerini öğretmeden önce bunları nasıl bulacağınızı anlatacağız. Ancak konuya girmeden önce genel olarak Divi modülleri hakkında biraz konuşalım.

Divi Modülleri Nedir (Ve Size Nasıl Yardımcı Olabilir)

Divi esasen modülerdir; bu, sitenizin farklı işlevler sunan bloklar kullanılarak oluşturulduğu anlamına gelir. Bunları, Elegant Themes üyeleri için bağımsız bir eklenti olarak gelen entegre Divi Builder'ı kullanarak sitenize eklersiniz. Genel olarak, eklenti, WordPress editör ekranınızdan şık web sitelerini daha hızlı oluşturmanıza, sitenize karmaşık özellikler eklemenize ve tek tek öğelerle kolaylıkla etkileşime geçmenize olanak tanır.

Başlamak için, herhangi bir sayfada veya gönderide çalışırken WordPress düzenleyicinizden oluşturucuyu etkinleştirin. Bunu yaptıktan sonra, sayfanızı istediğiniz kadar satıra ve sütuna ayırabilir (her satırda altıya kadar) ve her birini seçtiğiniz modüllerle doldurabilirsiniz.

Blogumuzun düzenli bir okuyucusuysanız, makalelerin tamamını genellikle tek bir modülü tartışmaya adadığımızı bilirsiniz. Mevcut bireysel modüllerden bazılarının nasıl kullanılacağı hakkında genel tavsiyeler arıyorsanız (bunların nasıl şekillendirileceğiyle birlikte), işte en sevdiğimiz makalelerden bazıları:

1. Kod Modülü ile Divi'ye Kayan Eylem Menüsü Nasıl Eklenir.
2. Divi Sayı Sayacı Modülüne Giriş (ve Nasıl Tarzlandırılır).
3. Divi'nin Geri Sayım Sayacı Modülüne Basit Zarafetle Nasıl Stil Verilir.

Ancak Divi'ye bu kadar çok işlev sığdırıldığından, belirli modüllerin bazı yönleri genellikle unutulur. Bunu düzeltelim!

3 Temel Divi Modülü Öğesi ve Onlarla Nasıl Etkileşime Girilir

Çoğu Divi modülünü kavramak kolaydır. Bunu akılda tutarak, bir test sayfasına modüller eklemeniz ve keşfetmeye başlamanız iyi olur. Bununla birlikte, bu parça için, web sitenizin tasarımını geliştirebilecek CSS kodunu kullanarak uygulayabileceğiniz bazı ek ince ayarlara odaklanıyoruz.

Tabii ki, atlamadan önce, değişikliklerinizi herhangi bir tema güncellemesinden korumak için bir alt tema kullandığınızdan emin olun ve ayrıca yaptığınız herhangi bir değişikliğin kurulumunuzu alt üst etmesi durumunda bir yedekleme yapın.

1. Akordeon Modülünün Simgeleri

Akordeon modülü, çok sayıda bilgiyi kompakt bir alana paketlemenizi sağlar. Kullanıcıların yoğun bilgiler arasında belirli bir şey aradığı Sıkça Sorulan Sorular (SSS) bölümleri ve diğer benzer sayfalar için mükemmeldir:

Bu ince ayar için size akordeonunuzdaki her bir öğenin sağ tarafındaki simgeleri nasıl değiştireceğinizi öğreteceğiz:

Varsayılan olarak Divi, yalnızca akordeon simgelerinizin rengini ayarlamanıza olanak tanır. Ancak boyutlarından memnun değilseniz, onları küçük bir CSS kodu ile büyütebiliriz. Bunu yapmak için Akordeon modülünüzün ayarlarını açın ve Özel CSS sekmesine gidin. Burada bir kez, Geçiş Simgesi bölümüne ulaşana kadar aşağı kaydırın.

Buraya girdiğiniz herhangi bir CSS kodu, söz konusu simgeleri değiştirecektir. Ön uçta bu simgeler resim olarak görünürken, kaputun altında aslında özel bir yazı tipine benziyorlar. Bu nedenle, her bir seçici için varsayılan yazı tipi boyutu özelliğini geçersiz kılmanız gerekir. İşte nasıl görüneceği:

Yeni simgelerinizin nasıl görüneceğini kontrol etmek için önizleme işlevini kullanabilirsiniz…

…ve değişikliklerinizi kaydetmeden önce gerektiği gibi ince ayar yapın. Kolay değil mi? Şimdi, her modül için Özel CSS bölümünü kullanarak istediğiniz kadar yaratıcı olabileceğinizi unutmayın, bu nedenle diğer stilleri de denemekten çekinmeyin.

2. Kişi Modülünün Sosyal Medya Simgeleri

Kişi modülü, kendinizi veya ekibinizin diğer üyelerini sitenizin ziyaretçilerine tanıtmak için mükemmeldir. İş rolleri, kısa bir biyografi ve ilgili sosyal medya profillerine bağlantılar dahil olmak üzere, ziyaretçilerin veya potansiyel müşterilerin ekip üyeleriniz hakkında bilmesi gereken temel bilgileri sağlar:

Bu örnekte, biyografi bölümünün altında görünen sosyal medya simgeleriyle uğraşacağız. Renkleri değiştirebilmenize rağmen, varsayılan olarak çok fazla göze çarpmazlar. Ayrıca, önceki örnekte yaptığımız gibi boyutlarını kolayca değiştiremiyoruz, bu yüzden yaratıcı olmanın zamanı geldi!

İşleri başlatmak için ilgili Kişi modülünün ayarlarını açın, ardından Özel CSS bölümüne gidin. Oradayken, Üye Sosyal Bağlantıları alanını bulana kadar aşağı kaydırın. Bu sefer, simgelerimize biraz görünürlük artışı sağlamak için text-shadow özelliğini kullanacağız:

Piksel sayıları, orijinal simgeye göre gölgenin yatay ve dikey olarak nerede olduğunu belirtir ve onaltılık kod, rengini belirler. Konumlandırmayı denemekten çekinmeyin ve ayrıca sayfanızın stiline göre rengi değiştirin. Örneğimiz şöyle görünüyor:

Sosyal medya ikonlarına baskın gelmemek için soft bir renk seçtik. Ancak, elbette kendi tasarımınıza uygun bir şey seçmekte özgürsünüz.

3. Bar Sayacı Modülünün Yüzde Çubukları

Sonunda Bar Sayacı modülümüz var ve kullanımı çok basit. Basit yatay çubuklar kullanarak birden çok yüzdeyi görüntülemenizi sağlar – her birinin kendi başlığı ve ilerleme göstergesi vardır:

Ancak, kullanımı basit olmasına rağmen, grubun en kapsamlı Divi modüllerinden biridir. Başlığı, ilerleme çubuğu ve hatta içindeki yüzde metni dahil olmak üzere hemen hemen her öğeyi değiştirebilirsiniz. Yine de, modülün Özel CSS sekmesini kullanarak onunla biraz eğlenebiliriz. Oraya gidin ve önce Sayaç Konteyner alanını bulun.

Yüzde çubuğumuzun yatay ekseni boyunca skew transform özelliğini uygulayarak başlayalım. Basitçe söylemek gerekirse, bu, yüzde çubuklarınıza hafif bir eğim uygulamanıza olanak tanır. Uygulamak istediğiniz dereceyi değiştirerek bu özelliği ince ayar yapabilirsiniz, ancak bunun aynı zamanda kap içindeki metni de bozacağını unutmayın.:

Örneğimizde nasıl göründüğüne bakalım:

Son olarak, yüzde çubuklarınızı daha da canlandırmak istiyorsanız, normal renkleri kaldırabilir ve bunları degradeler kullanarak şekillendirebilirsiniz. Bunu başarmak için doğrusal gradyan CSS özelliğini kullanacağız ve arasında geçiş yapması gereken renkleri belirteceğiz:

Uygulayabileceğiniz ayarlarla başa çıkmak biraz zaman alsa da, gradyanınızı tam gereksinimlerinize göre hassas bir şekilde ayarlamanızı sağlayabilir. Özetle, bazı uygun renklerle birlikte degradeniz için bir yön uygularsınız. Bu örnekte, degrademizin bu yönde ilerlemesi için sağ alt özelliği uyguladık:

Yüzde çubuklarınız için degradelerin iyi görünmesini sağlamak zor olabilir, çünkü çalışması için birden çok rengi eşleştirmeniz gerekir. Ancak, bu numarayı kullanarak elde edebileceğiniz yaratıcı tarzlara oldukça düşkünüz.

Çözüm

Divi'nin en büyük özelliği, muhtemelen yeni kullanıcıların temayı seçmesinin ve onunla karmaşık web siteleri oluşturmaya başlamasının ne kadar kolay olduğudur. Bu, mümkün olduğunca sezgisel olacak şekilde tasarlanan modül sistemi Divi Builder sayesinde büyük ölçüde mümkündür.

Ancak, her bir modülün tüm püf noktalarını ve sırlarını öğrenmek biraz zaman alabilir. Bunu göz önünde bulundurarak, Divi sitenizi daha da özelleştirmek istiyorsanız, bu üç öğe başlamak için harika bir yerdir:

1. Akordeon modülünün simgeleri.
2. Kişi modülünün sosyal medya simgeleri.
3. Çubuk Sayacı modülünün yüzde çubukları.

Hangi Divi modülünün en kullanışlı olduğunu düşünüyorsunuz? Abone olun ve düşüncelerinizi aşağıdaki yorumlar bölümünde bizimle paylaşın!

Venimo / Shutterstock.com'dan makale küçük resmi