Vuoi creare una pagina a larghezza intera su WordPress?

Molti di Temi WordPress Sono già dotati di un modello di pagina a larghezza intera integrato che puoi utilizzare. Tuttavia, alcuni temi WordPress non dispongono di questa funzionalità. 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 incorporato 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 già uno, dai un'occhiata alla seguente selezione e procuratene 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 nella schermata di modifica della pagina non è presente l'opzione Modello a larghezza intera, significa che il tema WordPress non dispone di questa opzione. 

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. 

Per prima cosa, 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 definisce semplicemente il nome di un modello di file e chiede a WordPress di recuperare il modello di intestazione.

Successivamente, avrai bisogno della parte di 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 recupera semplicemente la barra laterale e la visualizza nel tuo tema WordPress. Rimuovendola, il tema non visualizzerà più la barra laterale quando utilizzi il template. Larghezza completo.

Potresti vedere questa riga apparire più di una volta sul tuo tema WordPress. Se il tuo tema WordPress ha diversi 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 » sulla cartella del tema WordPress utilizzando client FTP.

Hai creato e caricato con successo un modello di pagina personalizzato a larghezza intera sul tuo tema. Il passo successivo è 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 scomparse e la pagina appare come una pagina a colonna singola. Potrebbe non essere ancora completa, ma ora sei pronto a presentarla 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 Ispeziona per scoprire le classi CSS utilizzate dal tema per definire l'area del contenuto.

Successivamente, puoi regolarne la larghezza al 100% tramite CSS. Noi 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 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 elegantiSebbene venga generalmente utilizzato come parte del tema Divi per WordPress, Divi Builder è anche un plugin autonomo che puoi utilizzare su altri temi WordPress.

Divi Builder consente di modificare i contenuti utilizzando un'interfaccia visiva sul front-end e un'interfaccia sul back-end, anche se la maggior parte degli utenti preferisce la prima.

In sostanza, al posto delle barre laterali, tutto è racchiuso in pop-up e pulsanti mobili. Offre accesso a 316 modelli predefiniti distribuiti in 40 diversi pacchetti di presentazione, oltre alla possibilità di salvare i propri 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 anche 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 quella di basarsi su 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.

Scaricare | Demo | Web hosting

2. Themify Builder

Themify Builder è, come prevedibile, il prodotto del team Themify. Lo integrano in molti dei loro temi WordPress per offrire ai clienti semplici opzioni di personalizzazione. Ma è anche possibile acquistarlo come plugin autonomo e utilizzarlo con qualsiasi tema WordPress.

Come Divi Builder e WPBakery Page Builder, Themify Builder consente di creare layout nel front-end o nel back-end. Un'altra caratteristica interessante è che questo plugin consente di personalizzare i breakpoint responsive (ma solo a livello di sito).

Scopri le 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 comunque di usare l'editor standard di WordPress, mentre altri page builder ti costringono a usare l'interfaccia del page builder per ogni cosa.

Scaricare | Demo | Web hosting

3. Elementor

Lanciato originariamente nel 2016, il plugin Elementor per WordPress è uno dei page builder più giovani di questa lista. Nonostante il suo lancio tardivo, Elementor ha rapidamente accumulato oltre 1.000.000 di installazioni attive su WordPress.org, diventando uno dei page builder per WordPress più popolari.

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.

 Scaricare | Demo | Web hosting

Altre risorse consigliate

Scopri altre risorse consigliate che ti aiuteranno a creare 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 fatto! Questo tutorial si conclude. Se hai un tema WordPress che non offre un modello di pagina a larghezza intera, speriamo che questo tutorial ti abbia aiutato a superare questa limitazione. Non esitate 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.

...