WordPress'te İçerik Kutuları Nasıl Oluşturulur (CSS ile)

Bir içerik kutusu belirli paragrafları vurgular. İçeriği, HTML etiketini kullanarak biçimlendirilmiş düzende ve kutularda sarar . Bu kutular CSS kullanılarak oluşturulur, tasarlanır ve şekillendirilir.

Bir içerik kutusu kullanarak, içindeki metnin etrafına veya arkasına bir kutu koyabilirsiniz. WordPress.

Dolgu, kenar boşluğu, kenarlık, renk ve sütunları kullanarak kendi içerik kutularınızı oluşturabilirsiniz. Kutularınıza ekstra stil eklemek için span gibi HTML komutlarını da kullanabilirsiniz.

Düzenli bir okuyucuysanız, bunları yazılarımda oldukça sık kullandığımı fark etmişsinizdir. Ne olduğunu bilmiyorsanız, şöyle görünüyor:

Burada bazı kişilerin bilgi, özellik veya kısa kod kutusu olarak bildiklerini görüyorsunuz. Ancak, her üç örnek de öncelikle içerik kutuları olarak adlandırılır ve aynıdır.

Başlamak

İçerik kutularını birçok şey için kullanabilirsiniz. Bir ihtiyati adımın vurgulanmasından, bir sorumluluk reddi beyanından, ifşa veya basit bir ipucu. Sadece içeriğinizde insanların gerçekten keyif aldığı yeni bir hoş unsur yaratır.

Ziyaretçilerinizin ilgisini çekmek için etkili bir tekniktir.

Birçok web sitesi, özellikleri, hizmetleri ve iş deneyimini görüntülemek için içerik kutuları kullanır.

CSS Kullanarak İçerik Kutuları Nasıl Oluşturulur

Pek çok içerik kutusu türü vardır ve hepsi bazı yönlerden farklıdır.

Size birkaç farklı içerik kutusunun demosunu göstereceğim ve her birinin altında WordPress CSS dosyanıza kopyalayabileceğiniz/yapıştırabileceğiniz CSS kodunu vereceğim.

1. Başlıksız

Bu, herhangi bir başlık alanı olmayan bir içerik kutusu türüdür. Bunları herhangi bir metni vurgulamak için kullanabilirsiniz, ancak herhangi bir başlık veya başlık olmadan.

Bunu kullanmak için, aşağıda verilen CSS'yi kopyalayıp WordPress CSS dosyanıza yapıştırın.

.bfb-content-box{
background-color: #42d1fd;
border-color: #d9f6ff;
color: #ffffff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

Bunu blog yazılarınızda kullanmanız gerektiğinde, şu adımları izleyin:

  1. WordPress yayın düzenleyicinizi açın
  2. Metin düzenleyiciye geç

Sonra yazın:

<div class="bfb-content-box"> your text here </div>


Koddaki değeri değiştirerek arka plan rengini değiştirebilirsiniz. background-color:. Renginizin onaltılı kodunu Google'da arayın ve kopyalayıp/yapıştırın. background-color: CSS kodunda.

2. Başlıklı ve Beyaz Arka Planlı İçerik Kutusu

Bu, başlık alanına sahip bir içerik kutusu türüdür. En alta bir başlık ekleyebilirsiniz ve altındaki metin arka planı beyaz olacaktır.

Bu içerik kutusunu kullanmak için WordPress CSS dosyanıza şu kod satırını ekleyin:

.su-box-title {
display: block;
padding: .5em 1em;
font-weight: 700;
font-size: 1.1em;
background-color: #4fff59;
color: #FFFFFF;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-color: #3fcc47;
border-radius: 3px;
}

Ardından şu kodu ekleyin:

.su-box-content.green {
background-color: #fff;
color: #444;
padding: 1em;
border-color: #3fcc47;
border-radius: 3px;
}

Bu özel içerik kutusunu görüntülemek için, bu kodu göstermek istediğiniz yere yapıştırın:

<div class="su-box-content green"> <span class="su-box-title"> your title</span> your text here </div>



Kutularınızı iyi bir cazibe merkezi haline getirmek için başlığın önüne bir ifade veya simge de ekleyebilirsiniz.

3. Başlıklı ve Renkli Metin Arka Planlı İçerik Kutusu

Bu içerik kutusu, özellikle çift renk tonu nedeniyle çok çekici görünüyor.

Döşeme güzel bir opak başlık bloğu görüntüler ve bunun altında içeriğin pürüzsüz yarı saydam kırmızı bir arka planı vardır. En iyi yanı, başlık bloğunu ve içerik arka plan rengini ayrı ayrı değiştirebilirsiniz.

Aşağıdaki kodu WordPress CSS dosyanıza kopyalayın/yapıştırın:

#primary .entry-content .content-box .title {
margin: -2rem -2rem 1rem -2rem;
padding: 0.5rem 2rem 0.5rem 1rem;
display: block;
font-weight: bold;
color: #FFF;
font-size: 1.125rem;
}

