WordPress’te Afiş Nasıl Oluşturulur?

Afişler, internet var olduğundan beri var: Bir kayanın altında yaşamıyor olsaydınız, sayısız örnek görmüş olmalısınız. Bu eğitimde, size WordPress’te bir banner oluşturmanın hızlı ve kolay bir yolunu göstereceğiz.

Fakat nasıl yapılır konusuna girmeden önce, bir banner’ın gerçekte ne olduğunu ve WordPress web sitenize bir ek olarak bir banner’ı ne zaman düşünmeniz gerektiğini tartışmak istiyoruz. Bir başlığa ihtiyacınız olduğundan zaten eminseniz, doğrudan eğitim bölümüne atlamaktan çekinmeyin. Konuşacağımız şey bu:

• Web Tasarımında Banner Nedir?

• Banner Ne Zaman Kullanılır?

• Elementor için WordPress Eklentilerini Kullanarak Afiş Nasıl Oluşturulur

• Gutenberg için WordPress Bloklarını Kullanarak Afiş Nasıl Oluşturulur

Web Tasarımında Banner Nedir?

Afişler, online reklam yayınlamanın popüler bir yoludur. Fakat daha soyut bir ifadeyle, ziyaretçilerinizi bilgilendirmek ve onları web sitenizin (veya afiş reklamları olması durumunda bir ortağın web sitesinde) istediğiniz bir bölümüne yönlendirmek için tasarlanmış resimlerdir. gitmek.

Temel olarak afişler, bir ziyaretçinin tıklaması ve bir satış sayfasına nispeten hızlı bir şekilde ulaşması için yeterli bilgiyi iletmek üzere tasarlanmış grafik ve metinlerden oluşur. Etkileşimli, animasyonlu veya statik olabilirler. Fakat her iki durumda da dikkatleri kendi markanıza, ürününüze veya hizmetinize veya bir ortağınkine çekmeyi amaçlarlar.

Bu eğitimde, yine de biraz animasyon içerebilen statik banner ile ilgileneceğiz. Daha gösterişli bir şey arıyorsanız, etkileşimli banner widget’ı sizin için daha iyi bir seçim olabilir.

Banner Ne Zaman Kullanılır?

Reklamlar için genellikle bir afiş kullanılır: online gayrimenkulünüzü reklam alanı için diğer taraflara kiralayarak para kazanabilirsiniz.

Bununla birlikte bir banner’ın harici bir reklam olması gerekmez: kendi mağazanız için bir satış veya benzer bir pazarlığın reklamını yapmak, yeni bir projeyi veya ürünü sergilemek veya sadece önemli bir duyuru yapmak için çok etkili bir şekilde kullanabilirsiniz. Banner’ı istediğiniz gibi gösterebilir ve kullanıcıyı gitmek istediği yere yönlendirmesini sağlayabilirsiniz.

Çoğu zaman, bir afiş bir web sitesine yabancı gelebilir. Banner’ın tasarımına tam olarak hakimseniz, kullanıcıyı web sitenize geldiği içerikten uzaklaştıran ve dolayısıyla kârınızı azaltan bir öğe yerine, web sitenizin bir parçası gibi görünmesini sağlayabilirsiniz.

Aşağıda sergileyeceğimiz banner çözümü, markanıza veya web sitenize uygun hale getirebilmeniz için size geniş bir stil seçenekleri ve kontrol yelpazesi sunar.

Elementor için WordPress Eklentilerini Kullanarak Afiş Nasıl Oluşturulur

Elementor için kendi WordPress Eklentilerimiz, kişisel portföylerden online mağazalara kadar her türlü web sitesi için yepyeni, güzel tasarlanmış 60 widget sunarak Elementor’un zaten etkileyici olan işlevsellik koleksiyonunu genişleten bir eklentidir. Afiş widget’ı bunlardan sadece biri ve daha basit olanlardan biridir. Fakat o bile neredeyse sınırsız sayıda seçenek ve ayara sahiptir.

WordPress web siteniz için banner oluşturmaya başlamak için yapmanız gereken tek şey, web sitemizden Elementor’un en yeni sürümünü (WordPress Eklentileri, Elementor’un ücretsiz sürümüyle çalışacaktır) ve WordPress Eklentilerinin en yeni sürümünü yüklemektir. Adından da anlaşılacağı gibi, WordPress Eklentileri diğer sayfa editörleriyle çalışmaz.

