Devi essere in grado di ridimensionare il modello se vuoi creare un buon sito. Per impostazione predefinita, molti temi offrono dimensioni dei frame dei modelli scomode. Argomenti ristretti sono altrettanto dannosi quanto essere troppo ampi. Devi avere una “media d’oro” che sia perfetta per le funzioni del sito. Solo in questo modo il contenuto della tua risorsa verrà visualizzato correttamente e tutti i widget si adatteranno alla barra laterale. In questo articolo imparerai quali sono i modi per regolare la dimensione delle colonne laterali.
Senza una barra laterale, il sito sembra inutile. Se vuoi diluire visivamente in qualche modo il contenuto della pagina, dovresti modificare il modello WordPress aggiungendo una barra laterale di una certa dimensione. Di solito le colonne laterali sono già installate per impostazione predefinita. Ma non sempre la larghezza della barra laterale è ottimale per un particolare progetto. Diamo un'occhiata ai metodi su come modificare la larghezza e l'altezza del lato del sito WordPress.
Potrebbe non essere necessario modificare nulla. Cambia la barra laterale solo se sembra “storta” e innaturale. Innanzitutto, assicurati che la barra laterale abbia una larghezza inferiore rispetto al corpo della pagina che contiene il contenuto. La barra laterale non è una parte fondamentale del sito, quindi non bisogna prestarle molta attenzione: al massimo può occupare il 40% della parte visibile della pagina. Tieni presente che se hai due barre laterali (o più), la loro larghezza non deve superare il 50% della larghezza dell'intera pagina. È meglio utilizzare solo una colonna laterale: in questo modo è più efficiente.
Esiste una "regola d'oro" dei designer per i siti che utilizzano solo una barra laterale. Questa regola afferma che se in una pagina è presente una sola barra laterale, questa non dovrebbe occupare più del 38% della larghezza del sito. Molti eminenti web designer parlano di una figura così misteriosa (ad esempio: Jarel Remik).
Per quanto riguarda l'altezza, è importante che la barra laterale non sporga dalla parte superiore del sito. La sua altezza nel limite superiore dovrebbe essere simile alla parte principale della pagina. Ma il limite inferiore può essere modificato in modo che la parte base del sito sia più lunga. Non c'è bisogno di provare a stipare tutto ciò che è presente sul sito nella barra laterale: solo la cosa principale. E se ci sono davvero molte informazioni, crea due barre laterali, ma non è necessario allungare la barra laterale fino al piè di pagina del sito.
Ora parliamo di come modificare in modo indipendente la dimensione delle colonne laterali e della cornice del modello stesso senza utilizzare alcun componente aggiuntivo. Questo metodo prevede la modifica del codice sorgente della pagina. È nei tag html che è racchiuso il parametro della dimensione del modello. Tieni presente che il ridimensionamento potrebbe avere conseguenze negative se carichi un'immagine di dimensioni personalizzate come sfondo. Pertanto, è meglio modificare i parametri del frame in fase di layout del sito.
I parametri della barra laterale nel codice sono sotto forma di blocco. Per modificare la dimensione dell'intera cornice, comprese le colonne laterali, dovrai entrare nel codice e regolare alternativamente i parametri numerici di larghezza e altezza di ciascun elemento. Vale a dire:
Per scoprire le dimensioni di un particolare blocco, è necessario fare clic sull'elemento wrapper nella "Visualizzazione codice pagina". Sul lato della sezione CSS del browser vedrai i valori numerici per la larghezza dell'elemento in pixel. Per modificare la dimensione dell'intero wireframe, è necessario modificare l'elemento principale e quindi apportare modifiche anche agli altri elementi. Si consiglia di farlo su un server locale in modo che il tuo sito non “salti” davanti agli utenti. E, in generale, è meglio farlo anche prima del lancio di un progetto Internet.
Per modificare la dimensione della barra laterale, trova qualcosa come questa riga
Questa riga è responsabile dei parametri della parte centrale della pagina, ovvero del blocco di contenuto e delle colonne laterali. Non toccare la riga "principale": questa è la parte principale del sito. Devi trovare il tag "mainnav": questa è la barra laterale. Tutto ciò che serve è modificare l'elemento larghezza nel CSS, che è responsabile della larghezza, per inserire un valore di dimensione diverso. Puoi rendere la barra laterale più piccola o più grande, ma ricorda di seguire i suggerimenti sul dimensionamento riportati sopra per garantire che il tuo sito venga visualizzato correttamente.
Affinché le modifiche possano essere salvate, devono essere apportate sul server. Cioè, puoi inizialmente testare le modifiche sull'hosting locale, ma poi assicurarti di copiare il file style.css modificato e aggiungerlo ai database del server principale. Solo allora i cambiamenti avranno effetto.
plugin di ridimensionamento della barra laterale
Se non vuoi sfogliare i fogli di stile a cascata e cercare elementi che devono essere modificati, puoi utilizzare il plug-in Visual Sidebar Editor per WordPress. Questo è un modulo speciale progettato specificamente per generare barre laterali. Fa parte dello strumento più ampio Visual Composer.
Il plugin Visual Composer è un generatore di pagine naturale per WordPress. Con esso, puoi creare un modello già pronto da zero. Il modulo funziona con codici brevi ed è molto facile da installare. Se ridimensionare la barra laterale non è l'unica cosa che devi fare, scarica il plug-in Visual Composer e aggiungi Visual Sidebar Editor come componente aggiuntivo. Se il problema riguarda solo le dimensioni della barra laterale della pagina, sarà sufficiente il modulo Visual Sidebar Editor.
Il vantaggio di utilizzare un plugin per modificare la barra laterale è che fa tutto automaticamente. Cioè, mostri cosa vuoi modificare utilizzando il sistema Drag & Drop e il modulo corregge autonomamente il codice dell'elemento in base alle tue richieste. Se vuoi provare a modificare i tag html, il plugin ti offrirà questa opportunità. Inoltre, dispone di codici brevi speciali per aggiungere funzioni aggiuntive al sito: più di 40 estensioni.
Un altro vantaggio dell'utilizzo di un plug-in di questo tipo per la modifica delle pagine è che le modifiche vengono salvate, indipendentemente dalla versione del motore. Anche se aggiorni WordPress, il modello non cambierà: è controllato da un modulo. Pertanto puoi passare a versioni precedenti o aggiornare WordPress: ciò non danneggerà più la dimensione della barra laterale. Inoltre, il plug-in funziona con comode operazioni di importazione ed esportazione, ovvero puoi copiare le barre laterali da un sito e trasferirle su un altro. E, soprattutto, il modulo funziona secondo un principio estremamente chiaro: anche un principiante lo padroneggerà rapidamente.
Se ti piace il lavoro di Visual Sidebar Editor, considera l'installazione del set completo di componenti aggiuntivi: il modulo Visual Composer. Quindi sarà facile per te modificare qualsiasi elemento sulle pagine del portale.
Vuoi creare una pagina WordPress a grandezza naturale?
Poi torniamo al motivo per cui siamo qui.
Metodo 1: utilizzo del modello di larghezza integrato in un tema WordPress
Questo metodo è consigliato se il tuo tema WordPress è già dotato di un modello di pagina intera. Se non ce l'hai, fai riferimento alla scelta successiva e prendilo.
Per prima cosa devi modificare la pagina o crearne una nuova visitando " Pagine > Aggiungi Nuova pagina
Nella finestra di modifica della pagina, seleziona Intera larghezza come modello nella casella di controllo degli attributi della pagina.
Dopo aver scelto un modello Intera larghezza Devi registrare la tua pagina. Puoi continuare a personalizzare la pagina per aggiungere più contenuti o fare clic sul pulsante di anteprima per vederla in azione.
Se non hai l'opzione "Larghezza intera" - "modello a larghezza intera" - nella schermata di modifica della tua pagina, significa che il tuo tema WordPress non ha quella pagina.
Ma non preoccuparti, ti mostreremo quanto è facile creare una pagina intera senza modificare il tema WordPress.
Metodo 2: come creare un modello di pagina a larghezza intera
Questo metodo richiede la modifica dei file del tema WordPress che stai utilizzando e una conoscenza di base di PHP, CSS e HTML.
A proposito, ti invitiamo anche a consultare
Per prima cosa devi aprire un editor di testo come Blocco note e incollare il seguente codice in un file vuoto:
Questo codice determina semplicemente il nome del modello di file e chiede a WordPress di estrarre il modello di intestazione.
Quindi hai bisogno della parte contenuto del codice. Connettiti al tuo sito utilizzando un client FTP ( o file manager nel cPanel) quindi vai a /wp-content/themes/directory-del-tuo-tema/ .
Quindi dovresti trovare un file chiamato " pagina.php". Questo è il file del modello di pagina predefinito per il tuo tema.
Copia tutto dopo " get_header() E incollalo in un file Larghezza intera.php Questo è ciò che hai creato sul tuo computer.
Ora devi guardare il contenuto del file "full-width.php" e rimuovere questa riga di codice:
Questa riga ripristina semplicemente la barra laterale e la visualizza nel tema WordPress. Rimuovendolo, il tuo tema non visualizzerà la barra laterale quando utilizzi il modello Intera larghezza.
Puoi vedere questa riga apparire più volte nel tuo tema WordPress. Se il tuo tema WordPress ne ha più, vedrai ciascuna barra laterale referenziata una volta nel codice. Devi decidere quali barre laterali vuoi mantenere.
Il tuo sito web si carica lentamente, scoprilo
Se il tuo tema non mostra barre laterali sulla tua pagina, potresti non trovare questo codice nel tuo file.
Questo è il modo in cui il nostro codice full-width.php si occupa di apportare modifiche. Il tuo codice potrebbe essere leggermente diverso a seconda del tema.
Quindi è necessario scaricare il file Larghezza intera.php Nella cartella dei temi WordPress con .
Hai creato e caricato con successo un modello di pagina a larghezza intera personalizzato per il tuo tema. Il passaggio successivo consiste nell'utilizzare questo modello per creare una pagina a dimensione intera.
Vai alla dashboard e modifica o crea una nuova pagina.
Nella schermata di modifica della pagina, individua la casella di controllo degli attributi della pagina e fai clic sul menu a discesa sotto l'opzione Modello.
Potrai vedere il tuo modello. Vai avanti, selezionalo e salva o aggiorna la pagina.
Ora puoi visitare il tuo sito web e vedrai che le barre laterali sono scomparse e la tua pagina viene visualizzata come una pagina a colonna singola. Potrebbe non essere stato ancora riempito, ma ora sei pronto per distribuirlo in modo diverso.
Rendi popolare il tuo sito scoprendolo
Dovrai utilizzare lo strumento Ispeziona per scoprire le classi CSS utilizzate dal tuo tema per definire l'area del contenuto.
È quindi possibile regolarne la larghezza al 100% utilizzando i CSS. Abbiamo utilizzato il seguente codice CSS:
.page-template a larghezza intera zone.content(larghezza: 100%; Margine: 0px; bordo: 0px; imbottitura: 0px; ) .page-template a larghezza intera.Output(margine: 0px; )
Ecco come sarà Twenty Seventeen.
Per questo tutorial è tutto, spero che ti permetta di creare pagine a grandezza naturale.
I metodi di cui sopra sono gratuiti per coloro che se lo possono permettere e desiderano creare rapidamente layout a larghezza intera o intera.
Scopri anche alcuni plugin WordPress premium
Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e semplificare la gestione del tuo blog o sito web.
Ti offriamo diversi plugin WordPress premium per aiutarti a fare proprio questo.
1. Divi Costruttore
Divi Builder è un generatore di pagine di alta qualità molto apprezzato Temi eleganti Sebbene sia comunemente utilizzato come parte del tema Divi WordPress, Divi Builder è anche un plug-in autonomo che può essere utilizzato in altri temi WordPress.
Divi Builder ti consente di modificare i tuoi contenuti utilizzando un'interfaccia visiva sul lato interfaccia e un'interfaccia lato server, sebbene la maggior parte degli utenti preferisca la prima interfaccia.
Fondamentalmente, invece che nelle barre laterali, tutto è in popup e pulsanti mobili. Ti dà accesso a 316 modelli predefiniti distribuiti in 40 diversi pacchetti di presentazione e ti consente anche di salvare i tuoi progetti come modelli.
Vi invitiamo ad aprire
Uno dei tratti distintivi di Divi è sempre stato il controllo sugli stili che ti offre. In tre diverse schede puoi regolare varie opzioni tra cui controlli reattivi, spaziatura personalizzata e altro.
Puoi anche aggiungere CSS personalizzati perché il suo editor CSS combina convalida di base e completamento automatico.Una delle critiche rivolte a Divi Builder è sempre stata il fatto che si basa su . Ciò significa che se lo disattivi una volta, sul tuo contenuto rimarranno un mucchio di codici brevi. Sebbene sia un po’ deprimente, ora ci sono meno problemi con plugin come Shortcode Cleaner.
2. Costruttore
Non c'è da stupirsi che Themify Builder sia l'offerta del team Themify. Lo integra in molti dei suoi temi WordPress per offrire ai clienti facili opzioni di personalizzazione. Ma puoi anche acquistarlo come plug-in autonomo e utilizzarlo con qualsiasi tema WordPress.
Come Divi Builder e WPBakery Page Builder, Themify Builder ti consente di creare layout nel frontend o nel backend.Un'altra cosa positiva è che questo plugin ti consente di personalizzare i tuoi breakpoint reattivi (ma solo a livello di sito).
Scopri crea un negozio online e vendi facilmente i tuoi prodotti online
Una caratteristica interessante di Themify Builder è che ti consente comunque di utilizzare l'editor standard di WordPress mentre altri page builder ti costringono a utilizzare l'interfaccia di Page Builder per tutto.
3. Fachiro
Lanciato inizialmente nel 2016, il plugin WordPress Elementor è uno degli sviluppatori più giovani in questo elenco. Nonostante il suo lancio tardivo, Elementor ha rapidamente accumulato più di 1.000.000 di installazioni attive su WordPress.org, rendendolo uno dei builder WordPress più popolari.
Se avete suggerimenti o commenti, lasciateli nella nostra sezione
Alcuni template WordPress sono piuttosto stretti nel menu laterale, la cosiddetta barra laterale, o viceversa nella sezione articoli, e naturalmente alcuni webmaster devono ampliare determinati limiti, ad esempio per adattarvi i banner. In questo articolo ti mostrerò come modificare la dimensione dell'intestazione, del modello, della sezione articoli o del menu laterale.
Per quello potrebbe essere necessario modificare la dimensione del modello.
Potresti voler modificare la dimensione del modello sia all'inizio, non appena lo hai installato, sia dopo aver scritto una serie di articoli e aver iniziato ad apparire le prime dozzine di visitatori. Ad esempio, avevo bisogno di espandere il modello perché volevo provare a guadagnare i primi due centesimi con la pubblicità dal mio blog. A tal fine è stato scelto un sistema di banner pubblicitari di Google-AdSense. Ma per poter guadagnare almeno due sfortunati centesimi bisogna tenere conto di due parametri:
- Affinché qualcuno possa fare clic su un annuncio pubblicitario, i banner emessi dal sistema devono trovarsi in determinati punti. Su Internet scrivono che questo è un cursore sinistro, lì inseriamo un banner quadrato e tre volte all'interno dell'articolo. In alto, al centro, dopo qualche direzione e alla fine. Questa disposizione sarà ideale per consentire alle persone di fare clic sul banner. Naturalmente, ci sono altre opzioni, ad esempio, nelle immagini, ma non le consideriamo nell'ambito di questo articolo.
- Google pubblica banner di determinate dimensioni.
quelli. dobbiamo combinare il primo e il secondo punto, vale a dire assicurarci che i banner di Google o Yandex siano posizionati nei luoghi a ciò assegnati, nella barra laterale sinistra e negli articoli. Dato che il mio template era troppo stretto per questi scopi, e non ha senso appendere piccoli banner, perché nessuno ci cliccherà sopra, l'unica cosa rimasta è allungare il menu laterale e la sezione degli articoli.
Come aumentare il modello orizzontalmente parte 1, capire i numeri
Per capire quanto dobbiamo aumentare la larghezza di questo o quell'elemento, non dobbiamo stimare a colpo d'occhio “lì basta un centimetro e lì mezzo centimetro”, ma scoprire esattamente questi numeri, in pixel. Quasi tutti i browser ci aiuteranno in questo, ad esempio:
- safari
- Firefox
- Google Chrome
Personalmente, mostrerò l'esempio di Safari e tu su qualsiasi browser conveniente per te. Le differenze dovrebbero essere solo in un pulsante.
Quindi, la base: la dimensione del nostro sito è composta da 4 elementi, la dimensione del modello stesso, la dimensione della pagina, la dimensione del blocco articolo e il blocco del menu di sinistra. Aumenteremo tutto a turno, non preoccuparti, non fa paura.
Per modificare la larghezza del menu di sinistra.
In questo caso, puoi modificare sia i pixel, come abbiamo fatto nel passaggio 3-5, sia la percentuale sulla pagina. Per fare ciò è sufficiente modificare il parametro anziché i pixel
Questi valori indicano quanta percentuale della larghezza può essere occupata da questo o quell'elemento. La cosa principale è che la somma della barra laterale e dell'articolo dovrebbe essere il 100% e non di più, altrimenti tutto fluttuerà sulla pagina.
È tutto. Ora sappiamo quali valori dobbiamo cambiare affinché tutto si adatti. L'unica cosa che resta da fare è inserire i dati necessari nel file di stile.
Come aumentare il modello orizzontalmente parte 2, modificare la larghezza
Dopo aver capito i numeri e averli scritti da qualche parte su un pezzo di carta, ora cambiamoli per tutti, e non solo per noi stessi. Per questo:
- Accedi tramite FTP al sito
- Trova e copia il file /wp-content/themes/Your theme/style.css sul tuo computer
- Crea una copia di backup di questo file, ad es. copialo nella cartella dei documenti. In modo che ci siano due copie del file sul computer, una su cui lavoreremo, la seconda che non toccheremo. Il secondo serve nel caso in cui cambiamo qualcosa di sbagliato e dimentichiamo cosa.
- Apri il file in un comodo editor. Ora ci troviamo di fronte al compito piuttosto semplice di cambiare i vecchi valori con quelli nuovi. Ci sono due modi, il primo è facile e il secondo è pesante. Per prima cosa, effettuando la ricerca, troviamo il vecchio valore e ne scriviamo uno nuovo. Il secondo modo è cercare il nome degli stili, all'interno degli stili cerchiamo la larghezza e modifichiamo il valore.
Personalmente ho scelto per me il primo, semplice modo, perché ti permette di apportare modifiche in appena un paio di secondi. Quindi stiamo cercando il valore 980. La ricerca del file ha fornito solo due parametri, che devo modificare.
Il primo è responsabile della larghezza dell'intero sito:
| 1
2
3
4
5
6
7
8
| #page ( altezza minima: 100px; chiaro: entrambi; larghezza: 96%; riempimento: 0 ; riempimento- superiore: 24px; larghezza massima: 980px; overflow: nascosto; |
#pagina (altezza minima: 100px; chiaro: entrambi; larghezza: 96%; riempimento: 0; riempimento-top: 24px; larghezza massima: 980px; overflow: nascosto;
Il secondo riguarda la larghezza dei due elementi, l'elenco degli articoli e il menu di sinistra:
| 1
2
3
4
5
6
7
8
9
10
11
| . contenitore principale ( larghezza: 980px; margine: 0 automatico; overflow: nascosto; riempimento: 0 ; sfondo: #fff; posizione: relativa; - webkit- box- ombra: 0px 0px 10px rgba(50 , 50 , 50 , 0.17 ) ;-moz- box-shadow: 0px 0px 10px rgba(50 , 50 , 50 , 0.17 ) ; box-shadow: 0px 0px 10px rgba(50 , 50 , 50 , 0.17 ) ; ) |
Contenitore principale (larghezza: 980px; margine: 0 automatico; overflow: nascosto; imbottitura: 0; sfondo: #fff; posizione: relativa; -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17) ; -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17); box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17); )
Tutto quello che dobbiamo fare è modificare i valori da 980 a 1080 e ricaricare.
Questo è tutto, ma se hai domande scrivi nei commenti, oppure sarò felice di aiutarti.
Dall'autore: Ciao amici. In un altro articolo sul tema WordPress esamineremo la questione su come modificare il template WordPress. Se non hai mai avuto la necessità di modificare un modello WordPress prima, assicurati di leggere questo articolo, perché prima o poi molto probabilmente dovrai affrontare i problemi di personalizzazione e modifica di un modello WordPress.
Per cominciare, definiamo le domande più comuni che gli utenti devono affrontare quando personalizzano un modello WordPress per se stessi. Ecco un elenco di esempio di essi:
come modificare il modello WordPress
modificare la larghezza del modello in wordpress
come ridimensionare un modello wordpress
come cambiare il colore di un modello WordPress
come cambiare il carattere nel modello WordPress
E questo è solo un piccolo elenco di problemi che potresti incontrare o che puoi aiutare altri a risolvere, anche a pagamento se stai sviluppando siti web su ordinazione.
Tutte le domande nell'elenco sopra possono essere risolte in due modi, a seconda del tema utilizzato per il sito. Cominciamo con l'opzione più semplice, che non richiede conoscenze di layout. Questa opzione è adatta se il modello supporta la modifica dalle impostazioni.
Andiamo alla sezione Aspetto - Personalizza e vediamo la pagina principale del sito e le impostazioni del sito disponibili sul lato sinistro della pagina. Tra questi potrebbero esserci impostazioni di progettazione.
Ad esempio, proviamo a cambiare la combinazione di colori del sito. Andiamo nel menu Colori e cambiamo lo sfondo delle parti laterali e centrali del sito.
Come puoi vedere, questo è abbastanza comodo e cambiare il colore di un modello WordPress è abbastanza semplice: vediamo immediatamente il risultato e possiamo valutarlo.
Tuttavia, non tutti i temi offrono tutte le personalizzazioni dei template WordPress di cui abbiamo bisogno. Ad esempio, è improbabile che ci siano impostazioni che ti permettano di cambiare la larghezza del modello su WordPress, ad esempio, anche nel tema attuale non ci sono impostazioni che ti permettono di cambiare il carattere nel modello e così via. Come comportarsi in questo caso? È qui che dovremo ricorrere alla seconda opzione, e qui sono già necessarie alcune competenze di layout.
Quindi, molto spesso dobbiamo modificare solo un file: questo è il file di stile style.css. Si trova nella cartella del tema. Cambiamo il colore del carattere come esempio. A proposito, puoi farlo direttamente dal pannello di amministrazione di WordPress. Basta fare attenzione e attenzione a non "rompere" accidentalmente il sito. È meglio eseguire il backup del tema prima di apportare modifiche. Quindi, vai al menu Aspetto - Editor e per impostazione predefinita dovresti avere il file di stile del tema aperto per la modifica.
In caso contrario, seleziona questo file dall'elenco a destra, si chiama Stylesheet (style.css). Molto spesso, il colore del carattere è impostato nel corpo, quindi troviamo gli stili di questo elemento e impostiamo il colore rosso come colore del carattere.
Dopo aver salvato il file, possiamo aggiornare il sito e vedere il colore rosso per il carattere principale del sito.
Come puoi vedere, personalizzare un modello WordPress per te è un compito abbastanza semplice. Con un po' di conoscenza dei CSS, sarai in grado di modificare il modello WordPress e personalizzarlo secondo necessità. Con lo stesso schema, possiamo risolvere altri problemi simili. Su questo ti saluto. Buona fortuna e a presto!
Spesso, quando si sceglie un modello WordPress, sorge un problema: questa è la larghezza insufficiente dei blocchi. Molti hanno immediatamente il desiderio di cambiare la larghezza del modello. Per coloro che sono esperti di html o php, questo non creerà particolari problemi. Ma per scrivere in dettaglio su come apportare modifiche alle dimensioni di un modello WordPress per una persona impreparata, è necessaria un'intera brochure.
La cosa più semplice è ordinare, ma chi prova a farlo da solo acquisisce conoscenza. In futuro, non dovrà rivolgersi a specialisti per ogni piccola cosa. Conoscere la "base" per farlo è del tutto possibile. Prima di iniziare qualsiasi modifica, assicurati di fare una copia di backup di tutte le pagine della tua risorsa. In caso di interventi imprecisi è possibile ripristinare facilmente l'aspetto originario del sito.
Esistono un numero incredibile di modelli WordPress, sono tutti diversi e ognuno cambia a modo suo. Ma blocchi di base come: la larghezza della pagina principale, l'intestazione, le colonne sinistra e destra, il piè di pagina hanno tutto. Per lavoro abbiamo bisogno di:
-
Browser web Mozilla Firefox.
-
Plugin Firebug installato su Firefox.
Quando tutto ciò di cui hai bisogno è stato scaricato, installato e pronto per l'uso, apri il modello selezionato in Mozilla Firefox e avvia Firebug facendo clic sull'icona del bug.
Pannello dei plugin
In basso si apre il pannello dei plugin, in cui lavoreremo. Tutte le modifiche apportate verranno immediatamente visualizzate nella parte superiore del monitor. Nella scheda a destra vediamo lo stile CSS dell'elemento selezionato, a sinistra il codice html della pagina. Per aumentare o diminuire la larghezza del modello, la prima cosa che dobbiamo sapere è la dimensione attuale della base. Fare clic sull'icona del cursore del nostro plugin.
Gli elementi della pagina verranno evidenziati in diversi colori e potrai evidenziare ciascun elemento della pagina per conoscere in dettaglio la struttura del tuo sito. Dopo aver ricevuto il nome, scoprirai le dimensioni esatte. Dopo aver impostato la larghezza corrente, fare clic con il pulsante sinistro del mouse su questo valore. Con il metodo di prova, creiamo la larghezza più adatta e ne testiamo la visualizzazione.
Sentiti libero di sperimentare qualsiasi elemento e valore. Le modifiche attuali non possono influenzare in alcun modo la tua pagina sul server, sono attive solo nella finestra del plugin (la cache corrente di Mozilla). Quando aggiorni, tutte le impostazioni vengono ripristinate.
Modifica style.css
Ora resta da salvare queste modifiche per il modello WordPress. Di solito la larghezza del modello è scritta in style.css. Entriamo nel pannello amministrativo del sito → aspetto → editor → style.css → riga 79, cambiamo il valore della larghezza. Salviamo.
Aggiornato: 21/08/2023
103583
Se noti un errore, seleziona una porzione di testo e premi Ctrl + Invio