Ve sonra bu kodu yapıştırın:

.entry-content .content-box.bforbloggers1{
border-color: #e22828;
}

.entry-content .content-box.bforbloggers1{
background: rgba(226,40,40,0.2);
}

.entry-content .content-box.bforbloggers1.title {
background: #e22828;
}

.entry-content .content-box {
border-radius: 5px;
border: 1px solid;
padding: 2rem 2rem 1rem 2rem;
margin: 0 0 2rem 0;
font-weight: normal;
}

Bu içerik kutusunu göstermek için aşağıda gösterilen kodu kullanın:

<div class="content-box bforbloggers1"> <span class="title"> Your title here </span> Your content here.</div>


4. Başlık ve Arka Plan Rengi Olmadan

Bu, en basit görünen içerik kutularından biridir. Minimaldir ve bir metni ve görüntüleri mükemmel bir şekilde sarma işini yapar.

Bunu kullanmak için aşağıdaki CSS kodunu WordPress CSS dosyanıza kopyalayın/yapıştırın:

.box1{
border: 1px solid #10ef53;
}

Bunu blogunuzda görüntülemek için şu kodu kopyalayın/yapıştırın:

<div class="box1">
This text is enclosed in a box.
</div>



Simgelerle Öne Çıkan İçerik Kutuları

SaaS veya satmak için diğer dijital ürünleri olan birçok web sitesi özellik kutuları ve sütunlar kullanır. Bu özellik kutuları, müşterilerinize sunduğunuz en iyi özelliklerin ve hizmetlerin neler olduğunu daha iyi bir şekilde göstermenize yardımcı olacaktır.

Bu tür bir içerik kutusu oluşturmak için adlı bir WordPress eklentisi yüklemeniz gerekir. Gelişmiş WP Sütunları.

Yükledikten sonra, adlı başka bir eklenti yüklemeniz gerekir. WPSVG Simgeleri.

Advanced WP Columns'u etkinleştirdikten sonra ayarlarına gidin. İçinde "sütun sınıfı” alan girişi yeni sütunlar ve kaydet'e basın.

Özellik kutusunu eklemek istediğiniz yeni bir sayfa oluşturun. WordPress düzenleyicisinin üst kısmında, gelişmiş sütunlar eklemek için yeni bir düğme ve SVG simgeleri ekle içeriğinizde.

Gelişmiş wp sütunları düğmesine tıklayın ve tıklayın boş ve sonraki ekranda eklemek istediğiniz sütun sayısını seçin.

Ardından tüm boş sütunlara bir metin girin ve tıklayın. Ekle.

Oluşturduğunuz yeni sütunlar var ve bunları şimdi yazı düzenleyicinizde göreceksiniz. İmlecinizi boşluk bırakmadan metnin hemen önüne götürün. Simge Ekle düğmesine basın.

Aşağıdakilerden bir simge seçmeniz için şöyle bir açılır pencere görünür:

İstediğiniz herhangi bir simgeyi seçin ve “karış” düğmesine ve ardından Simge Ekle buton. Diğer sütun kutularına da simgeler eklemek için bunu tekrarlayın.

WP SVG Simgeleri, canlı sayfanızda simgeleri görüntülemek için kutularınıza bir kısa kod ekler. Bu nedenle, büyük görünmelerini sağlamak için aşağıdaki CSS kodunu WordPress CSS dosyanıza kopyalayın/yapıştırın:

span.wp-svg-smile.smile{
font-size:100px;
}
span.wp-svg-rocket.rocket{
font-size:100px;
}
span.wp-svg-bubbles.bubbles{
font-size:100px;
}
.newcolumns {
border:1.25px solid #fff;
min-height:200px;
padding-top:20px !important;
}

Koddaki “baloncuklar” isimleri span.wp-svg-bubbles.bubbles ve diğerleri siz diğer simgeleri kullandıkça değişecektir. Kısa kod ve simge adı, WP SVG simgeleri açılır penceresinde gösterilir.

Gutenberg Düzenleyicisini Kullanma

kullanan bir içerik kutusu oluşturmanın çok kolay başka bir yolunu göstermek istiyorum. Gutenberg editörü.

WordPress 5.0 sürümü ile TinyMCE adı verilen varsayılan düzenleyici, Gutenberg düzenleyicisi ile değiştirilecektir. Gutenberg, blok tabanlı bir düzenleyicidir, yani HTML blokları oluşturup bunları biçimlendirebilirsiniz. bir kod satırına dokunmadan.

Ancak şu anda beta aşamasında ve onu sadece canlı sitede kullanmamalısınız. Bu aynı zamanda otomatik takım anlamına gelir (WordPress ve Gutenberg geliştiriciler) özelliği kaldırabilir. Ancak yine de bir test veya demo sitesinde kullanabilirsiniz.

Gutenberg'de bu şekilde çalışacak ve görünecek:

Yalnızca bir blok eklemeniz, arka planını ve metin rengini değiştirmeniz yeterlidir. Oldukça kolay ve hızlı. Kaydırıcıyı kullanarak kutuyu ve metin boyutunu bile ayarlayabilirsiniz.

💡İpucuAyrıca herhangi bir sayfa oluşturucuyu da kullanabilirsiniz. Mimar Thrive Gutenberg'i kullanmak istemiyorsanız aynı kullanım kolaylığına sahip olmak için.

Bildiğim ve kullandığım her içerik kutusu hakkında yazdım. Hissettiğiniz gibi biraz daha kişiselleştirme ve markalaşma için CSS kodunu değiştirebilirsiniz.

Bu içerik kutularını, metin pencere aracını seçerek kenar çubuğu veya alt bilgi pencere öğeleri alanında da kullanabilirsiniz.

Bu içerik kutuları her tema. Bir WordPress temasının temel function.php veya style.css dosyalarıyla ilgisi yoktur.

Gelecekte temanızı değiştirirseniz, içerik kutularınız üzerinde hiçbir etkisi olmayacaktır.

Bu kadar.

En çok hangisini beğendiğini söyle?

Paylaş:

20 Yorumlar

    1. Merhaba Gaurav,

      Bu içerik kutusunu Blogger bloglarına nasıl ekleyeceğiniz aşağıda açıklanmıştır. WordPress bloglarında olduğu gibi çalışırlar.

      Blogger kontrol panelinize gidin ve sol kenar çubuğundaki temalara tıklayın. Ardından özelleştir düğmesine tıklayın. Ardından gelişmiş düğmesine tıklayın ve “CSS ekle” seçeneğini seçin. Bu, Blogger şablonunuza özel CSS eklemek için pencereyi açacaktır.

      Yukarıda verilen içerik kutusu CSS'lerinden birini kopyalayın ve oraya yapıştırın. Kaydet'e tıklayın ve kontrol panelinize geri dönün. Şimdi bunları blogunuzda canlı olarak görüntülemek için yukarıda verdiğim HTML kodunu kopyalayıp yapıştırın ve blogger düzenleyicinizin HTML düzenleyicisine yapıştırın.

      Bu kadar.

  1. Michael diyor ki:

    bu kılavuzu seviyorum ve tam olarak aradığım şey
    Fakat css yöntemleri ile emoticon veya ikonların nasıl ekleneceğini açıklamamışsınız.
    Herhangi bir eklenti kullanmak zorunda olmadığım için bu yöntemi tercih ediyorum.
    Lütfen gönderiyi, ifadenin nasıl ekleneceğini içerecek şekilde düzenleyebilir veya buradaki yorumuma bir cevap verebilir misiniz?
    Teşekkürler, minnettarım.

    1. İfade eklemek için CSS'ye ihtiyacınız yok. Mac'imde istediğim yere ifade eklemek için CMD + Ctrl + Boşluk çubuğunu kullanıyorum. Windows'ta bunu Windows tuşu + : veya 'a basarak yapabilirsiniz. (dönem).

  2. Sadece yeşil kutunun HTML kodu için bir düzeltme yapmak istiyorum. Span sınıfı için "başlık" değil, "su-box-title" demelidir, böylece başlık önizleme yapıldığında gerçekten CSS ile çalışacaktır.

    Yine de bu faydalı rehber için teşekkür ederim, içeriğim için ihtiyacım olan harika bir kutu oluşturabildim!

    1. Merhaba Gabrielle,

      “su-box-title” sınıfı sadece içerik kutusu başlığına stil verdiğimizde ve diğer içerik kutusu başlıklarıyla çakıştığında kullanılmalıdır (veya etkili olacaktır). Yakından bakarsanız, gönderimdeki 2. CSS kodunda, 3. içerik kutusu stilini kullanmakta özgür olmanızı sağlarken, etkili olmasına yardımcı olmak için “su-box-title” var. Tüm başlıklarda aynı sınıf “su-box-title” kullanırsanız, bireysel başlık değişikliği yapamazsınız.

      Umarım yardımcı olur.

      1. Bunun için teşekkürler, harika rehber!
        Burada da aynı sorunu yaşıyorum ve ikinci örnek için “su-box-title” kullanmak zorunda kaldım. Benim durumumda, bir sayfada yalnızca tek bir kutu kullanıyorum, bu yüzden nasıl olması gerektiğini tahmin ediyorum.
        Bunun dışında içerik için bir kutu almıyorum, sadece başlık için. Buradaki örnekte olduğu gibi içeriğin etrafına bir kutu eklemenin bir yolu var mı?
        Teşekkürler!

        1. Tam CSS kullandığınızı varsayarsak, "div" etiketlerini doğru kullandığınızdan emin misiniz?

          Yukarıdaki CSS'yi tam olarak kullanıyorsanız, yalnızca başlık için görünmesi mümkün değildir.

          Evet, ikinci örnek için “su-box-title” olmalıdır. Ancak şunu kullanırsanız: #primary .entry-content .content-box .title {
          kenar boşluğu: -2rem -2rem 1rem -2rem;
          dolgu: 0.5rem 2rem 0.5rem 1rem;
          Ekran bloğu;
          font-weight: bold;
          Renk: #fff;
          yazı tipi boyutu: 1.125rem;
          }

          O zaman “başlık” çalışmalıdır.

  3. Vay! Yeni oluşturduğum seyahat blogum için bu vurgulama kutularına gerçekten ihtiyacım var. Allaha şükür bloğunu buldum

  4. Nitesh Kohli diyor ki:

    bloggerda nasıl yapılır
    lütfen blogger'ın kısa bir videosunu çeker misin lütfen
    youtube plzz'a yükle ve bana bir link ver 🙂

    Teşekkürler

    1. Hey Nitesh,

      WP'de yaptığınız gibi. Tek ihtiyacınız olan Blogger Tema koduna erişmek ve HTML kodunu olduğu gibi yapıştırmak.

      Şu anda Youtube'da değilim, ama yaptığımda bunu aklımda tutacağım.

  5. Güzel makale. Ancak içeriğin etrafına bir eklenti ile bir kutu eklemek mümkün mü? Kodlama deneyimim yok ve blogumla deneme yapmak istemiyorum.

  6. Güzel makale. Web sitem için bir karşılaştırma tablosunun nasıl ekleneceğini bilmek istiyorum.

  7. Sujeet diyor ki:

    Teşekkür ederim! Web'de basit bir kutu yapmanın bir yolunu araştırıyordum, böylece sitemdeki gönderilere ilgili bazı içerikler ekleyebildim ve siz örneklerinizle işleri çok kolaylaştırdınız.

Yorum bırak

E-posta hesabınız yayımlanmayacak.