Come creare una pagina personalizzata in WordPress

Come creare un modello di pagina personalizzato in WordPress
12 Gennaio 2021
News Sviluppo Realizzazione Siti Web Wordpress Serra Simone

Vuoi creare una pagina personalizzata in WordPress?

Una pagina personalizzata ti consente di utilizzare un layout diverso dalle tue normali pagine in WordPress. Molti siti WordPress hanno layout di pagina personalizzati per le loro pagine di vendita, pagine di destinazione, pagine webinar e altro ancora.

In questo articolo, ti mostreremo come creare facilmente una pagina personalizzata in WordPress, passo dopo passo.

Comprensione delle pagine personalizzate in WordPress

Per impostazione predefinita, WordPress ti consente di creare file post e pagine.

Il tuo tema WordPress controlla l'aspetto delle tue pagine utilizzando un file modello chiamato page.php.

Questo file modello influisce su tutte le singole pagine che crei in WordPress.

Tuttavia, come già sai, non tutte le pagine sono uguali. Ad esempio, potresti voler creare un file pagina di destinazione sembra molto diverso dalle normali pagine del tuo sito web.

In passato, creare una pagina personalizzata in WordPress significava codificare il proprio modello personalizzato utilizzando HTML, CSS, e PHP. Tratteremo questo metodo, ma non lo consigliamo ai principianti.

Ti consigliamo invece di utilizzare SeedProd o un altro plug-in per la creazione di pagine per creare la tua pagina personalizzata. Usa semplicemente questi collegamenti rapidi per passare direttamente ai diversi metodi.

Utilizzo di SeedProd per creare una pagina personalizzata in WordPress

SeedProd è il migliore drag and drop generatore di pagine per WordPress. Viene fornito con oltre 100 modelli progettati professionalmente che puoi utilizzare come base per la tua pagina.

In alternativa, puoi creare una pagina WordPress completamente personalizzata senza scrivere alcun codice utilizzando il loro builder drag & drop.

SeedProd è progettato per essere facile da usare, anche per i principianti assoluti. Tuttavia, ha anche opzioni avanzate che ti consentono di creare pagine visivamente sbalorditive per coinvolgere i tuoi visitatori e aumentare le conversioni.

Innanzitutto, è necessario installare e attivare il SeedProd collegare. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Nota: c'è un versione gratuita del plugin SeedProd disponibile pure. Tuttavia, per il nostro esempio, utilizzeremo la versione Pro poiché ha molte potenti funzionalità.

Dopo l'attivazione, dovresti vedere la pagina di benvenuto. È necessario inserire qui la chiave di licenza e fare clic sul pulsante “Verifica chiave”. Troverai la tua chiave di licenza nell'area del tuo account sul sito web di SeedProd.

Immissione della chiave di licenza per SeedProd

Quindi, vai a SeedProd »Pagine nel tuo amministratore di WordPress. Quindi, fai semplicemente clic sul pulsante “Crea nuova pagina di destinazione”.

Creazione di una nuova pagina di destinazione in SeedProd

Successivamente, ti verrà chiesto di scegliere un modello. Puoi filtrarli per trovare modelli per il tipo di pagina che stai creando. Se preferisci iniziare da zero, utilizza semplicemente il modello vuoto.

Scegliere il modello di pagina in SeedProd

Per il bene di questo tutorial, utilizzeremo un modello “Pagina di vendita del corso”.

Ti verrà chiesto di dare un nome alla tua pagina e di impostare l'URL. Dopo averlo fatto, vai avanti e fai clic sul pulsante “Salva e inizia a modificare la pagina”.

Assegnare alla tua pagina un nome e un URL in SeedProd

Il modello che hai scelto verrà ora caricato nel generatore di pagine SeedProd.

L'interfaccia del generatore di pagine SeedProd

Per modificare qualsiasi cosa nel modello, fai semplicemente clic su di esso. È facile modificare il testo direttamente nel generatore di pagine stesso. Ad esempio, qui stiamo modificando il titolo della pagina.

Modifica il titolo della pagina in SeedProd

Puoi formattare il testo, modificare l'allineamento, aggiungere collegamenti e altro ancora.

È anche facile modificare le immagini utilizzando il generatore di pagine SeedProd. Basta fare clic sull'immagine che si desidera modificare.

In questo esempio, abbiamo sostituito l'immagine predefinita nella parte superiore della pagina con la nostra immagine.

Caricamento di una nuova immagine in SeedProd

Vai avanti e cambia tutto ciò che desideri semplicemente facendo clic su di esso. Questo aprirà il riquadro di modifica sul lato sinistro della pagina.

