Elementor’a karanlık mod nasıl eklenir

Bu öğreticide Elementor web sitesine Karanlık Ön Uç Modu ekleyeceğiz. Bu makaledeki içerik, birkaç ay önce “WordPress’e karanlık moda nasıl eklenir” genel yayınımızda açıklanan adımları dikkatle takip ediyor, ancak burada her şeyi elemente nasıl hızlı ve kolay bir şekilde karanlık mod ekleyebileceğinizi göstermek için ayarladık İnternet sitesi.

Karanlık moda alışık değilseniz, iOS cihazınızı, Facebook sayfanızı veya Reddit tarayıcısınızı düşünün. Bu kullanıcı arayüzlerinin tümü, “normal” UI renk şeması ile “karanlık” UI renk şeması arasında geçiş yapmanızı sağlar.

Dark Moda Kaynağı, web sitenize iyi bir ektir, çünkü geceleri içeriği okumayı, daha az cihaz pil kullanmayı ve havalı görünmeyi kolaylaştırır. Bu son yıllarda daha fazla popülerlik kazandı çünkü ana uygulamaların ve platformların çoğu kendi “gece modasını” ekledi. Bir Elementor ile bir web sitesi oluşturursanız, ön ucunuza gece eklemek nispeten kolaydır. Editör zaten karanlık bir arka uç modu var – şimdi bu işlevi ön ucuna ekleme zamanı. WordPress ve Elementor’a karanlık mod eklemek söz konusu olduğunda, iki ana bileşen vardır. Birincisi, iki renk şeması arasında geçiş yapmak için kullanacağınız gerçek arayüzdür ve ikincisi, karanlık mod etkinleştirildiğinde uygulanacak renktir.
Koyu Mod Rengi Bulma Elementor’a karanlık mod eklemek için ilk adım, karanlık mod renkleri bulmak/üretmektir. Web sitemize kolayca entegre edebileceğimiz koyu bir renk paleti bulmak için Color Hunt adlı ücretsiz bir web sitesi kullanmayı seviyoruz. Bazen, sayfadaki orijinal renklerin tam tersini seçeceğiz. Örneğin, arka planınız beyazsa, karanlık mod versiyonu siyah olacaktır. Metin boyası genellikle beyaz veya açık gri olarak değiştirilir ve aksan rengi her iki arka plan üzerinde çalışırken genellikle aynı kalır. Elementor sitesi için karanlık bir moda yaparken kullandığımız bazı renkler:
Coolors.co kullanma kılavuzumuzu buradan okuyun. Karanlık Modunuzu Planlayın Karanlık modunuzun rengini bildikten sonra, karanlık modu etkinleştirirken hangi öğelerin öğelerinin gerçekten değiştirileceğini planlamak çok yararlı olacaktır. Bazı durumlarda, zaten değiştirilmesi gerekmeyen koyu bir arka plan var ve diğer durumlarda bir bütün olarak görüntüleri, yazı tiplerini ve arka plan renklerini değiştirmeniz gerekiyor. Genellikle, karanlık mod etkinleştirildiğinde hangi öğelerin renk değiştirilmesi gerektiğini belirledikten sonra, “Devam” düzenleyicisini kullanarak bu öğeler için özel bir CSS kimliği ayarlayacağız.
Elementor’a Karanlık Mod Ekleme
“Sıradan Sayfalar”

“Karanlık Sayfa”

