Come creare una pagina a tutta larghezza in WordPress (guida per principianti)

Volete creare una pagina a tutta larghezza in WordPress, in modo da poter estendere i vostri contenuti sullo schermo?

La maggior parte dei temi di WordPress è già dotata di un modello di pagina a tutta larghezza che è possibile utilizzare. Tuttavia, se il vostro tema non ne ha uno, è facile aggiungerlo.

In questo articolo vi mostreremo come creare facilmente una pagina a tutta larghezza in WordPress e anche creare layout di pagina completamente personalizzati senza alcun codice.

Ecco una rapida panoramica dei metodi di questa guida:

Metodo 1. Utilizzare il modello a tutta larghezza del tema

Se il vostro tema è già dotato di un modello di pagina a larghezza piena, è meglio utilizzare quello. Quasi tutti i buoni temi di WordPress ne dispongono.

Anche i migliori temi WordPress gratuiti sono spesso dotati di un modello a larghezza piena, quindi è molto probabile che ne abbiate già uno.

Per prima cosa, è necessario modificare una pagina o crearne una nuova andando su Pagine ” Aggiungi nuovo nella dashboard di WordPress.

Nel riquadro destro “Documento” dell’editor di contenuti, è necessario espandere la sezione “Attributi della pagina” facendo clic sulla freccia verso il basso accanto ad essa. Si dovrebbe quindi vedere un menu a tendina “Modello”.

Se si dispone di un modello a larghezza piena per il tema, questo sarà elencato qui. Dovrebbe essere chiamato “Modello a larghezza piena”:

Le opzioni che vedete qui variano a seconda del vostro tema. Non preoccupatevi se il vostro tema non ha un modello di pagina a larghezza piena.

È possibile aggiungerne facilmente uno utilizzando i metodi indicati di seguito.

Metodo 2. Creare un modello di pagina a tutta larghezza utilizzando un plugin

Questo metodo è il più semplice e funziona con tutti i temi e i plugin di page builder di WordPress.

Innanzitutto, è necessario installare e attivare il plugin Fullwidth Templates. Se non siete sicuri di come fare, consultate la nostra guida per principianti sull’installazione di un plugin di WordPress.

Il plugin Fullwidth Templates aggiunge tre nuove opzioni ai modelli di pagina:

Queste opzioni sono:

• FW No Sidebar: rimuove la barra laterale dalla pagina, ma lascia intatto tutto il resto.
• FW Fullwidth: Rimuove la barra laterale, il titolo e i commenti e allarga il layout a tutta larghezza.
• FW Fullwidth senza intestazione e piè di pagina: Rimuove tutto ciò che fa FW Fullwidth, più l’intestazione e il piè di pagina.

Se avete intenzione di utilizzare semplicemente l’editor integrato di WordPress, “FW No Sidebar” sarà probabilmente la scelta migliore.

Sebbene questo plugin consenta di creare un modello di pagina a larghezza piena, le opzioni di personalizzazione sono limitate.

Se si desidera personalizzare il modello a larghezza piena senza alcun codice, è necessario utilizzare un costruttore di pagine.

Metodo 3: progettare una pagina a tutta larghezza in WordPress utilizzando un plugin per il costruttore di pagine

Se il vostro tema non dispone di un modello a larghezza piena, questo è il modo più semplice per creare e personalizzare un modello a larghezza piena.

Permette di modificare facilmente la pagina a larghezza piena e di creare diversi layout di pagina per il vostro sito web con un’interfaccia drag and drop.

Per questo metodo, è necessario un plugin per il costruttore di pagine di WordPress. In questo tutorial, utilizzeremo Thrive Architect.

È uno dei migliori plugin di page builder drag and drop e consente di creare facilmente layout di pagina senza scrivere alcun codice.

Innanzitutto, installare e attivare il plugin Thrive Architect. Per maggiori dettagli, consultare la nostra guida passo passo su come installare un plugin di WordPress.

Una volta attivato il plugin, modificate una pagina esistente o createne una nuova in WordPress.

Quindi, fare clic sul pulsante “Avvia Thrive Architect” nella parte superiore dello schermo.

Successivamente, verrà richiesto di scegliere il tipo di pagina che si desidera creare. Si può scegliere di creare una pagina normale o una pagina di destinazione precostituita.

Selezionare l’opzione “Pagina di destinazione precostituita” facendo clic su di essa.

Si accede così alla libreria di pagine di atterraggio di Thrive Architect. Da qui è possibile selezionare uno dei modelli predefiniti da utilizzare come base per la propria pagina a tutta larghezza.

È sufficiente fare clic su un modello di vostro gradimento per selezionarlo.