Per aggiungere nuovi blocchi (elementi) alla tua pagina, fai semplicemente clic sulla scheda Design nella parte superiore della pagina. Basta scegliere qualsiasi blocco Standard o Avanzato e trascinarlo in posizione sulla tua pagina.

Aggiunta di blocchi in SeedProd

Dopo aver aggiunto un blocco, devi solo fare clic su di esso per modificarlo. Qui abbiamo aggiunto un blocco di elenchi alla nostra pagina.

Un blocco elenco in SeedProd

Se in qualsiasi momento commetti un errore o cambi idea, non preoccuparti. È sufficiente fare clic sul pulsante “Annulla” nella parte inferiore della pagina per annullare ciò che hai fatto.

Il pulsante Annulla in SeedProd

Troverai anche il pulsante Ripeti, la cronologia delle revisioni, la navigazione del layout, l'anteprima mobile e le impostazioni globali per la tua pagina qui.

Quando sei soddisfatto della tua pagina personalizzata, è il momento di visualizzarla in anteprima o pubblicarla. Per pubblicare la pagina, fai prima clic sulla freccia del menu a discesa accanto al pulsante Salva nella parte superiore dello schermo. Quindi, seleziona l'opzione Pubblica.

Salvare o pubblicare la tua pagina in SeedProd

Vedrai un messaggio che ti informa che la tua pagina è stata pubblicata. Per verificarlo subito, fai semplicemente clic sul pulsante “Visualizza pagina live”.

Il messaggio SeedProd che ti informa che la tua pagina è stata pubblicata

Per modificare la tua pagina personalizzata in qualsiasi momento futuro, vai semplicemente a SeedProd »Pagine nel tuo amministratore di WordPress.

Dovresti vedere la tua pagina salvata nell'elenco delle pagine di destinazione. Basta fare clic sul titolo per modificarlo.

Modifica la tua pagina di destinazione esistente in SeedProd

Il vantaggio di utilizzare SeedProd su qualsiasi altro generatore di pagine in WordPress è che non rallenterà il tuo sito. SeedProd è il generatore di pagine più veloce e ti consente di creare layout di pagina completamente personalizzati indipendenti dal design del tema, in modo da poter avere intestazioni, piè di pagina personalizzati, ecc.

Utilizzo di Beaver Builder per creare una pagina personalizzata in WordPress

Beaver Builder è un popolare e consolidato generatore di pagine drag and drop per WordPress.

Puoi usarlo per creare facilmente pagine personalizzate sul tuo sito web o blog. Si consiglia di utilizzare la versione completa di Beaver Builder. C'è anche un file versione gratuita di Beaver Builder disponibile con funzionalità limitate.

Innanzitutto, è necessario installare e attivare il Beaver Builder collegare. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per WordPress.

Dopo l'attivazione, vedrai la schermata di benvenuto di Beaver Builder. Basta fare clic sulla scheda Licenza per inserire la chiave di licenza. Lo troverai nell'area del tuo account sul sito Web di Beaver Builder.

Non dimenticare di fare clic sul pulsante “Salva codice di licenza” per salvare il codice di licenza.

Aggiunta della chiave di licenza a Beaver Builder

Per utilizzare Beaver Builder, vai semplicemente a Pagine »Aggiungi nuovo nel tuo amministratore di WordPress per creare una nuova pagina. Quindi, fai clic sul pulsante “Avvia Beaver Builder”.

Avvia l'editor di Beaver Builder quando crei una nuova pagina

L'editor di Beaver Builder si aprirà. Devi aggiungere righe e moduli per creare la tua pagina. Fai semplicemente clic sull'elemento che desideri utilizzare e trascinalo sulla tua pagina.

Selezione di moduli o righe da trascinare e rilasciare utilizzando Beaver Builder

In alternativa, puoi iniziare con un modello. Vai avanti e fai clic sulla scheda Modelli, quindi scegli un modello da utilizzare.

Scegliere un modello in Beaver Builder

È quindi possibile fare clic su qualsiasi parte del modello per modificarlo. Ad esempio, puoi modificare il testo, le immagini, i colori e altro.

Qui stiamo modificando l'intestazione della pagina. Il processo di modifica di Beaver Builder non è così fluido come quello di SeedProd, poiché è necessario digitare il testo in una finestra popup separata.

Modifica di un'intestazione in Beaver Builder

Una volta terminate le modifiche alla pagina, fai semplicemente clic sul pulsante Fine in alto a destra. Potrai quindi salvare o pubblicare il tuo post.

Salvare il tuo post in Beaver Builder