Bu sayfanın düzeni Envato Elements şablonudur. Elementor’a gerçekten karanlık bir mod eklemek için, bu görev için tasarlanmış WordPress eklentisinin amacını kullanacağız. Tabii ki, bunu JavaScript ve CSS (temelde bu eklentinin işlevidir) ile yapabilirsiniz, ancak bu şekilde yapmak çok zaman ve enerji tasarrufu sağlar. Testlerimizden, Siteye Karanlık Modu girerken çarpıcı bir performans düşüşü yoktur. Bu eklentiye WP Gece Modu denir ve WordPress depolarında ücretsiz olarak kullanılabilir. WP gece modu şimdiye kadar en güçlü olmasına ve genişletilebilmesine rağmen, başka teklifler de var (bahsetmiyorum – ücretsiz!).
Bu eklenti, Elementor web sitesine karanlık mod eklerken ihtiyacınız olan iki ana şey sunar. İlk olarak, bu kısa bir kod aracılığıyla web sitenizde herhangi bir yere karanlık bir moda anahtarı yerleştirmenizi sağlar. İkincisi, bu karanlık modu etkinleştirirken sitenin herhangi bir yerinde hangi rengin uygulanacağını belirlemenizi sağlar. Kurulumdan sonra Elementor web sitenize karanlık bir moda anahtarı ekleyin. Bu, herhangi bir yere kısa bir kod ekleyerek yapılır. Bu örnekte, sayfanın en üstüne kısa bir kod ekleyeceğiz (yalnızca demo amaçlı), ancak Elementor Pro başlık düzenleyicisi Elementor’da karanlık moda üretiminin uygulanması için yararlıdır.

Kod Dili: Yorumlarla JSON / JSON (JSON) Bu eklentiyi kullanarak yan çubuğa veya doğrudan menüye kısa bir kod yerleştirebilirsiniz. Bu eklenti, kısa kodda belirleyerek seçebileceğiniz dört varsayılan anahtar stili ile birlikte gelir.
Kod Dili: Yorumlarla JSON / JSON (JSON)
Switch’i koyduktan sonra, karanlık moda stilini web sitenize uygulama zamanı. İlk olarak, ayarlamayı açın ve temel renklendirmenizi uygulayın. Ayardaki gece modu sekmesi, vücudunuzun arka planını, metin rengini, bağlantı rengini ve bağlantının rengini değiştirmenizi sağlar. Diğer şeyleri değiştirmek için, bu makalenin bir sonraki bölümünde tartışacağımız bazı özel CSS kullanmalıyız. Başlamak için, boyama seçeneğinin içeriği karanlık moda renk şemanızla ayarlanır. Gece/karanlık modu sitenizin varsayılan rengine bile ayarlayabilirsiniz.
Ayarlamada, karanlık modu etkinleştirirseniz, bazı değişikliklerin uygulandığını göreceksiniz, ancak site biraz hasarlı görünüyor. Bunun nedeni, gece modunun kutunun dışındaki tüm öğelerinize ve temalara uygulanamamasıdır. Bunun yerine, bazı özel CSS özellikleri yapmamız gerekiyor. Özel CSS Elementor’ı belirleyen özel CSS’deki CSS Kustom Gece Modu uygulaması, bu eklentiyi çok güçlü kılan şeydir. Elementor’a karanlık mod uygulamak için özel CSS bilmenize bile gerek yok, çünkü bu çok basit ve yapılması kolay.

Body.wp-night-mode-al. Elementor-Seçici {Gece Modu Styling}
İş akışınız basittir: özel bir CSS koyu moda stiline sahip olması gereken alanların tanımlanması, ardından rengi uygulayın. Şu anda, sayfamız varsayılan Nightmode stiliyle (önceki adımda uygulanır) biraz hasar görmüş görünüyor. Temizlemek için, özel CSS’imizi kullanarak karanlık moda uygulamayan herkesi belirleyeceğiz.

