Divi’nin basit zarafetle geri çekilme zamanının sayaçlarını nasıl organize edilir
Bu yazı, Divi Geri Time Counters modülünü organize etmenin 5 etkileyici yolunu başlıklı Mini Serimizde 5’in 1. Bölümüdür. Her birine nasıl ulaşacağına dair bir öğretici ile Divi’nin geri sayım modülünün beş benzersiz örneği için bu haftayı dört gözle bekleyin!
Web sitenize zaman sayma zamanı ekleyin, ziyaretçileri web sitenize dahil etmenin çok etkili bir yolu olabilir. Ya özel teklifler veya promosyonlar için aciliyet kazanmak, ürün veya epik web sitesinin başlatılmasından önce gerginlik oluşturmak veya düğün veya konserler gibi belirli etkinliklere geri dönmek istersiniz, zaman sayımı için mükemmel “ek dokunuş” olabilir. WordPress’iniz. İnternet sitesi.
Bu mini dizide, Divi’nin geriye dönük zaman sayımlarını etkileyici bir şekilde organize etmenin 5 farklı yolunu sizinle paylaşacağım. Bununla birlikte, sadece tasarımı size göstermek yerine, daha derine dalacağım ve tasarım sürecinin tüm yönleri hakkında öğreticiler sağlayacağım, böylece kendiniz nasıl yapacağınızı öğrenebilirsiniz. Divi’nin Geriye Sayım Modülü: Dalış yapmadan önce ve sonra, neye başladığımızı görmek önemlidir. Aşağıda, varsayılan ayarlarla Divi Geri Sayı Modülünün ekran görüntüsü verilmiştir. Şimdi, varsayılan ayarlarıyla Divi’nin geri sayım modülünü kullanmanın hiçbir zararı yoktur. Bu basit, temiz ve başarılı olacak. Ancak, bu mini serisi “etkileyici” başlığını korumak için birkaç adım önde bir tasarım getirmeyi amaçlıyor. Öyleyse bugün ne yapacağımızı görelim. Bu benzersiz zaman sayımı yapan şey, geriye dönük sayımın arkasındaki tam ekran arka plan görüntüsüdür. Geri sayım süresinin pürüzsüz yarı saydamının arka plan rengi bir ayırma sağlar ve arka plandan öne çıkmasına yardımcı olur, ancak yine de arka plan görüntüsünün görülmesine izin verir. Bu örnekle ilgili en güzel şey, farklı renk paletleri ile birçok farklı görüntü stilini kullanabilmeniz ve yine de iyi görünmesidir. Böylece, sizin için benzersiz bir şey yaratmak için bir başlangıç noktası olarak takip edebilir ve kullanabilirsiniz. Çoğu zaman sayaçları Divi ayarları ve CSS aracılığıyla elde edilir, bu nedenle yapmamız gereken çok fazla hazırlık çalışması yoktur. Ancak, arka plan görüntülerini seçmemiz ve geliştirmemiz gerekir. Daha önce de belirttiğim gibi, görüntüleri seçmede çok fazla esnekliğe sahip olacaksınız. Sayma süresinin rengi geriye doğru nötr olduğundan ve arka plan yarı saydam olduğundan, bu bize farklı görüntülerle oynamak ve hala iyi görünmesini sağlamak için çok fazla alan sağlar.
Stok görüntüleri satın almak ve ücretsiz resimler bulmak için birçok çevrimiçi yer vardır. En sevdiğim ücretsiz görüntü kaynağı unssplash.com ve bugünün öğreticisi için bir resim buldum. Görüntüyü seçtikten sonra, zaman sayma süresine odaklanmak için görüntüyü biraz karartmaya yardımcı olacaktır. Bugünün öğreticisi için resimler çizmek için Adobe Photoshop’u doldurma katmanına siyah kullanıyorum. Daha sonra, önceki öğreticimizin adım adım nasıl yapılacağını gösterene kadar opaklık ile oynadım. Photoshop’unuz yoksa, Pixlr editörü gibi daha ucuz (veya ücretsiz) başka alternatifler var, basit görüntüler yürütmek için çok iyidir. İşte düzenlenen görüntülerden önce ve sonra.
Tasarımı şimdi Divi ile uygulamak, çizimlerimiz seçildikten ve hazırlandıktan sonra Divi’ye gitme zamanı. Bu özel istifa işlevlerini web sitesi için bir yön sayfası olarak hesaplamak, WordPress’te yeni bir sayfa oluşturalım, bir başlık verelim, divi’yi etkinleştirelim ve görsel oluşturucu açalım. Yeni bir sayfa oluşturmanıza gerek olmadığını unutmayın. Mevcut sayfaya geri çekilmek için zaman eklemek istiyorsanız bu ilk adımı atlayın.
Yeni bir sayfa oluşturduysanız, bizim için boş bir parça var. Değilse, bunu mevcut Divi sayfasına eklerseniz yeni bir parça oluşturun. Şimdi, bir satır sütunu yerleştirin ve satıra geri çekilmek için zaman sayımlarını ekleyin. Daha sonra geriye doğru sayılan tarihi seçmeniz istenecektir. Ayrıca geri çekilme zamanının başlığını da seçebilirsiniz. Örneğimizde, başlığımız olarak “hemen lansman …” ekledik. Yakında modül için ayarları değiştirmek için geri döneceğiz, ancak şimdilik modül ayarlarını kaydetmek için Yeşil onay kutusuna tıklayın. Şimdi, resmimizi arka plan görüntüsü olarak ekleyeceğiz. Bunu yapmak için, mavi ile altı çizili görene kadar imleci bölüme yönlendirin. Ardından, sol üstte, bölüm ayarlarını açmak için dişli simgesini tıklayın. Ardından, resminizi arka plan görüntüsü olarak yükleyin. Aşağıdaki resimde, şimdiye kadar sahip olduğumuzu göreceksiniz. Bu iyi değil, ama ilerleme kaydediyoruz.
Modül ayarlarını ayarlamak, zaman sayma ayarlarını kazmaya başlama zamanıdır. İmleci geri sayım için gidin ve modül ayarlarını açın (imleci zaman sayımlarına geriye doğru yönlendirdiğinizde görünen koyu gri kontrol setindeki dişli simgesini tıklayın).
Genel ayarlarda: Metnin rengini ‘karanlık’ olarak değiştirin ‘Arka plan rengini kullanın’ ‘hayır’ olarak değiştirin
Tasarım Ayarlarında:
Tüm yazı tiplerini ‘Arvo’ olarak değiştirin
Yazı tipi ve yazı tipi etiketini kalın harflerle değiştirin
Yazı tipi etiketini tüm büyük harfle değiştirin (TT simgesi)
Başlık metninin rengini beyaza değiştirin (#ffffff)
Etiket metninin rengini beyaz olarak değiştirin (#ffffff) Yazı tipi numaralarının boyutunu 52px’e ve etiket yazı tipinin boyutunu 12 piksel olarak değiştirin.
Alt için özel kenar boşluğuna 0px ekleyin.
Satır ayarlarımızı ayarlamanın artık satırda bazı küçük ayarlamalar yapması gerekiyor. İmleci satıra gidin ve satır ayarlarını açın (imleci hatta yönlendirdiğinizde görünen yeşil kontrol setindeki dişli simgesini tıklayın). Genel ayarları aynı tutacaksınız, ancak tasarım ayarlarında bazı ayarlamalar yapmamız gerekiyor:
Arka plan rengini RGBA olarak değiştirin (255,255,255.0.1)
‘Hücreseldeki Dolgu Sütun Ayarlarını Kaydet’i’ Evet ‘olarak değiştirin
Sıranın arka plan rengi, geri sayım süresini şeffaf hissettiren şeydir. Temel olarak, sadece%10’a düşürülen opaklıklı beyaz bir arka plandır. Veya başka bir deyişle,% 90 şeffaftır. Renk seçmeninin yanındaki ikinci kaydırma kontrolünü kullanarak opaklığı ayarlayabilirsiniz.
Sonra ana çizgi öğelerine birkaç CSS hattı ekleyeceğiz. Çizgi ayarlarından CSS sekmesine gidin. “Ana öğe” kutusunu görene kadar aşağı kaydırın. Ve kutudaki aşağıdaki CSS’yi yapıştırın:
Max-Width:%50;
Marj-sol: Otomatik;
Marj-Sağ: Otomatik;
Yukarıdaki kod birkaç şey yapar. Birincisi, bir satırın ekranın% 50’sinden fazlasını almayacaktır (maksimum genişlik:% 50). Ve genişliği değiştirdiğimiz için, ortada kalmasını sağlamalıyız (marj-sol: otomatik; marj-su: otomatik). Son olarak, satırın tamamen dikey olarak değil, ortanın biraz üzerinde olmasını istiyorum. Bunu başarmak için VH (yüksek görünüm) kullanacağız. Üst: 20VH ekleyerek, ekranın üst kısmından uzaklık, görünümün toplam yüksekliğinin% 20’si olacaktır. İstediğiniz yere almak için bununla oynayabilirsiniz. Bizim parçamızın ayarlarını ayarlamak, bölümün ayarlarında yapılması gereken çok küçük bir ince ayar vardır. Bölüm ayarlarını açın (imleci o bölüme yönlendirdiğinizde görünen mavi kontrol kümesindeki dişli simgesini tıklayın) ve bölüm ayarlarındaki CSS sekmesini tıklayın. Ana öğeye gidin ve aşağıdaki CSS hattını ekleyin: Yükseklik: 100VH; Bu CSS hattı “Tam Ekran” bölümünü veya başka bir deyişle, ViewPort görünümünün% 100’ünü oluşturur. Bu, Divi’deki tam başlık için bir kontrol olarak mevcut olan tam ekran ayarlarına çok benzer. Yani, şimdiye kadar sahip olduğumuz şey bu.
Bunun gerçekten oluşmaya başladığını görebilirsiniz. Neredeyse geldik. CSS Custom Ekle Eklememiz gereken son şey küçük bir mucize CSS Custom! Evet, teknik olarak bölümleri ve satırları ayarlamak için birkaç CSS ekledik, ancak bunun için Divi tema panelinden veya CSS özel kutu ayarlarından ayrı sayfa ayarlarını özel CSS kutusuna ekleyeceğiz. Neden oraya ekliyoruz ve doğrudan modül, satır veya bölüme değil? Divi, modül ayarlarında, çizgilerde ve bölümlerde önceden hedeflenmiş bir CSS alanına sahiptir, ancak Divi stil sayfasında bulunan her CSS sınıfını hedeflemez. CSS eklemeye başlamadan önce, CSS’yi yalnızca şu anda üzerinde çalıştığımız modülden ayarlayacağımız ve sitede geriye doğru tüm sayaçları değil veya yerinde olacağımız için kendi özel sınıfımızı eklemeliyiz. . Modül ayarlarını açın ve modül ayarlarından CSS sekmesine tıklayın ve CSS sınıfı olarak özel sayaç-1 ekleyin.
Tamam, şimdi özel CSS eklemeye hazırız. Yukarıda, Divi Tema Seçenek Panelinde özel bir CSS kutusuna CSS ekleme seçeneğiniz olduğunu veya üzerinde çalıştığınız her sayfa için sayfa ayarlarında özel bir CSS kutusuna sahip olduğunuzdan bahsettim. Başka bir sayfaya aynı stille daha sonra geri çekilmek için daha fazla zaman ekleyeceğinizi düşünüyorsanız, Divi Tema Seçenek Paneline CSS ekleyin. Değilse, sayfa ayarları için özel bir CSS kutusuna ekleyebilirsiniz. Sayfa ayarlarını açmak için ekranınızın altındaki Mor Dişli simgesini tıklayın. Dişli simgesini görmüyorsanız, kalan menüyü görüntülemek için gördüğünüz Mor düğmesini tıklayın. Ardından, CSS sekmesine tıklayın ve aşağıdaki CSS’yi kutuya yapıştırın … Özel Çarşamba-1.ET_PB_Cuntdown_Timer .section.Values {genişlik:%21;
}
.Custom-countdown-1 div. Bölüm { Görüntü yok; }
.Custom-countdown-1. Değer {
Mektup Alanı: 6px;
Arka plan rengi: beyaz;
Dolgu: 30px 6px! Önemli;
Dolgu-sol: 11 piksel! Önemli;
}
.Custom-countdown-1. Saatler {
Marj-sol: 21px;
}
Bazı farklı şeylerin geri zaman sayımında değiştiğini hemen göreceksiniz (görsel oluşturucudan doğrudan güncelleme sayesinde). Her parçanın zaman sayım zamanında ne yaptığını görmek için yukarıdaki CSS’yi küçük bir parçaya eklemenizi öneririm. Bu aynı zamanda isterseniz kolayca daha fazla ayarlamanıza izin verecektir. Değişikliklerinizi kaydettiğinizden emin olun; O zaman az önce ne yaptığınıza hayran olabilirsiniz!
