Vai al contenuto principale

Come creare una larghezza pagina intera su WordPress

Divi: il tema WordPress più semplice da usare

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]

Vuoi creare una pagina a larghezza intera su WordPress?

Molti di Temi WordPress sono già dotati di un modello di pagina a larghezza intera incorporato che puoi utilizzare. Tuttavia, alcuni temi WordPress non hanno questa funzione. in questo tutoriel, ti mostreremo come creare facilmente una pagina a larghezza intera 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.

creare una pagina a larghezza intera in WordPress

Metodo 1: utilizzo di un modello di larghezza integrato nel tema WordPress

Questo metodo è consigliato se il tuo tema WordPress è già dotato di un modello di pagina a tutta larghezza. Se non ne hai uno, controlla la seguente selezione e prendine uno.

Per prima cosa devi modificare una pagina o crearne una nuova visitando " Pagine> Aggiungi Una nuova pagina

Nella finestra di modifica della pagina, seleziona Larghezza completo come modello nella casella di controllo degli attributi di pagina.

Selezione del modello di pagina

Dopo aver selezionato il modello Larghezza completodevi registrare la tua pagina. Puoi continuare a personalizzare la pagina per aggiungere altro contenuto o fare clic sul pulsante di anteprima per vederlo in azione.

Pagina a tutta larghezza

Se non hai un'opzione modello a larghezza intera - larghezza intera - nella schermata di modifica della pagina, significa che il tuo tema WordPress non ce l'ha. 

Ma non preoccuparti, ti mostreremo come creare facilmente una pagina a tutta larghezza senza cambiare un tema WordPress.

Metodo 2: come creare un modello di pagina con larghezza intera

Questo metodo richiede di modificare i file del tema WordPress che stai utilizzando e di avere una conoscenza di base di PHP, CSS e HTML.

A proposito, ti invitiamo anche a consultare il I migliori plugin di WordPress per 8 per creare facilmente i tuoi layout 

Ma, prima di andare oltre, devi crea un backup di WordPress o almeno un backup del tuo attuale tema di WordPress. Questo ti aiuterà a ripristinare facilmente il tuo sito web se succede qualcosa di brutto. 

Innanzitutto, devi aprire un editor di testo come Blocco note e incollare il seguente codice in un file vuoto:


Ora devi salvare questo file come " Full-width.php Sul tuo computer

Questo codice imposta semplicemente il nome di un modello di file e dice a WordPress di estrarre il modello di intestazione.

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]

Quindi avrai bisogno della parte del contenuto del codice. Connettiti al tuo sito web utilizzando un client FTP (o file manager in cPanel) quindi vai a " / Wp-content / themes / vostro-theme-cartella / '.

Quindi devi individuare il file chiamato " page.php ". Questo è il file modello di pagina predefinito per il tuo tema.

Copia tutto dopo la funzione « get_header () E incollalo in un file " Full-width.php Che hai creato sul tuo computer.

Ora devi guardare il contenuto del file "full-width.php" ed eliminare questa riga di codice:

Questa riga prende semplicemente la barra laterale e la visualizza nel tuo tema WordPress. Rimuovendo questo, il tuo tema non mostrerà la barra laterale quando usi il modello Larghezza completo.

Potresti vedere questa riga apparire più di una volta sul tuo tema WordPress. Se il tuo tema WordPress ha diversi file barre laterali (le aree del widget il piè di pagina sono anche chiamate barre laterali)vedrai ogni barra laterale referenziata una volta nel codice. Devi decidere quali barre laterali vuoi conservare.

Il tuo sito web sembra caricarsi lentamente, scopri Perché è necessario iniziare a ottimizzare il tuo blog WordPress per immagini

Se il tuo tema non mostra le barre laterali nella tua pagina, potresti non trovare questo codice nel tuo file.

Ecco come il nostro codice full-width.php si occupa di apportare le modifiche. Il codice potrebbe apparire leggermente diverso a seconda del tema.



    
        

    


Quindi devi scaricare il file Full-width.php »Nella cartella del tema WordPress utilizzando il client FTP.

Hai creato e caricato correttamente un modello di pagina a larghezza intera personalizzato sul tuo tema. Il passaggio successivo consiste nell'utilizzare questo modello per creare una pagina a larghezza intera.

Vai alla tua 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".

Selezione del modello nell'edizione delle pagine wordpress

Sarai in grado di 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 sparite e la tua pagina appare come una pagina a colonna singola. Potrebbe non essere ancora pieno, ma ora sei pronto per trasmetterlo in streaming in modo diverso.

Rendi popolare il tuo sito Web scoprendo il Plugin 7 WordPress per ottimizzare il SEO delle tue immagini

Sarà necessario utilizzare lo strumento Inspect per scoprire le classi CSS utilizzate dal tema per definire l'area del contenuto.