Site, özelleştiriciye rengi uyguladıktan sonra. Bu, sayfa için devam eden Elementor’un CSS Setom ayarları kullanılarak sayfa başına eklenebilir, WordPress ayarına CSS Custom veya YellowPecil gibi üçüncü taraf eklentileri girebilir. Özel CSS stilinizin yalnızca gece moduna uygulanmasını sağlayabilirsiniz. “Body.wp- Night-Mode-on” ile başlayarak, genel seçmenlerinizi ekleyin ve son olarak stil kurallarını ekleyin. Örneğin, bu, CSS sınıfı “sınıf öğesi” olan herhangi bir yazı tipi öğesini yalnızca gece modası etkinleştirildiğinde siyah olarak değiştirir. Body.wp-night-mode-al. } Yellowpence kullanacağız ve bu, birçok özel CSS’yi öğelerle yönetmenizi önerdiğimiz bir eklentidir. İlk olarak, ücretsiz dev araçlar iş akışını tartışacağız.
İlk geliştirici aracının iş akışı, karanlık mod uygulandığında değiştirmeniz gereken öğelerden belirli seçmenlerin tanımlanması. Örneğin, varsayılan gece moda stili uygulandığında tüm başlıklarımız renk değiştirmez. Emin olmak için özel bir CSS kullanacağız. Seçmenleri tanımlamak için bir geliştirici veya sarı kalem aracı kullanabilirsiniz. Dev aracı ile, karanlık moda stiliniz için değiştirmeniz gereken öğeleri sağlayın ve “Eleman’ı inceleyin” yi tıklayın.
Burada, başlığımızın H2 sektörü ve özel CSS sınıfı tarafından belirlendiğini görebilirsiniz “. Elementor-başlık-başlık”, Elementor sitemizde karanlık moda aktif olduğunda beyaz olarak değiştirilecek, sadece CSS kuralları yapacağız. : Body.wp -night-mode-on H2. Elementor-başlık-başlık {color: #fff; } Temel olarak, bu, Dark Mode etkin olduğunda Elementor başlığının başlığının beyaz olacağını söylüyor. Karanlık mod kapatıldığında, bu kuvvet uygulanmayacaktır. Daha sonra Dark Fashion CSS stilinin tüm kurallarını masaüstü stil sayfasında yazıyoruz, ücretsiz Microsoft Visual Studio Kodu aracını kullanıyoruz. Genellikle stili H1, H2, H3 veya Div veya Div gibi genel seçmenlere uygulayacağız, Ve sonra Elementor’ın her öğesi için belirlenen benzersiz bir sınıf kullanarak mükemmel. Örneğin, Elementor’daki belirli bir sütunun arka plan rengini değiştirmek istiyorsak, tek yapmamız gereken benzersiz CSS sınıfını tanımlamaktır.

Benzersiz CSS sınıfından CSS kurallarımızı yaptık:
gövde .wp-night-mode-on. elementor-element-5b14c912 {arka plan-color: RGBA (0, 0, 0, 0); }
Kod Dili: CSS (CSS) Bir kez daha, bu kural Visual Studio kodunda yer alan stil sayfamızda yazılmıştır. Elementor’daki karanlık modla, genellikle sadece arka plan rengini veya metin rengini değiştiririz. Kuvvet sayfası yapılana kadar iş akışı devam eder. Firefox Devtools unsur seçmenlerini tanımlamak için, CSS yazma koduna karşı. Daha sonra, görünüşün görünümü altında doğrudan özel CSS girişine kopyalayıp ekliyoruz ve gece modumuzun/karanlık modumuzun şimdi sitenin tüm öğeleri için geçerli olup olmadığını görmek için test ediyoruz. Ayrıca, bu iş akışı için “benzersiz sınıf tanımlamasını” kesmek istiyorsanız, doğrudan Elementor Editor’da kendi özel CSS kimliğinizi veya sınıfınızı belirleyebilir ve ardından seçmenlerin karanlık moda stilini üretebilirsiniz. Ajansımızın sarı kalem iş akışı, özellikle Elementor web sitemiz için CSS’yi yönetmenin bir yolu olarak YellowPecil’i kullanır ve Elementor’a karanlık mod eklerken bunun iş akışımıza nasıl birleştirildiğini göstermek ister. Yellowpencil ile belirli öğeleri yönlendirebilir ve tıklayabilirsiniz ve bu da CSS düzenleyicinizi kendi seçmenleriyle otomatik olarak dolduracaktır. İlgileniyorsanız, şu makaleye bakın: YellowPenm çok zaman kazandırır ve birçok özel CSS’yi uygulamayı ve yönetmeyi çok kolaylaştırır. Yazmanıza bile gerek yok, çünkü bu aracın girişinizden otomatik olarak CSS üreten görsel bir kullanıcı arayüzü var.

Arka plan kuvveti GUI tarafından düzenlenir ve CSS kodu otomatik olarak oluşturulur ve uygulanır.

Gece modunda yeniden düzenlenmesi gereken öğeleri tıklayın.

Temel kodu oluşturduktan sonra, body.wp-night-mode-on ile başladığınızdan emin olun, Kaydet’i tıklayın, sitenize uygulanacaktır. Son Karanlık Mod sayfası. CSS kuralları Elementor için Ortak Karanlık Modu sadece ana başlıkların çoğunu değiştirebilir:
Body .wp-night-mode-on H1, gövde .wp-gece modu-on H2, gövde .wp-gece modu-on H3, gövde .wp-night-mode-on H4, gövde .wp-gece- H5 mod-on, gövde .wp-night-mode-on H6 {color: #fff}
Kod Dili: CSS (CSS) Değiştirilecek tüm parçaları belirleyerek bölümün arka planını değiştirebilirsiniz:
gövde .wp-gece modu-on bölüm {arka plan-color: #2f374a}

Kod Dili: CSS (CSS) Bunu sütunlar ve diğer seçmenlerle de yapabilirsiniz.

gövde .wp-night-mode-on .Elementor sütunu {arka plan-color: #2F374a}
Kod Dili: CSS (CSS) Genel CSS Elementor Seçicileri şunları içerir:

Element
elementler
Widget elemanı
elementler
Elementsors SPAN’i kullanmayı sever, böylece böyle görünen öğeleri işleyebilirsiniz,
“Spot ışığına” dikkat et
İle birlikte:
gövde .wp-gece modu-açık span {arka plan-color: #2f374a}
Kod Dili: CSS (CSS) Ayrıca, Hover efektini de ayarlayabilirsiniz (seçiminize daha spesifik olmak isteseniz bile):
gövde .wp-gece modu açıklığı: Hover {arka plan-color: pembe}
Kod Dili: CSS (CSS) Görüntü koyu arka planınızda çalışırsa, bırakabilirsiniz, ancak çoğu zaman değiştirilmesi gereken karanlık bir resminiz vardır. Bir yöntem koleksiyonu kullanarak Elementor’unuzun karanlık modundaki görüntüleri işlersiniz. İlk olarak, arka plan rengini değiştirirsiniz (yukarıdaki örnekte yaptığımız gibi). Rengi tamamen tersine çevirmek için CSS ters filtreleri (1) de uygulayabilirsiniz. Şeffaf bir arka plana sahip sağlam bir PNG’niz varsa bu iyidir. Bu adımı daha da ileriye taşıyarak, parlaklığı ve ters filtreyi birleştirebilirsiniz, ayrıca PNG’yi şeffaf bir arka planla beyaza değiştirebilirsiniz. Filtre: Parlaklık (0) Ters (1)
Kod Dili: HTTP (HTTP) Orijinal görüntüyü gizleyerek (opaklık, görüntüleme veya görünürlük) ve yeni bir şeyle değiştirmek için sarmalayıcıdaki arka plan görüntüsünü kullanarak kolayca değiştirebilirsiniz. Buna ek olarak, sadece elementteki karanlık moda uygulandığında stili değiştirmek, CSS kurallarını yazıp WordPress sitenize eklemek için stili değiştirmek için ihtiyacınız olan her öğe için seçim bulmanızdan oluşur. YouTube Eğitimi İlgileniyorsanız, bu YouTube öğreticimizdir. Bu, Elementor için özel olarak oluşturulmamıştır, ancak bu size genel bir rehber verecek ve Flementor web sitenize karanlık moda ekleme sürecini görselleştirmenize yardımcı olacaktır.

Sonuç Bu makalenin yararlı olduğunu umuyoruz ve Elementor web sitesine karanlık ön uç modunun nasıl ekleneceğini öğretiyoruz.Daha fazla okuma için, temel olarak aynı bilgileri içermesine rağmen (Elementor’a uyarlanmamış) bu makaleyi görebilirsiniz.Bu etkiyi birçok istemci web sitesinde uyguluyoruz, bu nedenle özel sorularınız varsa lütfen yorum bölümümüzle iletişime geçin.
Bu içeriği beğendiyseniz, aylık WordPress haber koleksiyonumuza, web sitesi ilhamına, özel tekliflere ve ilginç makalelere abone olun.
İstediğiniz zaman abone olmayı bırakın.Spam yapmıyoruz ve asla e -postanızı satmayacağız veya paylaşmayacağız.

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir