En çok ihtiyaç duyduğunuzda güvenilir WordPress eğitimleri.
WordPress Başlangıç Rehberi
WPB Kupası
25 Milyon+
Eklentilerimizi kullanan web siteleri
16+
Yıllık WordPress deneyimi
3000+
Uzmanlardan WordPress eğitimleri

WordPress'te Bir Resmin Etrafına Kenarlık Nasıl Eklenir (3 Kolay Yöntem)

Görüntülerinizin WordPress sitenizin arka planına kaybolduğunu hiç hissettiniz mi? Harika görseller seçersiniz, ancak sayfaya yerleştirildiklerinde düz görünürler, neredeyse hiç yokmuş gibi.

Bu durum, özellikle temiz, beyaz düzenlerde sıkça yaşanır. Ve her şey cilalı görünse bile içeriğinizin daha az ilgi çekici hissetmesine neden olabilir.

Basit bir kenarlık eklemenin büyük bir fark yaratabileceği yer burasıdır.

WPBeginner olarak, ekran görüntülerimizin daha belirgin olmasını sağlamak ve sayfalarımızın genel görünümünü iyileştirmek için temiz kenarlıklar eklemeyi seviyoruz. Daha iyi etkileşim, daha dengeli bir tasarım ve daha profesyonel bir his için en sevdiğimiz püf noktalarından biridir.

Bu kılavuzda, WordPress'te bir görüntüye kenarlık eklemenin üç kolay yolunu göstereceğiz. Sonunda, görüntülerinizi nasıl öne çıkaracağınızı ve ziyaretçileri içeriğinizle nasıl ilgilendireceğinizi bileceksiniz. 🙌

WordPress'te bir resmin etrafına kenarlık nasıl eklenir

WordPress'te Bir Görüntünün Etrafına Kenarlık Neden Eklenir?

Bir kenarlık, özellikle açık veya yoğun arka planlara sahip sayfalarda görsellerinizin içeriğinizin geri kalanından sıyrılmasına yardımcı olur. Görsellerinizin daha kolay görülmesini ve dikkat çekmesini sağlayan net bir görsel sınır oluşturur.

Görseller güçlü iletişim araçlarıdır. Bilgiyi hızlı bir şekilde paylaşabilir ve metin ağırlıklı sayfaları daha çekici hale getirebilirler.

Ancak bazen görüntüler web sitesinin arka planıyla karışabilir. Bu, özellikle arka plan görüntüsü kullanıyorsanız veya sitenizin renkleri resimlerinizinkine benziyorsa daha olasıdır.

Görme engelli veya renk körü kişiler, görüntüleri arka plandan ayırt etmekte zorlanabilirler. Daha fazla bilgi edinmek isterseniz, WordPress web sitesi erişilebilirliğini iyileştirme konusunda bir rehberimiz var.

WordPress'te bir resmin etrafına kenarlık eklemek, resmi sitenizin arka planından net bir şekilde ayırır. En önemli görsellerinize dikkat çekmenin de harika bir yoludur.

Bunu akılda tutarak, WordPress blogunuzdaki bir görselin etrafına nasıl kenarlık ekleyebileceğinizi adım adım anlatacağız.

İşte bu makalede ele alacağımız tüm yöntemlerin hızlı bir özeti:

Hazır mısınız? Başlayalım.

Yöntem 1: WordPress'te Bir Görsele Kenarlık Eklemek İçin Özel CSS Sınıfları Kullanma

Özel bir CSS sınıfı oluşturmak, resimlerinize kenarlık eklemenin akıllıca ve kolay bir yoludur. CSS sınıfı, kenarlıklar, renkler veya boşluklar gibi aynı stilin sitenizdeki birden çok öğeye uygulanmasını sağlayan yeniden kullanılabilir bir kod bloğudur.

Bu nedenle, her resmi tek tek düzenlemek yerine, kenarlık ayarlarınızı tek bir yerde tanımlayabilir ve birkaç tıklamayla ihtiyacınız olan her yere uygulayabilirsiniz. Bu, sitenizdeki birden fazla resme kenarlık eklemeyi planlıyorsanız mükemmeldir.

Özel bir CSS sınıfı oluşturmanın birkaç yolu vardır. Tema özelleştiricisini, Tam Site Düzenleyicisini veya WPCode eklentisini kullanabilirsiniz.

