πŸ‘‰ Creazione di pagine di destinazione personalizzate in WordPress con Impact Plugin

Come aumentare il traffico e le vendite con il video marketing

Il plug-in Impact Page Builder è uno dei plugin rivoluzionari che è stato rilasciato non molto tempo fa. Ti permette di creare pagine di destinazione personalizzate all'interno del tuo tema WordPress dal pannello di amministrazione di WordPress. In questa guida ti mostreremo come iniziare a lavorare con Impact Page Builder.

Che cos'è Impact Page Builder?

Come sapete, uno dei componenti più importanti di qualsiasi sito WordPress è il suo tema. I temi WordPress offrono design e layout coerenti su tutte le pagine Web. Molti temi ti consentono persino di riorganizzare alcune parti del layout da una pagina all'altra (come Headway), in modo da poter avere una home page CMS statica o barre laterali specifiche della pagina, ecc.

In apparenza, potrebbe sembrare che il tuo tema ti dia una grande flessibilità e controllo del design. Se guardiamo un po 'più a fondo, scopriamo che non importa quanto sia flessibile il nostro tema, tutte le nostre pagine sembrano più o meno le stesse con le intestazioni, i piè di pagina, gli sfondi e così via.

Cosa succede se si desidera avere una pagina di vendita totalmente ridotta per un prodotto? Cosa succede se vuoi che il tuo sito abbia sezioni diverse, ognuna con il proprio look unico? Cosa succede se si desidera avere più mini siti di nicchia in esecuzione dallo stesso dominio?

Impact offre agli utenti la possibilità di creare un numero illimitato di modelli di design completamente unici che possono essere applicati a WordPress Pages & Posts. L'impatto non è un tema, il che significa che è libero dai vincoli imposti da un tema. L'impatto è compatibile al 100% con il tuo tema attivo.

Prima di proseguire, desideriamo informarti che Impact Page Builder è un plug-in PAID e dovresti acquistarlo prima di poterlo utilizzare. Non siamo stati pagati per scrivere questa guida all'installazione, e in nessun modo abbiamo ricevuto alcun beneficio dall'autore. Ci è stata data una copia di recensione per testare questo plugin che abbiamo fatto e ne siamo innamorati.

Alcuni esempi di plug-in di impatto in lavoro

Nota, questi potrebbero sembrare progetti di siti personalizzati, ma questi sono solo alcuni esempi creati con Impact Page Builder:

Questo plugin può davvero funzionare come per magia. Acquista la tua copia ora. Una volta scaricata la tua copia di Impact, sei pronto per esaminare la guida di seguito.

Installazione di impatto

All'interno del file .zip scaricato, troverai un altro file .zip contenente il software Impact. Questo sarà chiamato impact.zip.

Una volta individuato questo file, puoi procedere con il tuo WordPress Dashboard per caricarlo e installarlo. Accedi al tuo WordPress Dashboard e fai clic su "Plugin" seguito da "Aggiungi nuovo".

Fai clic sul pulsante "Carica" ​​nella parte superiore e quindi sul pulsante "Sfoglia" di seguito. Ora sfoglia il tuo computer per individuare il file zip di Impact Software menzionato sopra e selezionalo per il caricamento. Ora fai clic sul pulsante "Installa ora" a destra.

Al termine del caricamento, fai clic su "Attiva plug-in". Se l'installazione ha avuto successo, dovresti vedere ora una sezione "Impatto" nella barra laterale sinistra di Dashboard di WordPress:

Creare il tuo primo modello

Fai clic su "Template Builder" sotto l'intestazione "Impact" nella barra laterale sinistra. Ora fai clic sul pulsante "Mostra opzioni modello" a sinistra per visualizzare la casella delle opzioni di Impact Template Builder.

Nota: Questa finestra pop-up può essere trascinata in qualsiasi posizione nel tuo browser.

Una volta che la finestra di dialogo Template Builder Options è attiva, puoi fare clic su ciascun sottotitolo per accedere alle diverse opzioni. Qui troverai …

Struttura del modello:

Qui puoi regolare le aree Header, Footer e Sidebar in base alle tue esigenze.

Larghezze e altezze / Margini e imbottitura:

Non solo puoi regolare le dimensioni del modello principale e la spaziatura in questa sezione, ma troverai la tua Larghezza totale del sito in base alla configurazione corrente. Questa può essere un'informazione molto utile quando inizi ad aggiungere immagini e CSS personalizzati al tuo modello.