Elementor için WordPress Eklentileri ile, aşağıdaki videoda gösterildiği gibi dakikalar içinde harika bir afiş oluşturabilirsiniz:

Bir metin eğitimini tercih ederseniz, okumaya devam edin.

Bir gönderiye başlık eklemek için Elementor için WordPress Eklentilerini kullanacağız. Fakat bir sayfa için de aynı şekilde çalışıyor. Bir gönderiyle başladık ve ona bir başlık verdik.

Bir banner oluşturmaya başlamak için sol taraftaki menüde Banners öğesini bulun ve sayfada olmasını istediğiniz yere sürükleyin. Gördüğünüz gibi, banner’ınız bazı yer tutucu grafikler ve metinle birlikte gelir.

Özelleştirmek için İçerik sekmesi ve Genel bölümü ile başlayın. Düzen için Standart seçeneğini seçeceğiz. Fakat metnin daha fazla öne çıkmasını istiyorsanız bir Kutu İçi düzeni de seçebilirsiniz. Medya kitaplığınızdan bir Görüntü seçebilir (ve seçmelisiniz) veya Görüntü alanına tıklayarak arka plan için bir görüntü yükleyebilirsiniz.

Bir görüntüyü yerleştirdikten sonra, Görüntü Oranlarını web sitenizin düzenine ve stiline uyacak şekilde değiştirebilirsiniz. Küçük Resim’den Büyük Kare’ye kadar seçim yapabileceğiniz bir dizi boyut ve oran seçeneği vardır. Görüntünün orijinal en boy oranını koruyarak bu gösteri için Orijinali seçtik.

Dilerseniz banner’ınıza buton ekleyebilirsiniz. Bunu yapmak için, bizim yaptığımız gibi Etkinleştir Düğmesi menüsünden Evet’i seçin. Link alanında ziyaretçilerinizin banner’a tıkladıklarında gitmelerini istediğiniz sayfanın linkini eklemeniz gerekmektedir. Son olarak Bağlantı Yerleşimini Etkinleştir seçeneği, yalnızca düğme yerine tüm başlığınızın girdiğiniz bağlantı için bir bağlantı görevi görmesini sağlar. Menüyü varsayılan Evet değerinde bırakarak yapacağımız şey budur.

Sekmenin İçerik bölümüne geçtiğimizde Başlık, Alt Başlık ve Metin alanlarını buluyoruz. Bu gösteri için altyazı kullanmayacağız, bu yüzden boş bırakıyoruz. Yer tutucuyu değiştirmek için örnek bir Başlık ve Metin gireceğiz.

Düğme bölümünde, banner’ınızın düğmesi için özelleştirme seçeneklerini bulacaksınız. Mizanpaj için, varsayılan Dolgulu ile bağlı kalıyoruz. Fakat Anahatlı veya Metinli bir düğmeniz de olabilir, Tür için de varsayılan Standardı seçeceğiz, bununla birlikte İç Kenarlıklı ve Kutulu seçenekleri arasında seçim yapabilirsiniz. .

Düğme Metni Altı Çizili’yi Etkinleştir menüsü, metnin altında bir alt çizgi ayarlamanıza olanak tanır. Bu gösteri için onu kullanmayacağız. Boyut menüsü düğme için boyut seçeneklerini içerir ve Normal, Küçük, Büyük ve Normal Tam Genişlik olarak ayarlanabilir. Bu kontrolleri de varsayılan değerlerde bırakacağız.

Son olarak Düğme Metnini Daha Fazla Görüntüle olarak değiştireceğiz.

Bu sekmenin ele alacağımız son bölümü Düğme Simgesi bölümüdür. Burada düğmeniz için bir Simge seçebilirsiniz. Varsayılan olarak boştur ve bu şekilde bırakabilir veya simge kitaplığından bir tane seçebilir veya Simge alanına tıklayarak bir SVG yükleyebilirsiniz. Medya kitaplığımızdan bir ok simgesiyle gittik.