Creazione manuale di un modello di pagina personalizzato

Se preferisci non utilizzare un plug-in, puoi creare manualmente un modello di pagina personalizzato in WordPress.

Nota dell'editore: Va benissimo avere molti plugin in esecuzione sul tuo sito WordPress. Dai un'occhiata al nostro post su quanti plugin di WordPress dovresti installare se sei preoccupato di avere troppi plugin.

Innanzitutto, devi aprire un editor di testo normale come Blocco note sul tuo computer. Nel file vuoto, aggiungi questa riga di codice in alto:

Questo codice dice semplicemente a WordPress che si tratta di un file modello e dovrebbe essere riconosciuto come CustomPageT1. Puoi nominare il tuo modello come preferisci, purché abbia senso per te.

Dopo aver aggiunto il codice, salva il file sul desktop come, custompaget1.php.

Vai avanti e salva il file con qualsiasi nome, assicurati solo che termini con .php estensione.

Per questo passaggio successivo, dovrai connetterti al tuo Hosting WordPress account utilizzando un Client FTP.

Una volta connesso, vai al tuo tema corrente o tema figlio cartella. Lo troverai nel file /wp-content/themes/ directory. Quindi, carica il file del modello di pagina personalizzato sul tema.

Ora devi accedere al tuo WordPress area di amministrazione per creare una nuova pagina o modificarne una esistente.

Nella schermata di modifica della pagina, scorri verso il basso fino alla sezione “Attributi pagina”. Vedrai un menu a discesa Modello. Fare clic su di esso ti consentirà di selezionare il modello appena creato.

Selezione del modello di pagina personalizzato

Se selezioni il tuo nuovo modello e visiti questa pagina sul tuo sito in questo momento, vedrai una pagina vuota. Questo perché il tuo modello è vuoto e non dice a WordPress cosa visualizzare.

Non preoccuparti, ti mostreremo come modificare facilmente il tuo modello di pagina personalizzato.

Modifica del modello di pagina personalizzato

Il tuo modello di pagina personalizzato è come qualsiasi altro file di temi in WordPress. Puoi aggiungere qualsiasi HTML, tag modello o codice PHP in questo file.

Il modo più semplice per iniziare con la tua pagina personalizzata è copiare il modello di pagina esistente fornito dal tuo tema.

Apri il tuo client FTP e vai alla cartella del tema. Lì troverai un file chiamato page.php. Devi scaricare questo file sul tuo computer.

Download del file php della pagina per il tuo sito

Apri il file page.php in un semplice editor di testo come Blocco note e copia tutto il suo contenuto tranne la parte dell'intestazione.

Intestazione del modello di un tipico file php di una pagina in WordPress

La parte di intestazione è la parte commentata nella parte superiore del file. Non lo stiamo copiando, perché il nostro modello di pagina personalizzato ne ha già uno.

Ora devi aprire il tuo file modello di pagina personalizzato e incollare tutto il codice che hai copiato alla fine.

Il tuo file di pagina personalizzato ora sarebbe simile a questo:





Salva semplicemente il file del modello di pagina personalizzato e caricalo di nuovo nella cartella del tema tramite FTP.

Ora puoi visitare la pagina che hai creato utilizzando il modello di pagina personalizzato. Dovrebbe apparire esattamente come le altre tue pagine in WordPress.

Quindi, continua a modificare il file del modello di pagina personalizzato. Puoi personalizzarlo come preferisci. Ad esempio, puoi rimuovere la barra laterale rimuovendo la riga che inizia .

Puoi anche aggiungere codice PHP personalizzato o aggiungere qualsiasi altro codice HTML che desideri.

Per aggiungere il contenuto effettivo per la tua pagina, modifica la pagina normalmente in WordPress.

Puoi anche lasciare l'area del contenuto nell'editor di pagina completamente vuota e aggiungere contenuti personalizzati direttamente al tuo modello di pagina. In questo modo, il contenuto che aggiungi apparirà su tutte le pagine utilizzando il modello personalizzato.

Speriamo che questo articolo ti abbia aiutato ad aggiungere una pagina personalizzata in WordPress. Potresti anche consultare la nostra guida su tipi più importanti di pagine WordPress che ogni sito web dovrebbe avere e il nostro elenco di deve avere plugin di WordPress per tutti i siti web.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale Youtube per i tutorial video di WordPress. Puoi trovarci anche su Twitter e Facebook.

Il post Come creare una pagina personalizzata in WordPress è apparso per primo WPBeginner.



Source link

Web Designer Freelancer Realizzazione Siti Web Serra Simone

Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.