Se avete scelto un modello dalla sezione “Set di pagine di atterraggio intelligenti”, ora potete scegliere tra una serie di pagine pre-progettate in quello stile.

Per questa esercitazione, sceglieremo il modello “Pagina di vendita” facendo clic su di esso. Quindi, premere il pulsante “Applica modello” e il costruttore di pagine lo caricherà.

Una volta entrati nell’editor di Thrive Architect, è possibile modificare qualsiasi elemento, come immagini, sfondo, testo e così via, che si desidera cambiare.

Per modificare un elemento della pagina, è sufficiente fare clic su di esso. In questo caso, abbiamo fatto clic sullo sfondo di questo blocco di pagina. In questo modo vengono visualizzate tutte le opzioni di personalizzazione nel menu di sinistra:

Qui è possibile attivare l’interruttore per far sì che il contenuto copra l’intera larghezza dello schermo.

Dal menu di sinistra è possibile personalizzare anche la tipografia, la dimensione dei caratteri, il layout, lo stile dello sfondo, i bordi, le ombre e molto altro ancora.

È inoltre possibile aggiungere nuovi elementi al layout in qualsiasi momento. Thrive Architect è dotato di molti blocchi di base e avanzati che si possono trascinare e rilasciare nella pagina.

Una volta terminata la modifica, fare clic sulla freccia (^) accanto al pulsante “Salva lavoro” nella parte inferiore dello schermo. Quindi, fare clic sull’opzione “Salva e torna all’editor di post”.

È quindi possibile salvare la bozza o pubblicarla.

Una volta pubblicata, è possibile visitare il proprio blog WordPress per vedere la pagina a larghezza piena finita.

Metodo 4. Creare pagine a tutta larghezza completamente personalizzate con SeedProd

Sebbene Thrive Architect sia una soluzione interessante, potreste essere alla ricerca di un plugin che vi offra opzioni di personalizzazione ancora più potenti per le pagine del vostro sito web.

Se desiderate creare una pagina di destinazione completamente personalizzata, in cui volete personalizzare l’intestazione, il piè di pagina e tutte le aree della pagina, vi consigliamo di utilizzare SeedProd.

È il miglior plugin per pagine di atterraggio per WordPress ed è dotato di un’interfaccia drag and drop page builder molto semplice da usare.

Innanzitutto, è necessario installare e attivare il plugin SeedProd. Dopo l’attivazione, basta andare su SeedProd ” Pagine per aggiungere una nuova pagina di destinazione.

È possibile scegliere uno degli oltre 300 modelli precostituiti, che includono molte opzioni a larghezza piena. Oppure potete creare una landing page personalizzata a larghezza piena partendo da zero.

L’aspetto migliore di SeedProd è che è estremamente veloce e viene fornito con funzioni di conversione integrate per la gestione degli abbonati, l’integrazione di servizi di email marketing, blocchi WooCommerce avanzati e altro ancora.

Per istruzioni dettagliate, consultate la nostra guida su come creare una landing page in WordPress.

Oltre al costruttore di pagine di destinazione, SeedProd offre anche un completo costruttore di temi drag and drop. Ciò significa che è possibile creare facilmente un tema WordPress personalizzato a tutta larghezza senza modificare alcun codice.

Basta andare su SeedProd ” Theme Builder per creare un nuovo tema WordPress. Anche in questo caso, è possibile scegliere tra modelli di tema personalizzabili o progettare ogni parte del tema da zero.

Basta puntare e fare clic per modificare ogni parte del tema. Ad esempio, è possibile aggiungere una nuova immagine di sfondo e impostare la posizione e la larghezza della sezione a schermo intero.

Con il Theme Builder di SeedProd, potete personalizzare ogni parte del vostro sito WordPress, comprese pagine, post, archivi, intestazione, piè di pagina, barre laterali, pagine WooCommerce e altro ancora.

Per istruzioni passo passo, potete seguire il nostro tutorial su come creare facilmente un tema WordPress personalizzato.

Metodo 5: Creare un modello di pagina WordPress a larghezza piena manualmente

Questo metodo è l’ultima risorsa se nessuno dei metodi precedenti funziona. Richiede la modifica dei file del tema di WordPress. È necessaria una conoscenza di base di PHP, CSS e HTML.

Se non l’avete mai fatto prima, date un’occhiata alla nostra guida su come copiare/incollare il codice in WordPress.

Prima di proseguire, vi consigliamo di creare un backup di WordPress o almeno un backup del vostro tema attuale. Questo vi aiuterà a ripristinare facilmente il vostro sito se qualcosa dovesse andare storto.

Quindi, aprire un editor di testo semplice come Notepad e incollare il seguente codice in un file vuoto:

<?php
/*
*
Template Name: Full-Width
*/
get_header(); ?>

Salvare questo file come full-width.php sul proprio computer. Potrebbe essere necessario cambiare il “Tipo di salvataggio” in “Tutti i file” per evitare di salvarlo come file .txt:

Questo codice definisce semplicemente il nome di un file di template e chiede a WordPress di recuperare il template dell’intestazione.

Successivamente, vi servirà la parte di codice relativa al contenuto. Collegatevi al vostro sito web utilizzando un client FTP (o il file manager del vostro hosting WordPress in cPanel) e poi andate a /wp-content/themes/your-theme-folder/.

Ora è necessario individuare il file page.php. Questo è il file del modello di pagina predefinito del tema.

Aprire il file e copiare tutto quello che c’è dopo la riga get_header() e incollarlo nel file full-width.php sul computer.

Nel file full-width.php, trovare ed eliminare questa riga di codice:

<?php get_sidebar(); ?>

Questa riga recupera la barra laterale e la visualizza nel tema. Eliminandola, il tema non mostrerà più la barra laterale quando si utilizza il modello a larghezza piena.

È possibile che questa riga sia presente più di una volta nel tema. Se il tema ha più barre laterali (le aree dei widget del piè di pagina sono chiamate anche barre laterali), si vedrà ogni barra laterale citata una volta nel codice. Decidete quali sidebar volete mantenere.

Se il vostro tema non visualizza le barre laterali sulle pagine, potreste non trovare questo codice nel vostro file.

Ecco come appare l’intero codice full-width.php dopo aver apportato le modifiche. Il vostro codice potrebbe apparire leggermente diverso a seconda del vostro tema.

<?php
/*
*
Template Name: Full Width
*/
get_header(); ?>

	<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
		<?php
		// Start the loop.
		while ( have_posts() ) :
			the_post();

			// Include the page content template.
			get_template_part( 'template-parts/content', 'page' );

			// If comments are open or we have at least one comment, load up the comment template.
			if ( comments_open() || get_comments_number() ) {
				comments_template();
			}

			// End of the loop.
		endwhile;
		?>

	</main><!-- .site-main -->

	<?php get_sidebar( 'content-bottom' ); ?>

</div><!-- .content-area -->

<?php get_footer(); ?>

Quindi, caricare il file full-width.php nella cartella del tema utilizzando il proprio client FTP.

È stato creato e caricato con successo un modello di pagina a larghezza piena personalizzato nel tema. Il passo successivo consiste nell’utilizzare questo modello per creare una pagina a larghezza piena.

Accedere all’area di amministrazione di WordPress e modificare o creare una nuova pagina nell’editor di blocchi di WordPress.

Nel riquadro “Documento” sulla destra, cercate “Attributi pagina” e fate clic sulla freccia verso il basso per espandere la sezione, se necessario. Dovrebbe essere presente un menu a tendina “Modello” in cui è possibile selezionare il nuovo modello “Larghezza intera”:

Dopo aver selezionato il modello, pubblicare o aggiornare la pagina.

Quando si visualizza la pagina, si noterà che le barre laterali sono scomparse e la pagina appare come una singola colonna. Forse non è ancora a tutta larghezza, ma ora siete pronti per uno stile diverso.

È necessario utilizzare lo strumento Inspect per scoprire le classi CSS utilizzate dal tema per definire l’area del contenuto.

Successivamente, è possibile regolare la larghezza al 100% utilizzando i CSS. È possibile aggiungere il codice CSS andando su Aspetto ” Personalizzazione e facendo clic su “CSS aggiuntivo” nella parte inferiore della schermata.

Nel nostro sito di prova abbiamo utilizzato il seguente codice CSS:

.page-template-full-width .content-area {
    width: 100%;
    margin: 0px;
    border: 0px;
    padding: 0px;
}

.page-template-full-width .site {
margin:0px;
}

Ecco come appariva sul nostro sito demo utilizzando il tema Twenty Sixteen.

Se si vuole usare il metodo manuale e si desidera effettuare ulteriori personalizzazioni, si può anche usare il plugin CSS Hero, che consente di modificare gli stili CSS con un editor punta e clicca.

Per la maggior parte degli utenti, tuttavia, si consiglia di utilizzare il modello a larghezza piena del proprio tema o di utilizzare un plugin per crearne uno.

Speriamo che questo articolo vi abbia aiutato a capire come creare facilmente una pagina a tutta larghezza in WordPress. Potreste anche voler consultare la nostra guida sui migliori plugin WordPress per far crescere il vostro sito web e il nostro confronto dei migliori plugin WordPress LMS per creare e vendere corsi.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.