Simge Konumuna gelince, simgeyi metnin Sağında tutmayı seçtik. Fakat tasarımınıza daha uygunsa solu da seçebilirsiniz.

Stil sekmesine geçerken, ilk bölüm İçerik Stili’dir. Banner Padding’imizi değiştirmek için, banner içeriğinin etrafında eşit bir dolgu olmasını istemediğimiz için, öncelikle padding değerlerinin bağlantısını kaldıracağız. Sağ ve Sol dolguyu %20 olarak ayarlayacağız. Banner Border Radius’a gelince, onu bu gösterimde kullanmayacağız. Afiş kenarlarına eğrilik vermek için kullanılır ve bizimkini dikdörtgen istiyoruz.

Banner Box Shadow ve Hover Banner Box Shadow kontrolleri, sırasıyla etkin değilken ve fareyle üzerine gelindiğinde banner kutusu için bir gölge ayarlamak için kullanılır. Onları bu afiş için kullanmayacağız.

İçerik Dikey Hizalama ve İçerik Yatay Hizalama kontrolleri, başlık içeriğini (metin ve düğme) hizalamanıza olanak tanır. Bunları sırasıyla Orta ve Merkez olarak ayarlayacağız.

Sekmenin Stil bölümü, metin içeriği seçeneklerini içerir: Başlık, Altyazı ve Metin için Etiket, Renk ve Tipografi seçenekleri.

Başlık Etiketini H2 olarak değiştireceğiz ve Başlık Rengi için düz bir beyaz seçeceğiz.

Başlık Tipografisi seçenekleri için farklı bir yazı tipi Ailesi (DM Serif Ekranı) seçeceğiz ve Boyut kaydırıcısını 60 piksele ayarlayacağız. Ağırlık (kalınlık) seçeneğini kullanmayacağız. Fakat Dönüştür menüsünü Büyük Harf’e (diğer seçenekler Küçük Harf ve Büyük Harf’i içerir) ve Stil’i İtalik olarak ayarlayacağız. Dekorasyon menüsünü kullanmayacağız. Fakat metninize Alt Çizgi, Üst Çizgi veya İç Çizgi eklemek için kullanabilirsiniz.

Başlık ile metin arasına biraz daha boşluk koymak için Satır Yüksekliği kaydırıcısını 59 piksele ayarlayacağız. Bu afiş için Harf Aralığını değiştirmeyeceğiz.

Altyazı kullanmıyoruz, dolayısıyla altyazı stil seçeneklerinden herhangi birine ihtiyacımız olmayacak.

Metin Etiketine gelince, H5 ile gideceğiz. Hatta Metin Tipografi seçeneklerinde Metin Rengi için beyaz, Ağırlık için 400 kullanacağız.

Devam ederek Spacing Style bölümünü buluyoruz. Burada Başlık, Metin ve Düğmenin üst kenar boşluğu için boşluk ayarlayabiliriz. Bu banner tasarımı için Text Margin Top’u 21 piksele ve Button Margin Top’u 52 piksele ayarlayacağız. Title Margin Top ayarını kullanmayacağız.

Düğme Stili bölümünde yine Tipografi seçeneklerini buluyoruz. Bunları daha önce ele aldık ve düğmemizi biçimlendirmek için kullanmayacağız. Sırada Normal/Hover geçişi var. Anahtar Normal konumundayken hangi ayarları kullanırsanız kullanın, düğme etkin değilken onu etkiler. Hover’a geçmek, fareyle üzerine gelindiğinde düğme için özel davranış ayarlamanıza olanak tanır.

