Vai al contenuto principale

Come cambiare il lato della barra laterale su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 901.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Recentemente uno dei nostri lettori ci ha chiesto come cambiare il lato della barra laterale di un tema WordPress?

Solitamente riceviamo questa domanda dagli utenti che vogliono cambiare la posizione della barra laterale da sinistra a destra o da destra a sinistra.

In questo tutorial, ti mostreremo come modificare la posizione della barra laterale su WordPress.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

Come modificare la posizione della barra laterale su wordpress e1568058176266

Perché cambiare la posizione della barra laterale su WordPress?

Gli esperti di usabilità ritengono che le persone scansionino le pagine da sinistra a destra. Consigliano di mettere i contenuti importanti a sinistra in modo che gli utenti vedano prima questo contenuto. Tuttavia, questo potrebbe essere invertito se il tuo sito web è in una lingua RTL (a destra a sinistra).

Scopri se se il tuo blog WordPress ha barre laterali

Molti siti Web WordPress utilizzano il tipico layout del blog con due colonne. Una per il contenuto e l'altra per la barra laterale.

contenuto tipico demo barra laterale di WordPress

Se non conosci i siti Web, devi selezionare un tema WordPress con una barra laterale nella posizione preferita.

Molti temi di WordPress offrono opzioni per modificare il lato della barra laterale nelle impostazioni di quest'ultimo. Tuttavia, se il tuo tema WordPress non ha questa opzione, dovrai cambiare manualmente il lato della barra laterale. Vai oltre scoprendo come rimuovere la barra laterale su WordPress

Detto questo, diamo un'occhiata al metodo che devi usare per cambiare facilmente il lato della barra laterale di WordPress usando CSS.

Modifica della barra laterale con CSS

Prima di apportare modifiche al tuo tema WordPress, dovresti prima considerare il creando un tema figlio. Utilizzando un tema figlio, sarai in grado di aggiornare il tema principale senza perdere le modifiche.

Scopri Come visualizzare una barra laterale diverso per ogni voce su WordPress

In secondo luogo, dovresti sempre creare un backup del tuo sito Web WordPress quando apporti modifiche in tempo reale al tema attivo.

Avrai bisogno di un client FTP per modificare i file del tema WordPress. Consulta il guida su come utilizzare FTP.

Accedi al tuo sito Web WordPress utilizzando il client FTP e vai alla cartella dei temi. Di solito si trova in:

 / Yoursite / wp-content / themes / vostro-theme-cartella / 

Ora devi scaricare e aprire il file del foglio di stile principale del tuo tema WordPress in un editor di testo come Blocco note. Questo file è chiamato style.cssed è nella directory principale del tema WordPress.

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

Scopri come gestire i file e le cartelle di WordPress

In questo file, trova la classe CSS della barra laterale. Generalmente questa classe è " sidebar ". In questo esempio, utilizziamo il tema WordPress predefinito " venti quindici Chi ha questa classe per la barra laterale:

.sidebar {float: left; margine-destra: -100%; larghezza massima: 413px; posizione: relativa; larghezza: 29.4118%; }

Come puoi vedere la barra laterale galleggia a sinistra con un margine di -100%. Cambieremo il galleggiante a destra:

.sidebar {float: right; margine-sinistra: -100%; larghezza massima: 413px; posizione: relativa; larghezza: 29.4118%; }

Salvare le modifiche e caricare il file style.css sul sito Web utilizzando un client FTP. Ora, se visiti il ​​tuo sito web, sarà simile al seguente:

sito demo cambiare la barra laterale

In effetti, abbiamo spostato la barra laterale, ma non abbiamo spostato l'area del contenuto. " Venti Quindici Utilizza questo CSS per definire la posizione dell'area contenuto.

.site-content {display: block; galleggiante: a sinistra; margine sinistro: 29.4118%; larghezza: 70.5882%; }

Lo cambieremo per spostare il contenuto a destra. Come segue:

.site-content {display: block; galleggiante: a sinistra; margine destro: 29.4118%; larghezza: 70.5882%; }

Ecco come apparirà il tuo sito web dopo aver applicato questo codice CSS.

nuova presentazione spostata sul sito web della barra laterale

Come puoi vedere, abbiamo modificato la posizione dell'area contenuto e della barra laterale. Tuttavia, c'è ancora un blocco bianco sulla sinistra.

Vai oltre scoprendo come gestire i file e le cartelle di WordPress

Incontrerai spesso questi errori quando lavori con CSS. Ci vorrà un po 'di lavoro investigativo per capire cosa sta causando questo e come risolverlo.

Usa lo strumento "Inspector" del tuo browser per visualizzare il codice sorgente. Punta il mouse sulla regione interessata nel browser, fai clic con il tasto destro e seleziona "Inspector" dal menu del browser.

ispezionare degli strumenti del browser

