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.

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.

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.

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:

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

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.

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:

<?php get_sidebar(); ?>

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.

<?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 -->
</div><!-- .content-area -->
<?php get_footer(); ?>

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".

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:

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

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

Ecco come sarà il ventisette diciassette.

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 usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione 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 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.

Come Divi Builder e WPBakery Page Builder, Themify Builder ti consente di creare layout nel front-end o nel back-end. Un'altra cosa positiva è 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 vendi 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 costruttori di pagine ti obbligano a utilizzare l'interfaccia di WordPress. costruttore di pagine 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.

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.

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.

• Come cambiare il tuo tema WordPress in modo sicuro
• Come impostare consegne WooCommerce
• 10 premium WordPress plugin da prenotazione e prenotazione
• Quando e come installare WordPress in una sottodirectory
• 10 Wordpress Plugin per migliorare la velocità del tuo blog

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.

...