WordPress'e Kolayca Kutu Gölgesi Nasıl Eklenir (4 Yol)

Kutu gölgesi, WordPress sitenizdeki öğelere derinlik ve vurgu eklemenin en kolay yollarından biridir. Bu efekti sadece birkaç satır CSS ile oluşturabiliriz.

Bununla birlikte, basit olsa da, bazı WPBeginner okuyucuları bunu etkili bir şekilde nasıl uygulayacakları konusunda ipuçları istemişlerdir, özellikle de kodlama konusunda rahat değillerse.

Bu makalede, WordPress'e adım adım kolayca kutu gölgeleri eklemenin birkaç yolunu göstereceğiz. 

WordPress'e Kutu Gölgeleri Neden Eklenir?

Bazen damla gölgesi olarak da bilinen kutu gölgesi, ekrandaki bir şeyin gölge düşürüyormuş gibi görünmesini sağlayan görsel bir efekttir.

Bize daha yakın görünen nesnelere daha fazla dikkat etme eğilimindeyiz. Bunu akılda tutarak, birçok web sitesi sahibi en önemli içeriklerine, sayfanın üzerinde süzülüyormuş gibi görünmesi için kutu gölgeleri ekler.

Örneğin, bir eylem çağrısı düğmesine büyük bir gölge eklerseniz, ziyaretçiye fiziksel olarak daha yakın görünecek ve dikkatini çekecektir.

Bu doğrultuda, WordPress blogunuza veya web sitenize kutu gölgeleri ekleyebileceğinizi görelim. Kullanmak istediğiniz yönteme doğrudan atlamak için aşağıdaki hızlı bağlantıları kullanmanız yeterlidir.

• Yöntem 1. Kod Kullanarak Kutu Gölgesi Ekleme (Daha Fazla Kontrol)
• Yöntem 2. Ücretsiz Bir Eklenti Kullanarak Kutu Gölgesi Ekleme
• Yöntem 3. Sayfa Oluşturucu Kullanarak Kutu Gölgesi Ekleme (Kolay)
• Yöntem 4. CSS Hero Kullanarak Kutu Gölgesi Ekleme (Gelişmiş)
• WordPress Sitenize Benzersiz Tasarımlar Eklemenin Daha Fazla Yolunu Öğrenin

Yöntem 1. Kod Kullanarak Kutu Gölgesi Ekleme (Daha Fazla Kontrol)

Her WordPress bloğuna bir gölge efekti eklerseniz, siteniz karmaşık ve kafa karıştırıcı görünebilir. Bunu akılda tutarak, yalnızca sayfanın en önemli öğelerine bir kutu gölgesi eklemelisiniz.

Kutu gölgelerini siteniz boyunca tutarlı tutmalısınız. Bunu yapmanın en iyi yolu, stili CSS'de WPCode kullanarak tanımlamaktır.

WPCode, 1 milyondan fazla WordPress web sitesi tarafından kullanılan en iyi kod parçacığı eklentisidir. functions.php dosyasını düzenlemek zorunda kalmadan WordPress'e özel kod eklemeyi kolaylaştırır.

WPCode ile yeni başlayanlar bile web sitelerinin kodunu, birçok yaygın WordPress hatasına neden olabilecek hata ve yazım yanlışları yapma riski olmadan düzenleyebilir.

Yapmanız gereken ilk şey, ücretsiz WPCode eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, Kod Parçaları » Parça Ekle bölümüne gidin.

Burada, sitenize ekleyebileceğiniz tüm hazır WPCode parçacıklarını göreceksiniz. Bunlar arasında yorumları tamamen devre dışı bırakmanıza, WordPress'in normalde desteklemediği dosya türlerini yüklemenize, ek sayfa sayfalarını devre dışı bırakmanıza ve çok daha fazlasına olanak tanıyan bir parçacık bulunur.

Fare imlecini 'Özel Kodunuzu Ekleyin (Yeni Parça)' üzerine getirin ve göründüğünde '+ Özel Parça Ekle'ye tıklayın.

Ardından, ekranda görünen seçenekler listesinden kod türünü seçmeniz gerekir.

Bu eğitim için, WordPress'e özel CSS eklemeniz gerekecek, bu nedenle kod türü olarak 'CSS Snippet'i seçin.

Şimdi Özel Kod Parçacığı Oluştur sayfasında yönlendirileceksiniz.

Başlamak için özel kod parçacığına bir başlık yazın. Bu, parçacığı WordPress kontrol panelinde tanımlamanıza yardımcı olacak herhangi bir şey olabilir.

