Ana İçeriğe Geç

WordPress kenar çubuğunun yan nasıl değiştirilir

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 600.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Son zamanlarda, okuyucularımızdan biri WordPress temasının kenar çubuğunun tarafını nasıl değiştireceğimizi sordu?

Bu soruyu genellikle kenar çubuğunun konumunu soldan sağa veya sağdan sola değiştirmek isteyen kullanıcılardan alırız.

Bu derste, WordPress'te kenar çubuğunun konumunu nasıl değiştireceğinizi göstereceğiz.

Ama daha önce, eğer WordPress keşfi hiç kurmadıysanız Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için

O zaman neden burada olduğumuza dönelim.

WordPress'te kenar çubuğunun konumunu neden değiştirelim?

Kullanılabilirlik uzmanları, insanların sayfaları soldan sağa taradıklarını düşünüyor. Kullanıcıların önce bu içeriği görebilmesi için önemli içeriği sola koymanızı önerirler. Ancak, web siteniz RTL dilinde ise bu durum geri alınabilir (solda).

Eğer öğrenmek WordPress blogunuzda kenar çubukları varsa

WordPress'teki çoğu web sitesi, iki sütun içeren blogların tipik düzenini kullanır. Biri içerik için, diğeri kenar çubuğu için.

tipik içerik demosu WordPress kenar çubuğu

Web sitelerinde yeniyseniz, tercih ettiğiniz konumda kenar çubuğu olan bir WordPress teması seçmelisiniz.

Birçok WordPress teması, ikincisi ayarlarında kenar çubuğu tarafını değiştirmek için seçenekler sunar. Ancak, WordPress temanız bu seçeneğe sahip değilse, kenar çubuğunun kenarlarını manuel olarak değiştirmeniz gerekecektir. Keşfeterek daha ileri gidin WordPress'te kenar çubuğu nasıl kaldırılır

Bununla birlikte, CSS kullanarak WordPress'in kenar çubuğu tarafını kolayca değiştirmek için kullanmanız gereken yönteme bir göz atalım.

Kenar çubuğunu CSS ile değiştirme

WordPress temanızda herhangi bir değişiklik yapmadan önce, önce alt tema oluşturma. Bir alt tema kullanarak, ana temanızı yaptığınız değişiklikleri kaybetmeden güncelleyebilirsiniz.

keşfedin WordPress üzerine her öğe için farklı bir kenar çubuğu görüntülemek için nasıl

İkinci olarak, aktif temanızda gerçek zamanlı değişiklikler yaparken, her zaman WordPress web sitenizin bir yedeğini oluşturmalısınız.

WordPress tema dosyalarını düzenlemek için bir FTP istemcisine ihtiyacınız olacak. Göz atın FTP nasıl kullanılacağı hakkında rehberlik.

FTP istemcisini kullanarak WordPress web sitenize giriş yapın ve tema klasörüne gidin. Genellikle yer almaktadır:

 / Siteniz / wp-content / themes / your-tema-klasör / 

Şimdi WordPress temanızın ana stil sayfası dosyasını Not Defteri gibi bir metin düzenleyicide indirip açmanız gerekir. Bu dosya denir style.cssve WordPress temanızın kök dizininde bulunur.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

keşfedin WordPress dosya ve klasörlerini yönetme

Bu dosyada, kenar çubuğunuzun CSS sınıfını bulun. Genellikle bu sınıf " kenar çubuğu ". Bu örnekte, varsayılan WordPress temasını kullanıyoruz " yirmi onbeş Kenar çubuğu için bu sınıfa kim sahip:

.sidebar {float: left; marj-sağ:% -100; maksimum genişlik: 413px; pozisyon: göreceli; genişlik:% 29.4118; }

Gördüğünüz gibi kenar çubuğu% -100 marjı ile sola doğru yüzer. Şamandırayı sağa değiştireceğiz:

.sidebar {float: sağ; sol kenar boşluğu:% -100; maksimum genişlik: 413px; pozisyon: göreceli; genişlik:% 29.4118; }

Değişikliklerinizi kaydedin ve style.css dosyasını bir FTP istemcisi kullanarak web sitenize yükleyin. Şimdi, web sitenizi ziyaret ederseniz, şöyle görünecek:

demo sitesi kenar çubuğunu değiştirmek

Aslında, kenar çubuğunu taşıdık, ancak içerik alanını taşımadık. " yirmi Onbeş İçerik alanının konumunu tanımlamak için bu CSS'yi kullanır.

.site-content {display: block; şamandıra: sol; sol kenar boşluğu:% 29.4118; genişlik:% 70.5882; }

İçeriği sağa taşımak için değiştireceğiz. Aşağıdaki gibi:

.site-content {display: block; şamandıra: sol; sağ kenar boşluğu:% 29.4118; genişlik:% 70.5882; }

İşte bu CSS kodunu uyguladıktan sonra web sitenizin nasıl görüneceği.

yeni sunum kenar çubuğu web sitesini taşıdı

Gördüğünüz gibi içerik alanının ve kenar çubuğunun konumunu değiştirdik. Ancak, solda hala beyaz bir blok var.

Keşfeterek daha ileri gidin WordPress dosya ve klasörlerini yönetme

CSS ile çalışırken sık sık bu hatalarla karşılaşırsınız. Buna neyin neden olduğunu ve nasıl düzeltileceğini anlamak biraz dedektiflik gerektirecektir.

Kaynak kodunu görüntülemek için tarayıcınızdaki "Inspector" aracını kullanın. Farenizi tarayıcıda etkilenen bölgeye getirin, sağ tıklayın ve tarayıcı menüsünden "Inspector" ı seçin.