Area del titolo:

Qui puoi scegliere il tipo di titolo per il tuo modello, caricare un'immagine del logo e regolare il posizionamento. Per questo particolare tutorial, aggiungiamo un logo immagine al tuo modello di impatto. Per prima cosa fai clic sul pulsante "Sfoglia" per caricare e selezionare un'immagine del logo.

Una volta visualizzata la finestra popup di Image Uploader, puoi caricare l'immagine del logo facendo clic su "Carica", sfogliando il tuo computer per individuare l'immagine che desideri utilizzare per l'immagine del logo e quindi fare doppio clic per selezionarla e caricarla.

Si consiglia di creare prima una sottocartella per la propria immagine, nominando la sottocartella esattamente con lo stesso nome del modello di pagina di impatto che si sta creando. Ciò si rivelerà utile se in seguito si desidera esportare questo modello per scopi di backup o trasferimento.

Per creare una sottocartella, fare clic con il pulsante destro del mouse sulla cartella "Impatto" a sinistra della finestra popup del caricatore e quindi fare clic su "Nuova sottocartella". Quindi digita il nome e premi Invio sulla tastiera per finalizzare il processo. Da lì puoi fare doppio clic sulla sottocartella per inserirlo e caricare le tue immagini per quel particolare modello.

Una volta che l'immagine è stata caricata, dovrai fare doppio clic sull'immagine all'interno di Image Uploader per inserire il link corretto nell'area di opzione Impatto sullo sfondo. Ora cambia l'opzione "Titolo:" in "Immagine logo". Ora dovresti vedere l'immagine del tuo logo visualizzata nell'area Intestazione del modello.

Sfondi: Main / Header / Wrap:

Qui puoi personalizzare le principali aree di sfondo selezionando un tipo di sfondo, il colore (usando i selettori di colori incorporati) e l'immagine.Scoprirai che aggiungere un'immagine è esattamente lo stesso di aggiungere una "Immagine logo", come abbiamo appena visto sopra.

Noterai con una qualsiasi di queste opzioni di progettazione che le modifiche avranno effetto al volo, visualizzando in tempo reale l'anteprima del tuo modello. Per verificarlo, cambiamo il colore "Sfondo principale". Per fare ciò clicca sul selettore dei colori e trascina il colore selezionato intorno fino a trovare il colore desiderato.

Sfondi: contenuto / barra laterale / piè di pagina:

Questa sezione è la stessa di sopra, ma con diverse aree di sfondo da personalizzare.

Opzioni di bordo:

Da qui è possibile personalizzare il bordo del layout principale.

Aree attive del widget:

In questa sezione troverai molte posizioni diverse in cui puoi attivare le aree dei widget. Per questo tutorial andare avanti e selezionare la casella accanto a "After Header" per attivare l'area After Header Widget.

Nota: Non è necessario regolare l'area del widget Allineamento o Larghezza.

Template Custom CSS:

In questa sezione troverai contenuti CSS precompilati che ti daranno un vantaggio iniziale nel diventare più specifici con la personalizzazione del tuo modello. Puoi aggiungere qualsiasi CSS a quest'area e sostituirà tutti gli altri stili per questo particolare modello.

Per questo tutorial aggiungiamo un bordo attorno all'area della barra laterale. Scorri verso il basso fino a trovare questo CSS:

# impact-sidebar-wrap {}

Quindi aggiungi il seguente codice CSS per aggiungere un 3 pixel bordo grigio continuo attorno all'area della barra laterale:

border: 3px solid # 666;

Dovresti vedere il bordo apparire nella finestra di anteprima del modello mentre aggiungi il codice CSS.

Nota: Se incolli il codice CSS (come richiesto di inserirlo in te stesso) potresti dover premere la barra spaziatrice per rendere effettive le modifiche nella finestra di anteprima del modello.

Salvataggio del tuo modello

Ora che abbiamo personalizzato il nostro modello, è ora di salvarlo.

Vai alla sezione "Salva modello come", digita prima modello nel campo di testo "Modello ID" e quindi fai clic sul pulsante "Salva modello":

Ganci a impatto

Ora che abbiamo creato il framework di base per il nostro modello di pagina personalizzato, possiamo fare clic sulla pagina di amministrazione "Impact Hooks" nella barra laterale di WordPress, dove troverai ancora più modi per aggiungere contenuti al tuo modello.

