Simgeler ve metin, her biri kendi başına, bir web sitesi oluştururken onları mükemmel bir çift yapan güçlü ve kusurlu yönlere sahiptir. Tek başına bir simge, herhangi bir bağlam veya sabit anlam olmaksızın çok belirsiz olabilir. Metin sıkıcı görünebilir ve kesinlikle o kadar dikkat çekmez. İkisini bir araya getirin ve her iki dünyanın da en iyisini elde edin. Genellikle, özellikleri, hizmetleri veya ayrı olarak gösterilmesi gereken ancak grubun bir parçası olan diğer öğeleri listelerken eşleştirmeyi görürsünüz.
Bu eşleştirme o kadar yaygındır ki, birçok premium tema, metin içeren bir simgeyi tasarım öğesi olarak hızlı bir şekilde eklemek için bir kısa kodla birlikte gelir. Temanız yoksa endişelenmeyin. Web’in en büyük ücretsiz Elementor eklentileri koleksiyonu olan Elementor için WordPress Eklentileri sayesinde ihtiyacınız olan metin içeren tüm simgeleri anında ekleyebileceksiniz. İhtiyacınız olan tek şey Elementor ve Metin widget’lı Simge.
Bununla ilgili okumayı tercih ederseniz, bu makale sizi metin içeren güzel bir simge görüntüsü oluşturmak için attığımız adımlara götürecektir. Umarız burada okuduklarınızı kendi web sitenizde harika tasarımlar oluşturmak için kullanırsınız!
Şunları ele alacağız:
- WordPress’te Metin İçeren Simgeler Ekleme
- Simgenin İçeriğini Metinle Düzenleme
- Simgeyi Metinle Şekillendirme
- Son dokunuşlar
WordPress’te Metin İçeren Simgeler Ekleme
WordPress Addons for Elementor eklentisini kullanarak WordPress’te metin içeren simgeler eklemenin ilk adımı, Elementor’u indirip yüklemektir. Dünyanın önde gelen sayfa oluşturucularından biri olarak zaten sahip olabilirsiniz. Fakat sahip değilseniz, indirip etkinleştirmeniz yeterlidir.
Bir sonraki adım, Elementor için WordPress Eklentilerini indirmek ve etkinleştirmek olacaktır. Bunu, Eklentiler > Yeni Ekle’ye giderek, arayarak ve sonuçlarda gördüğünüzde yükleyip etkinleştirerek yapabilirsiniz.
Bunu yaptıktan sonra, widget’a aşina olmanın en iyi yolu, metin içeren bir simge eklemeyi düşünebileceğiniz bir sayfaya gitmek ve ona ulaşmak olacaktır. Kendi payımıza üç sütunlu bir bölüm oluşturduk çünkü sonunda metin içeren üç simge oluşturduk. Widget’ı aramak ve onu en soldaki sütuna sürüklemek işinizi gördü – düzenlemeye hazır metin içeren ilk simgemiz vardı.
Simgenin İçeriğini Metinle Düzenleme
Eklenti seçeneğinin İçerik bölümünde birçok sekme bulunur. Fakat endişelenmeyin – bu yalnızca tasarımınızı en ince ayrıntısına kadar özelleştirebileceğiniz anlamına gelir. İlk sekme olan Genel, simge ve metnin düzenini, simgeye bir bağlantı eklemek isteyip istemediğinizi ve bazı ilişkili seçenekleri seçmek için gidebileceğiniz yerdir.
Burası aynı zamanda kullanmak istediğiniz simge türünü, ayırıcı kullanıp kullanmayacağınızı ve ayrıca bazı sütun yanıt verme kurallarını seçeceğiniz yerdir. Yaptığımız ilk değişiklik, Üst düzene geçmek oldu. Simgeyi, simge kitaplığında bulunan Dişli simgesiyle değiştirdik ve ilerlemeye hazırdık.
İçerik sekmesi, sütundaki metnin döşemesini değiştirebileceğiniz veya tamamen kaldırabileceğiniz, ayrıca metnin kendisini değiştirebileceğiniz ve bazı sınırlı stil seçeneklerini uygulayabileceğiniz yerdir. Hatta metin hizalamasını seçme şansınız da olacak.
Bu simge ve metin kombinasyonuna verdiğimiz başlık “Sınırsız seçenekler” idi. Metni “Aralarından seçim yapabileceğiniz yüzlerce yazı tipi ve özel simgeleri veya SVG’leri kullanma seçenekleri” olarak değiştirdik.
Düğme ve Düğme Simgesi sekmeleri, düğmenizin nasıl görünmesini istediğinizi, ne kadar büyük olması gerektiğini, bir simgeye sahip olup olmayacağını ve nerede, hangi bağlantıya işaret etmesi gerektiğini seçebileceğiniz yerdir.
Bu iki sekmedeki en ilgi çekici seçenek ise Button sekmesindeki Button Text seçeneğidir. Metni silerek düğmeyi tamamen kaldırabilirsiniz. Biz böyle yaptık.
İçerik seçeneklerindeki kalan sekmeler, ayırıcı ve görünen animasyonla ilgilidir. Ayırıcının düzenini, konumunu, kenarlık görüntüsünü ve simgesini seçebileceksiniz. Hatta farklı animasyon stilleri arasında geçiş yapma ve gecikmelerini ayarlama seçeneğiniz de olacak.
Metin içeren simgemizi oluştururken bir ayırıcı kullanmadığımız ve animasyonu dahil etmek istemediğimiz için İçerik bölümünde size gösterecek hiçbir şeyimiz kalmadı ve Stil seçeneklerini görmeye geçebiliriz.
Simgeyi Metinle Şekillendirme
Simgenizi metinle şekillendirirken, Stil sekmesi ilk sırada olacaktır. Orada bulacağınız seçenekler, başlık etiketini, başlığın normal rengini ve fareyle üzerine gelindiğinde rengi ve ayrıca yazı tipi, boyut ve ağırlık gibi başlık tipografi seçeneklerini seçmenize olanak tanır. Metin için renk ve tipografi seçeneğini seçebileceksiniz.
Buradaki varsayılanlarda bazı küçük değişiklikler yaptık. #000000 hex kodunu kullanarak başlık etiketini H5 olarak başlık rengini siyah olarak değiştirdik ve başlığın boyutunu 21 piksel olarak ayarladık.
Aralık Stili sekmesinde, her şey kenar boşluklarını ayarlamakla ilgilidir. Başlık kenar boşluğu üstünü, metin kenar boşluğu üstünü, simgenin etrafındaki kenar boşluğunu ve bir düğmeniz varsa, düğme kenar boşluğu üstünü seçebileceksiniz.
Başlık marjını üstten 22 piksele ayarlayarak burada yine minimum değişikliği seçtik.
Simge Stili sekmesinde, göreceğiniz seçenekler, simgenizi bir kutuya koymak isteyip istemediğinize göre büyük ölçüde değişecektir. Bunu yaparsanız, kutunun şekli, boyutu ve rengi için çeşitli seçenekler seçebilirsiniz. Bunu yapmazsanız, simgenin kendisi ile ilgili seçeneklerle sınırlı kalacaksınız – boyutu, rengi ve fareyle üzerine gelindiğinde animasyonu.
Simgemizi bir kutuya koymayı tercih ettik. Simgemizin boyutunu 60 piksel, rengini de #ececec olarak değiştirdik. Vurguluyken, ona hafif bir dikey hareket verdik.
Kalan sekmeler, düğmelerin, düğme simgelerinin, kenarlıkların, alt çizgilerin, ayırıcıların ve ayırıcı simgelerin görünümü ve stiliyle harika şeyler yapmanızı sağlar. Tasarımımızda bu öğelerden herhangi birini kullanmayı tercih etmedik. Fakat farklı bir yol seçerseniz, simgenizi oluşturmak için ihtiyaç duyacağınız tüm boyut, renk, kenar boşluğu ve fareyle üzerine gelme seçeneklerini burada bulacağınızı bilin. -metnin düğmeleri ve ayırıcıları açılır.
Son dokunuşlar
Son dokunuş, oluşturduğumuz tasarımı çoğaltmayı ve üzerinde bazı değişiklikler yapmayı içerir. Bir tasarımı tüm seçenekleriyle basitçe kopyalama yeteneği, bir öğedeki ayarları mükemmelleştirmek için saatler harcadıktan sonra harika oluyor ve ardından birkaç başka öğe üzerinde. Fakat sadece küçük değişikliklerle tekrarlamanız gerekiyor.
Tasarımı çoğaltmak için üzerine sağ tıkladık, çoğaltma seçeneklerini seçtik ve bir kez daha yaptık. Elementor, bu kopyaları orijinalin altına istifleyecektir; bunları sütunlarına sürüklemeniz yeterlidir.
Geriye simgeleri, başlıkları ve metni değiştirmek kalıyor. Ortadaki simgeyi Harita işaretleyici alt olarak başlığını “Tamamen ayarlanabilir” ve metnini “Duyarlı ve mobil uyumlu, bu widget sayfada bir yıldız olacak” olarak değiştirdik. Üçüncüsü, simgesi için bir etiket, başlık için “Esnek stiller” ve metin için “Bu widget ile farklı renkler, stiller, görünen animasyonlar ve daha fazlasını seçin” etiketini aldı.
Konunun Özeti
Elementor için WordPress Eklentileri sayesinde web sitenize metin içeren simge gibi ilginç ve kullanışlı tasarımlar eklemek kolay ve ilgi çekici olabilir. Aralarından seçim yapabileceğiniz çeşitli seçenekler var – bu gösteride keşfettiklerimizden çok daha fazlası ve hepsini keşfetmekten ve bu eklentinin sunduğu en iyi öğe kombinasyonunu bulmaktan çekinmeyin.