tarayıcı aleti kontrol

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Farenizi kaynak kodu görünümünde hareket ettirdiğinizde, etkilenen alanları gerçek zamanlı önizlemede vurgulanmış olarak görürsünüz. Sağ bölmede, bu seçilen öğe için kullanılan CSS'yi görebileceksiniz.

Bizim keşfedin 5 WordPress eklentileri, blogunuzda CSS’yi görsel olarak düzenlemek için

Bu nedenle, vurgulanan öğeye karşılık gelen CSS yeniden ayarlanmalıdır.

@ media screen ve (min-width: 59.6875em) {body: before {background-color: #fff; kutu gölgesi: 0 0 1px rgba (0, 0, 0, 0.15); içerik: ""; ekran: blok; yükseklik:% 100; min. yükseklik:% 100; pozisyon: sabit; üst: 0; solda: 0; genişlik:% 29.4118; z-endeksi: 0; / * Safari’de kaydırma ile yanıp sönen hatayı düzeltti * /}

Bu CSS kodu, sol üste boş bir% 29,4118 genişlik ve% 100 bir genişlik ekler. İşte onu sağa doğru nasıl hareket ettireceğimiz.

@ media screen ve (min-width: 59.6875em) {body: before {background-color: #fff; kutu gölgesi: 0 0 1px rgba (0, 0, 0, 0.15); içerik: ""; ekran: blok; yükseklik:% 100; min. yükseklik:% 100; pozisyon: sabit; üst: 0; sağ: 0; genişlik:% 29.4118; z-endeksi: 0; / * Safari’de kaydırma ile yanıp sönen hatayı düzeltti * /}

Sunucuya stil sayfasını kaydettikten ve indirdikten sonra, web sitenizin neye benzeyeceği budur.

Sağdaki yeni görünüm web kenar çubuğu

CSS ile çalışmak yeni başlayanlar için kafa karıştırıcı olabilir. Tüm manuel işleri yapmak istemiyorsanız, o zaman WordPress CSS Kahraman eklentisi. Kod yazmadan CSS'yi düzenlemenizi sağlar ve her WordPress temasıyla çalışır.

Ayrıca bazı premium WordPress eklentilerini keşfedin

Modern bir görünüm kazandırmak ve blogunuzun veya web sitenizin rahatlığını artırmak için diğer WordPress eklentilerini kullanabilirsiniz.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. Zxeion

Zxeion, web sitenizin güvenliğini artırmaktan sorumlu güçlü bir premium WordPress eklentisidir. Bu eklenti, web sitenizi olası saldırılara karşı korumaya yardımcı olacak bir dizi koruma ve güvenlik aracı içerir.

Gerçek zamanlı koruma sistemi, web sitenize yönelik tehditleri belirlemenize ve hiçbir şey yapmanıza gerek kalmadan onları engellemenize yardımcı olur.

Ayrıca bizim keşfetmek WordPress'te kenar çubuklarınızı artırmak için 7 eklenti

Özellikleri: gerçek zamanlı koruma, mükemmel müşteri desteği, düzenli güncellemeler, bir IP adresi engelleyici, mükemmel belgeler, modern ve profesyonel arayüz, özel müşteri desteği ve diğerleri

Indir | gösteri | Web hosting

2. Slaido

Slaido, neredeyse 320 duyarlı kaydırıcı şablonundan birini seçmenize ve bunlardan birini sadece birkaç tıklamayla web sitenize aktarmanıza izin veren premium bir WordPress eklentisidir. Tam bir şablon paketi, aşağıdakiler için mükemmel Slider Devrimi. Bu yüzden ilk önce bu WordPress eklentisini tam olarak kullanmak için kurmanız gerekecek

Başlıca özellikleri: sürgülerine duyarlı bir düzen, sürgüleri içeri veya dışarı aktarma kolaylığı, düzenli güncellemeler, 24 / 7 mevcut müşteri desteği, güzel ve havalı animasyonlar, hızlı başlangıç, Google Fonts desteği ve daha fazlası için video eğitimleri.

Indir | gösteri | Web hosting

3. Bize Ulaşın Formu

Bize Ulaşın Form, premium duyarlı bir WordPress eklentisi ve basit bir araçtır, ancak ziyaretçilerinizin mesajlarını bırakarak sizinle iletişim kurabileceği açık ve cesaret verici bir form görüntülemenize izin veren kişiselleştirme seçenekleri açısından zengindir.

Gerekli alanları tanımlayabilir, alanların en iyi düzenini seçebilir ve müşterilerinizi veya ziyaretçilerinizi önerilerini veya iletilerini bırakmaya teşvik etmek için tamamen özelleştirebilirsiniz.

Ayrıca sizi okumaya davet ediyoruz: Bir restoran web sitesi oluşturmak ve yönetmek için 10 WordPress eklentileri

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

İletileri almak istediğiniz e-posta adresini ayarlayın ve işletmenizi en karlı şekilde büyütmek için kullanın.

Indir | gösteri | Web hosting

Önerilen Kaynaklar

Web sitenizi oluştururken ve yönetirken size eşlik edecek diğer önerilen kaynakları keşfedin.

Sonuç

Orada! Bu eğitim için bu kadar. Umarız, WordPress blogunuzun kenar çubuğu tarafını değiştirmenize yardımcı olur. Tereddüt etmeyin Bu makaleyi arkadaşlarınızla en sevdiğiniz sosyal ağlarda paylaşın.

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Öneriniz veya yorumunuz varsa, bunları bölümümüzde bırakın. Yorumlar.

...

Bu makalede, 1 yorumunu içeren
  1. [...] Bu eğitimde, sen WordPress tema kenar çubuğunun yerini değiştirmek için öğreneceksiniz. [...]

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
1 hisseleri
hisse
cıvıltı
Enregistrer1