Geçişin Normal modunda kalarak, düğmenin Metin Rengini koyu gri (#1e1e1e) olarak değiştireceğiz. Varsayılan beyaz olarak bırakacağımız Arka Plan Rengini de değiştirebilirsiniz ve Kenarlık kontrollerini kullanmayacağız. Elbette düğmeniz için bir kenarlık belirleyebilir ve Renk, Genişlik, Yarıçap (eğrilik) ve Dolguyu kontrol edebilirsiniz. Düğmemizin Kenarlığını, tüm değerleri için 0 girerek, düğmeyi dikdörtgen yaparak ve Dolguyu ayarlamak istiyoruz. Dolgu için öncelikle değerlerin bağlantısını kaldıracağız ve Top için 14, Sağ için 40, Alt için 13 ve Sol için 40 gireceğiz.

Düğmenin Vurgulu sürümü, size bir Arka Plan Vurgulu Renk ayarlama seçeneği ve Arka Planı Göster menüsünü sunar. Kullanıcı faresiyle düğmenin üzerine geldiğinde düğmenin görünümünü ve davranışını değiştirmek için bu kontrolleri kullanabilirsiniz. Düğmemizden memnunuz, bu yüzden bu ayarları kullanmayacağız.

Düğme Simge Stiline geçerken, yalnızca üç kontrol buluyoruz: Simge Boyutu, Simge Rengi ve Simge Kenar Boşluğu ile Normal/Hover geçişi. Düğme metniyle eşleşmesi için Simge Boyutunu 6 piksele ve Simge Rengini koyu griye (#1e1e1e) ayarlayacağız. Simge Kenar Boşluğunu değiştirmeyeceğiz.

Geçişin Fareyle Üzerine Gelme bölümünde, aynı kontrolleri ve ayrıca simgenin animasyonunu kontrol eden Simgeyi Taşı menüsünü bulacaksınız. Varsayılan Yatay Kısa animasyondan memnunuz. Fakat farklı animasyonlar arasında seçim yapabilir veya hiç animasyon yapmayabilirsiniz. Hatta Simge Kenar Boşluğu kontrolünün bağlantısını kaldırarak ve Üst kenar boşluğunu 2 piksele ve Sol kenar boşluğunu 10 piksele ayarlayarak simge kenar boşluklarını biraz düzelteceğiz.

Sonraki iki bölüm, Düğme İç Kenarlık Stili ve Düğme Altı Çizgi Stili şu anda kullanabileceğiniz herhangi bir denetime sahip değil. Bunun nedeni, seçtiğimiz düğmenin stilidir: iç kenarlığı veya alt çizgisi yoktur. Tasarımınızda farklı bir düğme seçerseniz, düğmenin tüm öğelerini biçimlendirme seçeneklerine sahip olursunuz.

Son olarak Arka Plan Stili bölümüne geliyoruz. Hatta Normal görünümde bir Normal/Vurgulu geçişi ve tek bir denetim olan Kaplama Rengi vardır. Bu durum banner’ınız için düz renkli veya saydam bir kaplama istiyorsanız, öğe arka planının rengidir. Bu tasarımda kullanmayacağız.

Fareyle Üzerine Gelme görünümünde, Kaplama Rengi’ni ve iki ek kontrol buluyoruz: Arka Plan Görüntüsü Üzerine Vurgulu ve Arka Plan Görüntüsü Üzerine Vurgulu Yakınlaştır Menşei menüleri. Bunlar fareyle üzerine gelindiğinde arka plan görüntüsünün davranışını etkiler. Arka Plan Görüntüsü Vurgulu menüsünden Hiçbiri’ni seçeceğiz, yani fareyle üzerine gelindiğinde görüntü animasyonlu olmayacak – yakınlaştırılmayacak, uzaklaştırılmayacak veya hareket etmeyecektir. Bu aynı zamanda Arka Plan Görüntüsü Üzerine Vurgulu Yakınlaştırma Menşei menüsünü de ortadan kaldıracaktır.

Ve işte karşınızda, dakikalar içinde güzel bir pankart! Ve bu, neredeyse sayısız ayardan yalnızca biri.

Gutenberg için WordPress Bloklarını Kullanarak Afiş Nasıl Oluşturulur

Web sitelerinizi ve sayfalarınızı oluşturmak için Gutenberg blok düzenleyicisini kullanmayı tercih ediyorsanız, şanslısınız – afişler oluşturmanıza da yardımcı olabilecek bir eklentimiz var. Buna, blok editörü için 80’den fazla bloktan oluşan bir koleksiyon olan Gutenberg için WordPress Blokları denir. Bazı bloklar ücretsizdir. Diğerleri yalnızca eklentinin premium sürümüyle kullanılabilir. Kullanacağımız – Afiş bloğu – ücretsiz olanlar arasında. Size göstermek için bloğun web sayfasından örneklerden birini oluştururken size yol göstereceğiz…