Ana İçeriğe Geç

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

Divi: Kullanılacak en kolay WordPress teması

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]

Son zamanlarda okuyucularımızdan biri bize bir WordPress temasının kenar çubuğu 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 e1568058176266'da kenar çubuğunun konumu nasıl değiştirilir

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

Kullanılabilirlik uzmanları, insanların sayfaları soldan sağa taradığına inanıyor. Kullanıcıların önce bu içeriği görmesi için önemli içeriği sola koymanızı önerirler. Ancak, web siteniz bir RTL dilindeyse bu tersine çevrilebilir (solda).

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

Birçok WordPress web sitesi, iki sütunlu tipik blog 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ğu tarafını manuel olarak değiştirmeniz gerekecektir. Keşfederek 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, öncelikle 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. Danışı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 / 

Artık WordPress temanızın ana stil sayfası dosyasını Not Defteri gibi bir metin düzenleyicide indirip açmanız gerekiyor. Bu dosyanın adı 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 koduna bakmak için tarayıcınızın "İnceleme" aracını kullanın. Farenizi tarayıcıda etkilenen bölgenin üzerine getirin, sağ tıklayın ve tarayıcı menüsünden "Denetleyici" yi seçin.

tarayıcı aleti kontrol

Farenizi kaynak kod görünümünün etrafında hareket ettirdiğinizde, canlı önizlemede vurgulanmış olarak etkilediği alanları fark edeceksiniz. Sağ bölmede, 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.

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

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

@ 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 * /}

Stil sayfasını kaydettikten ve sunucuya yükledikten sonra, web siteniz böyle görünecektir.

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ılardan koruyacak bir dizi koruma ve güvenlik araçları içerir.Zxeion wordpress eklentileri, siteyi kötü amaçlı yazılım virüs saldırılarına karşı korur

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 şunlardır: gerçek zamanlı koruma, mükemmel müşteri desteği, düzenli güncellemeler, 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, yaklaşık 320 duyarlı kaydırıcı şablon arasından seçim yapmanıza ve bunlardan birini birkaç tıklamayla web sitenize aktarmanıza olanak tanıyan premium bir WordPress eklentisidir. Eksiksiz bir şablon paketidir. Slider Devrimi. Dolayısıyla, bu WordPress eklentisini tam olarak kullanmak için önce ikincisini yüklemeniz gerekecekKaydırıcı devrimi wordpress için Slaido şablon paketi

Başlıca özellikleri şunlardır: kaydırıcılarının duyarlı bir düzeni, kaydırıcıları içe veya dışa aktarmanın kolaylığı, düzenli güncellemeler, 24/7 mevcut müşteri desteği, akıcı ve çok havalı animasyonlar, hızlı bir başlangıç ​​için video eğitimleri, Google Yazı Tipleri desteği ve çok daha fazlası.

Indir | gösteri | Web hosting

3. Bize Ulaşın Formu

Bize Ulaşın Formu, birinci sınıf bir duyarlı WordPress eklentisi ve basit bir araçtır, ancak ziyaretçilerinizin mesajlarını bırakarak sizinle iletişime geçebilecekleri açık ve cesaret verici bir form görüntülemenize olanak tanıyan zengin kişiselleştirme seçenekleri sunar.

İletişim formu wordpress iletişim formu eklentisi

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

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

Ç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]

Indir | gösteri | Web hosting

Önerilen Kaynaklar

Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.

Sonuç

Orada! Bu eğitim için bu kadar. WordPress blogunuzun kenar çubuğu tarafını değiştirmenize yardımcı olacağını umuyoruz. çekinmeyin 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ğiticide, WordPress temanızın kenar çubuğunun konumunu nasıl değiştireceğinizi öğreneceksiniz. […]

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. 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