İnternetin bilgiyi alma ve işleme şeklimizi değiştirdiği sadece bir klişe değil: bu gerçek. Bir yandan, dikkat süremiz kısalıyor: insanların metin içeriği için giderek daha az zamanı oluyor. Öte yandan, herhangi bir anlam veya karmaşıklık içeren bilgileri iletmek istiyorsanız, bunun yerini hiçbir şey tutamaz.
Ziyaretçilerinizin büyük bir metin gövdesini atlamasını önlemek için yapabileceğiniz bir şey, tek istediğiniz birkaç ilginç bilgi parçasını vurgulamaksa, metin içeriğinizi taranabilir hale getirmektir. Vurgulanan metni vurgular için de kullanabilirsiniz. WordPress mesaj kutuları, deneyebileceğiniz başka bir şeydir: metnin geri kalanından açıkça sıyrılırlar ve ziyaretçilerinize seçilen bilgi parçalarını iletirler.
WordPress web siteniz için nasıl mesaj kutuları oluşturacağınızı göstereceğiz. Fakat ayrıntılara girmeden önce, mesaj kutusunu daha genel terimlerle tartışmak istiyoruz. İhtiyacınız olan tek şeyin bunu nasıl yapacağınızı bilmek olduğundan eminseniz, öğretici bölümüne ilerleyin. İşte hakkında konuşacağımız konular:
-
WordPress Mesaj Kutusu Nedir?
-
WordPress Mesaj Kutusu Ne Zaman Kullanılır?
-
Qi Eklentilerini Kullanarak WordPress’te Mesaj Kutusu Nasıl Oluşturulur
WordPress Mesaj Kutusu Nedir?
WordPress mesaj kutusu, ziyaretçinin dikkatini bir bilgiye çekmek için kullanılan bir tasarım öğesidir. Bir kutu, bazı metinler ve muhtemelen simgeler veya diğer grafiklerden oluşur. Genellikle bazı önemli bilgileri bir web sitesi ziyaretçisiyle ilişkilendirirler ve metnin ana gövdesinden sıyrılırlar.
Ayrıca bir mesaj kutusu genellikle bir X işaretine veya başka türde bir kapatma simgesine tıklanarak kapatılabilir. Kullanıcı bilgileri aldıktan sonra, basit bir fare tıklamasıyla mesaj kutusunu kaldırabilir ve okumaya devam edebilir. Şöyle bir şeye benziyorlar:
WordPress Mesaj Kutusu Ne Zaman Kullanılır?
Ziyaretçilerinizin, içeriğin geri kalanını bilgilendirebilecek, fakat anlamak için gerekli olmayan ayrı bir bilgi parçasına özel dikkat göstermesini istediğinizde bir mesaj kutusu en iyi şekilde kullanılır. Metinle yakından ilişkili olabilir, fakat olması gerekmez.
Belki de bir ziyaretçinin okuduğu makale, bir dizinin ilk bölümü değildir. Bu durumda, önce başka bir şey okumaları gerektiği konusunda onları bir mesaj kutusuyla uyarmak isteyebilirsiniz. Mağazanızın metinle ilgili özel bir teklifi var mı? Belki bir mesaj kutusunda reklamını yapabilirsiniz. Kitap veya film incelemeniz spoiler içeriyor mu? Bunu önceden netleştirsen iyi olur.
Qi Eklentilerini Kullanarak WordPress’te Mesaj Kutusu Nasıl Oluşturulur
Kod veya eklenti kullanılarak bir mesaj kutusu oluşturulabilir. Elementor için Qi Addons adlı tarafımızdan geliştirilen ücretsiz bir eklenti kullanacağız. Qi Eklentileri, Elementor’un zaten müthiş widget paletini, biri mesaj kutusu olan 60 yepyeni, güzel tasarlanmış öğeyle genişletiyor.
Eklentimizle dakikalar içinde göz alıcı WordPress mesaj kutuları oluşturabilirsiniz. Önceden yapmanız gereken tek şey, Elementor’un en son sürümünü yüklemek (ücretsiz sürüm gayet iyi) ve ardından Qi Eklentilerini yüklemek. Elementor için Qi Eklentileri ile birlikte kendi Qi Temamızı kullanacağız. En iyi sonuçlar için sizin de yapmanızı öneririz. Halihazırda başka bir temaya yatırım yaptıysanız endişelenmeyin: Qi Eklentileri de onunla çalışacak.
Qi Addons, Elementor ile çalışmak ve onu tamamlamak için tasarlanmış ayrı bir eklentidir ve tamamen ücretsizdir. Her ikisini de kurduktan sonra, artık hazırsınız. Aşağıdaki videoda nasıl mesaj kutusu oluşturacağınızı görebilirsiniz:
Bununla birlikte öğreticinizi metin biçiminde tercih ederseniz, aşağıdakileri okuyun. Başlamak için, sol taraftaki menüde bir Mesaj kutuları öğesi bulmanız ve onu sayfada istediğiniz yere sürüklemeniz gerekir.
Mesaj kutusunu varsayılan ayarlarıyla göreceksiniz. Bir yer tutucu başlığı ve bazı lorem ipsum metinleri vardır. Bunları widget’ın Genel sekmesinde düzenleyebilirsiniz.
Bu tanıtım için Özel Sınıf ayarlarını kullanmayacağız. Yapacağımız şey, Arka planlar, simgeler, başlıklar ve metin için renkleri Ayarlamak için Başlığı değiştirmek. Her şey sadece birkaç tıklama alır ve metni siler, bu da bunu çok basit bir mesaj kutusu haline getirir.
Bizim de yapmak istediğimiz simgeleri değiştirmek. Kutunun sol üst tarafındaki simge, Genel uygulamanızdaki ilk simgedir ve Simge olarak adlandırılır. Menüleri göstermek için üzerine gelin, ardından değiştirmek için Simge Kitaplığı.
Oradayken, mevcut kütüphanelerinizden seçim yapabilirsiniz. Arama alanında arayıp seçerek ve Ekle’ye tıklayarak bir Yer İşareti simgesi ekleyeceğiz.
Ayrıca mesaj kutusunu kapatmak için kullanılan sağdaki simge olan Kapat Simgesini de değiştireceğiz. Bir .svg resmi yükleyerek bir simgeyi değiştirmek için, fareyle kontrolün üzerine gelin ve ardından SVG Yükle’ye tıklayın.
Daha sonra yeni bir resim yükleyebilir veya bizim yapacağımız gibi medya kitaplığından bir resim seçebilirsiniz. Sadece bir resim seçin ve hazır olduğunuzda Medya Ekle’ye tıklayın.
Simgelerimiz ayarlandığında, Stil sekmesine geçmeye hazırız.
Stil sekmesinin ana bölümünde, widget’ınızın başlığını, metnini, simgesini ve arka planını şekillendirmek için pek çok seçenek bulabilirsiniz.
Başlık Etiketimizi H4 olarak değiştireceğiz, fakat onu herhangi bir başlık ayarına veya paragraf metnine değiştirebilirsiniz. Ayrıca yapmayacağımız Başlık Rengini ve Başlık Tipografisini de değiştirebilirsiniz.
Başlık Tipografi ayarlarında, yazı tipini (Aile), Boyutu (bizimkini 21 piksel olarak ayarladık) ve Ağırlığı (veya “kalınlık”) değiştirebilirsiniz. Dönüştürme denetimi başlığın büyük harf kullanımını değiştirir, Stil yazı tipini italik yapmak veya eğik bir yazı tipi seçmek için kullanılabilirken Dekorasyon kontrolü altını çizmek, üstünü çizmek veya üstünü çizmek için kullanılır.
Satır Yüksekliği, başlığın birden fazla satırı varsa satırları arasında boşluk bırakabilir, fakat yeterince uzun bir satır için yer ayırdığından kutunun boyutu üzerinde de etkisi vardır. Bizimkini 30 piksele ayarlayacağız. Harf Boşluğu kontrolü, başlığın tek tek harflerini ayırmak için kullanılır ve biz onu bu belirli mesaj kutusu için kullanmayacağız.
Metin Rengi ve Metin Tipografisi ayarları tamamen aynıdır, fakat başlığın aksine metne uygulanır. Bu özel mesaj kutusunda metin yok, bu yüzden onları kullanmayacağız.
Sırada, Simge Konumu kontrollerini buluyoruz. Simgenizi başlık satırının üstüne, ortasına veya altına yerleştirebilirsiniz. Üstte seviyoruz, bu yüzden olduğu gibi bırakacağız. Başlık yazı tipi rengimize uyması için Simge Rengini #1e1e1e – neredeyse siyah olarak değiştireceğiz. Son olarak Simge Boyutunu 23 piksel olarak ayarlayacağız.
Kapat Simge Boyutu kontrolleri, Simge ile tamamen aynı şekilde çalışır. Simge Rengini Kapat kontrolü, simgeniz için farklı bir renk seçmenizi sağlar. Onu siyah (#000000) olarak ayarlayacağız. Kapatma Simgesinin Vurgu Rengi, bir kullanıcının faresi tarafından üzerine getirildiğinde simgenin rengidir. Bunu da siyaha ayarlayacağız, fakat biraz şeffaflıkla (#000000cc).
Daha sonra Arka Plan Türü kontrollerini buluyoruz. Bu kontrolün iki ana modu vardır: Kullanmayacağımız Degrade ve kullanacağımız Klasik. Düz renkli bir arka plan, açık mavi (#d5eaf4) kullanacağız, fakat isterseniz bir Görüntü de kullanabilirsiniz.
Bu sekmenin Stil bölümünün altında Kutu Kenarlığı Yarıçapı kontrollerini bulabilirsiniz. Bunları, mesaj kutunuzun herhangi bir köşesini veya tümünü yuvarlatmak için kullanabilirsiniz. Bu gösteri için onu kullanmayacağız.
Son olarak sekmenin Space Style bölümünü buluyoruz. Icon Margin kontrolünde, ikon ile diğer elemanlar arasındaki mesafeyi ayarlayabilirsiniz. Değerlerin bağlantısını kaldırmak için bağlantı simgesine tıklayacağız çünkü simgenin konumuna ince ayar yapmak istiyoruz. Üst kenar boşluğunu 4 ve sağ kenar boşluğunu 18 piksel olarak ayarlayacağız.
Metni başlıktan ayırmak istiyorsanız, Metin Kenar Boşluğu Üstü kontrolü buradadır. Bu mesaj kutusunda metin olmadığı için ona ihtiyacımız yok.
Son olarak kutu kenarları ile içeriği arasındaki mesafeyi kontrol etmek için Kutu Dolgu kontrolü kullanılır. Bu gösteri için ona ihtiyacımız olmayacak.
Ve işte karşınızda, sadece birkaç dakika içinde güzel bir mesaj kutusu.
Çözüm Yolu
Gördüğünüz gibi, WordPress’te bir mesaj kutusu ayarlamak son derece kolaydır. Tek ihtiyacınız olan birkaç ücretsiz eklenti (Elementor ve Qi Eklentileri) ve göz alıcı bir tasarım için iyi bir fikir. Qi Eklentileri ile, neredeyse sınırsız stil seçenekleriyle tamamen işlevsel bir mesaj kutusu elde edersiniz. Onu iyi bir şekilde kullanmaya teşvik ediyoruz.