Quindi puoi regolare la sua larghezza al 100% usando CSS. Abbiamo utilizzato il seguente codice CSS:

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]

.pagina-template-full-width-zona .content {width: 100%; margin: 0px; border: 0px; padding: 0px; } .pagina-template-full-width .site {margin: 0px; }

Ecco come sarà il ventisette diciassette.

Presentazione del tema demo wordpress

Questo è tutto per questo tutorial, spero che ti permetta di creare pagine a tutta larghezza.

I metodi sopra indicati sono gratuiti per coloro che possono permettersi e desiderano creare rapidamente layout a larghezza intera o larghezza completa.

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. Divi Builder

Divi Builder è un costruttore di pagine di alta qualità molto apprezzato da Temi eleganti. Sebbene sia generalmente utilizzato come parte del tema Divi WordPress, Divi Builder è anche un plug-in autonomo che puoi utilizzare su altri temi WordPress.

Divi e1544278044306

Divi Builder ti consente di modificare i tuoi contenuti utilizzando un'interfaccia visiva sul front-end e un'interfaccia sul back-end, sebbene la maggior parte degli utenti preferisca la prima interfaccia.

Fondamentalmente invece delle barre laterali è tutto in popup e pulsanti mobili. Ti dà accesso a 316 modelli predefiniti distribuiti in 40 diversi pacchetti di presentazione, oltre alla possibilità di salvare i tuoi progetti come modelli.

Ti proponiamo di scoprire Come creare un blog professionale

Uno dei tratti di Divi è sempre stato il controllo degli stili che ti dà. In tre diverse schede, puoi configurare varie impostazioni, inclusi controlli reattivi, spaziatura personalizzabile e altro.

Puoi persino aggiungere CSS personalizzati, poiché il suo editor CSS include la convalida di base e il completamento automatico. Una delle critiche a Divi Builder è sempre stata il fatto che si basa shortcodes. Ciò significa che se lo disabiliti un giorno, lascerà un sacco di codici brevi nei tuoi contenuti. Anche se questo è un po 'deprimente, è meno un problema ora che esistono plug-in come Shortcode Cleaner.

Download | Demo | Web hosting

2. Themify Builder

Themify Builder è, non sorprende, l'offerta del team di Themify. Lo integra in molti dei loro temi WordPress per fornire ai clienti semplici opzioni di personalizzazione. Ma puoi anche acquistarlo come plugin autonomo e usarlo con qualsiasi tema WordPress.

Schermata di animazione del costruttore Themify e1544277050530

Come Divi Builder e WPBakery Page Builder, Themify Builder ti consente di creare layout nel front-end o nel back-end. Un'altra cosa buona è che questo plugin ti consente di personalizzare i tuoi breakpoint reattivi (ma solo a livello dell'intero sito web).

Scopri Come installare e configurare WooCommerce per creare un negozio online e vendere facilmente i tuoi prodotti su Internet 

Una cosa interessante di Themify Builder è che ti consente ancora di utilizzare l'editor standard di WordPress, mentre altri generatori di pagine ti costringono a utilizzare l'interfaccia di Page Builder per tutto.

Download | Demo | Web hosting

3. Elementor

Lanciato originariamente nel 2016, il plug-in Elementor WordPress è uno dei più giovani page builder in questo elenco. Nonostante il suo inizio tardivo, Elementor ha rapidamente collezionato oltre 1 di installazioni attive su WordPress.org, rendendolo uno dei più popolari page builder di WordPress.

È nel cuore del mondo.
Ciò che rende la sua reputazione è la sua interfaccia visiva fluida, le sue diverse opzioni di stile e altre potenti funzionalità come la creazione completa di temi WordPress.

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]

La sua interfaccia è divisa in due parti principali, con una terza zona per determinati parametri. La versione gratuita di Elementor offre widget gratuiti per 28. La versione Pro produce altri widget 30, per un totale di widget 58 nella versione Pro. La versione gratuita include circa modelli gratuiti 40, mentre la versione Pro offre centinaia di modelli aggiuntivi.

 Download | Demo | Web hosting

Altre risorse consigliate

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

Conclusione

Ecco ! Questo è tutto per questo tutorial. Se hai un tema WordPress che non offre una pagina a larghezza intera come modello, speriamo che questo tutorial ti abbia aiutato a risolvere questa lacuna. Non esitare a condividi 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. Buongiorno; Ciao,
    Ho il tema "thethetheen" e ho seguito il metodo 2x per creare una casa senza barre laterali. Funziona nel senso che a sinistra lascia la barra dei menu, vuota, ma il colore rimane. Vedi la barra laterale vuota e quindi la pagina cmq è asimmetrica

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
10 azioni
quota8
Tweet1
Enregistrer1