Ardından, ‘Code Preview’ kutusunda aşağıdaki kod parçasını kopyalayıp yapıştırın:

.shadow-effect { box-shadow: 5px 5px 0px 2px #a9a1a1; } 

Yukarıdaki kod parçasında, oluşturmak istediğiniz gölge türüne bağlı olarak piksel değerlerini değiştirmeniz gerekebilir.

Size yardımcı olmak için, farklı piksel değerlerinin soldan sağa doğru ne anlama geldiğini aşağıda bulabilirsiniz:

• Yatay ofset. Pozitif bir değer ayarladığınızda, gölge sola doğru itilir. -5px gibi negatif bir değer yazarsanız, gölge sağa doğru itilir. Yatay bir ofset eklemek istemiyorsanız, bunun yerine 0px kullanabilirsiniz.
• Dikey ofset. Pozitif bir değer kullanırsanız, gölge aşağı doğru itilecektir. Negatif bir değer girerseniz, gölge yukarı doğru itilecektir. Gölgeyi dikey olarak ofset etmek istemiyorsanız, sadece 0px girin.
• Bulanıklık yarıçapı. Bu, gölgenin sert kenarları olmayacak şekilde bulanıklaştırır. Değer ne kadar yüksek olursa, bulanıklık etkisi o kadar büyük olur. Keskin kenarlar kullanmayı tercih ederseniz, 0px yazın.
• Yayılma yarıçapı. Değer ne kadar yüksek olursa, gölgenin yayılması o kadar büyük olur. Bu değer isteğe bağlıdır, bu nedenle bir yayılma göstermek istemiyorsanız bu adımı atlayın.
• Renk. Gölgeler için en yaygın renk gri olsa da, onaltılık bir kod yazarak istediğiniz rengi kullanabilirsiniz. Hangi kodu kullanacağınızdan emin değilseniz, HTML Renk Kodları gibi bir kaynak kullanarak farklı renkleri keşfedebilirsiniz.

Kod parçacığından memnun kaldığınızda, 'Ekleme' bölümüne gidin. WPCode, kodunuzu her gönderiden sonra, yalnızca ön uçta veya yalnızca yönetici gibi farklı konumlara ekleyebilir.

Özel CSS kodunu WordPress web sitenizin tamamında kullanmak için, henüz seçili değilse ‘Otomatik Ekle’ye tıklayın. Ardından, ‘Konum’ açılır menüsünü açın ve ‘Site Geneli Başlık’ seçeneğini belirleyin.

Bundan sonra, ekranın üst kısmına kaydırıp ‘Etkin Değil’ geçişini tıklayarak ‘Etkin’ hale getirmeye hazırsınız.

Son olarak, CSS parçasını canlı hale getirmek için ‘Parçayı Kaydet’e tıklayın.

Artık özel CSS sınıfını herhangi bir bloğa ekleyebilirsiniz.

WordPress blok düzenleyicisinde, kutu gölgesi eklemek istediğiniz bloğu seçin. Ardından, sağdaki menüde 'Gelişmiş' bölümünü genişletmek için tıklayın.

Burada, farklı sınıflar ekleyebileceğiniz alanlar göreceksiniz.

'Ek CSS Sınıf(lar)' bölümüne shadow-effect yazın.

Kutu gölgesini yayınlamaya hazır olduğunuzda, 'Yayınla' veya 'Güncelle' düğmesine tıklayın.

Artık web sitenizi ziyaret ettiğinizde kutu gölgesini canlı olarak göreceksiniz.

Bir kutu gölgesi eklemenin yanı sıra, WPCode'u kullanarak metin rengini değiştirebilir veya hatta WordPress temanızın alıntı bloklarının stilini özelleştirebilirsiniz.

Yöntem 2. Ücretsiz Bir Eklenti Kullanarak Kutu Gölgesi Ekleme

Kod yazmaktan rahat değilseniz, Drop Shadow Box kullanarak gölge oluşturmayı tercih edebilirsiniz. Bu ücretsiz eklenti, yerleşik WordPress sayfa ve gönderi düzenleyicisini kullanarak herhangi bir bloğa kutu gölgesi eklemenize olanak tanır.

Öncelikle eklentiyi kurmanız ve etkinleştirmeniz gerekecek. Yardıma ihtiyacınız olursa, lütfen bir WordPress eklentisinin nasıl kurulacağına dair rehberimize bakın.

Yapılandırılacak ayar yoktur, bu nedenle bu eklentiyi hemen kullanmaya başlayabilirsiniz.

Bir damla gölge eklemek için, '+' simgesine tıklayın ve 'Drop Shadow Box' yazmaya başlayın. Doğru blok göründüğünde, sayfaya veya gönderiye eklemek için tıklayın.

Bu, açılır gölgeyi boş bir kutu olarak ekler, bu nedenle bir sonraki adım içerik eklemektir.

Bunu yapmak için, Gölge Kutusu bloğundaki '+' işaretine tıklayın.

Ardından, kullanmak istediğiniz bloğu ekleyin ve normal şekilde yapılandırın.

Örneğin, aşağıdaki resimde bir Resim bloğu ekledik ve WordPress medya kitaplığından bir resim seçtik.

Bu işlem tamamlandıktan sonra, Açılır Gölge Kutusu bloğunu seçmek için tıklayın. Sağdaki menüde, bu bloğu biçimlendirmek için kullanabileceğiniz tüm ayarları göreceksiniz.

WordPress, gölgenin genişliğini otomatik olarak ayarlar ancak ‘Genişlik’ açılır menüsünü açıp ‘Piksel’ veya ‘%’ seçeneklerinden birini seçerek bunu değiştirebilirsiniz.

Ardından görünen ayarları kullanarak yeniden boyutlandırabilirsiniz.

Drop Box Shadow eklentisi, kavisli kenarlar ve dikkat çekici 'Perspektif' efekti gibi birkaç farklı efektle birlikte gelir.

Farklı efektleri önizlemek için 'Efekt' açılır menüsünü açın ve listeden seçim yapın. Önizleme otomatik olarak güncellenecektir, böylece ne tercih ettiğinizi görmek için farklı stilleri deneyebilirsiniz.

Ayrıca, ‘Inside Shadow’ ve ‘Outside Shadow’ geçişlerini kullanarak eklentinin gölgeyi kutunun içine, kutunun dışına veya her ikisine birden gösterip göstermeyeceğini de değiştirebilirsiniz.

Bundan sonra, 'Renkler' başlığı altındaki ayarları kullanarak kutunun ve kenarlığın rengini değiştirebilirsiniz.

'Arka Plan'ın Damla Gölge Kutusu'nun içini ifade ettiğini, 'Kenarlık' ise bloğun dışına göründüğünü unutmayın.

Daha yumuşak, kavisli bir gölge kutusu oluşturmak istiyorsanız, ‘Rounded corners’ geçişini etkinleştirebilirsiniz. Son olarak, WordPress'teki diğer blokları özelleştirme şeklinize benzer şekilde hizalamayı ve dolguyu değiştirebilirsiniz.

Daha fazla kutu gölgesi oluşturmak için yukarıda açıklanan aynı işlemi izlemeniz yeterlidir.

Sayfanın görünümünden memnun kaldığınızda, tüm yeni kutu gölgelerinizi canlı hale getirmek için ‘Güncelle’ veya ‘Yayınla’ya tıklamanız yeterlidir.

Yöntem 3. Sayfa Oluşturucu Kullanarak Kutu Gölgesi Ekleme (Kolay)

Açılış sayfalarına, özel ana sayfalara veya WordPress temanızın herhangi bir bölümüne kutu gölgeleri eklemek istiyorsanız, bir sayfa oluşturucu eklentisi kullanmanızı öneririz.

SeedProd, en iyi sürükle-bırak WordPress sayfa oluşturucusudur. Özel açılış sayfaları tasarlamanıza ve hatta tek satır kod yazmadan özel bir WordPress teması oluşturmanıza olanak tanır.

Ayrıca, gelişmiş sürükle ve bırak düzenleyicisini kullanarak herhangi bir bloğa kutu gölgeleri eklemenizi sağlar.

Öncelikle SeedProd eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına dair adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra WordPress kontrol panelinizde SeedProd » Landing Pages bölümüne gidin.

SeedProd, kategorilere ayrılmış 300'den fazla profesyonelce tasarlanmış şablonla birlikte gelir. Üst kısımda, güzel yakında gelecek sayfaları oluşturmanıza, bakım modunu etkinleştirmenize, WordPress için özel bir giriş sayfası oluşturmanıza ve daha fazlasına olanak tanıyan kategoriler göreceksiniz.

SeedProd'un tüm şablonları özelleştirmesi kolaydır, bu nedenle istediğiniz tasarımı kullanabilirsiniz.

Kullanmak istediğiniz bir şablon bulduğunuzda, üzerine fareyle gelin ve onay işareti simgesine tıklayın.

Artık 'Sayfa Adı' alanına açılış sayfanız için bir ad yazabilirsiniz. SeedProd, sayfa adını kullanarak otomatik olarak bir 'Sayfa URL'si oluşturacaktır.

Mümkün olduğunda URL'nize ilgili anahtar kelimeleri eklemek akıllıcadır, çünkü bu arama motorlarının sayfanın ne hakkında olduğunu anlamasına yardımcı olur. Bu genellikle WordPress SEO'nuzu iyileştirecektir.

Sayfanın otomatik olarak oluşturulan URL'sini değiştirmek için ‘Sayfa URL’ alanına yazmanız yeterlidir.

Yazdığınız bilgilerden memnun kaldığınızda, ‘Kaydet ve Sayfayı Düzenlemeye Başla’ya tıklayın. Bu, SeedProd sayfa oluşturucu arayüzünü yükleyecektir.

Bu basit sürükle ve bırak oluşturucu, sayfa tasarımınızın canlı bir önizlemesini sağda gösterir. Solda, sayfaya ekleyebileceğiniz tüm farklı blokları ve bölümleri gösteren bir menü bulunur.

Eklemek istediğiniz bir blok bulduğunuzda, onu şablonunuza sürükleyip bırakmanız yeterlidir.

Bir bloğu özelleştirmek için SeedProd düzenleyicisinde o bloğu seçmek üzere tıklayın. Sol taraftaki menü şimdi bloğu özelleştirmek için kullanabileceğiniz tüm ayarları gösterecektir.

Örneğin, bir Başlık bloğuna tıklarsanız, kendi metninizi yazabilir veya metin rengini ve yazı tipi boyutunu değiştirebilirsiniz.

Sayfayı oluştururken, blokları sürükleyip bırakarak düzeninizde taşıyabilirsiniz. Daha ayrıntılı talimatlar için lütfen WordPress ile açılış sayfası oluşturma kılavuzumuza bakın: WordPress ile açılış sayfası oluşturma.

Bir kutu gölgesi oluşturmak için SeedProd sayfa düzenleyicisindeki herhangi bir bloğu seçmek üzere tıklayın. Sol menüdeki ayarlar bloklar arasında farklılık gösterebilir, ancak tipik olarak 'Gelişmiş' sekmesine tıklamanız gerekecektir.

Burada, 'Stiller' bölümü altında 'Gölge' açılır menüsünü arayın. Bu açılır menüyü açın ve Saç Teli, Orta veya 2X Büyük gibi bir gölge stili seçin.

Önizleme otomatik olarak güncellenir, böylece sayfa tasarımınızda en iyi görüneni görmek için farklı stilleri deneyebilirsiniz.

Hazır stillerden herhangi birini kullanmak istemiyorsanız, 'Özel'e tıklayın.

Bu, özel gölgenin rengini, bulanıklığını, yayılmasını ve konumunu değiştirebileceğiniz bazı yeni ayarlar ekler.

Bu işlem tamamlandıktan sonra, daha fazla blok ve kutu gölgesi ekleyerek sayfada çalışmaya devam edebilirsiniz.

Sayfanın görünümünden memnun kaldığınızda, ‘Kaydet’ düğmesine tıklayın ve ardından canlı hale getirmek için ‘Yayınla’yı seçin.

Yöntem 4. CSS Hero Kullanarak Kutu Gölgesi Ekleme (Gelişmiş)

Kodla çalışmaktan rahatsızsanız ancak yine de gelişmiş kutu gölgeleri oluşturmak istiyorsanız, CSS Hero'yu deneyebilirsiniz. Bu premium eklenti, tek bir satır kod yazmadan WordPress temanızın her bölümünü ince ayar yapmanıza olanak tanır.

CSS Hero, her blok için benzersiz bir gölge oluşturmanıza olanak tanır, bu nedenle çok sayıda farklı gölge efekti oluşturmak istiyorsanız harika bir seçenektir. Eklenti hakkında daha fazla bilgiyi CSS Hero incelememizde bulabilirsiniz.

Öncelikle, CSS Hero eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirdikten sonra, ekranın üst kısmında ‘Ürün Aktivasyonuna Devam Et’ düğmesini göreceksiniz. Devam edin ve bu düğmeye tıklayın.

Bu sizi CSS Hero web sitesine götürecektir, burada hesabınıza giriş yapabilir ve bir lisans anahtarı alabilirsiniz. Ekrandaki talimatları izlemeniz yeterlidir ve birkaç tıklamayla sitenize geri yönlendirileceksiniz.

Ardından, WordPress yönetici araç çubuğundaki 'CSS Hero' metnine tıklayın.

Bu, CSS Hero düzenleyicisini açacaktır.

Varsayılan olarak, CSS Hero düzenleyicisinde web sitenizin WYSIWYG önizlemesi ve web tasarımınızın her öğesini düzenleyebileceğiniz bir sol panel bulunur.

Kutu gölgesini eklemek istediğiniz sayfada olmadığınızı fark ederseniz, 'Düzenle' modundan 'Gezin' moduna geçebilirsiniz.

Bu, navigasyon menüleri, bağlantılar ve diğer içeriklerle normal şekilde etkileşim kurmanızı sağlar.

Artık gölgeyi eklemek istediğiniz sayfaya veya gönderiye gidebilirsiniz.

Bu sayfaya ulaştığınız anda, tekrar 'Düzenle' moduna geçin.

Bu işlem tamamlandıktan sonra, kutu gölgesi eklemek istediğiniz paragraf, resim, düğme veya başka herhangi bir içeriğe tıklayın.

Sol panelde 'Ekstra'ya tıklayın.

Artık devam edip ‘Gölge Oluştur’ düğmesine tıklayabilirsiniz.

Bu, kutu gölgesi oluşturmak için kullanabileceğiniz tüm ayarları gösterecektir.

Başlamak için, 'Gölge Konumu' ayarlarını kullanarak gölgenin bloğun içinde mi yoksa dışında mı görüneceğini değiştirebilirsiniz.

Burada, gölgenin görüntünün kendisinin dışında görünmesini sağlamak için 'Dış' seçeneğini belirledik.

Bu kararı verdikten sonra, ‘Yön’ kutusundaki küçük noktayı kullanarak gölgenin yönünü ince ayarlayabilirsiniz.

Canlı önizlemede hareket ettiğini görmek için noktayı yeni bir konuma sürükleyip bırakmanız yeterlidir.

Gölgenin konumundan memnun kaldığınızda, rengini, bulanıklığını ve yayılmasını değiştirebilirsiniz.

CSS Hero bu değişiklikleri anında gösterecektir, böylece en iyi görüneni görmek için farklı ayarları deneyebilirsiniz.

Diğer bloklara kutu gölgesi eklemek için yukarıda açıklanan aynı işlemi izlemeniz yeterlidir.

Sayfanın görünümünden memnun kaldığınızda, değişiklikleri canlı hale getirmek için 'Kaydet'e tıklayın.

WordPress Sitenize Benzersiz Tasarımlar Eklemenin Daha Fazla Yolunu Öğrenin

Yukarıdaki yöntemler, WordPress'te kutu gölgeleri eklemek için harika bir temel sağlar. Peki ya daha da benzersiz ve yaratıcı efektler elde etmek isterseniz?

Aşağıdaki makalelerde, web sitenize çeşitli tasarım öğeleri ekleme konusunda yardımcı rehberler bulacaksınız:

• WordPress'te Görüntü Üzerine Gelme Efektleri Nasıl Eklenir – Bu kılavuz, web sitenizi ziyaretçiler için daha ilgi çekici ve etkileşimli hale getiren farklı görüntü üzerine gelme efektlerini keşfeder.
• WordPress'te CSS Animasyonları Nasıl Kolayca Eklenir – Kutu gölgeleriyle birlikte animasyonlar, ziyaretçilerinizin dikkatini çeken ve onları etkileşimde tutan dinamik ve görsel olarak çekici bir kullanıcı deneyimi yaratabilir.
• Herhangi Bir WordPress Temasına Paralaks Etkisi Ekleme – Paralaks efektleri ekleyerek derinlik yanılsamasını geliştirebilir ve daha sürükleyici bir web sitesi oluşturabilirsiniz.
• WordPress'te Özel Şekil Ayırıcı Nasıl Oluşturulur – Bu makale, içeriğinizin bölümlerini görsel olarak ayırmak için benzersiz şekiller oluşturmayı gösterir.
• WordPress'te Duyarlı Bir Kaydırıcıyı Kolayca Oluşturma – Bu kılavuz, içeriğinizi çekici ve yerden tasarruf sağlayan bir şekilde sergilemek için kaydırıcıları nasıl oluşturacağınızı öğretir.
• WordPress'te Hareketli Arka Plan Nasıl Eklenir – Hareketli arka planlar eklemek, benzersiz ve görsel olarak ilginç bir kullanıcı deneyimi yaratabilir.

Umarım bu öğretici, WordPress'te kutu gölgesi eklemeyi öğrenmenize yardımcı olmuştur. Ayrıca kullanılmayan CSS'yi WordPress'te kaldırmayı ve WordPress CSS teslimatını optimize etmeyi de öğrenmek isteyebilirsiniz.

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.