Per questo tutorial aggiungeremo un Copyright all'area footer del nostro modello utilizzando un Impact Hook. Nell'ampia casella intitolata "Inserisci HTML personalizzato, JavaScript e testo qui" aggiungi il seguente testo:

Copyright © 2010 Impact Page Builder

Nella casella sopra intitolata "Salva hook box" seleziona "first-template" nel primo menu a discesa e in_footer nel secondo menu a discesa. Ora fai clic su "Salva casella di aggancio" per salvare il contenuto e la posizione.

Menu di navigazione personalizzato

WordPress offre una potente funzionalità del menu di navigazione personalizzato. È questa funzione che utilizzerai per aggiungere menu di navigazione ai tuoi modelli di pagina di impatto. Creiamo ora un menu per poterlo aggiungere al tuo modello.

Sotto la sezione "Aspetto" nella barra laterale sinistra fai clic su "Menu".

Nel campo "Nome menu", dove compare "Inserisci nome menu qui", digita "First Nav", quindi fai clic sul pulsante "Crea menu".

A sinistra vedrai che puoi aggiungere diversi tipi di pagine al tuo menu di navigazione personalizzato. Nella sezione "Pagine" fai clic su "Visualizza tutto", quindi seleziona "Casa" e "Informazioni". Ora fai clic sul pulsante "Aggiungi al menu" per aggiungere queste pagine al tuo menu personalizzato.

Successivamente, sotto "Link personalizzati", digitare //impactpagebuilder.com nel campo URL e "Impatto" nel campo "Etichetta". Ora fai clic sul pulsante "Aggiungi al menu".

Dopo aver aggiunto pagine al menu personalizzato, fai clic sul pulsante "Salva menu" sulla destra.

Aggiungi un menu personalizzato Widget:

Ora che abbiamo creato un menu personalizzato, dobbiamo aggiungerlo al nostro modello.

Fai clic su "Widget" nella sezione "Aspetto" nella barra laterale sinistra.

Nella sezione Aspetto »Widget andiamo avanti e aggiungiamo un widget all'area Widget Sidebar del tuo modello. Individua l'area del widget "Prima barra laterale". Ora individuare il widget "Calendario" sotto "Widget disponibili" e trascinarlo in questa area Widget barra laterale e quindi fare clic sul pulsante "Salva".

Assegnazione di un modello di impatto a una pagina o a un post

È possibile applicare i modelli di impatto a entrambi i post e le pagine.

Per questo tutorial lo aggiungeremo a una pagina. Quindi nella sezione "Pagine" nella barra laterale di sinistra fai clic su "Aggiungi nuovo". Aggiungi il titolo e il contenuto della tua pagina come faresti con qualsiasi altra pagina di WordPress, quindi scorri la pagina verso il basso fino ad arrivare a "Impact Page Options".

Imposta l'opzione "Usa impatto per questa pagina?" Su "Sì" e seleziona il tuo modello di impatto (es. Primo modello) dal menu a discesa a destra. Quindi aggiungi il titolo della pagina, la descrizione meta e le parole chiave meta nei campi delle opzioni sottostanti.

Nota: Puoi anche aggiungere gli script di intestazione e piè di pagina per pagina se necessario.

Ora fai clic sul pulsante "Pubblica" per pubblicare la tua pagina di WordPress / Impatto.

In alto ora dovresti vedere un banner giallo con scritto "Pagina pubblicata. Visualizza la pagina ". Fai clic sul link "Visualizza pagina" per visualizzare la tua pagina di impatto dal vivo. Dovrebbe assomigliare a qualcosa di simile a questo:

Congratulazioni!

Hai appena creato il tuo primo Impact Custom Page Template e lo hai pubblicato sul tuo sito Web WordPress. Questo è solo un esempio.Il cielo è il tuo limite perché puoi creare pagine di destinazione dall'aspetto diverso come desideri con questo plugin. Quindi il tuo tema principale potrebbe essere una cosa e avere 15 pagine di destinazione diverse in esecuzione per promuovere 15 prodotti diversi. Questo è un ottimo plugin per tutti coloro che fanno marketing di affiliazione. Acquista subito Impact Page Builder.

L'impatto ci ha appena comunicato che è disponibile uno sconto del 20% se si utilizza il coupon "wpbeginner".

Guarda il video: Consigli per aumentare le vendite su Amazon Youtube

Like this post? Please share to your friends:
Lascia un commento

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: