Divi Eklentisi Vurgusu: Yoğun İçerik

Yayınlanan: 2017-10-08

Divi Builder, gönderileri kategorilere göre tam genişlikte veya ızgara düzeninde görüntülemek için bir blog modülü içerir. Hiç blog düzeniniz üzerinde daha fazla kontrol istediniz mi? Content Intense adlı bir üçüncü taraf eklentisi ilginizi çekebilir.

Content Intense, blog modülünüze yeni bir görünüm kazandırmak için yeni düzenler ve stil özellikleri ekleyen BeSuperfly'ın bir eklentisidir. Standart blog modülünü temel alır, bu nedenle tüm tanıdık özellikleri içerir.

(Eklentiye geliştiricinin web sitesinden ulaşılabilir.)

Bu eklenti vurgusunda, özelliklere bir göz atacağız ve sayfada nasıl göründüğüne bakacağız. Ayrıca Ekstra'ya yükleyeceğim (ama tabii ki Divi ile de uyumlu).

Content Intense'i Yükleme

Herhangi bir eklenti gibi İçerik Yoğun'u yükleyin ve etkinleştirin. Eklenti etkinleştirildiğinde, kontrol panelindeki Ayarlar'da Content Intense Plugin Activation adlı yeni bir menü öğesi göreceksiniz. Bunu tıklayın ve API Anahtarınızı ve e-postanızı girin ve değişiklikleri kaydedin.

Yoğun İçerik Modülü

Divi Builder'a Content Intense adlı yeni bir modül eklendi.

İçerik sekmesi, yalnızca gönderileri, yalnızca sayfaları veya sayfaları ve gönderileri, görüntülenecek numarayı, kategorileri ve ofset numarasını görüntülemenize olanak tanır. Öne çıkan görseli, metayı (ayırıcı seçmenize olanak tanır), alıntıyı, gezinmeyi ve arka planı gösterin. Göreceğiniz gibi, ayarlardaki seçeneklerin sayısını ciddi şekilde basitleştiriyorum.

En benzersiz özelliklerden biri, WordPress kategorilerinin sayfalara eklenmesidir. Sayfaları görüntülemeyi seçerseniz, kategorilerini seçtiğinizde seçilirler.

Tasarım sekmesi, 5 düzenden birini seçmenize, kaplamayı etkinleştirmenize, başlık metnini, gövde metnini ve meta metni ayarlamanıza olanak tanır. Ayrıca kenarlığı, düğmeyi, aralığı ve animasyonu da ayarlayın.

Gelişmiş, bağlantının rel özniteliğinin değerini belirleyebilmeniz için düğme ilişkisi özelliklerini içerir. Bu, yer imleri oluşturmak, nofollow için bir bağlantı ayarlamak vb. için harikadır.

İçerik Yoğun Varsayılan Ayarlar

Varsayılan ayarlar, öne çıkan resmi, yazarın Gravatar'ı resmin alt kısmıyla örtüşecek şekilde görüntüler. Bunu meta sonrası, başlık, satır, alıntı sonrası ve vurgulu animasyonlu daha fazla oku düğmesi takip eder. Öne çıkmasına yardımcı olmak için bölüme bir arka plan ekledim.

Bu örnekte meta ayırıcı için bir yıldız işareti ekledim, alıntı sayısını 270'ten 100'e değiştirdim ve daha fazlasını oku düğmesini ortalanmış metinle değiştirdim. Tarih yerine, gönderinin ne kadar süre önce yayınlandığını gösterir. Yorum sayısını devre dışı bıraktım.

Bu, metnin arkasındaki arka plana biraz renk katar. Ayrıca düğmeyi sağa taşıdım ve alıntıyı 150'ye ayarladım.

Beş farklı düzen vardır. Şu ana kadar gördüğümüz örnekler, avatarlı 3 sütunlu, dikey düzende Atlas'ı kullanıyor. Her bir düzene bakalım. Varsayılan ayarları kullanıyorum.

Burası Alpler. Tek sütunlu, yatay alternatif bir düzendir. Metin arka planı, bölümde seçtiğim arka plan rengiyle eşleşiyor. Bunlar, düğme için üzerine gelme efektli düz kartlardır.

Bu, gönderinin öne çıkan görüntüsünü arka plan olarak kullanan 3 sütunlu, dikey bir düzen olan Himalayalar. Ayrıca düğme animasyonunu kullanır. Bu metni ayarlamalar olmadan görmek daha zordur. Bunu daha sonra bir kaplama ile düzelteceğiz.

Bu Rockies – fareyle üzerine gelme efektlerine sahip 3 sütunlu dikey bir düzen. Ayrıca öne çıkan görüntüyü arka plan olarak yerleştirir. Fareyle üzerine gelme efektleri, tam alıntıyı ortaya çıkarır ve daha fazlasını oku düğmesi. Metni daha okunabilir hale getirmek için bazı ayarlamalar yapacağız.

Bu Andes – 1 sütunlu, avatarlı dikey bir düzen. Öne çıkan görüntünün kırpılmış bir sürümünü kullanır ve metaları ayırmak için küçük çizgiler ve gönderileri ayırmak için daha büyük çizgiler kullanır.

Sayfanın altında gezinme düğmelerini göreceksiniz. Bunları devre dışı bırakabilir veya kendi metninizi ekleyebilirsiniz. Diğer düğmelerin stilini alırlar, bu nedenle daha fazla oku düğmelerine stil verdiğinizde, bunlara da stil vermiş olursunuz. Düğme yerine metin de kullanabilirsiniz.