Mentre muovi il mouse nella vista del codice sorgente, noterai che le aree che influiscono sono evidenziate nell'anteprima dal vivo. Nel riquadro di destra, sarai in grado di vedere il CSS utilizzato per quell'elemento selezionato.

Scopri la nostra Plugin 5 WordPress per modificare visivamente i CSS sul tuo blog

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

Pertanto, il CSS corrispondente all'elemento evidenziato deve essere riadattato.

@media screen e (min-width: 59.6875em) {body: before {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); contento: ""; display: blocco; altezza: 100%; altezza minima: 100%; posizione: fissa; in alto: 0; a sinistra: 0; larghezza: 29.4118%; indice z: 0; / * Correzione del bug lampeggiante con scorrimento su Safari * /}

Questo codice CSS aggiunge un blocco vuoto di 29,4118% di larghezza e una larghezza di 100% in alto a sinistra. Ecco come lo sposteremo a destra.

@media screen e (min-width: 59.6875em) {body: before {background-color: #fff; box-shadow: 0 0 1px rgba (0, 0, 0, 0.15); contento: ""; display: blocco; altezza: 100%; altezza minima: 100%; posizione: fissa; in alto: 0; a destra: 0; larghezza: 29.4118%; indice z: 0; / * Correzione del bug lampeggiante con scorrimento su Safari * /}

Dopo aver salvato e caricato il foglio di stile sul server, ecco come apparirà il tuo sito web.

nuovo sito web sguardo barra laterale a destra

Lavorare con i CSS può essere fonte di confusione per i principianti. Se non si desidera eseguire tutto il lavoro manuale, è possibile provare Plugin per WordPress CSS Hero. Ti consente di modificare CSS senza scrivere codice e funziona con tutti i temi WordPress.

Scopri anche alcuni plugin WordPress premium  

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa del tuo blog o sito Web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Zxeion

Zxeion è un potente plugin premium per WordPress responsabile del miglioramento della sicurezza del tuo sito web. Questo plugin contiene una raccolta di strumenti di protezione e sicurezza che proteggeranno il tuo sito web da possibili attacchi.I plugin wordpress di Zxeion proteggono il sito dagli attacchi di virus malware

Il suo sistema di protezione in tempo reale ti aiuterà a identificare le minacce al tuo sito Web e a bloccarle, senza che tu debba fare nulla.

Scopri anche il nostro 7 plugin per potenziare le barre laterali su WordPress

Le sue caratteristiche sono: protezione in tempo reale, eccellente assistenza clienti, aggiornamenti regolari, blocco degli indirizzi IP, documentazione eccellente, interfaccia moderna e professionale, assistenza clienti dedicata e altro

Download | Demo | Web hosting

2. Slaido 

Slaido è un plug-in WordPress premium che ti consente di scegliere tra quasi 320 modelli di slider reattivi e importarne uno nel tuo sito Web in pochi clic. È un pacchetto completo di modelli, perfetto per Slider Revolution. Quindi dovrai prima installare quest'ultimo per utilizzare appieno questo plugin per WordPressPacchetto template Slaido per wordpress slider revolution

Le sue caratteristiche principali sono: un layout reattivo dei suoi cursori, la facilità di importare o esportare i cursori, aggiornamenti regolari, assistenza clienti disponibile 24 ore su 7, XNUMX giorni su XNUMX, animazioni fluide e molto interessanti, la disponibilità di tutorial video per un avvio rapido, supporto per Google Fonts e molti altri.

Download | Demo | Web hosting

3. Modulo di contatto

Contact Us Form è un plug-in WordPress reattivo premium e uno strumento semplice ma ricco di opzioni di personalizzazione che ti consente di visualizzare un modulo chiaro e incoraggiante, sul quale i tuoi visitatori possono contattarti lasciando il loro messaggio.

Contattaci modulo modulo di contatto wordpress plugin

Sarai in grado di definire i campi necessari, scegliere il layout migliore dei campi e personalizzarlo completamente per incoraggiare i tuoi clienti o visitatori a lasciare i loro suggerimenti o messaggi.

Ti invitiamo anche a leggere: Plugin 10 WordPress per creare e gestire un sito web di ristoranti

Basta impostare l'indirizzo e-mail in cui si desidera ricevere i messaggi e utilizzarlo per far crescere la propria attività nella direzione più redditizia.

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

Download | Demo | Web hosting

Risorse raccomandate

Scopri altre risorse consigliate per aiutarti a costruire e gestire il tuo sito web.

Conclusione

Ecco! Questo è tutto per questo tutorial. Speriamo che ti aiuti a cambiare il lato della barra laterale del tuo blog WordPress. Non esitate a condividi questo articolo con i tuoi amici sui tuoi social network preferiti

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Se hai suggerimenti o commenti, lasciali nella nostra sezione commentaires.

...  

Questo articolo contiene 1 commento

  1. […] In questo tutorial imparerai come cambiare la posizione della barra laterale del tuo tema WordPress. [...]

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
1 azioni
quota
Tweet
Enregistrer1