Bazen bir noktayı anlatmak için yapabileceğiniz en iyi şey, onu oluşturan parçalara ayırmaktır. Bu özellikle süreçler gibi dinamik, değişen şeyler için geçerlidir. Bu yazıda, size WordPress’te bir işlemin nasıl gösterileceğini göstereceğiz. Bunu yapmak için Elementor için kendi eklentimiz olan Elementor için WordPress Eklentilerini kullanacağız. WordPress Eklentileri ile resimli sürecinizi dakikalar içinde kurabilirsiniz.
Elementor yerine Gutenberg blok düzenleyicisini kullanmayı seçerseniz başka bir seçenek de WordPress Blocks for Gutenberg eklentimizi kullanmaktır. Size bunu nasıl yapacağınızı da göstereceğiz, o yüzden arkanıza yaslanın ve biraz öğrenmeye hazırlanın.
- Resimli Süreç Nedir?
- WordPress Eklentilerini Kullanarak Resimli Bir İşlem Nasıl Eklenir?
- WordPress Bloklarını Kullanarak Resimli Bir İşlem Nasıl Eklenir?
Resimli Süreç Nedir?
Basitçe söylemek gerekirse, resimli bir süreç, bir web sitesinin nesnesi veya sahibi ile ilgili bir sürecin çeşitli aşamalarını gösteren bir web sitesinin grafiksel bir özelliğidir. Örneğin organik kozmetik üretiminin üretim sürecini veya geçici bir ajans için işe alım sürecini detaylandırabilir – eğer bu aşamalar halinde veya derece derece gerçekleşirse, bunu göstermek için resimli bir süreç kullanılabilir. Ajanslardan endüstrilere hemen hemen her işletmenin bu özellikten yararlanabileceği açıktır.
Genellikle bu, birkaç ardışık görüntü veya hatta basitçe sayıların ardından bir sürecin aşamalarını kısaca açıklayan metin anlamına gelir. Aşağıdaki resimde yer tutucuların kullanıldığı bir örnek görebilirsiniz (ayrıca WordPress Eklentileri kullanılarak oluşturulmuştur).
WordPress Eklentilerini Kullanarak Resimli Bir İşlem Nasıl Eklenir?
Elementor, WordPress için önde gelen görsel sayfa düzenleyicisidir ve WordPress Addons for Elementor, Elementor’un zaten önemli olan yeteneklerini genişletmek için yapılmış bir eklentidir. WordPress Eklentileri, Elementor’un mevcut öğeler dizisine 60’tan fazla güzel, ustaca tasarlanmış pencere öğesi ekler. İşlem widget’ı bunlardan yalnızca biridir ve WordPress Eklentilerinin ücretsiz sürümüyle birlikte gelir.
Kullanmak için tek yapmanız gereken, Elementor’un en son sürümünü yüklemek ve ardından herhangi bir eklentiyi kurar gibi WordPress Eklentilerini yüklemek. İşlem widget’ına ek olarak yaratıcı ve bilgi grafiklerinden formlara ve tipografiye kadar başka amaçlar için kullanabileceğiniz bir dizi mükemmel widget alacaksınız. WordPress Eklentileri, Elementor’un ücretsiz sürümüyle çalışır, bu nedenle tüm kurulumun size bir kuruşa mal olması gerekmez. WordPress Eklentilerinin diğer sayfa düzenleyicilerle çalışmayacağını unutmayın.
Bununla birlikte öğreticilerinizi metin biçiminde tercih ediyorsanız veya bir web tasarım öğesi, WordPress Eklentileri veya Elementor olarak resimli süreç hakkında daha fazla bilgi edinmek istiyorsanız okumaya devam edin.
Widget’a İçerik Eklemek
Öncelikle, sol taraftaki menüde İşlem widget’ını bulun ve sayfada olmasını istediğiniz yere sürükleyin.
Yer tutucu pencere öğesini hemen görebileceksiniz. İçerik sekmesinin Genel bölümünü kullanarak temel ayarları yapılandırabilirsiniz.
Aşamaların her biri bir Öğe olarak ele alınır. Bir tane eklemek için, tasarımımız için yapacağımız Öğe Ekle düğmesini tıklamanız yeterlidir. Sütun Sayısı kontrolü, görüntülenen öğelerin sayısını ayarlarken Duyarlı Sütunlar menüsü, widget’ın farklı ekranlardaki davranışını yönetir. Sütun Sayısını Dört olarak ve Sütunları Duyarlı olarak Özel olarak ayarlayarak daha küçük ve portre odaklı aygıtlar için gösterilen öğelerin sayısını azaltacağız.
Appear Animation bölümünde sadece bir ayarımız var: Enable Appear Animation. Varsayılan Evet olarak bırakacağız çünkü web sitesi ziyaretçisinin sayfanın uygun bölümüne ulaştığında animasyonu görmesini istiyoruz.
Düzen bölümü ayrıca yalnızca bir ayar içerir: Öğe Düzeni. Yatay ve Dikey arasında geçiş yapabilirsiniz. Fakat bunu Yatay olarak bırakacağız.
Genel bölümüne geri dönerek, şimdi öğelerimizi içerikle dolduracağız. Öğeye bir simge eklemek için simge kitaplığından bir simge seçebilir veya bir .svg dosyası yükleyebilirsiniz. İlk öğemiz için bir simge ekleyeceğiz.
Bir simge eklemek için onu kitaplıktan seçmeniz ve Ekle düğmesini tıklamanız yeterlidir.
Daha sonra yer tutucu metni değiştirmek için Başlık ve Metin alanını kullanacağız.
Sırada diğer öğe seçenekleri var. Hepsinin bir satırda olmasını istemiyorsanız, Öğe Ofseti kontrolü, öğeyi diğerlerine göre kaydırır. 77 piksel olarak ayarlayacağız. Öğe Tutucu boyutu, simgenin etrafındaki dairenin boyutunu ayarlar ve biz bunu 218 piksel olarak ayarlayacağız.
Rakamları işlem aşamalarınız için kullanırsanız Tipografi ayarlarını değiştirebilirsiniz. Başlık ve metin için tipografi ayarları başka bir yerdedir. Öğe Rengi ayarlarını kullanarak simgenin rengini ve Arka Plan Türü ayarlarını kullanarak arka planı değiştirebilirsiniz. Basit bir renkli arka plan istiyoruz. Fakat çeşitli resimler, degradeler ve hatta video kullanabilirsiniz.
Öğe Tutucu Yarıçapı ayarları, öğenin şeklini ayarlamak için kullanılabilirken, Kenarlık Türü menüsü, öğenin etrafına bir sınır koymanıza olanak tanır. Bu tasarım için onları kullanmayacağız.
Son olarak Line Top Offset ve Line Rotation kontrolleri, elemanlar arasındaki çizginin yüksekliğini ve yönünü ayarlar. İlkini 35 piksele ve ikincisini -8’e ayarlayacağız.
Stil sekmesine geçmeden önce geri kalan öğelerimizi simgeler, arka planlar ve metinle dolduracağız.
Widget’ı Şekillendirme
İlk seçenek, metnin Hizalanmasıdır. Ortalanmış olmasını seviyoruz, bu yüzden orada bırakacağız. Öğe Ofseti ve Öğe Tutucu Boyutu kaydırıcıları, öğelerin ve simgelerin widget’ın diğer öğelerine göre göreli konumlarını ayarlamak için kullanılır ve bunları bu gösteri için kullanmayacağız.
Öğe Tipografisi, simge için tipografi seçeneklerini ayarlar. Boyutu 50 piksel olarak ayarlayacağız ancak diğer ayarlara dokunmayacağız. Öğe Rengi, simge için bir renk seçmenizi sağlar. Varsayılan değerinde bırakacağız.
Son olarak bu tasarım için bu ayarları kullanmayacak olsak da, öğeleri grup olarak birlikte stillendirmek için Arka Plan Türü, Öğe Tutucu Yarıçapı ve Kenarlık Türü kullanılabilir.
Başlık/metin Stili bölümü, başlığınızı ve metninizi biçimlendirebileceğiniz yerdir. Başlık Etiketinin yanı sıra başlığınızın ve metninizin rengini ve tipografisini değiştirebilirsiniz. Varsayılan ayarlardan memnunuz, dolayısıyla bu tasarım için onları değiştirmeyeceğiz.
Bir sonraki bölümde Çizgi Stilinizi ayarlayabilirsiniz. Çizgi Kenarlığı Stili, Düz, Kesikli ve Noktalı çizgiler arasında seçim yapmanızı sağlar. İlk seçenekle gittik. Çizgi rengini çelik gibi bir griye değiştirmek ve Çizgi Kalınlığını 1 piksele ayarlamak için Çizgi Kenarlık Rengini de kullandık.
Kullanacağımız son bölüm, Aralık Stili bölümüdür. Metin öğeleri için kenar boşluklarını ve dolguları ayarlayabileceğiniz yer burasıdır. Öğe Başlığı Üst Kenar Boşluğunu 8 piksele ve Öğe Metin Dolgusunu sol ve sağ için 5 piksele ayarlayacağız, böylece tüm dolgu kenarları etkilenmeyecek şekilde ayarları ayıracağız. Öğe Metni Üst Kenar Boşluğu ayarlarını kullanmayacağız.
Ek Stil bölümü tamamen aşama numaralarıyla ilgilidir. Fakat biz onlardan memnunuz, bu yüzden onları kullanmayacağız. Öğelerle hemen hemen aynı ayarlara sahip olduklarını söylemek yeterli.
Ve işte karşınızda, aşamalardan oluşan resimli sürecimiz tamamlandı!
WordPress Bloklarını Kullanarak Resimli Bir İşlem Nasıl Eklenir?
Gutenberg blok editörü, WordPress’in yerel editörü ve Classis editörünün halefidir. Gutenberg ile ilgili yeni ürünlerimizin bir parçası olan Gutenberg için WordPress Blocks eklentimiz, blok düzenleyici için mükemmel bir arkadaştır. Buna 48 yeni ücretsiz blok ve 33 premium blok ekler. Bir işlemi kısaca göstermek için nasıl kullanılacağını size göstereceğimiz İşlem bloğu, ücretsiz olanlardan biridir.
İçeriği Bloğa Ekleme
Eklentiyi yüklediğinizden ve etkinleştirdiğinizden emin olduktan sonra, önce bloğu bir sayfaya veya gönderiye eklemeniz gerekir. Varsayılan olarak üç adımlı bir süreç oluşturur.
Ayarlar kenar çubuğundan yeni öğeler ekleyebilirsiniz. Varsayılan olarak İçerik’te açılır ve size Öğe Düzenini nerede ayarlayabileceğinizi, Animasyonu Görüntüle’yi etkinleştirebileceğinizi, Sütun Sayısını ve bunların duyarlı stilini seçebileceğiniz ve öğeleri ekleyebileceğiniz ve stillendirebileceğiniz yerleri gösterir.
Örneğimiz için bir öğeye daha ihtiyacımız var, o yüzden onu ekleyeceğiz. Yeni bir satırda görünürse endişelenmeyin – sütun sayısını dörde çıkarmak, onun için alan yaratacaktır. Hatta yukarıdan aşağıya doğru 4, 4, 2, 2, 1 ve 1 değerlerini girerek Duyarlı Sütunları Özel olarak ayarladık.
Tek tek öğelere içerik ekleme seçenekleri arasında simge, başlık ve içerik yer alır. Öğe Ofseti, Tutucu Boyutu ve Rengi, Arka Plan Türü, Görüntüsü veya Rengi, Kenarlık ve öğeyi diğerlerine bağlayan Çizgiyi de ayarlayabilirsiniz.
İlk öğe için Öğe Ofsetini 77 piksele ve Tutucu boyutunu 218 piksele ayarlayacağız. Kullandığımız Arka Plan Rengi #fff0ed, Satır Üstü Ofseti 35 piksel ve Döndürme -8’dir. Söylemeye gerek yok, kendi başlığımızı, içeriğimizi ve simgemizi de ekledik.
Geri kalan öğelerin içeriğini, başlığını ve simgesini de değiştireceğiz. İkinci öğe için Öğe Tutucu Boyutunu 250 piksele, Arka Plan Rengini #f06633’e, Üst Çizgi Ofsetini 152 piksele ve Satır Dönüşünü -8’e ayarlayacağız. Üçüncüsü, Öğe Ofseti için 78 piksel, Öğe Tutucu Boyutu için 218 piksel, Arka Plan Rengi için #f6f86b, Satır Üstü Ofseti için 116 piksel ve Satır Dönüşü için -8 pikseldir. Ve son öğe için Öğe Tutucu Boyutunu 250 piksele ve Arka Plan Rengini #f4f4fe olarak ayarlayacağız.
Bloğu Şekillendirmek
Stil bölümü, bloğun farklı bölümlerine özgü sekmelere ayrılmıştır. İlki, başlığa Etiket, Renk, Üst Kenar Boşluğu ve isteyebileceğiniz tüm Tipografi seçeneklerini seçebileceğiniz Başlıktır. Etiketi H5 olarak ayarlayacağız.
Metin seçenekleri, Etiketi kaldırır ancak bazı Dolgu seçenekleri ekler ve önceki sekmede gördüğünüz geri kalan her şeyi tutar. Üst Kenar Boşluğunu 8 piksele ayarlayacağız ve Sola ve Sağa 5 piksel Dolgu ekleyeceğiz.
Öğe sekmesinin altında, aynı Tipografi ve Renk seçeneklerini ve Öğe Ofseti, Tutucu ve Arka Plan seçeneklerini bulacaksınız. Bunları, tüm öğelere uygulanacak şekilde bu seçenekleri ayarlamak için kullanabilirsiniz. Bu seçenekleri zaten her öğe için ayrı ayrı ayarladık. Tipografi seçeneklerindeki Simge Boyutunu 50 piksel olarak değiştireceğiz.
Çizgi seçenekleri, Çizgi Kenarlık Stili, Renk ve Çizgi Kalınlığı’nı seçmenizi sağlar. Rengi #acacac ve Kalınlığı 1 piksel olarak ayarlayacağız. Son seçenek grubu, öğelerdeki sayı öğesi için Renk, Boyut ve Tipografiyi seçebileceğiniz Sayı seçenekleridir. Arka Planı da ayarlayabilirsiniz. Fakat hiçbir şeyi değiştirmeyeceğiz.
Hepsi bu kadar – resimli sürecimizi çok kısa sürede oluşturduk.
Konu Özeti
Elementor için WordPress Eklentileri ve Gutenberg için WordPress Blokları ile, profesyonelce tasarlanmış düzinelerce widget ve bloğa sahip olursunuz ve seçeneklerin, ayarların ve kontrollerin sayısı, bunların herhangi bir stile ve web sitesi düzenine uyacaklarını kesinleştirir. Muhteşem bir resimli süreç özelliğini ücretsiz olarak ve bu makaleyi okumak için gerekenden çok daha kısa sürede oluşturabilirsiniz. Fakat bu makaleyi okuduktan sonra, bunun nasıl yapıldığını artık biliyorsunuz.