Örnek – Atlas ile Alpler

Bu blog düzenini 2 Content Intense modülü kullanarak oluşturdum. İlki, navigasyon olmadan Alpler düzenini kullanıyor. İkinci modül Atlas'ı kullanır. İlk modülle aynı görüntüyü göstermemesi için ofsetini 1'e ayarladım. Yazı tipi rengini Arimo (en sevdiğim) olarak ayarladım. Düğmeler bir degrade kullanır. Fareyle üzerine gelindiğinde düz bir renge giderler ve harf aralığını artırırlar. Gezinme düğmesi eşleşir.

Örnek – Alpler

Değişen düzenlerin hastasıyım. Alpler'in hiçbir değişiklik yapmadan görüntüsünü seviyorum, bu yüzden sadece birkaç küçük ayar yaptım. Kırmızı bir kenarlık, kırmızı kaplama ekledim ve düğme ile başlık renklerini değiştirdim. Ayrıca yazı tipini Dosis olarak değiştirdim ve kalın yaptım. Bu, üzerine gelindiğinde bindirmeyi gösterir.

Aslında sınır olmadan daha çok seviyorum. Bu, fareyle üzerine gelindiğinde düğmeyi gösterir.

Örnek – And Dağları

Bu örnekte 6 farklı Content Intense modülü kullanılmaktadır - bunların tümü Andes kullanır ve her biri önceki modülden 1 fazla dengelenmiştir. Bölüme bindirmeli bir arka plan ekledim. Başlık yazı tipi Comfortaa'dır. Son modül navigasyonu kullanır. Düğmeleri metin olarak değiştirdim.

İşte normal tek sütun tasarımına bir bakış. Ayrıca bir vurgulu yer paylaşımı ekledim. Diğer her şey varsayılandır.

Örnek – Himalayalar

Bu, metnin arkasında bir kaplama ile Himalayaları kullanır. Meta'yı devre dışı bıraktım, metni açık hale getirdim, düğme stilini beyaza değiştirdim ve düğme yazı tipini 12 puntoya düşürdüm. Başlık metni Acıdır. Eklediğim tek animasyon düğme vurgusu içindir. Bu, harika bir CTA veya hizmetlerinizi tanımlayan sayfalara bağlantılar sağlayacaktır.

Örnek – Rockies

Rockies'in görünüşünü seviyorum. Metni getiren ve daha fazla oku düğmesinin üzerine gelme animasyonu ile güzel bir gölge efekti vardır. Bir metin yerleşimi yerleştirebilirdim ama resmi kapatmak istemedim. Bunun yerine, metni açık olarak değiştirdim. Ayrıca meta ve düğmenin renklerini değiştirdim ve ayırıcıyı tire olarak değiştirdim.

Elbette bir kaplama iyi görünüyor. Siyah bir kaplama ekledim ve opaklığı değiştirdim, böylece görüntünün bir kısmı görünecek. Sol üst köşedeki tarih de bindirmeyi kullanır. Düğmeyi metin olarak değiştirdim ve sağa taşıdım. Kartların altındaki bu üç nokta ve çizgiyi seviyorum. Görsel bir parlama dokunuşu ekleyen küçük bir ayrıntıdır.

Örnek – Ekstra

Content Intense, Extra ile harika çalışır. Andes kullandığım yerlerde sadece bazı küçük ayarlamalar yapmak zorunda kaldım. Örneğimde metin alanı için beyaz bir arka plan yerleştirmiştim. Beyaz metin kullandığım için sadece koyu olarak değiştirdim. Yukarıdaki örnek Rockies'tir. Tek fark, daha fazla oku bağlantısının metin rengiydi.

İndirilebilir Stiller

Animasyonlar CSS ile eklenebilir. Geliştiricinin web sitesi, fareyle üzerine gelindiğinde metni hareket ettiren yukarıdaki gibi oluşturdukları birkaç animasyonu gösterir. Bu ve diğer stiller onlardan bir JSON dosyasında indirilebilir.

Lisans ve Belgeler

İki lisans arasından seçim yapın (ikisi de yeniden satışa izin vermez):

  • Standart Lisans: tek bir web sitesinde kullanım için. Geliştirme Projesi için 1 ve Canlı Proje için 1 içerir.
  • Sınırsız Lisans: Hem kişisel hem de istemci kullanımı için sınırsız web sitesinde kullanılabilir.

Güncellemeler otomatiktir. Content Intense, geliştiricinin web sitesinde mevcuttur.

Belgeler geliştiricinin web sitesinde kanıtlanmıştır. Sizi ayarlamalardan geçirir ve yol boyunca demolar sağlar.

Son düşünceler

Content Intense'in bazı güzel düzen özellikleri vardır ve gelecekte daha da fazla düzen eklenecektir, bu yüzden bu sadece başlangıç. Düzenlerin her biri, modülün ayarlarıyla şekillendirilebilir ve CSS ile daha da özelleştirilebilir. Kullanımı sezgiseldir. Blogunuza farklı bir görünüm kazandırmak istiyorsanız, aradığınız eklenti Content Intense olabilir.

Senden duymak istiyoruz. Content Intense'i denediniz mi? Aşağıdaki yorumlarda bununla ilgili deneyiminizi bize bildirin.

LanKoga / Shutterstock.com aracılığıyla Öne Çıkan Görsel