Divi’de oldukça şeffaf bir baharat zamanı nasıl yapılır
Bu yazı, Divi Geri Time Counters modülünü organize etmenin 5 etkileyici yolunu başlıklı Mini Serimizde 5’in 2. 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!
Umarım şimdiye kadar mini serimizi takip etmişsinizdir! Bugün, divi web siteniz için nasıl etkileyici bir zaman sayımı yapacağınızı öğreten gün. İlk gün boyunca tartıştığımız gibi, zaman -retreat, yeni ürünler, web siteleri, etkinlikler vb. İçin beklenti oluşturmak için çok etkili bir yol olabilir.
Web sitenizin herhangi bir kısmı gibi, zaman sayma süresi sadece sadece işlevsel hedeflerine ulaşmak için var olan sıkıcı bir unsur olmamalıdır. Bu aynı zamanda şirketin daha uzak sayfalarının güzel bir parçası olabilir. Sayfadan atlamayı amaçlayan cesur ve renkli geriye dönük zamanın tezgahlarının aksine, bugün ayarlanan ayarlanmış zaman sayaçlarının sanat eserinin bu kısmı gibi doğrudan sayfaya güzelce karışması amaçlanmıştır; Neredeyse arka plan görüntüsünün bir parçasıymış gibi.
Divi’nin Geriye Sayım Modülü: Önce ve sonrası bu mini seri Divi’yi ayarlamalarla daha fazla teşvik etmekle ilgili olduğu için, ilk noktayı görmek önemlidir. Veya zaman sayma süresi varsayılandır. Şimdi, bugün ne yapacağımızı görelim. Serinin ilk gününde yaptığımız ilk geriye dönük zaman sayımına benzer şekilde, bu sefer geri sayım tam ekran arka plan görüntüleri kullanıyor. Yazımızın başlığı tarafından önerildiği gibi “güzel” olmak için güzel bir arka plan fotoğrafı ile başlamalıdır. Yakında bunun hakkında daha fazla konuşacağız. Arka planın şeffaflığı, kış etkisine katkıda bulunan ve arka plan görüntülerinin görüntülenmesine izin veren bir “bulanık cam” ekran verir, bu da zaman gençleştirmesini resme birleştirmeye yardımcı olur. Son olarak, zaman -sırt sayma sayılarında ve başlığın arka planında kullanılan renkler, fotoğraftaki ağaçlarla aynı renktedir. Bir kez daha, bu, zamanın geri sayımının resmin bir parçası olması gerektiği gibi görünmesine yardımcı olur. Divi geriye dönük zaman “şeffaf güzel” için tasarım modülünü YouTube kanalına abone yapmak Tasarım öğelerini hazırlıyoruz, hazırlamamız gereken tek tasarım öğesi bir arka plan görüntüsüdür. Diğer geriye dönük zaman sayaçları, Divi’nin varsayılan kontrolü ve özel CSS ile yapılır.
Kullanacağımız görüntüler Pexels’ten ücretsiz olarak indirilebilir ve atıf olmadan kullanılabilir. #526771 Lütfen ve yukarıdaki bağlantıyı tıklayın ve “Ücretsiz İndir” düğmesini tıklayın.
Divi’ye gitmeden önce tasarım öğelerini hazırlamak için yapmamız gereken son şey, doğru rengi kullanmaktır. Yukarıda bahsettiğim gibi, bu tasarımın nedenlerinden biri, resmimizdeki ağaçlarda bulunan rengi alıp zaman sayım zamanımıza koymamızdı. Bu onun iyi karışmasına yardımcı olur. Bunu yapmak için Photoshop’u kullanacağım, ancak Chrome tarayıcısında bulunan geliştirici (müfettiş) dahil olmak üzere bir görüntünün rengini almak için kullanabileceğiniz başka birçok araç var. Bu özel arka plan görüntüsünü karıştırmayı kolaylaştıran şey, aslında çeşitli desenlerde sadece iki rengi olmasıdır: beyaz ve koyu yeşil grimsi. Arka plan görüntüsü olarak kullanılacak başka bir görüntü seçecekseniz, minimum renge sahip görüntüleri aramayı öneririm. Tasarımı divi ile uygulayarak, resmimiz indirildi ve hangi rengin kullanılacağını biliyoruz. Şimdi Divi’ye gitme zamanı. Bu geriye doğru hesaplayın, tüm yol tarifleri veya “oluşturulma” sayfaları olarak iyi görünecektir, ancak isterseniz mevcut sayfaya da ekleyebilirsiniz. Bu öğretici için, yeni bir sayfaya eklemeniz için size rehberlik edeceğim, ancak mevcut sayfaya eklerseniz yine de kolayca takip edebilirsiniz. Bu nedenle, yeni bir sayfa oluşturacağım, bir başlık vereceğim, divi’yi etkinleştireceğim ve “Visual Builder kullan” mavi düğmesini tıklayacağım. Benim gibi yeni bir sayfa oluşturursanız, onun yerine boş bir parça var. Şimdi Green Circle simgesine (+) tıklayarak satır ekleyeceğiz, ardından aşağıdaki resimde kırmızı okla gösterildiği gibi bir sütun satırı için simgeyi tıklayacağız. Divi, otomatik olarak modülü listeden seçmenizi isteyecektir. “Geriye doğru hesaplayın” yazmaya başladığınızda DIVI otomatik olarak modülü filtreleyecektir. Ardından sayfaya eklemek için geri sayım saatini tıklayın. Zamanı seçmenin yanı sıra zaman sayma süresinin başlığını ekleyebilir ve ekleyebilirsiniz. Sadece eğlenmek için doğum günümü seçtim
Yakında modül ayarlarına döneceğiz, ancak şimdilik modülü kaydetmek ve ayarları kapatmak için lütfen Yeşil Kontrol İşareti düğmesine tıklayın. Ardından, arka plan resmimizi bu bölüme 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, aşağıdaki ekran görüntüsünde gösterildiği gibi Yükle düğmesine tıklayarak görüntünüzü arka plan görüntüsü olarak yükleyin. Benimle aynı görüntüyü kullandığınızı varsayarsak, şimdiye kadar geri sayımınız budur. İlerleme kaydediyoruz! Modül ayarlarını ayarlama Şimdi, -Counter düzenleyici ayarları için zamanını keşfetmenin zamanı geldi. İ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). Aşağıda, değiştireceğimiz ayarları bulacaksınız. İsimsiz ayarlar varsa, bunu varsayılan olarak bırakabilirsiniz. Genel Ayarlar sekmesinde: Arka plan rengini: RGBA (255,255,255.0.5) olarak değiştirin Tasarım Ayarları sekmesinde: Tüm yazı tiplerini ‘pt sans dar’ olarak değiştirin Yazı tipi başlığını tüm büyük harfle değiştirin (TT simgesi)
Yazı tipi etiketini kalın ve tüm büyük harflerle değiştirin (TT simgesi)
Metin numarasının ve etiketin rengini #526771 olarak değiştirin
Başlık yazı tipi boyutunu 29 olarak değiştirin
Yazı tipi numarasının boyutunu 65 piksel olarak değiştirin
Yazı tipi etiketinin boyutunu 15px olarak değiştirin
CSS Custom Ekle Eklememiz gereken son şey küçük bir mucize CSS Custom! Bu serinin son iki günü gibi, CSS Kustom Divi Tema Seçenekleri kutusuna veya tek tek sayfalar için CSS Kustom kutusuna özel bir CSS eklemeyi seçebilirsiniz. Fark, ayrı sayfa ayarlarının yalnızca sayfa için CSS içermesidir, divi temasına eklenirken her sayfada CSS içerecektir. Bunlardan biri işe yarayacak, sadece başka bir sayfada aynı geriye sayımı kullanmak isteyip istemediğinize bağlıdır. Öyleyse, devam edin ve Divi Tema seçeneğine ekleyin.
Modül bölümündeki veya hattındaki CSS sekmesinde değil, yukarıda belirtilen iki seçenekten birine neden CSS eklediğimizi merak ediyor olabilirsiniz. Bunun nedeni, DIVI’nin modüller, satırlar ve bölümler için CSS sekmesi ayarlarında önceden hedeflenmiş bir CSS alanına sahip olması, ancak Divi Stylesheet’te bulunan her CSS sınıfını hedeflememesidir. Bu yüzden daha fazla adım atmamız ve kendi CSS’imizi eklememiz gerekiyor. CSS’imizi eklemeye başlamadan önce, CSS’yi yalnızca şu anda üzerinde çalıştığımız modülden ayarlayacağımız için kendi özel sınıfımızı eklemeliyiz ve sitede olmayacak veya tüm zaman sayma süresi olmayacak alan. Modül ayarlarını açın ve modül ayarlarından CSS sekmesine tıklayın ve CSS sınıfı olarak özel sayım-3 ekleyin. Şimdi özel CSS’imizi eklemeye hazırız! CSS’yi yalnızca bir sayfaya eklemeye karar verirseniz, Divi sayfası ayarlarını açmanız gerekir. Bunu yapmak 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-3.et_pb_countdown_Timer {
Maksimum genişlik: 580px;
Marj-sol: Otomatik; Marj-Sağ: Otomatik;
} .Custom-countdown-3.et_pb_countdown_timer. Başlık {
Arka plan rengi: #6F848D;
Dolgu Top: 10 piksel;
Dolgu Alt: 10 piksel;
Genişlik:%90;
Marj-sol: Otomatik;
Marj-Sağ: Otomatik;
Marj -TOP: -68px;
}
.Custom-countdown-3 .et_pb_cuntdown_timer .sep {
Renk: #969696;
}
.Custom-countdown-3. Günler {marj-sağ: 12px;
}
Benim gibi ayrı bir Divi sayfa ayarlarına özel bir CSS yerleştirmeyi seçerseniz, geri sayımın anında değiştiğini fark edebilirsiniz. Bu elbette Divi’nin yeni görsel üreticisinin bir parçası olan doğrudan güncelleme sayesinde. Bu doğrudan güncelleme birçok nedenden dolayı çok iyidir, ancak bu örnekte CSS ile bu, CSS’nin tam olarak ne yaptığını görmenizi sağlar. Bu yüzden CSS’yi birkaç parçaya eklemenizi öneririm. CSS’nin nasıl çalıştığını öğrenmenize yardımcı olacaktır. Son olarak, değişikliklerinizi kaydettiğinizden emin olun! Değişiklikleri sayfa ayarlarında ve tüm sayfalarda kaydetmelisiniz. Şimdi bitirdik! Şimdi devam edin ve az önce yaptığınız şey için kendinize bir pat verin. Şöyle görünmeli: Yarın: Divi web sitenizde gerçekten eşsiz ve etkileyici bir zaman ayırma sayımı yapmak için bu öğreticiden ilham alıyorsunuz! Unutmayın, bu mini serimizde sadece 5. bölüm. Yarın geri dönün, size “cesur ve renkli” olan geriye dönük bir zamanın nasıl yapılacağını göstereceğim! Büyük duyuruları, yararlı ipuçlarını veya divi freebie’yi asla kaçırmayacak şekilde e -posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun!