WPCode eklentisini kullanmanızı her zaman öneririz çünkü başlangıç dostudur ve temadan bağımsızdır. Bu, WordPress temanızı değiştirseniz bile özel CSS'nizin çalışmaya devam edeceği anlamına gelir.

İş ortağı markalarımızda özel kod parçacıkları eklemek ve yönetmek için WPCode kullanıyoruz. Bu konuda daha fazla bilgi edinmek için detaylı WPCode incelememize bakın.

WPCode'un ana sayfası

Öyleyse WPCode eklentisini kuralım ve etkinleştirelim. Yardıma ihtiyacınız olursa, bir WordPress eklentisinin nasıl kurulacağına dair rehberimize bakabilirsiniz.

📝 Not: WPCode'un ücretsiz sürümünü kullanabilirsiniz, ancak WPCode Pro'ya yükseltmek, kod zamanlama ve eksiksiz revizyon geçmişi gibi daha fazla özelliği kilidini açacaktır.

Etkinleştirdikten sonra, Kod Parçacıkları » + Parçacık Ekle bölümüne gitmek isteyeceksiniz.

Ardından, ‘Özel Kodunuzu Ekleyin (Yeni Parçacık) seçeneğinin üzerine gelebilir ve ‘Parçacığı kullan’a tıklayabilirsiniz.

Yeni özel kod parçacığı ekleyin

Bir sonraki ekranda, WPCode sizden bir kod türü seçmenizi isteyecektir.

WPCode'un varsayılan ayarlarının ‘PHP Parçacığı’nı gösterdiğini fark edebilirsiniz, ancak burada ‘CSS Parçacığı’na tıklamanız gerekecektir.

Kod Türü Olarak CSS Parçasını Seçme

Bu, WPCode düzenleyicisini açacaktır. Buradan, özel kod parçacığı için önce bir ad oluşturabilirsiniz. Örneğin, 'border-black' kullanıyoruz.

CSS sınıfınızı oluştururken kenarlığın rengini ve genişliğini belirtmeniz gerektiğini unutmayın.

Örneğin, genişlik için piksel (px) ve renk için onaltılık renk kodu ayarlayabilirsiniz.

Aşağıdaki kod parçacığında, 5 piksel genişliğinde siyah bir kenarlık oluşturuyoruz:

.border-black {
    border: #000 solid 5px;
}

Yukarıdaki örnek kodda, border-black CSS sınıfının adıdır (WPCode'daki özel kod parçacığımızla aynıdır, bu da düzenli kalmayı kolaylaştırır).

İstediğiniz herhangi bir adı kullanabilirsiniz, ancak bir kenarlık oluşturmak istediğinizde her seferinde CSS sınıf adını yazmanız gerekecektir. Bunu akılda tutarak, kısa ve hatırlanması kolay bir CSS sınıf adı oluşturmak isteyeceksiniz.

Şimdi yapmanız gereken tek şey, bu kod parçasını WPCode'un 'Kod Önizleme' alanına şu şekilde kopyalamak:

WPCode'a resim kenarlığı CSS kod parçacığı ekleme

Ardından, kod parçasını etkinleştirmek için anahtarı değiştirebilir ve ‘Kod Parçasını Kaydet’ veya ‘Güncelle’ düğmesine basabilirsiniz. Ayrıntılı talimatlar için, WordPress'e özel CSS ekleme konulu kılavuzumuza bakabilirsiniz.

İstediğiniz kadar CSS sınıfı ekleyebilirsiniz. Örneğin, farklı renklere sahip kenarlıklar oluşturabilirsiniz.

Şimdi, bir resme kenarlık eklemek oldukça basittir.

Başlamak için WordPress sayfanızdaki veya gönderinizdeki resme tıklayın. Ardından, ekranınızın sağ tarafındaki 'Blok' sekmesine bakmak ve oradaki 'Gelişmiş' seçeneğini bulmak isteyeceksiniz.

Bölümü genişletmek için üzerine tıklayın.

CSS ile bir resme kenarlık eklemek için Gelişmiş bölümü

'EK CSS SINIFI(LARI)' alanına, görselinize eklemek istediğiniz CSS sınıfının adını yazabilirsiniz.

Aşağıdaki görselde görebileceğiniz gibi, kenarlığın WordPress içerik düzenleyicisinde görünmeyeceğini unutmayın.

Blok düzenleyicideki Ek CSS alanı

Kenarlığın ziyaretçilerinize nasıl görüneceğini görmek için 'Önizleme' düğmesine tıklayın.

Artık kenarlık uygulanmış görüntünüzü göreceksiniz.

CSS kodu kullanılarak oluşturulmuş bir kenarlık

Kenarlığın görünümünden memnunsanız, sayfayı yayınlamanız veya güncellemeniz yeterlidir.

Yöntem 2: WordPress'te Bir Görsele Kenarlık Eklemek İçin Sayfa Oluşturucu Kullanma

Başka bir yöntem sayfa oluşturucu eklentisi kullanmaktır.

Sürükle ve bırak sayfa oluşturucuları, giriş ve landing page'ler gibi web sayfalarını kolayca tasarlamanıza ve özelleştirmenize olanak tanır. Herhangi bir kodlama becerisine ihtiyaç duymadan metin, resim ve diğer öğeleri ekleyebilirsiniz.

Bu araçlar ayrıca her resim için benzersiz kenarlıklar oluşturmanıza da olanak tanır. Birçok insan için daha kolay olan görsel tabanlı bir düzenleyici kullanarak bunları tasarlayabilirsiniz.

WordPress için SeedProd'u öneririz; bu, WordPress için en iyi açılış sayfası oluşturucusudur. Kullanıcı dostudur ve profesyonel görünümlü sayfaları kolayca oluşturmanıza olanak tanır.

Bu aracı neden önerdiğimizi görmek için tam SeedProd incelememize göz atmaktan çekinmeyin.

SeedProd ana sayfası

SeedProd, yerleşik kenarlık seçeneklerine sahip özel bir Görüntü bloğuna sahiptir. Ayrıca kolayca gölgeler ekleyebilir ve boşlukları ayarlayabilirsiniz.

Öncelikle eklentiyi yüklemeniz ve etkinleştirmeniz gerekecektir. Yardım için, bir WordPress eklentisinin nasıl kurulacağına dair rehberimize bakın.

📝 Not: Bu rehberde, SeedProd'un ücretsiz sürümünü kullanacağız, böylece bütçeniz ne olursa olsun görsellerinize kenarlık ekleyebilirsiniz. Ayrıca, 2 milyon stok fotoğraf ve ek bloklardan oluşan bir kütüphaneye erişim sağlayan SeedProd Pro sürümü de bulunmaktadır.

Etkinleştirdikten sonra, WordPress kontrol panelinizden SeedProd » Açılış Sayfaları'na gidelim.

SeedProd'da yeni bir açılış sayfası nasıl oluşturulur

SeedProd, kategorilere ayrılmış yüzlerce profesyonelce tasarlanmış şablonla birlikte gelir. Ekranın üst kısmında, kullanabileceğiniz kategoriler göreceksiniz:

Bir tasarıma bakmak için, bir şablonun üzerine fareyle gelin ve göründüğünde büyüteç simgesine tıklayın.

Bu, şablonun bir önizlemesini gösterecektir.

SeedProd'un açılış sayfası şablonları

Şablonun görünümünden memnunsanız, devam edin ve 'Bu Şablonu Seç'e tıklayın.

‘Sayfa Adı’ alanına sayfa için bir ad yazın. Varsayılan olarak SeedProd bu adı sayfanın URL'si olarak kullanacaktır.

Otomatik olarak oluşturulan bu URL'yi değiştirmek isterseniz, 'Sayfa URL' alanındaki metni düzenlemeniz yeterlidir.

WordPress'te yeni bir sayfa oluşturma

Bilgileri girdikten sonra, ‘Kaydet ve Sayfayı Düzenlemeye Başla’ düğmesine tıklayabilirsiniz. Bu, seçtiğiniz şablonu SeedProd'un sürükle ve bırak düzenleyicisinde açacaktır.

Sol menüde, sürükle ve bırak kullanarak WordPress sayfanıza ekleyebileceğiniz tüm blokları göreceksiniz.

SeedProd tasarımına blok ekleme

Basitçe 'Resim' bloğunu bulun, ardından sayfa tasarımınıza sürükleyin.

Bunu yaptıktan sonra, bloğu özelleştirmek için kullanabileceğiniz tüm ayarları görmek için ‘Görüntü’ bloğuna tıklayın.

SeedProd ile Bir Görsele Kenarlık Ekleme

🧑‍💻 Profesyonel İpucu: DALL·E entegrasyonlu SeedProd'un Yapay Zeka Resim Oluşturucusu, saniyeler içinde yüksek kaliteli görseller oluşturmanıza olanak tanır. İhtiyacınız olanı açıklamanız yeterlidir, yapay zeka sitenizin stiline uygun görseller oluşturacaktır.

Ardından, mevcut resimleri düzenlemek, renkleri ayarlamak, nesneleri değiştirmek veya basit komutlarla düzenleri ince ayar yapmak için yerleşik fırça aracını kullanabilirsiniz. Ayrıntılar için WordPress'te yapay zeka kullanarak görsel oluşturma hakkındaki rehberimize bakın.

Sol menüde, ‘Kendi Resmini Kullan’ seçeneğine tıklamak isteyeceksiniz.

Artık WordPress medya kütüphanesinden herhangi bir görsel seçebilirsiniz.

SeedProd'daki Kendi Resmini Kullan düğmesi

Bundan sonra, sol menüdeki ‘Gelişmiş’ sekmesine tıklayın.

Ardından, ‘Resim Kenarlığı’ bölümünü genişletmek için tıklayın.

SeedProd ile bir resme kenarlık eklemek için Resim Kenarlığı bölümü

Varsayılan olarak, SeedProd'un Kenarlık Genişliği ayarlarının tümü 0'dır, bu da resmin kenarlığı olmadığı anlamına gelir.

Yapmak isteyeceğiniz ilk şey bu değerleri 1 veya daha yükseğe çıkarmaktır. Bu, görselde görünür bir kenarlık ekleyecektir.

Başlamak için, ‘Kenarlık Genişliği’ alanlarının her birine tıklayın ve ardından daha yüksek bir sayı yazın veya görünen ok düğmelerini kullanın.

SeedProd ile bir görüntü kenarlığı genişliğini özelleştirme

Kenarlığın kalınlığından memnun kaldığınızda, onu stilize etmeye başlayabilirsiniz.

Bir seçenek, ‘Kenarlık Rengi’ yanındaki alana tıklayarak kenarlığın rengini değiştirmektir. Bu, yeni bir kenarlık rengi seçebileceğiniz bir açılır pencere açacaktır.

SeedProd ile bir kenarlığın renk ayarlarını değiştirmek

SeedProd, üç basit kenarlık stili sunar: düz, noktalı ve çizgili. Resminize en uygun olanı seçebilirsiniz.

Bu farklı kenarlık stillerini denemek için, ‘Kenarlık Stili’ açılır menüsünü açmanız ve listeden bir seçenek seçmeniz yeterlidir.

SeedProd kullanılarak oluşturulmuş noktalı bir kenarlık

İşte bu kadar!

Ve diğer görüntülere kenarlık eklemek isterseniz, yukarıda açıklanan aynı işlemi izleyin.

Sayfa tasarımınızdan memnun kaldığınızda, 'Kaydet' düğmesine tıklayabilir ve ardından yayına almak için 'Yayınla'yı seçebilirsiniz.

Yöntem 3: WordPress'te Bir Görüntünün Etrafına Kenarlık Eklemek İçin HTML ve CSS Kullanma

Kenarlık eklemek için HTML ve CSS de kullanabilirsiniz. Bu yöntem bir eklenti gerektirmez, bu da kullanışlı olabilir.

Ancak, kenarlığın görünümünü özelleştirmek kod yazmayı gerektirir, bu nedenle yeni başlayanlar için en iyi seçenek olmayabilir. Yine de biraz kodlama konusunda rahatsanız, bu yöntem harika bir esneklik sunar.

Başlamak için, herhangi bir sayfaya veya yazıya bir resim ekleyelim.

Bunu yaptıktan sonra, sağ üst köşedeki üç noktalı simgeye tıklayabilir ve ardından 'Kod düzenleyici'ye tıklayabilirsiniz.

WordPress'teki kod düzenleyici menü öğesi

WordPress şimdi sayfanın veya gönderinin yapısını oluşturan tüm kodu gösterecektir.

Artık resminizi sayfanıza ekleyen kod bölümünü bulabilirsiniz. Bu kod wp:image  ile başlayacaktır.

WordPress kod düzenleyicisindeki wp:image dizesi

Sayfada birden fazla resim varsa, img src= değerini kontrol edin. Bu, WordPress medya kütüphanenizdeki resmin URL'sidir ve her resim için farklı olacaktır.

Doğru kod bölümünü bulduktan sonra, bir sonraki adım kenarlık ekleyen ve stilini kontrol eden bir kod satırı yazmaktır.

Örneğin, aşağıdaki kod parçasında kenarlık 3 piksellik bir genişliğe sahiptir. Ayrıca 3 piksel dolgu ve kenar boşluğu ekliyoruz:

style="border:3px solid #000000; padding:3px; margin:3px;" />

Yukarıdaki örnek kodda, solid #000000 kenarlığın rengini ayarlar. #000000 değeri, siyah rengin onaltılık kodudur.

Ve eğer siyah bir kenarlık oluşturmak istemiyorsanız, değeri başka bir hex koduyla değiştirebilirsiniz.

Kenarlık koduna karar verdikten sonra, /></figure> bölümünü bulmanız ve kodunuzu ilk / karakterinden hemen önce eklemeniz gerekecektir.

Bir örneğe bakalım:

<!-- wp:image {"id":1450,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="http://localhost:10003/wp-content/uploads/2022/06/logo.jpeg" alt="" class="wp-image-1450" style="border:3px solid #000000; padding:3px; margin:3px;" /></figure>
<!-- /wp:image -->

Kodunuzdan memnun kaldığınızda, 'Kod düzenleyicisinden çık' seçeneğine tıklayarak kod düzenleyicisinden çıkın.

Artık görüntünüzün etrafında bir kenarlık görmelisiniz. Geçersiz HTML uyarısı alırsanız endişelenmeyin. Bu normaldir ve görüntünüzün nasıl görüntüleneceğini etkilemez.

WordPress blok düzenleyicisinde bir resim kenarlığı hata mesajı

Görünümünden memnunsanız, sayfanızı normal şekilde güncelleyebilir veya yayınlayabilirsiniz.

Şimdi, WordPress web sitenizi ziyaret ederseniz, görselinizin etrafında bir kenarlık göreceksiniz.

Canlı bir web sitesindeki bir resmin etrafındaki HTML kenarlığı

Ek İpucu: Bir Resmin Etrafına Kenarlık Eklemek İçin Bir Grafik Tasarım Aracı Kullanma

WordPress kenarlık eklemek için çeşitli yöntemler sunarken, bu seçenekler bazen stil ve özelleştirme açısından sınırlı olabilir. Öyleyse, neden önce görüntünüzü düzenleyip sonra WordPress'e yüklemiyorsunuz?

Grafik tasarım araçlarının kullanışlı olduğu yer burasıdır.

Adobe Photoshop, profesyoneller için tonlarca süslü özelliğe sahip büyük oyuncudur. Bankayı kırmak istemiyorsanız, Affinity Photo sağlam bir seçimdir – benzer numaralara sahiptir, ancak yalnızca bir kez ödersiniz.

Daha kullanıcı dostu, tarayıcı tabanlı bir deneyim için, Canva mükemmel bir araçtır. Ekibimiz, öne çıkan görselleri ve sosyal medya grafiklerini hızlı bir şekilde tasarlamak için düzenli olarak kullanır.

Ve bütçenizi düşünüyorsanız, GIMP (GNU Görüntü İşleme Programı) sizin için ideal olabilir. Tamamen ücretsiz, açık kaynaklıdır ve ücretli araçların yapabildiği birçok şeyi yapabilir.

GIMP, hem yeni başlayanlar hem de deneyimli kullanıcılar için harika bir seçenektir. Mac ve Windows'ta kullanabilirsiniz.

Bu eğitimde, GIMP kullanarak bir resmin etrafına nasıl kenarlık ekleyebileceğinizi göstereceğiz.

GIMP

Kurulumdan sonra GIMP masaüstü uygulamasını açmak isteyeceksiniz. Ardından, yerel sürücünüzden düzenlemek istediğiniz bir görseli seçmek için Dosya » 'a tıklayabilirsiniz. Veya birini GIMP'in düzenleyicisine sürükleyip bırakabilirsiniz.

Resim GIMP düzenleyicisinde yüklendikten sonra, 'Dikdörtgen Seçim Aracı'nı kullanarak resmin etrafına bir kenarlık çizelim. Bu aracı sol üst köşedeki araç çubuğunda bulabilirsiniz.

GIMP'in dikdörtgen seçim aracı

Ardından, ön plan ve arka plan renk ayarlarınızı kontrol etmek isteyebilirsiniz.

Bunun nedeni, GIMP'in çizgileri çizmek için ön plan rengini kullanmasıdır. Bu nedenle, kenarlığınız için belirli bir renk kullanmanız gerekiyorsa, ayarlamak için ön plan rengine tıklayabilirsiniz.

Bu, renk seçiciyi açacaktır; burada fareyi renk seçimi alanı üzerinde gezdirebilir veya rengin onaltılık kodunu girebilirsiniz.

GIMP'in renk seçicisi

Bunu yaptıktan sonra 'Tamam' düğmesine tıklayabilirsiniz.

Kenarlık renginizi ayarladığınıza göre, şimdi uygulama zamanı. Düzenle » Kenar Boşluğu Seçimi'ne gidebilirsiniz ve bu 'Kenar Boşluğu Seçimi' açılır penceresini açacaktır.

Burada, çizginin stilini, çizgi genişliğini ve daha fazlasını ayarlayabilirsiniz. Örneğin, çizgi genişliğimizi 5 piksel olarak ayarladık.

GIMP'in seçim çizme açılır penceresi

Yaptıktan sonra, 'Stroke' (Kenarlık) düğmesine tıklayın ve kenarlık resminize eklenmiş olmalıdır.

WordPress'e yüklemeden önce, mükemmel site hızını ve performansını korumak için görüntüyü optimize etmek isteyebilirsiniz. Ham görüntüler genellikle büyük boyutludur, bu nedenle bu adım büyük bir yardım olabilir.

GIMP'te, resminizi yeniden boyutlandırarak optimize edebilirsiniz.

Başlamak için Resim » Resmi Ölçekle yolunu izlemeniz gerekecektir. Bu, 'Resim Boyutu'nu aşağıdaki gibi ayarlayabileceğiniz 'Resmi Ölçekle' açılır penceresini açacaktır:

GIMP'te resim boyutunu ayarlama

Görüntü boyutunu ayarladıktan sonra 'Ölçekle' düğmesine tıklayabilirsiniz.

GIMP daha sonra resmi yeniden boyutlandıracak ve yeni sürümü düzenleyicide gösterecektir.

GIMP düzenleyicisindeki yeni görüntü sürümü

İşiniz bittiğinde, Dosya » Farklı Dışa Aktar bölümüne giderek resmi kaydedebilirsiniz.

Ardından, bir konum seçmek, dosyayı adlandırmak ve görüntü biçimini tanımlamak için istemi takip edebilirsiniz. Her şey ayarlandığında, 'Dışa Aktar' düğmesine tıklayın.

Şimdi, görüntünüzü WordPress gönderinize veya sayfanıza yükleyebilirsiniz. Blok düzenleyicide şöyle görünebilir:

WordPress blok düzenleyicisinde kenarlıklı resim

İşte bu kadar – bir grafik tasarım aracı kullanarak bir resmin etrafına kenarlık eklemeyi öğrendiniz!

Bu yöntemi, bir görseli WordPress'e yüklemek istediğinizde kullanabilirsiniz.

SSS: WordPress'te Bir Görselin Etrafına Kenarlık Ekleme

Resimlerinizi stilize etme konusunda hala sorularınız mı var? WordPress'te kenarlık ekleme konusunda sorun gidermenize, özelleştirmenize ve en iyi şekilde yararlanmanıza yardımcı olacak bazı yaygın SSS'ler şunlardır.

Sitemdeki tüm resimlere aynı anda aynı kenarlığı ekleyebilir miyim?

Evet, bunu ana img etiketine stiller uygulayarak özel CSS ile yapabilirsiniz. Ancak bu, logoları, simgeleri veya widget'lardaki resimleri de etkileyebilir.

Daha iyi kontrol için, bir CSS sınıfı oluşturmanızı (Yöntem 1'deki gibi) ve bunu yalnızca kenarlık istediğiniz resimlere uygulamanızı öneririz.

Resim kenarlığım için yuvarlak köşeler nasıl oluşturabilirim?

border-radius CSS özelliğini kullanarak kolayca yuvarlak köşeler oluşturabilirsiniz. Özel CSS parçacığınıza border-radius: 15px; satırını eklemeniz yeterlidir. Piksel değeri ne kadar yüksek olursa, köşeler o kadar yuvarlak olur.

WordPress temanızın otomatik olarak eklediği bir kenarlığı kaldırabilir miyim?

Evet. Bunu geçersiz kılmak için, border: none !important; ile özel bir CSS sınıfı oluşturabilirsiniz—örneğin, .no-border. Ardından bunu blok veya resim ayarlarındaki 'Ek CSS Sınıfı(ları)' alanını kullanarak belirli resimlere uygulayabilirsiniz.

Bir CSS kenarlığı eklemek web sitemi yavaşlatır mı?

Hayır, basit bir CSS kenarlığı yalnızca bir kod satırıdır ve sayfanızın yüklenme hızı üzerinde fark edilir bir etkisi yoktur. Performansı etkileyen şey görüntünün dosya boyutudur, bu nedenle görüntülerinizi web için optimize ettiğinizden emin olun.

Umarım bu makale, WordPress'te bir görselin etrafına kenarlık eklemeyi öğrenmenize yardımcı olmuştur.

Bu yardımcı olduysa, aşağıdaki rehberlerimize de göz atabilirsiniz:

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklamanız durumunda komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve bize nasıl destek olabileceğinizi görün. İşte editöryal sürecimiz.

Nihai WordPress Araç Seti

Araç Kitimize ÜCRETSİZ erişim kazanın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Okuyucu Etkileşimleri

11 CommentsLeave a Reply

  1. Gutenberg düzenleyicisini kullanarak bunu çalıştırmaya çalışıyorum ve bunun yerine aşağıdaki hatayı alıyorum: Bu blok beklenmeyen veya geçersiz içerik içeriyor.

    Bir hata olmadığını biliyorum. HTML'ye bir CSS sınıfı ekliyorum ama Gutenberg bunu sevmiyor.

  2. Bahsettiğiniz eklenti, görünüşe göre Wordpress'in son 3 büyük sürümüyle test edilmemiş. O zaman kullanmak iyi bir fikir olmaz.

  3. Çok bilgilendirici. Yeni başlayanlar olarak bize yardım ettiğiniz için teşekkür ederiz.

  4. Merhaba, güzel makale!

    Ahşap stiliyle bir kenarlık eklemenin bir yolunu biliyor musunuz?

    Manzara fotoğraflarını göstermek için bir WordPress sitesi yapıyorum ve ahşap stili bir kenarlık kullanmak istiyorum, böylece insanlar resmin gerçek bir fotoğraf çerçevesi olarak nasıl görüneceğini görebilirler, bana bu konuda yardımcı olabilir misiniz?

    Teşekkürler!

  5. Çok çok yetenekli bir makale, net üzerinde ve wp dünyasında bu kadar az insan işleri basit ve anlaşılır yapmayı biliyor!

    teşekkürler güzel hoş kenarlığım güzelce ayarlandı

    dav from france

  6. Bu çok güzel görünüyor, tertemiz.
    WordPress'te kutu içinde görseller ve metin (bağlantılı) olmasının bir yolu var mı? Kitap inceleme sitesi kuracağım, bu yüzden bunu birçok kez yapmam gerekecek.

  7. Güzel küçük bir makale. WordPress'te her temel şey için bir eklenti var, bu da onu yeni başlayanlar için bu kadar kullanıcı dostu yapıyor. Ancak, kenarlıklar gibi küçük bir şey için bir eklenti çalıştırmak istemiyorsanız, doğrudan içine dalabilirsiniz (özellikle siteniz onlarsız daha hızlı olduğundan).

    Çocuk tema seçeneğini göstermeniz iyi oldu, çünkü bu kenarlıkları geçmiş, şimdi ve gelecekteki tüm görüntülere ekleyecektir.

    Kenarlık genişliğini ve rengini değiştirerek, burada zaten sahip olduklarınızla, görsellerin etrafına "kutular" ve "çerçeveler" oluşturabileceğinizi de belirtebilirsiniz.

Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkürler. Lütfen tüm yorumların yorum politikamıza göre denetlendiğini ve e-posta adresinizin YAYINLANMAYACAĞINI unutmayın. Lütfen isim alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.